/* MX3 Device Repair Portal. Tokens per the MX3 design language, sections 1 to 3. */

:root[data-theme="light"]{
  --paper:#F4F6F5; --card:#FFFFFF; --sunk:#FAFBFA;
  --ink:#0E1A1D; --ink2:#4E6167; --ink3:#8598A0; --ink4:#AFBEC3;
  --line:#E2E7E7; --line2:#EDF1F0; --line3:#F3F6F5;
  --accent:#0B5FBF; --accent-soft:#EAF2FC; --accent-line:#BDD6F2;
  --noise:#A3B2B8; --watch:#0B5FBF; --warm:#D98A0B; --hot:#DC5B22;
  --neg:#C62F26; --neg-soft:#FDF0EF; --pos:#0B7A55; --pos-soft:#EDF7F2;
  --shadow:0 1px 2px rgba(14,26,29,.05), 0 1px 1px rgba(14,26,29,.03);
  --shadow-lg:0 12px 32px -8px rgba(14,26,29,.16), 0 2px 6px rgba(14,26,29,.06);
}
:root[data-theme="dark"]{
  --paper:#0B1215; --card:#111B1F; --sunk:#0E171A;
  --ink:#E9F0F1; --ink2:#9BAFB6; --ink3:#6B838B; --ink4:#4A6169;
  --line:#1E2C31; --line2:#182429; --line3:#141F23;
  --accent:#4E9BF0; --accent-soft:#12222F; --accent-line:#1E3A52;
  --noise:#5D7178; --watch:#4E9BF0; --warm:#E0A93F; --hot:#EC7A45;
  --neg:#E96257; --neg-soft:#241416; --pos:#3FB98C; --pos-soft:#0E211C;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 16px 40px -10px rgba(0,0,0,.6);
}
:root{
  --r:5px; --r-lg:8px;
  --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --mono:Arial,"Helvetica Neue",Helvetica,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:600; text-wrap:balance; }
p{ margin:0 0 8px; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.mono,td.num,th.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
td.num,th.num{ text-align:right; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--card); color:var(--ink); padding:8px 12px;
  border:1px solid var(--line); border-radius:var(--r);
}
.skip:focus{ left:8px; top:8px; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- shell ---------- */

.shell{ display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
.shell > *{ min-width:0; }

.sidebar{
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center; gap:8px;
  padding:16px; border-bottom:1px solid var(--line2);
}
/* Height-locked, width auto so each company's wordmark keeps its own aspect
   ratio (MX3, SoberCheck and Alliance are all different shapes). */
.brand-mark{ display:block; height:22px; width:auto; max-width:150px; }
.brand-sub{ font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--ink2); margin-top:5px; }

.nav{ padding:12px 8px; flex:1; overflow-y:auto; }
.nav-label{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; font-weight:600;
  color:var(--ink2); padding:12px 8px 6px;
}
.nav a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 8px; border-radius:var(--r); color:var(--ink2);
  font-size:12.5px; font-weight:500;
}
.nav a:hover{ background:var(--line3); color:var(--ink); text-decoration:none; }
.nav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent); }
:root[data-theme="dark"] .nav a[aria-current="page"]{ color:var(--ink); }
.nav .tally{ font-family:var(--mono); font-size:11px; color:var(--ink2);
  font-variant-numeric:tabular-nums; }

.sidebar-foot{ border-top:1px solid var(--line2); padding:12px; }
.who{ font-size:12.5px; font-weight:600; }
.who-role{ font-size:11px; color:var(--ink2); font-family:var(--mono); }

.main{ padding:20px 24px 64px; min-width:0; }

.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.page-title{ font-size:15px; font-weight:600; }
.page-sub{ font-size:12.5px; color:var(--ink2); margin-top:2px; }

/* ---------- cards ---------- */

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); margin-bottom:16px;
}
.card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line2);
}
.card-title{ font-size:12.5px; font-weight:600; }
.card-note{ font-size:11px; color:var(--ink2); font-family:var(--mono); }
.card-body{ padding:16px; }
.card-body.tight{ padding:0; }

.grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:16px; align-items:start; }
.grid-2.no-aside{ grid-template-columns:minmax(0,1fr); }
.grid-2 > *{ min-width:0; }
.grid-kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.grid-kpi > *{ min-width:0; }

.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 14px; box-shadow:var(--shadow);
}
.kpi-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--ink2); }
.kpi-figure{ font-family:var(--mono); font-size:27px; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; margin-top:4px; line-height:1.1; }
.kpi-note{ font-size:11px; color:var(--ink2); margin-top:2px; }

/* ---------- buttons ---------- */

.btn{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  padding:7px 12px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.btn:hover{ background:var(--line3); text-decoration:none; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
:root[data-theme="dark"] .btn-primary{ color:var(--paper); }
.btn-primary:hover{ filter:brightness(1.08); background:var(--accent); }
.btn-primary[disabled],.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-quiet{ border-color:transparent; background:transparent; color:var(--ink2); }
.btn-quiet:hover{ background:var(--line3); }
.btn-danger{ color:var(--neg); border-color:var(--line); }
.btn-danger:hover{ background:var(--neg-soft); }
.btn-sm{ padding:4px 8px; font-size:11px; }
.btn-lg{ padding:12px 22px; font-size:15px; font-weight:600;
  border-color:var(--accent); color:var(--accent); }
.btn-lg:hover{ background:var(--accent-soft); }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.read-row{ margin-bottom:14px; }
/* "Recommended" sits on its own line over the USB button and goes with it:
   the button is hidden until device.js finds Web Serial, so the label is too. */
.read-eyebrow{
  flex-basis:100%; margin-bottom:-3px;
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--accent);
}
:root[data-theme="dark"] .read-eyebrow{ color:var(--ink2); }
.read-row:has([data-read-device][hidden]) .read-eyebrow{ display:none; }

/* ---------- forms ---------- */

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; font-weight:600; color:var(--ink2);
  margin-bottom:4px; }
.label-row{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:4px; }
.label-row label{ margin-bottom:0; }
/* The Same as address button sits between the address and the return-to
   address it copies into, so the copy reads top to bottom. */
.same-row{ margin:-6px 0 12px; }
.notice{ font-size:12px; color:var(--ink2); margin:0 0 10px; }
.notice.warm{ color:var(--warm); }
.req{ color:var(--neg); font-weight:600; }

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=date],input[type=month],textarea,select{
  width:100%; font-family:var(--sans); font-size:13px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:7px 9px;
}
input.mono,textarea.mono{ font-family:var(--mono); }
textarea{ min-height:76px; resize:vertical; }
select{ background-color:var(--card); color:var(--ink); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
                   linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px; }
input:focus-visible,textarea:focus-visible,select:focus-visible{ border-color:var(--accent); }
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--neg); }
.err{ font-size:11px; color:var(--neg); margin-top:4px; font-weight:500; }

.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px; }
.field-row > *{ min-width:0; }

/* Divider lines between the columns of the add-component picker, so it
   reads clearly as three separate choices. Each field after the first
   carries a line on its left; the extra padding keeps text off the line.
   When the grid wraps to fewer columns the line simply moves with them. */
.add-part .field-row{ gap:0; align-items:start;
  /* The issue names run long (e.g. "Mini-PCB (Header Pin Short and long)"),
     so the list gets the room and Done takes only what it needs beside it. */
  grid-template-columns:minmax(260px,1fr) auto; }
.add-part .field-row > .field{ padding:0 18px; }
.add-part .field-row > .field:first-child{ padding-left:0; }
.add-part .field-row > .field + .field{ border-left:1px solid var(--line); }
/* The button sits level with the issue search box, so picking the issues and
   pressing Done read as one motion. */
.add-part .field-action{ padding-top:20px; }
.add-part .issue-search{ margin-bottom:6px; }
/* Let a long option wrap onto a second line rather than being clipped at the
   box edge, so no fault name is ever cut off. Group headings stay bold. */
.add-part select[multiple]{ padding-right:9px; background-image:none; }
.add-part select[multiple] option{ white-space:normal; padding:2px 2px; }
.add-part select[multiple] optgroup{ font-weight:600; }

/* On a narrow screen the three columns stack; drop the vertical divider lines
   and side padding so each box uses the full width. */
@media (max-width:720px){
  .add-part .field-row{ grid-template-columns:1fr; }
  .add-part .field-row > .field{ padding:0; }
  .add-part .field-row > .field + .field{ border-left:0; }
}

fieldset{ border:0; padding:0; margin:0 0 8px; }
legend{ font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--ink2); padding:0; margin-bottom:8px; }

.radio-row{ display:flex; gap:8px; flex-wrap:wrap; }
.radio-card{
  flex:1 1 160px; border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; cursor:pointer; background:var(--card);
  transition:border-color .12s ease, background .12s ease;
}
.radio-card:hover{ background:var(--line3); }
.radio-card input{ margin-right:6px; }
.radio-card:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.radio-card:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.radio-card .rc-title{ font-size:12.5px; font-weight:600; }
.radio-card .rc-note{ font-size:11px; color:var(--ink2); margin-top:2px; }

/* ---------- tables ---------- */

table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; font-weight:600;
  color:var(--ink2); text-align:left; padding:8px 16px;
  border-bottom:1px solid var(--line2); white-space:nowrap;
}
tbody td{ padding:10px 16px; border-bottom:1px solid var(--line3); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--sunk); }
/* Long registers paint lazily rather than all at once. */
tbody tr{ content-visibility:auto; contain-intrinsic-size:auto 44px; }
.t-id{ font-family:var(--mono); font-size:11px; }
.t-strong{ font-weight:600; }
.t-mute{ color:var(--ink2); font-size:11px; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.fixed{ table-layout:fixed; width:100%; }
table.fixed th,table.fixed td{ overflow:hidden; padding-left:12px; padding-right:8px; }
table.fixed thead th{ padding-left:12px; padding-right:8px; }
.row-actions{ opacity:0; transition:opacity .12s ease; white-space:nowrap; }
tr:hover .row-actions,tr:focus-within .row-actions{ opacity:1; }

/* Bulk-select column on the service register. */
th.check-col,td.check-col{ text-align:center; }
table.fixed th.check-col,table.fixed td.check-col{ padding-right:0; }
.check-col input[type=checkbox]{
  width:14px; height:14px; margin:0 auto; display:block;
  accent-color:var(--accent); cursor:pointer;
}

/* ---------- status ---------- */

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:3px 8px;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--sunk); color:var(--ink2); white-space:nowrap;
}
.pill .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.pill.s-awaiting_device{ color:var(--noise); }
.pill.s-quote_required{ color:var(--warm); border-color:var(--line); }
.pill.s-quote_generated{ color:var(--watch); }
.pill.s-quote_sent{ color:var(--watch); }
.pill.s-quote_accepted{ color:var(--watch); }
.pill.s-ready_to_ship{ color:var(--pos); }
.pill.s-returned{ color:var(--ink2); }
.pill.s-ap_review{ color:var(--warm); border-color:var(--line); }
.pill.s-ap_approved{ color:var(--pos); border-color:var(--line); }
.pill.s-not_ship{ color:var(--neg); }
.pill.s-deleted{ color:var(--ink2); border-style:dashed; }

/* Progress rail: the workflow steps as a ruled track. */
.rail{ display:flex; align-items:stretch; gap:2px; margin:0; padding:0; list-style:none; }
.rail li{ flex:1; min-width:0; }
.rail .seg{
  height:3px; background:var(--line); border-radius:1px; display:block;
}
.rail li.done .seg{ background:var(--accent); }
.rail li.here .seg{ background:var(--accent); }
.rail .seg-label{
  display:block; margin-top:6px; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.09em; font-weight:600; color:var(--ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail li.done .seg-label{ color:var(--ink2); }
.rail li.here .seg-label{ color:var(--accent); }

/* ---------- the signature: band readouts ---------- */
/* A measurement dropped onto its accept band, read the way the LAB is read. */

.bands{ display:flex; flex-direction:column; gap:0; }
.band{
  display:grid; grid-template-columns:minmax(0,1fr) 210px 118px;
  gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line3);
}
.band:last-child{ border-bottom:0; }
.band-name{ font-size:12.5px; font-weight:500; min-width:0; }
.band-spec{ font-size:11px; color:var(--ink2); font-family:var(--mono); }

.rail-track{ position:relative; height:22px; }
.rail-line{
  position:absolute; left:0; right:0; top:10px; height:2px;
  background:var(--line); border-radius:1px;
}
.rail-band{
  position:absolute; top:7px; height:8px; border-radius:2px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.rail-tick{
  position:absolute; top:3px; width:2px; height:16px; border-radius:1px;
  background:var(--ink); transform:translateX(-1px);
}
.rail-tick.out{ background:var(--neg); }
.rail-empty{
  position:absolute; inset:0; display:flex; align-items:center;
  font-size:10px; color:var(--ink2); font-family:var(--mono);
}

.band-read{ text-align:right; }
.band-value{ font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; }
.band-state{ font-size:10px; font-weight:600; white-space:nowrap; }
.band.ok .band-state{ color:var(--pos); }
.band.bad .band-state{ color:var(--neg); }
.band.bad .band-value{ color:var(--neg); }
.band.unread .band-value{ color:var(--ink2); }
.band.unread .band-state{ color:var(--ink2); }

/* ---------- next-step panel ---------- */

.next{
  border:1px solid var(--accent-line); border-radius:var(--r-lg);
  background:var(--accent-soft); margin-bottom:16px; overflow:hidden;
}
.next-head{ padding:12px 16px 0; }
.next-eyebrow{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--accent);
}
:root[data-theme="dark"] .next-eyebrow{ color:var(--ink2); }
.next-title{ font-size:15px; font-weight:600; margin-top:3px; }
.next-body{ padding:12px 16px 16px; }

.blockers{ margin:8px 0 0; padding-left:18px; }
.blockers li{ font-size:12.5px; color:var(--ink2); margin-bottom:3px; }

.done-note{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--pos); font-weight:500;
}

/* ---------- flash ---------- */

.flashes{ margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
.flash{
  padding:9px 12px; border-radius:var(--r); font-size:12.5px; font-weight:500;
  border:1px solid var(--line); background:var(--card);
}
.flash.ok{ color:var(--pos); background:var(--pos-soft); border-color:var(--pos-soft); }
.flash.error{ color:var(--neg); background:var(--neg-soft); border-color:var(--neg-soft); }
.flash.warn{ color:var(--warm); }

/* ---------- inventory ---------- */

.stock-qty{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; }
.stock-low,.stock-zero{ font-weight:600; position:relative; padding-left:12px; }
.stock-low::before,.stock-zero::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-3px;
  width:6px; height:6px; border-radius:50%;
}
.stock-low::before{ background:var(--hot); }
.stock-zero::before{ background:var(--neg); }
.stock-zero{ color:var(--neg); }

.part-add{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 16px; border-bottom:1px solid var(--line3);
}
.part-add:last-child{ border-bottom:0; }
.part-add:hover{ background:var(--sunk); }
.part-meta{ min-width:0; }
.part-name{ font-size:12.5px; font-weight:500; }
.part-code{ font-family:var(--mono); font-size:10px; color:var(--ink2); }
.part-right{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.plus,.minus{
  width:26px; height:26px; padding:0; justify-content:center; font-size:15px;
  line-height:1; font-family:var(--mono);
}
.qty-controls{ display:inline-flex; align-items:center; gap:6px; }
.qty-count{ min-width:14px; text-align:center; font-size:12.5px; color:var(--ink2); }

/* Horizontal part picker, used inside the quote gate. */
.picker-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:16px 0 8px;
}
.part-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:10px; margin:0 0 18px;
}
.part-tile{
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); padding:12px 14px;
}
.part-tile:hover{ border-color:var(--accent-line); }
.part-tile-name{ font-size:14px; font-weight:600; line-height:1.25; }
.part-tile-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:auto;
}
.part-tile .plus,.part-tile .minus{ width:30px; height:30px; font-size:17px; }

/* Per-part discount on this device, entered as "10%" under the +/- controls. */
.discount-form{ display:flex; align-items:center; gap:6px; }
.discount-form .discount-input{ width:64px; flex:1 1 auto; padding:4px 8px; font-size:12px; }
.discount-form .btn{ flex:0 0 auto; }

/* Device blocks on the new-ticket form: one per physical device. */
.device-block{
  border:1px solid var(--line2); border-radius:var(--r-lg);
  padding:12px 14px 4px; margin:0 0 12px;
}
.device-legend{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:0 4px; margin-bottom:6px;
}
.device-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; color:var(--ink2);
}
#add-device-btn{ margin-top:2px; padding:9px 16px; font-size:13px; font-weight:600; }

/* ---------- misc ---------- */

.empty{ padding:32px 16px; text-align:center; color:var(--ink2); font-size:12.5px; }
.divider{ height:1px; background:var(--line2); margin:16px 0; }
.export-form{ display:inline-flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:4px 8px; border:1px solid var(--line); border-radius:var(--r); }
.export-label{ font-size:11px; font-weight:600; color:var(--ink2); }
.export-check{ display:inline-flex; align-items:center; gap:4px; font-size:12px;
  font-family:var(--mono); cursor:pointer; }
.export-check input{ width:14px; height:14px; margin:0; accent-color:var(--accent); }

.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.toolbar input[type=text]{ max-width:260px; }
.toolbar select{ max-width:180px; }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line3); }
.timeline li:last-child{ border-bottom:0; }
.timeline .when{ font-family:var(--mono); font-size:10px; color:var(--ink2);
  white-space:nowrap; flex:none; padding-top:2px; }
.timeline .what{ font-size:12.5px; min-width:0; }
.timeline .who-tag{ font-size:11px; color:var(--ink2); }

.docs-list{ display:flex; flex-direction:column; gap:6px; }
.doc-link{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--r);
  font-size:12.5px; font-weight:500;
}
.doc-link:hover{ background:var(--sunk); text-decoration:none; }
.doc-num{ font-family:var(--mono); font-size:11px; color:var(--ink2); }

/* Document register: one stacked entry per version, sized for the aside. */
.register{ list-style:none; margin:0; padding:0; }
.reg-row{ padding:10px 16px; border-bottom:1px solid var(--line3); }
.reg-row:last-child{ border-bottom:0; }
.reg-row:hover{ background:var(--sunk); }
.reg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reg-title{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; }
.reg-name{ font-size:12.5px; font-weight:500; }
.reg-links{ font-size:12.5px; white-space:nowrap; flex:none; }
.reg-note{ font-size:11px; color:var(--ink2); margin-top:2px; overflow-wrap:anywhere; }
.reg-note .mono{ font-size:10.5px; white-space:nowrap; }

/* Comments: techs and AP on one thread, oldest first. */
.comments{ list-style:none; margin:0 0 14px; padding:0; }
.comment{ padding:10px 0; border-bottom:1px solid var(--line3); }
.comment:first-child{ padding-top:0; }
.comment-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.comment-who{ font-size:12.5px; font-weight:600; }
.comment-org{ font-size:11px; color:var(--ink2); }
.comment-when{ font-size:10.5px; color:var(--ink2); margin-left:auto; white-space:nowrap; }
.comment-body{ font-size:12.5px; margin-top:4px; overflow-wrap:anywhere; }
.comment-files{ list-style:none; margin:6px 0 0; padding:0; font-size:12px; }
.comment-files li{ margin-bottom:2px; overflow-wrap:anywhere; }
.comment-actions{ display:flex; align-items:flex-start; gap:6px; margin-top:6px; flex-wrap:wrap; }
.comment-actions form{ margin:0; }
.comment-edit[open]{ flex-basis:100%; }
.comment-edit > summary{ list-style:none; display:inline-flex; }
.comment-edit > summary::-webkit-details-marker{ display:none; }
.comment-edit form{ margin-top:8px; }
.comment-form{ border-top:1px solid var(--line2); padding-top:14px; }
.comments + .comment-form, .empty + .comment-form{ border-top:0; padding-top:0; }
.bold-btn{ min-width:26px; justify-content:center; }
input[type=file]{
  width:100%; font-family:var(--sans); font-size:12px; color:var(--ink2);
  padding:6px; border:1px dashed var(--line); border-radius:var(--r); background:var(--sunk);
}
input[type=file]::file-selector-button{
  font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink);
  margin-right:10px; padding:4px 10px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card); cursor:pointer;
}

.dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; font-size:12.5px; }
.dl dt{ color:var(--ink2); font-size:11px; }
.dl dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.dl dd.mono{ font-size:12px; }

/* ---------- login ---------- */

.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:100%; max-width:360px; }
.login-brand{ text-align:center; margin-bottom:20px; }
.login-mark{ display:inline-block; width:148px; height:27px; }
.login-sub{ font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; color:var(--ink2); margin-top:4px; }
/* ---------- responsive ---------- */

@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .nav{ display:flex; flex-wrap:wrap; gap:2px; padding:8px; }
  .nav-label{ width:100%; padding:4px 8px 2px; }
  .main{ padding:16px; }
  .grid-2{ grid-template-columns:minmax(0,1fr); }
  .band{ grid-template-columns:minmax(0,1fr) 88px; }
  .band .rail-track{ grid-column:1 / -1; }
}

@media (max-width:720px){
  .toolbar input[type=text]{ max-width:100%; }
  .card-head{ flex-wrap:wrap; }
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-scroll table.fixed{ min-width:660px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .sidebar,.toolbar,.btn,.next{ display:none !important; }
  .shell{ grid-template-columns:1fr; }
}