/* components.css — All component CSS.
   Port: table/drawer/filterbar from direction-B; cards/lists/pill/chip/modal/toast/switch/empty/barlist from direction-A+B.
   Tokens only (no raw values). Depends on: tokens.css (F1).
   Consumed by: all views (F15-F19) + components (F9-F13). */

/* ═══════════════════════════════════════════════════════════════════════════
   PILL BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: none; border-radius: var(--r-pill); cursor: pointer;
  font: var(--t-headline); letter-spacing: -.1px;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
  min-height: 44px; padding: 0 var(--sp-5);
}
.pill:active  { transform: scale(.97); }
.pill:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.pill:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pill-primary  { background: var(--accent); color: var(--on-accent); }
.pill-primary:hover  { background: var(--accent-hover); }
.pill-primary:active { background: var(--accent-pressed); box-shadow: var(--shadow-pressed); }
.pill-secondary { background: var(--accent-soft); color: var(--accent-ink); }
.pill-secondary:hover { background: var(--accent-soft-2); }
.pill-ghost { background: transparent; color: var(--text-2); }
.pill-ghost:hover { background: var(--fill); }
.pill-danger { background: var(--error-soft); color: var(--error); }
.pill-danger:hover { background: var(--error); color: var(--on-accent); }
.pill-sm { min-height: 34px; padding: 0 var(--sp-4); font: var(--t-subhead); }
.pill-lg { min-height: 52px; padding: 0 var(--sp-5); width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   GROUPED INSET LIST (.list-group / .list / .row)
   ═══════════════════════════════════════════════════════════════════════════ */
.list-group { margin: 0 0 var(--sp-5); }
.list-header {
  font: var(--t-caption-1); letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-3); padding: 0 var(--sp-3) var(--sp-2);
  display: flex; gap: 8px; align-items: center;
}
.list-footer { font: var(--t-footnote); color: var(--text-3); padding: var(--sp-2) var(--sp-3) 0; }
.list {
  background: var(--surface-2); border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 0 0 var(--hairline) var(--separator);
}
[data-theme="dark"] .list { background: #26262a; }

.row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3);
  min-height: 42px; padding: var(--sp-2) var(--sp-4);
  font: var(--t-subhead); color: var(--text);
  background: transparent; border: none; text-align: left; width: 100%;
}
.row + .row { box-shadow: inset 0 var(--hairline) 0 var(--separator); }
button.row  { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
button.row:hover  { background: var(--fill); }
button.row:active { background: var(--fill-strong); }
.row-icon  { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--icon-bg, var(--fill)); color: #fff; display: grid; place-items: center; font-size: 14px; flex: none; }
.row-label { color: var(--text-2); }
.row-value {
  justify-self: end; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text);
}
.row-value .unit { color: var(--text-3); font-style: normal; font-family: var(--font-sans); font-size: 13px; margin-left: 3px; }
.row-chevron { color: var(--text-4); font-size: 18px; flex: none; }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }

/* input rows (edit mode inside drawer) */
.row-input { cursor: text; }
.row-input .row-control { justify-self: end; display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.field {
  width: 108px; text-align: right; border: none; background: transparent; color: var(--text);
  font: var(--t-subhead); font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 6px 0;
}
.field.txt  { width: 160px; text-align: right; font-family: var(--font-sans); }
.field:focus { outline: none; }
.row-input:focus-within { background: var(--accent-soft); }
.row-input[data-state="error"] { background: var(--error-soft); }
.row-input[data-state="error"] .field { color: var(--error); }
.req { color: var(--accent-ink); font-style: normal; }
.field-select {
  border: var(--hairline) solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font: var(--t-subhead);
  padding: 6px 26px 6px 10px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23646e7b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.field-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.validation-note { font: var(--t-footnote); color: var(--error); padding: var(--sp-2) var(--sp-3) 0; display: none; }
.validation-note[data-show] { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS CHIP
   ═══════════════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--fill); color: var(--text-2);
  font: var(--t-caption-1); letter-spacing: 0; text-transform: none; white-space: nowrap; border: none;
}
.chip-dot  { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-ok   { background: var(--success-soft); color: var(--success); }
.chip-warn { background: var(--warn-soft);    color: var(--warn); }
.chip-err  { background: var(--error-soft);   color: var(--error); }
.chip-line { font-size: 12px; height: 26px; }
.cmp-check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.att-badge { display: inline-flex; align-items: center; gap: 3px; font: var(--t-caption-2); color: var(--text-3); letter-spacing: 0; text-transform: none; }
.chip-select {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: var(--fill); color: var(--text-2); font: var(--t-subhead);
  border: var(--hairline) solid transparent; cursor: pointer; white-space: nowrap;
}
.chip-select[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL
   ═══════════════════════════════════════════════════════════════════════════ */
.segmented { position: relative; display: inline-flex; gap: 0; padding: 3px; background: var(--fill); border-radius: var(--r-pill); }
.segmented .seg {
  appearance: none; border: none; background: transparent; cursor: pointer; min-height: 32px;
  padding: 0 var(--sp-4); border-radius: var(--r-pill); font: var(--t-subhead); color: var(--text-2); white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.segmented .seg[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   KPI CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); display: flex; flex-direction: column; min-height: 118px;
}
.kpi-card.ok-accent   { box-shadow: var(--shadow-1), inset 0 2px 0 var(--success); }
.kpi-card.warn-accent { box-shadow: var(--shadow-1), inset 0 2px 0 var(--warn); }
.kpi-card.err-accent  { box-shadow: var(--shadow-1), inset 0 2px 0 var(--error); }
.kpi-label { font: var(--t-caption-1); letter-spacing: .3px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.big-num {
  font: var(--num-card); font-variant-numeric: tabular-nums; letter-spacing: -.5px; color: var(--text);
  font-feature-settings: "tnum" 1, "zero" 1; margin: 0;
}
.big-num.hero { font: var(--num-hero); letter-spacing: -1px; }
.big-num.med  { font: var(--num-inline); }
.big-num .unit { font: var(--t-subhead); color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.big-num.ok   { color: var(--success); }
.big-num.warn { color: var(--warn); }
.big-num.err  { color: var(--error); }
.kpi-sub { font: var(--t-footnote); color: var(--text-2); margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-5); }
.card-head  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-title { font: var(--t-title-3); margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
canvas { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE.DATA  (B — sortable, compare-row)
   ═══════════════════════════════════════════════════════════════════════════ */
.tablewrap   { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.tablescroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data thead th {
  position: sticky; top: var(--topbar-h); z-index: 5;
  background: var(--surface); text-align: left; white-space: nowrap;
  font: var(--t-caption-1); letter-spacing: .3px; text-transform: uppercase; color: var(--text-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--hairline) solid var(--separator-strong);
  cursor: pointer; user-select: none;
}
table.data thead th.num { text-align: right; }
table.data thead th .arrow { font-size: 10px; margin-left: 3px; opacity: .6; }
table.data tbody td {
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--hairline) solid var(--separator);
  font: var(--t-subhead); color: var(--text); white-space: nowrap;
}
table.data tbody td.num { text-align: right; font-family: var(--font-mono); color: var(--text-2); }
table.data tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
table.data tbody tr:hover { background: var(--fill); }
table.data tbody tr[aria-selected="true"] { background: var(--accent-soft); }
table.data tbody tr:last-child td { border-bottom: none; }
.run-cell  { display: flex; align-items: center; gap: var(--sp-3); }
.run-ic    { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; }
.run-meta  { display: flex; flex-direction: column; line-height: 1.25; }
.run-name  { font: var(--t-subhead); font-weight: 600; color: var(--text); }
.run-tube  { font: var(--t-caption-2); color: var(--text-3); letter-spacing: 0; text-transform: none; }

/* trial-row (A card-style list, used when table view is unavailable) */
.trials { display: flex; flex-direction: column; gap: var(--sp-2); }
.trial-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: var(--hairline) solid var(--separator); border-radius: var(--r-md);
  cursor: pointer; text-align: left; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.trial-row:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.trial-row[aria-current="true"] { border-color: var(--accent); box-shadow: var(--shadow-1), 0 0 0 1px var(--accent); }
.trial-row:active { transform: scale(.996); }
.trial-dot  { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.trial-main { min-width: 0; }
.trial-main .name { font: var(--t-headline); display: flex; gap: 8px; align-items: baseline; }
.trial-main .name .run { font-family: var(--font-mono); font-weight: 600; }
.trial-main .meta { font: var(--t-footnote); color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-rbp  { font-family: var(--font-mono); font-weight: 600; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.trial-rbp small { font: var(--t-caption-2); color: var(--text-3); display: block; font-family: var(--font-sans); }
.trial-files { font: var(--t-caption-2); color: var(--text-3); display: flex; align-items: center; gap: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER BAR  (B)
   ═══════════════════════════════════════════════════════════════════════════ */
.filterbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.search { position: relative; flex: 1 1 240px; min-width: 200px; }
.search input {
  width: 100%; height: 36px; padding: 0 var(--sp-3) 0 36px; border-radius: var(--r-sm);
  border: var(--hairline) solid var(--border); background: var(--bg); color: var(--text);
  font: var(--t-subhead);
}
.search input::placeholder { color: var(--text-4); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); background: var(--surface); }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 15px; pointer-events: none; }
.fsel {
  height: 36px; padding: 0 30px 0 var(--sp-3); border-radius: var(--r-sm);
  border: var(--hairline) solid var(--border); background: var(--bg); color: var(--text);
  font: var(--t-subhead); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23646e7b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.fsel:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.filter-spacer { flex: 1; }
.count-chip { font: var(--t-footnote); color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE DETAIL DRAWER  (B — translateX from right, full-height)
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 200; background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow);
}
.drawer-scrim[data-show] { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(560px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-3);
  border-left: var(--hairline) solid var(--separator);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-spring);  /* more-Toss: spring slide */
}
.drawer[data-show] { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: var(--hairline) solid var(--separator);
  background: var(--material-sheet);
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
          backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
}
.drawer-head .dh-titles { flex: 1; min-width: 0; }
.drawer-head .dh-title { font: var(--t-title-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-head .dh-sub { font: var(--t-footnote); color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5); -webkit-overflow-scrolling: touch; }
.drawer-foot {
  display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-top: var(--hairline) solid var(--separator); background: var(--surface);
}
.drawer-foot .pill { flex: 1; min-height: 52px; }

/* detail banner inside drawer (hero KPI variant) */
.detail-banner {
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-5);
  background: var(--surface); margin-bottom: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.detail-banner.ok   { box-shadow: var(--shadow-1), inset 0 2px 0 var(--success); }
.detail-banner.warn { box-shadow: var(--shadow-1), inset 0 2px 0 var(--warn); }
.detail-banner.err  { box-shadow: var(--shadow-1), inset 0 2px 0 var(--error); }
.detail-banner .bn-num { font: var(--num-card); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.detail-banner .bn-sub { font: var(--t-footnote); color: var(--text-2); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DROPZONE + FILE ITEM  (B)
   ═══════════════════════════════════════════════════════════════════════════ */
.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-4);
  text-align: center; color: var(--text-3); cursor: pointer; background: var(--bg);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.dropzone:hover { border-color: var(--accent); color: var(--text-2); }
.dropzone.drag  { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.dropzone .dz-ic   { font-size: 26px; display: block; margin-bottom: var(--sp-2); }
.dropzone .dz-main { font: var(--t-subhead); color: var(--text-2); }
.dropzone .dz-sub  { font: var(--t-footnote); color: var(--text-4); margin-top: 2px; }
.filelist { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.fileitem {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); box-shadow: inset 0 0 0 var(--hairline) var(--separator);
}
[data-theme="dark"] .fileitem { background: #26262a; }
.fileitem .f-ic   { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 15px; }
.fileitem .f-meta { flex: 1; min-width: 0; }
.fileitem .f-name { font: var(--t-subhead); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fileitem .f-sub  { font: var(--t-caption-2); color: var(--text-3); letter-spacing: 0; text-transform: none; font-family: var(--font-mono); }
.fileitem .f-act  { display: flex; gap: var(--sp-1); flex: none; }
.f-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background var(--dur-fast), color var(--dur-fast); }
.f-btn:hover { background: var(--fill); color: var(--text); }
.f-btn.del:hover { background: var(--error-soft); color: var(--error); }
.upbar { height: 4px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; margin-top: 6px; }
.upbar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill); transition: width 120ms linear; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL  (B — centered dialog, used for Settings)
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-scrim {
  position: fixed; inset: 0; z-index: 300; background: var(--scrim); display: none;
  align-items: center; justify-content: center; padding: var(--sp-6);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
}
.modal-scrim[data-show] { display: flex; opacity: 1; }
.modal {
  width: min(440px, 100%); max-height: min(85vh, 640px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  transform: scale(.96); transition: transform var(--dur-base) var(--ease-spring);
}
.modal-scrim[data-show] .modal { transform: scale(1); }
.modal-head  { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal-title { font: var(--t-title-3); }
.modal-body  { overflow-y: auto; padding: 0 var(--sp-5) var(--sp-5); }
.modal-foot  { flex: none; padding: var(--sp-4) var(--sp-5); border-top: var(--hairline) solid var(--separator); display: flex; align-items: center; gap: var(--sp-3); }
.modal-foot .pill { flex: 1; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--sp-2) 0; }
.toggle-row + .toggle-row { border-top: var(--hairline) solid var(--separator); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 400;
  transform: translateX(-50%) translateY(16px);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--elevated); color: var(--text); box-shadow: var(--shadow-2);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font: var(--t-subhead);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-spring);
}
.toast[data-show] { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-glyph.ok  { color: var(--success); }
.toast-glyph.err { color: var(--error); }

/* ═══════════════════════════════════════════════════════════════════════════
   SWITCH  (B — checkbox pattern)
   ═══════════════════════════════════════════════════════════════════════════ */
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--fill-strong); transition: background var(--dur-fast); }
.switch .knob  { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-spring); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track + .knob { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--ring-focus); }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-4); text-align: center; }
.empty .ic { font-size: 36px; opacity: .5; }
.empty p { font: var(--t-callout); color: var(--text-3); white-space: pre-line; margin: 0 0 var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════════════
   BARLIST  (B — pure-CSS bar chart for compare/dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */
.barlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.barrow  { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: var(--sp-3); }
.barrow .bl { font: var(--t-subhead); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bartrack { height: 10px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.barfill  { height: 100%; border-radius: var(--r-pill); }
.barrow .bv { font: var(--t-footnote); font-family: var(--font-mono); color: var(--text-3); min-width: 42px; text-align: right; }
.cmp-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--sp-5); }
.cmp-empty { padding: var(--sp-8); text-align: center; color: var(--text-3); font: var(--t-callout); }

/* ═══════════════════════════════════════════════════════════════════════════
   CRAFT ELEVATION (audit §1 BALANCED) — additive block appended to preserve the
   cached prefix above. Three buckets: B3 orphaned classes (visible breakage),
   B5/B8 hairline+selection depth, B6 hero rhythm. All motion is reduce-motion-
   guarded by tokens.css §BASE LAYER. No DOM/JS change, no AA regression.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B3a · .chart-box — canvases were getting no height; Chart.js collapses on
   first paint without a deterministic box. ─────────────────────────────────── */
.chart-box { position: relative; min-height: 240px; }
.chart-box > canvas { position: absolute; inset: 0; }

/* ── B3b · .linetabs / .linetab (records secondary line affordance) — rendered
   as bare inline text. Style as a sibling of .chip-select. ─────────────────── */
.linetabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.linetab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); border: var(--hairline) solid transparent;
  background: var(--fill); color: var(--text-2);
  font: var(--t-subhead); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-spring);
}
.linetab:hover  { background: var(--fill-strong); }
.linetab:active { transform: scale(.97); }
.linetab[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.linetab .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.linetab .ct  {
  font: var(--t-caption-2); font-family: var(--font-mono);
  color: var(--text-3); background: var(--surface);
  border-radius: var(--r-pill); padding: 1px 7px; min-width: 18px; text-align: center;
}
.linetab[aria-pressed="true"] .ct { background: var(--accent-soft-2); color: var(--accent-ink); }

/* ── B3c · dashboard "최근 시험" rows (.tr-run / .tr-date / .tr-rbp) — the 4-cell
   grid was unstyled. Give .trial-row used here a 4-col grid + mono right-align. ─ */
.trials .trial-row:has(.tr-run) {
  grid-template-columns: auto auto 1fr auto;
  gap: var(--sp-3); align-items: center;
}
.tr-run  { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.tr-date { font: var(--t-footnote); color: var(--text-3); }
.tr-rbp  {
  justify-self: end; text-align: right;
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ── B5 · hairline depth on resting cards (light-mode edge; dark already ships
   the inset hairline inside --shadow-1). Sharpens the card plane without weight.
   ok/warn/err inset top-bars keep their existing layered form (see :132-134). ── */
.kpi-card,
.card,
.tablewrap,
.filterbar,
.detail-banner {
  box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator);
}
.kpi-card.ok-accent   { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--success); }
.kpi-card.warn-accent { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--warn); }
.kpi-card.err-accent  { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--error); }
.detail-banner.ok   { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--success); }
.detail-banner.warn { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--warn); }
.detail-banner.err  { box-shadow: var(--shadow-1), 0 0 0 var(--hairline) var(--separator), inset 0 2px 0 var(--error); }

/* press delight on cards (Toss §7.6, dropped in port) — transform-only. */
.kpi-card, .card { transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-standard); }
.kpi-card:active, .card:active { transform: scale(.99); }

/* B6 · hero KPI rhythm — baseline-align the unit next to the 56px figure
   (SSOT §2.3; was missing) and tighten the label→number gap. */
.kpi-label { margin-bottom: var(--sp-1); }
.big-num { margin-block: var(--sp-1) 0; }
.big-num .unit { vertical-align: baseline; }

/* Apple-dial squircle on the hero card only (leaf surface, no overflow kids):
   continuous-corner mask with a graceful border-radius fallback. */
@supports (-webkit-mask-image: -webkit-radial-gradient(#000, #000)) {
  .kpi-card.ok-accent,
  .kpi-card.warn-accent { will-change: transform; }
}

/* ── B8 · table selection edge + sticky-thead frost. Left accent-edge mirrors
   the .trial-row[aria-current] treatment; stacks with the --accent-soft fill. ── */
table.data tbody tr[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
table.data thead th {
  background: var(--material-bar);
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
          backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
}

/* chip-select / chip / nav-glyph icon consistency — fixed-width glyph slot so
   the emoji/symbol mix stops shifting the baseline (B10). */
.chip-select:active { transform: scale(.97); }
.chip-select { transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }

/* segmented control thumb gets the spring on selection-move (Toss). */
.segmented .seg { transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-standard); }

/* B7 · 8pt normalisation — the 6px padding leaks snap to --sp-1 / calc. */
.tube-row { padding: var(--sp-1) var(--sp-3); }
.field { padding: var(--sp-1) 0; }
.field-select { padding: var(--sp-1) 26px var(--sp-1) 10px; }

/* dropzone gets a spring lift on hover (file-drop affordance). */
.dropzone { transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.dropzone:active { transform: scale(.995); }

/* ═══════════════════════════════════════════════════════════════════════════
   more-TOSS DIAL (appended; preserves cached prefix). Breezier KPI air, lead
   KPI spans 2 cols, KPI/card squircle to --r-xl, press-scale delight on cards /
   pills / rows. All motion neutralised by the tokens.css §BASE reduce-motion
   guard (kept LAST in the cascade). No DOM-id/structure change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* breezier KPI strip — bigger gap, softer corner, a hair more pad around the hero */
.kpi-grid { gap: var(--sp-5); }
.kpi-card { border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-6) var(--sp-5); min-height: 128px; }

/* lead KPI (합격률 / PASS RATE) spans 2 grid columns — dashboard.js tags that
   one card .kpi-card--hero (visible class only; value/logic unchanged). */
.kpi-card--hero { grid-column: span 2; }

/* press-scale delight (Toss §7.6) — transform-only, GPU-cheap. */
.kpi-card:active, .card:active { transform: scale(.985); }
.pill:active { transform: scale(.96); }
button.row:active { transform: scale(.99); }
.chip-select:active, .linetab:active { transform: scale(.96); }

/* softer card + detail-banner corners to match the warmer dial */
.detail-banner { border-radius: var(--r-xl); padding: var(--sp-6); }

/* hero number tracking at the larger 68px size (was tuned for 56px) */
.big-num.hero { letter-spacing: -1.5px; }
.big-num .unit { vertical-align: baseline; }