/* ============================================================
   CUPPER — Design System: page chrome + components
   ============================================================ */

/* ---------- Page layout: sticky sidebar + content ---------- */
.ds {
  display: grid;
  grid-template-columns: 264px minmax(0,1fr);
  min-height: 100vh;
}
.ds-nav {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--surface-0);
  border-right: 1px solid var(--line-200);
  padding: var(--s-6) var(--s-5);
}
.ds-brandrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.ds-brandrow img { width: 40px; height: 40px; border-radius: 11px; box-shadow: var(--e1); }
.ds-brandrow .wm { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--blue-700); }
.ds-nav .sub { color: var(--ink-500); font-size: 13px; margin: 0 0 var(--s-6) 52px; }
.ds-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: sec; }
.ds-nav a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--ink-600); text-decoration: none; font-size: 14.5px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ds-nav a .n { color: var(--ink-400); font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 16px; }
.ds-nav a:hover { background: var(--surface-50); color: var(--ink-900); }
.ds-nav a.active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.ds-nav a.active .n { color: var(--blue-500); }

.ds-main { padding: var(--s-12) var(--s-12) var(--s-20); max-width: 1180px; }
@media (max-width: 1100px){ .ds-main { padding: var(--s-8) var(--s-6) var(--s-16);} }

/* ---------- Sections ---------- */
.sec { padding-top: var(--s-12); margin-top: var(--s-4); border-top: 1px solid var(--line-200); scroll-margin-top: 24px; }
.sec:first-of-type { border-top: 0; padding-top: 0; }
.sec > .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-500); font-weight: 700; }
.sec > h2 { font-size: 32px; margin: 6px 0 8px; color: var(--ink-900); }
.sec > .lead { font-size: 17px; color: var(--ink-600); max-width: 64ch; margin: 0 0 var(--s-8); text-wrap: pretty; }
h3.subhead { font-size: 19px; margin: var(--s-10) 0 var(--s-4); color: var(--ink-800); }
.note { font-size: 13.5px; color: var(--ink-500); margin-top: var(--s-3); text-wrap: pretty; }
code.tok { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; background: var(--surface-50); border: 1px solid var(--line-200); padding: 1px 6px; border-radius: 5px; color: var(--ink-700); }

/* ---------- Generic card / panel ---------- */
.panel { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--r-lg); box-shadow: var(--e1); }
.grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 820px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }

/* ---------- Color swatches ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(10,1fr); gap: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-200); }
.swatch { aspect-ratio: 1/1.15; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; }
.swatch .hx { font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
.swatch .lb { font-size: 11px; font-weight: 600; }
.scale-label { display:flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.scale-label b { font-family: var(--font-display); font-size: 15px; }
.scale-label span { font-size: 13px; color: var(--ink-500); }

.tile { border-radius: var(--r-md); border: 1px solid var(--line-200); padding: var(--s-4); display:flex; flex-direction:column; gap: 4px; min-height: 92px; justify-content: flex-end; }
.tile .hx { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.tile .nm { font-weight: 600; font-size: 13.5px; }
.tile .role { font-size: 12px; opacity: .8; }

/* ---------- Type specimens ---------- */
.specimen { background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--e1); }
.specimen .lab { font-size: 12px; color: var(--ink-500); display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
.specimen .lab code { font-family: ui-monospace, Menlo, monospace; }
.disp { font-family: var(--font-display); color: var(--ink-900); line-height: 1.08; }
.figdemo { font-feature-settings: var(--tnum); font-size: 30px; letter-spacing: .01em; color: var(--ink-900); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; border-radius: var(--r-md);
  padding: 10px 18px; border: 1px solid transparent; cursor: pointer; display:inline-flex; align-items:center; gap: 8px;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--blue-600); }
.btn-primary:active { background: var(--blue-700); }
.btn-secondary { background: var(--surface-0); color: var(--blue-700); border-color: var(--line-300); }
.btn-secondary:hover { background: var(--blue-50); border-color: var(--blue-300); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--surface-50); }
.btn-danger { background: var(--flag-bg); color: var(--flag-text); border-color: var(--flag-border); }
.btn-danger:hover { background: #f9d6cf; }
.btn[disabled]{ background: var(--surface-50); color: var(--ink-400); border-color: var(--line-200); cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 22px; font-size: 16px; }

/* ---------- Inputs ---------- */
.field { display:flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.input, .select { font-family: var(--font-body); font-size: 15px; color: var(--ink-900); background: var(--surface-0);
  border: 1px solid var(--line-300); border-radius: var(--r-md); padding: 10px 12px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder { color: var(--ink-500); }
.input:focus, .select:focus { outline: none; border-color: var(--blue-400); box-shadow: var(--focus); }
.input.err { border-color: var(--flag-border); background: #fffaf9; }
.field .hint { font-size: 12.5px; color: var(--ink-500); }
.field .hint.err { color: var(--flag-text); }

/* ---------- Chips & badges ---------- */
.chip { display:inline-flex; align-items:center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-200); background: var(--surface-0); color: var(--ink-700); }
.chip.sel { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge { display:inline-flex; align-items:center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill); }
.badge svg { width: 13px; height: 13px; }
.badge-open { background: var(--blue-50); color: var(--blue-700); }
.badge-locked { background: var(--surface-50); color: var(--ink-600); border:1px solid var(--line-200); }
.badge-confirm { background: var(--confirm-bg); color: var(--confirm-text); }
.badge-low { background: var(--low-bg); color: var(--low-text); }
.badge-flag { background: var(--flag-bg); color: var(--flag-text); }

/* ---------- The STATE LANGUAGE: value cells ---------- */
.statecard { background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--e1); }
.statecard .head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-100); }
.statecard .head .t { display:flex; align-items:center; gap: 8px; font-family: var(--font-display); font-weight:700; font-size: 16px; }
.statecard .head .d { font-size: 13px; color: var(--ink-600); margin-top: 4px; }
.statecard .body { padding: 16px; display:flex; flex-direction:column; gap: 12px; align-items:flex-start; }

/* the canonical value cell */
.cell { display:inline-flex; align-items:center; gap: 9px; padding: 8px 12px 8px 11px; border-radius: var(--r-md); font-feature-settings: var(--tnum); font-weight: 600; font-size: 17px; border: 1.5px solid transparent; position: relative; }
.cell .mk { width: 20px; height: 20px; flex: none; display:grid; place-items:center; }
.cell .mk svg { width: 20px; height: 20px; }
.cell .v { letter-spacing: .01em; }
.cell.confirmed { background: var(--surface-0); border-color: var(--line-200); color: var(--ink-900); }
.cell.confirmed .mk { color: var(--confirm-icon); }
.cell.low { background: var(--low-bg); border-color: var(--low-border); color: var(--low-text); }
.cell.low .mk { color: var(--low-icon); }
.cell.flag { background: var(--flag-bg); border-color: var(--flag-border); color: var(--flag-text); box-shadow: 0 0 0 1px var(--flag-border); }
.cell.flag .mk { color: var(--flag-icon); }
.cell.empty { background: repeating-linear-gradient(135deg, var(--surface-50), var(--surface-50) 6px, #eef2f6 6px, #eef2f6 12px); border: 1.5px dashed var(--empty-line); color: var(--empty-text); font-weight: 600; }
.legend { display:flex; flex-wrap:wrap; gap: 18px; margin-top: var(--s-4); font-size: 13px; color: var(--ink-600); }
.legend div { display:flex; align-items:center; gap: 8px; }

/* ---------- Iconography grid ---------- */
.icongrid { display:grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-200); border:1px solid var(--line-200); border-radius: var(--r-lg); overflow:hidden; }
@media (max-width: 720px){ .icongrid { grid-template-columns: repeat(3,1fr);} }
.iconcell { background: var(--surface-0); padding: 18px 10px 12px; display:flex; flex-direction:column; align-items:center; gap: 8px; }
.iconcell svg { width: 26px; height: 26px; color: var(--ink-800); }
.iconcell .nm { font-size: 11.5px; color: var(--ink-500); }

/* ---------- App nav + FAB ---------- */
.appbar { background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); box-shadow: var(--e1); overflow:hidden; }
.appbar.web { display:flex; align-items:center; gap: 4px; padding: 10px 14px; }
.appbar.web .logo { display:flex; align-items:center; gap: 10px; padding-right: 14px; margin-right: 6px; border-right:1px solid var(--line-200); }
.appbar.web .logo img { width: 30px; height: 30px; border-radius: 9px; }
.appbar.web .logo b { font-family: var(--font-display); color: var(--blue-700); font-size: 18px; }
.navitem { display:flex; align-items:center; gap: 8px; padding: 9px 14px; border-radius: var(--r-md); color: var(--ink-600); font-weight: 600; font-size: 14.5px; cursor:pointer; }
.navitem svg { width: 18px; height:18px; }
.navitem.active { background: var(--blue-50); color: var(--blue-700); }
.navitem:hover:not(.active){ background: var(--surface-50); color: var(--ink-900); }
.appbar.web .spacer { flex: 1; }
.fab { display:inline-flex; align-items:center; gap: 9px; background: var(--blue-500); color:#fff; font-weight: 700; font-family: var(--font-body); font-size: 14.5px; border:0; padding: 10px 18px; border-radius: var(--r-pill); box-shadow: 0 6px 16px rgba(60,128,175,.36); cursor:pointer; }
.fab:hover { background: var(--blue-600); }
.fab svg { width: 18px; height: 18px; }

/* phone tab bar */
.tabbar { display:flex; background: var(--surface-0); border-top:1px solid var(--line-200); }
.tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding: 9px 0 8px; color: var(--ink-500); font-size: 11px; font-weight:600; }
.tabbar .tab svg { width: 22px; height: 22px; }
.tabbar .tab.active { color: var(--blue-600); }

/* ---------- Cards / list rows ---------- */
.listrow { display:flex; align-items:center; gap: 14px; padding: 14px 16px; background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); cursor:pointer; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.listrow:hover { box-shadow: var(--e2); border-color: var(--line-300); }
.listrow .lead { width: 44px; height: 44px; border-radius: var(--r-md); display:grid; place-items:center; background: var(--blue-50); color: var(--blue-600); flex:none; }
.listrow .lead svg { width: 22px; height: 22px; }
.listrow .grow { flex:1; min-width:0; }
.listrow .title { font-weight: 700; font-size: 16px; font-family: var(--font-display); color: var(--ink-900); }
.listrow .meta { font-size: 13px; color: var(--ink-600); margin-top: 2px; display:flex; gap: 12px; flex-wrap:wrap; }
.listrow .meta b { color: var(--ink-800); font-weight: 700; }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--line-100); overflow:hidden; min-width: 90px; }
.progress > i { display:block; height:100%; background: var(--blue-500); border-radius: inherit; }

/* sample card variant */
.scard { background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e1); }
.scard .code { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--blue-600); letter-spacing: .04em; }
.scard .nm { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 3px 0 2px; }
.scard .origin { font-size: 13.5px; color: var(--ink-600); }
.scard .avg { display:flex; align-items:baseline; gap: 6px; margin-top: 14px; padding-top: 14px; border-top:1px solid var(--line-100); }
.scard .avg .big { font-size: 26px; font-weight: 700; font-feature-settings: var(--tnum); color: var(--ink-900); }
.scard .avg .lb { font-size: 12px; color: var(--ink-500); }

/* ---------- Image + overlay viewer ---------- */
.viewer { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #233; border:1px solid var(--line-300); box-shadow: var(--e1); }
.viewer .sheet { display:block; width:100%; }
.viewer .toolbar { position:absolute; top:10px; right:10px; display:flex; gap:6px; }
.vbtn { width: 34px; height:34px; border-radius: var(--r-sm); border:0; background: rgba(255,255,255,.92); color: var(--ink-800); display:grid; place-items:center; cursor:pointer; box-shadow: var(--e1); }
.vbtn:hover { background:#fff; }
.vbtn svg { width: 18px; height:18px; }
/* overlaid field boxes (registration) */
.fbox { position:absolute; border-radius: 5px; border:2px solid; cursor:pointer; transition: box-shadow var(--dur-fast); }
.fbox .tag { position:absolute; top:-11px; left:6px; font-size: 11px; font-weight:700; padding: 1px 7px; border-radius: var(--r-pill); font-feature-settings: var(--tnum); display:flex; align-items:center; gap:4px; white-space:nowrap; box-shadow: var(--e1); }
.fbox .tag svg { width: 11px; height:11px; }
.fbox.ok { border-color: rgba(255,255,255,.55); }
.fbox.ok .tag { background:#fff; color: var(--ink-800); }
.fbox.low { border-color: var(--low-icon); box-shadow: 0 0 0 2px rgba(199,130,12,.25); }
.fbox.low .tag { background: var(--low-icon); color:#fff; }
.fbox.flag { border-color: var(--flag-icon); box-shadow: 0 0 0 3px rgba(210,64,43,.3); }
.fbox.flag .tag { background: var(--flag-icon); color:#fff; }

/* ---------- Tap-to-fix editor ---------- */
.fixer { background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-xl); box-shadow: var(--e3); overflow:hidden; max-width: 380px; }
.fixer .fhead { padding: 16px 18px 12px; border-bottom:1px solid var(--line-100); }
.fixer .fhead .field-name { font-family: var(--font-display); font-weight:700; font-size: 17px; }
.fixer .fhead .field-dom { font-size: 12.5px; color: var(--ink-500); margin-top:2px; }
.fixer .crop { display:flex; gap: 12px; padding: 14px 18px; align-items:center; background: var(--surface-25); border-bottom:1px solid var(--line-100); }
.fixer .crop .cropimg { width: 116px; height: 64px; border-radius: var(--r-sm); border:1px solid var(--line-300); object-fit: cover; background:#2a3a44; flex:none; }
.fixer .crop .cl { font-size: 12px; color: var(--ink-600); }
.fixer .crop .cl b { display:block; color: var(--ink-800); font-family: var(--font-display); font-size: 13px; margin-bottom:2px; }
.fixer .reading { padding: 14px 18px 6px; display:flex; align-items:center; gap:10px; }
.fixer .reading .was { font-size: 12.5px; color: var(--ink-500); }
.fixer .reading .now { font-feature-settings: var(--tnum); font-size: 30px; font-weight:700; color: var(--ink-900); margin-left:auto; }
.pad { display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px 18px 18px; }
.pad button { font-family: var(--font-body); font-feature-settings: var(--tnum); font-weight: 600; font-size: 16px; padding: 12px 0; border-radius: var(--r-md); border:1px solid var(--line-200); background: var(--surface-0); color: var(--ink-800); cursor:pointer; }
.pad button:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-700); }
.pad button.accent { background: var(--blue-500); color:#fff; border-color: var(--blue-500); grid-column: span 1; }
.pad button.accent:hover { background: var(--blue-600); }
.pad button.wide { grid-column: span 2; }
.padnote { padding: 0 18px 16px; font-size: 12px; color: var(--ink-500); }

/* ---------- Results table ---------- */
.tablewrap { border:1px solid var(--line-200); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--e1); background: var(--surface-0); }
table.rt { width:100%; border-collapse: collapse; font-size: 14.5px; }
table.rt th, table.rt td { text-align: right; padding: 11px 14px; border-bottom:1px solid var(--line-100); white-space:nowrap; }
table.rt th { background: var(--surface-50); font-family: var(--font-body); font-weight:700; font-size: 12.5px; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-600); border-bottom:1px solid var(--line-200); }
table.rt th.l, table.rt td.l { text-align:left; }
table.rt tbody tr:hover { background: var(--blue-50); }
table.rt td.l .s-code { font-family: var(--font-display); font-weight:700; color: var(--blue-600); font-size: 13px; }
table.rt td.l .s-name { color: var(--ink-800); }
table.rt td .v { font-feature-settings: var(--tnum); font-weight:600; }
table.rt td.total { font-weight:700; color: var(--ink-900); }
table.rt td.crosscheck { color: var(--confirm-text); font-weight:700; }
.minicell { display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.minicell svg { width: 14px; height:14px; }
.minicell.low { color: var(--low-text); }
.minicell.flag { color: var(--flag-text); }
.rt-foot { display:flex; align-items:center; gap: 16px; padding: 12px 14px; background: var(--surface-50); border-top:1px solid var(--line-200); font-size: 13px; color: var(--ink-600); flex-wrap:wrap; }

/* ---------- Phone frame ---------- */
.phone { position: relative; width: 340px; border-radius: 38px; background: #0e1418; padding: 11px; box-shadow: var(--e3); flex:none; }
.phone .screen { background: var(--surface-50); border-radius: 28px; overflow:hidden; height: 700px; display:flex; flex-direction:column; position:relative; }
.phone .statusbar { height: 40px; display:flex; align-items:center; justify-content:space-between; padding: 0 22px; font-size: 13px; font-weight:700; color: var(--ink-800); font-feature-settings: var(--tnum); }
.phone .statusbar .dots { display:flex; gap:5px; align-items:center; }
.notch { position:absolute; top:11px; left:50%; transform:translateX(-50%); width: 120px; height: 26px; background:#0e1418; border-radius: 0 0 16px 16px; z-index:5; }

/* ---------- Misc ---------- */
.stack { display:flex; flex-direction:column; gap: var(--s-4); }
.row { display:flex; gap: var(--s-3); flex-wrap:wrap; align-items:center; }
.divider { height:1px; background: var(--line-200); margin: var(--s-6) 0; }
.callout { display:flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--blue-50); border:1px solid var(--blue-100); color: var(--blue-800); font-size: 14px; }
.callout svg { width: 20px; height:20px; flex:none; color: var(--blue-500); margin-top:1px; }
.principle { display:flex; gap: 14px; padding: 16px; background: var(--surface-0); border:1px solid var(--line-200); border-radius: var(--r-lg); }
.principle .pn { font-family: var(--font-display); font-weight:700; font-size: 22px; color: var(--blue-300); line-height:1; width: 28px; flex:none; }
.principle .pt { font-family: var(--font-display); font-weight:700; font-size: 15.5px; color: var(--ink-900); margin-bottom: 4px; }
.principle .pd { font-size: 13.5px; color: var(--ink-600); text-wrap:pretty; }