/* PAIX's own few rules on top of Simple UI (ui.css, the calm feel, brand.css). No colours, sizes or fonts of its own: only the
   feel's tokens. Real controls get the look of the parts the contracts draw (Jumrarecon's app.css does the same). */
input.input { width: 100%; box-sizing: border-box; font: inherit; }
/* Simple UI's select part (contract select 1.0): the chosen value and a chevron; the list opens in place under it as a menu */
.select-wrap { position: relative; }
.select-wrap .menu { position: absolute; top: calc(100% + var(--s1, 4px)); left: 0; right: 0; max-width: none; z-index: 5; }
.select-wrap .menu[hidden] { display: none; }   /* ui.css gives .menu display:grid, which would beat the hidden attribute */
.code-boxes input.box { text-align: center; }
:is(input, select, button, a, summary):focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
form { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the signed-out card (R69): the brand at its top, the title, then one form */
.brand-line { display: flex; gap: var(--s3, 12px); align-items: center; }
.brand-line span:last-child { display: grid; }
.brand-line small { color: var(--ink-2); }
.center-card .card-h { display: grid; gap: var(--s1, 4px); }
.center-card .card-h p, .as-line { color: var(--ink-2); margin: 0; }
.stack-form { display: grid; gap: var(--s4, 16px); }
.row-links { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; }
.ticks { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2, 8px); }
.ticks legend { padding: 0; margin-bottom: var(--s2, 8px); font-weight: var(--w-strong, 600); }
.qr { width: 160px; height: 160px; border: 1px solid var(--line); border-radius: var(--r);
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px; }
.center-page, .scrim { grid-template-columns: minmax(0, 1fr); }   /* the card or dialog shrinks on a phone instead of pushing the page wide (ui.css 336, 620: an auto column grows to 440 or 520) */
@media (max-width: 480px) { .center-page { place-items: start center; padding: var(--s4, 16px); box-sizing: border-box; }
  .center-card { padding: var(--s5, 20px); } }

/* the officers table: actions sit at the row's end */
.table td.acts { text-align: right; white-space: nowrap; }
.row-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; white-space: normal; }
.row-acts form { display: contents; }
.table .mono { font-family: var(--mono); }

/* the prototype's strip: not part of the product */
.proto-strip { display: flex; gap: var(--s3, 12px); align-items: center; padding: var(--s1, 4px) var(--s4, 16px); background: var(--ink); color: var(--surface); font-size: 12px; }
.proto-strip a { color: inherit; margin-left: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The agreed shell on a narrow screen (not in the 13 Oct screens; R25 "nothing runs past the screen"): the menu becomes a row
   above the page, the person line and the organization chip step out (the page head already names both). */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .main { min-width: 0; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar .nav { display: flex; flex: 1 1 100%; overflow-x: auto; gap: var(--s1, 4px); }
  .sidebar .nav a { white-space: nowrap; }
  .sidebar .nav a.on::before { display: none; }   /* the side mark has no edge to sit on in a row; the filled tab says where you are */
  .sidebar-foot, .topbar .org, .topbar .crumbs { display: none; }   /* the page head already says the area and the page */
  .topbar { justify-content: flex-end; }
  .topbar { padding: 0 var(--s4, 16px); }
  .page { padding: var(--s5, 20px) var(--s4, 16px); }
}

/* A toast spans the phone's width so its Undo stays on screen (ui.css 963 gives .toast width 100%, but its holder shrinks to fit) */
.toast form { margin-left: auto; }
@media (max-width: 520px) { .toasts { left: var(--s4, 16px); right: var(--s4, 16px); bottom: var(--s4, 16px); transform: none; } }

/* Inside the centred card, every part lines up with the card's two edges, as the full-width button does (Tiego, 5 Nov 2026:
   "pushes everything to the left"). Simple UI's defaults are made for a page that starts at its left edge. */
.center-card .stepper li { justify-items: center; text-align: center; }               /* each label under its own dot */
.center-card .stepper li::after { left: calc(50% + 17px); right: calc(-50% + 17px); }  /* the line runs dot to dot */
.center-card .code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* the boxes fill the card's width */
.center-card .code-boxes .box { width: auto; text-align: center; }
.center-card .kv { --kv: max-content; }                                                  /* names as wide as the longest, so values don't wrap */
.center-card .row-links { justify-content: center; }   /* the other ways sit under the main action */
.center-card .other-ways { justify-self: center; }    /* a single other way, centred the same */
.toasts[hidden] { display: none; }
/* The test outbox (/dev/outbox, Local and Test only): a wide page, one card per message; long links wrap inside it. */
.outbox-page { max-width: 880px; margin: 0 auto; padding: var(--s6, 24px) var(--s4, 16px); display: grid; gap: var(--s4, 16px); }
.outbox-filter { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: start; }
.outbox-filter .btn { margin-top: 26px; }   /* level with the input, under its label */
.outbox-filter .field { flex: 1 1 260px; }
.outbox-list { display: grid; gap: var(--s3, 12px); }
.msg { gap: var(--s2, 8px); }
.msg-h { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; }
.msg-to { overflow-wrap: anywhere; }
.msg-code { display: flex; gap: var(--s3, 12px); align-items: center; }
.msg-code .mono { font-size: 26px; letter-spacing: .18em; font-weight: 650; }
.msg-link { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.msg-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink-2); }

/* I-02 import: the file picker (field part + button part) and the preview's problems under each row. */
.file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); }
.file-pick input.sr:focus-visible + .btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.field.file .label { font-size: 13px; font-weight: var(--w-semi, 600); }
.field .file-pick label.btn { font: var(--btn-weight) var(--btn-size, 13.5px) var(--font); }   /* not the field's label style */
.import-form { display: grid; gap: var(--s4, 16px); }
.import-or { margin: 0; }
.import-acts { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.import-table .why { display: block; color: var(--attn); font-size: 13px; }
.import-table td { overflow-wrap: break-word; }
.dev-org { text-align: left; font-weight: var(--w-semi, 600); padding: var(--s3, 12px) var(--s4, 16px); }
/* Step 02 connections: headed flush cards, the onboarding checklist, the once-only secret, and the stage-name rows. */
.card.flush > .card-head { padding: var(--s4, 16px) var(--s5, 20px); flex-wrap: wrap; }
.card:not(.flush) { display: grid; gap: var(--s3, 12px); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); }
.checklist li { display: flex; gap: var(--s3, 12px); align-items: baseline; }
.checklist .badge { flex: none; min-width: 64px; justify-content: center; }
.secret-card dd { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; }
.secret-card .mono { overflow-wrap: anywhere; }
.map-form { display: grid; gap: var(--s4, 16px); }
.map-rows { display: grid; gap: var(--s2, 8px); }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3, 12px); align-items: start; }
@media (max-width: 560px) { .map-row { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s3, 12px); border-bottom: 1px solid var(--line, #e5e7eb); } }

/* The integration console (step 03): times stay on one line; a row's Resend and Close sit side by side on a wide screen */
.table td.nowrap { white-space: nowrap; }
.int-names .kv { --kv: max-content; }
@media (min-width: 721px) { .table td.int-acts { width: 1%; } .table td.int-acts .row-acts { flex-wrap: nowrap; } }
textarea.input { font: inherit; }   /* the note reads in the page's font, not the browser's monospace */
.form-foot { display: flex; flex-wrap: wrap; gap: var(--s3, 12px); justify-content: space-between; align-items: center; }
.kv .sub { display: block; font-size: 12px; color: var(--ink-3); }
/* Officer search (step 04) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.look-form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.know .kv{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}.know .kv dt{color:var(--ink);font-weight:500}.know .kv dd{margin:0 0 var(--s2);color:var(--ink-2)}   /* facts stacked: each is a sentence */
.rec-side{align-self:start}
.who-ask .kv{--kv:120px}
.table .num{text-align:right;font-variant-numeric:tabular-nums}   /* counts line up (daily check) */
/* The permanent record (step 08): four filters in a row on a wide screen, stacked on a phone */
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--s4);align-items:end}
@media (max-width: 900px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.filters{grid-template-columns:minmax(0,1fr)}}
/* Charts (step 09): Simple UI's chart part. The CSP allows no style attributes, so a bar's length and a line's colour are classes */
.chart .bars{grid-template-columns:minmax(64px,max-content) minmax(0,1fr)}   /* the chart part, not the older report bar list (.bars > div): */
.bars > .bar-row{grid-column:1 / -1;grid-template-columns:subgrid}             /* one label column for every row, so the bars start together */
.bar-row .track > i{max-width:calc(100% - 40px)}
.bar-row i.w0{width:0%}.bar-row i.w1{width:1%}.bar-row i.w2{width:2%}.bar-row i.w3{width:3%}.bar-row i.w4{width:4%}.bar-row i.w5{width:5%}.bar-row i.w6{width:6%}.bar-row i.w7{width:7%}.bar-row i.w8{width:8%}.bar-row i.w9{width:9%}.bar-row i.w10{width:10%}.bar-row i.w11{width:11%}.bar-row i.w12{width:12%}.bar-row i.w13{width:13%}.bar-row i.w14{width:14%}.bar-row i.w15{width:15%}.bar-row i.w16{width:16%}.bar-row i.w17{width:17%}.bar-row i.w18{width:18%}.bar-row i.w19{width:19%}.bar-row i.w20{width:20%}.bar-row i.w21{width:21%}.bar-row i.w22{width:22%}.bar-row i.w23{width:23%}.bar-row i.w24{width:24%}.bar-row i.w25{width:25%}.bar-row i.w26{width:26%}.bar-row i.w27{width:27%}.bar-row i.w28{width:28%}.bar-row i.w29{width:29%}.bar-row i.w30{width:30%}.bar-row i.w31{width:31%}.bar-row i.w32{width:32%}.bar-row i.w33{width:33%}.bar-row i.w34{width:34%}.bar-row i.w35{width:35%}.bar-row i.w36{width:36%}.bar-row i.w37{width:37%}.bar-row i.w38{width:38%}.bar-row i.w39{width:39%}.bar-row i.w40{width:40%}.bar-row i.w41{width:41%}.bar-row i.w42{width:42%}.bar-row i.w43{width:43%}.bar-row i.w44{width:44%}.bar-row i.w45{width:45%}.bar-row i.w46{width:46%}.bar-row i.w47{width:47%}.bar-row i.w48{width:48%}.bar-row i.w49{width:49%}.bar-row i.w50{width:50%}.bar-row i.w51{width:51%}.bar-row i.w52{width:52%}.bar-row i.w53{width:53%}.bar-row i.w54{width:54%}.bar-row i.w55{width:55%}.bar-row i.w56{width:56%}.bar-row i.w57{width:57%}.bar-row i.w58{width:58%}.bar-row i.w59{width:59%}.bar-row i.w60{width:60%}.bar-row i.w61{width:61%}.bar-row i.w62{width:62%}.bar-row i.w63{width:63%}.bar-row i.w64{width:64%}.bar-row i.w65{width:65%}.bar-row i.w66{width:66%}.bar-row i.w67{width:67%}.bar-row i.w68{width:68%}.bar-row i.w69{width:69%}.bar-row i.w70{width:70%}.bar-row i.w71{width:71%}.bar-row i.w72{width:72%}.bar-row i.w73{width:73%}.bar-row i.w74{width:74%}.bar-row i.w75{width:75%}.bar-row i.w76{width:76%}.bar-row i.w77{width:77%}.bar-row i.w78{width:78%}.bar-row i.w79{width:79%}.bar-row i.w80{width:80%}.bar-row i.w81{width:81%}.bar-row i.w82{width:82%}.bar-row i.w83{width:83%}.bar-row i.w84{width:84%}.bar-row i.w85{width:85%}.bar-row i.w86{width:86%}.bar-row i.w87{width:87%}.bar-row i.w88{width:88%}.bar-row i.w89{width:89%}.bar-row i.w90{width:90%}.bar-row i.w91{width:91%}.bar-row i.w92{width:92%}.bar-row i.w93{width:93%}.bar-row i.w94{width:94%}.bar-row i.w95{width:95%}.bar-row i.w96{width:96%}.bar-row i.w97{width:97%}.bar-row i.w98{width:98%}.bar-row i.w99{width:99%}.bar-row i.w100{width:100%}
.chart-svg line.grid{stroke:var(--line);stroke-width:1}
.chart-svg polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-svg .ln1{stroke:var(--c1)}.chart-svg .ln2{stroke:var(--c2)}.chart-svg .ln3{stroke:var(--c3)}.chart-svg .ln4{stroke:var(--c4)}.chart-svg .lnx{stroke:var(--cx)}
.chart-svg text.end{stroke:none}
.chart-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.overview-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5,20px)}
.overview-charts > .wide{grid-column:1 / -1}
@media (max-width: 1100px){.overview-charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 720px){.overview-charts{grid-template-columns:minmax(0,1fr)}}
.chart-svg.narrow{display:none}
@media (max-width: 720px){.chart-svg.wide{display:none}.chart-svg.narrow{display:block}}
form.card.own-filters{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end}.own-filters .field{flex:0 1 320px;margin:0}.own-filters .btn{width:auto}