/* ui.css — the one set of elements for Studio, on JUD CORE (jud-standards/tokens.json → jud.css).
   Every screen is built from these and nothing else. If a piece is not on the #ui page it does not get built.
   Numbers come from the tokens; nothing here is typed in. The models for the chrome are Linear (rail, segmented controls, density)
   and the Stripe dashboard (tables, tiles, forms with the label above the field).
   Each element has ONE name. The older Studio names are kept as aliases so the screens already built keep working:
     .btn (.primary · .quiet · .danger · .icon = .ibtn)   .segmented (= .seg · .stages · .tabs)   .card (.pad)   .field + .input/.select/.textarea
     .table   .chip (a filter or a choice)   .pill (a status word)   .switch   .kpi (= .dial)   .empty   .toast (= #toast)   .sheet   .nav   .group (a grouped form) */
@import url("jud.css");

/* the skin — the only lines a product may change (jud-standards/skins/poppy.css): the shop's pink, deepened to carry words */
:root { --accent: #8E2A47; --accent-on: #F6F3EE; --accent-soft: #F2C4CE; }

/* tints and shadows derived from the tokens, never typed */
:root {
  --tint-3: color-mix(in srgb, var(--ink) 3%, transparent);
  --tint-6: color-mix(in srgb, var(--ink) 6%, transparent);
  --tint-10: color-mix(in srgb, var(--ink) 10%, transparent);
  --tint-20: color-mix(in srgb, var(--ink) 20%, transparent);
  --onRail2: color-mix(in srgb, var(--onRail) 70%, transparent);
  --onRail-tint: color-mix(in srgb, var(--onRail) 8%, transparent);
  --onRail-on: color-mix(in srgb, var(--onRail) 14%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
  --go-soft: color-mix(in srgb, var(--go-dot) 18%, var(--card));
  --amber-soft: color-mix(in srgb, var(--amber-dot) 16%, var(--card));
  --warn-soft: color-mix(in srgb, var(--warn-dot) 14%, var(--card));
  --ring: 0 0 0 var(--focus-w) color-mix(in srgb, var(--accent) 45%, transparent);
}

/* focus: visible on everything (jud.css draws it); the mouse's own click does not leave a ring behind */
:focus:not(:focus-visible) { outline: none; }
button { cursor: default; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---- .btn — the button. Words say what it does, the same word for the same act everywhere ---- */
.btn {
  height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 0 var(--s-md); border-radius: var(--r-control); border: 0;
  background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 1px var(--tint-6);
  font: var(--fw-ctl) var(--fs-ctl)/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  white-space: nowrap; text-decoration: none; transition: background var(--t), color var(--t), box-shadow var(--t);
}
.btn:hover { background: var(--panel); }
.btn:active { background: var(--sunk); }
.btn svg { width: var(--s-lg); height: var(--s-lg); flex: none; }
.btn[disabled], .btn:disabled { opacity: .45; pointer-events: none; }
/* the one accent button on a screen: top right of the head, or a sheet's own Save / Send (Stripe, Linear) */
.btn.primary { background: var(--accent); color: var(--accent-on); box-shadow: none; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn.primary:active { background: color-mix(in srgb, var(--accent) 76%, var(--ink)); }
/* quiet: no ring, for the third action in a row */
.btn.quiet { background: transparent; box-shadow: none; color: var(--ink2); }
.btn.quiet:hover { background: var(--tint-6); color: var(--ink); }
/* danger: it removes something. Only on a sheet's confirm */
.btn.danger { color: var(--warn-ink); }
.btn.primary.danger { background: var(--warn-ink); color: var(--card); }
/* icon only: a square, and ALWAYS an aria-label */
.btn.icon, .ibtn {
  width: var(--ctl-h-dense); height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--hair); transition: background var(--t), color var(--t);
}
.btn.icon:hover, .ibtn:hover { background: var(--tint-6); color: var(--ink); }
.btn.icon svg, .ibtn svg { width: var(--s-lg); height: var(--s-lg); }

/* ---- .segmented — THE way to show 2–4 exclusive choices (Apple segmented control, Linear's view switch) ---- */
.segmented, .seg, .stages, .tabs {
  display: inline-flex; align-items: stretch; gap: 0; height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 2px;
  border-radius: var(--r-control); background: var(--tint-6); box-shadow: inset 0 0 0 1px var(--line);
}
.segmented > button, .segmented > a, .seg > button, .seg > a, .stages > button, .tabs > a {
  flex: 1 1 auto; min-height: 0; height: auto; padding: 0 var(--s-md); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--ink2); font: var(--fw-ctl) var(--fs-ctl)/1 var(--font); white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm); transition: color var(--t), background var(--t);
}
.segmented > .on, .seg > .on, .stages > .on, .tabs > .on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 2px var(--tint-10); }
.segmented > :hover:not(.on):not(:disabled), .seg > :hover:not(.on):not(:disabled), .stages > :hover:not(.on), .tabs > :hover:not(.on) { color: var(--ink); }
.segmented > :disabled, .seg > :disabled { opacity: .5; }
.segmented.full, .seg.full { display: flex; width: 100%; }
.segmented.full > *, .seg.full > * { flex: 1 1 0; min-width: 0; padding: 0 var(--s-xs); }
.seg.rows3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--ctl-h-dense); height: auto; }
.seg.rows3 > button { overflow: hidden; text-overflow: ellipsis; }
.tabs { margin-bottom: var(--s-lg); }
.tabs > a .n, .nav a .n {
  min-width: var(--s-lg); height: var(--s-lg); padding: 0 var(--s-xs); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--rail);
  font: var(--fw-micro) var(--fs-label)/1 var(--font); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
/* a segmented control with its label above it: wrap both in .field */
.field > .segmented, .field > .seg { align-self: flex-start; }

/* ---- surfaces: .card (a surface on the field), .panel (a raised surface), .sunk (a well). Two levels of raise; a third is a bug ---- */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 0; }
.card.pad { padding: var(--s-lg); }
.card.clip { overflow: hidden; }
.panel { background: var(--panel); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); }
.raised { background: var(--raised); color: var(--onRail); border-radius: var(--r-card); }
.pad { padding: var(--s-lg); }

/* ---- .field — a label above its control; .input / .select / .textarea ---- */
.field { display: flex; flex-direction: column; gap: var(--s-xs); min-width: 0; }
.field > label, .lbl { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink2); }
.field > .note { margin: 0; }
.input, .select, .textarea, select.input {
  width: 100%; height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 0 var(--s-sm); border: 0; border-radius: var(--r-control);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font);
  transition: box-shadow var(--t);
}
.select, select.input { appearance: none; -webkit-appearance: none; padding-right: var(--s-xl); background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: right var(--s-md) top 50%, right var(--s-sm) top 50%; background-size: var(--s-xs) var(--s-xs); background-repeat: no-repeat; }
.textarea { height: auto; min-height: calc(var(--s-section) + var(--s-xxl)); padding: var(--s-sm); resize: vertical; }
.input:hover, .textarea:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.input:focus, .textarea:focus, .select:focus { box-shadow: inset 0 0 0 1px var(--edge); }
.input::placeholder, .textarea::placeholder, input::placeholder, textarea::placeholder { color: var(--faint); }
.input.inline { width: auto; text-align: right; }
.note { font: var(--fw-note) var(--fs-note)/var(--lh-note) var(--font); color: var(--ink2); margin: 0 0 var(--s-sm); }

/* ---- .table — Stripe's: hairlines, labels in the head, numbers right and tabular ---- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink2); padding: var(--s-sm) var(--s-sm); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.table td { padding: var(--s-sm) var(--s-sm); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td:nth-child(2), .table td:nth-child(3) { white-space: normal; }
.table th.r, .table td.r, .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.click:hover td { background: var(--tint-3); }
.table img { width: var(--s-xxl); height: var(--s-xxl); border-radius: var(--r-control); object-fit: cover; }

/* ---- .chip — a filter or a choice (several may be on); .chips the row they sit in ---- */
.chips { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.chip {
  height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 0 var(--s-md); border: 0; border-radius: var(--r-pill); background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink2); font: var(--fw-ctl) var(--fs-ctl)/1 var(--font);
  display: inline-flex; align-items: center; gap: var(--s-xs); white-space: nowrap; transition: color var(--t), box-shadow var(--t), background var(--t);
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.chip.on { background: var(--ink); color: var(--card); box-shadow: none; }
.chip .c { opacity: .7; font-weight: var(--fw-body); font-variant-numeric: tabular-nums; }
.chip.off { opacity: .5; text-decoration: line-through; } .chip.off.on { opacity: 1; text-decoration: none; }

/* ---- .pill — a status word. The dot colour never writes; the ink colour does ---- */
.pill { display: inline-flex; align-items: center; gap: var(--s-xs); height: calc(var(--s-lg) + var(--s-xs)); padding: 0 var(--s-sm); border-radius: var(--r-pill); font: var(--fw-micro) var(--fs-label)/1 var(--font); white-space: nowrap; background: var(--sunk); color: var(--ink2); }
.pill.go { background: var(--go-soft); color: var(--go-ink); }
.pill.amber { background: var(--amber-soft); color: var(--amber-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill.pink { background: var(--accent-tint); color: var(--accent); }
.pill.ink { background: var(--ink); color: var(--card); }
.pill.quiet { background: var(--sunk); color: var(--ink2); }

/* ---- .switch — on / off. The hit area is the button, the track is drawn inside it ---- */
.switch { position: relative; width: calc(var(--s-xxl) + var(--s-sm)); height: var(--hit-min); min-height: var(--hit-min); padding: 0; border: 0; background: transparent; flex: none; }
.switch::before { content: ""; position: absolute; left: var(--s-xs); right: var(--s-xs); top: 50%; height: var(--s-lg); margin-top: calc(var(--s-sm) * -1); border-radius: var(--r-pill); background: var(--tint-20); box-shadow: inset 0 0 0 1px var(--tint-10); transition: background var(--t); }
.switch::after { content: ""; position: absolute; left: calc(var(--s-xs) + 2px); top: 50%; width: var(--s-md); height: var(--s-md); margin-top: calc(var(--s-md) / -2); border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px var(--tint-20); transition: left var(--t); }
.switch.on::before { background: var(--accent); }
.switch.on::after { left: calc(var(--s-xl) - 2px); }
.switch[disabled] { opacity: .45; }

/* ---- .kpi — one number with its label, its change and one line under (= .dial). .hit: the one that matters now ---- */
.kpi, .dial, .stat { background: var(--card); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s-md) var(--s-lg); min-width: 0; display: flex; flex-direction: column; gap: var(--s-xs); }
.kpi .k, .dial .k, .stat .k { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v, .dial .v, .stat .v { font: var(--fw-figure) var(--fs-figure)/var(--lh-figure) var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v .faint, .dial .v .faint { font-weight: var(--fw-body); }
.kpi .n, .dial .n { font: var(--fw-note) var(--fs-note)/var(--lh-note) var(--font); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.hit, .dial.hit { background: var(--rail); color: var(--onRail); box-shadow: none; }
.kpi.hit .k, .dial.hit .k, .kpi.hit .n, .dial.hit .n, .dial.hit .v .faint { color: var(--onRail2); }
.kpi.hit .v, .dial.hit .v { color: var(--accent-soft); }
.kpis, .dials, .stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-md); margin-bottom: var(--s-xl); }
.dials.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dials.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dials.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dials.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dials + .dials { margin-top: calc(var(--s-md) - var(--s-xl)); }
.delta { font: var(--fw-label) var(--fs-label)/1 var(--font); margin-left: var(--s-xs); } .delta.up { color: var(--go-ink); } .delta.down { color: var(--warn-ink); }
@media (max-width: 1100px) { .kpis, .dials, .dials.four, .dials.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- .empty — a screen that can be empty says WHY it is empty and WHAT to do; never a blank panel ---- */
.empty { padding: var(--s-xl); text-align: center; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); }
.empty b { color: var(--ink); font-weight: var(--fw-heading); }
.empty .btn { margin-top: var(--s-xs); }
.empty.slim { padding: var(--s-lg); box-shadow: none; text-align: left; align-items: flex-start; border-radius: 0; }
.empty.inset { margin: var(--s-lg); } .empty.span { grid-column: 1 / -1; }

/* ---- .toast — one line at the bottom, one at a time ---- */
.toast, #toast { position: fixed; left: 50%; bottom: var(--s-xl); transform: translateX(-50%); opacity: 0; background: var(--raised); color: var(--onRail); padding: var(--s-sm) var(--s-lg); border-radius: var(--r-control); font-weight: var(--fw-ctl); z-index: 1400; transition: opacity var(--t); pointer-events: none; box-shadow: var(--shadow-sheet); max-width: min(720px, calc(100vw - var(--s-section))); text-align: center; }
.toast.show, #toast.show { opacity: 1; }

/* ---- .sheet — detail opens as a centred sheet, never a side panel. Head · body · foot ---- */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 30%, transparent); display: flex; align-items: center; justify-content: center; padding: var(--s-xl); z-index: 1200; overflow: auto; animation: fade var(--t-sheet) var(--ease); }
.sheet { background: var(--panel); border-radius: var(--r-card); width: min(920px, 100%); max-height: 100%; box-shadow: var(--shadow-sheet); overflow: hidden; display: flex; flex-direction: column; }
.sheet.narrow { width: min(520px, 100%); } .sheet.wide { width: min(1100px, 100%); }
.sheet > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.sheet.fixed { height: min(86vh, 780px); } .sheet.fixed > form { flex: 1; min-height: 0; } .scrim:has(.sheet.fixed) { padding: var(--s-xl); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); min-height: var(--s-section); padding: var(--s-sm) var(--s-md) var(--s-sm) var(--s-lg); border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--tint-3); }
.sheet-head h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head .row { min-width: 0; } .sheet-head > .faint { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { padding: var(--s-lg); overflow: auto; min-height: 0; } .sheet-body.flush { padding: 0; }
.sheet-foot { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: var(--s-sm); min-height: var(--s-section); padding: var(--s-sm) var(--s-lg); border-top: 1px solid var(--line); }
@keyframes fade { from { opacity: 0; } }
/* a sheet's close: an icon button, labelled */
.x { width: var(--hit-min); height: var(--hit-min); min-height: var(--hit-min); border-radius: 50%; border: 0; background: var(--tint-6); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; padding: 0; transition: background var(--t); }
.x:hover { background: var(--tint-10); } .x svg { width: var(--s-md); height: var(--s-md); } .x[disabled] { opacity: .3; }

/* ---- .nav — the rail (Linear): one item a page, the page you are on lit, a count on the right ---- */
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: var(--s-sm); height: var(--ctl-h-dense); min-height: var(--hit-min); padding: 0 var(--s-sm); border-radius: var(--r-control); color: var(--onRail); text-decoration: none; position: relative; transition: background var(--t); }
.nav a:hover { background: var(--onRail-tint); } .nav a.on { background: var(--onRail-on); }
.nav a svg { width: var(--s-lg); height: var(--s-lg); flex-shrink: 0; color: var(--onRail2); } .nav a.on svg { color: var(--onRail); }
.nav a .n { margin-left: auto; }
.nav a .n.quiet { background: var(--onRail-on); color: var(--onRail); } .nav a .n.warn { background: var(--warn-soft); color: var(--warn-ink); }
.navh { font: var(--fw-micro) var(--fs-micro)/var(--lh-micro) var(--font); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--onRail2); padding: var(--s-md) var(--s-sm) var(--s-xs); }
.nav .navh:first-child { padding-top: 0; }

/* ---- .group — a grouped form: label | field rows with hairlines, no boxes (Apple's inset list) ---- */
.group { background: var(--card); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; overflow: hidden; }
.group > label, .group > div { display: grid; grid-template-columns: var(--label-gutter) minmax(0, 1fr); align-items: center; gap: var(--s-md); padding: 0 var(--s-lg); min-height: var(--row-h); border-bottom: 1px solid var(--line); position: relative; margin: 0; }
.group > :last-child { border-bottom: 0; } .group > label:focus-within { background: var(--tint-3); }
.group > label > span:first-child, .group > div > span:first-child { color: var(--ink2); }
.group input, .group textarea { border: 0; background: transparent; height: var(--row-h); padding: 0; width: 100%; min-width: 0; border-radius: 0; box-shadow: none; }
.group input:focus, .group textarea:focus { box-shadow: none; }
.group textarea { height: auto; resize: none; padding: var(--s-sm) 0; line-height: var(--lh-body); }
.group > .tall { align-items: start; } .group > .tall > span:first-child { padding-top: var(--s-sm); }
.group > div .chips { padding: var(--s-sm) 0; }
.group > .sw { grid-template-columns: minmax(0, 1fr) auto; }

/* ---- type, as classes (jud.css has .t-*): the page head and the one sub-head ---- */
h1, h2, h3 { margin: 0; font: var(--fw-heading) var(--fs-heading)/var(--lh-heading) var(--font); }
h2, h3 { margin-bottom: var(--s-sm); }
.head h1 { font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font); letter-spacing: -.01em; }
b, strong { font-weight: var(--fw-heading); }
.muted { color: var(--ink2); } .faint { color: var(--ink2); } .small { font-size: var(--fs-label); } .warnText { color: var(--warn-ink); } .goText { color: var(--go-ink); } .amberText { color: var(--amber-ink); }
.num { font-variant-numeric: tabular-nums; }