/* The DKP shop's pages (Pages/Dkp, Components/Dkp): the points strip, the item tiles, an item's line, the tier badges
   (coloured the way loot reads its quality: gold, blue, green, grey), the character cards, and the officers' forms.
   The site's theme carries the panels, buttons and fields; only what's the shop's own is here. */

.area-dkp {
  --tier-main: #ffd100;
  --tier-secondary: #3d96ff;
  --tier-profession: #1eff00;
  --tier-open: #9d9d9d;
}
/* Mists Classic's Monks (pages.css has the rest of the classes' colours). */
.area-dkp .wc-MONK { color: #00ff98; }

/* ---- Tier badges: a numbered seal and the tier's name ---- */
.dkp-tier { --tc: var(--tier-open); display: inline-flex; align-items: center; gap: .32rem; padding: .08rem .5rem .08rem .12rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 12%, rgba(0, 0, 0, .25));
  color: color-mix(in srgb, var(--tc) 88%, white); font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; line-height: 1.35; vertical-align: middle; }
.dkp-tier b { display: inline-grid; place-items: center; width: 1.12rem; height: 1.12rem; border-radius: 50%; font-size: .68rem; font-family: var(--numerals, Georgia, serif);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 60%, white), var(--tc) 60%, color-mix(in srgb, var(--tc) 55%, black));
  color: #14100a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.dkp-tier[data-tier="main"] { --tc: var(--tier-main); }
.dkp-tier[data-tier="secondary"] { --tc: var(--tier-secondary); }
.dkp-tier[data-tier="profession"] { --tc: var(--tier-profession); }
/* On parchment: inks instead of glows. */
.recap .dkp-tier { color: color-mix(in srgb, var(--tc) 45%, #2c1c0b); background: color-mix(in srgb, var(--tc) 14%, transparent); border-color: color-mix(in srgb, var(--tc) 50%, #6a5034); }
.recap .dkp-tier[data-tier="main"] { --tc: #c08a00; }
.recap .dkp-tier[data-tier="secondary"] { --tc: #1d5fb8; }
.recap .dkp-tier[data-tier="profession"] { --tc: #2f8f12; }
.recap .dkp-tier[data-tier="open"] { --tc: #7a6a55; }

/* ---- Who an item is for, and a character ---- */
.dkp-for { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.dkp-class { border-color: color-mix(in srgb, currentColor 45%, transparent); background-color: color-mix(in srgb, currentColor 10%, transparent); }
.dkp-prof { color: #c9f7b8; border-color: rgba(30, 255, 0, .32); background-color: rgba(30, 255, 0, .07); }
.dkp-prof.is-secondary { color: #bfe3ff; border-color: rgba(90, 180, 255, .35); background-color: rgba(90, 180, 255, .08); }
.dkp-anyone { color: var(--text-2); }
.dkp-who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.dkp-who small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.dkp-who small .icon { vertical-align: -.1em; }
.dkp-who.is-missing { color: var(--muted); font-style: italic; }

/* ---- The points strip: the balance (gold, the page's hero), what's left to spend, requests, the characters ---- */
.dkp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.dkp-points > .panel + .panel { margin-top: 0; }
.dkp-points .viz-tile.is-hero .viz-tile-value { font-family: var(--numerals, Georgia, serif); font-size: 2.5rem; font-weight: 700; color: transparent;
  background: var(--wow-gold-text, linear-gradient(#fff3b8, #e3b24a)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
.dkp-points .viz-tile-value { font-family: var(--numerals, Georgia, serif); }
.dkp-roster-tile { display: grid; gap: .3rem; align-content: start; padding: .9rem 1rem .8rem; min-width: 0; }
.dkp-roster-tile .btn { justify-self: start; margin-top: .1rem; }

/* ---- Set up your characters first ---- */
.dkp-setup { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.dkp-setup h2 { margin: 0 0 .2rem; }
.dkp-setup p { margin: 0; }
.dkp-setup-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #ffe7a0;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), transparent 45%), radial-gradient(circle, #8a4fc4, #24103d);
  box-shadow: 0 0 0 2px #120a02, 0 0 0 3.5px #c99a3c, 0 0 22px -4px rgba(190, 120, 255, .7); }

/* ---- Your requests ---- */
.dkp-mine { margin-bottom: 1rem; }
.dkp-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dkp-req { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto 5.5rem 5rem; gap: .4rem .8rem; align-items: center; padding: .4rem .6rem;
  border: 1px solid var(--line); border-radius: 7px; background: rgba(0, 0, 0, .18); }
.dkp-req-item { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none !important; }
.dkp-req-item .wow-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkp-req-item:hover .wow-item { text-decoration: underline; }
.dkp-req-for { color: var(--muted); font-size: .85rem; min-width: 0; }
.dkp-req-place { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.dkp-req-place b { color: var(--text); font-family: var(--numerals, Georgia, serif); font-size: 1rem; }
.dkp-req-cost { text-align: right; font-weight: 700; color: var(--gold); font-size: .88rem; white-space: nowrap; }
.dkp-req.is-away { opacity: .6; }
.dkp-req.is-away .dkp-req-cost { color: var(--muted); }
.dkp-reqs.is-compact .dkp-req { grid-template-columns: minmax(0, 1fr) auto auto; }

/* ---- The shop's tiles ---- */
.dkp-filters { margin-top: .4rem; }
.dkp-filters select.input { width: auto; }
.dkp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.dkp-tiles > .panel + .panel { margin-top: 0; }
.dkp-tile { --qc: var(--q1); display: grid; gap: .6rem; align-content: start; color: inherit; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.dkp-tile:hover { transform: translateY(-2px); box-shadow: var(--wow-frame-shadow, var(--shadow)), 0 0 30px -10px var(--qc); }
.dkp-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dkp-tile-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.dkp-tile .wow-icon, .dkp-itemcard .wow-icon { box-shadow: 0 0 0 1px #000, 0 0 16px -4px var(--qc); }
.dkp-tile-name { display: grid; gap: .1rem; min-width: 0; }
.dkp-tile-name .wow-item { font-size: 1.02rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dkp-tile-name small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkp-tile:hover .dkp-tile-name .wow-item { text-decoration: underline; text-underline-offset: 3px; }
.dkp-tile-foot { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; color: var(--muted); font-size: .8rem; padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.dkp-tile-foot .icon { vertical-align: -.12em; }
.dkp-you { margin-left: auto; }

/* What something costs: the number in gold numerals, DKP under it (free: in green) */
.dkp-cost { display: grid; justify-items: end; line-height: 1; gap: .12rem; }
.dkp-cost b { font-family: var(--numerals, Georgia, serif); font-size: 1.4rem; font-weight: 700; color: var(--gold); text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 190, 40, .35); }
.dkp-cost small { font-size: .62rem; letter-spacing: .16em; color: var(--wow-label, var(--muted)); font-weight: 700; }
.dkp-cost.is-free b { color: var(--q2); font-family: var(--display); font-size: 1.1rem; text-shadow: 0 1px 0 #000, 0 0 12px rgba(30, 255, 0, .25); }
.dkp-cost-lg { justify-items: start; }
.dkp-cost-lg b { font-size: 2.2rem; }
.dkp-cost-lg.is-free b { font-size: 1.6rem; }

/* ---- How the line works (a scroll of parchment) ---- */
.dkp-how { padding: 1rem 1.3rem 1.1rem; margin-top: 1rem; max-width: 62rem; }
.dkp-how h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: 1.1rem; }
.dkp-how p { margin: .3rem 0 .5rem; }
.dkp-how-tiers { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .4rem 1.2rem; }
.dkp-how-tiers li { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.dkp-how-tiers .dkp-tier { justify-self: start; }

/* Numbers in the reading font: the display font's old-style figures read 0 as O and 10 as IO. */
.area-dkp h2 small, .dkp-num { font-family: var(--font); font-variant-numeric: tabular-nums; }
.dkp-num { font-weight: 700; }

/* ---- An item's page: its card, your request, its line ---- */
.dkp-item-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dkp-item-top > .panel + .panel { margin-top: 0; }
.dkp-itemcard { --qc: var(--q1); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.dkp-itemcard .wow-icon { width: 64px; height: 64px; border-radius: 8px; }
.dkp-itemcard-body { display: grid; gap: .6rem; min-width: 0; }
.dkp-itemcard .wow-itemfacts li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dkp-ask { display: grid; gap: .6rem; }
.dkp-ask h2 { margin-bottom: 0; }
.dkp-ask p { margin: 0; }
.dkp-mypos { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.dkp-mypos-place { font-family: var(--numerals, Georgia, serif); font-weight: 700; font-size: 2.2rem; line-height: 1; color: transparent;
  background: var(--wow-gold-text, linear-gradient(#fff3b8, #e3b24a)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
.dkp-why { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--text-2); font-size: .9rem; }
.dkp-options { display: grid; gap: .45rem; }
.dkp-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .65rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 7px; background: rgba(0, 0, 0, .2); cursor: pointer; transition: border-color .15s, background .15s; }
.dkp-option:hover { border-color: var(--line-2); }
.dkp-option.is-on { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 209, 0, .12), transparent 60%), rgba(0, 0, 0, .2);
  box-shadow: 0 0 18px -8px rgba(255, 190, 40, .7); }
.dkp-option input { accent-color: var(--gold); width: 16px; height: 16px; grid-row: span 2; }
.dkp-option-slot { margin-right: .3rem; font-family: var(--display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wow-label, var(--muted)); }
.dkp-option-tier { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.dkp-option-tier small { color: var(--muted); font-size: .8rem; }

.dkp-line-panel h2 { margin-bottom: .4rem; }
.dkp-line { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.dkp-line-row { display: grid; grid-template-columns: 2.2rem minmax(9rem, 1.1fr) minmax(0, 2fr) 6.5rem 6rem auto; gap: .35rem .9rem; align-items: center;
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(0, 0, 0, .2); }
.dkp-line-row.is-next { border-color: color-mix(in srgb, var(--gold) 65%, transparent); background: radial-gradient(90% 160% at 0% 50%, rgba(255, 209, 0, .1), transparent 55%), rgba(0, 0, 0, .2); }
.dkp-line-row.is-mine { box-shadow: inset 3px 0 0 var(--gold); }
.dkp-line-place { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--numerals, Georgia, serif); font-weight: 700; font-size: 1rem;
  color: #f3ead3; background: radial-gradient(circle at 35% 30%, #3c4050, #171922); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px rgba(201, 154, 60, .6); }
.dkp-line-row.is-next .dkp-line-place { color: #1f1302; background: radial-gradient(circle at 35% 30%, #fff4c0, #ffd100 55%, #a8742a); box-shadow: 0 0 0 1px #000, 0 0 14px -2px rgba(255, 190, 40, .8); }
.dkp-line-who { display: grid; gap: .1rem; min-width: 0; }
.dkp-line-who > span { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dkp-line-who small { color: var(--muted); font-size: .8rem; }
.dkp-line-tier { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; min-width: 0; }
.dkp-line-tier small { color: var(--text-2); font-size: .82rem; }
.dkp-line-points { display: grid; justify-items: end; text-align: right; }
.dkp-line-points b { font-family: var(--numerals, Georgia, serif); font-size: 1.1rem; }
.dkp-line-points small, .dkp-line-when small { color: var(--muted); font-size: .72rem; }
.dkp-line-when { display: grid; color: var(--text-2); font-size: .82rem; }
/* A request's note goes under it; the officers' buttons stay at the end of its first line. */
.dkp-line-note { grid-column: 2 / -1; grid-row: 2; margin-top: 0; font-size: .85rem; }
.dkp-line-actions { grid-column: -2 / -1; grid-row: 1; display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.dkp-award-confirm { font-size: 1rem; }

/* ---- What was given out ---- */
.dkp-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.dkp-award { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: start; padding: .55rem .1rem; border-bottom: 1px solid var(--line); }
.dkp-award:last-child { border-bottom: 0; }
.dkp-award-item { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none !important; min-width: 0; max-width: 18rem; }
.dkp-award-item .wow-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkp-award-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--gold); background: rgba(255, 209, 0, .1); border: 1px solid rgba(255, 209, 0, .3); }
.dkp-award-what { display: grid; gap: .15rem; min-width: 0; }
.dkp-award-what > span { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dkp-award-what .wow-said { margin-top: .1rem; font-size: .85rem; }
.dkp-award.is-undone .dkp-award-what > span:first-child, .dkp-award.is-undone .dkp-award-item { opacity: .55; text-decoration: line-through; }
.dkp-undone { color: var(--warning); }

/* ---- Standings ---- */
.dkp-standings td { vertical-align: middle; }
.dkp-standings .dkp-balance { font-family: var(--numerals, Georgia, serif); font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.dkp-standings tr.is-me td { background: rgba(255, 209, 0, .05); }
.dkp-standings .chip { margin-left: .3rem; }

/* ---- My DKP: the characters, the synced ones to fill them from, and history ---- */
.dkp-officer-note { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.dkp-chars { margin-bottom: 1rem; }
.dkp-chars > p { margin-top: -.3rem; }
.dkp-synced { margin: .2rem 0 1rem; padding: .7rem .8rem; border: 1px dashed rgba(214, 170, 72, .4); border-radius: 8px; background: rgba(0, 0, 0, .18); }
.dkp-synced h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .95rem; color: var(--wow-heading, var(--text)); }
.dkp-synced-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.dkp-synced-list li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.6fr) auto; gap: .3rem .8rem; align-items: center; }
.dkp-synced-who { display: grid; }
.dkp-synced-who small { font-size: .78rem; }
.dkp-synced-profs { display: flex; flex-wrap: wrap; gap: .25rem; }
.dkp-synced-use { display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.dkp-char-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.dkp-char { display: grid; gap: .7rem; padding: .85rem 1rem 1rem; border: 1px solid var(--line-2); border-radius: 9px; min-width: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 209, 0, .07), transparent 55%), rgba(0, 0, 0, .22); }
.dkp-char.is-secondary { background: radial-gradient(120% 90% at 0% 0%, rgba(61, 150, 255, .08), transparent 55%), rgba(0, 0, 0, .22); }
.dkp-char-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.dkp-char-slot { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tier-main); }
.dkp-char.is-secondary .dkp-char-slot { color: var(--tier-secondary); }
.dkp-char-card { display: grid; gap: .35rem; }
.dkp-char-name { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dkp-char-name b { font-size: 1.35rem; font-family: var(--display); font-weight: 400; text-shadow: var(--wow-ink-shadow, none); }
.dkp-char-what { color: var(--text-2); font-size: .9rem; }
.dkp-char-what .icon { vertical-align: -.12em; }
.dkp-char-empty { display: grid; gap: .5rem; justify-items: start; }
.dkp-char-empty p { margin: 0; }
.dkp-char-form { display: grid; gap: .7rem; }
.dkp-char-form .seg { flex-wrap: nowrap; }
.dkp-char-form .seg button:disabled { opacity: .35; cursor: not-allowed; }
.dkp-profs { border: 0; margin: 0; padding: 0; min-width: 0; }
.dkp-profs legend { padding: 0; margin-bottom: .35rem; }
.dkp-profs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .3rem .6rem; }
.dkp-profs-grid .check { padding: .2rem .45rem; border-radius: 5px; border: 1px solid transparent; }
.dkp-profs-grid .check.is-on { border-color: rgba(30, 255, 0, .3); background: rgba(30, 255, 0, .06); color: var(--text); }
.dkp-profs-grid .check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.dkp-history .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dkp-history td:first-child { white-space: nowrap; }
.dkp-kind[data-kind="award"], .dkp-kind[data-kind="refund"] { color: var(--q2); border-color: rgba(30, 255, 0, .35); }
.dkp-kind[data-kind="deduction"] { color: #ff8a6e; border-color: rgba(255, 74, 54, .45); }
.dkp-kind[data-kind="purchase"] { color: var(--gold); border-color: rgba(255, 209, 0, .45); }
.dkp-kind[data-kind="set"] { color: #bfe3ff; border-color: rgba(90, 180, 255, .45); }
.dkp-side { display: grid; gap: 1rem; align-content: start; }
.dkp-side > .panel + .panel { margin-top: 0; }

/* ---- The officers' forms: one member's points, an item, many members at once ---- */
.dkp-change { display: grid; gap: .7rem; }
.dkp-change .seg { justify-self: start; }
.dkp-change-sum { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: 0; color: var(--text-2); }
.dkp-change-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dkp-sections { margin: 0 0 1rem; }
.dkp-section-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.dkp-section-head h2 { margin: 0; }
.dkp-who-pick { max-width: 30rem; margin-bottom: .9rem; }
.dkp-editor-box { margin: 0 0 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid rgba(214, 170, 72, .45); border-radius: 9px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 209, 0, .07), transparent 55%), rgba(0, 0, 0, .25); }
.dkp-editor-box h3 { margin: 0 0 .7rem; color: var(--wow-heading, var(--text)); }
.dkp-editor { display: grid; gap: .8rem; }
.dkp-editor-what { display: grid; gap: .5rem; }
.dkp-editor-what > .btn { justify-self: start; }
.dkp-picked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(0, 0, 0, .2); }
.dkp-picked-name { display: grid; min-width: 0; }
.dkp-picked-name small { font-size: .8rem; }
.dkp-found { max-height: 22rem; overflow-y: auto; }
.dkp-found .wow-itemrow { width: 100%; font: inherit; text-align: left; cursor: pointer; grid-template-columns: auto minmax(0, 1fr); }
.dkp-hint { margin: -.3rem 0 0; }
.dkp-quality { flex-basis: 9rem !important; }
.dkp-classpick { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dkp-classpick .chip-btn span { font-weight: 700; }
.dkp-items-table td { vertical-align: middle; }
.dkp-items-table tr.is-away td { opacity: .6; }
.dkp-items-table tr.is-on td { background: rgba(255, 209, 0, .06); }
.dkp-items-name { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none !important; min-width: 12rem; }
.dkp-items-name > span { display: grid; }
.dkp-items-name small { font-size: .76rem; }
.dkp-bulk { display: grid; gap: .8rem; }
.dkp-bulk h2 { margin-bottom: 0; }
.dkp-reasons { margin-top: -.3rem; }
.dkp-bulk-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dkp-bulk-tools .input { max-width: 16rem; }
.dkp-bulk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .35rem; max-height: 26rem; overflow-y: auto; padding: .1rem; }
.dkp-bulk-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 7px; background: rgba(0, 0, 0, .2); cursor: pointer; }
.dkp-bulk-member:hover { border-color: var(--line-2); }
.dkp-bulk-member.is-on { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: rgba(255, 209, 0, .07); }
.dkp-bulk-member input { accent-color: var(--gold); width: 16px; height: 16px; }
.dkp-bulk-name { display: grid; min-width: 0; }
.dkp-bulk-name small { font-size: .78rem; font-weight: 600; }
.dkp-bulk-points { font-family: var(--numerals, Georgia, serif); color: var(--gold); font-weight: 700; }

@media (max-width: 1100px) {
  .dkp-line-row { grid-template-columns: 2.2rem minmax(0, 1fr) 6rem auto; }
  .dkp-line-place { grid-row: 1; }
  .dkp-line-who { grid-column: 2; grid-row: 1; }
  .dkp-line-points { grid-column: 3; grid-row: 1; }
  .dkp-line-tier { grid-column: 2 / -1; grid-row: 2; }
  .dkp-line-note { grid-row: 3; }
  .dkp-line-when { display: none; }
}
@media (max-width: 900px) {
  .dkp-item-top, .dkp-char-grid { grid-template-columns: minmax(0, 1fr); }
  .dkp-req { grid-template-columns: minmax(0, 1fr) auto; }
  .dkp-req-for { grid-column: 1; }
  .dkp-synced-list li { grid-template-columns: minmax(0, 1fr); }
  .dkp-synced-use { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .dkp-setup { grid-template-columns: auto minmax(0, 1fr); }
  .dkp-setup .btn { grid-column: 1 / -1; justify-self: start; }
  .dkp-line-row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .dkp-line-points { grid-column: 3; grid-row: 1; }
  .dkp-line-actions { grid-column: 2 / -1; grid-row: 4; justify-content: flex-start; }
  .dkp-award { grid-template-columns: minmax(0, 1fr) auto; }
  /* Tables become a card a row: what matters first, the rest wrapping under it with its label. */
  :is(.dkp-history, .dkp-items-table) thead { display: none; }
  :is(.dkp-history, .dkp-items-table), :is(.dkp-history, .dkp-items-table) tbody { display: block; }
  :is(.dkp-history, .dkp-items-table) tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem; padding: .6rem .1rem; border-bottom: 1px solid var(--line); }
  :is(.dkp-history, .dkp-items-table) td { padding: 0; border: 0; text-align: left !important; }
  :is(.dkp-history, .dkp-items-table) td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: .75rem; font-weight: 500; }
  .dkp-history .dkp-h-why, .dkp-items-table .dkp-i-what { flex-basis: 100%; }
  .dkp-items-table .dkp-i-what + td { flex-basis: 100%; }
  .dkp-items-table .actions { margin-left: auto; }
  .dkp-standings :is(.dkp-col-secondary, .dkp-col-waiting, .dkp-col-last) { display: none; }
  .dkp-award-item, .dkp-award-icon { grid-column: 1 / -1; }
  .dkp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dkp-points .viz-tile.is-hero { grid-column: 1 / -1; }
  .dkp-roster-tile { grid-column: 1 / -1; }
}

/* Small labels and asides that sit beside text (their gap is set here, not by the markup's spaces). */
.dkp-by { margin-left: .45rem; }
.dkp-roster-tile .dkp-option-slot { display: inline-block; min-width: 5.4rem; }
.dkp-officer-note .icon { flex: none; }
/* The toggle's hidden checkbox is placed absolutely: kept inside its toggle, so a table scrolled sideways can't push it past the page's edge. */
.dkp-items-table .toggle { position: relative; }
.dkp-items-table .num { white-space: nowrap; }