/* Tail pages, dialogs and empty states (thread ui-tail). Loaded after components.css; tokens only, no new colours. */

/* page head: the lead is a quiet sentence, not a second title */
.ph{gap:4px}
.ph-lead{font-size:var(--fs-body);line-height:1.5;color:var(--ink-3)}
.ph-lead[data-tone]{color:var(--ink-2)}
.ph-meta{color:var(--ink-3);font-size:var(--fs-meta)}
.sec-t{font-size:var(--fs-small);font-weight:var(--w-med);color:var(--ink-2);letter-spacing:0}
.sec[data-level="1"]>.sec-h .sec-t{color:var(--ink);font-weight:var(--w-bold)}
.sec-n{color:var(--ink-3)}

/* empty states: plain, centred in a page, a soft box inside a list */
.empty{padding:var(--s4) 0;font-size:var(--fs-small);line-height:1.5;color:var(--ink-3)}
.empty-t{color:var(--ink);font-weight:var(--w-bold);font-size:var(--fs-title);margin-bottom:4px}
.list>.empty,.sec>.empty,.blks>.empty{padding:var(--s5) var(--s4);border:1px dashed var(--line-2);border-radius:var(--r-l);text-align:center}
.empty[data-kind=page]{max-width:42ch;margin:0 auto;padding:18vh var(--s4) var(--s7);border:0}
.empty[data-kind=page]::before{content:"";display:block;width:40px;height:40px;margin:0 auto var(--s4);border:1.5px solid var(--line-2);border-radius:50%}
.empty[data-kind=loading]{padding:var(--s5) 0}

/* inbox: a dot instead of a "New" chip */
.inb-new{width:8px;height:8px;padding:0;border-radius:50%;background:var(--accent,var(--info));font-size:0;color:transparent}

/* tables and stat tiles: quieter rules and heads */
.tbl th{font-weight:var(--w-med);color:var(--ink-3);border-bottom:1px solid var(--line)}
.tbl td{border-top:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.stat dt{color:var(--ink-3);font-size:var(--fs-meta)}

/* dialogs and floating notes */
.dlg{padding:24px 24px 20px;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e2)}
.dlg h2{font-size:var(--fs-title);margin-bottom:var(--s1)}
.dlg p{color:var(--ink-3);line-height:1.5}
.dlg-a{margin-top:var(--s4)}
.dlg::backdrop{background:oklch(0% 0 0 / .32)}
.fb-sent,.new-ver,.fb-card{border-color:var(--line);border-radius:var(--r-xl);font-size:var(--fs-small)}
.new-ver{padding:10px 12px 10px 16px}
.tip{border-radius:var(--r-m);padding:5px 8px;font-size:var(--fs-meta)}

/* timeline: the how-to text is small print */
.cvp-note{padding:6px var(--s4);border-bottom:0;font-size:var(--fs-micro);line-height:1.4}
.cvp-bar{border-bottom:1px solid var(--line)}
/* secrets: room between the header and the parts, and a readable hint */
.page>.ph+.stack.secrets{margin-top:var(--s5)}
.secrets .sec-lead{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s3);max-width:68ch}
.secrets .frow .fmsg{margin:0}

/* side question (/btw): drawn like the chat it sits in, a composer-style card with the person's words in a bubble */
.ba{background:var(--surface);box-shadow:var(--e1);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:10px 14px 12px;gap:10px;font-size:inherit}
.ba-top{font-size:var(--fs-small)}
.ba-h{color:var(--ink-2)}
.ba-top>.meta{color:var(--ink-3)}
.ba-p{gap:4px}
.ba-p b{font-size:var(--fs-small);color:var(--ink)}
.ba-p[data-me]{justify-items:end}
.ba-p[data-me] b{display:none}
.ba-p[data-me] .ba-b{max-width:min(78%,560px);padding:8px 14px;border-radius:var(--r-xl);background:var(--sunken);box-shadow:none}
.ba-wait{font-size:var(--fs-small);color:var(--ink-3)}
.ba-in{height:auto;padding:8px 2px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;font-size:inherit}
.ba-in:focus,.ba-in:focus-visible{outline:none;box-shadow:none;border-color:var(--line)}
.ba:focus-within{border-color:color-mix(in oklch,var(--ink-3) 70%,var(--line-2));box-shadow:var(--e1),0 0 0 3px var(--accent-bg)}

/* ---- a conversation exported as a transcript (js/ui/export.js): only print shows it ---- */
.xp{display:none}
@media print{
  html.xp-on body>*:not(.xp){display:none!important}
  html.xp-on,html.xp-on body{background:#fff!important;color:#111;height:auto!important;overflow:visible!important}
  html.xp-on .xp{display:block;font-family:var(--font);font-size:10pt;line-height:1.5;color:#111;max-width:none}
  @page{size:auto;margin:18mm 18mm 18mm}
  .xp-head{margin:0 0 14pt;padding:0 0 8pt;border-bottom:1px solid #ddd}
  .xp-head h1{font-size:16pt;line-height:1.25;font-weight:600;margin:0 0 4pt}
  .xp-meta{font-size:9pt;color:#666;margin:0}
  .xp-day{font-size:9pt;font-weight:600;color:#666;margin:14pt 0 8pt;break-after:avoid}
  .xp-turn{display:grid;grid-template-columns:3cm minmax(0,1fr);column-gap:.5cm;margin:0 0 9pt;orphans:3;widows:3}
  .xp-who{text-align:right}
  .xp-who b{display:block;font-weight:600;overflow-wrap:anywhere}
  .xp-who time{display:block;font-size:8pt;color:#888}
  .xp-says>*:first-child,.xp-says .md>*:first-child{margin-top:0}
  .xp-says>*:last-child,.xp-says .md>*:last-child{margin-bottom:0}
  .xp-says p{margin:0 0 5pt}
  .xp-says pre,.xp-says code{font-size:8.5pt;white-space:pre-wrap;overflow-wrap:anywhere}
  .xp-says pre{border-left:2px solid #ccc;padding:2pt 0 2pt 8pt;background:none}
  .xp-says img{max-width:100%}
  .xp-turn[data-stage] .xp-who b{font-weight:400;color:#777}
  .xp-turn[data-stage] .xp-says{color:#555}
  .xp-files{font-size:9pt;color:#666}
}
.rw-line,.rw-sudo{flex:1;min-width:0;overflow-wrap:anywhere}
.rw .field{margin-top:var(--s3)}
.msg-word{margin-top:var(--s1)}