/* /house — on top of /login/ui.css. The tables and tiles from the old pay
   admin page, plus tabs. One mark (a thin ink bar), no colour scale. */
.page.dash { max-width: 960px; }
.card h2 { margin-bottom: 10px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabs { display: flex; gap: 4px; }
.tabs a { flex: none; white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--dim); text-decoration: none; }
.tabs a.on { background: var(--ink); color: var(--panel); }
.tabs a:not(.on):hover { background: var(--pill); color: var(--ink); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-bottom: 16px; }
.tile { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 18px; }
.tile .l { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.tile .v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile.hero .v { font-size: 34px; }
.tile .s { font-size: 12px; color: var(--dim); margin-top: 4px; }
.tile.bad { background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }
.tile.bad .v { color: var(--bad); }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.data th.num { text-align: right; }
table.data td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.main { color: var(--ink); font-weight: 600; }
table.data .dim { color: var(--dim); }
.scroll { width: 100%; overflow-x: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.bar { height: 6px; background: var(--panel-2); border-radius: 3px; min-width: 80px; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 0 3px 3px 0; }

.chip.warn { background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); color: var(--bad); }
.chip.test { background: color-mix(in srgb, var(--link) 12%, var(--panel)); color: var(--link); }
.chip.first { margin-left: 0; }
.src { color: var(--link); text-decoration: none; }
.src:hover { text-decoration: underline; }
.guide .other { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; max-width: 260px; }
.guide .cur { height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-tile); background: var(--panel-2); border: 1px solid var(--line); color: var(--dim); }
.hidden-rows .is-test { display: none; }
.toggle { font-size: 13px; color: var(--dim); display: inline-flex; gap: 6px; align-items: center; }
.toggle input { width: auto; height: auto; }
.add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.add input { flex: 1; max-width: 220px; }
.add input.short { max-width: 110px; }
.add input.long { max-width: 340px; }
.beat { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.beat:first-child { border-top: 0; }
.beat .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: none; }
.beat.stale .dot { background: var(--bad); }
.beat .who { font-weight: 600; color: var(--ink); min-width: 90px; }
.beat .what { color: var(--dim); font-size: 13px; }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } .tile.hero .v { font-size: 28px; } }

/* The "?" explainers (index.php help()). The Node tab is built out of these:
   the subject is new to the owner, so every number can say what it means.
   Inline button, panel opens under whatever it belongs to. */
.help { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 5px; padding: 0; vertical-align: middle;
        border: 0; border-radius: 50%; background: var(--pill); color: var(--dim); cursor: pointer;
        font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1; }
.help:hover { background: var(--ink); color: var(--panel); }
.help[aria-expanded="true"] { background: var(--ink); color: var(--panel); }
.helpbox { margin: 8px 0 2px; padding: 10px 12px; border-radius: var(--r-tile); background: var(--panel-2);
           border: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 400;
           text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.helpbox b { display: block; color: var(--ink); margin-bottom: 4px; }
.helpbox p { margin: 0 0 6px; }
.helpbox p:last-child { margin-bottom: 0; }
.tiles { align-items: start; }
.tile .helpbox { margin-bottom: 0; }
table.data td .helpbox, table.data th .helpbox { max-width: 420px; }

/* Cached profile pictures (src/oauth.php), in the Users table. /house loads
   this file and not login/ui.css, so the class is defined in both. */
.avatar {
  border-radius: 50%; object-fit: cover; flex: none;
  background: var(--pill); border: 1px solid var(--line);
  width: 30px; height: 30px;
}
.avatar.small { width: 30px; height: 30px; }

/* ------------------------------------------------------------ the phone
   (2026-09-24). /house installs to the Home Screen (index.php's meta tags,
   manifest.php) and is read there more than anywhere. The document scrolls
   itself — never a locked root (IOS.md §15) — so ui.css's height: 100% is
   undone here. The tab bar leads and sticks below the status bar's glass
   (IOS.md §1: --top = the inset + the glass, once per screen), and a
   full-bleed shadow paints the band above it so rows never show through. */
:root { --glass-t: 0px; --top: calc(env(safe-area-inset-top, 0px) + var(--glass-t)); }
@media (display-mode: standalone) { :root { --glass-t: 20px; } }
html, body { height: auto; min-height: 100%; }
body { padding: calc(12px + var(--top)) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.tabbar {
  position: sticky; top: var(--top); z-index: 10; width: 100%;
  background: var(--bg); padding: 6px 0 8px;
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(-100vmax -100vmax 0 -100vmax);
}
.tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.away { margin-top: 2px; }
.tabs.away a { padding: 5px 12px; font-size: 13px; }
.househead { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.househead .wordmark { font-size: 1.6rem; margin: 0; }
.househead .meta { margin: 0; font-size: 13px; color: var(--dim); }
@media (max-width: 640px) {
  .card { padding: 18px 16px; }
  .tile { padding: 14px; }
  .tile .v { font-size: 22px; }
  table.data td, table.data th { padding: 7px 6px; }
  /* A finger, not a pointer: the dashboard's small buttons grow to a
     tappable height without changing what they say. */
  button.tiny { min-height: 36px; padding: 8px 14px; }
  .help { width: 22px; height: 22px; font-size: 12px; }
  .tabs a { padding: 8px 13px; }
  .tabs.away a { padding: 7px 12px; }
}

/* ------------------------------------------------------------ Machines */
.card h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin: 18px 0 8px; }
.card h4 { font-size: 12px; font-weight: 600; color: var(--dim); margin: 0 0 4px; }
.attention.calm h2::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--good); margin-right: 8px; vertical-align: 1px; }
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li { padding: 9px 0 9px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); position: relative; line-height: 1.35; }
.alerts li:first-child { border-top: 0; }
.alerts li::before { content: ''; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.alerts li.bad::before { background: var(--bad); }

.mhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mhead h2 { margin: 0; }
.mhead .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: none; align-self: center; }
.mhead.stale .dot { background: var(--bad); }
.mhead .meta { font-size: 13px; color: var(--dim); }
.card p.meta.sub { margin-top: 10px; font-size: 12px; }
.warnline { margin: -4px 0 12px; padding: 8px 10px; border-radius: var(--r-tile); font-size: 13px; background: color-mix(in srgb, var(--bad) 10%, var(--panel)); color: var(--bad); }

.meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 22px; }
.meter .ml { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 5px; }
.meter .ml b { color: var(--ink); font-variant-numeric: tabular-nums; }
.meter .bar { height: 8px; border-radius: 4px; min-width: 0; overflow: hidden; }
.meter .bar i { border-radius: 4px; }
.meter.warn .bar i { background: var(--warn); }
.meter.warn .ml b { color: var(--warn); }
.meter.bad .bar i { background: var(--bad); }
.meter.bad .ml b { color: var(--bad); }
.meter .ms { font-size: 12px; color: var(--dim); margin-top: 4px; font-variant-numeric: tabular-nums; }
.t-warn { color: var(--warn); } .t-bad { color: var(--bad); font-weight: 600; }

.list .lrow { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.list .lrow:first-child { border-top: 0; }
.list .lrow.bad { color: var(--bad); }
.lrow .lk { flex: none; min-width: 38px; color: var(--ink); font-weight: 600; }
.lrow .lv { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lrow .lr { flex: none; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.lrow .ms { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.lrow.app .lv a { font-weight: 600; }
@media (max-width: 480px) {
  .lrow { flex-wrap: wrap; }
  .lrow .lr { flex-basis: 100%; text-align: left; padding-left: 0; }
  .lrow .lk + .lv + .lr { padding-left: 48px; }
}

.svc { display: flex; flex-wrap: wrap; gap: 6px; }
.svc .chip { margin: 0; font-weight: 500; }
.chip.ok { background: color-mix(in srgb, var(--good) 13%, var(--panel)); color: var(--good); }

details.top, details.log { margin-top: 14px; }
details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
.topgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 8px; }
@media (max-width: 480px) { .topgrid { grid-template-columns: 1fr; } }
details.log pre { margin: 8px 0 0; padding: 10px; border-radius: var(--r-tile); background: var(--panel-2); border: 1px solid var(--line);
                  max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; color: var(--ink-2); }

/* ---- Load, by the minute (tabs/_load.php, src/samples.php; 2026-09-25).
   Five categorical slots from the validated reference palette (dataviz
   skill, checked light and dark with its validator), stepped for dark;
   the two lines are ink — one series per panel needs no hue. Text wears
   text tokens, never a series colour. */
#load, #claude { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #load, :root:not([data-theme="light"]) #claude { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; }
}
:root[data-theme="dark"] #load, :root[data-theme="dark"] #claude { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; }
/* Drawn twice (tabs/_load.php): the wide chart for a desk, the narrow one — twice the
   bin, the same type size in its own units — for a phone, where a shrunk wide chart
   was 4 px type and a scrolled one a quarter of the day. One shows at a time. */
.loadchart-wrap { position: relative; width: 100%; }
.loadchart-wrap.narrow { display: none; }
@media (max-width: 640px) { .loadchart-wrap.wide { display: none; } .loadchart-wrap.narrow { display: block; } }
.loadchart { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
#load .tiles.hour { margin: 0 0 12px; }
#load .ranges a, .ranges a { color: var(--dim); text-decoration: underline; padding: 6px 2px; display: inline-block; }   /* a finger's worth */
#load .ranges b, .ranges b { padding: 6px 2px; display: inline-block; }
.legend .lg { display: inline-block; margin-right: 10px; white-space: nowrap; }
.loadchart .col.s1 { fill: var(--s1); } .loadchart .col.s2 { fill: var(--s2); } .loadchart .col.s3 { fill: var(--s3); }
.loadchart .col.s4 { fill: var(--s4); } .loadchart .col.s5 { fill: var(--s5); } .loadchart .col.sx { fill: var(--dim); }
.loadchart .grid { stroke: var(--line); stroke-width: 1; }
.loadchart .tick { stroke: var(--line); stroke-width: 1; }
.loadchart .ref { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.loadchart .plabel { font-size: 11px; font-weight: 600; fill: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.loadchart .ylabel { font-size: 10px; fill: var(--dim); text-anchor: end; font-variant-numeric: tabular-nums; }
.loadchart .xlabel { font-size: 10px; fill: var(--dim); text-anchor: middle; }
.loadchart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.loadchart .line.p95 { stroke: var(--ink); }
.loadchart .line.load { stroke: var(--ink-2); }
.loadchart .over { fill: var(--bad, #d03b3b); stroke: var(--panel); stroke-width: 1.5; }
.loadchart .people { fill: var(--ink); opacity: .07; }
.loadchart .hit { fill: transparent; cursor: crosshair; }
.loadchart .hit:hover, .loadchart .hit.on { fill: var(--ink); fill-opacity: .08; }
.loadchart .cursor { stroke: var(--ink); stroke-width: 1; opacity: .45; pointer-events: none; }
.loadtip { position: absolute; z-index: 3; max-width: 320px; padding: 8px 10px; border-radius: var(--r-tile); background: var(--panel); color: var(--ink-2);
  box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 12px; line-height: 1.4; pointer-events: none; }
.legend { margin: 8px 0 0; line-height: 2; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.legend .sw.s1 { background: var(--s1); } .legend .sw.s2 { background: var(--s2); } .legend .sw.s3 { background: var(--s3); }
.legend .sw.s4 { background: var(--s4); } .legend .sw.s5 { background: var(--s5); } .legend .sw.sx { background: var(--dim); }
.legend .sw.ln { height: 2px; width: 14px; vertical-align: 3px; border-radius: 1px; }
.legend .sw.ln.p95 { background: var(--ink); } .legend .sw.ln.load { background: var(--ink-2); }
.legend .sw.band { background: var(--ink); opacity: .2; }
details.fold { margin-top: 10px; } details.fold summary { cursor: pointer; }
@media (max-width: 640px) {
  /* The header's two toggles are a finger's target too, and the load chart's
     tooltip sits at the top of the chart so the finger does not cover it. */
  .househead .meta { line-height: 2.2; }
  .toggle { padding: 4px 2px; }
  .toggle input { width: 18px; height: 18px; }
  .loadtip { max-width: calc(100% - 8px); }
}

/* ---- Claude (tabs/claude.php, 2026-09-26). The chart borrows Load's palette,
   classes and tooltip (house.js binds any .loadchart-wrap); a model keeps its
   slot whatever the filter shows (CLAUDE_MODEL_SLOTS), so colour follows the
   model, never its rank. */
#claude .chartcard { width: 100%; }
.sess td { vertical-align: top; }
.sess td.what { min-width: 280px; max-width: 520px; }
.sess details summary { cursor: pointer; list-style: none; }
.sess details summary::-webkit-details-marker { display: none; }
.sess .title { color: var(--ink); font-weight: 600; }
.sess .opening { color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.sess details[open] .opening { display: block; -webkit-line-clamp: none; white-space: pre-wrap; }
.sess a.convo { display: inline-block; margin-top: 6px; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }   /* → /house/prompts, that session's prompts and replies */
.sess .tag { font-size: 11px; color: var(--dim); white-space: nowrap; }
.fresh .bad { color: var(--bad); }
.loadchart .line.lim5 { stroke: var(--s1); } .loadchart .line.limw { stroke: var(--s2); }
.legend .sw.ln.lim5 { background: var(--s1); } .legend .sw.ln.limw { background: var(--s2); }
.loadchart .line.limf { stroke: var(--s3); } .legend .sw.ln.limf { background: var(--s3); }   /* the weekly Fable window (2026-10-03) */
.loadchart .col.ink { fill: var(--ink-2); }   /* one series, no hue */
#claude details.fold > summary { cursor: pointer; list-style: none; }
#claude details.fold > summary::-webkit-details-marker { display: none; }
.loadchart .line.est { stroke-dasharray: 4 3; stroke-width: 1.5; opacity: .85; }
.legend .sw.ln.est { background: repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 7px); }
.loadchart .hitmark { fill: var(--bad, #d03b3b); stroke: var(--panel); stroke-width: 1.5; }
.legend .sw.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad, #d03b3b); }
#claude .seg b, #claude .seg a { padding: 6px 8px; }
#claude .seg b { background: var(--panel); border-radius: 8px; box-shadow: var(--shadow); }
#claude .cfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }   /* three groups, each whole; no " · " left at a line's end */
.grp { white-space: nowrap; }

/* ---- Overview (tabs/overview.php, 2026-09-26): what needs attention, then a
   card per tab that is itself the link into it. */
.alerts li a { color: inherit; text-decoration: none; display: block; }
.alerts li a:hover .dim { color: var(--ink); }
.ov { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
@media (max-width: 640px) { .ov { grid-template-columns: 1fr; } }
.ov .ovcard { display: block; text-decoration: none; color: var(--ink); margin: 0; }
.ov .ovcard:hover { box-shadow: 0 0 0 2px var(--line), var(--shadow); }
.ov .ovcard h2 { display: flex; justify-content: space-between; align-items: baseline; }
.ov .ovcard .go { color: var(--dim); font-size: 18px; }
.ov .big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.ov .big small { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.ov .big.bad { color: var(--bad); }
.ov p { margin: 2px 0; font-size: 14px; color: var(--ink-2); }
.ov p.dim { color: var(--dim); font-size: 13px; }

/* ---- A card that folds (2026-09-26, the owner's review: "fold/shut what you
   think can be"). The summary is the card's heading plus one line saying
   what is inside, so a shut card still answers its question. */
details.foldcard { width: 100%; }
details.foldcard > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; }
details.foldcard > summary::-webkit-details-marker { display: none; }
details.foldcard > summary h2 { margin: 0; }
details.foldcard > summary::after { content: '›'; margin-left: auto; color: var(--dim); font-size: 18px; transition: transform .15s; }
details.foldcard[open] > summary::after { transform: rotate(90deg); }
details.foldcard > summary .meta { margin: 0; }
details.foldcard[open] > summary { margin-bottom: 10px; }
table.data.clip tr.more { display: none; }
table.data.clip.all tr.more { display: table-row; }
details.fold.hw { margin-top: 16px; }

/* ------------------------------------------------------------ the phone, pass 2
   (2026-10-06, the owner: "many of the console pages … aren't formatted well
   for the phone display; I use this a lot to review remotely"). Every app's
   console loads THIS file (the path-app contract, point 4), so what is fixed
   here is fixed in all of them — measured at 390 px with every page signed in:
   eight consoles were 396–639 px wide, a table running out of its card. */

/* The Elsewhere row, outside the sticky bar (index.php). */
.awaybar { width: 100%; margin: -2px 0 2px; }

/* Header: who on one line, the three toggles as chips beside it — wrapping as a
   unit, never a lone "·" or a toggle orphaned on a line of its own. */
.househead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.househead .meta .me { white-space: nowrap; }
.househead .filters { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.househead .filters .toggle { padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--pill); color: var(--ink-2); font-size: 12.5px; line-height: 1.6; }
.househead .filters .toggle:has(input:checked) { background: var(--ink); color: var(--panel); }
.househead .filters .toggle input { margin: 0; accent-color: var(--panel); }

/* ui.css's "who is here" pill (login/who.js, a shelf's foot) is also `.who`; on
   the Now tab it dressed every daemon's name as a floating pill. */
.beat .who { display: inline; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; align-self: auto; font-size: 14px; }
.beat { align-items: baseline; }
.beat .dot { align-self: center; }

/* Long words (paths, release names, URLs) break inside a card, never push it. */
.card { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.card pre, .card code { overflow-wrap: anywhere; }
.card input, .card select, .card textarea { max-width: 100%; }

/* Forms in a row (Users → Grant credit, the consoles' add rows): inputs share
   the line and shrink, the button keeps its words. */
.add input { min-width: 0; flex: 1 1 5.5em; }
.add button { flex: none; }

/* Tab rows that scroll sideways say so: a fade at the far edge while there is
   more (house.js toggles .more-r / .more-l; without it the fade simply stays). */
.tabs { -webkit-mask-image: none; mask-image: none; }
.tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

@media (max-width: 640px) {
  .househead { margin: 4px 0 12px; gap: 6px 12px; }
  .househead .wordmark { font-size: 1.3rem; }
  .househead .meta { line-height: 1.4; display: contents; }   /* who beside the wordmark, the chips on the next line */
  .househead .meta .me { font-size: 13px; color: var(--dim); }
  .househead .filters { width: 100%; }
  .househead .filters .toggle { padding: 5px 11px 5px 8px; }
  .househead .filters .toggle input { width: 16px; height: 16px; }

  /* EVERY DATA TABLE SCROLLS ITSELF. No table here has a <thead>, so the rows
     all sit in the one <tbody>; the table becomes a block that scrolls and the
     tbody the real table, still 100% wide when it fits. Wrapped in .scroll or
     not (the consoles mostly are not), a wide table now stays in its card. */
  table.data { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    /* a shadow at the right edge while there is more to see (the cover scrolls with the rows) */
    background: linear-gradient(90deg, transparent, var(--panel) 70%) 100% 0 / 28px 100% no-repeat local,
                radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) 100% 0 / 10px 100% no-repeat scroll; }
  table.data > tbody { display: table; width: 100%; border-collapse: collapse; }
  /* The first column names the row: it stays put while the rest scroll, and
     when it is a name (td.main) never squeezes to a word a line ("Stripe · /
     card · / Mastercard"). A "#" or a checkbox column pins at its own width. */
  table.data tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  table.data tr > td.main:first-child { min-width: min(8.5em, 36vw); }
  table.data td { overflow-wrap: normal; }
  table.data :is(button, .chip, .seg) { white-space: nowrap; }   /* "Make / again" in radio's mash list */
  table.data td:not(.num):not(:first-child) { min-width: 4.5em; }
  .tile table.data tr > :first-child, .tile table.data { background-color: transparent; }

  /* A SETTINGS TABLE — a name, its control, maybe where the value came from —
     reads as a list on a phone: the name and its note, the control under it.
     Opt in with .form; conquest's knobs (.knobs) and any two-column table whose
     second column holds a control are taken as one. */
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) { display: block; overflow: visible; background: none; }
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) :is(tbody, tr, td, th) { display: block; }
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) tr:last-child { border-bottom: 0; }
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) :is(td, th) { position: static; border: 0; padding: 3px 0; min-width: 0 !important; max-width: none !important; background: none; }
  :is(table.data.form, table.data.knobs, table.data:has(> tbody > tr > td:nth-child(2):last-child :is(input, select, textarea, .seg))) tr:first-child:has(> th) { display: none; }
  table.data.knobs .field input { min-width: 0; }

  /* Two consoles' own rows that could not wrap, held here because their repos
     were mid-change when this pass went out (2026-10-06): conquest's event
     filter pills, radio's knob names (render.bed_vocal_under_guest_db). */
  .filters .g { flex-wrap: wrap; }
  .knob > :first-child { min-width: 0; overflow-wrap: anywhere; }
}