/* ═══════════════════════════════════════════════════════════════════════════
   LIAISON DESIGN SYSTEM · COMPONENTS
   Load after tokens.css. Every value here comes from a token.
   Section 1: CONTROLS (approved 2026-09-24)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--control-thumb:#FFFFFF;--control-thumb-shadow:0 2px 6px rgba(0,0,0,.3)}

.icon{width:20px;height:20px;flex-shrink:0}
/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-5);border:0;border-radius:var(--radius-pill);font:var(--type-button);letter-spacing:var(--track-button);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease,color .15s ease;-webkit-tap-highlight-color:transparent}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent-fg);outline-offset:3px}
.btn-primary{background:linear-gradient(135deg,var(--accent-hover),var(--accent-fill));color:var(--accent-on);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent-glow) 80%,transparent)}
.btn-primary:hover:not(:disabled){background:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-secondary:hover:not(:disabled){background:var(--surface-2)}
.btn-tertiary{background:transparent;color:var(--accent-fg);padding:0 var(--space-3)}
.btn-tertiary:hover:not(:disabled){background:var(--accent-tint)}
.btn-danger{background:var(--danger-fill);color:var(--danger-on)}
.btn-danger-quiet{background:var(--danger-tint);color:var(--danger-fg)}
.btn-sm{min-height:36px;padding:0 var(--space-4)}
.btn-sm::before{content:'';position:absolute;inset:-4px}
.btn-block{width:100%}
/* Continue with Google: Google's own button, not ours (Sir, 2026-10-02: "follow Google's own
   branding rules", developers.google.com/identity/branding-guidelines, last updated 2026-07-07).
   Google reviews the app against it. Its values are Google's, so they are named here, not taken from
   our tokens: dark fill #131314, 1px inside stroke #8E918F, text #E3E3E3; light fill #FFFFFF,
   stroke #747775, text #1F1F1F; Google Sans Medium 14/20; 12px before the G, 10px after it, 12px
   after the label. The G is the standard colour G (/design/google-g.png) at 20px, never resized,
   recoloured or put on a coloured tile. Hover and press lay the text colour over the fill at 8% and
   12%, as Google's own button does. Width is ours (full width, under Google's 400px). */
:root{--google-fill:#131314;--google-stroke:#8E918F;--google-text:#E3E3E3;--google-g:20px}
html[data-theme="light"]{--google-fill:#FFFFFF;--google-stroke:#747775;--google-text:#1F1F1F}
.btn-google{gap:10px;padding:0 12px;background:var(--google-fill);color:var(--google-text);box-shadow:inset 0 0 0 1px var(--google-stroke);font:500 14px/20px 'Google Sans',var(--font-sans);letter-spacing:normal;overflow:hidden}
.btn-google::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--google-text);opacity:0;transition:opacity .2s;pointer-events:none}
.btn-google:hover:not(:disabled)::after{opacity:.08}
.btn-google:active:not(:disabled)::after{opacity:.12}
.btn-google .btn-google-g{width:var(--google-g);height:var(--google-g);flex-shrink:0;display:block}
.btn-google:disabled{opacity:.38;background:var(--google-fill);color:var(--google-text);box-shadow:inset 0 0 0 1px var(--google-stroke)}
.btn-icon{width:var(--tap);height:var(--tap);padding:0;background:transparent;color:var(--text-2);border-radius:50%;flex-shrink:0;aspect-ratio:1/1}
.btn-icon:hover:not(:disabled){background:var(--surface-2);color:var(--text-1)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--surface-2);color:var(--text-4);box-shadow:none;cursor:not-allowed}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spin{animation-duration:1.6s}}

/* Fields */
.field{display:grid;gap:var(--space-1-5)}
.field-label{font:var(--type-callout);color:var(--text-2)}
.input{box-sizing:border-box;width:100%;min-height:44px;padding:0 var(--space-3-5,14px);border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line-3);color:var(--text-1);font:var(--type-body);font-size:max(1rem,16px);outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{min-height:88px;padding:var(--space-2-5,10px) var(--space-3-5,14px);resize:vertical;line-height:1.5}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--accent-fg);box-shadow:0 0 0 3px var(--accent-tint)}
.input[aria-invalid="true"]{border-color:var(--danger-fg)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-tint)}
.input:disabled{background:var(--surface-3);color:var(--text-4);border-color:var(--line-2);cursor:not-allowed}
.help{font:var(--type-footnote);color:var(--text-3);display:flex;gap:var(--space-1);align-items:flex-start}
.help.err{color:var(--danger-fg)}
.help .icon{width:16px;height:16px;margin-top:2px}
.search{position:relative}
.search .icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search .input{min-height:40px;border-radius:var(--radius-pill);padding-left:calc(var(--space-3) + 26px)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.select .icon{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}

/* Switch */
.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap);cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{position:relative;width:52px;height:32px;border-radius:var(--radius-pill);background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--line-3);flex-shrink:0;transition:background-color .2s ease,box-shadow .2s ease}
.switch .thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--control-thumb);box-shadow:var(--control-thumb-shadow);transition:transform .25s cubic-bezier(.34,1.4,.64,1),background-color .2s}
.switch input:checked + .track{background:var(--accent-fill);box-shadow:none}
.switch input:checked + .track .thumb{transform:translateX(20px);background:var(--accent-on)}
.switch input:focus-visible + .track{outline:2px solid var(--accent-fg);outline-offset:3px}
.switch input:disabled + .track{opacity:.45}
/* Checkbox and radio */
.check{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{width:22px;height:22px;border-radius:var(--radius-xs);box-shadow:inset 0 0 0 1.5px var(--line-3);display:grid;place-items:center;flex-shrink:0;transition:background-color .15s,box-shadow .15s;color:transparent}
.check .box svg{width:16px;height:16px}
.check input:checked + .box{background:var(--accent-fill);box-shadow:none;color:var(--accent-on)}
.check.radio .box{border-radius:50%}
.check.radio input:checked + .box{background:transparent;box-shadow:inset 0 0 0 7px var(--accent-fill)}
.check input:focus-visible + .box{outline:2px solid var(--accent-fg);outline-offset:3px}
/* Segmented */
.segmented{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;min-height:var(--tap);border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-1)}
.segmented button{border:0;background:transparent;border-radius:var(--radius-pill);padding:0 var(--space-3);white-space:nowrap;font:var(--type-button);color:var(--text-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.segmented button[aria-checked="true"]{background:var(--surface-1);color:var(--text-1);box-shadow:inset 0 1px 0 var(--edge),0 2px 8px -2px rgba(0,0,0,.35),0 0 0 1px var(--line-1)}
html[data-theme="dark"] .segmented button[aria-checked="true"]{background:var(--surface-3)}
.segmented button:focus-visible{outline:2px solid var(--accent-fg);outline-offset:1px}
/* Badges, pills, chips */
.pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-2);border-radius:var(--radius-pill);font:var(--type-caption);letter-spacing:var(--track-caption);white-space:nowrap}
.pill .icon{width:14px;height:14px}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--accent-on);font:var(--type-caption);font-weight:700;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-xs);background:var(--surface-3);color:var(--text-2);font:var(--type-caption)}
.chip{display:inline-flex;align-items:center;gap:var(--space-1-5);min-height:36px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--text-2);font:var(--type-callout);font-weight:600;cursor:pointer;position:relative}
.chip::before{content:'';position:absolute;inset:-4px}
.chip[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-fg);box-shadow:inset 0 0 0 1.5px var(--accent-fg)}
.chip:focus-visible{outline:2px solid var(--accent-fg);outline-offset:3px}
.chip.rec{color:var(--rec-fg);box-shadow:inset 0 0 0 1.5px var(--rec-line);background:var(--rec-tint)}
.chip.rec[aria-pressed="true"]{background:var(--rec);color:var(--rec-on);box-shadow:none}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.ident{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border:0;border-radius:var(--radius-pill);background:var(--rec-tint);box-shadow:inset 0 0 0 1.5px var(--rec-line);font:var(--type-callout);font-weight:600;color:var(--rec-fg);cursor:pointer;position:relative}
.ident::before{content:'';position:absolute;inset:-4px}
.ident[aria-pressed="true"]{background:var(--rec);color:var(--rec-on);box-shadow:none}
.ident[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--rec-on)}
.ident:focus-visible{outline:2px solid var(--accent-fg);outline-offset:3px}
.ident i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--font-sans);font-style:normal}


/* ═══════════════════════════════════════════════════════════════════════════
   Section 2: CONTAINERS (approved 2026-09-24)
   Cards are see-through glass (.glass-card from tokens.css), exactly as today.
   ═══════════════════════════════════════════════════════════════════════════ */
.card{border:1px solid var(--line-1);border-radius:var(--radius-lg);padding:var(--space-5)}
.card-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.card-head > .t-headline{flex:1;min-width:0}
.card-foot{display:flex;gap:var(--space-2);margin-top:var(--space-5)}
.card-foot .btn{flex:1}
.card.is-link{cursor:pointer;transition:transform .12s ease,border-color .15s}
.card.is-link:active{transform:scale(.985)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.stats span{display:block;color:var(--text-3)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.tile{border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:var(--space-4)}
.tile .v{font:var(--type-stat-1);letter-spacing:var(--track-stat-1);font-variant-numeric:tabular-nums;margin:var(--space-2) 0 var(--space-1)}
.icon-tile{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent-fg);flex-shrink:0}

/* Collapsible card */
.fold{padding:0;overflow:hidden}
.fold-head{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:64px;padding:var(--space-4) var(--space-5);border:0;background:transparent;color:var(--text-1);cursor:pointer;text-align:left}
.fold-head .chev{color:var(--text-3);transition:transform .25s ease;margin-left:auto}
.fold[data-open="true"] .chev{transform:rotate(180deg)}
.fold-body{display:none}
.fold[data-open="true"] .fold-body{display:block}
.fold[data-open="true"] .fold-preview{display:none}

/* Lists: grouped inside a card */
.list{border:1px solid var(--line-1);border-radius:var(--radius-lg);overflow:hidden}
.list-row{position:relative;display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:60px;padding:var(--space-3) var(--space-4);border:0;background:transparent;color:var(--text-1);text-align:left;font:inherit;cursor:pointer}
.list-row + .list-row::before{content:'';position:absolute;top:0;right:0;left:var(--inset,var(--space-4));height:1px;background:var(--line-1)}
.list-row.has-lead{--inset:calc(var(--space-4) + 40px + var(--space-3))}
.list-row:active{background:var(--surface-2)}
.list-row .main{flex:1;min-width:0}
.list-row .main > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .main > span{color:var(--text-3)}
.list-row .trail{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;color:var(--text-3)}
.kv > div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line-1)}
.kv > div:last-child{border-bottom:0}
.kv span{color:var(--text-3)}
.kv b{text-align:right;font-weight:600}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 .875rem/1 var(--font-sans);background:var(--rec-tint,var(--surface-3));color:var(--rec-fg,var(--text-2));box-shadow:inset 0 0 0 1.5px var(--rec-line,var(--line-2));flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Sheets and dialogs (use with .glass-thick) */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);max-height:92dvh;display:flex;flex-direction:column;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:var(--space-2) auto 0;flex-shrink:0}
.sheet-head{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-2) var(--space-5)}
.sheet-head .ttl{flex:1;padding-top:var(--space-2)}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-5) var(--space-4);display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:var(--space-4);align-content:start}
.sheet-foot{padding:var(--space-3) var(--space-5) var(--space-5);border-top:1px solid var(--line-1);display:flex;gap:var(--space-2)}
.sheet-foot .btn{flex:1}
@media (min-width:640px){.sheet{left:50%;top:50%;bottom:auto;width:min(520px,calc(100vw - 48px));max-height:min(80dvh,760px);border-radius:var(--radius-xl);transform:translate(-50%,-50%)}.sheet .grab{display:none}}
.dialog{position:fixed;left:50%;top:50%;z-index:var(--z-sheet);width:min(320px,calc(100vw - 48px));transform:translate(-50%,-50%);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-5) var(--space-5);text-align:center}
.dialog p{margin:var(--space-2) 0 var(--space-5);color:var(--text-2)}
.dialog .acts{display:grid;gap:var(--space-2)}
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim)}

/* Lead sheet parts */
.health-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-2)}
.health-track{height:10px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden}
.health-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--health-lo),var(--health-mid) 55%,var(--health-hi));background-size:calc(100% / var(--h,.5)) 100%;width:calc(var(--h,.5) * 100%)}
.health-track.sm{height:6px}
.dash-add{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:52px;border-radius:var(--radius-lg);border:1.5px dashed var(--line-3);background:transparent;color:var(--accent-fg);font:var(--type-button);cursor:pointer}
.dash-add.sm{width:auto;min-height:40px;padding:0 var(--space-5);border-radius:var(--radius-pill)}
.timeline{position:relative;display:grid;gap:var(--space-4);padding-left:var(--space-8)}
.timeline::before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--line-2);border-radius:1px}
.tl-event{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-2)}
.tl-event .node{position:absolute;left:calc(-1 * var(--space-8));top:2px;width:20px;height:20px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--rec-line)}
.tl-event .node::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--rec)}
.tl-event .body > span{display:block;color:var(--text-3)}
.tl-event .fee{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--success-fg);font:var(--type-body-strong);font-variant-numeric:tabular-nums}
.tl-event .acts .btn-icon{width:36px;height:36px;color:var(--text-3)}
.outcome{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.outcome .btn{min-height:52px;background:var(--rec);color:var(--rec-on);box-shadow:0 10px 24px -12px var(--rec)}
.outcome .btn.connected{color:#FFFFFF} /* named exception: see colour.md */
.miles{position:relative;height:8px;border-radius:4px;background:var(--surface-3)}
.miles > b{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--success-fill)}
.miles > i{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--surface-1);box-shadow:inset 0 0 0 2px var(--line-3);transform:translateX(-50%)}
.miles > i.hit{background:var(--success-fill);box-shadow:none}
.sticky-mini{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line-1);transform:translateY(-110%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.sticky-mini.on{transform:none}
:root{--health-lo:#E5534B;--health-mid:#F5A524;--health-hi:#3FB984}