:root {
  --bg: #121014; --panel: #1c1920; --panel-2: #25212a; --line: #36303d;
  --text: #ece6dc; --muted: #9a92a3; --accent: #c8102e; --accent-2: #e8b04a;
  --ok: #4caf7a; --warn: #e8b04a; --bad: #d9534f;
  --tank: #6aa5ff; --healer: #5fd38d; --melee: #ff8f5a; --ranged: #c38bff;
  --log: #4fd1e0;
  --epic: #a335ee; --legendary: #ff8000; --rare: #0070dd; --uncommon: #1eff00;
  --radius: 8px;
}
/* The hidden attribute always hides, whatever display a class sets (scripts toggle it). */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 16px; }
.topbar { background: #0b0a0d; border-bottom: 2px solid var(--accent); }
.topbar .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: .04em; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.nav a { color: var(--muted); } .nav a.on, .nav a:hover { color: var(--text); text-decoration: none; }
.me { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.me img { width: 28px; height: 28px; border-radius: 50%; }
/* Officers' "View as member" switch on the role label, and the reminder banner while it's on (accounts.views.view_as). */
.role-menu { position: relative; }
.role-menu summary { cursor: pointer; list-style: none; }
.role-menu summary::-webkit-details-marker { display: none; }
.role-menu summary:hover { color: var(--text); }
.role-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: max-content; max-width: 240px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.view-as-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 12px 0; padding: 8px 14px;
  border: 1px solid var(--warn); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--text); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cols-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cols-8-4 { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.btn, button { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover, button:hover { border-color: var(--accent-2); text-decoration: none; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger, button.danger { color: var(--bad); }
.btn.sm, button.sm { padding: 3px 8px; font-size: .85rem; }
.discord { background: #5865f2; border-color: #5865f2; color: #fff; font-size: 1.05rem; padding: 10px 18px; }
input, select, textarea { background: #0f0d12; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit; max-width: 100%; }
form p { margin: 0 0 12px; } form label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 3px; }
.helptext { display: block; color: var(--muted); font-size: .8rem; }
.errorlist { color: var(--bad); margin: 0; padding-left: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.table-scroll { overflow-x: auto; }
/* Boss names: a wider column, and a long name is cut short (full name on hover) rather than wrapping and stretching the row (#87). */
.boss-cell { min-width: 11em; }
.boss-cell > span { display: block; max-width: 14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: 22px; height: 22px; border-radius: 4px; vertical-align: middle; border: 1px solid #000; background: #000; }
.icon.lg { width: 36px; height: 36px; }
.icon.xl { width: 64px; height: 64px; flex: none; }
/* The name sits on the line's baseline like the text around it, with the icon centred beside it (#29). An
   inline-flex box takes its baseline from its first item, the icon's bottom edge, which pushed text beside it
   down; centring the whole box lifted it instead. Baseline-aligning the text makes it the box's baseline. */
.toon { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.toon > span { align-self: baseline; }
/* Rows of one-line text with icons (the loot tables): cells line up on their text, not their middles. */
table.baseline td { vertical-align: baseline; }
tr.not-dropped { opacity: 0.4; } tr.not-dropped:hover { opacity: 0.75; }
/* Raid page section titles: a link to the section, copied on click (#43). */
.section-link { color: inherit; }
.section-link[data-copied]::after { content: "Link copied"; margin-left: 8px; font-size: .75rem; font-weight: 400; color: var(--ok); text-transform: none; letter-spacing: 0; vertical-align: middle; }
.toon-link { color: inherit; text-decoration: none; } .toon-link:hover span[style] { text-decoration: underline; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: .75rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.confirmed, .badge.done, .badge.imported, .badge.yes { color: var(--ok); border-color: var(--ok); }
.badge.late, .badge.tentative, .badge.queued, .badge.running { color: var(--warn); border-color: var(--warn); }
.badge.absent, .badge.failed, .badge.no { color: var(--bad); border-color: var(--bad); }
.badge.bench { color: var(--muted); }
.role-col { border-top: 3px solid var(--line); }
.role-col.tank { border-top-color: var(--tank); } .role-col.healer { border-top-color: var(--healer); }
.role-col.melee { border-top-color: var(--melee); } .role-col.ranged { border-top-color: var(--ranged); }
.role-col h2 { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.signup { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.signup:last-child { border-bottom: 0; }
.signup .srs { display: flex; gap: 3px; }
.signup .srs-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.signup > div:not(.srs-side) { min-width: 0; }
.q-epic { color: var(--epic); } .q-legendary { color: var(--legendary); } .q-rare { color: var(--rare); } .q-uncommon { color: var(--uncommon); }
.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li { padding: 10px 14px; border-radius: 6px; margin-bottom: 6px; background: var(--panel-2); border-left: 4px solid var(--accent-2); }
.messages .error { border-left-color: var(--bad); } .messages .success { border-left-color: var(--ok); } .messages .warning { border-left-color: var(--warn); }
.raid-card { display: block; color: var(--text); }
.raid-card:hover { text-decoration: none; border-color: var(--accent-2); }
.raid-card .when { font-size: 1.05rem; font-weight: 600; }
.stat { font-size: 1.6rem; font-weight: 700; }
.export { width: 100%; min-height: 140px; font-family: ui-monospace, monospace; font-size: .8rem; }
.comps { display: grid; gap: 16px; grid-template-columns: 260px 1fr; align-items: start; }
@media (max-width: 800px) { .comps { grid-template-columns: 1fr; } }
.comp-groups { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.group { display: flex; flex-direction: column; background: var(--panel-2); border-radius: 6px; padding: 8px; min-height: 60px; }
.group h4 { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
.group-handle { cursor: grab; user-select: none; } .group-handle:hover { color: var(--text); }
.group.swapping { opacity: .5; }
.group.swap-target { outline: 2px dashed var(--accent-2); outline-offset: -2px; }
/* The drop area fills the whole group (and the Unplaced panel), so a player can be dropped anywhere in it, not only
   next to the players already there (#30). */
.drop { min-height: 40px; flex: 1; }
.manager .group .drop { min-height: 120px; }
.manager .unplaced .drop { min-height: 160px; }
/* Display tags off (#161): the chips lose their status and assignment tags. */
.comp-display label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: inherit; }
.comp-display input[type=checkbox] { width: auto; margin: 0; }
.hide-tags .chip-badges, .hide-tags .chip-tags { display: none; }
/* The left bar's Tentative and Absent lists (#162): one compact row each, not draggable. */
.comp-side-list .side-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: .88rem; border-top: 1px solid var(--line); }
.comp-side-list .side-row:first-of-type { border-top: 0; }
.comp-side-list .side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-side-list .side-note { cursor: help; }
.chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin-bottom: 4px; background: #0f0d12; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 4px; font-size: .88rem; }
.manager .chip { cursor: grab; }
.chip.tank { border-left-color: var(--tank); } .chip.healer { border-left-color: var(--healer); }
.chip.melee { border-left-color: var(--melee); } .chip.ranged { border-left-color: var(--ranged); }
.sortable-ghost { opacity: .35; }
.role-tally { display: flex; gap: 10px; font-size: .85rem; }
.sr-picker summary { list-style: none; }
.sr-picker summary::-webkit-details-marker { display: none; }
.sr-picker[open] summary { display: none; }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; }
fieldset.field legend { color: var(--muted); font-size: .85rem; margin-bottom: 6px; padding: 0; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented label { margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 8px 16px; color: var(--muted); }
.segmented label + label span { border-left: 1px solid var(--line); }
.segmented input:checked + span { background: var(--accent); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.class-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.class-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 8px 4px; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--muted); font-size: .8rem; background: #0f0d12; }
.class-option[hidden] { display: none; }
.class-option input { position: absolute; opacity: 0; pointer-events: none; }
.class-option img { width: 40px; height: 40px; border-radius: 6px; border: 1px solid #000; filter: grayscale(.6) brightness(.8); transition: filter .1s; }
.class-option:hover img { filter: none; }
.class-option:has(input:checked) { border-color: var(--class-color); color: var(--class-color); background: var(--panel-2); }
.class-option:has(input:checked) img { filter: none; }
.class-option:has(input:focus-visible) { outline: 2px solid var(--accent-2); }
.raid-picker { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.raid-option { text-align: center; line-height: 1.2; }
.raid-option img { width: 48px; height: 48px; object-fit: cover; }
.raid-initials { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; border: 1px solid #000;
  background: var(--panel-2); color: var(--accent-2); font-weight: 700; letter-spacing: .5px; }
.raid-picker-heading { margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; color: var(--text); font-size: .95rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider { position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--line); transition: background .15s; flex: none; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .slider { background: var(--ok); }
.switch input:checked + .slider::after { transform: translateX(18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.status-filter button.badge { cursor: pointer; font: inherit; font-size: .75rem; padding: 1px 9px; }
.status-filter button.badge:hover { filter: brightness(1.25); }
.status-filter button[aria-pressed="true"] { background: currentColor; }
.status-filter button[aria-pressed="true"] { color: var(--bg) !important; }
.status-filter button.confirmed[aria-pressed="true"] { background: var(--ok); }
.status-filter button.late[aria-pressed="true"], .status-filter button.tentative[aria-pressed="true"] { background: var(--warn); }
.status-filter button.absent[aria-pressed="true"] { background: var(--bad); }
.status-filter button.bench[aria-pressed="true"] { background: var(--muted); }
.signup[hidden] { display: none; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table { margin: 0 0 .7em; }
.markdown ul, .markdown ol { padding-left: 1.3em; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-size: 1rem; margin: .8em 0 .4em; color: var(--accent-2); text-transform: none; letter-spacing: 0; }
.markdown code { background: #0f0d12; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .9em; }
.markdown pre { background: #0f0d12; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; overflow-x: auto; }
.markdown pre code { border: 0; padding: 0; }
.markdown blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--muted); }
.markdown hr { border: 0; border-top: 1px solid var(--line); }
dialog.modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
dialog.modal[open] { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 1000; }
dialog.modal:focus { outline: none; }
/* Our own backdrop: popups aren't opened with showModal(), so Wowhead tooltips can show above them (signup.js). */
.modal-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(5, 4, 8, .7); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; }
.icon-btn { background: none; border: 0; color: var(--muted); font-size: 1.1rem; padding: 4px 8px; }
.toon-picker, .spec-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pick-card, .spec-option { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; margin: 0; padding: 8px; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; background: #0f0d12; color: var(--text); }
.pick-card[hidden], .spec-option[hidden] { display: none; }
.pick-card input, .spec-option input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card > img, .spec-option > img { grid-row: span 2; width: 36px; height: 36px; border-radius: 6px; border: 1px solid #000; }
.pick-name { font-weight: 600; color: var(--class-color, var(--text)); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-sub { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.pick-sub .icon { width: 14px; height: 14px; }
.pick-card:hover, .spec-option:hover { border-color: var(--muted); }
.pick-card:has(input:checked), .spec-option:has(input:checked) { border-color: var(--class-color, var(--accent-2)); background: var(--panel-2); }
.pick-card:has(input:focus-visible), .spec-option:has(input:focus-visible) { outline: 2px solid var(--accent-2); }
.new-card .plus { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px dashed var(--muted); border-radius: 6px; color: var(--muted); font-size: 1.3rem; }
.new-card:has(input:checked) { border-color: var(--accent-2); }
/* One line like the toon cards beside it, or the wrapped text stretches the whole last row (#50). */
.new-card .pick-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-toon { border-left: 3px solid var(--accent-2); padding-left: 12px; margin-bottom: 14px; }
.alt-picker summary { cursor: pointer; display: inline-block; padding: 6px 12px; border: 1px dashed var(--muted); border-radius: 8px; color: var(--text); list-style: none; }
.alt-picker summary::-webkit-details-marker { display: none; }
.alt-picker summary:hover { border-color: var(--accent-2); }
.alt-picker[open] summary { margin-bottom: 4px; }
.alt-toon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.alt-name { font-weight: 600; min-width: 90px; }
.alt-option { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: .85rem; }
.alt-option[hidden] { display: none; }
.alt-option:has(input:checked) { border-color: var(--accent-2); background: var(--panel-2); }
.alts { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; opacity: .85; }
.chip { flex-wrap: wrap; row-gap: 3px; }
.chip-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status and Demon badges get their own row so a long name's ellipsis can't hide them (#81, #84). */
.chip-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
.chip-badges .badge { font-size: .65rem; padding: 0 4px; line-height: 1.35; }
/* An Absent player left in a comp stays there, flagged so it's noticed and swapped out. */
.chip.absent { border-left-color: var(--bad); opacity: .6; }
.chip-spec { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .icon.lg { width: 30px; height: 30px; flex: none; }
.chip .play-as { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding-left: 36px; }
.chip .play-as::before { content: "⇄"; color: var(--muted); font-size: .8rem; margin-right: 2px; }
.chip .play-as button { padding: 1px; line-height: 0; background: none; border: 1px solid transparent; border-radius: 4px; opacity: .5; cursor: pointer; }
.chip .play-as button:hover { opacity: 1; border-color: var(--muted); }
.chip .play-as button.on { opacity: 1; border-color: var(--accent-2); }
.chip .play-as .icon { width: 16px; height: 16px; }
.chip.alt-played { border-style: dashed; }
.segmented { flex-wrap: wrap; }
/* SR picker (#124): bosses on the left, the chosen boss's loot as a table; a drop-down replaces the list on phones. */
.sr-browser { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sr-cats { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 56px; }
.sr-cat { justify-content: space-between; gap: 8px; width: 100%; padding: 5px 9px; border-color: transparent; background: none; text-align: left; font-size: .88rem; color: var(--muted); }
.sr-cat:hover { color: var(--text); background: var(--panel-2); border-color: transparent; }
.sr-cat.on { color: var(--text); background: var(--panel-2); border-color: var(--line); border-left: 3px solid var(--accent-2); }
.sr-cat.empty { opacity: .4; }
.sr-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-cat-n { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.sr-cat-picks { background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 99px; }
.sr-browser.filtering .sr-cat-n { color: var(--accent-2); }
.sr-cat-select { display: none; }
.sr-table th, .sr-table td { padding: 4px 8px; }
.sr-table td { font-size: .9rem; }
/* Room between a reserved row's bar (3px, below) and its − button (#152). */
.sr-table .sr-qty { width: 1%; white-space: nowrap; padding-left: 9px; }
.sr-table .sr-type { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.sr-table .sr-drop { text-align: right; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.sr-table th.sr-drop { cursor: help; }
/* The ⓘ on a column heading with a tooltip, drawn so it stays sharp at small sizes (#152). */
.info-icon { width: 1em; height: 1em; vertical-align: -.15em; flex: none; }
.sr-table .sr-item a { cursor: pointer; }
.sr-table .sr-item a:hover { text-decoration: none; }
.sr-type-sm { display: none; }
.sr-group-head th { padding-top: 12px; color: var(--accent-2); border-bottom-color: var(--line); }
.item-pick:hover td { background: rgba(255, 255, 255, .025); }
.item-pick.picked td { background: var(--panel-2); }
.item-pick.picked td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
@media (max-width: 640px) {
  .sr-browser { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sr-cats { display: none; }
  .sr-cat-select { display: block; width: 100%; }
  .sr-table .sr-type, .sr-drop-full { display: none; }
  .sr-type-sm { display: block; color: var(--muted); font-size: .75rem; }
  .sr-table th, .sr-table td { padding: 4px 4px; }
}
.stepper { display: inline-flex; align-items: center; flex: none; }
.stepper .step { padding: 0 7px; line-height: 20px; border-radius: 4px; font-size: .9rem; }
.stepper .step:disabled { opacity: .3; cursor: default; }
.stepper input { width: 34px; padding: 1px 2px; text-align: center; margin: 0 3px; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.item-pick:not(.picked) .stepper input { color: var(--muted); }
.sr-icon { position: relative; display: inline-block; }
.sr-x { position: absolute; right: -4px; bottom: -4px; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; padding: 2px 3px; border-radius: 4px; }
.signup-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.signup-head .toon { gap: 8px; }
.signup-head .toon .icon { width: 28px; height: 28px; }
.signup-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500; color: var(--muted); }
.signup-meta .icon { width: 18px; height: 18px; }
.signup-head .badge { font-size: .75rem; font-weight: 500; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on, .tabs a:hover { color: var(--text); border-bottom-color: var(--accent); text-decoration: none; }
.person { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 6px; color: var(--text); }
.person:hover { background: var(--panel-2); text-decoration: none; }
.person .badge { margin-left: 4px; }
.person-toons { display: block; font-size: .85rem; margin-top: 2px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.avatar.lg { width: 64px; height: 64px; }
.contest .bar-col { width: 34%; min-width: 160px; }
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar { display: block; height: 12px; min-width: 2px; background: var(--accent-2); border-radius: 0 4px 4px 0; }
.bar-value { color: var(--text); font-variant-numeric: tabular-nums; font-size: .9rem; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand img { display: block; }
.brand:hover { text-decoration: none; }
.segmented a { text-decoration: none; }
.segmented a span { display: block; padding: 8px 16px; color: var(--muted); }
.segmented a + a span { border-left: 1px solid var(--line); }
.segmented a span.on { background: var(--accent); color: #fff; }
.btn.current { border-color: var(--accent); color: var(--text); background: var(--panel-2); }
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pagination [aria-disabled="true"] { opacity: .4; cursor: default; }
/* A toon (icon + name) followed by extra text/badges in a table cell, all on one centred line. */
.toon-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raid-art { flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.raid-card.has-art { display: flex; gap: 14px; align-items: center; }
.raid-card.has-art > div { flex: 1; min-width: 0; }
.raid-art { border-radius: 12px; border: 2px solid #8a5a1a; object-fit: cover; }
.raid-hero { height: 200px; margin: -4px 0 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background-size: cover; background-position: center 40%; position: relative; overflow: hidden; }
.raid-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(18, 16, 20, .75)); }
@media (max-width: 600px) { .raid-hero { height: 120px; } }
.brand img { border-radius: 7px; }
.login-logo { display: block; margin: 0 auto 10px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.player { color: var(--muted); font-weight: 400; font-size: .9em; margin-left: 4px; }
.signed-as { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; font-size: .85rem; font-weight: 600; background: var(--panel-2); }
.signed-as .icon { width: 20px; height: 20px; border-radius: 50%; }

/* Manage > account: officer toon controls */
.toon-admin { flex-wrap: wrap; }
.toon-admin form { margin: 0; }
.move-toon { display: inline-flex; align-items: center; gap: 4px; }
.move-toon summary { list-style: none; cursor: pointer; }
.move-toon summary::-webkit-details-marker { display: none; }
.move-toon[open] summary { display: none; }
.move-toon select { padding: 3px 6px; max-width: 200px; }
.notice { padding: 8px 12px; border-radius: 6px; background: var(--panel-2); border-left: 4px solid var(--warn); margin: 0 0 12px; }

/* Long raid notes: collapsed with a fade and a "Show more" toggle */
.collapsible-body { max-height: 220px; overflow: hidden; position: relative; }
.collapsible:not(.open) .collapsible-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(to bottom, transparent, var(--panel)); pointer-events: none;
}
.collapsible.open .collapsible-body { max-height: none; }
.collapsible-toggle {
  display: block; width: 100%; margin-top: 4px; padding: 6px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; color: var(--accent-2); font-weight: 600; cursor: pointer;
}
.collapsible-toggle:hover { border-color: var(--accent-2); }
.sync-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sync-groups h3 { margin: 0 0 8px; }

/* Upcoming raids agenda: day headers, then raids by start time */
.agenda-day { margin-bottom: 20px; }
.agenda-date { font-size: 1.05rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.agenda-date .muted { font-weight: 400; }
/* Raid cards: raid art banner with time and title, roster fill, your signup, officer links (raids/list.html). */
.raid-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.raid-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.raid-card.live { border-color: var(--ok); }
.raid-card-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 104px; padding: 12px 14px;
  background: var(--panel-2) center 35% / cover no-repeat; color: var(--text); }
.raid-card-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 12, .92) 8%, rgba(10, 8, 12, .25) 75%); }
.raid-card-art > * { position: relative; }
.raid-card-art:hover { text-decoration: none; }
.raid-card-art:hover h3 { color: var(--accent-2); }
.raid-card-art h3 { margin: 0; font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--text); text-shadow: 0 1px 3px #000; text-wrap: balance; }
.raid-card-when { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.raid-card-when strong { font-size: 1.05rem; color: var(--text); margin-right: 2px; }
.raid-card-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; flex: 1; }
.raid-fill { display: flex; flex-direction: column; gap: 5px; }
.raid-fill-bar { display: block; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.raid-fill-bar > span { display: block; height: 100%; max-width: 100%; background: var(--accent-2); border-radius: 3px; }
.raid-fill-bar.full > span { background: var(--ok); }
.raid-card-you { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
/* Compact agenda view of the raids list: one row per raid. */
.raid-view { margin: 0; }
.raid-agenda { padding: 4px 16px; }
/* The raid and your-signup columns share the spare width equally, so the fill bar sits in the same place on every row,
   however long the toon name or however many buttons (#32). */
.agenda-row { display: grid; grid-template-columns: 70px 44px minmax(0, 1fr) 130px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row-time { font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.agenda-row-time strong { font-size: 1.05rem; }
.agenda-row .raid-art { width: 44px; height: 44px; }
.agenda-row-raid { display: flex; flex-direction: column; min-width: 0; }
.agenda-row-raid a { color: var(--text); }
.agenda-row-fill { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.agenda-row-fill .raid-fill-bar { flex: 1; }
.agenda-row-count { min-width: 3.2em; text-align: right; }
.agenda-row-you { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.agenda-row-you .signed-as { border: 0; background: none; padding: 0; }
.agenda-row-admin { display: flex; gap: 12px; }
@media (max-width: 760px) {
  .agenda-row { grid-template-columns: 52px 36px minmax(0, 1fr) auto; gap: 10px; }
  .agenda-row .raid-art { width: 36px; height: 36px; }
  .agenda-row-you, .agenda-row-admin { grid-column: 3 / -1; justify-content: flex-start; }
}
.raid-card-you .signed-as { border: 0; background: none; padding: 0; font-size: .9rem; }
.raid-card-actions { gap: 6px; }
.raid-card-admin { display: flex; gap: 16px; padding: 8px 14px; background: var(--panel-2); border-top: 1px solid var(--line); }
.live-badge { color: var(--ok); border-color: var(--ok); }
.agenda { margin-top: 12px; }
.guild-field input { width: 100%; max-width: 340px; }
.raid-instance { color: var(--text); }

/* Toon gear from the armory, character-sheet order */
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; margin-top: 10px; }
.gear-slot { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.gear-slot a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-slot-name { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.gear-enchant { color: var(--ok); }
.gear-now { font-weight: 600; }
.gear-alt { display: flex; flex-direction: column; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); opacity: .85; }
.gear-alt a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-alt-label { color: var(--muted); font-style: italic; }
.talents { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; color: var(--muted); }
.talent-spec.active { color: var(--text); }
.gear-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.gear-tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 12px; color: var(--muted); font-weight: 600; cursor: pointer; }
.gear-tab.on { color: var(--text); border-bottom-color: var(--accent); }
button.primary-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
/* A flex row so the names sit level with the label; each name carries its own comma so it wraps with it (#95). */
.absent-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 8px; color: var(--muted); }
.absent-line .toon { font-weight: 500; gap: 4px; } .absent-line .icon { width: 16px; height: 16px; }
/* Can't make it / Mark absent under a signup's Change form: its own form, set apart from Save. */
.signup-absent { justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.signup-absent .muted { flex: 1; min-width: 200px; }

/* Parses: Warcraft Logs percentile colours */
.p-grey, .p-none { color: #9d9d9d; } .p-green { color: #1eff00; } .p-blue { color: #0070ff; }
.p-purple { color: #a335ee; } .p-orange { color: #ff8000; } .p-pink { color: #e268a8; } .p-gold { color: #e5cc80; }
.parse-table { font-variant-numeric: tabular-nums; }
.parse-table th, .parse-table td { white-space: nowrap; }
.parse-table td.num, .parse-table th.num { text-align: right; }
.parse-table td.num b { display: block; }
.parse-table td.num .pct { font-size: .8rem; font-weight: 700; }
.parse-table td.overall, .parse-table th.overall { border-left: 2px solid var(--line); }
.parse-table tr > :first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
/* SR gear check (officers) */
ul.plain { list-style: none; padding: 0; margin: 4px 0; }
ul.plain li { margin: 3px 0; }
.gear-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
table.gear-check td { padding: 3px 8px; }
table.gear-check tr.tier-piece td { background: rgba(80, 200, 120, .06); }
.gear-actions { margin-top: 14px; flex-wrap: wrap; gap: 8px; }
button.badge.gear-flag { cursor: pointer; font: inherit; font-size: .7rem; line-height: 1.5; padding: 0 6px; white-space: nowrap; }
.gear-flag.review { color: var(--warn); border-color: var(--warn); }
.gear-flag.approved { color: var(--ok); border-color: var(--ok); }
dialog.modal.modal-wide { width: min(1000px, calc(100vw - 32px)); }
.sr-check { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: .85rem; line-height: 1; }
button.sr-check.review { color: var(--warn); }
button.sr-check.approved { color: var(--ok); }
.gear-flag.ok { color: var(--ok); border-color: var(--line); }
.sr-log { margin-top: 12px; }
.sr-log summary { cursor: pointer; color: var(--muted); }
.sr-added { color: var(--ok); }
.sr-removed { color: var(--bad); }
/* Player profile */
.profile-toons { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; }
.sparkline { width: 100%; min-width: 600px; height: auto; display: block; }
.sparkline .grid-line { stroke: var(--line); stroke-width: 1; }
.sparkline .grid-label { fill: var(--muted); font-size: 13px; }
.sparkline .trend-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline .trend-dot { fill: currentColor; stroke: var(--panel); stroke-width: 2; }
.sparkline .hit { fill: transparent; cursor: pointer; }
.sparkline a:hover .trend-dot { stroke: var(--text); }
/* Officer "Add raider" picker */
.player-filter { width: 100%; margin-bottom: 8px; }
.player-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.player-option { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; color: var(--text); }
.player-option:hover, .player-option:focus-visible { background: var(--panel-2); text-decoration: none; }
.player-option .avatar { grid-row: span 2; }
.player-option-name { font-weight: 600; }
/* Error pages (404/403/500): WoW UI error text, item tooltips and the death dialog */
.err { max-width: 560px; margin: 24px auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.err h1 { font-family: "Friz Quadrata TT", "Friz Quadrata", Georgia, serif; font-size: 1.9rem; color: var(--accent-2); letter-spacing: .02em; margin-top: 10px; }
.err-lead { max-width: 440px; margin: 0 0 22px; }
.err-actions { justify-content: center; margin-top: 22px; }
.err-code { font: 900 clamp(5rem, 22vw, 9rem)/1 Georgia, serif; letter-spacing: .04em; color: transparent;
  background: linear-gradient(180deg, #ffe6a8 0%, var(--accent-2) 45%, #7a4a12 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(200, 16, 46, .45)) drop-shadow(0 3px 0 #000); animation: err-float 4s ease-in-out infinite; }
@keyframes err-float { 50% { transform: translateY(-6px); } }
.ui-error { color: #ff2020; font: 600 1.15rem/1.3 "Friz Quadrata TT", Georgia, serif; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, .8);
  margin: 0 0 12px; animation: ui-error 5s ease-out both; }
@keyframes ui-error { 0%, 60% { opacity: 1; } 100% { opacity: .35; } }
.wow-tip { text-align: left; min-width: 260px; max-width: 340px; padding: 9px 12px; color: #fff; font-size: .9rem; line-height: 1.45;
  background: rgba(4, 8, 22, .94); border: 2px solid #8a8f9c; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, .6); }
.wow-tip .tip-name { font-size: 1.05rem; font-weight: 600; }
.wow-tip .q-poor { color: #9d9d9d; } .wow-tip .q-common { color: #fff; } .wow-tip .q-epic { color: var(--epic); }
.wow-tip .tip-red { color: #ff2020; }
.wow-tip .tip-green { color: #1eff00; }
.wow-tip .tip-green code { color: inherit; word-break: break-all; }
.wow-tip .tip-flavor { color: #ffd100; }
.wow-tip .coin { display: inline-flex; align-items: center; gap: 3px; }
.wow-tip .coin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0b27a, #a0522d); }
body.ghost { min-height: 100vh; background: radial-gradient(ellipse at 50% 30%, #2a3540 0%, #121418 70%) fixed; }
body.ghost main { filter: grayscale(.35); }
.death-dialog { width: min(420px, 100%); padding: 22px 22px 14px; background: rgba(8, 6, 4, .92); border: 2px solid #b08a3a; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #000, 0 0 40px rgba(120, 170, 220, .25); }
.death-dialog h1 { margin: 0 0 10px; }
.death-dialog .err-actions { margin: 6px 0 10px; }
/* Raid stats from the logs */
.raid-stats .stat-tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.raid-stats .stat-lists { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 16px; }
.raid-stats .stat-lists h3 { margin-bottom: 6px; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 3px 0; }
.stat-row .stat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row .stat-value { font-variant-numeric: tabular-nums; }
.stat-row .bar-track { grid-column: 1 / -1; height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.stat-row .bar-track .bar { height: 100%; border-radius: 2px; }
.stat-row .stat-sub { grid-column: 1 / -1; }
/* Finished raid: SR table shows only the won items and their winners until expanded */
.sr-collapsed .sr-other, .sr-collapsed .sr-full { display: none; }
.sr-table:not(.sr-collapsed) .sr-short { display: none; }
.sr-toggle { margin-top: 8px; }
.raid-stats .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.raid-stats .stat-view { display: contents; }
.raid-stats .stat-view-note { margin: 4px 0 12px; }
.raid-stats .stat-rankings-head { margin: 20px 0 8px; }
.rank-table th a { color: inherit; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; position: relative; }
.seg button:disabled { opacity: .5; cursor: default; }

/* A spec or class icon that opens the toon's gear popup (signup list, profiles, toon lists). */
.spec-gear { display: inline-flex; border-radius: 6px; flex: none; }
.spec-gear:hover .icon, .spec-gear:focus-visible .icon { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Your signup: your SRs as the SR table, then Choose soft reserves and Opt out side by side. An open picker takes
   the whole row and has its own Opt out by Save (#153), so this one hides. */
.my-srs-head { margin-bottom: 4px; }
.my-srs { margin-bottom: 12px; }
.sr-actions { align-items: flex-start; }
.sr-actions .sr-picker[open] { flex-basis: 100%; order: 1; }
.sr-actions:has(> .sr-picker[open]) > .sr-opt-out { display: none; }
.sr-save { justify-content: flex-end; }
/* On a phone the two buttons get a line of their own, each as wide as it can be. */
@media (max-width: 640px) {
  .sr-save { flex-basis: 100%; }
  .sr-save button { flex: 1 1 auto; justify-content: center; }
}
button.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; }
button.link-btn:hover { color: var(--text); }
.badge.demon { color: #c77dff; border-color: #c77dff; }
.demon-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; cursor: pointer; }
.demon-check input[type=checkbox] { width: auto; margin: 0; }
/* Your signup: why your SRs need an officer to check them. */
.my-sr-check { padding: 8px 12px; border-radius: 6px; background: var(--panel-2); border-left: 4px solid var(--warn); margin: 0 0 12px; }
.my-sr-check.approved { border-left-color: var(--ok); }
.my-sr-check p { margin: 0 0 4px; } .my-sr-check ul { margin: 0 0 6px; padding-left: 20px; }
/* Signup sheet: toons in the log who didn't sign up (after the raid), and Tentative or Late signups, get a bar in
   the panel's margin (no padding, so the row lines up with the others) instead of a badge (#96). */
.signup.from-log, .signup.warn { position: relative; }
.signup.from-log::before, .signup.warn::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: -9px; border-left: 3px solid var(--log); border-radius: 2px; }
.signup.warn::before { border-left-color: var(--warn); }
.badge.from-log { color: var(--log); border-color: var(--log); }
/* Raid page: the Signups panel grows to the Raid info panel's height beside it, the legend (if any) under it (#151).
   Stacked on a phone, the column is only as tall as what's in it, so nothing grows. */
.signup-side { display: flex; flex-direction: column; }
.signup-side > #signup { flex: 1; }
/* The legend under the Signups panel: a swatch of each bar. */
.legend { padding: 12px 16px; }
.legend h3 { margin-bottom: 6px; }
.legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.legend li { display: flex; align-items: baseline; gap: 8px; }
.legend .swatch { flex: none; width: 3px; height: 1em; border-radius: 2px; align-self: center; box-shadow: inset 0 0 0 1px var(--line); }
.legend .swatch.from-log { background: var(--log); box-shadow: none; }
.legend .swatch.warn { background: var(--warn); box-shadow: none; }
/* Signups panel: Show guild / Show player name (#97); the role columns hide what's switched off. */
.signup-display { margin-top: 10px; gap: 14px; }
.signup-display label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: inherit; }
.signup-display input[type=checkbox] { width: auto; margin: 0; }
.signup-cols.hide-guild .signup .other-guild, .signup-cols.hide-player .signup .player { display: none; }
/* SR table: signups with no SRs yet, and those who opted out. */
tr.sr-missing td { border-top: 1px dashed var(--line); }
/* Signup list: a toon in another in-game guild. */
.other-guild { color: var(--muted); font-size: .75rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Signup row: name (player), <guild>, class - spec, then status badges and the note, beside a big spec icon. */
.signup-info { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.signup-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.signup-note { overflow-wrap: anywhere; }
/* Raid parse report: boss names angled so the columns stay narrow; the table fills the panel. */
.parse-table.angled { width: calc(100% - 4em); margin-right: 4em; }  /* full width, less room for the last angled name */
.parse-table.angled tr > :first-child { width: 1%; }  /* the player column hugs its names; bosses share the rest */
.parse-table th.boss { height: 8em; vertical-align: bottom; padding: 0 0 6px; text-align: center; min-width: 3.4em; }
.parse-table th.boss > span { display: inline-block; width: 1.2em; white-space: nowrap; transform: translateX(.6em) rotate(-45deg); transform-origin: 0 100%; }
.parse-table.angled td.num { text-align: center; padding-left: 10px; }
/* A toon with a big class icon beside its name and details, like the raid sheet (roster/_toon_card.html). */
.toon-card { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.toon-card-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
h1 .toon .icon { width: 44px; height: 44px; }
/* Top bar: on phones the links and account fold into a menu behind the ☰ button (static/js/nav.js). */
.nav-toggle { display: none; }
.nav-menu { display: contents; }
@media (max-width: 760px) {
  .topbar .wrap { gap: 10px; }
  .nav-toggle { display: block; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 6px;
                color: var(--text); font-size: 1.3rem; line-height: 1; width: 42px; height: 38px; padding: 0; }
  .nav-menu { display: none; width: 100%; }
  .topbar.nav-open .nav-menu { display: block; }
  .nav-menu .nav { flex-direction: column; gap: 0; }
  .nav-menu .nav a { padding: 11px 4px; border-top: 1px solid var(--line); font-size: 1.05rem; }
  .nav-menu .nav a.on { color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .nav-menu .me { padding: 12px 4px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .nav-menu .me form { margin-left: auto; }
}
/* SR change log: where each change came from. */
.badge.sr-source { white-space: nowrap; }
.badge.sr-source.discord { color: #8c9eff; border-color: #5865f2; }
.badge.sr-source.hub { color: var(--accent-2); border-color: var(--accent-2); }
.badge.sr-source.officer, .badge.sr-source.rejected, .badge.sr-source.item_rule { color: var(--warn); border-color: var(--warn); }
/* Parses leaderboard: All > Class > Spec pickers. */
.board-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.board-pills.specs { padding-left: 14px; border-left: 2px solid var(--class, var(--line)); }
.board-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--class, var(--muted)); font-size: .85rem; text-decoration: none; }
.board-pill .icon { width: 18px; height: 18px; }
.board-pill:hover { text-decoration: none; border-color: var(--class, var(--accent)); }
.board-pill.on { border-color: var(--class, var(--accent)); box-shadow: inset 0 0 0 1px var(--class, var(--accent)); color: var(--text); font-weight: 600; }
.gear-toon { margin-left: auto; white-space: nowrap; }
.gear-item { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gear-item .small { font-size: .72rem; padding-left: 22px; }
/* Sync tab: the "How often?" popup (attendance/_schedule_body.html). */
.schedule-section { margin: 16px 0 6px; }
.schedule-list { display: flex; flex-direction: column; }
.schedule-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.schedule-row p { margin: 0; }
.schedule-row.off { opacity: .6; }
.schedule-name { display: flex; flex-direction: column; gap: 2px; }
.schedule-when { color: var(--accent-2); font-size: .8rem; }
@media (max-width: 600px) { .schedule-row { grid-template-columns: 1fr; } }

/* Raid page "Mirrored in" note: a drawn icon, as the 🪞 emoji is missing from older emoji fonts (#34) */
.mirrored .mirror-icon { vertical-align: -2px; }

/* Grrgl, the hidden daily word game (/grrgl/, static/js/grrgl.js). Murloc-swamp green for hits. */
.grrgl { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.grrgl-head { text-align: center; }
.grrgl-head h1 { margin-bottom: 4px; letter-spacing: .04em; }
.grrgl-head p { margin: 0; text-wrap: balance; }
.grrgl-grid { display: grid; gap: 6px; }
.grrgl-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grrgl-tile { width: clamp(48px, 14vw, 60px); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--line);
  border-radius: 6px; font-size: 1.7rem; font-weight: 800; text-transform: uppercase; background: var(--panel); }
.grrgl-tile.filled { border-color: var(--muted); animation: grrgl-pop .1s; }
.grrgl-tile.hit { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }
.grrgl-tile.near { background: #b8892c; border-color: #b8892c; color: #fff; }
.grrgl-tile.miss { background: #2c2731; border-color: #2c2731; color: var(--muted); }
.grrgl-tile.flip { animation: grrgl-flip .5s ease both; }
.grrgl-row.shake { animation: grrgl-shake .35s; }
@keyframes grrgl-pop { 50% { transform: scale(1.08); } }
@keyframes grrgl-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
@keyframes grrgl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.grrgl-msg { min-height: 1.5em; margin: 0; font-weight: 600; text-align: center; white-space: pre-line; }
.grrgl-keys { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.grrgl-keyrow { display: flex; justify-content: center; gap: 5px; }
.grrgl-key { flex: 1 1 0; display: grid; place-items: center; text-align: center; max-width: 44px; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 6px; background: #4a4352;
  color: var(--text); font-weight: 700; font-size: .95rem; text-transform: uppercase; cursor: pointer; }
.grrgl-key.wide { max-width: 68px; flex-grow: 1.5; font-size: .75rem; }
.grrgl-key.hit { background: #3f8f4f; } .grrgl-key.near { background: #b8892c; } .grrgl-key.miss { background: #211d25; color: var(--muted); }
#grrgl-board, .grrgl-board { width: 100%; }
.grrgl-board { margin-top: 8px; }
.grrgl-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grrgl-board-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; }
.grrgl-board-list li.me .grrgl-board-who { color: var(--accent-2); font-weight: 700; }
.grrgl-board-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.grrgl-board-who .avatar { width: 26px; height: 26px; }
.grrgl-board-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.grrgl-mini { display: flex; flex-direction: column; font-size: 9px; line-height: 1.15; letter-spacing: -1px; }

/* Reports */
.report-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.report-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.report-card:hover { border-color: var(--accent); }
.report-filters { flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.report-filters label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); }
.report-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tr.warn td { background: rgba(230, 170, 40, .07); }
.report-table tr.bad td { background: rgba(220, 70, 70, .08); }
.report-table .trend-up { color: var(--ok); } .report-table .trend-down { color: var(--bad); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable[data-dir="asc"]::after { content: " ▲"; }
th.sortable[data-dir="desc"]::after { content: " ▼"; }
/* Data health: ignored rows (shown with "Show ignored") are greyed; Ignore opens a reason box in the cell. */
.report-table tr.ignored td { opacity: .55; }
.report-table .ignore-form summary { list-style: none; cursor: pointer; }
.report-table .ignore-form summary::-webkit-details-marker { display: none; }
.report-table .ignore-form form { margin-top: 6px; gap: 6px; flex-wrap: nowrap; }
.report-table .ignore-form input[type=text] { min-width: 160px; }
.report-check span { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: .9rem; padding-bottom: 6px; }
/* #122: SRs made out of the raid's limit on the raid list ("0/2"), or ✗ for opted out: same width either way. */
.sr-count { display: inline-block; min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.sr-count.none { color: var(--accent-2); }
.sr-count.opted-out { color: var(--muted); }
/* Documentation pages (/api/) */
.markdown.docs { max-width: 900px; line-height: 1.55; }
.markdown.docs h1 { font-size: 1.6rem; margin-top: 0; color: var(--text); }
.markdown.docs h2 { font-size: 1.25rem; margin-top: 1.6em; padding-top: .4em; border-top: 1px solid var(--line); }
.markdown.docs h3 { font-size: 1.05rem; margin-top: 1.2em; }
.markdown.docs table { display: block; overflow-x: auto; }
.markdown.docs .toc { background: #0f0d12; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin-bottom: 1em; }
.markdown.docs .toc ul { margin: 0; }
/* Manage → Loot tables (#53): one table per boss, rows edited in place, removed items folded away. */
.loot-index .num { text-align: right; width: 110px; font-variant-numeric: tabular-nums; }
.loot-table td { vertical-align: middle; }
.loot-table .num { text-align: right; width: 1%; font-variant-numeric: tabular-nums; }
.loot-table .loot-slot { white-space: nowrap; color: var(--muted); }
.loot-table .loot-classes { max-width: 180px; }
.loot-table .loot-comment { max-width: 280px; }
.loot-table .loot-actions { white-space: nowrap; text-align: right; width: 1%; }
.loot-table .loot-actions form { display: inline; }
.loot-row.removed td { opacity: .6; }
.loot-row.removed td.loot-actions { opacity: 1; }
.loot-sm { display: none; }
.loot-add td, .loot-row.editing td { background: var(--panel-2); }
.loot-edit { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.loot-edit label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); }
.loot-edit-item { align-self: center; min-width: 0; }
.loot-edit-id input { width: 280px; max-width: 100%; }
.loot-edit-comment { flex: 1 1 220px; }
.loot-edit-comment input { width: 100%; }
.loot-error { flex-basis: 100%; margin: 0; color: var(--bad); font-size: .85rem; }
.loot-removed-toggle { background: none; border: 0; padding: 0; color: var(--muted); font-size: .85rem; }
.loot-removed-toggle::before { content: "▸ "; }
.loot-removed-toggle[aria-expanded="true"]::before { content: "▾ "; }
.loot-removed-toggle:hover { color: var(--text); }
.sr-comment { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; margin-top: 2px; }
@media (max-width: 640px) {
  .loot-table .loot-slot, .loot-table .loot-classes, .loot-table .loot-comment { display: none; }
  .loot-sm-comment { color: var(--text); }
  .loot-sm { display: block; color: var(--muted); font-size: .75rem; }
  .loot-table th, .loot-table td { padding: 5px 4px; }
  .loot-edit-id { flex: 1 1 100%; }
  .loot-edit-id input { width: 100%; }
}
/* A raid's own SR table (#53): hard-reserved items listed but not selectable, hidden ones left out. */
.badge.sr-hard { color: var(--warn); border-color: var(--warn); }
.badge.sr-hidden { color: var(--muted); }
.item-pick.sr-hard td.sr-item, .item-pick.sr-hard td.sr-type, .item-pick.sr-hard td.sr-drop { opacity: .65; }
.item-pick.sr-hard .sr-comment { color: var(--text); }
.sr-hard-list { margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--warn); background: var(--panel-2); border-radius: 4px; }
.sr-hard-list ul { margin: 4px 0 0; padding-left: 18px; }
.sr-rules .sr-rule-boss { white-space: nowrap; color: var(--muted); }
.sr-rule-add { margin-top: 12px; padding: 10px; background: var(--panel-2); border-radius: 6px; }
.sr-rule-item select { max-width: 100%; }
.sr-rule-confirm h2 { font-size: 1.05rem; }
@media (max-width: 640px) {
  .sr-rules .sr-rule-boss, .sr-rules .sr-rule-srs { display: none; }
  .sr-rules .loot-actions { white-space: normal; }
  .sr-rules .loot-actions button { display: block; width: 100%; margin: 2px 0; }
  .sr-rule-item { flex: 1 1 100%; }
  .sr-rule-item select { width: 100%; }
}
/* Comp assignments: the Assignments panel under a comp's groups, tags on chips, and Manage → Assignments. */
.comp-assign { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.comp-assign h3 { margin: 0 0 6px; }
.assign-boss { margin-bottom: 8px; }
.assign-boss h4 { margin: 6px 0 4px; font-size: .8rem; color: var(--muted); }
.assign-role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 5px 8px; background: var(--panel-2); border-radius: 6px; margin-bottom: 4px; }
.assign-role.archived { opacity: .7; }
.assign-name { flex: 0 1 260px; min-width: 0; }
.assign-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.assign-count.full { color: var(--ok); }
.assign-note { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.assign-people { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 220px; min-width: 0; }
.assign-people form { display: contents; }
.assign-people select { max-width: 100%; padding: 2px 4px; font-size: .85rem; }
.assign-person { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; background: #0f0d12; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; }
.assign-remove { padding: 0 6px; border: 0; background: none; color: var(--muted); line-height: 1.2; }
.assign-remove:hover { color: var(--bad); }
.assign-error { margin: 0 0 6px; color: var(--bad); font-size: .85rem; }
.assign-new { margin-top: 8px; }
.assign-new summary { list-style: none; } .assign-new summary::-webkit-details-marker { display: none; }
.assign-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 8px; padding: 10px; background: var(--panel-2); border-radius: 6px; }
.assign-form label, .assign-edit-name, .assign-edit-slots { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); }
.assign-form select { max-width: 100%; }
.assign-form-name, .assign-edit-name { flex: 1 1 180px; } .assign-form-name input, .assign-edit-name input { width: 100%; }
.assign-form-slots input, .assign-edit-slots input { width: 70px; }
.assign-form-note { flex: 1 1 100%; } .assign-form-note input { width: 100%; }
.assign-form-help { flex-basis: 100%; margin: 0; }
.assign-list { margin: 0; padding-left: 18px; }
.assign-list li { margin-bottom: 2px; }
.chip-tags:empty { display: none; }
.chip-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.badge.assign { font-size: .65rem; padding: 0 5px; line-height: 1.35; color: var(--accent-2); border-color: var(--accent-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.assign-table .loot-actions form { display: inline-flex; gap: 4px; }
.my-assignments { margin: 10px 0 12px; padding: 6px 10px; border-left: 3px solid var(--accent-2); background: var(--panel-2); border-radius: 4px; }
.my-assignments ul { margin: 2px 0 4px; padding-left: 18px; }
@media (max-width: 640px) {
  .assign-name { flex-basis: 100%; }
  .assign-table .loot-actions { white-space: normal; }
}
/* The same columns under every boss, so the tables line up down the page. */
.assign-table { table-layout: fixed; width: 100%; }
.assign-table .assign-col-name { width: 30%; }
.assign-table .num { width: 80px; }
.assign-table .assign-col-actions { width: 230px; }
.assign-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.assign-table .loot-comment { max-width: none; }
@media (max-width: 640px) {
  .assign-table { table-layout: auto; }
  .assign-table .assign-col-name, .assign-table .assign-col-actions, .assign-table .num { width: auto; }
  .assign-actions { min-width: 112px; }
}
.assign-row:target td { background: var(--panel-2); }