/* The report stylesheet.
   Taken from the "Area 52 Gear Gaps" artifact via design/report-styling.css, which
   ui-reference.md names as the visual design for this service. Match it, do not
   redesign it.

   Two rule blocks from the snapshot are deliberately absent: .legend and .key.
   spec.md's presentation rules say a panel explaining the tags is a sign the tags
   are wrong -- fix the words, drop the panel -- and the artifact's own markup has
   neither. The snapshot simply kept the dead rules.

   Everything added below the ORIGINAL marker is new, and only where the
   single-character page needs something the roster page did not have. */

/* Extracted from the 'Area 52 Gear Gaps' artifact, 2026-08-31.
 Reference only — the source of truth is the published artifact. */

:root{
  --ground:#eef0f4; --surface:#ffffff; --surface-2:#f5f6f9; --line:#d3d8e0;
  --ink:#161a20; --muted:#5c6572; --faint:#8b94a2;
  --accent:#2f6f9e; --accent-soft:#dde8f2;
  --crit:#b02f22; --crit-bg:#f8e4e1;
  --good:#2c6f55; --good-bg:#dcece4;
  --ok-bg:#e6e9ee; --ok:#46545f; --warn:#8a6410;
  --shadow:0 1px 2px rgba(22,26,32,.06),0 3px 10px rgba(22,26,32,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0f1319; --surface:#171c24; --surface-2:#1d232c; --line:#2b323d;
    --ink:#e4e9f0; --muted:#95a0af; --faint:#6d7887;
    --accent:#63a9dd; --accent-soft:#182430;
    --crit:#f08877; --crit-bg:#3a1f1b;
    --good:#7cc6a4; --good-bg:#172c24;
    --ok-bg:#212832; --ok:#9fadbb; --warn:#e0b45f;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --ground:#0f1319; --surface:#171c24; --surface-2:#1d232c; --line:#2b323d;
  --ink:#e4e9f0; --muted:#95a0af; --faint:#6d7887;
  --accent:#63a9dd; --accent-soft:#182430;
  --crit:#f08877; --crit-bg:#3a1f1b;
  --good:#7cc6a4; --good-bg:#172c24;
  --ok-bg:#212832; --ok:#9fadbb; --warn:#e0b45f;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);
     font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     font-size:13.5px;line-height:1.45;padding:18px 14px 36px}

/* Links. The stylesheet had NO base rule for these, so any anchor that did not
   set its own colour rendered in the UA default navy -- rgb(0,0,238) on a
   #171c24 card, which is very nearly invisible and passes no contrast check.
   It went unnoticed while every link on the page happened to be styled
   individually; the first plain one exposed it. The artboards all declare this
   rule, and it belongs here rather than being re-declared per component. */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* Where you are, and the one place else you can go. */
nav.where{display:flex;align-items:center;gap:10px;font-size:11.5px;
          letter-spacing:.04em;margin-bottom:-4px}
nav.where a,nav.where span{padding:3px 9px;border-radius:999px;text-decoration:none}
nav.where span[aria-current]{background:var(--ink);color:var(--surface);font-weight:600}
nav.where a{color:var(--muted);border:1px solid var(--line)}
nav.where a:hover{color:var(--ink);border-color:var(--muted)}
.char-head .name a{color:inherit;text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:1px;text-decoration-color:var(--faint)}
.char-head .name a:hover,.char-head .name a:focus-visible{
    text-decoration-color:var(--accent);text-decoration-thickness:2px}

.wrap{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* The single-character report keeps 840px, which is a reading measure for one
   column of prose-ish rows. The roster is not that: it is a matrix N characters
   wide and N stacked tables, and holding it to the same width left 880px of
   empty margin on a 1720px window -- the content used 49% of the screen while
   the tables inside it were cramped. Wider here, unchanged there. */
.wrap.roster-wide{max-width:1240px}

header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
       gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px}
h1{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(21px,3vw,29px);
   letter-spacing:-.02em;margin:0;line-height:1.05;text-wrap:balance}
.sub{margin:3px 0 0;font-size:12.5px;color:var(--muted);max-width:52ch}
.stamp{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;
       text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.7}

.switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.switch-buttons{display:inline-flex;border:1px solid var(--line);border-radius:6px;
                overflow:hidden;background:var(--surface)}
.switch .switch-buttons a{font:inherit;font-size:12px;font-weight:600;
    padding:5px 13px;border:0;background:transparent;color:var(--muted);
    cursor:pointer;border-right:1px solid var(--line);text-decoration:none;
    white-space:nowrap}
.switch .switch-buttons a:last-child{border-right:0}
.switch .switch-buttons a.on{background:var(--ink);color:var(--surface)}
.switch .switch-buttons a:hover{color:var(--ink);text-decoration:none}
.switch .switch-buttons a.on:hover{color:var(--surface)}
.switch button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.switch-note{margin:0;font-size:11.5px;color:var(--faint);flex:1;min-width:220px}

.glance{background:var(--surface);border:1px solid var(--line);border-radius:8px;
        box-shadow:var(--shadow);overflow:hidden}
.glance-head{padding:10px 14px 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.glance-head h2{font-family:Archivo,sans-serif;font-size:15px;font-weight:700;margin:0;
                letter-spacing:-.01em}
.glance-head p{margin:0;font-size:12px;color:var(--muted)}
.matrix-scroll{overflow-x:auto}
table.matrix{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.matrix th{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
                font-weight:600;padding:5px 8px;text-align:center;
                border-top:1px solid var(--line);border-bottom:1px solid var(--line);
                background:var(--surface-2);white-space:nowrap}
table.matrix td{padding:5px 8px;text-align:center;border-bottom:1px solid var(--line);
                font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
                font-weight:600}
table.matrix th.mx-dungeon,table.matrix td.mx-dungeon{text-align:left;
    font-family:"Public Sans",sans-serif;font-weight:600;font-size:13px;
    padding-left:14px;white-space:nowrap}
table.matrix th:last-child,table.matrix td:last-child{padding-right:14px}
table.matrix tbody tr:last-child td{border-bottom:0}
td.nil,.nil{color:var(--faint);opacity:.55;font-weight:400}

.roster{display:flex;flex-direction:column;gap:14px}
.char{background:var(--surface);border:1px solid var(--line);border-radius:8px;
      box-shadow:var(--shadow);overflow:hidden}
.char-head{padding:10px 14px 9px;border-bottom:1px solid var(--line);display:flex;
           align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.name{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;
      line-height:1.2}
.spec{font-size:11.5px;color:var(--muted);margin-top:1px}
.vitals{display:flex;gap:14px;text-align:right;flex-shrink:0}
.vital span{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;
            color:var(--faint)}
.vital b{font-size:16px;font-weight:600;font-family:"JetBrains Mono",monospace;
         font-variant-numeric:tabular-nums}

.stop{padding:9px 14px;border-bottom:1px solid var(--line)}
.stop:last-child{border-bottom:0}
.stop-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ord{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;color:var(--surface);
     background:var(--ink);width:16px;height:16px;border-radius:3px;display:grid;
     place-items:center;flex-shrink:0}
.craft-ord{background:var(--accent);font-size:11px}
.dungeon{font-family:Archivo,sans-serif;font-weight:600;font-size:14px}
.count{font-size:10.5px;color:var(--faint);margin-left:auto;
       font-family:"JetBrains Mono",monospace}
.clear{margin:0;font-size:12.5px;color:var(--muted)}

.tscroll{overflow-x:auto}
table.drops{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
table.drops.slotwise{min-width:560px}
table.drops th{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
   text-align:left;font-weight:600;padding:0 8px 3px 0;border-bottom:1px solid var(--line)}
table.drops td{padding:5px 8px 5px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.drops tr:last-child td{border-bottom:0}
table.drops th:nth-child(1),table.drops td:nth-child(1){width:13%}
table.drops th:nth-child(2),table.drops td:nth-child(2){width:19%}
table.drops th:nth-child(3),table.drops td:nth-child(3){width:30%}
/* Proportions rather than auto-sizing. Auto layout gave the status column 230px
   to hold a 73px chip -- 68% slack -- while the two columns that carry the
   actual answer were the ones that wanted the room. Measured, not guessed. */
table.drops:not(.slotwise) th:nth-child(1),
table.drops:not(.slotwise) td:nth-child(1){width:12%}
table.drops:not(.slotwise) th:nth-child(2),
table.drops:not(.slotwise) td:nth-child(2){width:9%}
table.drops:not(.slotwise) th:nth-child(3),
table.drops:not(.slotwise) td:nth-child(3){width:39%}
table.drops.slotwise th:nth-child(3),table.drops.slotwise td:nth-child(3){width:24%}
table.drops.slotwise th:nth-child(5),table.drops.slotwise td:nth-child(5){width:19%}
td.slot{color:var(--muted);font-size:11.5px}
/* The owner's own note on a slot, not a verdict -- so it sits under the slot
   name rather than in the status column, and is never coloured like a finding. */
.await{display:block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
       color:var(--faint);margin-top:2px}
td.have,td.want{font-weight:500;line-height:1.25;overflow-wrap:anywhere}
td.where{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
tr.ok-row td.have,tr.ok-row td.slot{opacity:.65}
.roll,.becomes{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
               color:var(--faint);font-variant-numeric:tabular-nums;font-weight:400;
               margin-top:1px}
/* What farming tops out at, on a row farming will not close. Warn-toned
   because it is a limit, not a finding about the item worn. */
.ceiling{display:block;font-family:"Public Sans",sans-serif;font-size:10px;
         color:var(--warn);margin-top:2px;font-variant-numeric:normal}
.becomes{color:var(--accent);font-family:"Public Sans",sans-serif;font-size:10.5px}

.chip{display:inline-block;font-size:9px;letter-spacing:.04em;text-transform:uppercase;
      font-weight:600;padding:1px 5px;border-radius:3px;margin:0 3px 2px 0;white-space:nowrap}
.r-crit{background:var(--crit-bg);color:var(--crit)}
.r-ok{background:var(--good-bg);color:var(--good)}
.r-mute{background:var(--ok-bg);color:var(--ok)}
.raid-tag{display:inline-block;font-size:9px;text-transform:uppercase;font-weight:600;
          letter-spacing:.04em;color:var(--warn)}

ul.crafts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
ul.crafts li{font-size:12.5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
ul.crafts b{font-weight:600}
.prof{font-size:10px;font-family:"JetBrains Mono",monospace;color:var(--accent);
      background:var(--accent-soft);padding:1px 5px;border-radius:3px}
ul.crafts .cslot{margin-left:auto;color:var(--faint);font-size:11px}

.warnbox{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--warn);
         border-radius:8px;padding:12px 16px;box-shadow:var(--shadow)}
.warnbox h3{font-family:Archivo,sans-serif;font-size:10.5px;letter-spacing:.08em;
            text-transform:uppercase;color:var(--warn);margin:0 0 6px;font-weight:600}
.warnbox ul{margin:0 0 8px;padding-left:16px;display:flex;flex-direction:column;gap:2px;
            font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink)}
.warnbox p{margin:0;font-size:12px;color:var(--muted);max-width:70ch}

.src{display:block;font-size:8.5px;letter-spacing:.05em;color:var(--faint);
     font-weight:500;text-transform:none;margin-top:1px}
.until{color:var(--accent)}

/* ---- added for the single-character page -------------------------------- */

/* The lookup and key-level controls. Borrowed from .switch so they read as the
   same family of control rather than a new one. */
.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
          background:var(--surface);border:1px solid var(--line);border-radius:8px;
          box-shadow:var(--shadow);padding:10px 14px}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
             font-weight:600}
.field input:not([type="checkbox"]),.field select,.inline-form select{font:inherit;font-size:12.5px;padding:4px 8px;border-radius:5px;
                           border:1px solid var(--line);background:var(--surface-2);
                           color:var(--ink);min-width:0}
.field input:not([type="checkbox"]){width:15ch}
/* Capped, because a select sizes itself to its longest option and the realm
   list holds names twice the width of the field beside it. */
#add-realm{max-width:17ch}
.controls button,.inline-form button{font:inherit;font-size:12px;font-weight:600;padding:5px 14px;border:0;
                 border-radius:6px;background:var(--ink);color:var(--surface);cursor:pointer}
.controls button:focus-visible,.field input:focus-visible,.field select:focus-visible,
.inline-form button:focus-visible,.inline-form select:focus-visible{
    outline:2px solid var(--accent);outline-offset:1px}
.controls .note{margin:0;font-size:11.5px;color:var(--faint);flex:1;min-width:200px;
                align-self:center}

/* The chest item level the key level implies. Shown so the reasoning behind
   every reachability decision on the page is visible rather than assumed. */
.implies{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}

/* A paired slot's Wearing cell stacks both worn items. The name is the block;
   .roll is already a block beneath it. */
td.have .roll + *{display:block;margin-top:5px}

/* A pair spans several rows, one per missing item. Only the last of the group
   carries the dividing rule, so the group reads as one row rather than several. */
tr.pair-inner td{border-bottom:0}
tr.pair-inner td[rowspan]{border-bottom:1px solid var(--line)}

/* "1 of 2" for a paired slot. A count, not a verdict: no chip, no colour ramp. */
.held-count{display:block;margin-top:2px;font-family:"JetBrains Mono",monospace;
            font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Character names are NOT uppercased, unlike every other matrix heading.
   text-transform:uppercase turns "Liqiudßlood" into "LIQIUDSSLOOD", because the
   uppercase of ß is SS. That is the exact transliteration this project has a
   standing rule against -- several roster names differ only by diacritic, and a
   wrong one is a name that does not exist. Inherited from the reference artifact,
   which has the same defect. */
table.matrix th.mx-character{text-transform:none;font-size:10.5px;letter-spacing:.02em}

details.add-fold > summary{cursor:pointer;list-style:none;font-size:11.5px;
    font-weight:600;color:var(--muted);padding:7px 12px;border:1px solid var(--line);
    border-radius:8px;background:var(--surface);width:max-content}
details.add-fold > summary::-webkit-details-marker{display:none}
details.add-fold > summary::before{content:"+ ";font-family:"JetBrains Mono",monospace}
details.add-fold[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0;
    margin-bottom:-1px}
details.add-fold[open] > summary::before{content:"\2212 "}
details.add-fold[open] section.add{border-top-left-radius:0}
details.add-fold section.add{margin-bottom:0}

/* Your own characters, offered as a picker beside the typed path -- to LOOK
   at one, not to add it. */
nav.mine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 4px}
.mine-label{font-size:9px;letter-spacing:.07em;text-transform:uppercase;
            color:var(--faint);font-weight:600}
/* The line is normally max-level only. When the cap is unknown it lists
   everything and says so here -- warn, because an unfiltered list is a
   degradation the reader should notice, not a neutral state. */
.unfiltered{font-size:9px;letter-spacing:.07em;text-transform:uppercase;
            color:var(--warn);font-weight:600}
nav.mine a{font-size:11.5px;padding:3px 10px;border-radius:999px;
           border:1px solid var(--line);color:var(--muted);text-decoration:none}
nav.mine a:hover{color:var(--ink);border-color:var(--muted);text-decoration:none}
nav.mine a.on{background:var(--ink);color:var(--surface);border-color:var(--ink);
              font-weight:600}

/* Inside 48h the countdown earns emphasis: the reset is close. NOT "the vault
   is about to roll" -- that was the stated reason until the countdown stopped
   telling the reader to hit the vault first, and leaving it here would keep the
   removed reasoning alive as the justification for a visual. */
.until.soon{color:var(--warn)}

/* Where every number came from. Quiet: it is provenance, not a finding. */
/* A credit line, not a specification. Three columns on ONE grid so the source
   names land at the same x in every row -- the previous version used flex rows
   with a growing first column, so each row placed its middle column somewhere
   different and nothing aligned. That was the actual defect; it is invisible in
   the markup and only shows in the render. */
footer.sources{margin:22px 0 28px;padding-top:14px;border-top:1px solid var(--line)}
.src-table{margin:0;display:grid;grid-template-columns:max-content max-content 1fr;
           gap:3px 22px;font-size:11px;align-items:baseline}
.src-row{display:contents}
.src-table dt{color:var(--faint)}
.src-table dd{margin:0}
.s-from{color:var(--muted);font-weight:500}
/* Mono so the two timestamps line up digit for digit: the GAP between them is
   the thing worth reading, and proportional figures make it work to see. */
.s-when{color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:10px;
        font-variant-numeric:tabular-nums}
/* Narrow: the freshness drops under its own row rather than being squeezed into
   a third column that no longer fits. Still attached to the row it describes. */
@media (max-width:760px){
  .src-table{grid-template-columns:max-content 1fr;gap:2px 14px}
  .s-when{grid-column:2;font-size:9.5px}
}

/* ----------------------------------------------- single character: surface 4 */
/* The lookup form and who you are looking at share one band, so the form stops
   being a wall above the answer. */
.controls.band{align-items:flex-end}
.who-band{margin-left:auto;text-align:right}
.who-name{font-family:Archivo,sans-serif;font-weight:600;font-size:16px}
.who-line{color:var(--muted);font-size:11.5px;margin-top:1px}
.controls.band select#realm{max-width:17ch}

/* Four tiles of context. No colour on any of them: each is a fact about the
   character, not a finding about a slot. */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
       margin-bottom:16px}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;
      box-shadow:var(--shadow);padding:12px 14px}
.t-label{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--faint);
         text-transform:uppercase;letter-spacing:.06em}
.t-value{font-family:Archivo,sans-serif;font-weight:700;font-size:24px;margin-top:2px}
.t-sub{font-size:10.5px;color:var(--faint);margin-top:1px}

/* One character fills the page: no grid, and no card chrome around content
   that is already in cards of its own. */
.solo{display:block}
.char.plain{background:none;border:0;box-shadow:none;margin:0;padding:0;
            overflow:visible}

/* Dungeon groups two-up. */
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
        align-items:start}
@media (max-width:1000px){.groups{grid-template-columns:1fr}}
.groups .stop.group{margin:0}
table.drops.narrow th:nth-child(2),table.drops.narrow td:nth-child(2){width:38%}
/* The tag sits UNDER the slot name, not beside it: in a half-width group the
   two on one line overlap as soon as the slot name wraps. */
table.drops.narrow td.slot .chip{display:block;width:max-content;margin-top:3px}
/* Wide enough for the tag underneath without the slot name wrapping into it. */
table.drops.narrow th:nth-child(1),table.drops.narrow td:nth-child(1){width:15ch}

/* The Craft band. */
.craftband{margin-top:16px}
table.crafttable{width:100%;border-collapse:collapse;font-size:11.5px}
table.crafttable th{text-align:left;padding:6px 16px 6px 0;font-size:9.5px;
    font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;
    border-bottom:1px solid var(--line)}
table.crafttable td{padding:8px 16px 8px 0;border-bottom:1px solid var(--surface-2);
                    vertical-align:top}
table.crafttable th:first-child,table.crafttable td:first-child{padding-left:16px}
table.crafttable tr:last-child td{border-bottom:0}
td.c-n{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint);width:26px}
td.c-slot,th.c-slot{color:var(--muted);font-size:11px;width:180px}
td.c-prof,td.c-gems{color:var(--muted)}

/* ------------------------------------------- roster: cards two-up, then grid */
/* Two-up, because a roster is read by comparing characters and a single column
   makes that a scroll. One column below the breakpoint: side-by-side cards
   narrower than their own contents are worse than stacked ones. */
.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
        align-items:start}
@media (max-width:1000px){.roster{grid-template-columns:1fr}}
.roster .char{margin:0}

/* The card's compact table: no Status column. The card shows the first few
   gaps, and every one of them is a gap -- a column that reads "wrong item"
   five times is width spent on a constant. */
table.drops.mini{font-size:11.5px}
table.drops.mini th:nth-child(1),table.drops.mini td:nth-child(1){width:22%}
table.drops.mini th:nth-child(2),table.drops.mini td:nth-child(2){width:39%}
table.drops.mini td{padding:5px 8px 5px 0}
.src-line{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
          color:var(--faint);margin-top:1px}
/* The card clips its own overflow, so the link needs room inside rather than a
   margin that collapses against the edge. */
p.more{margin:0;font-size:11px;padding:10px 14px 13px}
p.more a{text-decoration:none}
p.more a:hover{text-decoration:underline;text-underline-offset:3px}

.switch-manage{margin-left:auto;font-size:11.5px;color:var(--accent);
               text-decoration:none;white-space:nowrap}
.switch-manage:hover{text-decoration:underline}

/* The by-slot grid. Slots down, characters across. */
.gscroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:11.5px}
table.grid th{text-align:left;padding:9px 14px;font-size:10px;font-weight:600;
    color:var(--faint);text-transform:uppercase;letter-spacing:.06em;
    vertical-align:bottom}
table.grid th + th,table.grid td + td{border-left:1px solid var(--line)}
table.grid th.mx-character{text-transform:none;letter-spacing:.02em}
table.grid th.mx-character a{color:var(--ink);font-size:12px;font-weight:600;
                             text-decoration:none}
table.grid th.mx-character a:hover{text-decoration:underline}
.g-spec{display:block;margin-top:1px;font-size:10px;font-weight:400;
        color:var(--faint);text-transform:none;letter-spacing:0}
table.grid td{padding:8px 14px;border-top:1px solid var(--line);vertical-align:top}
td.g-slot,th.g-slot{width:96px;color:var(--muted);font-size:11.5px}
.g-item{margin-top:2px;overflow-wrap:anywhere}
/* What the guide names, under what is worn. Accent-toned and prefixed so it
   reads as the target rather than a second worn item. */
.g-want{margin-top:3px;font-size:11px;color:var(--accent);overflow-wrap:anywhere}
.g-want::before{content:"\2192 ";color:var(--faint)}
.gnotes{display:flex;gap:20px;align-items:center;color:var(--faint);
        font-size:10.5px;margin:12px 0 22px;flex-wrap:wrap}
.gnotes span:last-child{margin-left:auto}

/* The matrix total. A plain number like every other count on the page: more is
   better here, so a severity ramp would paint the most useful dungeon red. */
th.mx-total,td.mx-total{text-align:right;color:var(--muted);font-weight:600;
                        border-left:1px solid var(--line)}

/* ------------------------------------------------------- the manage surface */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;
       box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.panel-head{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;
            align-items:baseline;gap:12px;flex-wrap:wrap}
.panel-head h2{font-family:Archivo,sans-serif;font-weight:600;font-size:13px;margin:0}
.panel-head p{margin:0;color:var(--faint);font-size:11px}
.lbl{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;
     font-weight:600;display:block;margin-bottom:7px}
.panel .add-paths{gap:0}
.panel .path{padding:14px 16px}
.panel .path:first-child{border-right:1px solid var(--line)}
@media (max-width:820px){.panel .path:first-child{border-right:0;
    border-bottom:1px solid var(--line)}}
.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.add-grid .field input,.add-grid .field select{width:100%}
.add-go{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.add-go .note{margin:0;flex:1;min-width:200px}

table.manage{width:100%;border-collapse:collapse;font-size:12.5px}
table.manage th{font-size:9.5px;color:var(--faint);text-transform:uppercase;
    letter-spacing:.06em;font-weight:600;text-align:left;padding:7px 8px;
    border-bottom:1px solid var(--line)}
table.manage td{padding:9px 8px;border-bottom:1px solid var(--surface-2);
                vertical-align:top}
table.manage tr:last-child td{border-bottom:0}
table.manage td:first-child,table.manage th:first-child{padding-left:14px;width:26px}
table.manage td.right{text-align:right;padding-right:14px}
table.manage select{font:inherit;font-size:11.5px;padding:4px 7px;border-radius:5px;
    border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
    /* Wide enough for the longest spec name it will hold. A select sized to its
       shortest option clips the rest, which read "Beast" for Beast Mastery. */
    min-width:11ch}
table.manage td:nth-child(4) select{min-width:0}
.mrow .who{font-weight:600;font-size:12.5px}
.mrow .roll{margin-top:1px}
.mrow .pair{display:flex;gap:5px;flex-wrap:wrap}
/* Parked dims rather than disappears: it is still on the roster and still
   editable, and a row that vanishes when ticked reads as deleted. */
.mrow.parked{opacity:.5}
.mrow.parked:focus-within,.mrow.parked:hover{opacity:1}
td.grip{color:var(--faint);cursor:grab}
.mrow.lifting{opacity:.4;background:var(--surface-2)}
.mismatch{margin:5px 0 0;font-size:10px;color:var(--warn);line-height:1.4}
button.linkish{font:inherit;font-size:inherit;background:none;border:0;padding:0;
    color:var(--accent);cursor:pointer;text-decoration:underline;
    text-underline-offset:2px}
button.linkish.danger{color:var(--muted);text-decoration:none;font-size:10.5px}
button.linkish.danger:hover{color:var(--crit);text-decoration:underline}

/* Selected slots read as chips; the rest are one click away rather than 16
   checkboxes per row. */
details.slotpick > summary{list-style:none;cursor:pointer;display:flex;gap:4px;
                           flex-wrap:wrap;align-items:center}
details.slotpick > summary::-webkit-details-marker{display:none}
.slotchip{background:var(--ok-bg);color:var(--ok);border-radius:4px;padding:2px 7px;
          font-size:10px;text-transform:none;letter-spacing:normal}
.addslot{color:var(--faint);font-size:10px;padding:2px 4px}
.slotgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;
          margin-top:7px;padding:8px;background:var(--surface-2);
          border:1px solid var(--line);border-radius:6px}
.chipbox{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
.chipbox input{margin:0}

.save{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.save button{font:inherit;font-size:12px;font-weight:600;padding:7px 16px;border:0;
             border-radius:5px;background:var(--ink);color:var(--surface);cursor:pointer}
.save .note{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

/* Two add paths, equal width on purpose — neither is the fallback, and a
   narrower column would say otherwise regardless of what the copy claims. */
section.add{background:var(--surface);border:1px solid var(--line);border-radius:10px;
            box-shadow:var(--shadow);padding:15px 18px 17px;margin-bottom:22px}
section.add .glance-head{margin-bottom:14px}
.add-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:820px){.add-paths{grid-template-columns:1fr}}
.path h3{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
         margin:0 0 8px;font-weight:700}
.path > .note{margin:9px 0 0;font-size:11.5px;color:var(--faint);line-height:1.45}
.path > .note.warn{color:var(--muted)}
.path > .note.warn b{color:var(--warn);font-weight:600}
.path .controls{margin:0}

ul.picks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.picks li{border:1px solid var(--line);border-radius:7px;background:var(--surface-2);
            padding:7px 10px}
/* A grid, not a wrapping flex row: the controls must line up down the column so
   the list reads as one repeated choice rather than several different forms. */
.inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
             gap:8px;align-items:center}
@media (max-width:520px){.inline-form{grid-template-columns:1fr 1fr}}
.inline-form select{padding:3px 6px;font-size:12px}
.inline-form button{padding:4px 12px}
.who{font-weight:600;font-size:12.5px;line-height:1.2;overflow-wrap:anywhere}

/* Forms on the character cards. */
.checks{display:flex;gap:14px;padding-top:5px}
/* Specific enough to beat `.field label`, which is styled as a field caption --
   these are checkbox labels and must read as words, not as captions. */
.field label.check{display:inline-flex;flex:none;align-items:center;gap:5px;
    font-size:11.5px;font-weight:400;letter-spacing:normal;text-transform:none;
    color:var(--muted);cursor:pointer}
.field label.check input{margin:0}
details.intent .controls{align-items:start;gap:14px}
details.intent .controls > button{align-self:end}
.controls select[multiple]{min-height:96px;width:16ch}
/* Save and Remove read as one decision about this character, so they share a
   row rather than sitting in two panels stacked on top of each other. */
.intent-actions{display:flex;align-items:end;gap:10px;margin-left:auto}
button.danger{font:inherit;font-size:11.5px;font-weight:600;padding:4px 12px;
              border:1px solid var(--line);border-radius:6px;background:transparent;
              color:var(--crit);cursor:pointer}
button.danger:hover{background:var(--crit-bg)}

/* Settings fold away: the page exists to be read, and configuration that is
   always open competes with the answer it is there to support. */
details.intent{border-top:1px solid var(--line);padding:0 14px 12px}
details.intent > summary{cursor:pointer;font-size:9px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faint);font-weight:700;padding:9px 0;
    list-style:none}
details.intent > summary::-webkit-details-marker{display:none}
details.intent > summary::before{content:"+ ";font-family:"JetBrains Mono",monospace}
details.intent[open] > summary::before{content:"\2212 "}
details.intent .controls{margin-bottom:8px}

.problem{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--crit);
         border-radius:8px;padding:11px 14px;box-shadow:var(--shadow);font-size:12.5px}