/* ============================================================================
   ADMIN. The Record and Settings, from the design handover of 7 September 2026.

   ITS OWN FILE, not appended to shell.css. This is 40-odd KB for one surface, and
   shell.css is loaded by every page including the sign-in screen - doubling it to
   dress Admin would make the gate slower for everybody who never opens Admin.

   Every class is `x-` prefixed except four modal rules the handover needed, which are
   noted where they appear.

   THREE THINGS WERE REMOVED rather than transplanted, each marked in place:
     - the density control and the Activity/Changes toggle. The handover labels both
       MOCK SCAFFOLDING - radios and `:checked ~` with no JavaScript - and says the
       built page wants "an ordinary pill pair that re-renders". Shipping the CSS for a
       control that does not exist is how a page acquires styling for nothing.
     - a taller-than-16:9 diagnosis window. PJ settled 16:9 and confirmed it.

   AND NOTHING HERE HAS BEEN RENDERED BY ITS AUTHOR. The handover says so plainly:
   Chrome would not install in the design environment, so every measurement in it is
   read off this stylesheet rather than observed. It gets looked at in a browser, in
   both themes, before it is called done.
   ========================================================================== */

/* ===========================================================================
   Admin — the rearrangement. Additive only: nothing in shell.css is edited.
   Everything is scoped to .x-adm, which sits on the three Admin .swrap
   elements, so no rule here can reach another page.
   ========================================================================= */

/* --- 1 · two classes the markup already uses and shell.css never styles ---
   `.shead.sub` renders identically to the page head above it, so The record
   read as four equal headings; `.sdiv` has no rule at all, so the sections
   butted together with nothing between them. Both are given a weight here
   rather than being replaced, because the markup already asks for them. */
.x-adm .shead.sub{padding-bottom:9px;margin-bottom:12px;
 border-bottom-color:var(--gridline)}
.x-adm .shead.sub>svg{color:var(--muted)}
.x-adm .shead.sub .st b{font-size:12.5px}
.x-adm .shead.sub .st span{font-size:11px;color:var(--faint)}
.x-adm .sdiv{height:1px;background:var(--line2);margin:34px 0 20px}

/* --- 2 · `.tbl` on a <table> ----------------------------------------------
   shell.css gives `.tbl` only `overflow-x:auto`, which does nothing on a
   table element — a wide table overflowed the page instead of scrolling.
   `.x-scroll` is the box that actually scrolls. `.mono` and `.act` are
   likewise only defined under `.mtb`/`.etb`, so on this page every mono cell
   rendered in the body face and every action column ran full width. */
.x-adm .x-scroll{overflow-x:auto;max-width:100%}
.x-adm .tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:11.5px}
.x-adm .tbl td.act{white-space:nowrap;text-align:right}
.x-adm .tbl td.act .ico+.ico{margin-left:2px}
.x-adm .tbl .x-act{width:1%;white-space:nowrap}
.x-adm .tbl .x-key{width:1%;white-space:nowrap}
.x-adm .tbl tbody tr:hover{background:var(--exbg)}
.x-adm .tbl tbody tr:hover .ico{opacity:1}
.x-adm .tbl tbody tr:last-child td{border-bottom:none}

/* --- 3 · the verdict line -------------------------------------------------
   "Is anything actually wrong?" answered before anybody reads a row. Green
   ink when nothing needs a person, gold when something does — gold because
   `filled means act`, and NOT red, because red means late and a fault is not
   late. One strip per section, and it is the only gold on the page. */
.x-verdict{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
 margin:2px 0 4px;padding:11px 15px;background:var(--exbg);
 border:1px solid var(--line);border-left:3px solid var(--ok-tx);border-radius:10px}
.x-verdict b{font-size:13px;font-weight:600;color:var(--txt);
 font-variant-numeric:tabular-nums}
.x-verdict span{font-size:11.5px;color:var(--muted)}
.x-verdict.act{border-left-color:var(--gold)}

/* --- 4 · the fault list ---------------------------------------------------
   A fault is a record, not a spreadsheet line. Seven columns became one
   message that runs the full width — so the message is no longer the one
   thing abbreviated — with kind, page, time and person on a faint second
   line. Same grammar as the changelog below it, deliberately. */
.x-adm .x-faults{padding:2px 15px}
.x-adm .x-faults .mrow{gap:14px;padding:12px 0;align-items:flex-start}
.x-adm .x-faults .mrow:last-child{border-bottom:none}
.x-adm .x-faults .mn{font-size:12.5px;line-height:1.5;word-break:break-word}
.x-adm .x-faults .mn i{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
 margin-top:5px;font-size:10.5px;color:var(--faint)}
.x-adm .x-faults .x-where{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px}
.x-adm .x-faults .x-sep{opacity:.5}
.x-adm .x-faults .ico{opacity:.7;flex:none;margin-top:1px}
.x-adm .x-faults .ico:hover{opacity:1}
/* explained faults are quieter than unexplained ones — that is the whole
   point of the split, and it is the reverse of how they read before */
.x-adm .x-faults.x-done .mn{color:var(--muted)}
/* the diagnosis reference. It was `.chip.on`, i.e. the app's SELECTED state,
   which put the loudest mark on the page on the one row that needs nobody. */
.x-adm .chip.x-dg{flex:none;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.x-adm .chip.x-dg:hover{border-color:var(--gold);color:var(--goldtxt)}

/* --- 5 · a destructive control does not sit level with a download --------- */
.x-adm .btn.x-quiet{color:var(--faint);border-style:dashed}
.x-adm .btn.x-quiet svg{color:var(--faint)}
.x-adm .btn.x-quiet:hover{border-style:solid;border-color:var(--today);color:var(--today)}
.x-adm .btn.x-quiet:hover svg{color:var(--today)}

/* --- 6 · the activity log takes the height of what is in it ---------------
   `.logwrap` is `height:calc(100vh - 296px)` with a 240px floor, so four
   entries occupied a screen. It already reads `--logh`, so the height is set
   here rather than by touching the class. */
.x-adm .x-log{--logh:auto;height:auto;min-height:0;max-height:min(46vh,380px);
 padding:11px 16px}

/* --- 7 · the changelog: the meta stops floating on inline styles ---------- */
.x-adm .x-clog .mrow{gap:14px}
.x-adm .x-clog .mn{font-size:12.5px}
.x-adm .x-clog .x-date{flex:none;font-size:11px;font-variant-numeric:tabular-nums}
.x-adm .x-clog .x-ref{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10px}
.x-adm .x-clog .ico{flex:none;opacity:.7}
.x-adm .x-clog .ico:hover{opacity:1}
.x-adm .x-clog .mrow:last-child{border-bottom:none}

/* --- 8 · an account is a person, not eight columns ------------------------
   Name and address were two columns saying the same thing, and the address
   repeated down the page. One cell now: the editable name, the address under
   it at the input's own indent, and the preview flag under that — preview is
   a fact about the person, not a rank, so it belongs with them. */
.x-adm .x-person{min-width:196px}
.x-adm .x-person .x-nm{display:block;font-size:12.5px;padding:6px 9px}
.x-adm .x-person .x-em{display:block;margin-top:2px;padding-left:9px;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint)}
.x-adm .x-person .x-flag{margin-top:6px;padding-left:7px}
.x-adm .x-person .x-flag .chip{font-size:9.5px;padding:3px 9px;letter-spacing:.04em}
.x-adm .x-tpl{margin-top:5px;font-size:10.5px;color:var(--faint)}
.x-adm .x-utb td{vertical-align:top;padding-top:9px}
.x-adm .x-utb .dchips{max-width:250px}
.x-adm .x-utb .vsel{max-width:100%}

/* --- 9 · the matrix: a band is a band, not a heading inside a cell --------
   `<td class="grp">` put an uppercase heading INSIDE a data cell, where it
   inherited the cell's border and padding. It is a row of the table now,
   the way `.mtb tr.bnd` already does it elsewhere in the app. */
.x-adm .x-mtx tr.x-band td{padding:18px 10px 6px;font-size:10px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line2)}
.x-adm .x-mtx tbody tr.x-band:first-child td{padding-top:4px}
.x-adm .x-mtx tbody tr.x-band:hover{background:none}
.x-adm .x-mtx .x-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;margin-left:7px}
.x-adm .x-ttb td,.x-adm .x-rtb td{vertical-align:middle}
.x-adm .x-ttb .dchips{max-width:290px}

/* the row being added is the only one holding empty fields, and it says so.
   `.editing` is styled in shell.css only under `.etb`, so on a `.tbl` it did
   nothing at all. */
.x-adm .tbl tr.editing{background:var(--exbg);box-shadow:inset 2px 0 0 var(--gold)}
.x-adm .tbl tbody tr.editing:hover{background:var(--exbg)}

/* --- 10 · the empty state, for the day nothing is wrong ------------------- */
.x-adm .blank.x-blank{min-height:132px;border-radius:10px;margin-top:4px}

/* ===========================================================================
   THE RECORD — two columns. Three layout options, one set of rules.
   Diagnostics is the work; the two logs are reference beside it, not three
   equal things stacked down the page.
   ========================================================================= */

/* Two columns need more than the 1060px reading measure a single column wants */
.x-adm.x-wide{max-width:1360px}

.x-adm .x-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
 gap:16px 30px;align-items:start}
.x-adm .x-split.x-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.x-adm .x-col{min-width:0}
/* the right column is reference; it steps back onto the inset ground */
.x-adm .x-col-side{padding-left:26px;border-left:1px solid var(--line)}
.x-adm .x-gap{margin-top:26px}
/* the changelog follows the log directly; the head is the separation */
.x-adm .x-col-side .x-densgrp+.x-densgrp{margin-top:20px}
@media (max-width:1180px){
  .x-adm .x-split,.x-adm .x-split.x-even{grid-template-columns:1fr;gap:0}
  .x-adm .x-col-side{padding-left:0;border-left:none;margin-top:30px;
   padding-top:24px;border-top:1px solid var(--line2)}
}

/* a column head carries a name and its controls — no explanatory sentence.
   The tab strip and the pull menu already said where you are. */
/* The band under every card head was one row saying what the head could have
   said on the same line. It is gone: the name and the counts share the head,
   the controls are marks in .sact, and the list starts immediately under. That
   is ~34px back per card, which the scroll box takes. */
.x-adm .x-colhead{align-items:center;padding-bottom:8px;margin-bottom:8px;gap:10px}
.x-adm .x-colhead .st{min-width:0}
.x-adm .x-colhead .st b{font-size:13px;line-height:1.3}
.x-adm .x-colhead .st span{display:block;margin-top:1px;font-variant-numeric:tabular-nums}
.x-adm .x-colhead .sact{gap:2px}
.x-adm .x-colhead .sact .ico{padding:5px 6px;border-radius:7px;opacity:.6}
.x-adm .x-colhead .sact .ico:hover{opacity:1;color:var(--gold);background:var(--exbg)}
.x-adm .x-colhead .sact .ico.x-quiet:hover{color:var(--today)}
.x-adm .x-faults .mn{max-width:88ch}

/* a band that also holds controls */
.x-adm .grp{align-items:center}
.x-adm .grp .sact{margin-left:12px;flex:none;text-transform:none;letter-spacing:0}

/* REMOVED FROM THE HANDOVER: MOCK SCAFFOLDING again - two hidden radios and `:checked ~`, and the handover says so: "in the built page this is an ordinary pill pair that re-renders". Built for real or not at all */

/* ---- the activity log says what changed, not which table was touched -----
   Five fixed monospace columns could carry a row id and nothing else. The
   window survives; the row inside it is now a sentence with the old value
   beside the new one. Monospace is kept for ids and for values only. */
.x-adm .x-evlog{font-family:inherit;font-size:12px;line-height:1.45;padding:4px 16px}
.x-adm .x-evlog.x-tall{max-height:min(58vh,520px)}
.x-adm .x-ev{padding:10px 0;border-bottom:1px solid var(--gridline);white-space:normal}
.x-adm .x-ev:last-child{border-bottom:none}
.x-adm .x-ts{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint)}
.x-adm .x-who{font-size:10.5px;color:var(--muted)}
.x-adm .x-who:before{content:"·";color:var(--faint);opacity:.6;margin:0 6px}
.x-adm .x-did{display:block;margin-top:3px;font-size:12.5px;color:var(--txt)}
.x-adm .x-did>b{font-weight:600}
.x-adm .x-did i{display:block;font-style:normal;margin-top:3px;font-size:11px;color:var(--muted)}
.x-adm .x-did i b{color:var(--txt);font-weight:600}
.x-adm .x-old{color:var(--faint)}
.x-adm .x-arr{color:var(--faint);margin:0 2px}
.x-adm .x-ev .x-ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint);margin-left:4px}

/* ---- the changelog, in a column ---------------------------------------- */
.x-adm .x-tight{padding:2px 13px}
.x-adm .x-tight .mrow{gap:10px;padding:10px 0;flex-wrap:wrap}
.x-adm .x-tight.x-tall{max-height:min(58vh,520px);overflow:auto}
/* the generated sub-line is a sentence cut mid-word; in a narrow column it
   wraps to three lines to say nothing. The magnifier carries the reasoning. */
.x-adm .x-col-side .x-clog .mn i{display:none}
.x-adm .x-col-main{min-width:0}
.x-adm .x-tog{position:relative}

/* ===========================================================================
   THE RECORD — three cards, one density control each.
   The nine variants of the previous pass collapse into three cards whose row
   height the person chooses. Compact / Comfortable / Roomy, per card, kept in
   the per-tab view state so it survives a reload.
   ========================================================================= */

/* ---- the counts across the top ------------------------------------------ */
.x-adm .x-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:2px 0 4px}
.x-adm .x-stat{border:1px solid var(--line);border-left:3px solid var(--line2);
 border-radius:10px;background:var(--card);padding:11px 14px}
.x-adm .x-stat b{display:block;font-size:19px;font-weight:600;line-height:1.1;
 font-variant-numeric:tabular-nums;color:var(--txt)}
.x-adm .x-stat span{display:block;margin-top:3px;font-size:10.5px;color:var(--muted)}
/* the only one that asks anything of anybody carries the gold */
.x-adm .x-stat.x-act{border-left-color:var(--gold)}
.x-adm .x-stat.x-act b{color:var(--goldtxt)}

/* REMOVED FROM THE HANDOVER: the handover calls this MOCK SCAFFOLDING - three radios and :focus-within. The built page needs a real control that re-renders, so the CSS for the fake one is not shipped */

/* ---- the card does not change size; only what is inside it does ---------
   The two columns are locked to one height and the scrolling bodies take
   whatever is left after their own chrome, so Diagnostics ends exactly level
   with the activity log and the changelog stacked beside it — at every
   density, because density never touches the box. One number to tune. */
.x-adm{--recH:clamp(620px,78vh,900px)}
.x-adm .x-recsplit{align-items:stretch}
.x-adm .x-recsplit>.x-col{display:flex;flex-direction:column;height:var(--recH);min-height:0}
.x-adm .x-recsplit .x-densgrp{display:flex;flex-direction:column;min-height:0}
.x-adm .x-recsplit .x-densbody{flex:1 1 auto;min-height:0;height:auto;max-height:none}
.x-adm .x-recsplit .x-fl-d{flex:1 1 auto}
/* the two right-hand cards share the column nearly evenly. The log keeps a
   little more because its rows are taller even at Compact. */
.x-adm .x-recsplit .x-fl-a{flex:1.15 1 0}
.x-adm .x-recsplit .x-fl-g{flex:1 1 0}
.x-adm .x-recsplit .shead,.x-adm .x-recsplit .grp,.x-adm .x-recsplit .x-stats,
.x-adm .x-recsplit .note3,.x-adm .x-recsplit .x-scrollnote,.x-adm .x-recsplit .x-gap,
.x-adm .x-recsplit .x-flow,.x-adm .x-recsplit .x-flow+*{flex:none}
@media (max-width:1180px){
 .x-adm .x-recsplit>.x-col{height:auto}
 .x-adm .x-recsplit .x-densbody{height:min(52vh,460px)}
}

/* a fixed box. Density changes the rows inside it, never the box itself, so
   nothing below the card moves when somebody picks a different height. */
.x-adm .x-scrolly{height:min(56vh,520px);overflow:auto;overscroll-behavior:contain}
.x-adm .x-scrolly.x-tall{height:min(64vh,600px)}
.x-adm .x-scrollnote{margin-top:8px;font-size:10.5px;color:var(--faint);line-height:1.5}
.x-adm .x-scrollnote b{color:var(--muted);font-weight:600}

/* ---- Diagnostics: one list, explained falls to the bottom --------------- */
.x-adm .x-flist{padding:2px 15px}
.x-adm .x-frow{display:flex;align-items:center;gap:var(--rgap);
 padding:var(--rp) 0;border-bottom:1px solid var(--gridline);position:relative}
.x-adm .x-flist>div:last-child{border-bottom:none}
/* one mark a row, and it is the only thing saying "this one". The gold rule,
   the words and the compact dot were three renderings of one fact, under a
   strip that had already said it. */
.x-adm .x-fmark{flex:none;width:16px;display:flex;align-items:center;justify-content:center;
 color:var(--goldtxt);opacity:.85;align-self:flex-start;margin-top:1px}
/* the open rows carry no extra treatment beyond their mark — the class is
   what the filter and the sort key off */
.x-adm .x-fopen .x-fmsg{color:var(--txt)}
.x-adm .x-fmarkdone{opacity:1}
/* explained rows keep the column so the messages line up, and hold a hairline
   dash rather than nothing — an empty gap reads as a rendering fault */
.x-adm .x-fmarkdone:after{content:"";width:7px;height:1px;background:var(--line2)}
/* one hairline says where explained begins. No second card, no second band. */
.x-adm .x-firstdone{border-top:1px solid var(--line2);margin-top:6px;
 padding-top:calc(var(--rp) + 6px)}
.x-adm .x-fmain{flex:1;min-width:0}
/* the same ink size as the two cards beside it. It was 12.5 against their 12
   and read as a different page. */
.x-adm .x-fmsg{font-size:12px;line-height:1.5;color:var(--txt);word-break:break-word;
 max-width:86ch}
.x-adm .x-fdone .x-fmsg{color:var(--muted)}
.x-adm .x-fdone .x-where,.x-adm .x-fdone .x-fmini{color:var(--faint)}
.x-adm .x-fmeta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:5px;
 font-size:10.5px;color:var(--faint)}
.x-adm .x-fmini{display:none;flex:none;font-size:10.5px;color:var(--faint);white-space:nowrap;
 align-items:center;gap:6px}
/* the mark carries the state at both heights, so compact needs nothing extra */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-fmark{align-self:center;margin-top:0}
.x-adm .x-frow .ico{opacity:.7;flex:none}
.x-adm .x-tico{flex:none}
.x-adm .x-frow:hover{background:var(--exbg)}
.x-adm .x-frow:hover .ico{opacity:1}

/* compact: one line. The message truncates, and where-and-when moves to the
   right of it, because a row that wraps is not compact. */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-fmsg{white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis;font-size:11.5px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-fmeta{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-fmini{display:flex}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-firstdone{padding-top:calc(var(--rp) + 5px)}
/* roomy: the trail button is named, and the mark it replaces goes away */

/* ---- the explanation at the foot ----------------------------------------
   It was three bordered panels 180px tall to say three short things. Three
   lines on the inset ground says the same in about a third of the height, and
   the height goes to the list, which is what people came for. */
.x-adm .x-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;
 margin-top:12px;padding:11px 14px;border-radius:10px;background:var(--exbg)}
.x-adm .x-fl{display:flex;gap:9px;min-width:0}
.x-adm .x-fl b{display:block;font-size:11px;font-weight:600;color:var(--txt);line-height:1.35}
.x-adm .x-fl p{margin:2px 0 0;font-size:10.5px;line-height:1.4;color:var(--muted)}
.x-adm .x-anm{flex:none;color:var(--goldtxt);opacity:.85;margin-top:1px}
@media (max-width:1180px){.x-adm .x-flow{grid-template-columns:1fr}}
.x-adm .x-nt{display:flex;gap:11px;min-width:0}
.x-adm .x-nt b{display:block;font-size:12px;font-weight:600;color:var(--txt)}
.x-adm .x-nt p{margin:3px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.x-adm .x-notes{display:flex;flex-direction:column;gap:13px;margin-top:14px;padding:14px 16px;
 border-radius:10px;background:var(--exbg)}

/* ---- the activity log: a timeline at every density ---------------------- */
.x-adm .x-day{display:flex;align-items:baseline;gap:10px;padding:13px 0 5px;
 border-bottom:1px solid var(--line);margin:0 0 2px -20px;padding-left:20px}
.x-adm .x-day:first-child{padding-top:2px}
.x-adm .x-day b{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
 font-weight:600}
.x-adm .x-day span{margin-left:auto;font-size:10.5px;color:var(--faint);
 font-variant-numeric:tabular-nums}
.x-adm .x-tl{padding-left:8px}
.x-adm .x-tlrow{position:relative;display:flex;gap:14px;padding:var(--rp) 0 var(--rp) 20px}
.x-adm .x-tlrow:before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;
 background:var(--line2)}
.x-adm .x-tlrow:last-child:before{bottom:auto;height:calc(var(--rp) + 8px)}
.x-adm .x-tldot{position:absolute;left:1px;top:calc(var(--rp) + 5px);width:7px;height:7px;
 border-radius:50%;background:var(--bg);border:1.5px solid var(--line2);flex:none}
.x-adm .x-tlbody{flex:1;min-width:0}
.x-adm .x-ehead{display:flex;align-items:baseline}
.x-adm .x-ts{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint)}
.x-adm .x-who{font-size:10.5px;color:var(--muted)}
.x-adm .x-who:before{content:"·";color:var(--faint);opacity:.6;margin:0 6px}
.x-adm .x-did{display:block;margin-top:2px;font-size:12.5px;color:var(--txt)}
.x-adm .x-did>b{font-weight:600}
.x-adm .x-did i{display:block;font-style:normal;margin-top:3px;font-size:11px;color:var(--muted)}
.x-adm .x-did i b{color:var(--txt);font-weight:600}
.x-adm .x-old{color:var(--faint)}
.x-adm .x-arr{color:var(--faint);margin:0 2px}
.x-adm .x-eshort{display:none;color:var(--faint);font-size:11px;margin-left:5px}
.x-adm .x-evlog{font-family:inherit;font-size:12px;line-height:1.45;padding:4px 16px}
.x-adm .x-ev .x-ref,.x-adm .x-did .x-ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint);margin-left:4px}

/* compact: one line per entry — time, what happened, who, all on the row.
   The dot shrinks with it; below this height a dot beside one line of text
   reads as a bullet, not a marker. */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-tlrow{align-items:baseline}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-tlbody{display:flex;align-items:baseline;gap:10px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-ehead{flex:none;order:1}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-ehead .x-who{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-did{order:2;flex:1;min-width:0;margin-top:0;
 font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-did i{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-did .x-ref{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-eshort{display:inline}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-tldot{width:5px;height:5px;left:2px;border-width:1.5px;
 top:calc(var(--rp) + 6px)}
/* roomy */

/* ---- the changelog: the same timeline, banded by month ------------------
   A release has a date, not a clock — nobody asks what time something shipped.
   So the day sits where the time sits on the log, and the band is the month.
   It compacts harder than the log because a release is one line of prose and
   an entry is a sentence plus a before-and-after. */
.x-adm .x-crow{align-items:flex-start}
.x-adm .x-crow .x-ts{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.x-adm .x-crow .x-who{color:var(--goldtxt);font-weight:600;font-size:10px;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.x-adm .x-crow .x-did{margin-top:1px}
/* a subject line, then the rest of the sentence in the ordinary weight —
   the same shape the activity log has, where the verb is bold and what it
   acted on is not */
.x-adm .x-crow .x-did>b{display:inline;font-size:12px;font-weight:600;line-height:1.5}
.x-adm /* A LINE OF ITS OWN. Read off the deployed page: the subject ran straight into the
   rest of the title - "A refresh lands where it mattersthe tab stops moving" - because
   the handover emits `<b>subject</b><span class="x-crest">rest</span>` with no
   separator and relied on a density rule to lay it out. The density control is not
   built (see the note in admin.js), so the rest of the sentence needs a line here.
   Mine, not the handover's. */
.x-crest{color:var(--muted);display:block;margin-top:2px}
.x-adm .x-crow .x-did i{color:var(--faint)}
.x-adm .x-crow .ico{flex:none;opacity:.7;margin-top:1px}
.x-adm .x-crow:hover .ico{opacity:1}
/* compact: one line — the day, then the title. The reference goes to the
   tooltip on the magnifier, which is the thing you press to read the reason
   anyway, and the reason itself goes with it. */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow{align-items:baseline;padding-top:3px;
 padding-bottom:3px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-tlbody{display:flex;align-items:baseline;
 gap:10px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-ehead{flex:none;order:1;width:46px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-who{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-did{order:2;flex:1;min-width:0;margin-top:0}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-did{white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis;font-size:11.5px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-did>b{font-size:11.5px}
/* at Compact the subject alone carries the entry; the rest of the sentence
   would only be truncated anyway */
.x-adm [id$="-cmp"]:checked ~ .x-densbody /* was `.x-crest{display:none}` - the compact-density variant. Density is not built,
   so hiding half of every changelog title unconditionally is not what it meant. */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-did i{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .x-tldot{top:9px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-crow .ico{margin-top:-1px}
/* the month band is quieter than a day band, because there are fewer of them
   and they carry more rows */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-day{padding-top:11px;padding-bottom:4px}

/* ===========================================================================
   SETTINGS, with People & access folded in. Every register is a fixed window
   you scroll; everything edited opens a 16:9 card.
   ========================================================================= */
.x-adm .x-setsplit{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}

/* ---- what needs you. Absent when nothing does. --------------------------
   No head above it: the strip IS the heading. A head reading "Needs you" over
   a strip reading "1 account is waiting" was two rows saying one thing. */
.x-adm .x-attnhd{align-items:center;gap:10px;margin-bottom:8px}
.x-adm .x-attnhd .x-anm{margin-top:0;color:var(--goldtxt)}
.x-adm .x-attnhd .x-vsub{color:var(--muted)}
.x-adm .x-attn{padding:2px 15px}
.x-adm .x-arow{display:flex;align-items:center;gap:12px;padding:13px 0 13px 15px;position:relative}
.x-adm .x-adot{position:absolute;left:2px;top:50%;margin-top:-3px;width:6px;height:6px;
 border-radius:50%;background:var(--gold)}
.x-adm .x-arow .btn{flex:none}
.x-adm .x-attn .x-fmsg{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* ---- the people register ------------------------------------------------
   A fixed box you scroll. Eight or so at Comfortable, more at Compact, and
   the box never changes size — the same rule as the cards on The record. */
/* the people register's own group, so its row-height menu reaches only it */
.x-adm .x-pgrp{min-width:0}
.x-adm .x-people{padding:2px 15px}
.x-adm .x-peoplebox{height:min(46vh,404px)}
.x-adm .x-prow{display:flex;align-items:center;gap:16px;padding:var(--rp) 0;
 border-bottom:1px solid var(--gridline)}
.x-adm .x-people>div:last-child{border-bottom:none}
.x-adm .x-prow:hover{background:var(--exbg)}
.x-adm .x-prow:hover .ico{opacity:1}
.x-adm .x-pmain{flex:1.5;min-width:0}
.x-adm .x-pname{font-size:12.5px;font-weight:600;color:var(--txt);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.x-adm .x-pmeta{margin-top:2px;font-size:10.5px;color:var(--faint);
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.x-adm .x-pcell{flex:1;min-width:0;font-size:11.5px;color:var(--txt);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.x-adm .x-pcell.x-wide2{flex:1.3}
.x-adm .x-plbl{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--faint);margin-bottom:2px}
.x-adm .x-prow .ico{flex:none;opacity:.7}
/* compact: one line. The labels go, the address goes to the tooltip. */
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-plbl{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-pmeta{display:none}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-prow{gap:12px}
.x-adm [id$="-cmp"]:checked ~ .x-densbody .x-pcell{font-size:11px;color:var(--muted)}
/* roomy */

/* ---- find somebody: the box slides out of the mark ---------------------- */
.x-adm .x-srch{display:flex;flex-direction:row-reverse;align-items:center;position:relative}
.x-adm .x-sico{padding:4px 6px;border-radius:7px;opacity:.6;cursor:pointer}
.x-adm .x-sico:hover{opacity:1;color:var(--gold);background:var(--exbg)}
.x-adm .x-sbox{width:0;padding:0;border:1px solid transparent;border-radius:999px;background:none;
 font-family:inherit;font-size:11.5px;color:var(--txt);opacity:0;margin-right:0;
 transition:width .16s ease,opacity .16s ease,margin .16s ease}
.x-adm #x-pFind:checked ~ .x-sbox{width:180px;padding:5px 12px;border-color:var(--line2);
 background:var(--bg);opacity:1;margin-right:7px}
.x-adm #x-pFind:checked ~ .x-sico{opacity:1;color:var(--goldtxt);background:var(--exbg)}
.x-adm .x-sbox:focus{outline:none;border-color:var(--gold);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
body.dark .x-adm #x-pFind:checked ~ .x-sbox{background:var(--card)}

/* ---- the project register ----------------------------------------------
   Five rows visible, the rest scrolls. One mark per row: a pen, which opens
   the project. Archive, delete and everything else live in that window. */
/* the project list sits on a card, like the people list beside it — it was a
   bare table on the page ground and read as unfinished next to it */
.x-adm .x-projcard{padding:2px 14px 0}
.x-adm .x-projbox{height:min(30vh,236px)}
.x-adm .x-ptb thead th{position:sticky;top:0;background:var(--bg);z-index:2;padding-top:4px}
.x-adm .x-ptb .x-pjnm{min-width:200px}
.x-adm .x-ptb .x-dt{width:96px;white-space:nowrap;font-variant-numeric:tabular-nums;
 font-size:11.5px}
.x-adm .x-ptb th.x-dt{font-size:10px}

/* ---- the three things that open a window -------------------------------- */
.x-adm .x-defs{padding:2px 15px}
.x-adm .x-def{display:flex;align-items:center;gap:13px;padding:12px 0;
 border-bottom:1px solid var(--gridline)}
.x-adm .x-defs>div:last-child{border-bottom:none}
.x-adm .x-def:hover{background:var(--exbg)}
.x-adm .x-dname{font-size:12.5px;font-weight:600;color:var(--txt)}
.x-adm .x-def .btn{flex:none;margin-left:auto}
.x-adm .x-def .x-anm{margin-top:0}

/* ---- the archived register, tucked under the live one ------------------- */
.x-adm .x-arch{margin-top:14px;padding:11px 13px 4px;border-radius:10px;background:var(--exbg)}
.x-adm .x-archhd{display:flex;align-items:baseline;gap:10px;font-size:10px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.x-adm .x-archhd span{margin-left:auto;letter-spacing:0;text-transform:none;font-size:10.5px}
.x-adm .x-arch .tbl td{border-bottom:none}

/* ---- ONE matrix, used for every grant in the app ------------------------
   Things down, choices across, one mark a row. It replaced nine closed
   dropdowns on an account, the area chips on a template, and nineteen more
   dropdowns on tab access — so the same picture now answers "what does this
   person / this template / this site have" in all three places.
   A choice above the account's ceiling is greyed and dashed, not hidden, so
   the rule is visible instead of implied. */
.x-lvl{margin-top:4px;border:1px solid var(--line);border-radius:11px;overflow:hidden;
 background:var(--card)}
.x-lvlhd,.x-lvlrow{display:grid;align-items:center}
.x-lvl4 .x-lvlhd,.x-lvl4 .x-lvlrow{grid-template-columns:minmax(0,1fr) repeat(4,84px)}
.x-lvl3 .x-lvlhd,.x-lvl3 .x-lvlrow{grid-template-columns:minmax(0,1fr) repeat(3,74px)}
.x-lvl2 .x-lvlhd,.x-lvl2 .x-lvlrow{grid-template-columns:minmax(0,1fr) repeat(2,92px)}
.x-lvltab .x-lvlhd,.x-lvltab .x-lvlrow{grid-template-columns:minmax(0,1fr) repeat(3,74px) 176px}
.x-lvlhd{padding:7px 14px 6px;border-bottom:1px solid var(--line2);background:var(--bg)}
.x-lvlhd span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
 text-align:center}
.x-lvlhd .x-lvlnm,.x-lvlhd .x-lvltl{text-align:left}
.x-lvlhd .x-lvltl{padding-left:12px}
.x-lvlrow{padding:0 14px;border-bottom:1px solid var(--gridline)}
.x-lvl .x-lvlrow:last-child{border-bottom:none}
.x-lvlrow:hover{background:var(--exbg)}
.x-lvlnm{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:12px;color:var(--txt);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-lvlnm b{flex:none;width:32px;font-size:9.5px;font-weight:700;letter-spacing:.05em;
 color:var(--faint)}
.x-lvlnm .x-path{margin-left:7px;font-size:10px;color:var(--faint);
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.x-siteoff .x-lvlnm{color:var(--muted)}
.x-lvlc{display:flex;align-items:center;justify-content:center;height:34px;background:none;
 border:none;border-left:1px solid var(--gridline);cursor:pointer;padding:0}
.x-lvld{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line2);display:block;
 transition:background .12s,border-color .12s}
.x-lvlc:hover .x-lvld{border-color:var(--gold)}
.x-lvlc.on .x-lvld{border-color:var(--gold);background:var(--gold);
 box-shadow:inset 0 0 0 3px var(--card)}
.x-lvlrow:hover .x-lvlc.on .x-lvld{box-shadow:inset 0 0 0 3px var(--exbg)}
.x-lvlc.x-lvlx{cursor:not-allowed}
.x-lvlc.x-lvlx .x-lvld{opacity:.3;border-style:dashed}
.x-lvlc.x-lvlx:hover .x-lvld{border-color:var(--line2)}
.x-lvltl{padding-left:12px;border-left:1px solid var(--gridline);height:34px;display:flex;
 align-items:center}
.x-lvltl .vsel{width:100%;font-size:11px}
.x-lvlnarrow .x-lvlnm b{width:52px}

/* preview is a field among the others now. It was a bordered row with three
   lines of explanation to carry one chip that grants nothing — the space it
   took said it mattered more than it does. */
.modal .mgrid.mgrid3{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-prevfld{display:flex;flex-direction:column}
.x-prevfld .dchips{margin-top:1px}
.x-prevfld .chip{font-size:10.5px;padding:6px 12px}
.x-prevfld .btn{align-self:flex-start;margin-top:1px}
@media (max-width:900px){.modal .mgrid.mgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the template picker rides the Sites heading, over the level columns it fills */
.x-mglblrow{display:flex;align-items:center;gap:14px}
.x-tplpick{margin-left:auto;display:flex;align-items:center;gap:9px;letter-spacing:0;
 text-transform:none}
.x-tplpick label{font-size:10.5px;color:var(--faint);font-weight:400}
.x-tplpick .vsel{width:196px;font-size:11.5px}

/* ---- windows: 16:9, always -------------------------------------------- */
.x-modalstatic{position:static;background:none;display:flex;justify-content:center;padding:0}
.modal .mgrid{margin-bottom:4px}
.modal .mgrid .fld.w2{grid-column:span 2}
.modal .fld i{display:block;font-style:normal;margin-top:4px;font-size:10.5px;line-height:1.45;
 color:var(--faint)}
.modal .x-scroll{overflow-x:auto;max-width:100%}
.mbtn.icon{gap:7px}


/* ===========================================================================
   TEMPLATES and TAB ACCESS — two windows, one rail pattern.
   They shared a rail once, which is why neither read as the place its own
   thing lives. A template pane is the account window's body, unchanged: the
   fields across the top, then the site matrix, then the project matrix. So
   creating a template, editing one, and setting up a person are one screen
   learned once.
   ========================================================================= */
.x-md{display:grid;grid-template-columns:224px minmax(0,1fr);height:100%;position:relative}
.x-mdrail{border-right:1px solid var(--line);padding-right:12px;overflow-y:auto;
 overscroll-behavior:contain}
.x-mdbody{padding-left:20px;min-width:0;overflow-y:auto;overscroll-behavior:contain}
.x-mdit{display:block;padding:7px 10px;border:1px solid transparent;border-radius:9px;
 cursor:pointer;margin-bottom:1px}
.x-mdit:hover{background:var(--exbg)}
.x-mdnm{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.x-mdit i{display:block;font-style:normal;font-size:10px;color:var(--faint);margin-top:1px}
.x-mdadd{border-style:dashed;border-color:var(--line2);margin-top:6px}
.x-mdadd .x-mdnm,.x-mdadd svg{color:var(--faint)}
.x-mdadd:hover .x-mdnm,.x-mdadd:hover svg{color:var(--goldtxt)}
.x-mdsep{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
 padding:2px 10px 6px}
.x-mdp{display:none}
/* the chosen row wears the treatment the shell spec settled for the project
   rail: steps off its ground, keeps a hairline, says the rest in gold */
#x-tp-t-site-supervisor:checked ~ .x-mdrail .x-mdit[for="x-tp-t-site-supervisor"],
#x-tp-t-sc-clerk:checked ~ .x-mdrail .x-mdit[for="x-tp-t-sc-clerk"],
#x-tp-t-new:checked ~ .x-mdrail .x-mdit[for="x-tp-t-new"],
#x-tb-pl:checked ~ .x-mdrail .x-mdit[for="x-tb-pl"],
#x-tb-home:checked ~ .x-mdrail .x-mdit[for="x-tb-home"],
#x-tb-me:checked ~ .x-mdrail .x-mdit[for="x-tb-me"],
#x-tb-pmc:checked ~ .x-mdrail .x-mdit[for="x-tb-pmc"],
#x-tb-eng:checked ~ .x-mdrail .x-mdit[for="x-tb-eng"],
#x-tb-fin:checked ~ .x-mdrail .x-mdit[for="x-tb-fin"],
#x-tb-proj:checked ~ .x-mdrail .x-mdit[for="x-tb-proj"],
#x-tb-it:checked ~ .x-mdrail .x-mdit[for="x-tb-it"]{background:var(--bg);border-color:var(--line2);box-shadow:0 1px 2px rgba(20,18,14,.07)}
#x-tp-t-site-supervisor:checked ~ .x-mdrail .x-mdit[for="x-tp-t-site-supervisor"] .x-mdnm,
#x-tp-t-sc-clerk:checked ~ .x-mdrail .x-mdit[for="x-tp-t-sc-clerk"] .x-mdnm,
#x-tp-t-new:checked ~ .x-mdrail .x-mdit[for="x-tp-t-new"] .x-mdnm,
#x-tb-pl:checked ~ .x-mdrail .x-mdit[for="x-tb-pl"] .x-mdnm,
#x-tb-home:checked ~ .x-mdrail .x-mdit[for="x-tb-home"] .x-mdnm,
#x-tb-me:checked ~ .x-mdrail .x-mdit[for="x-tb-me"] .x-mdnm,
#x-tb-pmc:checked ~ .x-mdrail .x-mdit[for="x-tb-pmc"] .x-mdnm,
#x-tb-eng:checked ~ .x-mdrail .x-mdit[for="x-tb-eng"] .x-mdnm,
#x-tb-fin:checked ~ .x-mdrail .x-mdit[for="x-tb-fin"] .x-mdnm,
#x-tb-proj:checked ~ .x-mdrail .x-mdit[for="x-tb-proj"] .x-mdnm,
#x-tb-it:checked ~ .x-mdrail .x-mdit[for="x-tb-it"] .x-mdnm{color:var(--goldtxt);font-weight:600}
#x-tp-t-site-supervisor:checked ~ .x-mdbody .x-mdp-t-site-supervisor,
#x-tp-t-sc-clerk:checked ~ .x-mdbody .x-mdp-t-sc-clerk,
#x-tp-t-new:checked ~ .x-mdbody .x-mdp-t-new,
#x-tb-pl:checked ~ .x-mdbody .x-mdp-pl,
#x-tb-home:checked ~ .x-mdbody .x-mdp-home,
#x-tb-me:checked ~ .x-mdbody .x-mdp-me,
#x-tb-pmc:checked ~ .x-mdbody .x-mdp-pmc,
#x-tb-eng:checked ~ .x-mdbody .x-mdp-eng,
#x-tb-fin:checked ~ .x-mdbody .x-mdp-fin,
#x-tb-proj:checked ~ .x-mdbody .x-mdp-proj,
#x-tb-it:checked ~ .x-mdbody .x-mdp-it{display:block}


/* ===========================================================================
   THE TWO WINDOWS A FAULT ROW OPENS
   ========================================================================= */
/* ---- the trail, compressed ---------------------------------------------
   One line a step. The page and the person are the same for every step, so
   they are said once at the foot instead of seven times down the column. */
.x-steps{margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:3px 13px}
.x-srow{display:flex;align-items:baseline;gap:12px;padding:5px 0;
 border-bottom:1px solid var(--gridline);font-size:11.5px}
.x-steps .x-srow:last-child{border-bottom:none}
.x-sts{flex:none;width:62px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:10.5px;color:var(--faint)}
.x-sact{flex:none;width:92px;font-weight:600;color:var(--txt)}
.x-sdet{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.x-sdet .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
/* where it stopped. Red means late everywhere else and a fault is not late, so
   the break is a rule and a heavier ink, never red. */
.x-sbreak{border-top:1px dashed var(--line2);margin-top:1px;padding-top:6px}
.x-sbreak .x-sdet{color:var(--faint)}
.x-tgap{margin-top:14px}
.x-glbnote{margin-left:auto;letter-spacing:0;text-transform:none;font-size:10.5px;
 color:var(--faint)}

/* the message, in full, because the list cuts it at 90 characters */
.x-msgtx{margin:5px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:12px;line-height:1.5;color:var(--txt);padding:9px 12px;border-radius:9px;
 background:var(--exbg);word-break:break-word}
.x-msgtx2{margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.45}

/* six facts as a grid, not a table of six rows */
.x-factgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 20px;margin-top:6px;
 padding:10px 13px;border-radius:10px;background:var(--exbg)}
.x-fact{min-width:0}
.x-fact span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--faint)}
.x-fact b{display:block;margin-top:1px;font-size:11.5px;font-weight:400;color:var(--txt);
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.x-factgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* REMOVED FROM THE HANDOVER: PJ settled 16:9 on 7 September (F-101) and confirmed it again when asked. The handover argues for taller because the diagnosis lost its last paragraph behind a scrollbar; the answer to that is less prose in the window, not a shape that contradicts a decision */

/* ===========================================================================
   ONE GROUND FOR A LIST. --exbg, not --card.
   --card (#fafbfb) is a hair off white and a list drawn on it reads as
   floating; --exbg is the inset ground the activity log already used, and it
   holds the same relationship in dark, sitting ABOVE the page rather than
   below it. One ground on the page, not two.
   ========================================================================= */
.x-adm .x-flist,.x-adm .x-people,.x-adm .x-attn,.x-adm .x-defs,.x-adm .x-projcard,
.x-lvl,.x-steps{background:var(--exbg)}
/* a row lifts off that ground on hover, the way the rail's live row does */
.x-adm .x-frow:hover,.x-adm .x-prow:hover,.x-adm .x-def:hover,.x-lvlrow:hover{
 background:var(--bg)}
.x-adm .x-projcard .tbl thead th{background:var(--exbg)}
/* the chosen mark punches its hole in whatever ground it is standing on */
.x-lvlc.on .x-lvld{box-shadow:inset 0 0 0 3px var(--exbg)}
.x-lvlrow:hover .x-lvlc.on .x-lvld{box-shadow:inset 0 0 0 3px var(--bg)}

/* the two windows keep their own handles so a rule can find them later */
.x-mdtpl,.x-mdtab{min-width:0}
.x-mdsep1{padding-top:2px}