/* ---------- Theme: edit these to re-skin ---------- */
:root {
  /* Brand colour: RAL 470-5 (RAL Effect). Screen values differ slightly by source
     (#AC2D4C / #B1435B); change --accent to fine-tune. */
  --accent: #ac2d4c;
  --accent-ink: #fff4f6;   /* text on top of --accent */
  --accent-text: #ee92a8;  /* lighter tint used for text/links on dark backgrounds */
  --bg: #130e11;
  --panel: #1b1418;
  --panel-2: #251b20;
  --line: #3a2a31;
  --text: #ebe5e3;
  --muted: #a39499;
  --gold: #d8c48a;         /* officer badge and points */
  --danger: #ff8a7a;
  --role0: #6a9be0;        /* first role in config.json (Tank) */
  --role1: #7fcf8f;        /* second role (Healer) */
  --role2: #e2a24a;        /* third role (DPS) */
  --role3: #c59be0;
  --role4: #e0c86a;
  --display: 'Marcellus', 'Palatino Linotype', Georgia, serif;
  --body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: .01em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
a { color: var(--accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden { display: none !important; }

/* buttons & fields */
.btn { background: var(--panel-2); border: 1px solid var(--line); padding: 7px 14px; border-radius: 6px; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 3px 10px; font-size: 14px; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; width: 100%; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; }
textarea[data-autogrow] { resize: none; overflow-y: hidden; max-height: 400px; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
.err { color: var(--danger); min-height: 1.4em; font-size: 14px; }

/* login */
#login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 10px; padding: 32px; }
.login-card h1 { margin-bottom: 4px; }
.login-card p { margin: 0 0 24px; }

/* shell */
#app { display: grid; grid-template-columns: 228px 1fr; min-height: 100%; }
nav.rail { background: var(--panel); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { padding: 0 8px 20px; margin-bottom: 8px; border-bottom: 2px solid var(--accent); }
.brand h2 { font-size: 24px; line-height: 1.15; }
.brand span { color: var(--muted); font-size: 14px; }
.rail a.nav { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; }
.rail a.nav:hover { background: var(--panel-2); }
.rail a.nav.active { background: var(--panel-2); border-left-color: var(--accent); }
.rail .who { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.badge-officer { color: var(--gold); border: 1px solid var(--gold); border-radius: 20px; padding: 0 8px; font-size: 12px; margin-left: 6px; }
main { padding: 32px 40px 64px; max-width: 1800px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

/* role chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muted)); }

/* composition strip */
.comp { margin-bottom: 20px; }
.comp .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel-2); gap: 2px; }
.comp .bar i { display: block; background: var(--c); }
.comp .legend { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; }

/* toolbar */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { max-width: 290px; }
.toolbar select { width: auto; }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 600; color: var(--muted); font-size: 14px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.dim td { opacity: .5; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--panel-2); }
.you { color: var(--accent-text); font-size: 13px; margin-left: 6px; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel > h3 { margin-bottom: 12px; }

/* events */
.events-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.ev-list { display: flex; flex-direction: column; gap: 6px; }
.ev-list h3 { margin: 14px 0 4px; font-size: 15px; color: var(--muted); font-family: var(--body); font-weight: 600; }
.ev-item { display: block; text-decoration: none; color: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ev-item:hover { border-color: var(--muted); }
.ev-item.active { border-color: var(--accent); background: var(--panel-2); }
.ev-item .t { font-weight: 600; }
.ev-item .s { font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.ev-title { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ev-title > div:first-child { flex: 1; min-width: 200px; }
.ev-meta { color: var(--muted); margin: 4px 0 12px; }
.ev-desc { white-space: pre-wrap; margin: 0 0 4px; }
.rsvp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rsvp-row:first-of-type { border-top: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.col h3 { display: flex; justify-content: space-between; border-bottom: 2px solid var(--c); padding-bottom: 6px; margin-bottom: 8px; font-family: var(--body); font-weight: 600; font-size: 15px; }
.mini { padding: 4px 0; display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.mini small { color: var(--muted); }
/* The merged roster row in the Going section: name/subclass/gearscore on the left, attendance status on the
   right - either a plain read-only chip, or (officers only) a live dropdown that replaces the old separate
   "change someone else's sign-up" picker entirely. --sc follows the same colour convention used for a
   player's own event status elsewhere (STATUS_TEXT/[data-st]). */
/* flex-wrap, not a fixed min-width squeeze: these party-size columns are often too narrow to fit a name and a
   dropdown ("Not attending" is the long one) on one line - wrapping the status control onto its own line below
   the name when needed keeps the name fully readable instead of the two fighting over width and the name losing. */
.roster-row { flex-wrap: wrap; row-gap: 2px; }
.roster-row > span:first-child { flex: 1 1 100px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row > span:first-child small { display: block; }
.status-chip, .status-pick { flex: 0 0 auto; border: 1px solid var(--sc); color: var(--sc); border-radius: 20px; font-size: 12px; }
.status-chip { padding: 2px 10px; white-space: nowrap; }
.status-pick { padding: 2px 6px; background: var(--panel-2); cursor: pointer; max-width: 100%; }
.status-chip[data-rst="yes"], .status-pick[data-rst="yes"] { --sc: #6fcf8b; }
.status-chip[data-rst="no"], .status-pick[data-rst="no"] { --sc: #eba23c; }
.status-chip[data-rst="none"], .status-pick[data-rst="none"] { --sc: #8a8a95; }
/* The 6-state version (once attendance is tracked - see ROSTER6 in app.js): participated/no-show are the two
   that matter most, so they get the clearest colours (green/red); the rest are muted variations on them. */
.status-chip[data-rst="participated"], .status-pick[data-rst="participated"] { --sc: #6fcf8b; }
.status-chip[data-rst="noshow"], .status-pick[data-rst="noshow"] { --sc: #e0617a; }
.status-chip[data-rst="noreply"], .status-pick[data-rst="noreply"] { --sc: #8a8a95; }
.status-chip[data-rst="noreply-att"], .status-pick[data-rst="noreply-att"] { --sc: #5fb8ba; }
.status-chip[data-rst="notattending"], .status-pick[data-rst="notattending"] { --sc: #eba23c; }
.status-chip[data-rst="signedoff-att"], .status-pick[data-rst="signedoff-att"] { --sc: #b08ae0; }
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.party { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.party h4 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 16px; display: flex; justify-content: space-between; }
.party .m { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; font-size: 15px; }
.party select { width: 74px; padding: 1px 4px; font-size: 13px; }

/* points */
.pos { color: var(--gold); }
.neg { color: var(--danger); }

/* dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; border-top: 3px solid var(--c, var(--accent)); }
.stat .k { color: var(--muted); font-size: 15px; }
.stat .v { font-family: var(--display); font-size: 46px; line-height: 1.1; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 20px; color: var(--muted); font-family: var(--body); }
.stat .s { color: var(--muted); font-size: 14px; }
.stat .bar { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.stat .bar i { display: block; height: 100%; background: var(--c, var(--accent)); }

/* The stats row (members always see this; leadership can pick it as an alternative to the
   Member-bar layout) now has all four tiles done as art cards instead of plain colored tiles -
   Members, Tank, Healer, DPS, each with its own matching banner (all 1672x941, same wordmark
   layout, just a different color scheme per role). The full image fills the whole tile, zoomed in
   (background-size 160%, not the native 100%) so the wordmark reads at a reasonable size even
   though these tiles are much narrower than the full-width cards elsewhere - 100% was tried first
   and made the word a barely-readable sliver, so this crops in on the center via
   background-position: center top, same idea as the dashboard's Member-bar-head strip but carried
   through the whole tile instead of just a header band. padding-top on the body scales with the
   zoom (30% at 100% scale, so 30% * 1.6 = 48% at this 160% scale) to keep clearing the wordmark at
   any tile width. The count/bar/subtitle sit on top of a dark gradient, same as the big cards. */
.stat-art { position: relative; overflow: hidden; padding: 0;
  background-size: 160% auto; background-position: center top; background-repeat: no-repeat;
}
.stat-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.25), rgba(10,7,9,.85) 65%, rgba(10,7,9,.95)); pointer-events: none; }
.stat-art-body { position: relative; z-index: 1; padding: 48% 18px 16px; }
.stat-members { background-image: url('/img/members-banner.png'); }
.stat-tank { background-image: url('/img/tank-tile.png'); }
.stat-healer { background-image: url('/img/healer-tile.png'); }
.stat-dps { background-image: url('/img/dps-tile.png'); }

/* Officer-only reworked "Guild name and numbers" panel: a slim Member bar, then five
   role columns naming who's in each instead of just a count (see statsOrHeroHtml). */
.member-bar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; min-width: 0; }
/* "Members" banner - unlike the other wordmark art, this one is a self-contained decorative
   strip rather than a card body growing underneath it: nothing overlaps the image, so it just
   shows the whole picture at its own native proportions (1672x941) and the count sits in a plain
   line right below it, the same way a muted subtitle sits under a plain page <h1> elsewhere. */
.members-banner {
  position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1672 / 941;
  background-image: url('/img/members-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
/* "Gear Threads" banner - same self-contained-strip treatment as .members-banner above (native
   proportions, nothing overlaid on the art itself), just its own image and aspect ratio (2212x711). */
.gearthreads-banner {
  position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 2212 / 711;
  background-image: url('/img/gearthreads-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}

/* A single character's gear thread: the five-section grid the user sketched out - a full-width screenshots
   strip on top, a tall chat column and a stack of three smaller panels (skill cores / questlog / folder)
   underneath it. One column on a narrow screen, in source order (screenshots, chat, then the side stack). */
.geargear-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.geargear-screens { grid-column: 1 / -1; }
.geargear-side { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .geargear-grid { grid-template-columns: 1fr; } }

/* Screenshots: a horizontal scroll-snap strip, one full-width slide per topic, with tab buttons above that
   just scroll the matching slide into view - no extra state to track, so it keeps working across a re-render
   (e.g. right after saving a note) without having to remember which slide was showing. */
.gear-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gear-tab { background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px; cursor: pointer; font-size: 14px; color: var(--text); }
.gear-tab:hover { border-color: var(--muted); }
.gear-tab.active { border-color: var(--accent, #c9a14a); color: var(--accent, #c9a14a); font-weight: 600; }
.gear-slides { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gear-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.gear-slide-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gear-shot { width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #000; }
.gear-slide textarea { min-height: 60px; }

/* Chat: a scrolling message list over a fixed-height panel, newest at the bottom (see the AFTER_RENDER hook
   in geargear.js that scrolls it down after every render, same idea as autosizeAll already runs there). */
.geargear-chat { display: flex; flex-direction: column; }
.gear-chat-list { flex: 1; min-height: 320px; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.gear-chat-msg { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel-2); }
.gear-chat-msg.me { border-color: var(--accent); }
.gear-chat-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.gear-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.gear-chat-form { display: flex; gap: 8px; align-items: flex-end; }
.gear-chat-form textarea { flex: 1; min-height: 38px; }

/* Upload popup's drag-and-drop zone (shared by the screenshot Upload/Replace button; see gearUploadDialog()
   in geargear.js). .over is toggled by the delegated dragover/dragleave listeners while a file is dragged
   over it. */
.gear-dropzone { border: 2px dashed var(--line); border-radius: 10px; padding: 36px 16px; text-align: center; transition: border-color .15s, background .15s; }
.gear-dropzone.over { border-color: var(--accent); background: var(--panel-2); }
.gear-dropzone-inner { display: flex; flex-direction: column; align-items: center; }

/* Folder: admins/coaches post, the player only ever views - see canPostFolder() server-side, which is why
   the composer below is simply absent from the HTML entirely for a plain member, not just disabled. */
.gear-folder-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gear-folder-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.gear-folder-form textarea { min-height: 50px; margin-bottom: 8px; }
/* The dashboard's compact "Member" header bar (above the class columns) uses the same artwork as
   a background, but cropped tight to just its top ~40% - the "MEMBERS" wordmark, its ornamental
   border and a little of the castle scene below - rather than the whole scene, since this is a
   slim header strip, not a full banner. aspect-ratio 1672:380 locks that crop in at any column
   width (background-size: 100% auto scales the full image to the box's width, and
   overflow:hidden on a shorter box just crops off the rest below, which never moves since the
   image is still anchored to the top). The extra room versus the plain wordmark-only crop is
   there on purpose: it gives the member count and its growth bar a proper patch of background to
   sit on, over a dark gradient fade for legibility, instead of being squeezed right under the title. */
.member-bar-head {
  position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1672 / 380; min-height: 150px;
  width: 100%; min-width: 0; max-width: 100%;
  background-image: url('/img/members-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px 22px;
}
.member-bar-head::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,0) 40%, rgba(10,7,9,.88) 75%, rgba(10,7,9,.94)); pointer-events: none; }
/* min-height keeps this readable at narrow widths: aspect-ratio alone would make the box short
   enough there that the bottom-right count/bar would collide with the gear icon's own corner
   (top right, see .sc-gear) - a fixed floor keeps the two corners apart at any width, and never
   shows blank space below the art since the image itself (scaled to the box's width) always
   renders taller than this floor at any width this box actually reaches. */
.member-bar-stats { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; min-width: 190px; }
.member-bar-count { font-family: var(--display); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.member-bar-count small { color: var(--muted); font-family: var(--body); font-size: 20px; }
.member-bar-bar { width: 100%; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.14); }
.member-bar-bar i { display: block; height: 100%; background: var(--accent); }
.member-bar-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* Each class column is a baked bordered-card illustration (title + crest art on top, a plain
   bordered panel below) rather than a plain CSS box. Drawn with no runtime border math needed:
   three background-image layers share the exact same `background-size: 100% auto` horizontal
   scale, so their border lines land on identical x-positions at any column width and the "seam"
   between layers is invisible. Listed first-to-last: [top-cap, bottom-cap, middle] - in CSS,
   earlier layers paint IN FRONT of later ones, so the two caps sit on top of (visually cover)
   the repeat-y middle tile at the exact places they overlap it, letting the middle show through
   only in the gap between them.
   The box's own height is never set explicitly - instead `padding-top`/`padding-bottom`
   percentages (computed from each card's own top-cap/bottom-cap pixel height over its own pixel
   width, since padding resolves against the *width* of its containing block, a CSS quirk used
   throughout this file) guarantee a minimum total height equal to both caps combined when the
   member list is empty or short (so the caps never collide or overlap each other), while letting
   the box grow freely - and the middle tile keep tiling into the newly exposed space - for a
   column with many members. */
.member-col {
  position: relative; min-width: 0; border-radius: 10px; overflow: hidden;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top center, bottom center, top center;
  background-size: 100% auto, 100% auto, 100% auto;
}
.member-col-tanks { background-image: url('/img/colcard-tanks-top.png'), url('/img/colcard-tanks-bot.png'), url('/img/colcard-tanks-mid.png'); padding-top: 88.16%; padding-bottom: 16.91%; }
.member-col-caster { background-image: url('/img/colcard-caster-top.png'), url('/img/colcard-caster-bot.png'), url('/img/colcard-caster-mid.png'); padding-top: 88.16%; padding-bottom: 16.91%; }
.member-col-melee { background-image: url('/img/colcard-melee-top.png'), url('/img/colcard-melee-bot.png'), url('/img/colcard-melee-mid.png'); padding-top: 88.16%; padding-bottom: 16.91%; }
.member-col-ranged { background-image: url('/img/colcard-ranged-top.png'), url('/img/colcard-ranged-bot.png'), url('/img/colcard-ranged-mid.png'); padding-top: 87.95%; padding-bottom: 16.87%; }
.member-col-oracleSeeker { background-image: url('/img/colcard-oracle_seeker-top.png'), url('/img/colcard-oracle_seeker-bot.png'), url('/img/colcard-oracle_seeker-mid.png'); padding-top: 88.59%; padding-bottom: 16.99%; }
.member-col-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.member-col-count { color: var(--muted); font-size: 12px; text-align: center; }
.member-col-group:not(:first-child) { border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; }
.member-col-sub { font-family: var(--display); font-size: 13px; letter-spacing: .02em; color: var(--text); opacity: .9; margin-bottom: 5px; }
.member-col-names { display: flex; flex-direction: column; gap: 4px; }
.member-bar-note { color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .member-bar-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shotcaller dashboard card: a corner "lightbar" (left + top edge) instead of the usual single
   top accent, so the session's state reads at a glance - a saturated neon edge with a soft glow,
   not the muted palette used for the loot-qualification rates elsewhere. Wine red while inactive,
   neon orange while starting, a darker (not mint) neon green once live. */
.sc-card {
  border-left-width: 3px !important; border-top-width: 3px !important;
  position: relative; overflow: hidden; text-align: center; padding: 0;
  /* The art covers the whole card now - button and data panels included - not just a strip up top.
     Scaled by WIDTH only (background-size: 100% auto), not "cover", and anchored to the top - a
     plain "cover" would scale against whichever of width/height is more constraining, which changes
     per state since the three states aren't the same height (the active state is taller, with its
     data panels), making the "SHOTCALLER" wordmark drift to a different vertical spot each time.
     Scaling by width alone means the image is always the same scale for a given card width regardless
     of its height, so the wordmark sits at the same spot from the top in every state. Below the
     image's own height, the card's plain dark background shows through (no-repeat) rather than the
     art stretching or tiling - which reads fine since the overlay below is already going dark there. */
  background-image: url('/img/shotcaller-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
/* Dark overlay so the status text, button and data panels stay readable over the art. */
.sc-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
/* Top padding is a PERCENTAGE, not a fixed px value, on purpose: percentage padding-top/bottom is
   defined by the CSS spec to resolve against the containing block's WIDTH, which is exactly how the
   background image above is scaled (background-size: 100% auto) - so this clears the "SHOTCALLER"
   wordmark by the same margin at any card size, instead of a fixed px gap that would be too small on
   a wide card or too large on a narrow one. The art is now a square (1254x1254) rather than the old
   2.5:1 banner, so its rendered height equals the card's width - the wordmark+ornament sit in about
   the top 31% of that square, hence ~35% of the card's width here, not the old banner's 20%. */
.sc-card-body { position: relative; z-index: 1; padding: 35% 20px 26px; }
/* Not scoped to .sc-card any more - any art-backed card (.sc-card, .lead-card, more later) puts its
   gear in the same corner the same way, as long as the card itself is position:relative. */
.sc-gear { position: absolute !important; top: 14px; right: 14px; z-index: 2; }
.sc-card.sc-inactive { border-left-color: #e0124f; border-top-color: #e0124f; box-shadow: -3px 0 14px -3px rgba(224,18,79,.75), 0 -3px 14px -3px rgba(224,18,79,.75); }
.sc-card.sc-starting { border-left-color: #ff9d0a; border-top-color: #ff9d0a; box-shadow: -3px 0 14px -3px rgba(255,157,10,.75), 0 -3px 14px -3px rgba(255,157,10,.75); }
.sc-card.sc-active { border-left-color: #0fa968; border-top-color: #0fa968; box-shadow: -3px 0 14px -3px rgba(15,169,104,.75), 0 -3px 14px -3px rgba(15,169,104,.75); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "Your Leadership" card - same rules as the Shotcaller card: full-card art scaled by width only and
   anchored to the top (not "cover") so the wordmark never drifts regardless of how much overview text
   is inside, a dark overlay for readability, and a percentage top padding so content clears the
   wordmark at any card width. This source image is portrait (1024x1536, taller than it is wide) rather
   than square, so once scaled to the card's width its rendered height is 1.5x the width - the
   wordmark+ornament occupy roughly the top 34% of the image's own height, which comes out to about
   51% of the card's width; rounded up to 54% for clearance. No lightbar here - this card doesn't have
   states to signal, unlike Shotcaller. */
.lead-card {
  position: relative; overflow: hidden; text-align: center; padding: 0;
  background-image: url('/img/leadership-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.lead-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
.lead-card-body { position: relative; z-index: 1; padding: 54% 20px 26px; text-align: left; }

/* "Daily schedule" card - same wordmark-clearance rules as the other art cards, but this one's
   height is pinned instead of content-driven: aspect-ratio locks the card to the exact same
   proportions the source image renders at (background-size: 100% auto already scales the image's
   height to match), so the artwork is always shown in full - never clipped short, never trailing
   off into bare gradient below it either. The event list lives in an absolutely-positioned body
   that fills that fixed box: the top padding-% clearance zone is left alone, and only .sched-list -
   everything below that zone - scrolls once there are more events than fit, so the background and
   the wordmark never move and are never scrolled over. Source image is portrait (1122x1402, ratio
   1:1.25); the "DAILY SCHEDULE" wordmark + ornament occupy roughly the top 28% of the image's own
   height, which at this ratio comes out to about 35% of the card's width once scaled; rounded up to
   35% for clearance (already has a small buffer built in). */
.sched-card {
  position: relative; overflow: hidden; padding: 0; aspect-ratio: 1122 / 1402;
  background-image: url('/img/schedule-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.sched-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
.sched-card-body { position: absolute; inset: 0; z-index: 1; padding-top: 35%; display: flex; flex-direction: column; }
.sched-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px 20px; text-align: center; }
.sched-item { border-top: 1px solid var(--line); padding-top: 12px; width: 100%; max-width: 320px; }
.sched-item:first-child { border-top: 0; padding-top: 0; }
.sched-title { display: block; font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; }
.sched-title:hover { text-decoration: underline; }
.sched-countdown { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sched-status { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sched-yes { color: #4fe3a0; font-weight: 600; }
.sched-no { color: #ff6b8a; font-weight: 600; }
.sched-attend { background: #0fa968; border-color: #0fa968; color: #06130d; }
.sched-attend:hover { filter: brightness(1.1); }
.sched-decline { background: #e0124f; border-color: #e0124f; color: #fff; }
.sched-decline:hover { filter: brightness(1.1); }
.sched-going { margin-top: 8px; font-size: 13px; }

/* "Guild info" card - same technique again: square source image (1254x1254, same proportions as
   the Shotcaller banner), scaled by width only and anchored to the top so the "GUILD INFO" wordmark
   never drifts regardless of how many categories/buttons are listed below it. Wordmark + ornament
   occupy roughly the top 28% of the image's own height, which at a 1:1 ratio is also 28% of the
   card's width; rounded up to 30% for clearance. */
.info-card {
  position: relative; overflow: hidden; padding: 0;
  background-image: url('/img/guildinfo-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.info-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
.info-card-body { position: relative; z-index: 1; padding: 30% 20px 26px; }

/* "Tasks" card - same technique, now with a taller portrait source image (1024x1536, ratio 1:1.5),
   scaled by width only and anchored to the top so the "TASKS" wordmark never drifts regardless of
   how many leaders/duties are listed below it. Wordmark + ornament occupy roughly the top 24% of
   the image's own height, which at this ratio comes out to about 36% of the card's width once
   scaled; rounded up to 36% for clearance (already has a small buffer built in). */
.tasks-card {
  position: relative; overflow: hidden; padding: 0;
  background-image: url('/img/tasks-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.tasks-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
.tasks-card-body { position: relative; z-index: 1; padding: 36% 20px 26px; }

/* "Qualified for loot" card - same technique: square source image (1254x1254), scaled by width
   only and anchored to the top so the "QUALIFIED FOR LOOT" wordmark never drifts regardless of how
   long the member list below it gets (search bar, loot rules, however many rows are shown).
   Wordmark + ornament occupy roughly the top 34% of the image's own height, which at a 1:1 ratio is
   also 34% of the card's width; rounded up to 35% for clearance. */
.loot-card {
  position: relative; overflow: hidden; padding: 0;
  background-image: url('/img/loot-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.loot-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.45), rgba(10,7,9,.82) 55%, rgba(10,7,9,.92)); pointer-events: none; }
.loot-card-body { position: relative; z-index: 1; padding: 35% 20px 26px; }
.sc-start-btn {
  margin-top: 14px; padding: 10px 28px; font-size: 16px; font-weight: 700; border-radius: 8px;
  background: #0fa968; color: #06130d; border: 1px solid #0fa968;
  box-shadow: 0 0 16px rgba(15,169,104,.55);
}
.sc-start-btn:hover { background: #14c47c; border-color: #14c47c; }
/* Stage 2 reuses the same button slot as Stage 1's "Start", but as an icon-only, orange, disabled
   control - sc-btn-morph plays once on mount so it reads as that green "Start" pill turning into
   this orange spinner, even though a full re-render actually swapped in a new element. */
.sc-starting-btn {
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: default;
  animation: sc-btn-morph .5s ease forwards;
}
.sc-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(10,7,9,.3); border-top-color: #2a1400;
  animation: sc-spin .8s linear infinite, sc-icon-pop .4s ease;
}
@keyframes sc-btn-morph {
  0% { width: 112px; border-radius: 8px; background: #0fa968; border-color: #0fa968; box-shadow: 0 0 16px rgba(15,169,104,.55); }
  100% { width: 48px; border-radius: 50%; background: #ff9d0a; border-color: #ff9d0a; box-shadow: 0 0 16px rgba(255,157,10,.55); }
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-icon-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* Stage 3: the icon morphs again - orange spinner circle -> red "Stop" pill - same move in reverse. */
.sc-stop-btn {
  margin-top: 14px; padding: 10px 28px; font-size: 16px; font-weight: 700;
  color: #fff; animation: sc-btn-morph-stop .5s ease forwards;
}
.sc-stop-btn:hover { background: #ff2066 !important; border-color: #ff2066 !important; }
@keyframes sc-btn-morph-stop {
  0% { width: 48px; border-radius: 50%; background: #ff9d0a; border-color: #ff9d0a; box-shadow: 0 0 16px rgba(255,157,10,.55); color: transparent; }
  100% { width: 112px; border-radius: 8px; background: #e0124f; border-color: #e0124f; box-shadow: 0 0 16px rgba(224,18,79,.55); color: #fff; }
}
/* The three data panels that land once a session is active - label fades in on its own (slow,
   opacity-only), its value box pops up a beat later, and each panel is staggered left-to-right via
   the --d custom property set inline per item, so they cascade in rather than all appearing at once. */
.sc-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; text-align: center; }
.sc-data-label { font-size: 13px; color: var(--muted); margin-bottom: 7px; opacity: 0; animation: sc-label-fade 1.1s ease forwards; animation-delay: var(--d, 0s); }
.sc-data-box {
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 14px 12px;
  font-family: var(--display); font-size: 21px; font-weight: 600;
  opacity: 0; transform: translateY(14px) scale(.95);
  animation: sc-box-in .5s ease forwards; animation-delay: calc(var(--d, 0s) + .15s);
}
@keyframes sc-label-fade { from { opacity: 0; } to { opacity: .85; } }
@keyframes sc-box-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.dash-grid .panel + .panel { margin-top: 0; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.leader { padding: 14px 0; border-top: 1px solid var(--line); }
.leader:first-of-type { border-top: 0; padding-top: 0; }
.leader-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.leader-head b { font-size: 18px; }
.rank-tag { border: 1px solid var(--accent); color: var(--accent-text); border-radius: 20px; padding: 0 9px; font-size: 13px; }
.leader-head .open { margin-left: auto; color: var(--muted); font-size: 14px; }
.duties { list-style: none; margin: 0; padding: 0; }
.duty { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.duty .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.duty.done .txt { color: var(--muted); text-decoration: line-through; }
.st { min-width: 96px; text-align: center; font-size: 13px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
button.st { cursor: pointer; }
button.st:hover { border-color: var(--muted); }
.duty.doing .st { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.duty.done .st { border-color: var(--role1); color: var(--role1); }
.x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.x:hover { color: var(--danger); }
.hosting { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.hosting a { color: var(--text); }
.add-duty { display: flex; gap: 8px; margin-top: 8px; }
.add-duty input { padding: 5px 10px; font-size: 15px; }

/* calendar */
.cal { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.cal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cal-head h2 { margin-right: auto; }
.cal-grid, .wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 6px 8px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal-dow:nth-child(7n), .cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell { min-height: 160px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cal-cell.out { background: rgba(0, 0, 0, .2); }
.cal-cell.out .cal-num { opacity: .45; }
.cal-cell.can-add, .wk-day.can-add { cursor: pointer; }
.cal-cell.can-add:hover, .wk-day.can-add:hover { background: var(--panel-2); }
.cal-num { width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; color: var(--muted); border-radius: 50%; }
.cal-cell.today .cal-num { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cal-ev { display: flex; align-items: flex-start; gap: 5px; text-decoration: none; color: var(--text); background: var(--panel-2); border-left: 3px solid var(--c); border-radius: 4px; padding: 3px 6px; font-size: 13px; line-height: 1.3; min-width: 0; }
.cal-ev:hover { background: var(--line); }
.cal-ev.sel { outline: 2px solid var(--c); outline-offset: 1px; }
.cal-ev.past { opacity: .6; }
.cal-ev .tm { color: var(--muted); flex: none; }
.cal-ev .ttl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.mdot { flex: none; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.cal-more { background: none; border: 0; color: var(--accent-text); text-align: left; padding: 2px 6px; cursor: pointer; font-size: 13px; }
.wk-day { min-height: 480px; padding: 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wk-day:last-child { border-right: 0; }
.wk-day.today { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wk-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wk-head .dow { color: var(--muted); font-size: 14px; }
.wk-head .num { font-family: var(--display); font-size: 22px; }
.wk-day.today .num { color: var(--accent-text); }
.wk-ev { display: block; text-decoration: none; color: var(--text); background: var(--panel-2); border-left: 4px solid var(--c); border-radius: 6px; padding: 8px 9px; }
.wk-ev:hover { background: var(--line); }
.wk-ev.sel { outline: 2px solid var(--c); outline-offset: 1px; }
.wk-ev.past { opacity: .6; }
.wk-ev .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); }
.wk-ev .top > span:first-child { white-space: nowrap; }
.wk-ev .ttl { display: block; font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.wk-ev .sub { font-size: 13px; color: var(--muted); }
/* Day view: one column of full-width cards, each with its own quick-RSVP row - built for a phone first. */
.day-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.day-card { background: var(--panel-2); border-left: 4px solid var(--c); border-radius: 8px; overflow: hidden; }
.day-card.past { opacity: .6; }
.day-card:not([data-st=""]) { background: color-mix(in srgb, var(--sc) 20%, var(--panel-2)); border-left-color: var(--sc); }
.day-card[data-st="declined"] { opacity: .85; }
.day-head { display: block; text-decoration: none; color: var(--text); padding: 12px 14px; }
.day-head .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--muted); }
.day-head .ttl { display: block; font-weight: 600; font-size: 17px; margin: 4px 0; overflow-wrap: anywhere; }
.day-head .sub { font-size: 13px; color: var(--muted); }
.day-rsvp { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px; }
.day-rsvp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill-m { display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 20px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: center; }
#ev-detail { scroll-margin-top: 12px; }

/* loot eligibility */
.loot-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.loot-ctrl label { margin: 0; }
.loot-ctrl input[type=date] { width: auto; }
.loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 14px; margin-top: 12px; align-items: start; }
details.lootd { --b: var(--muted); border-left: 4px solid var(--b); background: color-mix(in srgb, var(--b) 15%, var(--panel)); border-radius: 4px; }
details.lootd.red { --b: #e2685c; }
details.lootd.orange { --b: #eba23c; }
details.lootd.green { --b: #6fcf8b; }
details.lootd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
details.lootd > summary::-webkit-details-marker { display: none; }
details.lootd > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 2px 3px 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
details.lootd[open] > summary::after { transform: rotate(-135deg); margin: 3px 2px 0 4px; }
.lootd .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lootd .sm { color: var(--muted); font-size: 13px; }
.lootd .pc { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--b); min-width: 42px; text-align: right; }
.qtag { font-size: 12px; border: 1px solid var(--b); color: var(--b); border-radius: 20px; padding: 0 7px; }
.lootd-body { padding: 8px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 10px; font-size: 15px; }
.lootd-body .k { display: block; color: var(--muted); font-size: 13px; }
.lootd-body ul { margin: 4px 0 0; padding-left: 18px; }
.lootd-body a { overflow-wrap: anywhere; }
.band { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.band::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--b); }
.band.red { --b: #e2685c; } .band.orange { --b: #eba23c; } .band.green { --b: #6fcf8b; }
details.lootrules { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
details.lootrules > summary { cursor: pointer; padding: 9px 0; color: var(--accent-text); }
.loot-compare-bar { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.loot-compare-bar input[type="search"] { width: 100%; max-width: 320px; }
.loot-compare-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; padding-bottom: 14px; }
.rules-grid .field { margin: 0; }
.loot-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.loot-form .field { flex: 1; min-width: 160px; margin: 0; }
.loot-form .field.wide { flex: 2; min-width: 220px; }
td.nowrap { white-space: nowrap; }

/* class / specialization text */
.cls { color: var(--accent-text); font-weight: 600; }
.spec { color: var(--muted); white-space: nowrap; }
td.wpn { min-width: 340px; }

/* party board (drag and drop) */
.board { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.board.ro { grid-template-columns: minmax(0, 1fr); }
.pools { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 2px; }
.pools.over { outline: 2px dashed var(--accent-text); outline-offset: 0; border-radius: 8px; }
.pool { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.pool-head { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--c); color: #120d10; font-weight: 700; }
.pool-list { max-height: 260px; overflow: auto; min-height: 44px; }
.pboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pboard-head h3 { font-family: var(--body); font-weight: 600; font-size: 17px; }
.board .parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.board .party { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0; }
.party.drop-before { box-shadow: -4px 0 0 var(--accent-text); }
.party.drop-after { box-shadow: 4px 0 0 var(--accent-text); }
.phead { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.party-title { flex: 1; font-family: var(--display); font-size: 16px; }
.pdrop { min-height: 56px; }
.pdrop.over { outline: 2px dashed var(--accent-text); outline-offset: -2px; }
.pdrop.end::after { content: ''; display: block; height: 3px; background: var(--accent-text); }
.pempty { padding: 14px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.mrow { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 24%, var(--panel)); border-bottom: 1px solid rgba(0, 0, 0, .3); }
.mrow[draggable=true] { cursor: grab; }
.mrow.dragging { opacity: .35; }
.mrow.before { box-shadow: inset 0 3px 0 var(--accent-text); }
/* A party loaded from a preset can include people who have not actually confirmed Going for this particular
   event - shown dimmed and set apart, under their own party, rather than looking identical to someone who is
   really coming. Three different reasons get three different colours (same palette as .seg-no/.seg-none/
   .seg-leave), so an officer can tell which applies without opening anyone's profile: red for someone who
   actively said not attending, grey for someone who just hasn't answered, blue for someone on an approved
   leave of absence covering the event (also used in the pool and in a party they're already placed in, not
   just this "not confirmed" sub-list - see memberRow). */
.mrow.dim { opacity: .55; background: var(--panel); border-left-color: var(--line); }
.mrow.dim:hover { opacity: .85; }
.mrow.dim-declined { border-left-color: #e2685c; background: color-mix(in srgb, #e2685c 16%, var(--panel)); }
.mrow.dim-noreply { border-left-color: #8b95a7; }
.mrow.dim-loa { border-left-color: #5fb8e8; background: color-mix(in srgb, #5fb8e8 16%, var(--panel)); }
.pnotattending { border-top: 1px dashed var(--line); margin-top: 2px; }
.pnotattending > .muted.small { padding: 5px 8px 3px; }
.tag.loa { border: 1px solid #5fb8e8; color: #5fb8e8; border-radius: 20px; padding: 0 6px; }
.loa-inline { margin-top: 3px; }
.loa-toggle { font-size: 11px; padding: 2px 8px; }
.loa-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 8px; }
/* "Clear" switch on the party board (board()) - a small on/off toggle, off by default, that hides every
   dimmed row and any party left with nothing to show once those are hidden. */
.pboard-head { flex-wrap: wrap; }
.pboard-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.switch-row { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 14px; color: var(--muted); user-select: none; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; }
.switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 20px; transition: background .15s; }
.switch .slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--panel); border-radius: 50%; transition: transform .15s; }
.switch input:checked + .slider { background: var(--accent-text); }
.switch input:checked + .slider::before { transform: translateX(14px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.mtxt { flex: 1; min-width: 0; line-height: 1.25; }
.mname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmeta { font-size: 13px; color: color-mix(in srgb, var(--text) 72%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The specialization gets its own line under the class, so a longer one has room to read instead of being
   crushed into one "Class | Spec..." line and clipped (see memberRow). */
.mspec { font-size: 12px; margin-top: 1px; white-space: normal; overflow-wrap: anywhere; }
.tag { font-size: 12px; font-weight: 400; color: var(--role1); margin-left: 4px; }
.grip { flex: none; display: inline-block; width: 10px; height: 16px; cursor: grab; background: radial-gradient(circle, var(--muted) 1.3px, transparent 1.7px) 0 0 / 5px 5px; opacity: .8; }
.crown { flex: none; color: var(--gold); }
.over-cap { color: var(--danger); }
details.menu { flex: none; }
details.menu > summary { list-style: none; cursor: pointer; padding: 0 7px; border-radius: 4px; color: var(--muted); line-height: 1.4; user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { background: rgba(255, 255, 255, .1); color: var(--text); }
.menu-list { position: fixed; z-index: 30; min-width: 190px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.menu-list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; border-radius: 5px; cursor: pointer; }
.menu-list button:hover { background: var(--line); }
.menu-list button.danger { color: var(--danger); }
.menu-sep { padding: 6px 10px 2px; font-size: 12px; color: var(--muted); }
.menu-scroll { max-height: 200px; overflow: auto; }
.pbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.preset-select { width: auto; min-width: 240px; max-width: 100%; }

/* party names and presets */
.party h4 { gap: 6px; align-items: center; }
.party-name, .preset-name, .preset-desc { background: transparent; border: 1px solid transparent; }
.party-name:hover, .party-name:focus, .preset-name:hover, .preset-name:focus, .preset-desc:hover, .preset-desc:focus { border-color: var(--line); background: var(--bg); }
.party-name { flex: 1; min-width: 0; width: auto; font-family: var(--display); font-size: 16px; padding: 2px 6px; margin-left: -6px; }
.preset-name { font-family: var(--display); font-size: 22px; padding: 2px 6px; margin-left: -6px; width: min(420px, 100%); }
.preset-desc { font-size: 14px; color: var(--muted); padding: 2px 6px; margin: 4px 0 0 -6px; }
.party select.add-m { width: 100%; margin-top: 6px; font-size: 14px; }
.seg select { width: auto; max-width: 100%; min-width: 0; padding: 3px 8px; font-size: 14px; }
.party .m .muted { flex: 1; text-align: right; }
.ev-title + .parties { margin-top: 14px; }
.preset .ev-title > div:first-child { flex: 1 1 420px; }
.preset-desc { width: 100%; max-width: 560px; }

/* discord sign-in, avatars, PIN */
.btn.discord { display: block; text-align: center; text-decoration: none; background: #5865f2; border-color: #5865f2; color: #fff; padding: 11px 14px; font-weight: 600; }
.btn.discord:hover { filter: brightness(1.1); }
.avatar { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.rail .who b { font-weight: 600; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.pin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pin-row:first-of-type { border-top: 0; }
.pin-row input { width: 110px; text-align: center; letter-spacing: .3em; font-size: 18px; font-variant-numeric: tabular-nums; }
.pin-row .go { display: flex; gap: 8px; align-items: center; }
.pin-code { font-family: var(--display); font-size: 44px; letter-spacing: .25em; line-height: 1; color: var(--gold); }
.sent { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.sent li { padding: 2px 0; }
.sent .yes { color: #6fcf8b; } .sent .fail { color: var(--danger); }
.ok-text { color: #6fcf8b; }
.type-pill { display: inline-block; border: 1px solid var(--line); border-radius: 20px; padding: 0 9px; font-size: 13px; color: var(--muted); }
.type-pill.t-Skillcore { border-color: #c59be0; color: #c59be0; } .type-pill.t-Item { border-color: #e2a24a; color: #e2a24a; } .type-pill.t-Shard { border-color: #5fb8e8; color: #5fb8e8; }
.rule-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; border-top: 1px solid var(--line); }
.rule-row:first-of-type { border-top: 0; }
.link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.link-row select { width: auto; }

/* dialog */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 24px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(5, 8, 12, .7); }
dialog h2 { margin-bottom: 16px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dlg-actions .left { margin-right: auto; }

/* toast */
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 10px 18px; border-radius: 8px; z-index: 10; }
#toast.bad { border-color: var(--danger); color: var(--danger); }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }

@media (max-width: 860px) {
  .cal-cell { min-height: 70px; padding: 3px; gap: 2px; }
  .cal-ev { font-size: 11px; padding: 1px 3px; }
  .cal-ev .tm { display: none; }
  .cal-dow { padding: 4px; font-size: 12px; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .board { grid-template-columns: 1fr; }
  .pools { position: static; max-height: none; flex-direction: row; overflow-x: auto; }
  .pool { min-width: 220px; }
  #app { grid-template-columns: 1fr; }
  nav.rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; }
  .brand { padding: 0 12px 0 4px; }
  .rail .who { margin: 0 0 0 auto; border: 0; padding: 0; }
  main { padding: 20px 16px 48px; }
  .events-layout { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- round 7: navigation badges, guild icon, tags, profile, requests, dashboard panels, admin uploads ---------- */
.rail a.nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail a.nav .count { background: var(--accent); color: var(--accent-ink); border-radius: 20px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.rail a.nav.gap { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; padding-top: 12px; }
.guild-icon { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block; margin-bottom: 10px; }
.login-icon { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; display: block; margin: 0 auto 12px; }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: var(--accent-text); text-decoration: underline; }

.tagchip { display: inline-block; border: 1px solid var(--tc); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border-radius: 20px; padding: 0 9px; font-size: 13px; margin: 0 4px 2px 0; white-space: nowrap; }
.tagcell { min-width: 150px; }
.tagcell .btn { margin-left: 4px; }
.tagpick { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 0 0 6px; }
.ql-row { display: flex; gap: 6px; margin-bottom: 6px; }
.ql-row input:first-child { max-width: 140px; }
.tag.build { border: 1px solid var(--accent-text); color: var(--accent-text); border-radius: 20px; padding: 0 6px; }
.tag.merc { border: 1px solid #d9b25c; color: #d9b25c; border-radius: 20px; padding: 0 6px; }

.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head .avatar { width: 56px; height: 56px; margin: 0; }
.char-card.dim { opacity: .65; }
.builds { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.build-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.pending-banner { border-color: var(--gold); }
.diff { margin-top: 4px; font-size: 15px; }
.diff .arrow { color: var(--muted); padding: 0 4px; }

.st-pill { display: inline-block; border-radius: 20px; padding: 0 10px; font-size: 13px; border: 1px solid var(--line); }
.st-open { border-color: #eba23c; color: #eba23c; } .st-approved { border-color: #6fcf8b; color: #6fcf8b; }
.st-given { border-color: #5fb8e8; color: #5fb8e8; } .st-rejected { border-color: #e2685c; color: #e2685c; }
.rate { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate.red { color: #e2685c; } .rate.orange { color: #eba23c; } .rate.green { color: #6fcf8b; } .rate.none { color: var(--muted); }

.dash-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dash-panels > * { min-width: 0; }                    /* grid items default to min-width:auto, letting their content push them wider than their column at narrow widths */
.dash-panels > .full { grid-column: 1 / -1; }
.dash-panels > .wide { grid-column: span 2; }          /* unused now that Leadership gives up its own span (kept in case something needs a 2-of-2 span later - same as .full at this column count) */
.dash-panels > .panel { margin-top: 0 !important; }
.announce { border: 1px solid var(--accent); border-left-width: 5px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-radius: 8px; padding: 14px 18px; white-space: pre-wrap; }
.announce b { display: block; margin-bottom: 2px; color: var(--accent-text); }

/* Reworked announcement panel: one banner image (crest + "ANNOUNCEMENT" + castle art,
   nothing baked into it beyond that), with the actual announcement text (or the guild's
   fallback line when nothing is posted) floating on top in a fully transparent box - no
   fill, no border, just the glyphs with a soft glow. container-type lets the text scale
   with the banner's own rendered width instead of the viewport, and the small script in
   features.js shrinks it further if a long announcement would otherwise overflow the box. */
.announce2 { position: relative; width: 100%; aspect-ratio: 1467 / 283; border-radius: 10px; overflow: hidden; container-type: inline-size; }
.announce2 img.announce2-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.announce2 .announce2-box { position: absolute; left: 20.8%; top: 38.5%; width: 74.4%; height: 52.7%; display: flex; align-items: center; background: transparent; }
.announce2 .announce2-text {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 2.6cqw, 34px);
  line-height: 1.5;
  color: #f5eef1;
  text-shadow: 0 0 10px rgba(230,170,200,.55), 0 1px 3px rgba(0,0,0,.85);
  white-space: pre-wrap;
  overflow: hidden;
}
.dash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dash-item:first-child { border-top: 0; }
.dash-item label { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 0; }

.wd { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wdbox { display: flex; align-items: center; gap: 6px; color: var(--text); margin: 0; }
.uploads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.uploads .k { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.upload { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.img-prev { width: 96px; height: 64px; border: 1px dashed var(--line); border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.img-prev.icon { width: 64px; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .dash-panels { grid-template-columns: 1fr; }
  .dash-panels > .wide { grid-column: 1 / -1; }
}

/* ---------- round 8: guild name hero, info section, attendance bars, full-screen notices ---------- */
.guild-hero { display: flex; align-items: center; gap: 20px; padding: 6px 4px 20px; }
.hero-icon { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; flex: none; }
.hero-name { font-family: var(--display); font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: .01em; overflow-wrap: anywhere; }
.hero-tag { color: var(--muted); font-size: 18px; margin-top: 4px; }

.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side > .panel { margin: 0; }
.info-cat { margin-bottom: 12px; }
.info-cat:last-child { margin-bottom: 0; }
.info-title { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.info-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.info-text { white-space: pre-wrap; font-size: 16px; line-height: 1.55; max-height: 55vh; overflow: auto; }
.ie-cat { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.ie-row { display: flex; gap: 6px; margin-bottom: 6px; }
.ie-btn { margin: 0 0 10px 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.ie-text { min-height: 72px; }
dialog.wide { width: min(820px, calc(100vw - 32px)); }

.attcell { display: flex; align-items: center; gap: 12px; }
.attcell .rate { font-size: 20px; min-width: 66px; text-align: right; }
.attbar { flex: 1; height: 9px; background: var(--panel-2); border-radius: 5px; overflow: hidden; min-width: 90px; }
.attbar i { display: block; height: 100%; background: var(--muted); }
.attbar i.red { background: #e2685c; } .attbar i.orange { background: #eba23c; } .attbar i.green { background: #6fcf8b; }
.cnt-bad { color: #e2685c; font-size: 17px; } .cnt-warn { color: #eba23c; font-size: 17px; }
.chips-sm { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.chip.small { font-size: 13px; color: var(--muted); }

.use-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 10px 0 12px; }
.use-cols .k { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.scrollbox { max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
/* The "channels tracked for attendance" picker (Admin, an event's own page, the dashboard panel): always a
   fixed height showing about 6 rows, whether a guild has 3 voice channels or 300 - long names are truncated
   with an ellipsis (full name on hover) rather than wrapping, so every row stays the same height and the box
   never grows past its 6-row budget. */
.chan-pick-box { max-height: 172px; }
.chan-pick-box .tagpick { flex-wrap: nowrap; }
.chan-pick-box .chan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* login notice: covers the whole screen and cannot be closed except by accepting it */
dialog.notice { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); color: var(--text); overflow: auto; }
dialog.notice::backdrop { background: var(--bg); }
dialog.notice[open] { display: grid; place-items: center; }
.notice-card { width: min(760px, calc(100vw - 40px)); padding: 40px; background: var(--panel); border: 1px solid var(--line); border-top: 6px solid var(--accent); border-radius: 14px; }
.notice-card h1 { font-size: clamp(28px, 4vw, 40px); margin: 6px 0 18px; }
.notice-count { color: var(--accent-text); font-size: 14px; text-transform: none; }
.notice-text { white-space: pre-wrap; font-size: 18px; line-height: 1.6; max-height: 48vh; overflow: auto; margin-bottom: 28px; overflow-wrap: anywhere; }
.btn.big { padding: 14px 26px; font-size: 18px; }

/* ---------- round 9: Lucent loot, leadership sections, going chart, warnings, leave, bigger party board ---------- */
.loot-form .field.slidefield { flex: 3 1 260px; }
.slidefield { transition: flex-grow .4s ease, flex-basis .4s ease, min-width .4s ease, max-width .4s ease, opacity .3s ease, margin .4s ease; overflow: hidden; }
.loot-form .field.slidefield.off, .slidefield.off { flex-grow: 0; flex-basis: 0; min-width: 0; max-width: 0; opacity: 0; margin: 0; padding: 0; pointer-events: none; visibility: hidden; transition: flex-grow .4s ease, flex-basis .4s ease, min-width .4s ease, max-width .4s ease, opacity .3s ease, margin .4s ease, visibility 0s .4s; }
.type-pill.t-Lucent { border-color: #f0c85a; color: #f0c85a; }

.qtag.warn { border-color: #e2685c; color: #e2685c; }
.qtag.away { border-color: #5fb8e8; color: #5fb8e8; }
.warn-line { color: #e2685c; font-size: 14px; }
.warn-banner { border: 1px solid #e2685c; border-left-width: 5px; background: color-mix(in srgb, #e2685c 10%, var(--panel)); border-radius: 8px; padding: 14px 18px; grid-column: 1 / -1; }
.warn-banner ul { margin: 6px 0; padding-left: 20px; }
.alert-list { font-size: 18px; line-height: 1.6; margin: 0 0 16px; padding-left: 22px; }
h3.sec { font-family: var(--body); font-weight: 600; font-size: 17px; margin: 22px 0 10px; }
.sub-head { font-weight: 600; margin: 4px 0 10px; }
.sub-sep { border-top: 1px solid var(--line); margin: 18px 0 14px; }
.ov-row { padding: 5px 0; font-size: 16px; }
.jobs-form { margin: 0 0 10px; }
.jobs-form label { font-size: 13px; margin-bottom: 2px; }
.jobs-form input { padding: 4px 8px; font-size: 15px; }

/* party page: bigger board, always room for six members of every role */
:root { --mrow: 52px; }
.mrow { min-height: var(--mrow); }
.pools { position: static; max-height: none; }
.pool-list { height: calc(6 * var(--mrow) + 2px); min-height: 0; max-height: none; overflow: auto; }
.board .pdrop { min-height: calc(6 * var(--mrow)); }
details.usepreset ~ .boardwrap { --mrow: 62px; }                 /* dropdown closed: bigger rows, bigger board */
details.usepreset ~ .boardwrap .mname { font-size: 17px; }
details.usepreset ~ .boardwrap .mmeta { font-size: 14px; }
details.usepreset[open] ~ .boardwrap { --mrow: 52px; }
details.usepreset[open] ~ .boardwrap .mname { font-size: 16px; }
details.usepreset[open] ~ .boardwrap .mmeta { font-size: 13px; }
details.usepreset { margin-bottom: 16px; padding: 0 18px; }
details.usepreset > summary { cursor: pointer; padding: 14px 0; font-family: var(--display); font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.usepreset > summary::-webkit-details-marker { display: none; }
details.usepreset > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
details.usepreset[open] > summary::after { transform: rotate(-135deg); }
details.usepreset[open] { padding-bottom: 14px; }

/* ---------- round 10: applications, Discord admin, party picture ---------- */
.post-preview { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; display: block; background: #130e11; }
.chk-list { margin: 12px 0 4px; display: grid; gap: 6px; }
.chk { display: flex; gap: 10px; align-items: flex-start; }
.chk > span { font-weight: 700; width: 18px; text-align: center; }
.chk.good > span { color: #6fcf8b; } .chk.bad > span { color: #e2685c; } .chk.info > span { color: var(--muted); }
.discord-btn { border-color: #7d8cf0; color: #aab4ff; }


/* ---------- round 11: event window, calendar status colours, charts, dropdown sections ---------- */
.events-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-bottom: 20px; }
.events-layout .cal { margin-bottom: 0; }
.ev-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.ev-side .panel { margin: 0; }
.side-empty { color: var(--muted); }
.side-card h2 { font-size: 22px; overflow-wrap: anywhere; }
.side-card .ev-meta { margin-top: 4px; }
.side-h { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-box { margin-top: 16px; padding-top: 2px; border-top: 1px solid var(--line); }
.pin-box .side-h { margin-top: 12px; }
.pin-row .go input { width: 78px; text-align: center; letter-spacing: .2em; }
.events-layout .wk-day { padding: 6px; min-height: 420px; }
.events-layout .wk-ev { padding: 6px 7px; }
.events-layout .wk-ev .sub { font-size: 12px; }
.events-layout .cal-cell { min-height: 130px; }
@media (max-width: 1180px) { .events-layout { grid-template-columns: 1fr; } .ev-side { position: static; max-height: none; } }

/* A soft background tint (the corner badge below carries the actual meaning now, so the colour only needs to
   be a quiet hint, not the whole story) - greyed out (the plain default look) with no answer yet, green once
   you are going (whether that is just your own RSVP or the leadership's later recorded attendance), orange if
   you said you are not coming. No-show (said Going, but not recorded once the event passed) keeps its own red -
   a real problem, not the same thing as plainly declining - rather than being folded into either. */
[data-st="attended"], [data-st="going"] { --sc: #6fcf8b; } [data-st="noshow"] { --sc: #e2685c; } [data-st="declined"] { --sc: #eba23c; }
.cal-ev:not([data-st=""]), .wk-ev:not([data-st=""]) { background: color-mix(in srgb, var(--sc) 20%, var(--panel-2)); border-left-color: var(--sc); }
.cal-ev[data-st="declined"], .wk-ev[data-st="declined"] { opacity: .85; }
/* The check/cross corner badge - the actual "are you in or out" signal, with the tint behind it now just a
   quiet backdrop. Positioned inside the card's own corner (not hanging off the edge) so it never gets clipped
   or overlaps the chip above it in a packed month cell. */
/* Week view only - the month grid's chips are a single tight row with no room for a badge without either
   clipping it or crowding out the title (see monthChip's comment in app.js), so the tint alone carries the
   signal there. */
.wk-ev { position: relative; }
.wk-ev:not([data-st=""]) { padding-right: 24px; }
.stbadge { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--sc); color: #1b1418; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.status-legend { border-top: 0; padding-top: 0; align-items: center; }
.st-key { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.st-key i { width: 16px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--sc) 30%, var(--panel-2)); border-left: 4px solid var(--sc); }
.mystatus { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 6px; margin: 10px 0 4px; background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid var(--sc); font-size: 15px; }
.mystatus i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }

/* charts */
.going-chart { margin: 2px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-sum { font-size: 17px; }
.chart-sum b { font-family: var(--display); font-size: 32px; color: var(--accent-text); margin-right: 4px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 10px; border-radius: 20px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.lg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg small { color: var(--muted); }
.cbars { display: grid; gap: 10px; }
.cbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 104px; align-items: center; gap: 14px; }
.cbar .cl { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.ctrack { height: 32px; border-radius: 16px; background: rgba(255, 255, 255, .05); overflow: hidden; display: flex; align-items: center; }
.cstack { display: flex; gap: 2px; height: 100%; min-width: 0; transform-origin: left center; animation: cgrow .7s cubic-bezier(.2, .8, .2, 1) both; }
.cstack span { display: grid; place-items: center; min-width: 28px; background-color: var(--sc); background-image: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%); color: #0f1418; }
.cstack span b { font-size: 14px; }
.cstack span:first-child { border-radius: 16px 0 0 16px; } .cstack span:last-child { border-radius: 0 16px 16px 0; } .cstack span:only-child { border-radius: 16px; }
.seg-yes { --sc: #6fcf8b; } .seg-no { --sc: #e2685c; } .seg-none { --sc: #8b95a7; } .seg-leave { --sc: #5fb8e8; }
.cn { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.cn b { font-size: 19px; } .cn small { color: var(--muted); font-size: 13px; margin-left: 10px; min-width: 34px; text-align: right; }
.cbar.all { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.cbar.all .ctrack { height: 38px; border-radius: 19px; }
@keyframes cgrow { from { transform: scaleX(0); opacity: .35; } }
.cpies { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.cpie { margin: 0; padding: 14px 8px 12px; text-align: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-top: 3px solid var(--rc); border-radius: 12px; }
.cpie.all { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cpie svg { display: block; margin: 0 auto; }
.cpie svg .dn { font-family: var(--display); font-size: 30px; fill: var(--text); }
.cpie svg .dl { font-size: 11px; fill: var(--muted); }
.cpie svg circle { transition: stroke-width .15s; } .cpie svg circle:hover { stroke-width: 19; }
.cpie figcaption b { display: block; color: var(--rc); font-size: 16px; margin-top: 6px; }
.mini-legend { display: flex; justify-content: center; gap: 12px; margin-top: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.mini-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
@media (max-width: 700px) { .cbar { grid-template-columns: 1fr; gap: 4px; } .cn { justify-content: flex-start; } }

/* dropdown sections (recurring events, every Admin section) */
details.fold { margin-bottom: 12px; padding: 0 18px; }
.panel.fold + .panel.fold { margin-top: 0; }
details.fold > summary { cursor: pointer; padding: 14px 0; font-family: var(--display); font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -3px 4px 0 auto; transition: transform .2s; }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
details.fold > summary:hover { color: var(--accent-text); }
.fold-body { padding: 0 0 16px; }
/* A player folder nested inside a class folder on the VODs page - smaller and less padded than a top-level
   fold, so it reads as a sub-level rather than another folder of equal weight. */
details.vod-player-fold { padding: 0 0 0 4px; border-left: 2px solid var(--line); margin-bottom: 8px; }
details.vod-player-fold > summary { font-size: 15px; padding: 8px 10px; }
details.vod-player-fold .fold-body { padding: 0 0 10px 10px; }
.count-pill { font-family: var(--body); font-size: 13px; padding: 1px 9px; border-radius: 20px; background: var(--panel-2); color: var(--muted); margin-left: 8px; }

.ql-drop { margin-top: 4px; font-size: 14px; }
.ql-drop summary { cursor: pointer; color: var(--accent-text); list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.ql-drop summary::-webkit-details-marker { display: none; }
.ql-drop summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.ql-drop[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.ql-drop > div { padding: 6px 0 2px; line-height: 1.6; }
.pp-wrap { margin-top: 8px; } .pp-filter { margin-bottom: 6px; } .pp .scrollbox { max-height: 220px; }

/* week cards in the narrower calendar next to the event window */
.wk-ev .top { flex-wrap: nowrap; align-items: center; }
.wk-ev .top .mdot { margin: 0; }
.wk-ev .ttl { overflow-wrap: break-word; word-break: normal; hyphens: auto; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wk-ev .sub { display: block; line-height: 1.35; }
.events-layout { grid-template-columns: minmax(0, 1fr) 320px; }
/* the narrowest week columns: a little less padding so short words are not split */
.events-layout .wk-day { padding: 5px; }
.events-layout .wk-ev { padding: 5px 6px; border-left-width: 3px; }
.events-layout .wk-ev .ttl { font-size: 13px; }
/* radio buttons and tick boxes in a list must not take the width of a text input */
.tagpick input[type="radio"], .tagpick input[type="checkbox"], .wdbox input[type="radio"], .wdbox input[type="checkbox"] { width: auto; flex: none; padding: 0; margin: 0; }
.tagpick { justify-content: flex-start; }

/* ---------- mobile phones (≈320-640px): the sidebar becomes a horizontal top bar, the calendar becomes touch-usable ---------- */
@media (max-width: 640px) {
  #app { grid-template-columns: 1fr; }
  nav.rail { position: sticky; top: 0; z-index: 20; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; flex-wrap: nowrap; }
  .rail .brand { display: none; }          /* logo: kept for the vertical desktop rail, not worth the width here */
  /* The player's own name is dropped here to save space (it is already shown in the page the person is on),
     but Sign out itself stays reachable - it sits outside the scrolling nav row below so it is always visible
     without having to scroll sideways to find it, unlike on the desktop rail where there is room for both. */
  .rail .who { display: flex; align-items: center; margin: 0; padding: 0 10px; border: 0; flex: none; }
  .rail .who span, .rail .who br { display: none; }
  .rail .who a { padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; }
  .rail .who a:hover { background: var(--panel-2); }
  #nav-links { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: 8px 10px; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .rail a.nav { flex: none; padding: 8px 12px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
  .rail a.nav.active { border-left: 0; border-bottom-color: var(--accent); }
  .rail a.nav.gap { margin-top: 0; border-top: 0; padding-top: 8px; }
  main { padding: 14px 12px 40px; }
  body { overflow-x: hidden; }
  .page-head { flex-wrap: wrap; }

  /* The "MEMBERS" header strip's bottom-right count/bar used a fixed 190px min-width and a large
     42px number (sized for roomier desktop/tablet widths); on the narrowest phones that minimum
     could edge the strip past the edge of the screen. Shrinking both here gives it room to fit at
     any phone width without touching the desktop/tablet look. */
  .member-bar-stats { min-width: 0; max-width: 60%; gap: 6px; }
  .member-bar-count { font-size: 30px; }
  .member-bar-count small { font-size: 15px; }

  /* Starting attendance panel: no room for five aligned columns, so the header row disappears (each field's
     own placeholder - "events", "days" - says what it is instead) and each player's row wraps its four inputs
     onto their own line below the name, rather than squeezing them illegibly narrow. */
  .att-start-grid .att-start-head { display: none; }
  .att-start-grid .att-start-row { grid-template-columns: 1fr; gap: 4px; }
  .att-start-grid .att-start-row > span { white-space: normal; font-weight: 600; }
  .att-start-grid .att-start-fields { display: flex; gap: 6px; flex-wrap: wrap; }
  .att-start-grid .att-start-fields input { width: auto; flex: 1 1 70px; }
  .att-start-grid .att-start-fields input[type="date"] { flex-basis: 140px; }

  /* week view: one full-width day per row instead of 7 cramped side-by-side columns - fully readable, no horizontal scroll */
  .events-layout { grid-template-columns: 1fr; gap: 14px; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-day { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 10px 12px; }
  .wk-day:last-child { border-bottom: 0; }
  .wk-head .num { font-size: 18px; }

  /* month view: keeps its 7-day grid (dates still line up under the weekday letters), but each day becomes a
     small tap target - the day number plus a coloured dot per event - since there is no room for event text at
     this width. Tap "Week" above (or a day's "+N more") to read the full, fully-readable week list instead. */
  .cal-dow { padding: 4px 2px; font-size: 11px; text-align: center; }
  .cal-cell { min-height: 54px; padding: 3px; gap: 3px; }
  .cal-num { width: 20px; height: 20px; font-size: 12px; }
  .cal-ev { padding: 0; border-left: 0; border-radius: 50%; width: 7px; height: 7px; min-height: 7px; background: var(--c); overflow: hidden; flex: none; }
  .cal-ev .tm, .cal-ev .ttl { display: none; }
  .cal-more { font-size: 11px; padding: 0 2px; }
  .cal-head { padding: 10px 12px; gap: 6px; }
  .cal-head h2 { font-size: 17px; width: 100%; margin-right: 0; }
  .cal-head .btn.sm { padding: 5px 9px; font-size: 13px; }
  .cal-legend { padding: 8px 12px; gap: 5px 10px; }
  .cal-legend .chip, .cal-legend .small, .status-legend .st-key { font-size: 12px; }
}

/* attendance rules form: one field per row, with its own description - a dedicated layout for this one
   form (not the shared .rules-grid, which several other forms still use as a multi-column grid) */
.rules-stack { display: flex; flex-direction: column; gap: 16px; padding-bottom: 14px; }
.rules-stack .rule-field { margin: 0; }
.rules-stack .rule-field > label:first-child { display: block; margin-bottom: 2px; }
.rules-stack input[type="number"] { max-width: 160px; }
.rules-stack .btn { align-self: flex-start; margin-top: 4px; }

/* Member table: a quick "standing" glance per player - active warnings, low attendance - linking to their profile */
.standing-cell { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.standing-flag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.standing-flag.warn, .standing-flag.low { color: #e2685c; }

/* VOD review: the YouTube player plus its toolbar (fullscreen now; drawing and screenshot controls join it
   later) - fullscreen targets the whole wrap, not just the iframe, so the toolbar is still usable there too.
   The toolbar used to float on top of the video itself (an absolutely-positioned strip, shown on hover) - but
   that strip sat exactly where YouTube's own top-right controls (its title/settings/share icons, which fade in
   on hover the same way) live, blocking them the whole time ours was visible. It is now a normal, always-visible
   row BELOW the video instead, in its own space, so nothing of ours ever sits on top of anything YouTube draws. */
.vod-player-wrap { position: relative; display: flex; flex-direction: column; background: #000; border-radius: 8px; overflow: hidden; }
.vod-video-area { position: relative; aspect-ratio: 16/9; }
.vod-video-area #vod-yt-player, .vod-video-area iframe { width: 100%; height: 100%; display: block; }
.vod-player-wrap:fullscreen, .vod-player-wrap:-webkit-full-screen { border-radius: 0; width: 100vw; height: 100vh; }
.vod-player-wrap:fullscreen .vod-video-area, .vod-player-wrap:-webkit-full-screen .vod-video-area { flex: 1; aspect-ratio: auto; }
.vod-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px; background: #1b1418; }

.vod-draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
/* Same problem as the toolbar above, one layer further down: turning Draw on makes this canvas catch every
   pointer event across the whole video so free-hand strokes work anywhere on it - but at full size that also
   swallows clicks and hover meant for YouTube's own control bar at the bottom (play/pause, the seek bar, and
   the volume control), which sits exactly behind it the whole time Draw is on. clip-path trims the canvas's
   hit-test region (not just its paint area) to stop short of that strip, so drawing stays free-hand everywhere
   above it while the native controls underneath stay reachable. */
.vod-draw-canvas.active { pointer-events: auto; cursor: crosshair; clip-path: inset(0 0 48px 0); }
.vod-colors { display: flex; gap: 6px; align-items: center; margin-right: 4px; }
.vod-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.vod-color.active { border-color: #fff; }


/* Weapon icons: simple inline glyphs, grouped together right before whatever text follows them (the class
   name once it is known, or the weapon names themselves when it is not) */
.wicons { display: inline-flex; align-items: center; gap: 4px; margin-right: 7px; vertical-align: middle; }
.wicon { width: 24px; height: 24px; flex: none; object-fit: cover; border-radius: 5px; vertical-align: middle; }

/* One row per player: name, then the four baseline fields (%, events, days, start date), aligned into columns
   wide enough to allow it; narrower than that (see the mobile breakpoint below) each row wraps its own fields
   instead, relying on their placeholders rather than the column header row to say what each one is. */
.att-start-grid { display: flex; flex-direction: column; gap: 6px; }
.att-start-head, .att-start-row { display: grid; grid-template-columns: minmax(90px, 1.4fr) auto; gap: 8px; align-items: center; }
.att-start-head, .att-start-fields { font-size: 12px; color: var(--muted); font-weight: 600; }
.att-start-head { padding: 0 2px 2px; }
.att-start-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-start-fields { display: grid; grid-template-columns: 56px 68px 60px 142px; gap: 8px; }
.att-start-fields input { width: 100%; font: inherit; color: var(--text); font-weight: 400; }

/* VOD coaching points: the player (left/top) plus a running list of timestamped notes (right/below), each
   optionally with a saved drawing that reappears on its own as playback reaches that moment again. */
.vod-review-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.vod-marker-panel { max-height: calc(100vh - 180px); overflow: auto; }
.vod-marker-list { display: flex; flex-direction: column; gap: 8px; }
.vod-marker { display: flex; gap: 8px; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.vod-marker.active { border-color: var(--accent); }
.vod-marker-jump { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; text-align: left; padding: 8px; cursor: pointer; border-radius: 6px; }
.vod-marker-jump:hover { background: var(--panel-2); }
.vod-marker-time { display: block; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.vod-marker-note { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.vod-marker .btn { align-self: center; }
@media (max-width: 900px) { .vod-review-grid { grid-template-columns: 1fr; } .vod-marker-panel { max-height: none; } }
.vod-reviewed-badge { display: inline-block; margin-left: 6px; width: 18px; height: 18px; border-radius: 50%; background: #6fcf8b; color: #1b1418; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.vod-review-list { display: flex; flex-direction: column; gap: 8px; }
.vod-review-entry { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.vod-review-entry-head { margin-bottom: 3px; }
.vod-review-entry-note { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ================= Attendance Tracking (dashboard panel for the voice/PIN attendance engine) =================
   A direct, one-event-at-a-time front end for the voice-attendance engine that already runs in the background
   (server-shotcaller.js's pollVoiceAttendance) - pick an event, flip automatic/manual, start the watch, and
   watch it live, right on the Dashboard instead of having to find the right event first.
   Built exactly like the Shotcaller dashboard card (.sc-card/.sc-card-body above): the attendance-banner.png
   art is the background for the WHOLE card - mode row, event picker, auto-toggle, button, stats - not just a
   strip up top, scaled by WIDTH only (background-size: 100% auto) so the wordmark's vertical position stays
   fixed no matter which of the three states (inactive/running/awaiting-save) is showing, since those states
   aren't the same height. Image is 1672x941; the "ATTENDANCE TRACKING" wordmark + ornamental frame sit in the
   top ~260px of that, i.e. ~15.5% of the image's own WIDTH once scaled - padding-top below is a percentage
   specifically because percentage padding resolves against the containing block's width per the CSS spec,
   matching how the image itself is scaled. */
.att-card {
  position: relative; overflow: hidden; padding: 0;
  background-image: url('/img/attendance-banner.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.att-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.4), rgba(10,7,9,.82) 55%, rgba(10,7,9,.93)); pointer-events: none; }
.att-card-body { position: relative; z-index: 1; padding: 18% 20px 26px; }
.att-wrap { margin-bottom: 22px; }
.att-sect + .att-sect { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.att-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.att-mode-label { font-family: var(--display); font-size: 19px; }
/* The channel picker + "Save channels" form slides open/closed rather than just appearing - a plain toggle
   felt like something had broken (the whole lower half of the card jumping) when "Automatic tracking" was
   unticked, so this tweens max-height + opacity instead. The one-time step is a tall-enough value to always
   clear real content without needing to measure it in JS; the box is clipped (overflow:hidden) throughout. */
.att-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
.att-reveal.att-reveal-open { max-height: 420px; opacity: 1; }
.att-action { text-align: center; }
/* Stage 1 (reuses .sc-start-btn's green pill look exactly, see above) -> Stage 2: a persistent "Running" pill,
   spinner + text rather than the Shotcaller panel's icon-only circle, since this stays up for the whole length
   of an event rather than a few seconds while a session connects. */
.att-running-btn {
  margin-top: 14px; padding: 10px 28px; font-size: 16px; font-weight: 700; border-radius: 8px;
  background: #ff9d0a; color: #2a1400; border: 1px solid #ff9d0a; box-shadow: 0 0 16px rgba(255,157,10,.55);
  display: inline-flex; align-items: center; gap: 10px; cursor: default;
  animation: att-btn-morph-run .5s ease forwards;
}
@keyframes att-btn-morph-run {
  0% { background: #0fa968; border-color: #0fa968; box-shadow: 0 0 16px rgba(15,169,104,.55); }
  100% { background: #ff9d0a; border-color: #ff9d0a; box-shadow: 0 0 16px rgba(255,157,10,.55); }
}
/* Stage 3: once the track actually stops (Shotcaller session ended), the same pill morphs again into a gold
   "Save track" button - positive/finishing, not the Shotcaller panel's red Stop, since nothing is being
   cancelled here: the attendance is already recorded, this just closes the bookkeeping out (or waits 15
   minutes and closes itself). */
.att-save-btn {
  margin-top: 14px; padding: 10px 28px; font-size: 16px; font-weight: 700; border-radius: 8px;
  background: #e8b84b; color: #2a1d00; border: 1px solid #e8b84b; box-shadow: 0 0 16px rgba(232,184,75,.55);
  animation: att-btn-morph-save .5s ease forwards;
}
.att-save-btn:hover { background: #f5c768; border-color: #f5c768; }
@keyframes att-btn-morph-save {
  0% { background: #ff9d0a; border-color: #ff9d0a; box-shadow: 0 0 16px rgba(255,157,10,.55); }
  100% { background: #e8b84b; border-color: #e8b84b; box-shadow: 0 0 16px rgba(232,184,75,.55); }
}
.att-save-hint { margin-top: 8px; }
/* "settled" (features.js's attVoiceControls): the dashboard's attendance panel re-renders every 5s while a
   track is running or awaiting save, which would otherwise replay these one-time "just switched to this
   state" entrance animations on every re-render - skip them once this state has already been seen. The base
   rules above already land on the same end look these animations finish at, so turning the animation off
   entirely (rather than just skipping to its end) needs no separate "final" styles here. */
.att-running-btn.settled, .att-save-btn.settled { animation: none; }
.sc-data-item.settled .sc-data-label, .sc-data-item.settled .sc-data-box { animation: none; opacity: 1; transform: none; }
.att-warn { background: rgba(224,18,79,.12); border: 1px solid rgba(224,18,79,.4); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

/* Party planner v2: shared by presets and event boards. */
.party-workspace { --planner-line:#30313c; }
.party-workspace .page-head { align-items:center; margin-bottom:24px; gap:16px; }
.party-workspace h1 { font-family:var(--body); font-size:30px; font-weight:700; letter-spacing:-1px; margin:5px 0; }
.party-eyebrow { color:#b6a0cf; font-size:10px; letter-spacing:2px; font-weight:700; }
.party-workspace .page-head .muted { font-size:14px; }
.planner-toolbar { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:16px; background:#19171f; border:1px solid var(--planner-line); border-radius:12px; }
.preset-picker { display:flex; flex-direction:column; gap:6px; flex:1 1 240px; max-width:400px; }
.preset-picker > span { font-size:10px; letter-spacing:1.5px; color:#a7a0b1; font-weight:700; }
.preset-picker select { width:100%; min-width:0; }
.planner-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.planner-tools select { width:220px; max-width:100%; }
.preset-overview { display:flex; justify-content:space-between; gap:12px; padding:18px 3px 12px; align-items:center; }
.preset-overview strong { display:block; font-size:15px; }
.preset-overview span { color:#aaa3b2; font-size:12px; }
.preset-overview .visibility-badge { border:1px solid #3b3547; padding:4px 9px; border-radius:20px; white-space:nowrap; font-size:10px; }
.planner-settings { margin:0 0 18px; border-bottom:1px solid #302b36; padding-bottom:12px; }
.planner-settings > summary { cursor:pointer; color:#b4a9c4; font-size:12px; }
.planner-settings-body { display:grid; gap:12px; padding:18px 0 0; }
.planner-settings-body > label { font-size:12px; color:var(--muted); }
.planner-settings-body input:not([type=checkbox]) { display:block; font-family:var(--body); font-size:14px; margin:6px 0 0; padding:9px; max-width:100%; }
.planner-settings-body .panel { margin:0!important; padding:12px; }
.board, .board:not(.ro), .board.ro { display:flex; flex-direction:column; gap:16px; align-items:stretch; min-width:0; }
.board .pools { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:none; overflow:visible; padding:12px; border:1px solid #30313c; border-radius:10px; background:#15151c; }
.pool-caption { grid-column:1/-1; display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; color:#d2cbdc; }
.pool-caption small { color:#888392; font-weight:400; }
.board .pool { min-width:0; border:1px solid #30313b; background:#181920; border-radius:7px; }
.board .pool-head { background:transparent; color:var(--c); padding:8px 10px; font-size:12px; border:0; }
.board .pool-head span:last-child { color:#a7a3af; font-weight:400; font-size:11px; }
.board .pool-list { min-height:0; height:auto; max-height:240px; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:5px; }
.board .pool-empty .pool-list { display:none; }
.board .pboard { min-width:0; padding:0; border:0; background:transparent; }
.board .pboard-head { align-items:center; gap:12px; padding:0; margin-bottom:12px; }
.board .pboard-head h3 { margin:0; color:#ede8f3; font-family:var(--body); font-size:16px; font-weight:600; }
.board .pboard-head h3 .muted { margin-left:6px; font-size:12px; font-weight:400; }
.party-heading-mark { display:none; }
.board .parties { grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr)); gap:14px; align-items:stretch; }
.board .party { border:1px solid #35323f; border-radius:12px; background:#14141b; min-width:0; }
.board .phead { padding:12px; min-height:54px; background:#201c28; border:0; border-bottom:1px solid #35303f; border-radius:12px 12px 0 0; gap:8px; }
.board .party-name,.board .party-title { font-family:var(--body); font-size:14px; font-weight:650; color:#ece5f4; }
.board .phead > .muted { font-size:11px; background:#302939; padding:3px 7px; border-radius:5px; white-space:nowrap; }
.board .pdrop { min-height:100px; padding:9px; display:flex; flex-direction:column; gap:7px; }
.board .mrow { min-width:0; min-height:80px; margin:0; box-sizing:border-box; border:1px solid #33333e; border-left:3px solid var(--c); border-radius:7px; padding:8px; background:color-mix(in srgb,var(--c) 5%,#1d1d26); gap:8px; }
.board .mrow:hover { border-top-color:#5b5269; border-right-color:#5b5269; border-bottom-color:#5b5269; }
.board .mtxt { min-width:0; flex:1; }
.board .mname { display:flex; align-items:center; gap:7px; font-size:14px; line-height:19px; }
.board .crown { flex:none; width:12px; height:12px; }
.board .mmeta { display:flex; align-items:center; margin-top:3px; font-size:11px; min-height:20px; }
.board .mmeta .cls { color:#c1bacd; font-weight:400; }
.board .wicon { width:20px; height:20px; }
.board .wicons { margin-right:6px; gap:3px; }
.board .mspec { color:#8f899c; font-size:10px; line-height:14px; margin-top:2px; }
.board .grip { opacity:.4; flex:none; }
.board .mrow .menu { margin-left:auto; }
.party-slot { box-sizing:border-box; min-height:80px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px dashed #38313f; border-radius:7px; color:#888092; font-size:12px; pointer-events:none; }
.party-slot > span:first-child { font-size:22px; color:#645870; }
.party-slot small { display:block; font-size:10px; color:#645e70; margin-top:3px; }
.board .pdrop.over,.board .pools.over { outline:2px dashed #b594dd; background:#241c30; }
@media(max-width:700px) {
 .party-workspace .page-head { flex-wrap:wrap; margin-bottom:16px; }
 .party-workspace h1 { font-size:26px; }
 .planner-toolbar { padding:12px; }
 .preset-picker { max-width:none; }
 .planner-tools { width:100%; }
 .planner-tools select { flex:1 1 100%; width:100%; }
 .preset-overview { align-items:start; }
 .board .pools { gap:6px; padding:9px; }
 .board .pool-head { flex-wrap:wrap; gap:4px; padding:8px; }
 .board .pool:has(.mrow) { grid-column:1/-1; }
 .board .parties { grid-template-columns:1fr; }
 .board .pboard-head { flex-wrap:wrap; }
 .board .mrow,.party-slot { min-height:80px; }
 .board .menu summary { min-width:28px; min-height:32px; }
}

/* v3: roster alongside the party grid. */
.party-workspace .page-head { margin-bottom:12px; }
.party-workspace h1 { font-size:25px; margin:0; }
.planner-toolbar { padding:10px 12px; gap:10px; }
.preset-picker { gap:4px; }
.preset-overview { padding:9px 2px; }
.planner-settings { margin-bottom:12px; padding-bottom:8px; }
.planner-settings summary, .pool-sidebar summary { font-family:var(--body); }
.board:not(.ro) { display:grid; grid-template-columns:250px minmax(0,1fr); align-items:start; gap:16px; }
.pool-sidebar { position:static; border:1px solid #35313f; border-radius:10px; background:#15151c; min-width:0; }
.pool-sidebar > summary { padding:12px; cursor:pointer; font-size:13px; font-weight:600; }
.board .pools { display:flex; flex-direction:column; border:0; padding:0 9px 10px; max-height:none; overflow:visible; gap:9px; }
.pool-caption { justify-content:flex-start; }
.pool-search { width:100%; min-width:0; font-size:12px; padding:8px; }
.board .pool-head { cursor:pointer; display:flex; justify-content:space-between; gap:6px; font-family:var(--body); }
.board .pool-head::after { content:'⌄'; }
.board .pool:not([open]) .pool-head::after { content:'›'; }
.board .pool { flex:0 0 auto; overflow:visible; }
.board .pool-list { height:auto; max-height:none; overflow:visible; }
.board .pool-list .mrow { flex-shrink:0; }
.board .pool-empty .pool-list { display:block; }
.board .pool-empty .pempty { font-size:11px; padding:6px; }
.board .parties { grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:10px; }
.board .phead { padding:9px; min-height:43px; }
.party-composition { display:flex; flex-wrap:wrap; gap:8px; padding:7px 10px; border-bottom:1px solid #302b38; font-size:10px; }
.party-composition > span { color:var(--c); }
.party-composition .full-label { color:#c9badc; margin-left:auto; }
.board .mrow { min-height:62px; padding:6px; }
.board .mrow[hidden] { display:none; }
.board .mname { font-size:13px; }
.board .mmeta .cls { color:#d1cadb; font-size:12px; }
.board .mspec { color:#b3aabe; font-size:11px; }
.board .mtxt { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:6px; }
.board .mname,.board .mmeta { grid-column:1/-1; }
.board .mspec { grid-column:2; grid-row:1; align-self:center; }
.board .mname:has(~ .mspec) { grid-column:1; }
.board .pdrop { gap:6px; padding:7px; }
.party-slot { min-height:38px; font-size:11px; gap:7px; }
.party-slot > span:first-child { font-size:16px; }
.board .party:has(.pdrop.over) { outline:2px solid #b994e1; box-shadow:0 0 0 4px #b994e122; }
.board .party-full:has(.pdrop.over) { outline-color:#edae56; }
.board .party-full .pdrop.over { outline-color:#edae56; background:#30251b; }
@media(max-width:1050px) and (min-width:701px) {
 .board:not(.ro) { grid-template-columns:215px minmax(0,1fr); }
}
@media(max-width:700px) {
 .board:not(.ro) { display:flex; }
 .pool-sidebar { position:static; }
 .board .pools { max-height:none; overflow:visible; }
 .board .parties { grid-template-columns:1fr; }
 .party-workspace .page-head { margin-bottom:12px; }
 .board .mrow { min-height:66px; }
 .board .mspec { font-size:10px; }
 .planner-tools { gap:6px; }
}

/* Selected Formation emblem, shared by demo and production. */
.party-workspace .party-planner-title { display:flex; align-items:center; gap:12px; }
.party-planner-title img { display:block; width:64px; height:64px; object-fit:contain; flex:none; }
@media(max-width:700px) {
 .party-planner-title img { width:48px; height:48px; }
 .party-workspace .party-planner-title { gap:9px; }
}

/* Whole-card roster viewports: up to 3 cards for every role. */
.board .pools { max-height:none; overflow:visible; }
.board .pool { flex:none; overflow:hidden; }
.board .pool-list {
 --roster-card-height:76px;
 display:flex; gap:6px; padding:6px;
 height:calc(var(--pool-rows) * (var(--roster-card-height) + 6px) + 6px);
 min-height:0; max-height:none; overflow-y:auto; overflow-x:hidden;
 scroll-snap-type:y mandatory; scroll-padding-block:6px;
 scrollbar-width:thin; scrollbar-color:#80728f #19171f;
 scrollbar-gutter:stable;
}
.board .pool-list .mrow {
 height:var(--roster-card-height); min-height:var(--roster-card-height);
 flex:0 0 var(--roster-card-height); scroll-snap-align:start; scroll-snap-stop:always;
}
.board .pool-list .mtxt { display:block; }
.board .pool-list .mspec { margin-top:1px; font-size:10px; }
.board .pool-empty .pool-list,.board .pool-no-results .pool-list { display:none; }
.board .pool-list::-webkit-scrollbar { width:7px; }
.board .pool-list::-webkit-scrollbar-thumb { background:#80728f; border-radius:8px; }
.party-workspace details.planner-settings > summary,
.party-workspace .planner-settings-body summary { font-family:var(--body); font-size:13px; }
.planner-save-status { font-size:11px; color:#a7bca5; }
.planner-save-status.save-error { color:#ff978e; }
.inactive-member { color:#e5b76b; font-size:9px; flex:none; }

/* Compact cards with the same fixed three-card limit for all three roles. */
.board .pool-list { --roster-card-height:62px; }
.board .pool-list .mtxt { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:5px; }
.board .pool-list .mspec { grid-column:2; grid-row:1; margin:0; font-size:10px; align-self:center; }
.board .pool-list .mname:has(~ .mspec) { grid-column:1; }
.board .pool-list .mname { overflow:hidden; white-space:nowrap; font-size:12px; }
.board .pool-list .mmeta { font-size:11px; }
.board .pool-list .cls { font-size:11px; }
.board .pool-list .wicon { width:18px; height:18px; }
.pool-scroll-hint { padding:3px 6px 6px; color:#b5a9c3; font-size:10px; text-align:center; }
.pool-scroll-hint[hidden] { display:none; }

/* Insanity navigation: shared desktop rail, compact rail and mobile drawer. */
#app { grid-template-columns:252px minmax(0,1fr); }
#app.nav-compact { grid-template-columns:76px minmax(0,1fr); }
#app nav.rail {
 position:sticky; top:0; height:100dvh; min-height:0; padding:12px 10px;
 display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0;
 background:linear-gradient(160deg,#211526 0%,#131117 48%,#171017 100%);
 border-right:1px solid #594052; box-shadow:inset -1px 0 #ad875018; z-index:30;
}
.nav-controls { display:flex; align-items:center; justify-content:space-between; min-height:28px; color:#a899ae; }
.nav-controls > span { font-size:9px; letter-spacing:1.7px; margin-left:8px; }
.nav-controls button,.nav-pin { cursor:pointer; background:transparent; color:#ac9eb7; border:0; border-radius:5px; padding:5px; }
.nav-controls button:hover,.nav-pin:hover { color:#f0d8a1; background:#ffffff0a; }
#nav-collapse { display:flex; align-items:center; gap:5px; }
#nav-collapse svg { width:18px; height:18px; }
#nav-collapse span { display:none; }
#app .rail .brand {
 display:flex; flex-direction:column; align-items:center; text-align:center;
 padding:16px 8px 17px; margin:4px 0 12px; border:0; border-bottom:1px solid #81644066;
 background:linear-gradient(#1b102050,#161018e8),url('/img/navigation-guild-header.png') center 40%/cover;
 border-radius:9px 9px 0 0; position:relative; flex:none;
}
.rail .brand::after { content:'◆'; position:absolute; bottom:-8px; left:calc(50% - 7px); color:#c4a06e; background:#1a121c; padding:0 3px; font-size:10px; }
#app .brand h2 { font-family:var(--display); font-size:23px; letter-spacing:1px; line-height:1.25; overflow-wrap:anywhere; }
#app .brand span { font-size:11px; color:#b9a9bf; margin-top:3px; }
#app .brand .guild-icon { width:42px; height:42px; object-fit:contain; margin:0 0 8px; border-radius:8px; }
#app #nav-links { display:block; overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0; padding:0 3px; white-space:normal; scrollbar-width:thin; scrollbar-color:#5e4567 transparent; }
.nav-favorite-help { color:#8e7e9b; font-size:10px; padding:2px 8px 9px; }
.nav-favorites { margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #49304c; }
.nav-favorites h3 { font:600 9px var(--body); letter-spacing:1.5px; text-transform:uppercase; color:#c5a36d; padding:7px 8px; }
.nav-group { margin:0 0 8px; }
.nav-group > summary { display:flex; align-items:center; gap:7px; padding:8px; cursor:pointer; list-style:none; font:600 9px var(--body); text-transform:uppercase; letter-spacing:1.4px; color:#ab98b8; border-top:1px solid #ffffff08; }
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-chevron { margin-left:auto; font-size:12px; }
.nav-group:not([open]) .nav-chevron { transform:rotate(-90deg); }
.nav-group-count { background:#542437; color:#f9c5d4; border-radius:5px; padding:1px 5px; letter-spacing:0; font-size:10px; }
.nav-group-active { width:4px; height:4px; border-radius:50%; background:#d8b16d; }
.nav-entry { position:relative; display:flex; align-items:center; min-width:0; }
#app .rail a.nav { display:flex; align-items:center; justify-content:flex-start; gap:10px; flex:1; min-width:0; min-height:34px; margin:1px 0; padding:7px 28px 7px 9px; border:0; border-left:2px solid transparent; border-radius:4px; color:#c4bdcc; font:400 13px/1.25 var(--body); text-decoration:none; }
#app .rail a.nav svg { width:17px; height:17px; flex:none; color:#a899b4; }
#app .rail a.nav.active { background:linear-gradient(90deg,#7c25434d,#59223930); border-left-color:#d5b27a; color:#ffe6b0; }
#app .rail a.nav.active svg { color:#e7c486; }
#app .rail a.nav:hover { background-color:#ffffff07; color:#f5eaf9; }
#app .rail a.nav .nav-label { flex:1; min-width:0; overflow-wrap:anywhere; }
#app .rail a.nav .count { padding:1px 5px; min-width:18px; text-align:center; background:#a22b4c; font-size:10px; flex:none; }
.nav-pin { position:absolute; right:1px; padding:5px; opacity:0; }
.nav-pin svg { width:12px; height:12px; display:block; }
.nav-entry:hover .nav-pin,.nav-entry:focus-within .nav-pin,.nav-pin.pinned { opacity:1; }
.nav-pin.pinned { color:#d0ad70; }
.nav-pin.pinned svg { fill:#d0ad7030; }
#app .rail .who { display:block; flex:none; margin:9px 3px 0; padding:12px 8px 2px; border-top:1px solid #80634466; font-size:12px; }
#who { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
#who b { overflow-wrap:anywhere; }
#who .badge-officer { margin:0; font-size:9px; }
#app .rail .who .nav-signout { display:flex; gap:8px; align-items:center; padding:8px 0 0; color:#a899b3; font-size:11px; text-decoration:none; }
#app .rail .who .nav-signout:hover { color:#f5dcae; }
.mobile-nav-bar,.nav-backdrop,#nav-mobile-close { display:none; }
#app.nav-compact .nav-controls { justify-content:center; }
#app.nav-compact .nav-controls > span,
#app.nav-compact .brand h2,#app.nav-compact .brand > span,
#app.nav-compact .nav-label,#app.nav-compact .nav-pin,
#app.nav-compact .nav-favorite-help,#app.nav-compact .nav-favorites h3,
#app.nav-compact .nav-group > summary,
#app.nav-compact #who { display:none; }
#app.nav-compact #nav-collapse svg { transform:rotate(180deg); }
#app.nav-compact .brand { min-height:34px; padding:5px!important; background:none!important; }
#app.nav-compact .brand::before { content:'◆'; color:#b591d0; font-size:25px; }
#app.nav-compact .brand:has(.guild-icon:not(.hidden))::before { display:none; }
#app.nav-compact .brand .guild-icon { margin:0; width:32px; height:32px; }
#app.nav-compact .nav-group { display:block; border-top:1px solid #ffffff0a; padding-top:5px; }
#app.nav-compact .nav-group-links { display:block; }
#app.nav-compact .rail a.nav { position:relative; justify-content:center; min-height:40px; padding:8px 4px; }
#app.nav-compact .rail a.nav .count { position:absolute; right:0; top:1px; font-size:9px; padding:0 3px; min-width:14px; }
#app.nav-compact .rail a.nav svg { width:20px; height:20px; }
#app.nav-compact .rail .who { padding:9px 0; }
#app.nav-compact .rail .who .nav-signout { justify-content:center; font-size:20px; padding:0; }
@media (hover:none) { .nav-pin { opacity:1; } }
@media (prefers-reduced-motion:no-preference) { #app .rail a.nav { transition:background-color .15s,color .15s; } }
@media(max-width:860px) {
 #app,#app.nav-compact { display:block; }
 .mobile-nav-bar { display:flex; position:sticky; top:0; z-index:25; height:52px; align-items:center; gap:12px; padding:6px 12px; background:#18111ceF; border-bottom:1px solid #49324e; font-size:14px; }
 .mobile-nav-bar button { width:40px; height:40px; background:transparent; border:1px solid #5e4160; border-radius:6px; cursor:pointer; }
 #app nav.rail { display:none; }
 #app.nav-open nav.rail { display:flex; position:fixed; inset:0 auto 0 0; width:min(290px,85vw); height:100dvh; z-index:60; }
 #app.nav-open .nav-backdrop { display:block; position:fixed; inset:0; background:#0009; border:0; width:100%; height:100dvh; z-index:55; }
 #app.nav-open .rail .brand { display:flex; }
 #nav-collapse { display:none; }
 #nav-mobile-close { display:block; width:36px; height:30px; }
 #app.nav-compact.nav-open .nav-controls > span,
 #app.nav-compact.nav-open .brand h2,#app.nav-compact.nav-open .brand > span,
 #app.nav-compact.nav-open .nav-label,#app.nav-compact.nav-open .nav-pin,
 #app.nav-compact.nav-open .nav-favorite-help,#app.nav-compact.nav-open .nav-favorites h3,
 #app.nav-compact.nav-open .nav-group > summary { display:revert; }
 #app.nav-compact.nav-open .nav-group > summary { display:flex; }
 #app.nav-compact.nav-open #who { display:flex; }
 #app.nav-compact.nav-open .nav-controls { justify-content:space-between; }
 #app.nav-compact.nav-open .brand { min-height:0; padding:12px 8px!important; }
 #app.nav-compact.nav-open .brand::before { display:none; }
 #app.nav-compact.nav-open .rail a.nav { justify-content:flex-start; min-height:34px; padding:7px 28px 7px 9px; }
 #app.nav-compact.nav-open .rail a.nav .count { position:static; }
 #app.nav-compact.nav-open .rail .who { padding:12px 8px 2px; }
 #app.nav-compact.nav-open .rail .who .nav-signout { justify-content:flex-start; font-size:11px; }
 #app.nav-compact.nav-open .nav-group { border:0; padding:0; }
 #app main { padding:20px 14px 40px; }
 .rail .who span { display:initial; }
 .nav-pin { opacity:1; min-width:26px; }
}
@media(max-width:860px) {
 body:has(#app.nav-open) { overflow:hidden; }
 #app .rail .who .avatar { display:inline-block; width:24px; height:24px; }
 #app.nav-compact.nav-open .brand .guild-icon { width:42px; height:42px; margin-bottom:8px; }
}

/* Navigation polish: text-free guild artwork and complete account panel. */
#app .rail .nav-controls { min-height:24px; }
#app .rail .nav-controls > .nav-control-label { font-size:9px; letter-spacing:1px; color:#9f8ba9; }
#app .rail .brand {
 padding:76px 8px 12px; margin:0 0 7px;
 background:linear-gradient(180deg,transparent 45%,#171019aa 78%,#171019 100%),url('/img/navigation-guild-header.png') top center/100% auto no-repeat;
}
#app .rail .brand h2 { font-size:21px; }
#app .rail .brand > span { margin-top:1px; font-size:10px; }
#app .rail .brand:has(.guild-icon:not(.hidden)) {
 padding:10px 8px 12px;
 background:radial-gradient(ellipse at top,#42244988,#171019);
}
#app .rail .nav-pin { opacity:.65; }
#app .rail .nav-entry:hover .nav-pin,#app .rail .nav-pin:focus-visible,#app .rail .nav-pin.pinned { opacity:1; }
#app .rail .nav-group { margin-bottom:5px; }
#app .rail .nav-group > summary { padding-block:7px; }
#nav-scroll-cue { flex:none; border:0; border-top:1px solid #76573a55; background:linear-gradient(#211725,#171019); padding:6px; color:#d8bc8f; font:500 10px var(--body); cursor:pointer; }
#nav-scroll-cue[hidden] { display:none; }
#app .rail .nav-profile { position:relative; border-top:1px solid #aa845275; margin:7px 3px 0; padding:10px 3px 0; }
#app .rail .nav-profile::before { content:'◇'; position:absolute; top:-9px; left:calc(50% - 7px); background:#181019; padding:0 3px; color:#b38e60; font-size:11px; }
#app .rail #who { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; padding:2px 3px 8px; cursor:pointer; list-style:none; min-height:48px; }
#who::-webkit-details-marker { display:none; }
.nav-account-avatar { display:grid; place-items:center; flex:none; width:42px; height:42px; border:1px solid #c9a566; border-radius:50%; padding:3px; background:radial-gradient(#513246,#201621); box-shadow:0 0 0 2px #c9a56612; }
#app .rail .nav-account-avatar .avatar { display:block; width:34px; height:34px; object-fit:cover; border-radius:50%; }
.nav-avatar-fallback { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#e8c998; background:#352038; font-size:12px; letter-spacing:1px; }
#app .rail .nav-account-info { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
#app .rail .nav-account-info b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
#app .rail .nav-account-role { display:block; align-self:flex-start; border:1px solid #9a774e; border-radius:4px; padding:1px 6px; font-size:9px; color:#ddba7d; }
.nav-profile-chevron { margin-left:auto; color:#bcadc5; transition:transform .15s; }
.nav-profile:not([open]) .nav-profile-chevron { transform:rotate(-90deg); }
#app .rail .nav-account-link { display:flex; gap:10px; align-items:center; min-height:32px; padding:6px 7px; color:#c1b4cb; text-decoration:none; font-size:12px; border-radius:4px; }
.nav-account-link svg { flex:none; width:16px; height:16px; }
#app .rail .nav-account-link:hover,#app .rail .nav-account-link.active { color:#f0d29e; background:#ffffff06; }
#app .rail .nav-account-link.active { box-shadow:inset 2px 0 #d5b27a; }
#app.nav-compact .rail .brand { padding:5px!important; }
#app.nav-compact .rail .nav-pin { display:none; }
#app.nav-compact .rail .nav-controls > .nav-control-label { display:none; }
#app.nav-compact .rail #who { display:flex; justify-content:center; padding:0 0 6px; }
#app.nav-compact .rail .nav-account-info,#app.nav-compact .rail .nav-profile-chevron { display:none; }
#app.nav-compact .nav-account-avatar { width:36px; height:36px; padding:2px; }
#app.nav-compact .nav-account-avatar .avatar { width:30px; height:30px; }
#app.nav-compact .nav-avatar-fallback { width:28px; height:28px; font-size:10px; }
#app.nav-compact .rail .nav-account-link { justify-content:center; padding:6px 0; }
#app.nav-compact .nav-account-link > span { display:none; }
#app.nav-compact #nav-scroll-cue { font-size:0; padding:5px; }
#app.nav-compact #nav-scroll-cue::after { content:'↓'; font-size:15px; }
@media(max-width:860px) {
 #app.nav-open .rail .brand,
 #app.nav-compact.nav-open .rail .brand { padding:86px 8px 12px!important; background:linear-gradient(180deg,transparent 45%,#171019aa 78%,#171019 100%),url('/img/navigation-guild-header.png') top center/100% auto no-repeat!important; }
 #app.nav-open .rail .brand:has(.guild-icon:not(.hidden)),
 #app.nav-compact.nav-open .rail .brand:has(.guild-icon:not(.hidden)) { padding:10px 8px 12px!important; background:radial-gradient(ellipse at top,#42244988,#171019)!important; }
 #app.nav-open .rail .nav-controls > .nav-control-label { display:block; }
 #app.nav-open .rail .nav-account-info { display:flex; }
 #app.nav-open .rail .nav-profile-chevron { display:block; }
 #app.nav-open .rail #who { justify-content:flex-start; padding:2px 3px 8px; }
 #app.nav-open .nav-account-avatar { width:42px; height:42px; padding:3px; }
 #app.nav-open .nav-account-avatar .avatar { width:34px; height:34px; }
 #app.nav-open .nav-avatar-fallback { width:32px; height:32px; font-size:12px; }
 #app.nav-open .rail .nav-account-link { justify-content:flex-start; padding:6px 7px; }
 #app.nav-open .rail .nav-account-link > span { display:inline; }
 #app.nav-open .rail .nav-pin { display:block; opacity:.85; }
 #app.nav-open #nav-scroll-cue { font-size:10px; padding:6px; }
 #app.nav-open #nav-scroll-cue::after { content:none; }
 #app.nav-open .rail .nav-account-role { display:block; }
}
@media(prefers-reduced-motion:reduce) { .nav-profile-chevron { transition:none; } }
/* Explicitly override the legacy mobile footer's generic span rules. */
#app .rail .nav-account-avatar { display:grid; }
#app .rail .nav-avatar-fallback { display:grid; }
#app.nav-compact .rail .nav-profile-chevron { display:none; }
@media(max-width:860px) { #app.nav-open .rail .nav-profile-chevron { display:block; } }

/* Keep pin/unpin updates from triggering automatic scroll anchoring. */
#app #nav-links { overflow-anchor:none; }

/* Roster Command: compact table with top-level directory sections. */
.roster-workspace { min-width:0; }
.roster-page-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.roster-eyebrow { font-size:10px; color:#b9a5cc; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:5px; overflow-wrap:anywhere; }
.roster-page-head h1 { font:650 28px/1.25 var(--body); letter-spacing:-.7px; }
.roster-page-head p { margin:5px 0 0; color:#a89eaf; font-size:13px; }
.roster-summary { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:#a99fb4; }
.roster-summary span[style] { color:var(--c); }
.roster-summary b { font-weight:600; }
.roster-tabs { display:flex; gap:5px; border-bottom:1px solid #3c3144; margin-bottom:15px; overflow-x:auto; }
.roster-tabs button { display:flex; align-items:center; gap:8px; white-space:nowrap; padding:11px 15px; border:0; border-bottom:2px solid transparent; background:transparent; color:#a99db5; cursor:pointer; font-size:13px; }
.roster-tabs button.active { color:#f2d69e; border-bottom-color:#c3a36d; background:linear-gradient(transparent,#b4996720); }
.roster-tabs button:hover { color:#f4ebfa; }
.roster-tabs button span { font-size:10px; border-radius:5px; padding:1px 5px; color:#b5a7c2; background:#302536; }
.roster-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:15px; padding:12px; background:#1a161f; border:1px solid #342b3f; border-radius:9px; }
.roster-search { display:flex; align-items:center; gap:8px; flex:1 1 310px; min-width:180px; }
.roster-search svg { width:18px; height:18px; color:#a99ab9; flex:none; }
.roster-search input { font-size:12px; min-width:0; }
.roster-toolbar select { font-size:12px; width:auto; max-width:210px; flex:0 1 auto; }
.roster-toolbar .btn { font-size:12px; }
.roster-inactive-toggle { display:flex; align-items:center; gap:6px; margin:0; font-size:11px; color:#b3a7bd; }
.roster-text-button { background:transparent; border:0; color:#c4a9dc; font-size:11px; padding:3px 0; cursor:pointer; text-decoration:none; }
.roster-text-button:hover { color:#f1d6a2; text-decoration:underline; }
.roster-table-wrap { width:100%; overflow-x:auto; border:1px solid #39303f; border-radius:9px; background:#17151c; scrollbar-width:thin; scrollbar-color:#65506e #19141f; }
.roster-table { width:100%; min-width:1050px; table-layout:auto; font-size:12px; }
.roster-table th { font-size:10px; letter-spacing:.45px; font-weight:600; color:#b6a5c6; padding:11px 10px; background:#211a2a; border-bottom:1px solid #42324c; }
.roster-table td { padding:11px 10px; vertical-align:top; color:#ccc3d4; border-bottom:1px solid #2d2635; line-height:1.4; }
.roster-table tr:last-child td { border-bottom:0; }
.roster-table tbody tr:hover { background:#ffffff03; }
.roster-table .roster-col-name { width:17%; min-width:145px; }
.roster-table .roster-col-build { width:32%; min-width:300px; }
.roster-table .roster-col-action { width:55px; }
.roster-identity { border-left:3px solid var(--member-role); }
.roster-name { color:#eee7f4; text-decoration:none; font-weight:600; font-size:13px; overflow-wrap:anywhere; }
.roster-name:hover { color:#f3d39b; }
.roster-subtle { font-size:10px; color:#a397ad; margin-top:4px; overflow-wrap:anywhere; }
.roster-state { display:inline-block; margin-top:5px; margin-right:4px; font-size:9px; color:#d0b486; border:1px solid #685239; border-radius:4px; padding:1px 4px; }
.roster-inactive .roster-name { color:#aba0b6; }
.roster-class-cell { min-width:300px; width:32%; white-space:normal; overflow-wrap:anywhere; }
.roster-build { min-width:0; }
.roster-build-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.roster-build-title strong { font-size:12px; font-weight:600; }
.roster-build-title .wicons { display:inline-flex; margin:0; flex:none; gap:3px; }
.roster-build-title .wicon { width:20px; height:20px; }
.roster-role { color:var(--c); font-size:9px; border:1px solid color-mix(in srgb,var(--c) 35%,transparent); border-radius:4px; padding:1px 5px; }
.roster-specialization { margin-top:4px; color:#d7ccdf; line-height:1.5; white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.roster-build-weapons { margin-top:3px; color:#9d90aa; font-size:10px; line-height:1.45; overflow-wrap:anywhere; }
.roster-alts { margin-top:7px; font-size:10px; }
.roster-alts summary { font:500 10px var(--body); color:#bea4d1; cursor:pointer; }
.roster-alts .roster-build { margin-top:8px; padding-top:7px; border-top:1px solid #372b40; }
.roster-standing { display:flex; flex-direction:column; gap:3px; text-decoration:none; font-size:11px; color:#b5c8b0; }
.roster-standing small { font-size:9px; color:#9c8fa8; }
.roster-standing .low,.roster-warning { color:#e2a897; }
.roster-tag-cell { min-width:105px; max-width:180px; }
.roster-tag-cell .roster-text-button { display:block; margin-top:4px; }
.roster-table .btn.sm { font-size:11px; padding:4px 8px; }
.roster-table .ql-drop { font-size:10px; margin-top:6px; }
.roster-result-count { padding:10px 3px; font-size:11px; color:#a89ab6; }
.roster-empty { display:flex; flex-direction:column; align-items:center; gap:9px; padding:45px 16px; text-align:center; border:1px dashed #46344f; border-radius:9px; color:#b4a6c0; }
.roster-empty strong { color:#e1d5eb; font-size:15px; }
.roster-empty > span { font-size:12px; }
.roster-coach-invite { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:15px; background:#1b1720; border:1px solid #3b2e44; border-radius:9px; padding:15px; margin-bottom:14px; }
.roster-coach-invite strong { font-size:13px; }
.roster-coach-invite p { color:#a799b4; font-size:12px; margin:4px 0 0; max-width:450px; }
.roster-coach-invite .link-row { flex:1 1 330px; margin:0; max-width:480px; }
.roster-coach-invite input,.roster-coach-invite button { font-size:12px; }
.roster-coach-table { min-width:600px; }
.roster-coach-table select { max-width:300px; font-size:12px; }
@media(max-width:700px) {
 .roster-page-head { margin-bottom:14px; gap:12px; }
 .roster-page-head h1 { font-size:25px; }
 .roster-summary { gap:10px; font-size:11px; }
 .roster-tabs button { padding:10px; font-size:12px; }
 .roster-toolbar { padding:10px; }
 .roster-search { flex-basis:100%; }
 .roster-toolbar select { flex:1 1 130px; max-width:100%; min-width:0; }
 .roster-table-wrap { border:0; background:transparent; overflow:visible; }
 .roster-table { display:block; min-width:0; width:100%; }
 .roster-table thead { display:none; }
 .roster-table tbody { display:flex; flex-direction:column; gap:12px; }
 .roster-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; background:#1b171f; border:1px solid #3e3048; border-left:3px solid var(--member-role,#6d567b); border-radius:8px; padding:13px; }
 .roster-table td { display:block; min-width:0; max-width:none; padding:0; width:auto; border:0; white-space:normal; overflow-wrap:anywhere; }
 .roster-table td::before { content:attr(data-label); display:block; color:#93839f; font-size:9px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.6px; }
 .roster-table .roster-identity,.roster-table .roster-class-cell { grid-column:1/-1; min-width:0; width:auto; border:0; }
 .roster-table .roster-identity::before { display:none; }
 .roster-class-cell { border-top:1px solid #382a40!important; padding-top:9px!important; }
 .roster-specialization { font-size:12px; }
 .roster-tag-cell { grid-column:1/-1; }
 .roster-table td[data-label="Actions"] { grid-column:1/-1; padding-top:5px; }
 .roster-table td[data-label="Actions"]::before { display:none; }
 .roster-coach-invite .link-row { min-width:0; }
 .roster-coach-invite .link-row input { min-width:0; }
 .roster-coach-table td { grid-column:1/-1; }
}
/* Not-confirmed rows in a party (event boards): the redesign's `.board .mrow` look would otherwise flatten the
   difference between "said not attending" (red), "no reply yet" (grey) and "on leave" (blue). */
.board .mrow.dim-declined { border-left-color:#e2685c; background:color-mix(in srgb,#e2685c 8%,#1d1d26); }
.board .mrow.dim-noreply { border-left-color:#8b95a7; background:#1d1d26; }
.board .mrow.dim-loa { border-left-color:#5fb8e8; background:color-mix(in srgb,#5fb8e8 8%,#1d1d26); }

/* Events — personal briefing, original list-style calendar retained. */
.event-workspace { min-width:0; }
.event-workspace > .page-head { margin-bottom:16px; }
.event-workspace > .page-head h1 { font:650 28px/1.25 var(--body); }
.event-workspace > .page-head .muted { font-size:12px; margin-top:6px; }
.event-workspace .event-calendar-layout { display:block; margin-bottom:22px; }
.event-workspace .cal { border:1px solid #3a2c44; border-radius:10px; background:#17131d; padding:13px; }
.event-workspace .cal-head { flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.event-workspace .cal-head h2 { font:600 17px var(--body); margin-right:auto; }
.event-workspace .cal-head .btn { font-size:12px; }
.event-workspace .cal-week { align-items:stretch; }
.event-workspace .wk-day { min-width:0; background:#19141f; }
.event-workspace .wk-head { font-size:12px; }
.event-workspace .wk-ev { padding:8px; border-left-width:2px; }
.event-workspace .wk-ev:not([data-st=""]) { padding-right:8px; }
.event-workspace .wk-ev .ttl { display:block; -webkit-line-clamp:unset; font-size:12px; line-height:1.35; overflow:visible; overflow-wrap:anywhere; }
.event-workspace .wk-ev .top { font-size:11px; }
.event-workspace .wk-ev .sub { display:none; }
.event-workspace .cal-legend { font-size:10px; gap:7px 12px; margin-top:9px; }
.event-workspace .cal-legend .chip,.event-workspace .cal-legend .small { font-size:10px; }
.event-workspace .cal-ev { font-size:11px; }
.event-series { margin-bottom:12px; border:1px solid #3b2a43; border-radius:7px; padding:10px; }
.event-series > summary { font:500 12px var(--body); color:#bba4cd; cursor:pointer; }
.event-briefing { min-width:0; }
.event-hero { display:flex; align-items:stretch; gap:20px; border:1px solid #44334c; border-radius:10px 10px 0 0; overflow:hidden; background:linear-gradient(100deg,#251b2b,#17131c); }
.event-hero > img { width:240px; height:auto; min-height:145px; max-height:190px; object-fit:cover; flex:none; }
.event-hero > div { flex:1; min-width:0; padding:18px 18px 18px 0; }
.event-type-label { font-size:10px; text-transform:uppercase; color:#c9a66d; letter-spacing:1.4px; }
.event-hero h2 { font:650 26px/1.2 var(--body); margin:5px 0 9px; overflow-wrap:anywhere; }
.event-hero-date { font-size:14px; color:#d2c5de; }
.event-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:11px; font-size:11px; color:#b0a0be; }
.event-detail-tabs { display:flex; gap:4px; border:1px solid #44334c; border-top:0; background:#1a141f; overflow-x:auto; margin-bottom:17px; }
.event-detail-tabs > button { cursor:pointer; background:transparent; border:0; border-bottom:2px solid transparent; padding:13px 22px; color:#b0a1bc; font-size:13px; white-space:nowrap; }
.event-detail-tabs > button.active { border-bottom-color:#b5375c; color:#f5eaf9; background:linear-gradient(transparent,#7e24402a); }
.event-detail-tabs small { color:#eac886; margin-left:4px; }
.event-overview-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; align-items:start; }
.event-overview-grid > .panel,.event-overview-right > .panel { border-color:#3d3046; background:#1a151f; border-radius:9px; padding:17px; margin:0; min-width:0; }
.event-overview-grid h3 { font:600 15px var(--body); margin:0 0 14px; }
.event-panel-title { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; }
.event-panel-title h3 { margin:0; }
.event-panel-title .mystatus { font-size:11px; margin:0; padding:3px 7px; border:1px solid color-mix(in srgb,var(--sc) 40%,transparent); border-radius:5px; color:var(--sc,var(--muted)); }
.event-signup-deadline { font-size:12px; color:#a99ab6; margin:15px 0 12px; }
.event-signup .rsvp-row { display:flex; flex-direction:column; align-items:stretch; gap:13px; border:0; padding:0; }
.event-signup .rsvp-row > span:first-child { font-size:12px; }
.event-signup .rsvp-row .seg { display:flex; }
.event-signup .rsvp-row .btn { flex:1; padding:11px 16px; font-size:13px; }
.event-signup .rsvp-row .btn.on { background:#8a2948; border-color:#bd496b; }
.event-signup .btn:disabled { cursor:not-allowed; opacity:.5; }
.event-attendance .pin-box { margin:0; padding:0; border:0; background:transparent; }
.event-attendance .side-h { font:600 15px var(--body); }
.event-attendance .pin-box .muted.small { font-size:12px; line-height:1.5; }
.event-attendance .pin-row { flex-wrap:wrap; gap:8px; font-size:12px; }
.event-overview-right { display:flex; flex-direction:column; gap:14px; min-width:0; }
.event-description > div { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; color:#c7b9d3; }
.event-my-party-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:13px; color:#d6c8e0; }
.event-personal-members { display:flex; flex-direction:column; gap:6px; }
.event-personal-member { display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center; justify-content:space-between; padding:9px; background:#201a27; border:1px solid #3e3048; border-left:3px solid var(--c); border-radius:6px; }
.event-personal-member.is-you { border-top-color:#b0915f; border-right-color:#b0915f; border-bottom-color:#b0915f; }
.event-personal-member > div:first-child { display:flex; gap:7px; align-items:center; font-size:12px; min-width:0; overflow-wrap:anywhere; }
.event-personal-member .crown { color:#d7b16d; flex:none; }
.event-personal-class { display:flex; gap:6px; align-items:center; font-size:11px; color:#c5b7d1; min-width:0; overflow-wrap:anywhere; }
.event-personal-class .wicons { margin:0; flex:none; }
.event-personal-class .wicon { width:20px; height:20px; }
.event-personal-class small { display:block; color:#ac9aba; font-size:10px; line-height:1.4; }
.event-no-party { padding:20px 5px; color:#b9a9c6; font-size:12px; }
.event-no-party p { color:#9d8dab; line-height:1.6; }
.event-signup-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-bottom:15px; border-bottom:1px solid #3b2a44; }
.event-signup-numbers > div { display:flex; flex-direction:column; gap:6px; }
.event-signup-numbers strong { font-size:27px; font-weight:600; color:#a8d49c; }
.event-signup-numbers > div:nth-child(2) strong { color:#df8f9d; }
.event-signup-numbers > div:nth-child(3) strong { color:#b6a4ce; }
.event-signup-numbers span { font-size:11px; color:#b0a0bf; }
.event-role-counts { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:14px; font-size:12px; }
.event-role-counts > span { color:var(--c); }
.event-signup-stats > small { display:block; margin-top:10px; font-size:10px; }
.event-shortcut { display:block; width:100%; border:1px solid #4a3654; border-radius:6px; background:linear-gradient(100deg,#291c32,#1b151f); color:#d4c2e2; padding:10px 12px; font-size:12px; text-align:left; cursor:pointer; }
.event-shortcut:hover { border-color:#a88ab9; }
.event-my-party > .event-shortcut { margin-top:12px; }
.event-overview-shortcuts { display:flex; gap:12px; margin-top:14px; }
.event-officer-tools { margin-top:15px; border:1px solid #44324e; border-radius:8px; background:#1b151f; }
.event-officer-tools > summary { padding:14px 16px; cursor:pointer; font-family:var(--body); font-size:13px; }
.event-officer-tools > summary > small { display:block; margin:4px 0 0 16px; font-size:10px; color:#9f8cab; }
.event-officer-body { padding:0 14px 14px; }
.event-officer-body > .seg { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.event-officer-body .panel { margin-top:10px; }
.event-tab-content > .panel { border-color:#3d3046; background:#1b151f; border-radius:9px; }
.event-tab-content .ev-title > .seg { flex-wrap:wrap; }
.event-tab-content .col { min-width:0; }
.event-tab-content .roster-row { flex-wrap:wrap; gap:8px; }
.event-attendance-unsaved { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:#e1bd7f; font-size:12px; margin-bottom:12px; }
.event-artwork-picker { display:grid; gap:8px; }
#ev-artwork-preview { display:block; width:240px; max-width:100%; height:120px; object-fit:cover; border-radius:6px; }
.event-artwork-picker .btn { justify-self:start; }
@media(max-width:1000px) {
 .event-hero > img { width:185px; }
 .event-overview-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .event-personal-member { align-items:flex-start; }
}
@media(max-width:700px) {
 .event-workspace .cal { padding:9px; }
 .event-workspace .cal-head { gap:6px; }
 .event-workspace .cal-head h2 { width:100%; font-size:15px; }
 .event-workspace .cal-head .btn { padding:5px 9px; font-size:11px; }
 .event-workspace .cal-head .seg { margin-right:auto; }
 .event-hero { display:block; }
 .event-hero > img { width:100%; height:125px; min-height:0; max-height:none; }
 .event-hero > div { padding:14px; }
 .event-hero h2 { font-size:23px; }
 .event-hero-date { font-size:12px; }
 .event-detail-tabs > button { flex:1; padding:12px 10px; font-size:12px; }
 .event-overview-grid { display:flex; flex-direction:column; }
 .event-overview-grid > * { width:100%; }
 .event-overview-grid > .panel,.event-overview-right > .panel { padding:14px; }
 .event-overview-shortcuts { flex-direction:column; gap:8px; }
 .event-personal-class { max-width:100%; }
 .event-officer-body .btn,.event-tab-content .seg .btn { font-size:11px; }
 .event-officer-tools > summary > small { margin-left:0; }
}
/* Avoid the old side-by-side calendar's tall empty week columns. */
.event-workspace .events-layout .wk-day { min-height:150px; }

/* Event refinement: growing calendar, shared briefing and vivid signup analytics. */
@media(min-width:901px) {
 .event-workspace .events-layout .wk-day { min-height:340px; height:auto; }
 .event-workspace .events-layout .cal-cell { min-height:150px; height:auto; }
}
.event-workspace .wk-ev,.event-workspace .cal-ev { flex-shrink:0; }
.event-workspace .cal-ev { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.event-hero { display:grid; grid-template-columns: minmax(170px,220px) minmax(0,1.1fr) minmax(240px,1fr); gap:0; }
.event-hero > img { width:100%; height:100%; max-height:none; min-height:160px; object-fit:cover; }
.event-hero > .event-hero-info { padding:22px; }
.event-hero-notes { min-width:0; margin:18px 0; padding:4px 22px; border-left:1px solid #49384f; }
.event-hero-notes h3 { font:600 13px var(--body); color:#dfc38e; margin:0 0 10px; }
.event-hero-notes > div { font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; color:#d5cbdc; }
.signup-analytics { --signup-yes:#34e394; --signup-no:#ff667a; --signup-none:#a4a9b4; --signup-leave:#46c9ff; padding:20px; margin:18px 0 24px; background:linear-gradient(130deg,#201a28,#17131d); border:1px solid #49384f; border-radius:9px; color:#eae5ef; font-family:var(--body); }
.signup-chart-head { display:flex; align-items:center; flex-wrap:wrap; gap:18px; padding-bottom:20px; border-bottom:1px solid #3d3046; }
.signup-chart-head > div:first-child { margin-right:auto; }
.signup-chart-head h3 { font:650 19px/1.3 var(--body); margin:0; color:#e6c997; }
.signup-chart-head p { color:#aa9bb9; font-size:12px; margin:6px 0 0; }
.signup-chart-total { display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.signup-chart-total > strong { font-size:44px; font-weight:700; line-height:1; color:#fff; }
.signup-chart-total > span { display:grid; font-size:12px; color:#cbbfd5; }
.signup-chart-total b { font-size:22px; line-height:1.3; color:var(--signup-yes); }
.signup-chart-switch { display:flex; border:1px solid #49384f; border-radius:6px; padding:3px; gap:3px; background:#130f19; }
.signup-chart-switch .btn { background:transparent; border-color:transparent; color:#b9acc8; border-radius:4px; padding:8px 13px; }
.signup-chart-switch .btn.active { background:#352a35; color:#f1d6a4; border-color:#9c8054; box-shadow:inset 0 -2px #dfbd7c; }
.signup-chart-switch .btn:focus-visible { outline:2px solid #dfbd7c; outline-offset:3px; }
.signup-bars { display:grid; gap:24px; margin:26px 0; }
.signup-bar-row { display:grid; grid-template-columns:90px minmax(0,1fr) 76px; gap:18px; align-items:center; font-size:14px; }
.signup-role { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.signup-role > i { width:8px; height:8px; display:inline-block; background:var(--role-color); border-radius:50%; flex:none; }
.signup-track { display:flex; height:20px; background:#302737; border-radius:4px; min-width:0; }
.signup-track > span:not(.signup-empty) { display:flex; align-items:center; justify-content:center; min-width:0; background:var(--segment-color); color:#111920; box-shadow:0 0 10px color-mix(in srgb,var(--segment-color) 28%,transparent); position:relative; }
.signup-track > span:not(.signup-empty):first-child { border-radius:4px 0 0 4px; }
.signup-track > span:not(.signup-empty):last-child { border-radius:0 4px 4px 0; }
.signup-track > span:not(.signup-empty):only-child { border-radius:4px; }
.signup-track > span + span { border-left:2px solid #211a29; }
.signup-track b { font-size:11px; line-height:1; }
.signup-empty { color:#b5a9c0; font-size:11px; padding-left:8px; }
.signup-ratio { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.signup-ratio span { color:#bcb0c9; }
.signup-bar-row.is-total { border-top:1px solid #49384f; padding-top:23px; font-weight:600; }
.signup-rings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px 0; }
.signup-ring { margin:0; padding:14px 8px; background:#18131e; border:1px solid #372b40; border-radius:8px; text-align:center; min-width:0; }
.signup-ring.is-total { border-color:#9c8054; background:linear-gradient(135deg,#2c2229,#18131e); }
.signup-ring svg { max-width:100%; height:auto; display:block; margin:0 auto 9px; overflow:visible; }
.signup-ring-count { font:700 23px var(--body); fill:#fff; font-variant-numeric:tabular-nums; }
.signup-ring-denominator { font-size:17px; fill:#c9bdd4; }
.signup-ring-caption { font:11px var(--body); fill:#b8aac6; }
.signup-ring-percent { font:600 15px var(--body); fill:var(--signup-yes); }
.signup-ring figcaption { font-size:13px; justify-content:center; }
.signup-chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; padding-top:18px; border-top:1px solid #3d3046; font-size:12px; }
.signup-chart-legend > span { display:inline-flex; align-items:center; gap:7px; color:#cfc3dc; }
.signup-chart-legend i,.signup-table thead i { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--status-color); flex:none; }
.signup-chart-legend b { color:#fff; font-size:14px; margin-left:2px; font-variant-numeric:tabular-nums; }
.signup-chart-note { margin:12px 0 0; text-align:center; font-size:11px; color:#b0a4be; }
.signup-table-wrap { overflow-x:auto; margin:18px 0; }
.signup-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.signup-table th,.signup-table td { padding:14px 12px; border-bottom:1px solid #382d40; text-align:right; white-space:nowrap; background:transparent; }
.signup-table th:first-child { text-align:left; }
.signup-table thead th { color:#cbbfd5; font-size:12px; font-weight:500; }
.signup-table thead i { margin-right:6px; }
.signup-table td { color:#8f849b; }
.signup-table td.has-count { color:var(--status-color); font-weight:650; }
.signup-table td:last-child { color:#eae5ef; }
.signup-table .is-total { background:#261e2e; font-weight:700; }
@media(max-width:1100px) {
 .event-hero { grid-template-columns:170px minmax(0,1fr); }
 .event-hero-notes { grid-column:1/-1; margin:0 18px 18px; padding:14px 0 0; border-left:0; border-top:1px solid #49384f; }
}
@media(max-width:700px) {
 .event-hero { display:block; }
 .event-hero > img { width:100%; height:140px; min-height:0; }
 .event-hero > .event-hero-info { padding:16px; }
 .event-hero-notes { margin:0 16px 16px; }
 .signup-analytics { padding:14px; }
 .signup-chart-head { gap:14px; }
 .signup-chart-head h3 { font-size:17px; }
 .signup-chart-total > strong { font-size:35px; }
 .signup-chart-switch { flex-basis:100%; }
 .signup-chart-switch .btn { flex:1; }
 .signup-bar-row { grid-template-columns:64px minmax(0,1fr) 55px; gap:8px; font-size:12px; }
 .signup-track { height:18px; }
 .signup-role { gap:6px; }
 .signup-rings { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .signup-chart-legend { justify-content:flex-start; gap:12px 18px; }
 .signup-table th,.signup-table td { padding:12px 9px; }
}

/* Event officer tab and attendance results use the same typography as the workspace. */
.event-briefing h3 { font-family:var(--body); font-weight:600; }
.event-officer-tools { margin:0; }
.event-officer-heading { padding:18px 18px 0; }
.event-officer-heading h3 { margin:0 0 7px; font-size:17px; }
.event-officer-heading p { color:#b0a1bc; font-size:12px; margin:0 0 18px; }
.event-officer-body { padding:0 18px 18px; }
.event-officer-body .panel { border-color:#3d3046; background:#19141f; border-radius:8px; }
.event-officer-body h3 { font:600 15px var(--body); }
.event-officer-body .ev-title { flex-wrap:wrap; gap:10px; }
.event-tracking-summary { display:grid; gap:9px; margin-top:15px; padding-top:14px; border-top:1px solid #44334b; }
.event-tracking-summary > strong { color:#b2e7c6; font-size:13px; line-height:1.6; }
.event-tracking-summary .seg { display:flex; flex-wrap:wrap; gap:8px; }
.event-tracking-summary .btn { font-size:12px; }
.event-original-signups { display:grid; gap:5px; padding-top:12px; margin:12px 0; border-top:1px solid #44334b; font-size:12px; color:#b4a6c0; }
.event-original-signups strong { color:#d9cde4; font-weight:500; }
.event-results-note { font-size:11px; line-height:1.6; color:#b0a1bc; margin:10px 0; }
@media(max-width:480px) {
 .event-detail-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .event-detail-tabs > button { min-width:0; padding:12px 8px; }
 .event-officer-body { padding:0 12px 12px; }
 .event-officer-heading { padding:15px 12px 0; }
}

/* Quick calendar responses stay separate from event navigation. */
.calendar-quick-rsvp { margin-top:9px; cursor:default; }
.calendar-quick-row + .calendar-quick-row { margin-top:8px; }
.calendar-response-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.calendar-response-buttons .btn { flex:1 1 48px; padding:5px 6px; font:600 11px/1.3 var(--body); min-width:0; color:#d6cbdc; background:#211b27; border:1px solid #514057; border-radius:4px; white-space:nowrap; }
.calendar-response-buttons [data-choice="yes"].on { color:#b5f3cd; background:#204232; border-color:#68c790; }
.calendar-response-buttons [data-choice="no"].on { color:#ffd0d7; background:#4a242d; border-color:#e37d8e; }
.calendar-response-buttons .btn:focus-visible { outline:2px solid #dec38e; outline-offset:2px; }
.calendar-signups-closed,.calendar-leave-note,.calendar-character-name { display:block; font-size:10px; color:#b5a6c2; line-height:1.5; }
.calendar-character-name { margin-bottom:4px; }
.calendar-leave-note { margin-top:5px; color:#80cdec; }
.day-card > .calendar-quick-rsvp { margin:0; padding:0 14px 14px; }
.day-card .calendar-response-buttons { max-width:300px; }
.day-card .calendar-response-buttons .btn { padding:9px 12px; font-size:13px; }

/* Compact party cards: identity on line one, full-width specialization on line two. */
.board .mtxt,.board .pool-list .mtxt { display:flex; flex-direction:column; gap:2px; }
.board .midentity { display:flex; align-items:center; gap:8px; min-width:0; }
.board .midentity .mname { flex:0 1 auto; min-width:0; max-width:50%; }
.board .member-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board .midentity .mmeta { display:flex; flex:1; min-width:0; margin:0; white-space:nowrap; overflow:hidden; }
.board .midentity .wicons { flex:none; }
.board .midentity .cls { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board .mspec.specialization-scroll,.board .pool-list .mspec.specialization-scroll {
 display:block; align-self:stretch; width:100%; min-width:0;
 margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
 color:#b3aabe; font-family:var(--body); font-size:11px; font-weight:400; line-height:19px;
 text-align:left; white-space:nowrap; overflow:hidden; overflow-wrap:normal; cursor:default;
}
.board .pool-list .mspec.specialization-scroll { font-size:10px; }
.board .specialization-text { display:inline-block; white-space:nowrap; vertical-align:top; }
.board .specialization-scroll.has-overflow { cursor:pointer; }
.board .specialization-scroll:disabled { opacity:1; }
.board .specialization-scroll:focus-visible { outline:2px solid #c0a1df; outline-offset:2px; }

/* Attendance — roster overview and central player review dialog. */
.attendance-workspace { min-width:0; }
.attendance-workspace h1,.attendance-workspace h2,.attendance-workspace h3 { font-family:var(--body); font-weight:600; }
.attendance-workspace .page-head { align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.attendance-workspace h1 { font-size:30px; margin:5px 0; }
.attendance-workspace .page-head p { margin:0; font-size:14px; }
.attendance-eyebrow { font-size:10px; letter-spacing:.16em; color:#ac97bc; font-weight:600; }
.attendance-period { display:flex; align-items:center; gap:10px; }
.attendance-period select { min-width:155px; }
.attendance-period label { display:flex; align-items:center; gap:7px; margin:0; color:#b7a8c5; font-size:12px; }
.attendance-period input { width:75px; }
.attendance-tabs { display:flex; gap:8px; border-bottom:1px solid #423249; margin-bottom:16px; }
.attendance-tabs button { background:transparent; border:0; border-bottom:3px solid transparent; padding:12px 20px; color:#b5a5c3; font-size:15px; cursor:pointer; }
.attendance-tabs button.active { color:#e6c98e; border-bottom-color:#d4b678; background:linear-gradient(transparent,#d4b6780c); }
.attendance-context { padding:11px 14px; background:#1b1520; color:#bfb0ce; border:1px solid #3a2d42; border-radius:7px; font-size:12px; margin-bottom:14px; }
.attendance-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.attendance-summary > div { background:linear-gradient(125deg,#241c2d,#19151f); border:1px solid #3e3048; border-radius:8px; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.attendance-summary span { color:#c5b8d2; font-size:13px; }
.attendance-summary strong { color:#e5c795; font-size:28px; font-variant-numeric:tabular-nums; }
.attendance-workspace .attention,.attendance-review .attention { color:#ff7b8c; }
.attendance-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.attendance-toolbar > input { flex:1 1 220px; min-width:160px; }
.attendance-toolbar > select { width:auto; flex:0 1 auto; max-width:100%; }
.attendance-toolbar > label { display:flex; align-items:center; gap:7px; white-space:nowrap; margin:0; font-size:12px; }
.attendance-toolbar input[type="checkbox"] { width:auto; flex:none; }
.attendance-roster { border-color:#3b2e44; border-radius:8px; }
.attendance-roster table { width:100%; }
.attendance-roster th { background:#241c2d; color:#c1b0ce; font-size:12px; font-weight:600; padding:14px 16px; }
.attendance-roster td { padding:14px 16px; background:#19151e; vertical-align:middle; }
.attendance-roster td > strong { color:#eee8f3; font-size:14px; }
.attendance-roster td small { display:block; color:#b1a2be; font-size:11px; margin-top:3px; }
.attendance-roster td .attendance-owner { color:#8f819b; font-size:10px; }
.attendance-rate { display:flex; align-items:center; gap:13px; color:#aaa2b3; min-width:175px; }
.attendance-rate strong { width:46px; flex:none; font-size:15px; font-variant-numeric:tabular-nums; }
.attendance-rate.green { color:#53dd98; }.attendance-rate.orange { color:#e6b963; }.attendance-rate.red { color:#f57b89; }
.attendance-rate-track { flex:1; height:7px; background:#393041; border-radius:3px; overflow:hidden; }
.attendance-rate-track i { display:block; height:100%; border-radius:3px; background:currentColor; }
.attendance-count { color:#8e819b; font-size:13px; font-variant-numeric:tabular-nums; }
.attendance-count.has-value { padding:2px 8px; background:#39313f; color:#ded5e7; border-radius:5px; }
.attendance-noshow .attendance-count.has-value { color:#ffa1ad; background:#532c37; }
.attendance-arrow { width:54px; }
.attendance-arrow .btn { padding:3px 10px; font-size:22px; color:#cbb8da; }
.attendance-count-note { color:#a292b1; text-align:right; font-size:11px; margin:10px 0; }
.attendance-officer { margin-top:20px; padding:15px 18px; }
.attendance-officer > summary { color:#ded0e8; font-size:14px; cursor:pointer; }
.attendance-officer > summary small { color:#a594b3; margin-left:12px; font-size:11px; }
.attendance-officer summary { font-family:var(--body); }
#dlg:has(.attendance-review) { width:min(1040px,calc(100vw - 32px)); max-width:none; max-height:92dvh; padding:0; border:1px solid #635170; border-radius:10px; overflow:hidden; background:#1c1722; }
.attendance-review { display:flex; flex-direction:column; max-height:90dvh; color:#e8e0ee; }
.attendance-review h2 { font:600 27px/1.2 var(--body); margin:0 0 7px; overflow-wrap:anywhere; }
.attendance-review-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:22px 24px 15px; flex:none; }
.attendance-review-head p { color:#b9a9c8; font-size:13px; margin:0; }
.attendance-review-close { align-self:start; font-size:24px; padding:0 9px; background:transparent; border:0; }
.attendance-review-period { grid-column:1/-1; font-size:12px; color:#ae9dbd; }
.attendance-review-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:17px 20px; margin:0 24px; background:#251d2e; border:1px solid #42334c; border-radius:7px; gap:14px; flex:none; }
.attendance-review-summary > div { display:grid; gap:4px; }
.attendance-review-summary strong { font-size:25px; font-weight:600; font-variant-numeric:tabular-nums; }
.attendance-review-summary strong.green { color:#53dd98; }.attendance-review-summary strong.orange { color:#e6b963; }.attendance-review-summary strong.red { color:#f57b89; }
.attendance-review-summary span { color:#b9a9c8; font-size:12px; }
.attendance-review-note { font-size:11px; color:#ad9abc; margin:10px 24px 16px; flex:none; }
.attendance-review-body { min-height:0; overflow:auto; margin:0 24px; flex:1 1 auto; border:1px solid #3c2f45; border-radius:7px; }
.attendance-history { width:100%; font-size:13px; }
.attendance-history th { background:#281f31; color:#bdaacd; font-weight:600; font-size:12px; position:sticky; top:0; z-index:1; }
.attendance-history th,.attendance-history td { padding:14px 16px; }
.attendance-history td:first-child { font-size:12px; color:#baacc9; }
.attendance-history td:nth-child(2) { min-width:160px; }
.attendance-history td small { display:block; color:#a592b3; font-size:10px; margin-top:4px; }
.attendance-history select { min-width:145px; width:100%; font-size:12px; }
.attendance-history .is-edited td { background:#d9b15b0a; }
.attendance-history .is-edited td:first-child { box-shadow:inset 3px 0 #e0bb78; }
.attendance-answer { color:#c3b6cf; font-size:12px; }
.attendance-edited { color:#e8c786; background:#6c50242a; border:1px solid #a88445; padding:3px 7px; border-radius:4px; font-size:10px; }
.attendance-edited[hidden] { display:none; }
.attendance-result { display:inline-block; padding:5px 8px; border-radius:4px; background:#302736; color:#c7bdd2; font-size:12px; }
.attendance-result[data-rst="attended"] { color:#75dfa4; background:#244032; }
.attendance-result[data-rst="noshow"] { color:#ff9aa8; background:#482a32; }
.attendance-result[data-rst="leave"] { color:#82d5f1; background:#203641; }
.attendance-review-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:18px 24px; margin-top:18px; border-top:1px solid #44344e; flex:none; background:#201926; }
.attendance-review-footer > span { font-size:12px; color:#d5b87d; }
.attendance-review-footer > div { display:flex; gap:10px; }
.attendance-review-footer .btn { font-size:13px; padding:10px 16px; }
@media(max-width:900px) {
 .attendance-summary { gap:9px; }.attendance-summary > div { padding:14px; flex-direction:column; align-items:flex-start; }
 .attendance-roster td,.attendance-roster th { padding:12px 10px; }
 .attendance-history th,.attendance-history td { padding:12px; }
}
@media(max-width:640px) {
 .attendance-workspace .page-head { margin-bottom:16px; }
 .attendance-period { width:100%; }.attendance-period select { flex:1; }
 .attendance-toolbar > select { flex:1 1 135px; }
 .attendance-toolbar > input { flex-basis:100%; }
 .attendance-summary > div { padding:11px; }.attendance-summary span { font-size:11px; }.attendance-summary strong { font-size:23px; }
 .attendance-roster { overflow:visible; background:transparent; border:0; }
 .attendance-roster table,.attendance-roster tbody { display:block; }
 .attendance-roster thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
 .attendance-roster tr { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:#1a151f; border:1px solid #3d2f45; border-radius:7px; padding:11px; margin-bottom:10px; }
 .attendance-roster td { border:0; background:transparent; text-align:left; padding:7px; min-width:0; }
 .attendance-roster td:first-child { grid-column:1/-1; padding-right:44px; }
 .attendance-roster td[data-label]:not(:first-child)::before { content:attr(data-label); display:block; font-size:10px; color:#a795b6; margin-bottom:5px; }
 .attendance-rate { min-width:0; gap:7px; }.attendance-rate strong { width:auto; }
 .attendance-roster .attendance-arrow { position:absolute; top:10px; right:10px; padding:0; width:auto; }
 .attendance-arrow .btn { min-width:44px; min-height:44px; }
 #dlg:has(.attendance-review) { width:calc(100vw - 16px); max-height:96dvh; }
 .attendance-review { max-height:94dvh; }
 .attendance-review-head { padding:16px 14px 12px; }.attendance-review h2 { font-size:24px; }
 .attendance-review-close { min-width:44px; min-height:44px; }
 .attendance-review-summary { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; margin:0 14px; gap:13px; }
 .attendance-review-summary strong { font-size:22px; }
 .attendance-review-note { margin:9px 14px 12px; }
 .attendance-review-body { margin:0 14px; border:0; }
 .attendance-history,.attendance-history tbody { display:block; }
 .attendance-history thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
 .attendance-history tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; border:1px solid #44334d; border-radius:6px; margin-bottom:10px; }
 .attendance-history td { min-width:0; padding:5px; border:0; }
 .attendance-history td:nth-child(2) { min-width:0; grid-column:1/-1; grid-row:1; }
 .attendance-history td:first-child { grid-column:1/-1; }
 .attendance-history td[data-label="Signup"]::before,.attendance-history td[data-label="Recorded result"]::before { content:attr(data-label); display:block; color:#ab97ba; font-size:10px; margin-bottom:6px; }
 .attendance-history .attendance-change { grid-column:1/-1; }
 .attendance-history select { min-width:0; min-height:44px; font-size:12px; }
 .attendance-review-footer { padding:12px 14px; margin-top:10px; }
 .attendance-review-footer > div { width:100%; }.attendance-review-footer .btn { flex:1; min-height:44px; padding:9px; }
}
.attendance-history .status-pick { --sc:#b0a6bd; border-radius:5px; padding:7px 9px; }
.attendance-history .status-pick[data-rst="attended"] { --sc:#75dfa4; }
.attendance-history .status-pick[data-rst="noshow"] { --sc:#ff8b9a; }
.attendance-history .status-pick[data-rst="noreply"] { --sc:#a4a9b4; }
.attendance-history .status-pick[data-rst="declined"] { --sc:#dfb06b; }

/* Shotcaller — focused voice console. */
.sc-workspace { min-width:0; }
.sc-workspace h1,.sc-workspace h2,.sc-workspace h3,.sc-start-form h2 { font-family:var(--body); font-weight:600; }
.sc-workspace .page-head { margin-bottom:22px; }
.sc-workspace h1 { font-size:30px; margin:5px 0; }
.sc-workspace .page-head p { font-size:14px; color:#b7a9c4; margin:0; }
.sc-eyebrow { color:#b6a0ca; font-size:10px; letter-spacing:.16em; }
.sc-console-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:6px; border-bottom:1px solid #45324f; margin-bottom:18px; }
.sc-console-tabs button { display:flex; align-items:center; gap:8px; background:transparent; color:#b9a8ca; border:0; border-bottom:3px solid transparent; padding:12px 18px; cursor:pointer; }
.sc-console-tabs button.active { color:#e6cb96; border-bottom-color:#d7b87a; background:linear-gradient(transparent,#b78d4d15); }
.sc-console-tabs svg { width:17px; height:17px; }
.sc-alliance-bridge .sc-channel { min-width:0; overflow-wrap:anywhere; }
.sc-alliance-bridge .sc-section-heading { flex-wrap:wrap; gap:12px; }
.sc-alliance-bridge details { margin:10px 0; font-size:12px; }
.sc-alliance-bridge details ul { padding-left:18px; }
@media(max-width:650px) {
 .sc-alliance-bridge .sc-party-grid { grid-template-columns:minmax(0,1fr); }
 .sc-alliance-bridge .btn { min-height:44px; }
}
.sc-console-tabs > span { margin-left:auto; font-size:11px; color:#a796b7; }
.sc-console-top { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr); gap:16px; }
.sc-console-session,.sc-console-callers,.sc-console-parties,.sc-setup-panel { border:1px solid #44314f; border-radius:9px; background:#1b1520; min-width:0; }
.sc-console-session { padding:24px; background:linear-gradient(90deg,#1c1724f5,#1c1724e8),url('/img/event-insanity.png') center/cover; }
.sc-session-state { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.sc-session-state h2 { font-size:20px; margin:0; color:#dfd3e9; }
.sc-live-dot { width:12px; height:12px; border-radius:50%; background:#8b8295; flex:none; }
.sc-live-dot.live { background:#43d995; box-shadow:0 0 12px #43d99535; }
.sc-live-dot.starting { background:#deb97c; }
.sc-audio { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #4f4657; border-radius:18px; color:#b7a8c5; font-size:12px; margin-left:auto; }
.sc-audio svg { width:14px; height:14px; }
.sc-audio.muted { color:#e4b976; border-color:#9c7446; }
.sc-session-totals { display:flex; gap:36px; margin:25px 0 20px; }
.sc-session-totals > div { display:grid; gap:4px; }
.sc-session-totals strong { font-size:48px; font-weight:650; line-height:1; color:#f0eaf6; font-variant-numeric:tabular-nums; }
.sc-session-totals span { color:#bfacce; font-size:13px; }
.sc-session-note { font-size:12px; color:#bfadce; line-height:1.6; margin:0 0 16px; max-width:480px; }
.sc-session-actions { display:flex; gap:12px; flex-wrap:wrap; }
.sc-session-actions .btn { padding:11px 18px; min-height:44px; font-size:13px; }
.sc-session-actions .danger { margin-left:auto; background:#4b20292b; border-color:#a65062; color:#ff8d9c; }
.sc-console-callers { padding:18px 20px; }
.sc-console-callers h2,.sc-console-parties h2 { display:flex; align-items:center; gap:9px; font-size:16px; margin:0; }
.sc-console-callers h2 > svg,.sc-console-parties h2 > svg { width:19px; height:19px; color:#b9a4cb; }
.sc-console-callers > section { padding-top:14px; margin-top:14px; border-top:1px solid #3e2e48; }
.sc-section-heading { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.sc-section-heading h3 { font-size:12px; color:#c7b6d5; margin:0; }
.sc-section-heading > span { color:#ac98bc; font-size:11px; }
.sc-section-heading .btn { font-size:11px; padding:4px 8px; }
.sc-secondary { font-size:11px; color:#aa96bb; margin:7px 0 10px; line-height:1.6; }
.sc-caller-list { display:grid; gap:8px; margin-top:10px; }
.sc-caller-person { display:flex; align-items:center; gap:9px; min-width:0; }
.sc-caller-person strong { font-size:13px; overflow-wrap:anywhere; min-width:0; }
.sc-initials { display:grid; place-items:center; width:32px; height:32px; flex:none; background:#3b2c48; border:1px solid #94754d; color:#e3c48a; border-radius:50%; font-size:11px; }
.sc-caller-person .sc-remove { margin-left:auto; color:#bda9cd; background:transparent; border:0; font-size:17px; }
.sc-next-caller { font-size:13px; color:#d6c5e4; margin:9px 0; }
.sc-next-caller small { display:block; color:#9f8aaf; font-size:10px; margin-top:3px; }
.sc-console-parties { margin-top:16px; padding:18px 20px; }
.sc-party-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:15px; }
.sc-channel { display:flex; align-items:center; gap:11px; min-width:0; border:1px solid #3c2f46; border-radius:7px; background:#221b29; padding:15px 12px; }
.sc-channel > div { min-width:0; }
.sc-channel h3 { font-size:12px; color:#e4d8ed; margin:0 0 6px; overflow-wrap:anywhere; }
.sc-channel-icon { display:grid; place-items:center; flex:none; color:#c5ad87; background:#4435434d; border-radius:50%; width:33px; height:33px; }
.sc-channel-icon svg { width:17px; height:17px; }
.sc-channel-count { display:flex; align-items:baseline; gap:7px; }
.sc-channel-count strong { font-size:23px; line-height:1; color:#ebe1f4; font-weight:600; }
.sc-channel-count span { font-size:10px; color:#b49cc4; }
.sc-channel.is-empty { opacity:.6; }
.sc-bridge-note { display:flex; align-items:center; gap:12px; border:1px solid #3d2b48; border-radius:8px; padding:14px 18px; margin-top:16px; color:#ad98bf; font-size:12px; }
.sc-bridge-note svg { width:18px; height:18px; }
.sc-bridge-note strong { font-weight:500; }
.sc-bridge-note span { color:#8f7c9e; }
.sc-session-empty,.sc-start-animation { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:28px 14px; min-height:195px; }
.sc-session-empty > span svg { width:28px; height:28px; color:#9a7eaf; }
.sc-session-empty > strong,.sc-start-animation > strong { font-size:14px; font-weight:600; color:#ddcce9; }
.sc-session-empty p,.sc-start-animation p { font-size:12px; color:#ac96bd; max-width:400px; line-height:1.6; margin:0; }
.sc-start-symbol { position:relative; display:grid; place-items:center; width:58px; height:58px; color:#dfbd83; }
.sc-start-symbol > span { position:absolute; inset:0; border:2px solid #4b3856; border-top-color:#e3bf7f; border-right-color:#b18acb; border-radius:50%; animation:sc-setup-orbit 2.4s linear infinite; }
.sc-start-symbol > svg { width:22px; height:22px; }
.sc-loading-dots { display:inline-block; width:14px; animation:sc-setup-dots 1.6s ease-in-out infinite; }
@keyframes sc-setup-orbit { to { transform:rotate(360deg); } }
@keyframes sc-setup-dots { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .sc-start-symbol > span,.sc-loading-dots { animation:none; } }
.sc-setup-panel { padding:22px; max-width:850px; }
.sc-setup-panel h2 { font-size:18px; margin:0 0 8px; }
.sc-setup-panel > p { color:#ad97bf; font-size:12px; line-height:1.6; margin:0 0 22px; }
.sc-setup-panel .sc-start-form { max-width:650px; }
.sc-start-form h2 { font-size:22px; }
.sc-start-form .dlg-actions { justify-content:flex-end; }
.sc-start-form .field > label { font-size:12px; color:#c5b1d5; }
.sc-start-form .dlg-actions .primary { min-height:44px; }
#dlg:has(.sc-start-form) { max-height:90dvh; overflow:auto; }
.sc-message { padding:20px; color:#bcabc8; font-size:13px; }
.sc-message h2 { margin:0 0 10px; font-size:18px; }
@media(max-width:1100px) { .sc-party-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) {
 .sc-console-top { grid-template-columns:1fr; }
 .sc-console-tabs > span { width:100%; margin:0 0 10px 15px; }
 .sc-console-session { padding:20px; }
 .sc-caller-person .sc-remove { min-width:44px; min-height:44px; }
 .sc-console-callers > section .btn { min-height:40px; }
}
@media(max-width:480px) {
 .sc-console-tabs button { flex:1; padding:12px; }
 .sc-console-session,.sc-console-callers,.sc-console-parties { padding:16px; }
 .sc-session-totals { gap:30px; }.sc-session-totals strong { font-size:40px; }
 .sc-session-state h2 { font-size:17px; }
 .sc-audio { margin-left:0; }
 .sc-session-actions .btn { flex:1; padding:10px; }
 .sc-party-grid { gap:8px; }.sc-channel { gap:7px; padding:12px 8px; }
 .sc-channel-icon { width:24px; height:24px; }.sc-channel-count { flex-wrap:wrap; gap:4px; }
 .sc-setup-panel { padding:16px; }
 .sc-setup-panel .row { flex-direction:column; gap:0; }
}

/* Loot — distribution workspace with a persistent entry form. */
.loot-workspace { min-width:0; }
.loot-workspace h1,.loot-workspace h2,.loot-workspace h3 { font-family:var(--body); font-weight:600; }
.loot-workspace .page-head { margin-bottom:22px; }
.loot-workspace h1 { font-size:30px; margin:5px 0; }
.loot-workspace .page-head p { margin:0; font-size:14px; color:#b7a6c5; }
.loot-eyebrow { font-size:10px; letter-spacing:.16em; color:#ac96be; }
.loot-summary-strip { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; border:1px solid #3d2e48; border-radius:8px; background:linear-gradient(110deg,#251b2d,#19151f); padding:15px 20px; margin-bottom:18px; color:#c5b5d4; font-size:13px; }
.loot-summary-strip strong { color:#ede3f6; font-weight:600; font-variant-numeric:tabular-nums; }
.loot-summary-strip small { margin-left:auto; color:#9e8bac; font-size:10px; }
.loot-summary-strip .loot-lucent,.loot-summary-strip .loot-lucent strong,.loot-workspace .loot-lucent { color:#e4c073; }
.loot-workspace-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:16px; align-items:start; }
.loot-workspace-grid.is-readonly { grid-template-columns:minmax(0,1fr); }
.loot-ledger-panel,.loot-entry-panel { min-width:0; border:1px solid #3f2e49; border-radius:9px; background:#1a151f; }
.loot-ledger-panel > h2 { font-size:17px; margin:20px 18px 15px; }
.loot-ledger-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 18px 16px; }
.loot-ledger-toolbar input { flex:1 1 100%; min-width:0; font-size:13px; }
.loot-ledger-toolbar select { flex:1 1 115px; width:0; min-width:0; font-size:12px; }
.loot-ledger-wrap { overflow-x:auto; }
.loot-ledger-wrap table { width:100%; font-size:12px; }
.loot-ledger-wrap th { color:#b8a5c7; font-size:11px; font-weight:500; background:#211928; padding:12px; }
.loot-ledger-wrap td { padding:15px 12px; vertical-align:middle; }
.loot-ledger-wrap td:first-child { white-space:nowrap; color:#b4a1c3; font-size:11px; }
.loot-ledger-wrap td strong { display:block; font-size:13px; color:#e0d4eb; font-weight:600; overflow-wrap:anywhere; }
.loot-ledger-wrap td small { display:block; color:#ab95bb; font-size:10px; margin-top:5px; }
.loot-kind { display:block; font-size:10px; color:#bca5d1; margin-bottom:4px; }
.loot-kind[data-kind="Skillcore"] { color:#c194e7; }.loot-kind[data-kind="Item"] { color:#80aee1; }.loot-kind[data-kind="Shard"] { color:#e1b371; }.loot-kind[data-kind="Lucent"] { color:#e4c073; }
.loot-request-tag { display:inline-block; background:#392d43; border:1px solid #51405c; border-radius:4px; color:#c2afcf; font-size:9px; padding:2px 5px; margin-top:5px; }
.loot-proof-state { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:transparent; border:0; border-radius:4px; padding:5px 0; color:#aaa3b5; font:11px var(--body); }
button.loot-proof-state { cursor:pointer; }
.loot-proof-state i { display:block; flex:none; width:7px; height:7px; border-radius:50%; background:#a4a9b4; }
.loot-proof-state.confirmed { color:#7adba7; }.loot-proof-state.confirmed i { background:#57d893; }
button.loot-proof-state:focus-visible { outline:2px solid #ba96d5; outline-offset:4px; }
.loot-ledger-actions .btn { padding:5px 9px; font-size:11px; }
.loot-ledger-caption { padding:12px 18px; color:#a48bb6; font-size:10px; border-top:1px solid #35263e; }
.loot-entry-panel { padding:21px 20px; }
.loot-entry-panel > h2 { color:#e4c487; font-size:19px; margin:0 0 8px; }
.loot-entry-panel > p { color:#ad98be; font-size:12px; line-height:1.6; margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid #3e2d49; }
.loot-entry-fields { border:0; margin:0; padding:0; min-width:0; display:grid; gap:16px; }
.loot-entry-fields > .field,.loot-entry-pair > .field { margin:0; min-width:0; }
.loot-entry-form label,.loot-type-picker legend { font-size:12px; color:#d0bddd; margin:0 0 7px; }
.loot-entry-form input,.loot-entry-form select { width:100%; min-width:0; font-size:13px; }
.loot-entry-form .field.off { display:none; }
.loot-type-picker { border:0; padding:0; margin:0; min-width:0; display:flex; flex-wrap:wrap; gap:5px; }
.loot-type-picker legend { padding:0; }
.loot-type-picker .loot-type-choice { display:flex; flex:1 1 62px; align-items:center; justify-content:center; border:1px solid #4b3857; border-radius:5px; background:#211a28; padding:9px 5px; margin:0; font-size:11px; cursor:pointer; position:relative; }
.loot-type-choice input { position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.loot-type-choice:has(input:checked) { color:#e9cff9; border-color:#a777c8; background:#3a2649; }
.loot-type-choice:focus-within { outline:2px solid #c49fdf; outline-offset:2px; }
.loot-type-choice:has(input:disabled) { cursor:default; }
.loot-entry-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.loot-entry-form .loot-save { width:100%; padding:12px 16px; min-height:44px; font-size:13px; margin-top:3px; }
.loot-clear { justify-self:end; border:0; border-bottom:1px solid #7b638f; border-radius:0; padding:0 0 2px; color:#b59ac8; background:transparent; font:11px var(--body); cursor:pointer; }
.loot-entry-fields:disabled { opacity:.65; }
#dlg:has(form[data-form="loot-edit"]) h2 { font-family:var(--body); font-size:23px; font-weight:600; }
@media(min-width:1350px) { .loot-ledger-toolbar input { flex:1 1 190px; }.loot-ledger-toolbar select { flex:0 1 120px; } }
@media(max-width:1100px) { .loot-workspace-grid { grid-template-columns:minmax(0,1fr); }.loot-entry-panel { max-width:none; }.loot-entry-pair { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
 .loot-summary-strip { padding:13px; gap:10px 18px; font-size:12px; }.loot-summary-strip small { width:100%; margin:0; }
 .loot-ledger-panel > h2 { margin:16px 14px 12px; }.loot-ledger-toolbar { margin:0 14px 12px; }
 .loot-ledger-toolbar select { flex-basis:100px; min-height:44px; }
 .loot-ledger-wrap { overflow:visible; }
 .loot-ledger-wrap table,.loot-ledger-wrap tbody { display:block; }
 .loot-ledger-wrap thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
 .loot-ledger-wrap tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:14px; border-top:1px solid #3a2a44; }
 .loot-ledger-wrap td { padding:0; border:0; min-width:0; }
 .loot-ledger-wrap td[data-label="Date"] { grid-column:2; grid-row:1; text-align:right; }
 .loot-ledger-wrap td[data-label="Recipient"] { grid-column:1; grid-row:1; }
 .loot-ledger-wrap td[data-label="Distribution"] { grid-column:1/-1; padding:6px 0; }
 .loot-ledger-wrap td[data-label="Proof of use"] { grid-column:1; }
 .loot-ledger-wrap .loot-ledger-actions { grid-column:2; text-align:right; }
 button.loot-proof-state,.loot-ledger-actions .btn { min-height:44px; padding:8px 9px; }
 .loot-entry-panel { padding:18px 15px; }
 .loot-entry-form input,.loot-entry-form select { min-height:44px; font-size:16px; }
 .loot-type-choice input { min-height:0; }.loot-type-picker .loot-type-choice { min-height:44px; }
 .loot-clear { min-height:44px; }
 .loot-entry-pair { grid-template-columns:minmax(0,1fr); }
}
.loot-form-shortcut { display:none; }
.loot-entry-panel { scroll-margin-top:20px; }
@media(max-width:1250px) { .loot-workspace-grid { grid-template-columns:minmax(0,1fr); }.loot-form-shortcut { display:inline-flex; } }

/* V23 — class collections and Review Studio */
.vod-library h1,.vod-library h3,.vod-studio h3 {font-family:var(--body);font-weight:650}
.vod-library-filters {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px;background:#19161f;border-color:#34303e}
.vod-library-filters input {flex:1;min-width:220px}
.vod-library-filters select {width:auto;max-width:100%}
.vod-collection {border:1px solid #34303e;border-radius:12px;background:#17151d;margin-bottom:16px;overflow:hidden}
.vod-collection>summary {display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px 20px;background:#211c2b;list-style:none}
.vod-collection>summary::-webkit-details-marker {display:none}
.vod-collection>summary::after {content:'›';margin-left:auto;color:var(--gold);font-size:24px;transform:rotate(0deg)}
.vod-collection[open]>summary::after {transform:rotate(90deg)}
.vod-collection-symbol {color:var(--gold);font-size:24px}
.vod-collection-body {padding:4px 18px 18px}
.vod-player-group h3 {display:flex;align-items:center;gap:12px;margin:18px 0 10px}
.vod-player-group h3 span {font-weight:400}
.vod-recording {border:1px solid #34303e;border-radius:8px;background:#1c1923;margin-top:8px;overflow:hidden}
.vod-recording-main {display:flex;align-items:center;gap:16px;padding:12px}
.vod-thumbnail {position:relative;display:grid;place-items:center;flex:0 0 148px;aspect-ratio:16/9;background:linear-gradient(135deg,#312342,#15121c);overflow:hidden;border-radius:6px;color:var(--gold);font-size:32px}
.vod-thumbnail img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vod-recording-info {flex:1;min-width:0;overflow-wrap:anywhere}
.vod-recording-info>a:first-child {display:block;font-size:17px;margin-bottom:5px}
.vod-recording-meta {display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:220px}
.vod-state {font-size:12px;color:var(--muted)}
.vod-state.finished {color:#80d6a0}
.vod-recording-options {border-top:1px solid #34303e;padding:8px 12px}
.vod-recording-options>summary {cursor:pointer;font-size:12px;color:var(--muted)}
.vod-recording-options .link-row {padding-top:10px;flex-wrap:wrap}
.vod-recording-options select {width:auto;max-width:100%}
.vod-studio {grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:20px}
.vod-studio-video {min-width:0}
.vod-studio .vod-player-wrap {border:1px solid #39313f;border-radius:12px}
.vod-studio .vod-toolbar {background:#211c29;padding:12px;align-items:center;justify-content:flex-start;gap:8px}
.vod-studio .vod-colors {margin-right:auto}
.vod-studio-sidebar {padding:0;background:#19161f;border-color:#39313f;overflow:hidden;min-width:0}
.vod-studio-tabs {display:flex;border-bottom:1px solid #39313f;background:#211c29}
.vod-studio-tabs button {flex:1;cursor:pointer;background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;padding:16px 10px;font:600 15px var(--body)}
.vod-studio-tabs button[aria-selected=true] {color:var(--gold);border-bottom-color:var(--gold);background:#2b2332}
.vod-studio [role=tabpanel] {padding:18px}
.vod-studio [role=tabpanel][hidden] {display:none}
.vod-studio .vod-marker-panel {max-height:650px;overflow:auto;scrollbar-gutter:stable}
.vod-studio .vod-marker-panel>h3 {font-size:14px;color:var(--muted);margin-bottom:16px}
.vod-studio .vod-marker {border-color:#3c3345;background:#211c2a;padding:8px;flex-wrap:wrap}
.vod-studio .vod-marker.active {border-color:var(--gold);box-shadow:inset 3px 0 var(--gold);background:#2a2330}
.vod-studio .vod-marker-time {color:var(--gold);margin-bottom:8px}
.vod-studio .vod-marker-time .muted {display:block;margin-top:4px}
.vod-studio .vod-marker-note {font-size:14px;line-height:1.6}
.vod-studio .vod-marker>.btn {margin-left:auto;font-size:12px;padding:3px 8px}
.vod-studio .vod-review-entry {background:#211c2a;border:1px solid #39313f;padding:14px;border-radius:8px;overflow-wrap:anywhere}
.vod-studio .vod-review-entry+.vod-review-entry {margin-top:12px}
.vod-composer {margin-top:16px;background:#19161f;border-color:#39313f}
.vod-composer>summary {cursor:pointer;color:var(--gold);font-weight:600}
.vod-composer form {padding-top:16px}
.vod-studio button:focus-visible,.vod-library summary:focus-visible,.vod-composer summary:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
@media(min-width:1500px) {.vod-studio-sidebar {position:sticky;top:20px}}
@media(max-width:1100px) {.vod-recording-main {flex-wrap:wrap}.vod-recording-meta {flex:1;max-width:none}.vod-studio {grid-template-columns:1fr}.vod-studio .vod-marker-panel {max-height:none}}
@media(max-width:600px) {.vod-library-filters input,.vod-library-filters select {width:100%;min-width:0}.vod-collection>summary {flex-wrap:wrap;padding:12px}.vod-collection>summary .muted {width:100%;order:3}.vod-collection-body {padding:0 10px 12px}.vod-thumbnail {flex-basis:100px}.vod-recording-info {min-width:140px}.vod-recording-main {gap:10px}.vod-recording-meta {flex-basis:100%}.vod-recording-main>.btn {width:100%;text-align:center}.vod-studio .vod-toolbar .btn {flex:1}.vod-studio .vod-colors {width:100%;margin-bottom:4px}}
.vod-studio-head h1 {font-family:var(--body);font-weight:650}

/* V24 — compact review controls and note-first composer */
.vod-back-link {display:inline-block;color:var(--muted);font-size:14px;margin-bottom:10px;text-decoration:none}
.vod-back-link:hover {color:var(--gold)}
#vod-review-sub {display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.vod-visibility-badge {display:inline-block;padding:2px 9px;border:1px solid #4b3f55;border-radius:20px;font-size:12px;color:var(--gold);background:#27212d}
.vod-header-note {flex-basis:100%;overflow-wrap:anywhere;font-size:14px}
.vod-tool-icon {width:17px;height:17px;flex:none;vertical-align:middle}
.vod-studio .vod-toolbar .btn {display:inline-flex;align-items:center;justify-content:center;gap:7px}
.vod-studio .vod-marker {flex-wrap:nowrap;gap:4px;padding:5px 8px;align-items:flex-start}
.vod-studio .vod-marker-jump {padding:7px;min-width:0}
.vod-studio .vod-marker-time {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:4px;font-size:15px}
.vod-studio .vod-marker-time .muted {display:inline;margin:0;overflow-wrap:anywhere}
.vod-studio .vod-marker-note {font-size:14px;line-height:1.5}
.vod-marker-actions {margin-top:5px}
.vod-marker-actions>summary {min-width:32px;min-height:32px;display:grid;place-items:center;font-size:21px}
.vod-points-count,.vod-review-status {margin-bottom:12px}
.vod-composer textarea {min-height:82px}
.vod-composer-save {justify-content:space-between;gap:12px;flex-wrap:wrap}
.vod-composer-hint {margin:10px 0 14px}
.vod-drawing-settings {border-top:1px solid #39313f;padding-top:12px}
.vod-drawing-settings>summary {cursor:pointer;font-size:14px;color:var(--muted)}
.vod-drawing-settings .row {margin-top:12px}
@media(max-width:600px) {.vod-composer-save>.btn {width:100%}.vod-studio .vod-marker-time {gap:2px 10px}}

/* V25 — Gear Workspace */
.gear-workspace {--gear-border:#37303f;--gear-surface:#1b1722}
.gear-workspace h1,.gear-workspace h2 {font-family:var(--body);font-weight:650}
.gear-workspace h1 {font-size:30px;overflow-wrap:anywhere}
.gear-workspace-head {display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.gear-back-link {display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;margin-bottom:16px}
.gear-back-link:hover {color:var(--gold)}
.gear-person {display:flex;align-items:center;gap:16px}
.gear-person-initial {display:grid;place-items:center;flex:none;width:58px;height:58px;background:linear-gradient(135deg,#3d294b,#211d28);border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:600;letter-spacing:1px}
.gear-workspace-head .gear-build-tabs {display:flex;gap:0;padding:4px;border:1px solid var(--gear-border);border-radius:9px;background:var(--gear-surface);margin:0!important}
.gear-workspace-head .gear-build-tabs .gear-tab {border-radius:6px;border-color:transparent;padding:9px 16px;background:transparent}
.gear-workspace-head .gear-build-tabs .gear-tab.active {background:#3d2030;color:var(--gold);border-color:#704253}
.gear-workspace-grid {grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:18px;align-items:stretch}
.gear-workspace-grid>.geargear-screens {grid-column:auto;min-width:0}
.gear-workspace-grid .panel {background:var(--gear-surface);border-color:var(--gear-border);border-radius:12px;padding:18px;min-width:0}
.gear-panel-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.gear-panel-heading h2 {font-size:18px;letter-spacing:0}
.gear-workspace .gear-topic-tabs {display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;border-bottom:1px solid var(--gear-border);margin-bottom:14px;padding-bottom:0}
.gear-workspace .gear-topic-tabs .gear-tab {white-space:nowrap;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 14px;color:var(--muted)}
.gear-workspace .gear-topic-tabs .gear-tab.active {color:var(--gold);border-bottom-color:var(--gold);background:linear-gradient(0deg,#312334,transparent)}
.gear-workspace .gear-slides {display:block;overflow:visible;padding:0}
.gear-workspace .gear-slide {display:flex;gap:12px}
.gear-workspace .gear-slide[hidden] {display:none}
.gear-screenshot-preview {display:grid;place-items:center;min-height:250px;background:#100e14;border:1px solid var(--gear-border);border-radius:8px;overflow:hidden}
.gear-screenshot-preview>.gear-image-open {display:block;width:100%;line-height:0}
.gear-workspace .gear-shot {display:block;width:100%;max-height:540px;border:0;border-radius:0;object-fit:contain}
.gear-screenshot-preview .gear-image-open:focus-visible {outline:2px solid var(--gold);outline-offset:-3px}
.gear-screenshot-note>label {display:block;color:var(--text);font-size:14px;margin-bottom:7px}
.gear-note-controls {display:flex;align-items:flex-end;gap:12px}
.gear-note-controls textarea {flex:1;min-width:0;margin:0;background:#141117;border-color:var(--gear-border)}
.gear-note-controls button {flex:none}
.gear-workspace .geargear-chat {min-height:520px;max-height:830px;min-width:0}
.gear-workspace .gear-chat-list {max-height:none;min-height:300px;scrollbar-gutter:stable;margin-bottom:14px;padding-right:4px;gap:14px}
.gear-workspace .gear-chat-msg {border:0;border-left:2px solid #4a3b54;background:#231d2b;border-radius:0 8px 8px 0;padding:12px}
.gear-workspace .gear-chat-msg.me {border-left-color:var(--gold);background:#2b2130}
.gear-workspace .gear-chat-meta {flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;font-size:14px}
.gear-workspace .gear-chat-meta b {color:var(--gold)}
.gear-workspace .gear-chat-meta .small {font-size:11px}
.gear-workspace .gear-chat-text {font-size:14px;line-height:1.65}
.gear-workspace .gear-chat-form {padding-top:14px;border-top:1px solid var(--gear-border)}
.gear-workspace .gear-chat-form textarea {min-width:0;max-height:180px;overflow-y:auto;background:#141117;border-color:var(--gear-border)}
.gear-workspace-resources {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.gear-workspace-resources a {overflow-wrap:anywhere}
.gear-workspace-resources .gear-folder-list {max-height:420px;overflow-y:auto;scrollbar-gutter:stable}
.gear-workspace .gear-folder-item {background:#231d2b;border-color:var(--gear-border);padding:12px;font-size:14px;overflow-wrap:anywhere}
.gear-workspace .gear-folder-item .gear-shot {border-radius:6px;max-height:220px}
.gear-not-configured {color:var(--muted);display:inline-block;border:1px dashed #4c3c55;padding:5px 10px;border-radius:6px;font-size:13px}
.gear-workspace .gear-folder-form .row {flex-wrap:wrap}
.gear-workspace .gear-folder-form input {min-width:0;width:100%}
.gear-workspace button:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:1100px) {.gear-workspace-grid {grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}.gear-workspace-resources {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px) {.gear-workspace-grid {grid-template-columns:1fr}.gear-workspace .geargear-chat {height:520px;min-height:0}.gear-screenshot-preview {min-height:200px}.gear-workspace-resources {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) {.gear-workspace-resources {grid-template-columns:1fr}.gear-workspace-grid .panel {padding:14px}.gear-workspace-head {gap:16px}.gear-workspace-head .gear-build-tabs {width:100%;flex-wrap:nowrap;overflow-x:auto}.gear-build-tabs .gear-tab {white-space:nowrap}.gear-person-initial {width:46px;height:46px}.gear-workspace h1 {font-size:25px}.gear-note-controls {flex-direction:column;align-items:stretch}.gear-note-controls textarea {width:100%}.gear-workspace .gear-chat-form {flex-wrap:wrap}.gear-chat-form textarea {width:100%;flex-basis:100%}.gear-chat-form button {margin-left:auto}}

/* V26 — Requests and Leave of absence, two independent operations pages */
.ops-workspace {--ops-line:#37303f;--ops-surface:#1b1722}
.ops-workspace h1,.ops-workspace h2 {font-family:var(--body);font-weight:650}
.ops-workspace h1 {font-size:30px}
.ops-workspace h2 {font-size:18px;letter-spacing:0}
.ops-grid {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.ops-ledger {min-width:0}
.ops-workspace .panel {border-color:var(--ops-line);background:var(--ops-surface);border-radius:12px}
.ops-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ops-metric {display:flex;flex-direction:column;gap:6px;border:1px solid var(--ops-line);border-radius:10px;padding:16px 18px;background:linear-gradient(130deg,#25202e,#19151e)}
.ops-metric>span {font-size:13px;color:var(--muted)}
.ops-metric>strong {font-size:28px;line-height:1.1;font-weight:650;color:var(--text)}
.ops-metric.waiting>strong {color:#e8c468}
.ops-metric.approved>strong {color:#80d6a0}
.ops-metric.completed>strong {color:#98b8ef}
.ops-list-panel {padding:18px}
.ops-list-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ops-filters {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ops-filters input {flex:1;min-width:180px}
.ops-filters select {width:auto;min-width:150px;max-width:100%}
.ops-workspace table {font-size:14px;width:100%;table-layout:auto}
.ops-workspace thead {background:#241e2e}
.ops-workspace th {font-family:var(--body);font-size:12px;font-weight:600;color:#b5a7c3;white-space:nowrap}
.ops-workspace td {vertical-align:top;border-color:var(--ops-line);padding:14px 10px;overflow-wrap:anywhere;max-width:280px}
.ops-workspace .ops-actions-cell {white-space:normal;min-width:144px;max-width:210px}
.ops-actions-cell .btn {margin:0 4px 5px 0}
.ops-workspace tbody tr:hover {background:#241e2c}
.ops-workspace .st-pill {font-size:12px;white-space:nowrap}
.ops-composer {padding:20px;position:sticky;top:20px}
.ops-composer>p {margin:7px 0 18px}
.ops-form {display:flex;flex-direction:column;gap:14px;scroll-margin-top:20px}
.ops-form .field {margin:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.ops-form .field.hidden {display:none}
.ops-form label {font-size:13px;color:var(--text);margin:0}
.ops-form input,.ops-form select,.ops-form textarea {width:100%;min-width:0;background:#141117;border-color:var(--ops-line)}
.ops-form textarea {min-height:94px;resize:vertical}
.ops-form>.btn {width:100%;margin-top:3px}
.ops-policy {border-top:1px solid var(--ops-line);padding-top:14px;line-height:1.6}
.ops-composer>p.ops-policy {margin-bottom:0}
.ops-hint {border-top:1px solid var(--ops-line);padding-top:14px;margin:16px 0 0}
.ops-away-panel {padding:18px;margin-bottom:18px}
.ops-away-panel h2 {margin-bottom:14px}
.ops-away-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;max-height:260px;overflow-y:auto}
.ops-away-person {display:flex;flex-direction:column;gap:4px;background:#24202d;border:1px solid #3f344b;border-left:3px solid #80d6a0;border-radius:7px;padding:10px 12px;overflow-wrap:anywhere}
.ops-away-person strong {font-size:14px}
.ops-mobile-compose {display:none}
.ops-workspace :is(button,input,textarea,select):focus-visible {outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:1250px) {.ops-grid {grid-template-columns:1fr}.ops-composer {position:static;max-width:none}.ops-mobile-compose {display:inline-flex}.ops-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ops-form>.field:has(textarea),.ops-form>.btn {grid-column:1/-1}}
@media(max-width:700px) {.ops-workspace h1 {font-size:27px}.ops-metrics {gap:8px}.ops-metric {padding:12px}.ops-metric>span {font-size:11px}.ops-metric>strong {font-size:24px}.ops-list-panel,.ops-composer {padding:14px}.ops-filters input,.ops-filters select {width:100%;flex-basis:100%}.ops-form {display:flex}.ops-workspace .tbl-wrap {overflow:visible;border:0}.ops-workspace table,.ops-workspace tbody {display:block}.ops-workspace thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.ops-workspace tr {display:block;border:1px solid var(--ops-line);border-radius:8px;margin-bottom:12px;padding:8px;background:#201a27}.ops-workspace td {display:block;width:auto;max-width:none;border:0;padding:5px 8px;white-space:normal!important}.ops-workspace td::before {content:attr(data-label);display:block;font-size:11px;font-weight:600;color:#a99ab8;margin-bottom:3px}.ops-workspace td.ops-actions-cell {max-width:none;padding-top:10px}.ops-workspace td.ops-actions-cell:empty {display:none}.ops-away-list {grid-template-columns:repeat(2,minmax(0,1fr))}.ops-list-heading {align-items:flex-start}}

/* V27 — Leadership: review workspaces, warning ledger and grouped Admin */
.leader-workspace {--leader-line:#393141;--leader-surface:#1b1722}
.leader-workspace h1,.leader-workspace h2,.leader-workspace h3,.leader-workspace summary {font-family:var(--body)}
.leader-workspace h1 {font-weight:650;font-size:30px}
.leader-workspace h2 {font-weight:650;font-size:20px}
.leader-workspace h3 {font-weight:600;font-size:15px;margin-bottom:10px}
.leader-workspace .panel {background:var(--leader-surface);border-color:var(--leader-line);border-radius:12px;min-width:0}
.leader-split {display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.7fr);gap:20px;align-items:start}
.leader-pending-count {font-size:14px;border:1px solid #66523b;border-radius:20px;padding:6px 14px;color:var(--gold);background:#2a2226}
.leader-queue-panel {padding:16px;min-width:0}
.leader-queue-panel>input {width:100%;margin:14px 0}
.leader-type-tabs {display:flex;flex-wrap:wrap;gap:6px}
.leader-type-tabs .btn {font-size:12px;padding:6px 9px}
.leader-type-tabs .btn.active {border-color:var(--gold);color:var(--gold);background:#352834}
.leader-type-tabs .btn span {margin-left:4px;color:var(--muted)}
.leader-queue {display:flex;flex-direction:column;gap:8px;max-height:650px;overflow-y:auto;scrollbar-gutter:stable}
.leader-queue-item {display:flex;flex-direction:column;gap:4px;flex:none;width:100%;text-align:left;padding:13px 14px;color:var(--text);background:#221c2b;border:1px solid var(--leader-line);border-left:3px solid transparent;border-radius:8px;cursor:pointer;font:inherit;overflow-wrap:anywhere}
.leader-queue-item:hover {background:#2d2434}
.leader-queue-item.active {border-color:#78623f;border-left-color:var(--gold);background:linear-gradient(100deg,#382c33,#27202d)}
.leader-queue-item>strong {font-size:15px}
.leader-queue-item>span {font-size:13px;color:#b8abc3}
.leader-queue-item>small {font-size:11px;color:var(--muted)}
.leader-detail {padding:24px;min-height:400px;overflow-wrap:anywhere}
.leader-detail-head {border-bottom:1px solid var(--leader-line);padding-bottom:20px;margin-bottom:22px}
.leader-detail-head h2 {margin:7px 0}
.leader-kicker {color:var(--gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.leader-detail-box {padding:16px;background:#221c2b;border:1px solid var(--leader-line);border-radius:8px;margin-bottom:16px}
.leader-detail-box p {margin:8px 0}
.leader-text {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:14px}
.leader-identity {display:flex;align-items:center;gap:12px;margin-bottom:16px}
.leader-diff {border:1px solid var(--leader-line);border-radius:8px;overflow:hidden;margin-bottom:20px}
.leader-diff-head,.leader-diff-row {display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px;font-size:14px}
.leader-diff-head {background:#2b2333;color:var(--muted);font-size:12px}
.leader-diff-row+.leader-diff-row {border-top:1px solid var(--leader-line)}
.leader-diff-row>span {white-space:pre-wrap;overflow-wrap:anywhere}
.leader-diff-row>span:last-child {color:#a5d6b5}
.leader-decision-actions {display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;margin-top:20px;border-top:1px solid var(--leader-line)}
.leader-date-range {font-size:20px;color:var(--gold)}
.leader-history {padding:18px;margin-top:20px}
.leader-history>summary,.leader-rules>summary,.leader-affected>summary {cursor:pointer;color:var(--gold);font-weight:600}
.leader-history .tbl-wrap {margin-top:12px}
.leader-history .diff {font-size:13px}
.leader-rules {padding:16px 18px;margin-bottom:20px}
.leader-rules p {font-size:14px;line-height:1.7;margin-bottom:0}
.leader-affected,.leader-member-status {padding:16px;margin-bottom:18px}
.leader-affected .rule-row {flex-wrap:wrap;gap:10px;font-size:14px}
.leader-affected .rule-row>strong {flex:1}
.leader-readonly {grid-template-columns:1fr}
.leader-audit-filters {padding:16px;margin-bottom:20px}
.leader-audit-filters .toolbar {margin:0;flex-wrap:wrap}
.leader-audit-filters input[type=search] {flex:1;min-width:180px}
.leader-audit-filters input[type=date] {max-width:170px}
.audit-split {grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr)}
.audit-queue {max-height:660px}
.leader-pagination {display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--leader-line);padding-top:14px;margin-top:16px}
.leader-facts {display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px;margin:0 0 22px;font-size:14px}
.leader-facts dt {color:var(--muted)}
.leader-facts dd {margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.leader-subheading {margin:20px 0 12px}
.leader-admin-grid {display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.leader-admin-nav {display:flex;flex-direction:column;gap:5px;padding:10px;position:sticky;top:20px}
.leader-admin-category {padding:12px 14px;color:var(--muted);text-align:left;background:transparent;border:1px solid transparent;border-radius:7px;font:600 14px var(--body);cursor:pointer}
.leader-admin-category:hover {background:#292130;color:var(--text)}
.leader-admin-category.active {color:var(--gold);background:#372a31;border-color:#6b573c;box-shadow:inset 3px 0 var(--gold)}
.leader-admin-content {min-width:0}
.leader-admin-pane[hidden] {display:none}
.leader-admin-pane-title {margin-bottom:16px;font-size:22px!important}
.leader-admin-pane>.panel {margin-bottom:16px;padding:20px}
.leader-admin-pane .fold-body {padding-top:16px}
.leader-admin-pane>details>summary {font-size:16px;font-weight:600;cursor:pointer}
.leader-admin-pane input:not([type=checkbox]):not([type=radio]):not([type=color]),.leader-admin-pane select,.leader-admin-pane textarea {max-width:100%}
.leader-admin-pane .rule-row {flex-wrap:wrap;overflow-wrap:anywhere}
.leader-admin-pane .rules-grid {min-width:0}
.leader-admin-pane .field {min-width:0}
.leader-workspace :is(button,input,textarea,select,summary):focus-visible {outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:1000px) {.leader-split,.audit-split {grid-template-columns:1fr}.leader-queue {max-height:320px}.leader-detail {min-height:0}.leader-admin-grid {grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:700px) {.leader-workspace h1 {font-size:27px}.leader-detail {padding:16px}.leader-diff-head,.leader-diff-row {grid-template-columns:minmax(70px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px;font-size:12px}.leader-admin-grid {grid-template-columns:1fr}.leader-admin-nav {position:static;flex-direction:row;overflow-x:auto;gap:6px}.leader-admin-category {white-space:nowrap;flex:none}.leader-admin-pane>.panel {padding:16px}.leader-detail-box {padding:12px}.leader-facts {grid-template-columns:65px minmax(0,1fr)}.leader-decision-actions .btn {flex:1;min-width:120px}.leader-admin-pane .rules-grid {grid-template-columns:1fr}.leader-affected .rule-row {align-items:flex-start}}

/* V28 — distinguish attending players from unconfirmed assignments without fading text. */
.board .mrow:not(.dim) {background:color-mix(in srgb,var(--c) 11%,#252631);border-top-color:#4a4356;border-right-color:#4a4356;border-bottom-color:#4a4356;border-left-color:var(--c)}
.board .mrow:not(.dim) .member-name-text {color:#f3eff7}
.board .mrow:not(.dim) .mmeta .cls {color:#ddd5e6}
.board .mrow:not(.dim) .mspec.specialization-scroll {color:#c9bfd4}
.board .pnotattending {margin-top:6px;padding:10px 7px 7px;border:1px solid #46394e;border-top:2px solid #75617f;border-radius:0 0 7px 7px;background:#100e15;display:flex;flex-direction:column;gap:7px}
.board .not-confirmed-heading {display:flex;gap:5px;align-items:center;padding:0 2px 3px;font:600 11px/18px var(--body);color:#c8b9d2}
.board .not-confirmed-heading>span {color:#a99bb4;font-weight:400}
.board .mrow.dim,.board .mrow.dim:hover {opacity:1;background:#19161f;border-color:#3c3543;border-left-color:#3c3543}
.board .mrow.dim .member-name-text {color:#d3cbdc}
.board .mrow.dim .mmeta .cls {color:#b5aabf}
.board .mrow.dim .mspec.specialization-scroll {color:#ada1b8;line-height:16px}
.board .mrow.dim .wicon {filter:grayscale(1);opacity:.75;width:16px;height:16px}
.board .mrow.dim .midentity .mname {line-height:16px}
.board .mrow.dim .midentity .mmeta {min-height:16px}
.board .mrow.dim .mtxt {gap:1px}
.board .member-attendance-badge {align-self:flex-start;display:inline-block;width:auto;max-width:100%;font:600 10px/10px var(--body);white-space:nowrap;border:1px solid #6a6476;border-radius:4px;padding:1px 5px;margin-top:1px}
.board .member-attendance-badge.attendance-noreply {background:#302c38;color:#ded9e6;border-color:#746d82}
.board .member-attendance-badge.attendance-declined {background:#4b242b;color:#ffb6ae;border-color:#9d5459}
.board .member-attendance-badge.attendance-loa {background:#1b3544;color:#a6ddfa;border-color:#507f9a}
.board .mrow.dim:hover {border-color:#766682;background:#211b29}
.board .party-composition .full-label {color:#e4cf91;font-weight:600}

/* 1.43.3 polish: the "Attend anyway" button was losing to .btn.sm and rendering oversized in the party board. */
.board .loa-inline .btn.sm.loa-toggle { font-size:11px; padding:2px 8px; }

/* V29 — Skill cores: active per build, ownership shared across builds. */
.gear-core-collection h3 {display:flex;align-items:baseline;gap:8px;font:600 14px var(--body);margin:0}
.gear-core-slot-label {font-size:11px;color:var(--muted);margin:12px 0 6px}
.gear-core-tile {display:flex;align-items:center;gap:9px;text-align:left;width:100%;min-width:0;min-height:42px;padding:7px 9px;border:1px solid #463b50;border-radius:7px;background:#27202f;color:#ede5f4;font:600 13px/1.35 var(--body);cursor:pointer;margin-top:6px}
.gear-core-tile img {flex:none;object-fit:contain}
.gear-core-tile span {overflow-wrap:anywhere}
.gear-core-tile:hover {border-color:var(--gold);background:#332939}
.gear-core-empty {border:1px dashed #463b50;border-radius:6px;padding:9px;color:var(--muted);font-size:12px}
.gear-core-owned-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px;padding-top:16px;border-top:1px solid #463b50}
.gear-core-owned-list {max-height:360px;overflow:auto;scrollbar-gutter:stable}
.gear-core-source {margin:12px 0 0;font-size:11px}
.gear-core-filters {display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.gear-core-filters input[type=search] {flex-basis:100%;min-width:0}
.gear-core-filters select {flex:1;min-width:130px}
.gear-core-filters label {display:flex;align-items:center;gap:6px;flex-basis:100%}
.gear-core-picker-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;max-height:50vh;overflow-y:auto;scrollbar-gutter:stable;padding:4px}
.gear-core-picker-list .gear-core-tile {margin:0}
.gear-core-result-count {margin-bottom:8px}
.gear-core-detail-head {display:flex;align-items:center;gap:14px}
.gear-core-detail-head h2 {font-family:var(--body);font-weight:600}
.gear-core-effect {white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;background:#211b2a;border:1px solid #463b50;border-radius:8px;margin:16px 0;line-height:1.65}
.gear-core-notice {font-size:13px;color:var(--gold);border-left:2px solid var(--gold);padding-left:12px}
.gear-core-details .dlg-actions {flex-wrap:wrap}
.gear-core-tile:focus-visible {outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:600px) {.gear-core-picker-list {grid-template-columns:1fr}.gear-core-details .dlg-actions>.btn {flex:1;min-width:120px}}

.gear-core-tile img.icon-missing, .gear-core-detail-head img.icon-missing { visibility:hidden; }

/* Gear thread: adjacent panels must not pick up the generic ".panel + .panel" gap (it staggered their tops by 16px). */
.gear-workspace-grid > .panel + .panel, .gear-workspace-resources > .panel + .panel { margin-top:0; }

/* V30 — screenshots stay in the workspace; fit-to-screen and scrollable actual size. */
.gear-image-open {appearance:none;display:block;max-width:100%;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:zoom-in}
.gear-image-open:focus-visible,.gear-dropzone:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
dialog:has(.gear-image-viewer) {width:min(1440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:16px;overflow:auto}
.gear-image-toolbar {display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gear-image-toolbar h2 {flex:1;min-width:0;margin:0;overflow-wrap:anywhere;font:600 18px/1.4 var(--body)}
.gear-image-toolbar button {flex:none}
.gear-image-viewport {overflow:auto;max-height:calc(100dvh - 140px);background:#0c0a10;border:1px solid var(--line);border-radius:6px;overscroll-behavior:contain;text-align:center}
.gear-image-viewport img {display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 145px);object-fit:contain;margin:auto}
.gear-image-viewport img.actual-size {max-width:none;max-height:none;margin:0}
.gear-dropzone[aria-busy=true] {opacity:.65;cursor:progress}
#gear-upload-status {margin-top:12px}
@media(max-width:600px) {dialog:has(.gear-image-viewer) {padding:10px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.gear-image-toolbar {flex-wrap:wrap}.gear-image-toolbar h2 {flex-basis:100%;font-size:16px}}
/* V31: per-topic screenshot galleries. */
.gear-gallery-thumbs,.gear-viewer-thumbs{display:flex;gap:10px;overflow-x:auto;padding:10px 2px;scroll-snap-type:x proximity}
.gear-gallery-thumb{flex:0 0 132px;border:1px solid var(--line);border-radius:7px;background:#17131c;overflow:hidden;scroll-snap-align:start}
.gear-gallery-thumb.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.gear-gallery-thumb>button{display:block;position:relative;border:0;padding:0;width:100%;background:transparent;cursor:pointer}
.gear-gallery-thumb img{display:block;width:100%;height:82px;object-fit:cover}
.gear-cover{position:absolute;bottom:4px;left:4px;background:var(--gold);color:#17131c;padding:2px 6px;border-radius:3px;font-size:11px}
.gear-thumb-actions{display:flex;justify-content:space-between;padding:3px}
.gear-thumb-actions button{padding:4px 8px;border:0;background:transparent;color:var(--text);cursor:pointer;min-height:32px}
.gear-thumb-actions button:disabled{opacity:.25;cursor:default}
.gear-viewer-stage{position:relative}.gear-viewer-prev,.gear-viewer-next{position:absolute;top:45%;z-index:1;border-radius:50%;font-size:26px;background:#201b29e8}.gear-viewer-prev{left:8px}.gear-viewer-next{right:8px}
.gear-viewer-thumbs button{flex:0 0 90px;padding:2px;border:1px solid var(--line);background:#17131c;border-radius:5px}
.gear-viewer-thumbs button[aria-pressed="true"]{border-color:var(--gold)}
.gear-viewer-thumbs img{display:block;width:84px;height:54px;object-fit:cover}
.gear-image-viewer .gear-image-viewport,.gear-image-viewer .gear-image-viewport img{max-height:calc(100dvh - 240px)}
.gear-image-viewer .gear-image-viewport img.actual-size{max-height:none}
@media(max-width:600px){.gear-gallery-thumb{flex-basis:115px}.gear-thumb-actions button{min-height:44px}.gear-image-toolbar{gap:8px}.gear-viewer-prev,.gear-viewer-next{min-width:44px;min-height:44px}}
.gear-workspace-grid>.gear-potentials {grid-column:1/-1;padding:0;overflow:hidden;align-self:start}
.gear-potentials>summary {display:flex;align-items:center;gap:14px;list-style:none;padding:18px 20px;cursor:pointer;background:linear-gradient(110deg,rgba(119,83,143,.13),transparent);min-height:64px}
.gear-potentials>summary::-webkit-details-marker {display:none}
.gear-potential-title {font-size:1.15rem;font-weight:700}
.gear-potential-chevron {margin-left:auto;font-size:24px;line-height:1;transform:rotate(0);transition:transform .15s}
.gear-potentials[open] .gear-potential-chevron {transform:rotate(90deg)}
.gear-potentials[open]>summary {border-bottom:1px solid var(--gear-border,#38303e)}
.gear-potentials-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gear-potentials-body>section {padding:20px;min-width:0}
.gear-potentials-body h2 {font-family:inherit;font-size:1.05rem;margin:0 0 5px}
.gear-potentials-body p {margin:0 0 16px}
.gear-equipment {border-right:1px solid var(--gear-border,#38303e);background:radial-gradient(ellipse at center,rgba(141,111,60,.09),transparent 68%)}
.gear-equipment-map {position:relative;height:480px;max-width:570px;margin:auto}
.gear-potential-body {position:absolute;width:240px;height:465px;left:50%;top:0;transform:translateX(-50%);object-fit:contain;pointer-events:none;opacity:.95}
.gear-potential-slot {position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:72px;min-height:90px;padding:7px 4px;background:linear-gradient(145deg,#26222e,#141319);border:1px solid #4b4059;border-radius:7px;color:#cec0df;font-family:inherit;cursor:pointer;line-height:1.2;box-shadow:0 3px 10px #0004}
.gear-potential-slot>span:first-child {font-size:11px;color:var(--text,#eee)}
.gear-potential-slot>svg {width:34px;height:34px}
.gear-potential-slot>img.wicon {width:48px;height:48px;object-fit:contain;border-radius:5px}
.gear-potential-slot small {font-size:10px;overflow-wrap:anywhere}
.gear-potential-slot.is-assigned {border-color:#9b8251}
.gear-potential-slot.is-assigned .gear-potential-slot-count {color:#d8bb7e}
.gear-potential-slot:hover,.gear-potential-slot:focus-visible {border-color:#e1c482;box-shadow:0 0 12px #d2b56a25;outline:2px solid #e1c482;outline-offset:2px}
.gear-potential-slot.slot-weapon1,.gear-potential-slot.slot-weapon2 {top:34%;width:82px;min-height:145px}
.gear-potential-slot.slot-weapon1 {left:0}
.gear-potential-slot.slot-weapon2 {right:0}
.gear-potential-slot.slot-head {left:23%;top:0}
.gear-potential-slot.slot-cloak {right:23%;top:0}
.gear-potential-slot.slot-chest {left:23%;top:26%}
.gear-potential-slot.slot-hands {left:23%;top:51%}
.gear-potential-slot.slot-legs {left:23%;top:76%}
.gear-potential-slot.slot-feet {right:23%;top:76%}
.gear-potential-accessories {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;max-width:570px;margin:8px auto 0}
.gear-potential-accessories .gear-potential-slot {position:static;width:100%;min-width:0;min-height:85px}
@media(max-width:600px) {.gear-potential-accessories {grid-template-columns:repeat(4,minmax(0,1fr))}}
.gear-potential-summary-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
.gear-potential-summary {display:flex;gap:9px;align-items:start;position:relative;width:100%;text-align:left;background:#15141b;border:1px solid var(--gear-border,#38303e);border-radius:8px;color:inherit;padding:11px 23px 11px 10px;cursor:pointer;font-family:inherit;min-height:84px}
.gear-potential-summary:hover,.gear-potential-summary:focus-visible {border-color:#c7a76b;outline-color:#c7a76b}
.gear-potential-summary-icon {flex:0 0 28px;color:#bca6d0}
.gear-potential-summary-icon svg {width:28px;height:32px}
.gear-potential-summary-content {display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.gear-potential-assignment {display:flex;flex-direction:column;gap:4px;padding-top:3px}
.gear-potential-assignment+.gear-potential-assignment {border-top:1px solid #38303e;margin-top:7px;padding-top:8px}
.gear-potential-assignment strong {font-size:.88rem;font-weight:600;line-height:1.3}
.gear-potential-assignment>span {line-height:1.4}
.gear-potential-edit {position:absolute;right:8px;top:9px;color:#a695b7}
.gear-potential-warning {color:#e2b668;line-height:1.45}
.gear-potential-picker {max-width:760px}
.gear-potential-picker h2 {font-family:inherit}
.gear-potential-search {display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.gear-potential-options {max-height:52vh;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:3px}
.gear-potential-option {display:flex;gap:12px;align-items:start;background:#19161f;border:1px solid #3b3346;border-radius:8px;padding:12px;cursor:pointer}
.gear-potential-option[hidden],.gear-potential-picker [hidden] {display:none!important}
.gear-potential-option:has(input:checked) {border-color:#c4a366;background:#2a241e}
.gear-potential-option>input {margin-top:9px;accent-color:#c4a366;flex-shrink:0}
.gear-potential-option>span:last-child {display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}
.gear-potential-option-icon {position:relative;width:34px;height:34px;flex:0 0 34px;color:#c1a9d5}
.gear-potential-option-icon svg,.gear-potential-option-icon img {position:absolute;inset:0;width:34px;height:34px;object-fit:contain;border-radius:4px}
.gear-potential-option-icon img {background:#19161f}
@media(min-width:1500px) {.gear-equipment-map {height:530px}.gear-potential-body {height:515px;width:266px}}
@media(max-width:1200px) {.gear-potentials-body {grid-template-columns:1fr}.gear-equipment {border-right:0;border-bottom:1px solid var(--gear-border,#38303e)}}
@media(max-width:600px) {.gear-potentials>summary {padding:14px 12px;gap:9px;flex-wrap:wrap}.gear-potential-title {font-size:1.05rem}.gear-potentials-body>section {padding:14px 10px}.gear-potential-summary-grid {grid-template-columns:1fr}.gear-equipment-map {height:455px}.gear-potential-body {height:440px;width:220px}.gear-potential-slot {width:59px;min-height:82px}.gear-potential-slot.slot-weapon1,.gear-potential-slot.slot-weapon2 {width:63px;min-height:130px}.gear-potential-slot.slot-head,.gear-potential-slot.slot-chest,.gear-potential-slot.slot-hands,.gear-potential-slot.slot-legs {left:22%}.gear-potential-slot.slot-cloak,.gear-potential-slot.slot-feet {right:22%}.gear-potential-slot>svg {width:29px;height:29px}.gear-potential-slot>img.wicon {width:38px;height:38px}.gear-potential-accessories {gap:4px}.gear-potential-accessories .gear-potential-slot>span:first-child {font-size:10px}}
@media(prefers-reduced-motion:reduce) {.gear-potential-chevron {transition:none}}
.gear-active-core-strip {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:8px 2px}
.gear-active-core-strip>strong {font-size:.95rem}
.gear-active-core-strip>div {display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.gear-active-core-strip .gear-core-tile {width:auto;margin:0;max-width:100%}

/* Potentials: one choice per item, so the options are radio buttons (global input rule would stretch them). */
.gear-potential-option>input[type=radio] {width:auto;flex:none;padding:0;margin-top:9px;accent-color:#c4a366}
.gear-potential-none {align-items:center}
.gear-potential-none>input[type=radio] {margin-top:0}
.gear-potential-none>span:nth-child(2) {display:none}
.gear-combined-cores {padding:20px;border-bottom:1px solid var(--gear-border,#38303e)}
.gear-combined-cores h2 {font-family:inherit;font-size:1.05rem}
.gear-combined-core-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gear-core-position {min-width:0}
.gear-core-position>span {display:block;font-size:12px;margin-bottom:7px}
.gear-core-position .gear-core-tile {width:100%;min-height:64px;margin:0}
.gear-core-owned-dropdown {margin-top:18px}
.gear-core-owned-dropdown>summary {cursor:pointer;color:var(--muted);padding:5px 0;font-size:14px}
.gear-combined-owned-list {display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.gear-combined-owned-list .gear-core-tile {width:auto;margin:0;max-width:100%}
.gear-combined-core-footer {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:15px}
.gear-potential-option>input[type=radio] {width:18px;height:18px;flex:0 0 18px;accent-color:var(--gold,#d8b875)}
.gear-workspace-resources {grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px) {.gear-combined-core-grid {grid-template-columns:1fr}.gear-combined-cores {padding:16px 12px}.gear-combined-core-footer {flex-wrap:wrap}}
@media(max-width:600px) {.gear-workspace-resources {grid-template-columns:1fr}}
.sc-system-status {display:flex;flex-direction:column;gap:18px}
.sc-system-status>.sc-section-heading {margin:0}
.sc-system-status h2 {font:600 1.05rem var(--body)}
.sc-status-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sc-status-metric {background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:17px;display:flex;flex-direction:column;gap:9px;min-width:0}
.sc-status-metric>span {color:var(--muted);font-size:13px}
.sc-status-metric>strong {font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.sc-status-metric>small {color:var(--muted);font-size:12px;line-height:1.4}
.sc-status-panel {padding:20px!important;min-width:0}
.sc-status-notice {border:1px solid #665038;background:#a4773020;padding:13px 16px;border-radius:9px;font-size:14px;color:#dfcfb0;overflow-wrap:anywhere}
.sc-status-notice.is-error {border-color:#8a4050;background:#a42b4720;color:#efb4bd}
.sc-status-table-wrap {overflow-x:auto;overscroll-behavior-x:contain}
.sc-status-table {border-collapse:collapse;width:100%;font-size:13px;min-width:820px}
.sc-status-table th,.sc-status-table td {text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.sc-status-table thead th {font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.sc-status-table tbody th strong,.sc-status-table tbody th small {display:block;max-width:220px;overflow-wrap:anywhere}
.sc-status-table small {font-weight:400;color:var(--muted);font-size:11px;margin-top:4px}
.sc-status-badge {display:inline-block;border:1px solid #665b72;border-radius:20px;padding:3px 9px;font-size:12px;color:#c3b7cd;white-space:nowrap}
.sc-status-badge.is-ok {border-color:#46785b;color:#a2dfb5;background:#34774b20}
.sc-status-badge.is-bad {border-color:#a24e5c;color:#f3a6b4;background:#9d304525}
.sc-status-badge.is-warn {border-color:#95713d;color:#e9c27c;background:#9b702520}
.sc-status-bottom {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sc-status-facts {margin:15px 0}
.sc-status-facts>div {display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.sc-status-facts dt {color:var(--muted)}
.sc-status-facts dd {margin:0;text-align:right;overflow-wrap:anywhere}
.sc-status-observations {list-style:none;padding:0;margin:14px 0 0}
.sc-status-observations li {display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding:10px 0;font-size:13px;overflow-wrap:anywhere}
.sc-status-observations time {font-size:11px;color:var(--muted)}
@media(max-width:1050px) {.sc-status-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}.sc-status-bottom {grid-template-columns:1fr}}
@media(max-width:500px) {.sc-status-metrics {grid-template-columns:1fr}.sc-status-panel {padding:14px!important}.sc-status-facts>div {flex-direction:column;gap:3px}.sc-status-facts dd {text-align:left}.sc-system-status>.sc-section-heading {flex-wrap:wrap}}

/* System status: neighbouring panels must not pick up the generic ".panel + .panel" gap (it staggered the two bottom cards). */
.sc-status-bottom > .panel + .panel, .sc-status-metrics > .panel + .panel, .sc-system-status .sc-status-panel + .sc-status-panel { margin-top:0; }

/* Keep compact member cards readable in the narrower Available members panel. */
.board .mtxt { container-type:inline-size; }
.board .pool-list .mtxt { gap:0; }
.board .midentity .mname { flex:1 1 0; max-width:none; }
.board .midentity .mmeta { flex:0 1 auto; max-width:55%; }
.board .mrow .menu { flex:0 0 auto; }
.board .mname > .tag { flex:none; }
@container (max-width:240px) {
 .board .midentity { flex-wrap:wrap; gap:0; }
 .board .midentity .mname { flex:1 0 100%; max-width:100%; line-height:16px; gap:5px; }
 .board .midentity .mmeta { flex:1 0 100%; max-width:100%; min-height:18px; line-height:18px; gap:4px; }
 .board .midentity .wicon { width:16px; height:16px; }
 .board .mspec.specialization-scroll,.board .mrow.dim .mspec.specialization-scroll { line-height:14px; }
}

/* Shotcaller coverage and connection failures are states, not role colours. */
.party-voice-warning{padding:8px 12px;border-top:1px solid #8b652b;background:#302719;color:#f4cb7f;font-size:.82rem}
.sc-channel.is-disrupted{border-color:#df8b57;background:#2b2020;box-shadow:inset 3px 0 #df8b57}
.sc-channel-issue{margin:6px 0;color:#f3b987;font-size:.82rem}
.sc-live-dot.warning{background:#efb35b;box-shadow:0 0 10px #efb35b66}

/* Alliance Management reuses the existing Insanity panels, buttons and navigation. */
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.am-guild-list article{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0}.am-main-options{display:grid;gap:12px;margin:18px 0}.am-grid textarea{width:100%}.am-grid form{display:grid;gap:12px}.am-grid .seg{flex-wrap:wrap}@media(max-width:850px){.am-grid{grid-template-columns:1fr}.am-guild-list article{align-items:flex-start;flex-direction:column}}
/* Approved Variant 3: real controls over independent artwork assets. */
.sc-matrix-workspace { --bm-gold:#d9b875; --bm-line:#6f5776; --bm-text:#f2edf6; color:var(--bm-text); }
.sc-matrix-workspace .sc-eyebrow { display:none; }
.sc-matrix-workspace .page-head { margin-bottom:6px; }
.sc-matrix-workspace .page-head h1 { font:650 26px/1.2 var(--body); color:#d3c7e4; }
.sc-matrix-workspace .page-head p { font-size:13px; }
.sc-matrix-workspace .sc-console-tabs { margin-bottom:16px; }
.sc-matrix-workspace .sc-console-tabs button { padding:10px 20px; font-size:13px; }
.bm-shell { font:13px/1.4 var(--body); }
.bm-matrix { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1.18fr); gap:18px; align-items:stretch; }
.bm-matrix h2 { font:650 20px/1.2 var(--body); letter-spacing:-.35px; }
.bm-guild { position:relative; min-height:190px; border:1px solid #4b8d3a; border-radius:13px; overflow:hidden; background-color:#120e18; box-shadow:inset 0 -2px 4px #69dc5a44,0 6px 22px #0008; }
.bm-guild::before { content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; pointer-events:none; }
.bm-insanity::before { background-image:linear-gradient(0deg,#0b09132e,transparent 55%),url('/img/bridge-matrix/insanity-rogue.jpg'); background-position:left center; }
.bm-alliance { border-color:#4e99df; box-shadow:inset 0 -2px 4px #438cf866,0 6px 22px #0008; }
.bm-alliance::before { background-image:linear-gradient(0deg,#0b09133d,transparent 55%),url('/img/bridge-matrix/alliance-knight.jpg'); background-position:right center; }
.bm-guild-top { position:relative; display:flex; align-items:center; gap:10px; margin:30px 16px 0 36%; }
.bm-alliance .bm-guild-top { margin-left:25%; margin-right:24%; }
.bm-guild-top p { display:flex; align-items:center; gap:6px; margin:8px 0 0; font-size:11px; white-space:nowrap; }
.bm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#86818c; flex:none; }
.bm-dot.is-ready { background:#21d437; box-shadow:0 0 6px #29d34433; }
.bm-relays { margin-left:auto; text-align:right; white-space:nowrap; }
.bm-relays strong { display:block; font-size:21px; font-weight:650; }
.bm-relays span { display:block; font-size:10px; }
.bm-alliance .bm-relays { position:absolute; left:100%; margin-left:12px; top:4px; }
.bm-crest { position:absolute; left:-67px; top:-4px; width:54px; height:60px; color:#a9bbdd; filter:drop-shadow(0 2px 2px #000); }
.bm-crest svg { width:100%; height:100%; stroke-width:1; fill:#788cb122; }
.bm-caller { position:absolute; bottom:22px; left:22%; right:12px; min-height:60px; display:flex; align-items:center; gap:9px; padding:8px 9px; border:1px solid #66526d; border-radius:10px; background:linear-gradient(100deg,#110c19e8,#130f1aeb); box-shadow:inset 0 1px #ab84b122,0 4px 12px #0008; }
.bm-alliance .bm-caller { left:12px; right:19%; }
.bm-avatar { width:37px; height:37px; border:1px solid #625073; border-radius:50%; display:grid; place-items:center; color:#8b7dff; background:#251a38aa; flex:none; }
.bm-avatar svg { width:25px; height:25px; fill:#887aff33; }
.bm-caller > div { min-width:0; }
.bm-caller-title { font-size:12px; }
.bm-caller p { display:flex; align-items:center; gap:5px; margin:3px 0 0; font-size:11px; white-space:nowrap; }
.bm-caller p > span { max-width:100px; overflow:hidden; text-overflow:ellipsis; }
.bm-caller small { font-size:10px; color:#c9bbd7; }
.bm-main-badge { display:flex; align-items:center; justify-content:center; gap:6px; margin-left:auto; padding:8px; border:1px solid #504450; border-radius:6px; color:#a89bac; font-size:11px; white-space:nowrap; }
.bm-main-badge.is-main { color:#ffe6a3; border-color:#c5a770; background:linear-gradient(#5d3d321a,#bb92500e); }
.bm-main-badge svg { width:17px; height:17px; fill:currentColor; }
.bm-center { position:relative; min-width:0; min-height:190px; padding:4px 11px 11px; text-align:center; border:1px solid #897046; border-radius:34px 34px 14px 14px; background:radial-gradient(ellipse at 50% 35%,#482e332d,transparent 70%),linear-gradient(#19131c,#100d16); box-shadow:inset 0 1px #ddbd7844,0 5px 20px #0008; }
.bm-center h2 { font-size:19px; padding-bottom:6px; border-bottom:1px solid #83624733; }
.bm-connection { height:57px; position:relative; display:grid; place-items:center; }
.bm-wave { position:absolute; width:100%; height:60px; opacity:.75; stroke:url('#bm-wave-color'); stroke-width:1; filter:drop-shadow(0 0 3px #b64bdd); }
.bm-link { position:relative; display:grid; place-items:center; width:53px; height:53px; color:#ffdf91; border:2px solid #ffdb88; border-radius:50%; box-shadow:0 0 7px #f9bd5d,0 0 24px #ddaa5e77,inset 0 0 14px #dca35255; background:#2c211ae8; }
.bm-link svg { width:34px; height:34px; }
.bm-state { display:inline-flex; align-items:center; gap:8px; justify-content:center; min-width:106px; padding:3px 14px; border:1px solid #7d7485; border-radius:6px; color:#c9c0d4; background:#1e1925; position:relative; margin-top:-1px; }
.bm-state strong { font-size:14px; font-weight:500; }
.bm-state-copy { margin:5px 0 8px; min-height:15px; font-size:10px; color:#d1c7d7; }
.bm-controls { display:flex; align-items:stretch; justify-content:center; gap:6px; }
.bm-controls .btn { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; padding:7px 4px; min-height:31px; border:1px solid #ad94bd; border-radius:5px; color:#f5edfa; background:linear-gradient(#33263b66,#100c15); font-size:10px; white-space:nowrap; }
.bm-controls .btn:hover:not(:disabled) { border-color:#e8cc91; box-shadow:0 0 8px #a66d7333; }
.bm-controls .btn svg { width:13px; height:13px; flex:none; }
.bm-controls .bm-end { color:#ffb1b0; border-color:#d7484b; background:linear-gradient(#6b1b2b55,#1c0d16); }
.bm-settings { display:flex; align-items:center; margin-top:15px; min-height:49px; padding:7px 14px; border:1px solid #54405f; border-radius:13px; background:linear-gradient(#211827,#110e17); gap:0; box-shadow:inset 0 1px #dcb8ee0c; }
.bm-settings h3 { display:flex; align-items:center; gap:12px; padding:0 20px 0 9px; margin-right:13px; border-right:1px solid #6a5374; font:600 13px/1.3 var(--body); white-space:nowrap; }
.bm-settings svg { width:17px; height:17px; flex:none; color:#d7c9e3; }
.bm-setting { display:flex; align-items:center; justify-content:center; gap:12px; margin:0; padding:0 17px; min-height:29px; font-size:12px; color:#f0e8f4; white-space:nowrap; flex:1; background:none; border:0; }
.bm-setting > span:first-child { display:flex; align-items:center; gap:7px; }
.bm-setting > span:first-child svg { color:#ead28e; fill:#ead28e; }
.bm-switch { position:relative; width:37px; height:21px; flex:none; display:block; }
.bm-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:1; cursor:pointer; }
.bm-switch > span { display:block; width:100%; height:100%; background:linear-gradient(#716178,#3c3446); border:1px solid #b0a2ba; border-radius:15px; }
.bm-switch > span::after { content:""; display:block; width:15px; height:15px; margin:2px; background:linear-gradient(white,#d9d4df); border-radius:50%; box-shadow:0 1px 2px #000; }
.bm-switch input:checked + span,.bm-switch.is-on > span { background:linear-gradient(#67c950,#218e24); border-color:#8fdf7d; }
.bm-switch input:checked + span::after,.bm-switch.is-on > span::after { transform:translateX(15px); }
.bm-switch input:focus-visible + span { outline:2px solid #ffe5a8; outline-offset:3px; }
.bm-switch input:disabled { cursor:default; }
.bm-setting:has(input:disabled) { opacity:.6; }
.bm-ptt { border-left:1px solid #6a5374; gap:9px; cursor:help; }
.bm-ptt svg:last-child,.bm-swipe > svg:nth-last-child(2) { width:14px; height:14px; color:#bcacd1; }
.bm-swipe { cursor:pointer; }
.bm-api { display:flex; align-items:center; gap:9px; padding-left:17px; border-left:1px solid #46344c; white-space:nowrap; font-size:11px; }
.bm-signal { color:#31c347; font-size:18px; letter-spacing:1px; }
.bm-health-note { color:#d7b979; font-size:12px; }
.bm-shell button:disabled { opacity:.5; cursor:default; }
.bm-shell[data-bridge-state="active"] .bm-state { color:#9eff83; border-color:#85e65d; background:linear-gradient(#30572b,#0b1b0d); box-shadow:0 0 9px #5fff381a; }
.bm-shell[data-bridge-state="active"] .bm-state .bm-dot { background:#21dc2c; }
.bm-shell[data-bridge-state="paused"] .bm-state { color:#ffe0a1; border-color:#d5ad61; background:#3c2d18; }
.bm-shell[data-bridge-state="paused"] .bm-state .bm-dot { background:#edc46e; }
.bm-shell[data-bridge-state="paused"] .bm-wave,.bm-shell[data-bridge-state="off"] .bm-wave { opacity:.25; }
.bm-shell[data-bridge-state="reconnecting"] .bm-state,.bm-shell[data-bridge-state="error"] .bm-state { color:#ffc0ac; border-color:#d48b67; }
@media(min-width:1101px) and (max-width:1380px) { .bm-matrix { gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr); } .bm-caller { left:12px; right:12px; bottom:17px; }.bm-alliance .bm-caller { right:12px; }.bm-main-badge { padding:5px; font-size:10px; }.bm-caller small { display:none; }.bm-setting { padding:0 9px; gap:7px; }.bm-settings h3 { padding-right:10px; gap:8px; } }
@media(max-width:1100px) { .bm-matrix { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.bm-center { grid-column:1/-1; grid-row:2; max-width:none; }.bm-guild { min-height:190px; }.bm-settings { flex-wrap:wrap; gap:14px 0; }.bm-settings h3 { flex-basis:100%; border:0; }.bm-setting { flex:1 1 28%; }.bm-api { padding:0 15px; }.bm-controls { max-width:500px; margin:auto; }.bm-controls .btn { min-height:40px; font-size:12px; } }
@media(max-width:650px) { .bm-matrix { display:flex; flex-direction:column; gap:13px; }.bm-center { order:1; }.bm-alliance { order:2; }.bm-guild { min-height:190px; }.bm-setting { flex-basis:50%; padding:0 8px; font-size:11px; }.bm-ptt { border:0; }.bm-api { flex-basis:100%; justify-content:center; border:0; }.bm-settings { padding:14px 8px; }.bm-controls { display:grid; grid-template-columns:1fr 1fr; }.bm-controls .btn { min-height:44px; }.bm-caller,.bm-alliance .bm-caller { left:12px; right:12px; }.bm-guild-top { margin-left:35%; }.bm-main-badge { font-size:10px; padding:6px; }.bm-caller p > span { max-width:94px; }.sc-matrix-workspace .sc-console-tabs button { padding:10px 8px; } }
@media(prefers-reduced-motion:reduce) { .bm-shell * { animation:none!important; transition:none!important; } }

/* Bridge Control Matrix: below ~1500px the three-column layout clips relay counts, caller names and the
   centre buttons. Stack the three panels (Insanity, Bridge, Alliance) instead; keep counts inside the card. */
@media (max-width: 1500px) {
  .bm-matrix { grid-template-columns: minmax(0, 1fr); }
  .bm-caller p > span { max-width: 180px; }
}
@media (max-width: 760px) {
  .bm-guild-top { margin: 24px 12px 0 34%; flex-wrap: wrap; }
  .bm-alliance .bm-guild-top { margin: 24px 12px 0 26%; }
  .bm-alliance .bm-relays { position: static; margin-left: auto; }
  .bm-guild-top p { white-space: normal; }
  .bm-guild { min-height: 0; padding-bottom: 12px; }
  .bm-caller, .bm-alliance .bm-caller { position: relative; left: auto; right: auto; bottom: auto; margin: 14px 12px 0; }
  .bm-caller p > span { max-width: 120px; }
}