/* app.css — Callback Desk. Consumes only semantic tokens from design-tokens.css. Base + family components + simulator layout. */
/* ===== Fallback faces: until the web fonts load (or if they never do), system fonts are scaled to the measured widths so line lengths and column widths do not jump ===== */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:93.3%}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial"),local("Segoe UI");size-adjust:106.5%}
@font-face{font-family:"Space Mono Fallback";src:local("Menlo Regular"),local("Menlo-Regular"),local("Consolas"),local("DejaVu Sans Mono");size-adjust:101.7%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-variant-numeric:lining-nums}
::selection{background:var(--selection-bg)}
:focus-visible{outline:var(--border-focus-width) solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-underline-offset:.18em;text-decoration-thickness:from-font}
code,kbd,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);line-height:var(--leading-tight);text-wrap:balance;letter-spacing:var(--tracking-title);font-variation-settings:"opsz" var(--opsz-title)}
p{margin:0}
img,svg{max-width:100%;display:block}
table{border-collapse:collapse}
ul,ol{margin:0;padding:0;list-style:none}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;text-align:right;letter-spacing:-0.01em}
.muted{color:var(--text-2)}.faint{color:var(--text-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.skip{position:absolute;left:var(--space-2);top:-48px;background:var(--surface);padding:var(--space-2) var(--space-3);border:1px solid var(--border-input);border-radius:var(--radius-sm);z-index:var(--z-toast)}
.skip:focus{top:var(--space-2)}
.skip:focus-visible{outline-color:var(--on-band)}   /* the link shows on top of the dark top bar, so its ring is drawn on the band */
[hidden]{display:none!important}

/* ===== topbar ===== */
.topbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--topbar-h);display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-3);padding:0 var(--gutter);background:var(--band);border-bottom:1px solid var(--band-line);color:var(--on-band)}
.brand{display:flex;align-items:center;gap:var(--space-2);color:inherit;text-decoration:none;min-width:0;flex:0 1 auto}
.brand svg{flex:none}
.brand b{white-space:nowrap;font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:-0.014em;flex:none;font-variation-settings:"opsz" var(--opsz-title);font-size:var(--text-xl)}
.brand span{color:var(--on-band-2);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:var(--space-1);height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:.02em;border:1px solid var(--warning);color:var(--warning-tint-text);background:var(--warning-tint);white-space:nowrap;flex:none}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warning)}
.spacer{flex:1}
.topbar .btn{flex:none}
@media (max-width:639px){.brand span{display:none}.brand{flex:1 1 auto}.pill .long{display:none}.topbar{gap:var(--space-2)}.topbar .gh,.topbar #help,.topbar #theme{display:none}.topbar .btn-primary{padding:0 var(--space-2)}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border-input);background:var(--paper);color:var(--text);cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--surface-hover)}}
.btn:active{transform:scale(var(--press-scale))}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
@media (hover:hover) and (pointer:fine){.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}}
.btn-ghost{border-color:transparent;background:transparent}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--neutral-tint)}}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--text-disabled);background:var(--neutral-tint);border-color:var(--border);cursor:not-allowed;transform:none;box-shadow:none}
.btn-icon{width:var(--control-h);padding:0}
.btn-sm{height:26px;font-size:var(--text-xs);padding:0 var(--space-2)}

/* ===== tags / chips / kbd ===== */
.tag{display:inline-flex;align-items:center;gap:var(--space-1);height:21px;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:var(--weight-medium);border:1px solid transparent;white-space:nowrap;vertical-align:middle}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag-neutral{background:var(--neutral-tint);color:var(--neutral-tint-text);border-color:var(--border)}
.tag-info{background:var(--info-tint);color:var(--info-tint-text)}
.tag-success{background:var(--success-tint);color:var(--success-tint-text)}
.tag-warning{background:var(--warning-tint);color:var(--warning-tint-text)}
.tag-danger{background:var(--danger-tint);color:var(--danger-tint-text)}
.tag-success::before{content:"✓";width:auto;height:auto;background:none;border-radius:0;font-weight:700;line-height:1}
.tag-danger::before{content:"⊘";width:auto;height:auto;background:none;border-radius:0;font-weight:700;line-height:1}
.tag-draft{background:transparent;color:var(--text-2);border:1px dashed var(--border-input)}
.tag-draft::before{background:transparent;border:1px solid currentColor;width:5px;height:5px}
.chip{display:inline-flex;align-items:center;gap:var(--space-1);height:19px;padding:0 var(--space-2);border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--neutral-tint);color:var(--text-3);font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);white-space:nowrap;vertical-align:middle;text-decoration:none}
.chip b{color:var(--text-2);font-weight:700}
a.chip{text-decoration:underline;text-decoration-color:var(--border-input)}
kbd{display:inline-block;min-width:18px;padding:0 var(--space-1);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius-xs);background:var(--surface-2);font:var(--weight-regular) var(--text-2xs)/16px var(--font-mono);text-align:center}
.reason{display:inline-flex;align-items:center;height:18px;padding:0 var(--space-1);border-radius:var(--radius-xs);background:var(--warning-tint);color:var(--warning-tint-text);font-size:var(--text-2xs);white-space:nowrap;vertical-align:middle}

/* ===== layout: 3-column workbench ===== */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--inspector-w);min-height:calc(100vh - var(--topbar-h))}
.shell.nav-collapsed{grid-template-columns:var(--nav-w-min) minmax(0,1fr) var(--inspector-w)}
.shell.no-inspector{grid-template-columns:var(--nav-w) minmax(0,1fr) 0}
.shell.nav-collapsed.no-inspector{grid-template-columns:var(--nav-w-min) minmax(0,1fr) 0}
.nav{border-right:1px solid var(--nav-line);background:var(--nav-surface);padding:var(--space-5) var(--space-2);position:sticky;top:var(--topbar-h);align-self:start;max-height:calc(100vh - var(--topbar-h));overflow:auto;color:var(--on-nav);min-height:calc(100vh - var(--topbar-h))}
.nav a{display:flex;align-items:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--on-nav);text-decoration:none;font-size:var(--text-sm);transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--surface-hover)}}
.nav a[aria-current="page"]{background:var(--nav-selected);font-weight:var(--weight-medium);box-shadow:inset 3px 0 0 var(--accent-text)}
.nav a .cnt{margin-left:auto;font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);color:var(--on-nav-2);font-variant-numeric:tabular-nums}
.nav a .ico{width:16px;flex:none;color:var(--on-nav-2);font-family:var(--font-mono);font-size:var(--text-2xs);text-align:center}
.nav .collapse{margin-top:var(--space-3);width:100%;justify-content:flex-start;gap:var(--space-2);padding:0 var(--space-2)}
.nav .ico svg{display:block}
.keys{font:var(--weight-regular) var(--text-2xs)/1.8 var(--font-mono);color:var(--text-3)}
.nav-collapsed .nav a span:not(.ico){display:none}
.main{min-width:0;padding:var(--space-5) var(--gutter) var(--space-10)}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-4)}
.page-head h1{font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.page-head .sub{color:var(--text-2);font-size:var(--text-xs);flex-basis:100%;max-width:var(--measure)}
.inspector{border-left:1px solid var(--border);background:var(--surface);position:sticky;top:var(--topbar-h);align-self:start;max-height:calc(100vh - var(--topbar-h));overflow:auto;display:flex;flex-direction:column}
.no-inspector .inspector{display:none}
.insp-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.insp-head h2{font-size:var(--text-md);font-weight:var(--weight-semibold);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-body{padding:var(--space-4);display:grid;gap:var(--space-4);font-size:var(--text-sm)}
.insp-body h3{font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-2)}
.insp-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:var(--space-3) var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.insp-empty{padding:var(--space-6) var(--space-4);color:var(--text-2);font-size:var(--text-sm)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:var(--text-sm)}
.kv dt{color:var(--text-2)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ba{width:100%;font-size:var(--text-xs)}
.ba th{text-align:left;color:var(--text-3);font-weight:var(--weight-medium);padding:2px var(--space-1)}
.ba td{padding:2px var(--space-1);vertical-align:top;overflow-wrap:anywhere}
.ba td.changed{background:var(--warning-tint);border-radius:var(--radius-xs)}
.ba td.mono{font-size:var(--text-2xs)}

/* ===== cards / grids ===== */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-1)}
.card > h2,.card > h3{font-size:var(--text-md);font-weight:var(--weight-medium);margin-bottom:var(--space-2)}
.card .hint{font-size:var(--text-xs);color:var(--text-2);max-width:var(--measure)}
.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stack{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.stat{display:grid;gap:var(--space-1);text-align:left;cursor:pointer;border:1px solid var(--border);background:var(--paper);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.stat:hover{background:var(--surface-hover)}}
.stat[aria-pressed="true"]{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}
.stat .lbl{font-size:var(--text-xs);color:var(--text-2)}
.stat .big{font:var(--weight-semibold) var(--text-2xl)/1.1 var(--font-mono);font-variant-numeric:tabular-nums}
.stat .amt{font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--text-2)}

/* ===== sum strip ===== */
.sum{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-1)}
.sum h2{font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:var(--space-3)}
.sum-bar{display:flex;height:8px;border-radius:var(--radius-xs);overflow:hidden;gap:2px;background:var(--surface-2)}
.sum-bar > span{display:block;height:100%}
.sum-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-4);font-size:var(--text-xs);color:var(--text-2)}
.sum-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:var(--space-2)}
.sum-eq{margin-top:var(--space-3);font:var(--weight-regular) var(--text-xs)/1.6 var(--font-mono);color:var(--text-2);overflow-wrap:anywhere;padding-top:var(--space-3);border-top:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.sum-eq .ok{color:var(--success)}.sum-eq .bad{color:var(--danger);font-weight:var(--weight-semibold)}

/* ===== bars (reason workload / charts) ===== */
.bars{display:grid;gap:var(--space-1);font-size:var(--text-xs)}
.bars .b{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 3ch;gap:var(--space-2);align-items:center}
.bars .b span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .b i{display:block;height:10px;background:var(--viz-1);border-radius:2px;min-width:2px}
.bars .b em{font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);text-align:right;font-style:normal}
.checks{display:grid;gap:var(--space-1);font-size:var(--text-xs)}
.checks li{display:flex;gap:var(--space-2);align-items:flex-start}
.checks .ok::before{content:"✓";color:var(--success);font-weight:var(--weight-semibold)}
.checks .bad::before{content:"✗";color:var(--danger);font-weight:var(--weight-semibold)}
.checks .na::before{content:"○";color:var(--text-3)}
.checks .ok::before,.checks .bad::before,.checks .na::before{width:1em;flex:none;font-family:var(--font-mono)}

/* ===== tables ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.toolbar input[type=search],.toolbar select,.field input:not([type=checkbox]):not([type=radio]),.field select{height:var(--control-h);padding:0 var(--space-2);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--text-sm);max-width:100%}
.toolbar input[type=search]{min-width:160px;flex:1 1 160px}
.toolbar .showing{font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--text-3);margin-left:auto}
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper);box-shadow:var(--shadow-1)}
table.data{width:100%;font-size:var(--text-sm)}
table.data th,table.data td{height:var(--row-h);padding:0 var(--space-4);text-align:left;border-bottom:1px solid var(--hairline);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
table.data thead th{position:sticky;top:0;background:var(--surface-2);color:var(--text-2);font-size:var(--text-2xs);font-weight:var(--weight-semibold);z-index:1;letter-spacing:var(--tracking-caps);text-transform:uppercase;border-bottom:1px solid var(--border)}
table.data th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-xs)}
table.data th button:focus-visible{outline:var(--border-focus-width) solid var(--focus);outline-offset:3px;border-radius:var(--radius-xs)}
table.data th[aria-sort] button::after{content:"↑";font-size:10px;color:var(--accent-text)}
table.data th[aria-sort="descending"] button::after{content:"↓"}
table.data tbody tr{cursor:pointer}
@media (hover:hover) and (pointer:fine){table.data tbody tr:hover{background:var(--surface-hover)}}
table.data tbody tr[aria-selected="true"]{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent-text)}
table.data tbody tr:focus-visible{outline:var(--border-focus-width) solid var(--focus);outline-offset:-2px}
table.data td.actions{text-align:right}
table.data td.sticky,table.data th.sticky{position:sticky;left:0;background:var(--surface);z-index:1}
table.data thead th.sticky{background:var(--surface-2);z-index:2}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.empty-row{text-align:center;color:var(--text-2);height:72px}
.row-flash{animation:flash var(--flash-dur) var(--ease-out) 1}
@keyframes flash{from{background-color:var(--accent-tint)}to{background-color:transparent}}
.pager{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-2)}

/* ===== review queue ===== */
.queue-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}
.progress{flex:1 1 160px;height:6px;background:var(--surface-2);border-radius:var(--radius-xs);overflow:hidden}
.progress i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:0 50%;transition:transform var(--dur-base) var(--ease-out)}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-3)}
.filters button{height:24px;padding:0 var(--space-2);border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface);font-size:var(--text-2xs);cursor:pointer;white-space:nowrap}
.filters button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent-text);color:var(--accent-tint-text)}
.queue{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper);overflow:hidden;box-shadow:var(--shadow-1)}
.queue li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--hairline);cursor:pointer;min-height:var(--row-h)}
.queue li:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){.queue li:hover{background:var(--surface-hover)}}
.queue li[aria-selected="true"]{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent-text)}
.queue li:focus-visible{outline:var(--border-focus-width) solid var(--focus);outline-offset:-2px}
.queue li.decided{border-left:2px solid var(--success);color:var(--text-2)}
.queue li .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm)}
.queue li .who small{color:var(--text-3);font-size:var(--text-2xs)}
.queue li .reasons{display:flex;flex-wrap:wrap;gap:var(--space-1);grid-column:2;font-size:var(--text-2xs)}
.queue li .amt{font:var(--weight-regular) var(--text-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;grid-row:span 2;align-self:center}
.queue li .amt.undo-wrap{font-family:var(--font-sans)}
.review-card{display:grid;gap:var(--space-3)}
.review-card .head{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-2)}
.review-card .head .pos{margin-left:auto;font-family:var(--font-mono)}
.review-card .merchant{font-size:var(--text-lg);font-weight:var(--weight-medium)}
.review-card .raw{font:var(--weight-regular) var(--text-xs)/1.3 var(--font-mono);color:var(--text-3);overflow-wrap:anywhere}
.review-card .line{font-size:var(--text-sm);color:var(--text-2)}
.review-card .acts{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--border)}
.review-card .keys{font:var(--weight-regular) var(--text-2xs)/1.8 var(--font-mono);color:var(--text-3)}
.field{display:grid;gap:var(--space-1);font-size:var(--text-xs);color:var(--text-2)}
.check{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-xs);color:var(--text-2)}
.suggest{border:1px dashed var(--border-input);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

/* ===== empty / error / toast / dialog / drawer ===== */
.empty{border:1px dashed var(--border-input);border-radius:var(--radius-md);padding:var(--space-10) var(--space-4);text-align:center;color:var(--text-2);display:grid;gap:var(--space-2);justify-items:center;background:var(--paper)}
.empty h2,.empty h3{font-size:var(--text-xl);color:var(--text)}
.empty p{max-width:var(--measure)}
.error{border:1px solid var(--danger);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);display:grid;gap:var(--space-2)}
.error h3{font-size:var(--text-md);color:var(--danger)}
.toasts{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-toast);display:grid;gap:var(--space-2);max-width:min(420px,calc(100vw - 2*var(--gutter)))}
.toast{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);display:flex;gap:var(--space-3);align-items:center;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.toast.enter{opacity:0;transform:translateY(var(--motion-distance))}
.toast.leave{opacity:0;transition-duration:var(--dur-exit)}
.toast[role=alert]{border-color:var(--danger)}
dialog{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-2);padding:var(--space-5);max-width:min(560px,calc(100vw - 2*var(--gutter)));overscroll-behavior:contain}
dialog::backdrop{background:var(--overlay)}
dialog h2{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}
dialog .acts{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}
dialog table{font-size:var(--text-sm)}dialog td{padding:2px var(--space-3) 2px 0}
.drawer-mask{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-overlay)}
.drawer{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(420px,100vw);background:var(--surface);border-left:1px solid var(--border);z-index:var(--z-drawer);overflow:auto;box-shadow:var(--shadow-2);transform:translateX(0);transition:transform var(--dur-slow) var(--ease-soft)}

/* ===== landing ===== */
.landing{max-width:760px;margin:0 auto;display:grid;gap:var(--space-6);padding-top:var(--space-6)}
.landing h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold)}
.landing .lede{font-size:var(--text-lg);color:var(--text-2);line-height:var(--leading-lede);max-width:var(--measure)}
.drop{border:1px dashed var(--border-input);border-radius:var(--radius-md);padding:var(--space-6) var(--space-4);display:grid;gap:var(--space-2);color:var(--text-2);font-size:var(--text-sm);text-align:center}
.drop.over{background:var(--accent-tint);border-color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);font-size:var(--text-xs);color:var(--text-2)}
.steps b{display:block;color:var(--text);font-family:var(--font-mono);margin-bottom:var(--space-1)}
.refuse{font-size:var(--text-xs);color:var(--text-2)}
.refuse code{background:var(--surface-2);padding:0 4px;border-radius:var(--radius-xs)}

/* ===== charts ===== */
.chart{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-1)}
.chart .ch-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.chart h3{font-size:var(--text-md);font-weight:var(--weight-medium)}
.chart .ch-head p{font-size:var(--text-xs);color:var(--text-2);flex-basis:100%}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-md);padding:2px;margin-left:auto;border:1px solid var(--border);gap:2px}
.seg button{height:24px;padding:0 var(--space-2);border:0;border-radius:3px;background:transparent;font-size:var(--text-2xs);cursor:pointer;color:var(--text-2)}
.seg button[aria-checked="true"]{background:var(--paper);color:var(--text);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--border-input);font-weight:var(--weight-medium)}
.chart svg{width:100%;height:auto;font-family:var(--font-mono);font-size:10px}
.chart svg text{fill:var(--text-2)}
.chart svg .grid{stroke:var(--viz-grid)}
.chart svg .bar{fill:var(--viz-1)}
.chart svg .bar.unknown{fill:url(#hatch)}
.chart svg .axis{stroke:var(--viz-axis)}

/* ===== footer (honest block) ===== */
.honest{border-top:1px solid var(--band-line);font-size:var(--text-xs);color:var(--on-band-2);background:var(--band);padding:var(--space-10) var(--gutter) var(--space-12)}
.honest dl{margin-block:0}
.honest dt{font-weight:var(--weight-semibold);color:var(--on-band);font-family:var(--font-sans);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-2)}
.honest dd{margin:0;max-width:var(--measure);line-height:var(--leading-relaxed)}

/* ===== rules ===== */
.rule-edit{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.pending{border:1px solid var(--warning);background:var(--surface);border-radius:var(--radius-md);padding:var(--space-4);display:grid;gap:var(--space-2);position:sticky;bottom:var(--space-4);box-shadow:var(--shadow-2)}

/* ===== breakpoints ===== */
@media (max-width:1199px){
  .shell,.shell.no-inspector,.shell.nav-collapsed,.shell.nav-collapsed.no-inspector{grid-template-columns:var(--nav-w-min) minmax(0,1fr)}
  .nav a span:not(.ico),.nav .collapse{display:none}
  .inspector{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(420px,100vw);z-index:var(--z-drawer);box-shadow:var(--shadow-2);max-height:none;transform:translateX(100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease-soft),visibility 0s linear var(--dur-slow)}
  .inspector.open{transform:translateX(0);visibility:visible;transition-delay:0s}
  .no-inspector .inspector{display:flex}
}
@media (max-width:899px){
  .shell,.shell.no-inspector,.shell.nav-collapsed,.shell.nav-collapsed.no-inspector{grid-template-columns:minmax(0,1fr)}
  .nav{display:none}
  .nav.open{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;border-right:0;border-top:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:var(--z-drawer);box-shadow:var(--shadow-2)}
  .nav.open a span:not(.ico){display:inline}
  .inspector{width:100vw}
}
@media (max-width:639px){
  .queue li{grid-template-columns:minmax(0,1fr) auto}
  .queue li .reasons{grid-column:1}
  .main{padding-top:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){.row-flash{animation:none}}
@media print{.topbar,.nav,.inspector,.toasts,.toolbar,.honest{display:none!important}.shell{display:block}}

/* ===== Callback Desk additions: console layout, phone frame, bubbles, calendar, stepper ===== */
.subbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-2) var(--gutter);border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:var(--topbar-h);z-index:var(--z-sticky)}
.subbar select{height:var(--control-h);padding:0 var(--space-2);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--text-sm);max-width:100%}
.clock{font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--text-2);white-space:nowrap}
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border);margin-bottom:var(--space-3)}
.tabs a{padding:var(--space-2) var(--space-3);text-decoration:none;color:var(--text-2);font-size:var(--text-sm);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent-text);font-weight:var(--weight-medium)}
.console{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(300px,400px);gap:var(--space-4);align-items:start}
.col h2{font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-2);display:flex;gap:var(--space-2);align-items:center}
.col h2 .you{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:var(--weight-regular);font-family:var(--font-mono)}
.phone{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden;max-width:360px;box-shadow:var(--shadow-1)}
.phone .ph-head{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);align-items:center;font-size:var(--text-xs)}
.phone .ph-head b{font-family:var(--font-mono)}
.chan-tabs{display:flex;gap:2px;padding:var(--space-1) var(--space-2) 0}
.chan-tabs button{height:26px;padding:0 var(--space-2);border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--surface-2);font-size:var(--text-2xs);cursor:pointer;color:var(--text-2)}
.chan-tabs button[aria-selected="true"]{background:var(--paper);color:var(--text);font-weight:var(--weight-medium)}
.chan-tabs button .n{font-family:var(--font-mono);margin-left:4px}
.thread{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-height:260px;max-height:52vh;overflow:auto;border-top:1px solid var(--border)}
.bubble{position:relative;max-width:85%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:var(--leading-normal);overflow-wrap:anywhere}
.bubble time{display:block;margin-top:var(--space-1);font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);color:var(--text-3)}
.bubble.from-customer{align-self:flex-start;background:var(--neutral-tint);border-bottom-left-radius:var(--radius-xs)}
.bubble.from-business{align-self:flex-end;background:var(--accent-tint);color:var(--accent-tint-text);border-bottom-right-radius:var(--radius-xs)}
.bubble.is-draft{align-self:flex-end;background:transparent;border:1px dashed var(--border-input);color:var(--text-2)}
.bubble.is-rejected{align-self:flex-end;background:transparent;border:1px solid var(--border);color:var(--text-3);text-decoration:line-through}
.bubble.is-system{align-self:center;background:transparent;color:var(--text-3);font-size:var(--text-2xs);font-family:var(--font-mono);text-align:center;max-width:100%}
.channel{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-3);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-0-5)}
.composer{padding:var(--space-3);border-top:1px solid var(--border);display:grid;gap:var(--space-2)}
.composer .row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.stepper{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-2);flex-wrap:wrap}
.stepper .pos{font-family:var(--font-mono);white-space:nowrap}
.stepper .say{flex-basis:100%}
/* narrow screens: the replay controls in one bar pinned to the bottom, reachable from every column tab */
.stepper-bar{position:sticky;bottom:0;z-index:var(--z-sticky);justify-content:space-between;margin-top:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md) var(--radius-md) 0 0;padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));box-shadow:var(--shadow-1)}
.stepper:not(.stepper-bar):empty{display:none}
html{scroll-padding-bottom:var(--sticky-bottom,0px)}
@media (max-width:767px){.subbar{position:static}}   /* only the top bar stays pinned on a phone: the scenario bar was 147–207px tall */
.qcard{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper);padding:var(--space-3) var(--space-4);display:grid;gap:var(--space-2);margin-bottom:var(--space-2);box-shadow:var(--shadow-1)}
.qcard.await{border-left:3px solid var(--accent-text)}
.qcard.blocked{border-color:var(--danger)}
.qcard .qh{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--text-xs);color:var(--text-2)}
.qcard .txt{font-size:var(--text-sm);overflow-wrap:anywhere}
.qcard .acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.qcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-3);font-size:var(--text-xs)}
.qcard dt{color:var(--text-3)}.qcard dd{margin:0}
.guide{border:1px solid var(--accent-text);background:var(--accent-tint);color:var(--accent-tint-text);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);margin-bottom:var(--space-3)}
.state dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.state dt{color:var(--text-3)}.state dd{margin:0;overflow-wrap:anywhere}
.guardline{font:var(--weight-regular) var(--text-xs)/1.5 var(--font-mono);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface-2)}
.guardline.no{color:var(--danger);background:var(--danger-tint)}
.cal{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--paper);padding:var(--space-3);box-shadow:var(--shadow-1)}
.cal .ch{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--text-xs);color:var(--text-2);margin-bottom:var(--space-2)}
.cal table{width:100%;table-layout:fixed;font-size:var(--text-2xs);border-collapse:separate;border-spacing:2px}
.cal th{font-weight:var(--weight-medium);color:var(--text-2);padding:2px 0;text-align:center}
.cal th.today{color:var(--accent-text)}
.cal td{height:16px;background:var(--surface-2);border-radius:2px;position:relative}
.cal td.open{background:var(--surface);border:1px solid var(--border)}
.cal td.past{opacity:.45}
.cal td[role=gridcell]{cursor:pointer}
.cal td.sel{outline:2px solid var(--focus);outline-offset:-2px}
.cal td.ev{background:var(--accent-tint);border-left:3px solid var(--accent)}
.cal td.ev.pending{background:transparent;border:1px dashed var(--border-input)}
.cal td.ev.failed{background:var(--danger-tint);border-left-color:var(--danger)}
.cal td.hour{background:transparent;color:var(--text-3);text-align:right;padding-right:4px;font-family:var(--font-mono)}
.cal .legend{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-2xs);color:var(--text-3);margin-top:var(--space-2)}
.loglist{font:var(--weight-regular) var(--text-xs)/1.6 var(--font-mono);display:grid;gap:2px}
.loglist div{display:grid;grid-template-columns:5ch 8ch minmax(0,1fr);gap:var(--space-2);padding:2px 0;border-bottom:1px solid var(--hairline)}
.loglist span{min-width:0;overflow-wrap:anywhere}
.guardline,.qcard .txt,.state dd{overflow-wrap:anywhere}
.loglist .no{color:var(--danger)}
.loglist .sim{color:var(--accent-text)}
.scen{display:grid;gap:var(--space-1)}
.scen h2{font-size:var(--text-sm);font-weight:var(--weight-medium);margin:var(--space-3) 0 var(--space-1)}
.scen .row{display:grid;grid-template-columns:2ch 3ch minmax(0,1fr) auto auto;gap:var(--space-2);align-items:center;padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--paper);font-size:var(--text-xs)}
.scen .row.fail{border-color:var(--danger)}
.scen .row .n{font-family:var(--font-mono);color:var(--text-3)}
.scen .row .what{color:var(--text-2)}
.config{max-width:720px;display:grid;gap:var(--space-4)}
.config .card .field{margin-top:var(--space-2)}
.config .ro{background:var(--surface-2);border-color:var(--border)}
.savebar{position:sticky;bottom:var(--space-4);display:flex;justify-content:flex-end;gap:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-2)}
@media (max-width:1199px){.console{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.console .col-cal{grid-column:1 / -1}}
@media (max-width:899px){.console{grid-template-columns:minmax(0,1fr)}.console .col{display:none}.console .col.active{display:block}.phone{max-width:none}}
.mtabs{display:none;gap:2px;margin-bottom:var(--space-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px}   /* sunken like .seg, so it takes the same 1px line */
.mtabs button{flex:1;height:32px;border:0;border-radius:3px;background:transparent;font-size:var(--text-xs);cursor:pointer;color:var(--text-2)}
.mtabs button[aria-selected="true"]{background:var(--paper);color:var(--text);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--border-input)}
/* the tabs show only when the columns stack; this rule has to come after the base .mtabs rule, or the tabs stay hidden and the
   staff desk and calendar columns cannot be reached on a phone (the case from the first commit until 2026-09-16) */
@media (max-width:899px){.mtabs{display:flex}}
@media (pointer:coarse){.mtabs button{height:var(--touch-min)}}
/* ===== Family layer v3.1: band surfaces, pressed and focus states, touch targets =====
   The band (top bar, signature panel, footer) is the anchor surface: deep in Plaster and Ink, a whiter paper in
   Paper. Everything on it uses the --on-band pair; focus rings and text selection get their own colours there
   because --focus and --selection-bg are solved for light surfaces. Hover sits behind (hover:hover) so a tap on
   a touch screen does not leave a stuck highlight. */
.topbar .pill{border-color:var(--band-line);color:var(--on-band-2);background:transparent;font-weight:var(--weight-regular)}
.topbar .pill::before{background:var(--warning)}
.topbar .pill-live::before{background:var(--text-3)}
.topbar .pill-live[data-ok="true"]::before{background:var(--success)}
.topbar .pill-live[data-ok="false"]::before{background:var(--danger)}
.topbar .btn,.plate .btn{background:transparent;border-color:var(--band-line);color:var(--on-band)}
.topbar .btn-ghost,.plate .btn-ghost{border-color:transparent}
.topbar .btn-primary,.plate .btn-primary{background:var(--on-band);border-color:var(--on-band);color:var(--band)}
@media (hover:hover) and (pointer:fine){
  .topbar .btn:hover,.plate .btn:hover{background:var(--band-line);border-color:var(--band-line)}
  .topbar .btn-primary:hover,.plate .btn-primary:hover{background:var(--on-band-2);border-color:var(--on-band-2)}
}
.topbar :focus-visible,.plate :focus-visible,.honest :focus-visible{outline-color:var(--on-band)}
/* Focus scrolls clear of the sticky top bar: a control reached by Tab, or <main> after the skip link, never lands under
   the bar (2026-09-16: the ring of <main> and most of a button sat behind it). A product whose sticky
   chrome is taller than the bar, or wraps, sets --sticky-top to its measured height. */
html{scroll-padding-top:calc(var(--sticky-top,var(--topbar-h)) + var(--space-3))}
/* Native checkboxes and radios take the palette's accent instead of the browser's blue (contrast:
   checked fill against its surface 4.55–16.17:1, tick against the fill 4.71–16.34:1 across the three palettes, light and dark). */
:root{accent-color:var(--accent)}
.topbar ::selection,.plate ::selection,.honest ::selection{background:var(--on-band-2);color:var(--band)}
.honest-in{max-width:var(--content-max);margin:0 auto;display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.honest a{color:var(--on-band);text-decoration-color:var(--band-line)}
.honest code{color:var(--on-band)}
/* Pressed: the whole control scales, content included (reads as pushed in, not moved). Reduced motion keeps a
   colour change instead of the scale. */
.stat:active,.filters button:active,.seg button:active,.chan-tabs button:active,.mtabs button:active{transform:scale(var(--press-scale))}
@media (prefers-reduced-motion:reduce){.btn:active,.stat:active,.filters button:active,.seg button:active,.chan-tabs button:active,.mtabs button:active{transform:none;background:var(--neutral-tint)}}
/* Touch: 44px targets on coarse pointers. */
@media (pointer:coarse){.btn,.nav a{min-height:var(--touch-min)}.btn-icon{min-width:var(--touch-min)}}
/* Text fields: the edge darkens and a same-hue ring appears; the outline is for keyboard focus. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-tint)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--border-focus-width) solid var(--focus);outline-offset:1px}
::placeholder{color:var(--text-3)}
/* Numeric columns: header text and figures share one right edge, by rule rather than by accident. */
table.data th.num,table.data td.num{text-align:right}
table.data th.num button{justify-content:flex-end;width:100%}
/* Top bar by width. Controls never shrink; only the tagline truncates. The right-hand
   group starts after the Demo pill. Compact (≤767px): mark, name, short pill, the one control the product needs, Settings.
   Middle (768–1023px): add light/dark, GitHub and help. Full (≥1024px): everything. Never hidden: mark, name, pill, Settings. */
.topbar > :not(.brand):not(.spacer){flex:none;white-space:nowrap}
.topbar .spacer{display:none}
.topbar .pill{margin-inline-end:auto}
.topbar .brand{flex:0 1 auto;min-width:0}
.topbar .brand b{flex:none}
#nl-settings-button{flex:none}
@media (pointer:coarse){#nl-settings-button{min-width:var(--touch-min);min-height:var(--touch-min)}}
@media (max-width:767px){.topbar #theme,.topbar .gh,.topbar #help,.topbar .brand span,.topbar .pill .long{display:none}.topbar .brand b{font-size:var(--text-lg)}}
@media (min-width:768px) and (max-width:1023px){.topbar .brand span,.topbar .pill .long{display:none}}
/* ===== end of family layer v3.1 ===== */