/* ---------- theme tokens ---------- */
:root {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #dfe4ea;      /* header */
  --panel: #eaf0f7;          /* sort/filter panel */
  --strip: #f4f6f9;          /* bid strip */
  --row-alt: #f7f9fb;
  --th-bg: #e7ebf1;
  --xrow-bg: #eef3fa;
  --text: #1b2430;
  --muted: #6a7480;
  --faint: #8a94a0;
  --border: #b9c1cc;
  --border-soft: #eef1f5;
  --border-mid: #c7d0db;
  --field-bg: #ffffff;
  --field-border: #aeb7c2;
  --btn-bg: #f6f8fa;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --hover: #eef4ff;
  --chosen: #fff7e0;
  --chosen-alt: #fdf3d6;
  --yours-bg: #1f8f3a;
  --yours-text: #ffffff;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --clock-bg: #d6e0ec;
  --pill-bg: #e5ebf3;
  --pill-dh: #fde8d3;
  --tip-bg: #1b2430;
  --tip-text: #ffffff;
  --cal-line: #cbd3dd;
  --cal-fill: #2b3440;
  --danger-border: #e5b3b3;
  --danger-hover: #fdeaea;
  --overlay: #1b2430cc;
  --disabled: #9aa3ad;
  --disabled-chosen: #8a7328;   /* disabled text on the pale-yellow "chosen" row */
}
:root[data-theme="dark"] {
  --bg: #0f1620;
  --surface: #18222e;
  --surface-2: #1b2734;
  --panel: #172230;
  --strip: #141d28;
  --row-alt: #1c2732;
  --th-bg: #1f2c3a;
  --xrow-bg: #17222f;
  --text: #dfe5ec;
  --muted: #94a2b1;
  --faint: #7c8b99;
  --border: #33455a;
  --border-soft: #24313f;
  --border-mid: #2c3d4f;
  --field-bg: #101922;
  --field-border: #3a4d61;
  --btn-bg: #223143;
  --accent: #3b82f6;
  --accent-text: #ffffff;
  --hover: #21354b;
  --chosen: #3a3413;
  --chosen-alt: #453f18;
  --yours-bg: #1f7a37;
  --yours-text: #ffffff;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --clock-bg: #24384f;
  --pill-bg: #2a3a4d;
  --pill-dh: #4a3520;
  --tip-bg: #0b1119;
  --tip-text: #dfe5ec;
  --cal-line: #3a4d61;
  --cal-fill: #cdd6df;
  --danger-border: #7a3b3b;
  --danger-hover: #3a1f1f;
  --overlay: #05080ccc;
  --disabled: #5b6b7a;
  --disabled-chosen: #a49463;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1620;
    --surface: #18222e;
    --surface-2: #1b2734;
    --panel: #172230;
    --strip: #141d28;
    --row-alt: #1c2732;
    --th-bg: #1f2c3a;
    --xrow-bg: #17222f;
    --text: #dfe5ec;
    --muted: #94a2b1;
    --faint: #7c8b99;
    --border: #33455a;
    --border-soft: #24313f;
    --border-mid: #2c3d4f;
    --field-bg: #101922;
    --field-border: #3a4d61;
    --btn-bg: #223143;
    --accent: #3b82f6;
    --accent-text: #ffffff;
    --hover: #21354b;
    --chosen: #3a3413;
    --chosen-alt: #453f18;
    --yours-bg: #1f7a37;
    --yours-text: #ffffff;
    --ok: #34d399;
    --warn: #fbbf24;
    --bad: #f87171;
    --clock-bg: #24384f;
    --pill-bg: #2a3a4d;
    --pill-dh: #4a3520;
    --tip-bg: #0b1119;
    --tip-text: #dfe5ec;
    --cal-line: #3a4d61;
    --cal-fill: #cdd6df;
    --danger-border: #7a3b3b;
    --danger-hover: #3a1f1f;
    --overlay: #05080ccc;
    --disabled: #5b6b7a;
    --disabled-chosen: #a49463;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; font: 13px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--text);
       background: var(--bg); display: flex; flex-direction: column; }

/* Its own bar at the very top, centered -- who/what/when, no controls (the
   theme toggle is pinned to the right edge via absolute positioning so it
   doesn't throw off that centering). Never wraps -- a second line would
   drift under the toggle's fixed vertical position -- so as the window
   narrows, the least useful pieces truncate/disappear instead (below)
   rather than wrapping or overlapping. */
#statusbar { position: relative; display: flex; align-items: center; justify-content: center;
             gap: .6rem; flex-wrap: nowrap; overflow: hidden;
             /* equal room on both sides keeps the text centered and clear of the
                "Light mode / Dark mode" switch on the right */
             padding: .3rem 7.5rem;
             background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; }

.theme-toggle-wrap { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
                     align-items: center; gap: .45rem; }
.theme-toggle-wrap .theme-label-text { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* A thin vertical rule between fragments inside #pkg/#rank -- the same look
   as the bigger .sep dividers between the status bar's major groups, just
   sized to sit inline with text instead of stretching to the row height. */
.vsep { display: inline-block; width: 1px; height: .9em; background: var(--border);
        margin: 0 .5rem; vertical-align: -.1em; }

/* The one figure in here that's actually actionable -- called out with its
   own pill instead of blending into the rest of the muted rank text. */
.badge { padding: .3rem .55rem; border-radius: 4px; font-weight: 700; white-space: nowrap;
         box-sizing: border-box; display: inline-flex; align-items: center; }
.badge-warn { background: #fde2c8; color: #92400e; }
.badge-ok { background: #c8f7d6; color: #14532d; }
.badge-bad { background: #fbd5d5; color: #7f1d1d; }

/* Progressively shed the least essential status text as the window narrows,
   instead of letting everything crowd together or wrap into the toggle. */
#pkg, #rank { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1300px) {
  #rank { max-width: 340px; }
}
@media (max-width: 1150px) {
  #pkg { max-width: 140px; }
  #rank { max-width: 220px; }
}
@media (max-width: 1050px) {
  #pkg, #pkg + .sep { display: none; }
  #rank { max-width: 180px; }
}
@media (max-width: 960px) {
  #bidmonth { display: none; }
  #rank, #rank-sep { display: none; }
}

header { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap;
         padding: .35rem .6rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
header label { display: flex; align-items: center; gap: .3rem; }
.bidmonth { font-weight: 700; }
.bidclock { font-size: 12px; padding: .1rem .45rem; border-radius: 4px; background: var(--clock-bg);
            color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bidclock.soon { background: #fde2c8; color: #92400e; font-weight: 700; }
.bidclock.closed { background: var(--btn-bg); color: var(--muted); }

.icon-btn { align-self: flex-start; font-size: 15px; line-height: 1; padding: .3rem .45rem; }
/* Overrides ".astack-row > button"'s align-self:stretch -- the settings
   gear sits right next to Update Current Bids but stays its own small
   size instead of stretching to that button's full (multi-line) height. */
.astack-row #settings-btn, .astack-row #open-site-btn { flex: none; align-self: flex-start; }

/* Quick dark/light toggle, iOS-style pill switch. Pinned to the top-left
   corner of the status bar so switching themes doesn't require opening
   Settings. */
.theme-switch { flex: none; display: inline-flex; cursor: pointer; }
.theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch .ts-track { width: 34px; height: 19px; border-radius: 999px;
                           background: var(--border-mid); position: relative;
                           transition: background .15s ease; flex: none; }
.theme-switch .ts-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
                          border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35);
                          transition: transform .15s ease; }
.theme-switch input:checked + .ts-track { background: var(--accent); }
.theme-switch input:checked + .ts-track .ts-knob { transform: translateX(15px); }
.theme-switch input:focus-visible + .ts-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A two-column grid: buttons on the left (row 1 = astack-row, row 2 =
   Submit Bid, row 3 = the copy link), status text on the right (row 1 =
   senior-badge, row 2 = your projected line) -- grid rows size to their
   tallest cell, so the right column lines up with its left-column
   counterpart no matter how the button notes wrap. */
.actionstack { flex: none; align-self: flex-start;
               display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 3px; }
.astack-row { grid-column: 1; grid-row: 1; display: flex; gap: 4px; align-items: flex-start; }
.astack-row > button { flex: 0 0 auto; white-space: nowrap; align-self: stretch; }
.actionstack #senior-badge { grid-column: 2; grid-row: 1; align-self: start; justify-self: end;
                              display: flex; align-items: center; }
.actionstack #yourline { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; }
.actionstack .bidlinks { grid-column: 1; grid-row: 3; display: flex; justify-content: center; gap: 1.2rem; }
.abtn { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.abtn > button { width: 100%; white-space: nowrap; }
.abtn-note { font-size: 10px; text-align: center; color: var(--muted); line-height: 1.2;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abtn-note.ok { color: var(--ok); }
.abtn-note.warn { color: var(--warn); font-weight: 600; }
.progbar { width: 100%; height: 4px; border-radius: 2px; background: var(--border-mid);
           overflow: hidden; margin-top: 2px; }
.progbar .progfill { height: 100%; width: 0%; background: var(--accent);
                      transition: width .2s ease; border-radius: 2px; }
.progbar.indeterminate .progfill { width: 35%; animation: bf-progslide 1.1s ease-in-out infinite; }
@keyframes bf-progslide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}
.actionstack #submit { grid-column: 1; grid-row: 2; width: 100%; font-weight: 700; padding: .3rem .9rem; }
.linkbtn { border: 0; background: none; color: var(--accent); font-size: 11px; padding: 0;
           cursor: pointer; text-align: center; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--bad); }
.muted { color: var(--muted); }
.sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .2rem; }
.grow { flex: 1; }
select, input, button { font: inherit; padding: .22rem .4rem; border: 1px solid var(--field-border);
        border-radius: 4px; background: var(--field-bg); color: var(--text); }
button { cursor: pointer; background: var(--btn-bg); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.yourline { font-weight: 700; flex: none; align-self: center; white-space: nowrap; }

.whoami { font-weight: 600; }
.whoami.unset { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* flex (not inline-flex) + fit-content: a tight pill-group, like inline-flex
   sizes it, but block-level so two of them (fleet, then seat) stack onto
   their own lines instead of sitting side by side as inline boxes would. */
.seatseg { display: flex; width: fit-content; border: 1px solid var(--field-border); border-radius: 6px;
           overflow: hidden; margin: .5rem 0; }
.seatseg button { border: 0; border-radius: 0; background: var(--field-bg); padding: .35rem 1rem; }
.seatseg button.active { background: var(--accent); color: var(--accent-text); }
#who-search { width: 100%; margin-top: .2rem; }
.wholist { list-style: none; margin: .5rem 0 0; padding: 0; height: 44vh; overflow: auto;
           border: 1px solid var(--border-mid); border-radius: 6px; background: var(--bg); }
.wholist li { display: flex; gap: .6rem; padding: .3rem .6rem; cursor: pointer;
              border-bottom: 1px solid var(--border-soft); }
.wholist li:hover { background: var(--hover); }
.wholist li.cur { background: var(--chosen); font-weight: 600; }
.wholist .rk { width: 2.6rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.loginfield { display: block; font-size: .85rem; color: var(--muted); margin: .7rem 0 0; }
.loginfield input { display: block; width: 100%; margin-top: .2rem; }
#login .chk { margin-top: .7rem; }
#login-msg.err { color: var(--bad); }

/* A compact column on the right, the same shape as .actionstack on the left
   -- collapsed to 3 short rows instead of one full-width bar, so it doesn't
   add its own extra row to the header's height. */
#autopanel { flex: none; margin-left: auto; align-self: flex-start; max-width: 320px;
             display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
/* Groups the station pickers and the hide-chips into one bordered block --
   two functionally-separate controls that read as a single "Filters"
   section instead of two disconnected rows. */
.filter-panel { border: 1px solid var(--border-mid); border-radius: 6px;
                 padding: 4px 6px; display: flex; flex-direction: column; gap: 4px; }
.fl-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.fl-head .linky { font-size: 11px; }
.fl-title { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
            font-weight: 600; color: var(--muted); text-align: right; }
.fl-row { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.fl-label { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
#autopanel select { font-size: 11.5px; padding: .12rem .3rem; border-radius: 5px;
                     border-color: var(--border-mid); background: transparent; color: var(--muted); }
/* Filter chips: a hidden native checkbox driving a pill-shaped label via
   :has() -- reads as a row of toggle buttons instead of a checklist. */
#autopanel .chip { display: inline-flex; align-items: center; gap: .2rem;
                    padding: .14rem .55rem; border-radius: 999px; border: 1px solid var(--border-mid);
                    color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap;
                    font-size: 11px; transition: background .12s, color .12s, border-color .12s; }
#autopanel .chip:hover { border-color: var(--accent); color: var(--text); }
#autopanel .chip input { display: none; }
#autopanel .chip:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600;
}
#autopanel .chip #wantoff-n:not(:empty)::before { content: " "; }
/* Tri-state chips (Split / Carry-in): a plain button cycling any -> only ->
   exclude, since there's a third state a single checkbox can't hold. */
#autopanel .chip.tri { font: inherit; }
#autopanel .chip.tri.st-only {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600;
}
#autopanel .chip.tri.st-exclude {
  border-color: var(--bad); color: var(--bad); text-decoration: line-through; font-weight: 600;
}

.bidstrip { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
            padding: .3rem .6rem; background: var(--strip); border-bottom: 1px solid var(--border-mid);
            min-height: 1.9rem; }
.bidstrip:empty::before { content: "click rows to add lines to your bid — drag chips to reorder";
            color: var(--faint); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .4rem;
        background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; cursor: grab; }
.chip .n { font-weight: 700; color: var(--accent); }
.chip button { border: 0; background: none; padding: 0 .1rem; color: var(--faint); cursor: pointer; }
.chip.drag { opacity: .4; }

main { flex: 1; overflow: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { padding: .18rem .5rem; border-bottom: 1px solid var(--border-soft); text-align: left;
         white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--th-bg); border-bottom: 1px solid var(--border);
           cursor: pointer; user-select: none; z-index: 2; }
th[data-k].sort::after { content: " ▾"; color: var(--muted); }
th[data-k].sort.asc::after { content: " ▴"; }
td:nth-child(1), td:nth-child(2), td:nth-child(4), td:nth-child(5) { text-align: right;
         font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: var(--hover); }
tbody tr.unavail { color: var(--disabled); }
tbody tr.unavail td:nth-child(6), tbody tr.unavail td:nth-child(7) { color: var(--disabled); }
tbody tr.chosen { background: var(--chosen); }
tbody tr.chosen:nth-child(even) { background: var(--chosen-alt); }
/* .unavail's default gray-on-pale-yellow was unreadable once a ranked pick
   gets taken by someone senior -- a darker, warmer tone made for that
   background instead. */
tbody tr.chosen.unavail,
tbody tr.chosen.unavail td:nth-child(6), tbody tr.chosen.unavail td:nth-child(7) { color: var(--disabled-chosen); }
/* .yours needs the same specificity as ".chosen:nth-child(even)" above, or
   an even-numbered row that's both your current line AND a ranked pick
   loses the fight for its own background -- pale "chosen" yellow behind
   .yours's white text, unreadable. */
tbody tr.yours, tbody tr.yours:nth-child(even), tbody tr.yours:hover { background: var(--yours-bg); color: var(--yours-text); }
tbody tr.yours .cal i { border-color: #bfe6c8; }
tbody tr.yours .cal i.w { background: #d6f0dc; }
td.choice { font-weight: 700; color: var(--accent); }
tbody tr.yours td.choice { color: var(--yours-text); }
td.blcell { text-align: left; white-space: nowrap; }
.xtoggle { padding: .1rem .4rem; margin-right: .45rem; font-size: 11px; line-height: 1.3;
           border: 1px solid var(--field-border); border-radius: 4px; background: var(--field-bg);
           color: var(--muted); user-select: none; }
.xtoggle:hover { border-color: var(--accent); color: var(--accent); background: var(--hover); }
.xtoggle.open { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
tbody tr.yours .xtoggle { border-color: #ffffff99; background: #ffffff22; color: #fff; }
tbody tr.yours .xtoggle:hover { background: #ffffff3a; }
.lineno { font-weight: 600; }

tbody tr.xrow > td { background: var(--xrow-bg); border-bottom: 2px solid var(--border);
                     white-space: normal; text-align: left; padding: 0; }
tbody tr.xrow.yours > td { background: var(--xrow-bg); }
.xpanel { display: flex; flex-direction: column; gap: .65rem; padding: .8rem 1.1rem;
          font-size: 12px; color: var(--text); }
.xstats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
          padding-bottom: .6rem; border-bottom: 1px solid var(--border-mid); }
.xstat { display: flex; flex-direction: column; gap: .12rem; min-width: 4.5rem; }
.xstat > span { color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.xstat > b { font-size: 13px; }
.xlines { display: flex; flex-direction: column; gap: .35rem; }
.xline { display: flex; gap: .7rem; }
.xline > span { flex: none; width: 5.5rem; padding-top: .1rem; color: var(--muted); font-size: 10px;
                letter-spacing: .04em; text-transform: uppercase; }
.xline > div { flex: 1; line-height: 1.5; }
.xactions { display: flex; gap: .5rem; }
.xactions button { padding: .3rem .85rem; }
.xnote { font-size: 11.5px; color: var(--muted); background: var(--panel);
         border-radius: 5px; padding: .4rem .6rem; }

.cal { display: inline-flex; gap: 1px; }
.cal i { width: 10px; height: 14px; border: 1px solid var(--cal-line); display: inline-block;
         border-radius: 1px; }
.cal i.w { background: var(--cal-fill); border-color: var(--cal-fill); }
.cal i.x { opacity: .35; }             /* out-of-month tail */
.cal i.div { border: 0; width: 4px; }
/* A day you picked as "wanted off" -- a faint blue ring laid over whatever
   the square's own work/off color already is, just enough to notice. */
.cal i.wantoff { box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.cal i[data-iso]:hover { box-shadow: 0 0 0 2px var(--accent); position: relative; z-index: 1; }

.caltip { position: fixed; z-index: 30; pointer-events: none; background: var(--tip-bg);
          color: var(--tip-text); font: 12px/1.3 "Segoe UI", system-ui, sans-serif; padding: .25rem .5rem;
          border-radius: 5px; white-space: nowrap; box-shadow: 0 4px 16px #0007; }
.caltip.off { background: var(--ok); color: #fff; }

.pop { position: fixed; right: 12px; top: 92px; width: 460px; max-height: 78vh; overflow: auto;
       background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
       box-shadow: 0 8px 30px #0004; padding: .8rem 1rem; z-index: 10; }
.pop h3 { margin: .1rem 0 .3rem; }
.pop table { font-size: 12px; }
.pop .close { float: right; }
.pill { display: inline-block; padding: 0 .35rem; border-radius: 999px; background: var(--pill-bg);
        font-size: 11px; }
.pill.dh { background: var(--pill-dh); }

/* ---- "days I want off" calendar picker ---- */
.calpop { position: fixed; z-index: 20; width: 236px; background: var(--surface);
          border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 30px #0004;
          padding: .55rem; }
.calpop-hd { display: flex; align-items: center; gap: .4rem; }
.calpop-hd b { flex: 1; font-size: 12px; }
.calpop-hd button { border: 0; background: none; color: var(--muted); padding: 0 .2rem;
                    cursor: pointer; font-size: 11px; }
.calpop-sub { font-size: 11px; margin: .1rem 0 .35rem; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow span { text-align: center; font-size: 10px; color: var(--faint); }
.cal-grid { margin-top: 3px; }
.cd { border: 1px solid var(--border-mid); border-radius: 4px; background: var(--field-bg); padding: .32rem 0;
      font: inherit; font-size: 12px; text-align: center; cursor: pointer;
      font-variant-numeric: tabular-nums; }
.cd.empty { border: 0; background: none; cursor: default; }
.cd.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.cd:not(.empty):hover { border-color: var(--accent); }

/* ---- setup / settings overlay ---- */
.setup { position: fixed; inset: 0; background: var(--overlay); display: flex;
         align-items: center; justify-content: center; z-index: 50; }
.setup-card { background: var(--surface); border-radius: 10px; padding: 1.4rem 1.6rem; width: 560px;
              max-width: 94vw; box-shadow: 0 20px 60px #0006; position: relative; }
.setup-card h2 { margin: 0 0 .4rem; }
.setup-x { position: absolute; right: .8rem; top: .8rem; border: 0; background: none;
           font-size: 1rem; color: var(--muted); }

/* Bid-vs-website mismatch prompt: a deliberately loud border (no quiet way
   to miss it) around an otherwise plain modal, with the two line lists
   side by side so the difference is obvious at a glance. */
.mismatch-card { border: 2px solid var(--warn); }
.mismatch-row { margin: .7rem 0; padding: .5rem .7rem; border-radius: 6px; background: var(--panel); }
.mismatch-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--muted); font-weight: 600; margin-bottom: .15rem; }
.mismatch-lines { font-variant-numeric: tabular-nums; font-weight: 600; word-break: break-word; }
.mismatch-actions { justify-content: flex-end; align-items: center; }
.drop { display: flex; align-items: center; justify-content: center; height: 96px;
        border: 2px dashed var(--field-border); border-radius: 10px; color: var(--muted); cursor: pointer;
        background: var(--bg); margin: .6rem 0; }
.drop.over { border-color: var(--accent); background: var(--hover); color: var(--accent); }
#setup-get-files { margin: .5rem 0 .9rem; }
.manual-upload { margin: .8rem 0 .2rem; }
.manual-upload summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.manual-upload summary:hover { text-decoration: underline; }
.manual-upload p { margin: .5rem 0 .3rem; font-size: 12.5px; }
.manual-upload .drop { height: 60px; font-size: 13px; }
.filelist { list-style: none; padding: 0; margin: .4rem 0; }
.filelist li { display: flex; align-items: center; gap: .5rem; padding: .3rem .2rem;
               border-bottom: 1px solid var(--border-soft); }
.filelist .role { width: 5.5rem; font-weight: 600; text-transform: capitalize; }
.filelist .have { color: var(--ok); } .filelist .want { color: var(--warn); }
.filelist .opt { color: var(--faint); }
.filelist li button { border: 0; background: none; color: var(--faint); cursor: pointer; }
.filelist .docopen, .filelist .docdl { font-size: 12px; color: var(--accent);
    text-decoration: none; margin-right: .5rem; white-space: nowrap; }
.filelist .docopen:hover, .filelist .docdl:hover { text-decoration: underline; }
.filelist .fmeta { font-size: 11px; color: var(--faint); }
.pkg-actions { display: flex; gap: .5rem; margin: .5rem 0 .2rem; }
.pkg-actions button { font-size: 12px; }
button.danger { color: var(--bad); border-color: var(--danger-border); }
button.danger:hover { background: var(--danger-hover); }
.reftitle { font-size: 12px; font-weight: 600; margin: 1rem 0 .1rem; }
.reftitle .muted { font-weight: 400; }
button.linky { border: 0; background: none; color: var(--muted); font-size: 12px;
               cursor: pointer; padding: 0; }
button.linky:hover { color: var(--accent); text-decoration: underline; }
.wholong { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: 12px; }
#who-long-note { font-size: 11px; margin-top: .25rem; }

/* ---- settings modal rows ---- */
/* "new version available" bar across the top of the window */
.updbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
          padding: .45rem 1rem; background: var(--accent); color: #fff; font-size: 13px; }
.updbar #updbar-msg { flex: 1 1 auto; }
.updbar .primary { background: #fff; color: var(--accent); border-color: #fff; font-weight: 700; }
.updbar .linky, .updbar .linky:hover { color: #fff; }
.setrow { padding: .7rem 0; border-top: 1px solid var(--border-soft); }
.setrow:first-of-type { border-top: 0; }
.setrow-t { font-weight: 600; }
.setrow-chk { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.setrow-chk input { margin-top: .15rem; }
.setrow-chk span span { display: block; }
.setrow-chk .muted { font-weight: 400; font-size: 12px; margin-top: .1rem; }
#set-theme { margin: .3rem 0 0; }