/* EVAL Ops. Tokens only (css/tokens.css is the store app's file, as is). The portal is EVAL's desktop sibling: same
   palette, type, pills, calmer and denser (design/concepts/ops). Laws: nothing under 13px; every tappable thing 44px; no X,
   no close, no back: a curtain leaves by its pull tab or its scrim; titles never cut; no sideways scroll; a card is the
   size of its content; every fact is a figure, a meter or a pill. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); line-height: 1.45; min-height: 100vh;
  background: var(--canvas);
  background-image: radial-gradient(1200px 700px at 0% 0%, var(--wash1), transparent 60%), radial-gradient(1000px 700px at 100% 100%, var(--wash2), transparent 60%);
  background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ---- the shell: sidebar (desktop), rail (iPad), tab bar (phone) ---- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.gmark { width: 38px; height: 38px; border-radius: var(--r-mark); display: flex; align-items: center; justify-content: center; background: var(--grad); box-shadow: var(--glow); flex: 0 0 auto; }
.gmark.sm { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.gmark svg { display: block; }
.word { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -0.4px; }
.tag { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--purInk); background: var(--lav); border-radius: 6px; padding: 2px 6px; letter-spacing: .4px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.navi { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); color: var(--ink2); font-weight: 700; font-size: 15px; }
.navi svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
.navi.on { background: var(--lav); color: var(--purInk); }
.navi.on svg { color: var(--purInk); }
.side .grow { flex: 1; }
.boxes { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.boxrow { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink2); }
.who { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px; margin-top: 6px; }
.av { width: 34px; height: 34px; border-radius: 999px; background: var(--lav); color: var(--purInk); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.who b { font-weight: 700; font-size: 15px; }
.tabbar { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; padding: 20px 26px 28px; gap: 16px; }
.top { display: flex; align-items: center; gap: 10px; min-height: 48px; flex-wrap: wrap; }
.top h1 { font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: var(--ls-tight); margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
.top .sp { flex: 1; }

/* ---- primitives ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.chead { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; flex-wrap: wrap; }
.chead h2 { margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 800; letter-spacing: var(--ls-head); }
.chead .sp { flex: 1; }
.lbl { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.big { font-family: var(--font-head); font-weight: 800; font-size: 30px; letter-spacing: var(--ls-tight); line-height: 1.05; color: var(--ink); white-space: nowrap; }
.fig { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: var(--ls-head); color: var(--ink); }
.dim { color: var(--muted); }
.mono { font-family: var(--font-mono); }

.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; background: var(--plainBg); color: var(--plainInk); flex: 0 0 auto; line-height: 1.25; }
.pill.good { background: var(--goodBg); color: var(--goodInk); }
.pill.warn { background: var(--warnBg); color: var(--warnInk); }
.pill.bad { background: var(--badBg); color: var(--badInk); }
.pill.lav, .pill.pur { background: var(--lav); color: var(--purInk); }
.pill.peach { background: var(--peachBg); color: var(--peachInk); }
.pill.mono { font-family: var(--font-mono); font-weight: 600; }
.pill .dot { width: 8px; height: 8px; }
.pill44 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px 0 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; background: var(--lav); color: var(--purInk); flex: 0 0 auto; white-space: nowrap; }
.pill44.solid { background: var(--grad); color: var(--onGrad); box-shadow: var(--glow); }
.pill44.peach { background: var(--peachBg); color: var(--peachInk); box-shadow: 0 0 0 1px var(--peach) inset; }
.pill44.plain { background: var(--plainBg); color: var(--ink2); }
.pill44.bad { background: var(--badBg); color: var(--badInk); }
.pill44.icon { padding: 0 16px; }
.pill44:disabled { opacity: .5; cursor: default; }
.pill44 svg:not(.cv) { width: 18px; height: 18px; }
.cv { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--surf2); flex-wrap: wrap; }
.seg button { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 14.5px; color: var(--ink2); }
.seg button.on { background: var(--card); color: var(--purInk); box-shadow: var(--shadow); }

.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--muted2); flex: 0 0 auto; display: inline-block; }
.dot.good { background: var(--green); } .dot.warn { background: var(--amber); } .dot.bad { background: var(--red); } .dot.pur { background: var(--pur); }
.dot.ring { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pur) 22%, transparent); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.in { min-height: 46px; width: 100%; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line3); background: var(--surf); font-size: 16px; color: var(--ink); }
.in:focus { outline: 2px solid var(--pur); outline-offset: 1px; }

/* ---- the ladder: Detected, Re-login, Fixer, Supervisor, You ---- */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.ladder .st { min-height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surf2); color: var(--muted2); border: 1px dashed transparent; padding: 0 6px; text-align: center; }
.ladder .st.done { background: var(--goodBg); color: var(--goodInk); }
.ladder .st.fail { background: var(--badBg); color: var(--badInk); }
.ladder .st.skip { background: transparent; color: var(--muted); border-color: var(--line3); }
.ladder .st.now { background: var(--pur); color: var(--card); box-shadow: 0 0 0 3px var(--lav); }
.ladder.mini { gap: 3px; width: 118px; flex: 0 0 auto; }
.ladder.legend, .cr .more .ladder { grid-template-columns: repeat(5, max-content); width: auto !important; }
.ladder.legend .st, .cr .more .ladder .st { padding: 0 10px; white-space: nowrap; }
.ladder.mini .st { min-height: 8px; height: 8px; border-radius: 4px; padding: 0; font-size: 0; }

/* ---- Rooftops ---- */
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tot { padding: 16px 18px; display: flex; align-items: center; gap: 14px; min-height: 96px; flex-wrap: wrap; }
.tot .tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tot .row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tot .viz { margin-left: auto; }
.meterbar { display: flex; width: 150px; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surf2); }
.meterbar i { display: block; height: 100%; background: var(--green); }
.meterbar i.warn { background: var(--amber); } .meterbar i.bad { background: var(--red); } .meterbar i.pur { background: var(--pur); } .meterbar i.off { background: var(--muted2); }
.spark { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.spark i { width: 12px; min-height: 5px; border-radius: 4px 4px 2px 2px; background: var(--lav); display: block; }
.spark i.now { background: var(--pur); }
.body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 18px; align-items: start; }
.left, .right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.rt { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; position: relative; text-align: left; width: 100%; min-height: 44px; }
.rt:focus-visible { outline: 2px solid var(--pur); }
.rt .hd { display: flex; align-items: flex-start; gap: 10px; padding-right: 34px; }
.rt .nm { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: var(--ls-head); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.rt .corner { position: absolute; top: 16px; right: 14px; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surf2); }
.rt .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cx > span { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: 10px; background: var(--surf); font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.cx > span.bad { background: var(--badBg); color: var(--badInk); }
.cx > span.warn { background: var(--warnBg); color: var(--warnInk); }
.cx > span.pur { background: var(--lav2); color: var(--purInk); }
.cx > span.off { color: var(--muted); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line2); padding-top: 12px; }
.figs div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.add { border: 2px dashed var(--line3); background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px; }
.add .pl { width: 52px; height: 52px; border-radius: 16px; background: var(--lav); color: var(--purInk); display: flex; align-items: center; justify-content: center; }
.add .pl svg { width: 26px; height: 26px; }
.iss { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: center; padding: 14px 18px; }
.iss + .iss { border-top: 1px solid var(--line2); }
.iss .t { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.iss .src { font-weight: 700; font-size: 15px; color: var(--ink2); }
.iss .line { grid-column: 2; font-family: var(--font-head); font-weight: 800; font-size: 16.5px; letter-spacing: var(--ls-head); overflow-wrap: anywhere; }
.iss .lad { grid-column: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iss .act { grid-column: 3; grid-row: 1 / span 3; }
.iss > .dot { grid-row: 1 / span 3; align-self: start; margin-top: 6px; }
.calm { padding: 6px 18px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pulse { padding-bottom: 14px; }
.lane { display: grid; grid-template-columns: 180px minmax(0, 1fr) 110px; align-items: center; gap: 14px; padding: 5px 18px; }
.lane .nm2 { font-weight: 700; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }
.lane > .pill { justify-self: end; }
.track { position: relative; height: 24px; border-radius: 8px; background: var(--surf); overflow: hidden; }
.track i { position: absolute; top: 5px; width: 2px; height: 14px; border-radius: 2px; background: var(--green); opacity: .85; }
.track i.f { background: var(--red); opacity: 1; top: 3px; height: 18px; }
.track em { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-style: normal; font-size: 13px; font-weight: 700; color: var(--badInk); white-space: nowrap; }
.axis { position: relative; height: 20px; margin: 6px 142px 0 212px; }
.axis span { position: absolute; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.valc .vl { padding: 2px 18px 16px; font-size: 15px; line-height: 1.55; color: var(--ink2); }

/* ---- the Rooftop page ---- */
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
.cr { display: grid; grid-template-columns: 10px 112px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: center; padding: 10px 18px; min-height: 56px; }
.cr + .cr { border-top: 1px solid var(--line2); }
.cr .w { font-weight: 700; font-size: 15px; color: var(--ink2); }
.cr .ln { font-family: var(--font-head); font-weight: 800; font-size: 16px; letter-spacing: var(--ls-head); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.cr .ln .pill { font-family: var(--font-body); letter-spacing: 0; }
.cr .ac { display: flex; align-items: center; gap: 8px; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
.cr .more { grid-column: 3 / span 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr .more .ladder { width: 360px; max-width: 100%; }
.cr.lit { background: var(--lav2); }
.tried { grid-column: 3 / span 2; display: flex; flex-direction: column; gap: 6px; }
.tried div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); }
.tried .pill { justify-content: center; font-family: var(--font-mono); font-weight: 600; }
.feeds { padding-bottom: 12px; }
.fl { display: grid; grid-template-columns: 112px minmax(0, 1fr) 100px; gap: 14px; align-items: center; padding: 3px 18px; }
.fl .w { font-weight: 700; font-size: 14px; color: var(--ink2); }
.fl > .pill { justify-self: end; }
.feeds .axis { margin: 6px 132px 0 144px; }
.ps { padding: 10px 0 12px; border-bottom: 1px solid var(--line2); }
.ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps ul { margin: 8px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 5px; }
.ps li { font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.ps li::marker { color: var(--pur); }
.pc { display: flex; align-items: center; gap: 8px; min-height: 48px; width: 100%; text-align: left; border-bottom: 1px solid var(--line2); }
.pc .fig { width: 84px; flex: 0 0 auto; font-size: 15px; }
.pc .t1 { flex: 1; min-width: 0; font-size: 14px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sbody { padding: 0 18px 12px; display: flex; flex-direction: column; }
.sp3 { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.trow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surf2); }
.stack i { display: block; height: 100%; }
.keys { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.keys span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.keys i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.keys b { font-weight: 800; color: var(--ink); }
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 130px; border-top: 1px solid var(--line2); padding-top: 10px; }
.col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.col b { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--lav); display: block; }
.col b.now { background: var(--pur); }
.col .cv2 { font-size: 13px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.col .dw { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---- the curtain (the Fix panel) and the pop-up: pull tab + scrim, never an X ---- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity var(--dur-curtain) var(--ease); }
.scrim.on { opacity: 1; }
.curtain { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(900px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadowCurtain); overflow: clip; display: flex; flex-direction: column; z-index: 41; transform: translateX(24px); opacity: 0; transition: transform var(--dur-curtain) var(--ease-rise), opacity var(--dur-curtain) var(--ease); }
.curtain.on { transform: none; opacity: 1; }
.band { height: var(--band-h); flex: 0 0 auto; overflow: visible; background: var(--gradR); color: var(--onGrad); display: flex; align-items: center; gap: 12px; padding: 0 12px 0 4px; }
.band .bt { font-family: var(--font-head); font-weight: 800; font-size: 17px; }
.band .sp { flex: 1; }
.band .pill { background: rgba(255, 255, 255, .2); color: var(--onGrad); }
.tab { width: 44px; height: 44px; margin: -2px 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: grab; }
.tab i { width: 6px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .75); display: block; }
.fbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; flex: 1; }
.screen { width: 100%; aspect-ratio: 1.6; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surf2); position: relative; flex: 0 0 auto; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.state { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: var(--ls-head); }
.hist { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line2); padding-top: 14px; }
.hr { display: grid; grid-template-columns: 112px auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 30px; }
.hr .pill { justify-content: center; font-family: var(--font-mono); font-weight: 600; }
.hr .tx { font-size: 14px; color: var(--ink2); }
.st2 { font-weight: 700; font-size: 14px; color: var(--ink2); }
.phase { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid var(--line2); padding-top: 14px; }
.ladder.ph4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ladder.ph4 .st { min-height: 32px; }
.facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.facts .sp { flex: 1; }
.pop { position: fixed; left: 50%; top: 50%; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; transform: translate(-50%, -46%); opacity: 0; transition: transform var(--dur-pop) var(--ease-rise), opacity var(--dur-pop) var(--ease); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadowCurtain); z-index: 41; }
.pop.on { transform: translate(-50%, -50%); opacity: 1; }
.pop .pb { padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.pop .tabrow { display: flex; justify-content: center; }
.pop .tabrow .tab i { background: var(--line3); width: 40px; height: 6px; }
.pop .tabrow .tab { width: 100%; height: 44px; margin: 0; }
.pop h3 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: var(--ls-head); }
.pop .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; }

/* ---- forms and lists (Users, Boxes, API, Settings) ---- */
.urow, .brow { display: grid; align-items: center; gap: 12px; padding: 12px 18px; }
.urow { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.brow { grid-template-columns: 10px minmax(0, 1fr) auto; }
.urow + .urow, .brow + .brow { border-top: 1px solid var(--line2); }
.urow .nm, .brow .nm { font-weight: 800; font-family: var(--font-head); font-size: 16px; overflow-wrap: anywhere; }
.urow .em { font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }
.stackcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wrapline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 18px 18px; }
.form .full { grid-column: 1 / -1; }
.meter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.meter b { width: 56px; height: 8px; border-radius: 99px; background: var(--surf2); position: relative; overflow: hidden; display: block; }
.meter b i { position: absolute; inset: 0 auto 0 0; background: var(--pur); border-radius: 99px; }
.bar { height: 12px; border-radius: 99px; background: var(--surf2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--pur); border-radius: 99px; }
.brk { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; padding: 6px 18px; font-weight: 700; font-size: 14.5px; color: var(--ink2); }
.pad { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.pad > .pill, .pad > .pill44, .pad > .seg { align-self: flex-start; }
.empty { padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---- the sign-in screen ---- */
.au { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.au .card { width: min(420px, 100%); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.au .mk { display: flex; align-items: center; gap: 10px; }
.au h1 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.au form { display: flex; flex-direction: column; gap: 12px; }
.au .links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- iPad: the sidebar becomes a rail; the right column drops under ---- */
@media (max-width: 1279px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .side { padding: 18px 10px; align-items: center; }
  .brand .word, .brand .tag, .navi .nw, .boxes, .who b, .who .pill { display: none; }
  .brand { padding: 0 0 14px; }
  .navi { width: 52px; justify-content: center; padding: 0; gap: 0; }
  .main { padding: 18px 20px 28px; }
  .body, .rgrid { grid-template-columns: minmax(0, 1fr); }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- phone: a tab bar at the bottom; everything one column ---- */
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .main { padding: 14px 16px 104px; gap: 14px; }
  .top h1 { font-size: 24px; }
  .tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; justify-content: space-between; gap: 4px; padding: 6px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glassLine); box-shadow: var(--shadowUp); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .tabbar .navi { width: 48px; min-width: 48px; justify-content: center; padding: 0; gap: 8px; }
  .tabbar .navi .nw { display: none; }
  .tabbar .navi.on { width: auto; padding: 0 16px; }
  .tabbar .navi.on .nw { display: inline; }
  .totals { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .lane { grid-template-columns: minmax(0, 1fr) auto; }
  .lane .track { grid-column: 1 / -1; grid-row: 2; }
  .axis, .feeds .axis { display: none; }
  .fl { grid-template-columns: minmax(0, 1fr) auto; }
  .fl .track { grid-column: 1 / -1; grid-row: 2; }
  .cr { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .cr > .dot { grid-column: 1; grid-row: 1; }
  .cr .w { grid-column: 2; grid-row: 1; }
  .cr .ac { grid-column: 3; grid-row: 1; }
  .cr .ln { grid-column: 2 / span 2; grid-row: 2; }
  .cr .more, .tried { grid-column: 2 / span 2; }
  .tried div { grid-template-columns: auto minmax(0, 1fr); }
  .tried div .st2 { display: none; }
  .curtain { inset: 0; width: 100vw; border-radius: 0; }
  .hr { grid-template-columns: auto minmax(0, 1fr); }
  .hr .st2 { grid-column: 1 / -1; }
  .phase { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .urow { grid-template-columns: 34px minmax(0, 1fr); }
  .urow > .seg, .urow > .rm { grid-column: 1 / -1; justify-self: start; }
  .brk { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .brow { grid-template-columns: 10px minmax(0, 1fr); }
  .brow > .wrapline:last-child { grid-column: 1 / -1; }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  .iss { grid-template-columns: 10px minmax(0, 1fr); }
  .iss .act { grid-column: 2; grid-row: auto; }
  .chead .ladder.legend { display: none; }
  .ladder:not(.mini) { display: flex; flex-wrap: wrap; }
  .ladder:not(.mini) .st { white-space: nowrap; padding: 0 10px; flex: 1 0 auto; }
}