/* Type and flow layer — the ONLY place type sizes are set.
   One scale, shared with the H Alpha AI home page (halpha_dralpha_home.html):
   t1 11 · t2 13 · t3 15 · t4 18 · t5 24/28 · t6 36/48.
   Faces: Playfair Display (display), DM Sans (text), DM Mono (labels) — the house set.
   Card engraving sizes live with the card artwork and are not part of the page scale. */
:root{--t1:11px;--t2:13px;--t3:15px;--t4:18px;--t5:24px;--t6:36px;
  --serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.8,.24,1)}
@media(min-width:761px){:root{--t5:28px;--t6:48px}}
body{font-size:var(--t3);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit}

/* Labels: DM Mono at t1, one tracking value. */
.house-label,.preview-label,.eyebrow,.gate-footer,.side-label,.desk-label,.demo-badge,.answer-tag,th,.source-chip>span{font-family:var(--mono);font-size:var(--t1);font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.demo-badge{letter-spacing:.1em;padding:4px 8px}
.gateway>.eyebrow,.welcome>.eyebrow,.dialog-top .eyebrow{letter-spacing:.18em}

/* Display: Playfair Display. */
.invitation h1,.welcome h2,.answer-body h3,.metric strong,.evidence-dialog h2,.side-brand>span{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.invitation h1,.welcome h2{font-size:var(--t6);line-height:1.1;text-wrap:balance}
.answer-body h3,.metric strong,.evidence-dialog h2{font-size:var(--t5);line-height:1.2}
.side-brand>span{font-size:var(--t4)}

/* Landing. */
.gateway>.eyebrow{margin-bottom:12px}
.invitation{padding-top:12px}
.invitation p{font-size:var(--t3);line-height:1.6;margin:12px auto 24px;max-width:34em}
.enter-label{font-size:var(--t3);gap:24px;min-height:50px;padding:0 24px;min-width:248px}
.enter-arrow{font-size:var(--t4)}
.gate-footer{letter-spacing:.12em;padding:10px 0 12px}
.motion{font-size:var(--t2);font-family:var(--sans);letter-spacing:0;text-transform:none}

/* Sidebar. */
.workspace{grid-template-columns:264px minmax(0,1fr)}
.new-chat,.history-search input,.history-empty,.history-row,.explore-link,.library-button,.profile b,.text-button,#thread-heading,.trade-modes button,.composer-context,.answer-heading,.answer-actions button,.followup,.source-chip,.pending,.cost-bar,.answer-note,table,.metric small,.suggestion>span,.dialog-done,.source-library-item span,.evidence-dialog dl,.toast{font-size:var(--t2)}
.new-chat{gap:10px;padding:12px}
.new-chat>span,.history-search>span,.icon-button,.back-card,.send-button,.suggestion .suggestion-arrow{font-size:var(--t4)}
.new-chat kbd,.composer-hint,.demo-notice,.profile div>span{font-size:var(--t1);font-family:var(--sans);letter-spacing:.02em}
.history-search{margin:16px 0 24px}
.side-label{margin:0 8px 10px;letter-spacing:.14em}
.history-row{padding:9px 8px;line-height:1.45}
.history-row .history-glyph{font-size:var(--t2)}
.explore-link{padding:9px 8px;gap:10px}
.explore-link>span{font-size:var(--t3);width:18px}
.profile b{font-weight:500}
.profile div{gap:2px}

/* Header. */
.desk-header{height:68px}
.header-divider{font-size:var(--t3)}
#thread-heading{color:#b9bead;max-width:340px}

/* Welcome. */
.welcome{max-width:760px}
.welcome>.eyebrow{margin-top:4px}
.welcome h2{margin:12px 0 12px;text-align:center;max-width:16em}
.welcome-description{font-size:var(--t3);line-height:1.6;max-width:36em;color:#a3ab98}
.trade-modes{margin:28px 0 20px}
.trade-modes button{padding:8px 16px}
.suggestions{max-width:660px;gap:12px}
.suggestion{padding:16px 18px;gap:4px 12px}
.suggestion strong{font-size:var(--t3);font-weight:500;line-height:1.4}
.suggestion>span{line-height:1.5}

/* Composer. */
.composer-area{max-width:940px}
.composer-context{margin:0 2px 10px;gap:8px}
.composer textarea{font-size:var(--t3);line-height:1.6;min-height:48px}
.composer-bottom{margin-top:8px}
.send-button{width:36px;height:34px}
.send-button.stop{font-size:var(--t2)}
.demo-notice{margin:10px 0 0}

/* Conversation. */
.transcript{max-width:780px}
.message.user{font-size:var(--t3);line-height:1.6;padding:12px 18px}
.answer-heading{font-weight:500;gap:10px;margin-bottom:12px}
.answer-tag{letter-spacing:.1em;padding-left:10px}
.answer-body h3{margin:0 0 12px}
.answer-body p,.answer-body ul{font-size:var(--t3);line-height:1.7}
.answer-body p{margin:12px 0}
.answer-body h4{font-size:var(--t3);font-weight:600;margin:24px 0 6px;letter-spacing:0}
.answer-body ul{padding-left:18px}
.answer-metrics{margin:20px 0}
.metric{padding:16px;gap:6px}
.metric small{line-height:1.45}
th{letter-spacing:.08em;padding:12px 14px}
td{padding:12px 14px}
table{min-width:420px}
.answer-note{line-height:1.6!important;font-size:var(--t2)!important;padding:10px 14px!important}
.source-chip{padding:8px 10px;gap:8px}
.source-chip>span{letter-spacing:.04em}
.answer-actions{gap:20px}
.followup{padding:8px 12px;line-height:1.4;text-align:left}
.cost-bar{grid-template-columns:130px 1fr 84px}
.pending{margin-left:49px}

/* Dialog. */
.evidence-dialog h2{margin:16px 0}
.evidence-dialog p,.evidence-dialog li{font-size:var(--t3);line-height:1.65}
.evidence-dialog dl{grid-template-columns:120px 1fr;line-height:1.6}
.source-library-item b{font-size:var(--t3)}

/* ---------- Flow ---------- */
/* Card → workspace: the card comes forward and fades, the copy settles, then the desk assembles in reading order. */
.landing.leaving{opacity:1;transform:none;transition:none}
.landing.leaving .stage{transition:transform .52s var(--ease),opacity .46s ease;transform:scale(1.07);opacity:0}
.landing.leaving .invitation,.landing.leaving .gateway>.eyebrow{transition:opacity .26s ease,transform .3s var(--ease);opacity:0;transform:translateY(8px)}
.landing.leaving .masthead,.landing.leaving .gate-footer{transition:opacity .4s ease;opacity:0}
.landing.leaving .atmosphere{transition:opacity .52s ease;opacity:.35}
.workspace{animation:none}
.workspace.entering .sidebar{animation:slide-in .5s var(--ease) both}
.workspace.entering .desk-header{animation:fade .45s ease .06s both}
.workspace.entering .welcome>*,.workspace.entering .transcript{animation:rise .55s var(--ease) both}
.workspace.entering .welcome>*:nth-child(2){animation-delay:.1s}
.workspace.entering .welcome>*:nth-child(3){animation-delay:.14s}
.workspace.entering .welcome>*:nth-child(4){animation-delay:.18s}
.workspace.entering .welcome>*:nth-child(5){animation-delay:.22s}
.workspace.entering .welcome>*:nth-child(6){animation-delay:.27s}
.workspace.entering .welcome>*:nth-child(1){animation-delay:.06s}
.workspace.entering .composer-area{animation:rise .55s var(--ease) .3s both}
/* Workspace → card: the card returns from behind. */
.landing.returning .stage{animation:come-back .7s var(--ease) both}
.landing.returning .invitation,.landing.returning .gateway>.eyebrow{animation:rise .6s var(--ease) .12s both}
/* Welcome → first question. */
.welcome.leaving{transition:opacity .18s ease,transform .22s var(--ease);opacity:0;transform:translateY(-8px)}
.transcript.entering{animation:fade .3s ease both}
/* A new answer reads in, block by block; past answers render still. */
.message.assistant.fresh{animation:none}
.message.assistant.fresh .answer-heading{animation:fade .3s ease both}
.message.assistant.fresh .answer-body>*{animation:rise .42s var(--ease) both;animation-delay:calc(60ms + var(--i,0) * 55ms)}
.message.user{animation:rise .3s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes come-back{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- Short desktop screens ---------- */
@media(max-height:760px) and (min-width:761px){
  .invitation h1{font-size:var(--t5)}
  .invitation{padding-top:6px}.invitation p{margin:8px auto 16px}
  .welcome h2{font-size:var(--t5)}.trade-modes{margin:20px 0 16px}.suggestion{padding:12px 16px}
}
@media(max-height:760px) and (min-width:761px) and (min-height:640px){.invitation h1{font-size:36px}}

/* ---------- Tablet ---------- */
@media(max-width:1000px){.workspace{grid-template-columns:236px minmax(0,1fr)}.pending{margin-left:0}.cost-bar{grid-template-columns:110px 1fr 80px}}

/* ---------- Phone ---------- */
@media(max-width:760px){
  .house-label,.preview-label,.gate-footer{letter-spacing:.08em}
  .gateway>.eyebrow{letter-spacing:.14em;margin-bottom:8px}
  .invitation h1{font-size:var(--t6);line-height:1.08}
  .invitation p{font-size:var(--t3);margin:10px auto 20px;max-width:300px}
  .enter-label{min-width:0;width:min(100%,300px);min-height:52px}
  .gate-footer{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .sidebar{width:288px}
  .desk-header{height:60px}
  #thread-heading{max-width:120px}
  .demo-badge{letter-spacing:.06em;padding:3px 6px}
  .welcome{padding:28px 0 20px}
  .welcome h2{font-size:var(--t5);line-height:1.2;max-width:12em}
  .welcome-description{font-size:var(--t2)}
  .trade-modes{margin:20px 0 16px}
  .trade-modes button{padding:8px 12px}
  .suggestions{grid-template-columns:1fr;gap:8px}
  .suggestion{padding:12px 14px}
  .suggestion strong{font-size:var(--t2)}
  .suggestion>span{font-size:var(--t1)}
  /* iOS zooms any field under 16px on focus; this one value sits off-scale for that reason only. */
  .composer textarea{font-size:16px;line-height:1.5}
  .wide-only{display:none}
  .composer{position:relative;padding:10px 52px 10px 14px}
  .composer textarea{min-height:24px}
  .composer-hint{display:none}
  .composer-bottom{position:absolute;right:8px;bottom:8px;margin:0}
  .demo-notice{display:none}
  .composer-area{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .message.user{max-width:92%}
  .metric{padding:12px}
  .cost-bar{grid-template-columns:92px 1fr 76px}
  .answer-actions{gap:16px}
  .evidence-dialog{padding:20px}
  .evidence-dialog dl{grid-template-columns:96px 1fr}
}
@media(max-width:370px){
  .invitation h1{font-size:var(--t5);line-height:1.15}
  .preview-label{display:none}
  .header-actions .text-button{display:none}
  .suggestion strong{font-size:var(--t2)}
}
@media(prefers-reduced-motion:reduce){.landing.leaving .stage,.landing.leaving .invitation{transition:none}}