/* HENRY v2 — black, editorial, quiet. Tokens from the design handoff. */
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bg: #000; --ink: #f2f1ed; --ink2: #e2e1dc; --ink3: #c9c8c3; --label: #a9a8a3; --muted: #8d8c88;
  --menu: #f2f1ed; --menu-ink: #0b0b0b; --menu-muted: #5e5d59; --danger: #d9796b;
  --rule: rgba(242,241,237,.18); --rule2: rgba(242,241,237,.16); --rule3: rgba(242,241,237,.14);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: -apple-system, 'SF Pro Text', Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --sat: max(env(safe-area-inset-top), 20px);
  --sab: env(safe-area-inset-bottom);
  --top: calc(var(--sat) + 62px);
  --side: 28px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overscroll-behavior: none; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: #7a7975; }
.noscroll { scrollbar-width: none; } .noscroll::-webkit-scrollbar { display: none; }
[hidden] { display: none !important; }

#app { position: relative; width: 100%; max-width: 480px; height: var(--app-h, 100dvh); margin: 0 auto; overflow: hidden; background: var(--bg); container-type: inline-size; }
@media (min-width: 481px) { #app { border-left: 1px solid var(--rule3); border-right: 1px solid var(--rule3); } }

/* ---------- type ---------- */
.label { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.label-s { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.title { font-family: var(--serif); font-size: 58px; line-height: .95; font-weight: 400; }

/* ---------- chrome ---------- */
.wordmark { position: absolute; top: calc(var(--sat) + 19px); left: var(--side); z-index: 8; font-family: var(--serif); font-size: 19px; letter-spacing: .32em; color: var(--ink); pointer-events: none; transition: opacity .25s; }
.menu-btn { position: absolute; top: calc(var(--sat) + 8px); right: 22px; z-index: 8; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; transition: border-color .3s; }
.menu-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: width .4s, height .4s, background .3s; }
body.menu-open .menu-btn { border-color: var(--menu-ink); }
body.menu-open .menu-btn i { width: 20px; height: 20px; background: var(--menu-ink); }
body.menu-open .wordmark, body.hide-mark .wordmark { opacity: 0; }

.screen { position: absolute; inset: 0; }

/* ---------- menu ---------- */
.menu { position: absolute; inset: 0; z-index: 5; background: var(--menu); color: var(--menu-ink); display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--top) var(--side) max(54px, calc(var(--sab) + 24px)); clip-path: circle(0px at var(--mx, 90%) var(--my, 84px)); transition: clip-path .55s cubic-bezier(.7,0,.2,1); visibility: hidden; }
body.menu-open .menu { clip-path: circle(150% at var(--mx, 90%) var(--my, 84px)); visibility: visible; }
body.menu-closing .menu { visibility: visible; }
.menu-mark { font-family: var(--serif); font-size: 30px; letter-spacing: .32em; }
.menu-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border-top: 1px solid rgba(11,11,11,.18); text-align: left; color: var(--menu-ink); }
.menu-row b { display: block; font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: -.01em; }
.menu-row small { display: block; margin-top: 6px; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menu-muted); }
.menu-row .ind { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--menu-ink); }
.menu-row.on .ind { background: var(--menu-ink); }

/* ---------- today ---------- */
.pager { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.page { position: relative; flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: var(--bg); }
.page .pat { position: absolute; left: 0; right: 0; top: max(250px, calc(100% - 152.3cqw)); height: 216.8cqw; pointer-events: none; }
.page .scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.page .content { position: relative; padding: var(--top) var(--side) 110px; display: flex; flex-direction: column; }
.overview .content { gap: 22px; }
.intro { font-family: var(--serif); font-size: 58px; line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
.intro.pending { font: 500 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.index { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--rule); }
.index button { display: flex; align-items: baseline; justify-content: space-between; height: 56px; border-bottom: 1px solid var(--rule); color: var(--ink); text-align: left; }
.index .l { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.index .n { font: 400 11px var(--mono); color: var(--muted); }
.index .nm { font-family: var(--serif); font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index .tg { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); white-space: nowrap; margin-left: 12px; }

.th-name { font-family: var(--serif); font-size: 84px; line-height: .9; letter-spacing: -.02em; margin-top: 14px; overflow-wrap: anywhere; }
.th-motto { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.15; color: var(--ink3); text-wrap: balance; max-width: 300px; margin-top: 10px; }
.says { margin-top: 40px; }
.msg { font-family: var(--serif); font-size: 31px; line-height: 1.1; text-wrap: pretty; margin-top: 10px; transition: opacity .3s; }
.try { margin-top: 28px; }
.sug { font-size: 17px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; margin-top: 8px; transition: opacity .3s; }
.busy .msg, .busy .sug { opacity: .35; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pill { height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(242,241,237,.4); background: rgba(0,0,0,.25); color: var(--ink); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pill.keep { border-color: var(--ink); }
.pill.keep.on { background: var(--ink); color: #000; }
.pill:disabled { opacity: .6; }

.pager-foot { position: absolute; left: var(--side); right: var(--side); bottom: max(20px, var(--sab)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 2; }
.pager-foot .pl { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.dots { display: flex; gap: 4px; pointer-events: auto; }
.dots button { width: 20px; height: 28px; display: flex; align-items: center; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); }
.dots .on i { background: var(--ink); }

/* ---------- ask henry ---------- */
.ask { display: flex; flex-direction: column; padding: 0 0 max(24px, calc(var(--sab) + 6px)); }
/* The title scrolls away with the conversation; the menu button is the only fixed chrome. */
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--top) 0 22px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sat) + 38px), #000 calc(var(--sat) + 60px)); mask-image: linear-gradient(to bottom, transparent calc(var(--sat) + 38px), #000 calc(var(--sat) + 60px)); }
.ask-head { padding: 0 var(--side) 18px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--rule); }
.msgs { padding: 22px var(--side) 0; display: flex; flex-direction: column; gap: 22px; }
.m { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.m.me { align-items: flex-end; }
.who { font: 400 10px var(--mono); letter-spacing: .14em; color: var(--muted); }
.m.me .bubble { max-width: 80%; font-size: 17px; line-height: 1.4; padding: 11px 15px; border: 1px solid rgba(242,241,237,.3); border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m.hy .txt { font-family: var(--serif); font-size: 25px; line-height: 1.15; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.notes-toggle { align-self: flex-start; display: flex; gap: 8px; align-items: baseline; font: 400 10px var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.notes-toggle i { font-style: normal; color: var(--label); }
.notes-list { display: flex; flex-direction: column; gap: 8px; padding-left: 10px; border-left: 1px solid var(--rule); }
.note { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.4; color: var(--label); }
.note span { flex: 1; }
.note button { flex: none; font: 500 10px var(--mono); letter-spacing: .12em; color: var(--label); padding: 2px 0; }
.note.undone span { text-decoration: line-through; opacity: .6; }
.thinking { font: 400 12px var(--mono); letter-spacing: .14em; color: var(--muted); }
.day-sep { align-self: center; font: 400 10px var(--mono); letter-spacing: .14em; color: var(--muted); padding-top: 6px; }
.earlier { align-self: center; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--label); padding: 6px 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--side) 14px; }
.chips button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(242,241,237,.35); font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.chips { transition: opacity .25s; }
.chips.waiting { opacity: 0; pointer-events: none; }
.chips button.fu { text-transform: none; letter-spacing: .02em; }
.composer { margin: 0 var(--side); display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--ink); }
.composer textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; padding: 13px 0 12px; border: 0; outline: none; background: none; font-size: 17px; line-height: 1.35; resize: none; display: block; }
.composer button { height: 48px; padding: 0 4px; font: 500 12px var(--mono); letter-spacing: .14em; }

/* theme suggestions from Henry */
.prop { width: 100%; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(242,241,237,.35); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.prop.done { border-color: var(--rule); }
.prop .pf { display: flex; flex-direction: column; gap: 3px; }
.prop .pf small { font: 400 10px var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.prop .pf span { font-size: 16px; line-height: 1.4; color: var(--ink2); }
.prop .pf span.it { font-family: var(--serif); font-style: italic; font-size: 20px; }
.prop .pa { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.prop .pa button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(242,241,237,.4); font: 500 11px var(--mono); letter-spacing: .12em; }
.prop .pa button.on { background: var(--ink); color: #000; border-color: var(--ink); }
.prop .pa span { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--muted); }

/* ---------- journal + settings ---------- */
/* Content fades out under the wordmark and menu button instead of colliding with them. */
.journal, .page .scroll { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sat) + 38px), #000 calc(var(--sat) + 60px)); mask-image: linear-gradient(to bottom, transparent calc(var(--sat) + 38px), #000 calc(var(--sat) + 60px)); }
.journal { overflow-y: auto; padding: var(--top) var(--side) max(60px, calc(var(--sab) + 40px)); display: flex; flex-direction: column; }
.journal .title { margin-top: 14px; }
.tonight { display: block; width: 100%; text-align: left; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule2); }
.tonight b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; margin-top: 8px; }
.entries { display: flex; flex-direction: column; margin-top: 22px; }
.entry { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-top: 1px solid var(--rule2); text-align: left; width: 100%; }
.entry .meta { display: flex; justify-content: space-between; font: 400 11px var(--mono); letter-spacing: .12em; color: var(--label); text-transform: uppercase; }
.entry .txt { font-family: var(--serif); font-size: 25px; line-height: 1.12; text-wrap: pretty; }
.entry .nt { font-size: 15px; line-height: 1.45; color: var(--label); font-style: italic; text-wrap: pretty; }
.empty { font-size: 15px; line-height: 1.45; color: var(--muted); padding: 22px 0; border-top: 1px solid var(--rule2); }

.set-title { font-family: var(--serif); font-size: 44px; line-height: 1; margin-top: 44px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.sec { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--label); margin: 30px 0 12px; text-transform: uppercase; }
.sec.first { margin: 24px 0 2px; }
.help { font-size: 13px; line-height: 1.45; color: var(--muted); margin-bottom: 6px; }
.trow { display: flex; flex-direction: column; padding: 12px 0 10px; border-bottom: 1px solid var(--rule3); }
.trow .top { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.trow .nm { font-family: var(--serif); font-size: 26px; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow.off .nm { color: var(--muted); }
.trow input { height: 34px; border: 0; outline: none; background: none; color: var(--ink3); font-size: 15px; padding: 0; width: 100%; }
.addrow { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule3); }
.addrow input { flex: 1; min-width: 0; height: 56px; border: 0; outline: none; background: none; font-family: var(--serif); font-size: 26px; padding: 0; }
.addrow button, .textbtn { height: 44px; font: 500 12px var(--mono); letter-spacing: .14em; }
.sw { display: block; flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; border: 1.5px solid var(--ink); }
.sw i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); transition: left .2s, background .2s; }
.sw.on { background: var(--ink); } .sw.on i { left: 21px; background: #000; }
.seg { display: flex; border: 1px solid rgba(242,241,237,.35); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; height: 38px; border-radius: 999px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.seg button.on { background: var(--ink); color: #000; }
.seg-note { font-size: 14px; line-height: 1.45; color: var(--label); margin-top: 10px; }
.prow { display: flex; align-items: center; gap: 12px; min-height: 60px; width: 100%; border-bottom: 1px solid var(--rule3); padding: 6px 0; text-align: left; }
.prow .t { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.prow .t span:first-child { font-size: 16px; }
.prow .t span:last-child { font-size: 13px; color: var(--muted); }
.prow select { position: absolute; inset: 0; opacity: 0; width: 100%; }
.prow.sel { position: relative; }
.prow .val { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--label); text-align: right; max-width: 55%; overflow-wrap: anywhere; }
.profile { display: block; width: 100%; text-align: left; font-size: 15px; line-height: 1.5; color: var(--ink3); font-style: italic; padding: 10px 0 14px; border-bottom: 1px solid var(--rule3); }
.mem { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--rule3); }
.mem small { font: 400 10px var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.mem span { font-size: 15px; line-height: 1.4; color: var(--ink2); }
.more-mem { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--label); padding: 14px 0 0; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: 28px; font: 500 12px var(--mono); letter-spacing: .12em; }
.foot .danger { color: var(--danger); }
.version { margin-top: 26px; font: 400 10px var(--mono); letter-spacing: .14em; color: #5e5d59; }

/* ---------- sheet ---------- */
.scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.scrim.show { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 88%; overflow-y: auto; background: #0d0d0d; border-top: 1px solid var(--rule);
  padding: 26px var(--side) max(28px, calc(var(--sab) + 12px)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sheet.show { transform: none; }
.sheet h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.sheet .quote { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin: 10px 0 4px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.field input, .field textarea { border: 0; border-bottom: 1px solid var(--rule); outline: none; background: none; font-size: 17px; line-height: 1.4; padding: 8px 0; resize: none; }
.field textarea { min-height: 84px; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--ink); }
.patpick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.patpick button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(242,241,237,.35); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.patpick button.on { background: var(--ink); color: #000; }
.sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.sheet-actions .grp { display: flex; gap: 18px; }
.sheet-actions button { font: 500 12px var(--mono); letter-spacing: .14em; height: 40px; }
.sheet-actions .primary { border: 1px solid var(--ink); border-radius: 999px; padding: 0 18px; }
.sheet-actions .danger { color: var(--danger); }

/* ---------- toast ---------- */
.toast { position: absolute; left: var(--side); right: var(--side); bottom: calc(max(20px, var(--sab)) + 44px); z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.toast span { background: var(--ink); color: #000; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; text-align: center; }
.toast.show span { opacity: 1; transform: none; }

/* ---------- login ---------- */
.login { position: absolute; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; justify-content: space-between; padding: var(--top) var(--side) max(54px, calc(var(--sab) + 24px)); }
.login .mark { font-family: var(--serif); font-size: 30px; letter-spacing: .32em; }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login .title { margin-bottom: 18px; }
.login .row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); }
.login input { flex: 1; min-width: 0; height: 52px; border: 0; outline: none; background: none; font-size: 19px; }
.login button { font: 500 12px var(--mono); letter-spacing: .14em; height: 52px; }
.login .err { min-height: 18px; font: 400 11px var(--mono); letter-spacing: .1em; color: var(--danger); text-transform: uppercase; }

.boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 19px; letter-spacing: .32em; color: var(--ink); }

/* conversations */
.conv-btn { display: none; position: absolute; top: calc(var(--sat) + 19px); left: var(--side); z-index: 8; min-height: 32px; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--ink); }
body.on-ask:not(.menu-open):not(.desk) .conv-btn { display: block; }
body.on-ask:not(.desk) .wordmark { opacity: 0; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule3); }
.conv-top .ct { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--ink3); }
.conv-top .ct small { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.conv-top button { flex: none; min-height: 32px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--label); }
.empty-chat { font-family: var(--serif); font-size: 25px; line-height: 1.2; color: var(--muted); padding-top: 8px; }
.conv-list { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--rule); }
.conv-row { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.conv-row .ct { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.conv-row small { font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.conv-row .pv { font-size: 14px; line-height: 1.4; color: var(--label); }
.conv-row.on .ct::after { content: ' ·'; color: var(--label); }
.rail-conv-head { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; }
.rail-conv-head button { min-height: 32px; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--ink); }
.rail-convs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.rail-convs > button { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 12px 12px; border-bottom: 1px solid var(--rule3); border-left: 2px solid transparent; text-align: left; }
.rail-convs > button.on { border-left-color: var(--ink); }
.rail-convs .ct { font-size: 15px; line-height: 1.35; color: var(--ink2); }
.rail-convs small { font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rail-convs .help { padding: 12px 0; }
.rail-all { padding: 12px 0; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--label); text-align: left; }

/* =====================================================================
   Desktop (≥1024px, body.desk): top navigation, split Today, Ask with a
   side rail, Journal beside Settings, centered sheets.
   The phone layout above is unchanged.
   ===================================================================== */
.topbar, .ask-rail { display: none; }
.ask-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.jfilter { display: none; }

body.desk { --top: 56px; --bar: 84px; }
body.desk #app { max-width: none; border: 0; }
body.desk .wordmark, body.desk .menu-btn, body.desk .menu { display: none; }
body.desk .screen { top: var(--bar); }
body.desk .journal, body.desk .page .scroll, body.desk .thread { -webkit-mask-image: none; mask-image: none; }

.topbar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar, 84px); z-index: 8; align-items: center; justify-content: space-between; gap: 16px; padding: 0 56px; border-bottom: 1px solid var(--rule3); background: var(--bg); }
body.desk .topbar { display: flex; }
.tb-mark { font-family: var(--serif); font-size: 22px; letter-spacing: .32em; }
.tb-nav { display: flex; gap: 36px; }
.tb-nav button { min-height: 44px; padding: 8px 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); border-bottom: 1px solid transparent; }
.tb-nav button:hover { color: var(--ink); }
.tb-nav button[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

/* Today */
.dtoday { position: absolute; inset: 0; display: flex; }
.d-left { flex: 0 1 540px; min-width: 380px; padding: 56px 56px 32px; display: flex; flex-direction: column; gap: 26px; overflow-y: auto; box-sizing: border-box; }
.d-left .intro { font-size: 64px; }
.d-left .index button { height: 64px; }
.d-left .index .nm { font-size: 34px; }
.d-left .index button:not(.on) .nm { color: var(--muted); }
.d-left .index .tg { display: flex; align-items: center; gap: 14px; }
.d-left .index .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); box-sizing: border-box; }
.d-left .index button.on .dot { background: var(--ink); }
.d-foot { margin-top: auto; font: 400 10px var(--mono); letter-spacing: .14em; color: #5e5d59; text-transform: uppercase; }
.d-right { flex: 1; min-width: 0; position: relative; overflow: hidden; border-left: 1px solid var(--rule3); }
.dpat { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; pointer-events: none; }
.d-content { position: relative; height: 100%; overflow-y: auto; box-sizing: border-box; padding: 56px 72px 120px; max-width: 960px; display: flex; flex-direction: column; }
.d-content .th-name { margin: 16px 0 0; font-weight: 400; font-size: 112px; }
.d-content .th-motto { margin: 12px 0 0; font-size: 26px; max-width: 560px; }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
.dgrid .msg { font-size: 36px; margin-top: 12px; }
.dgrid .sug { font-size: 18px; line-height: 1.5; margin-top: 12px; }
.dgrid .actions { margin-top: 22px; }
.dgrid .pill { height: 44px; padding: 0 18px; }
.d-nav { position: absolute; left: 72px; right: 56px; bottom: 24px; display: flex; justify-content: space-between; pointer-events: none; }
.d-nav button { pointer-events: auto; min-height: 44px; font: 500 12px var(--mono); letter-spacing: .14em; color: var(--ink3); }
.d-nav button:hover { color: var(--ink); }
@media (max-width: 1240px) {
  .dgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .d-content .th-name { font-size: 96px; }
}

/* Ask Henry */
body.desk .ask { flex-direction: row; padding: 0; }
body.desk .ask-rail { display: flex; flex-direction: column; gap: 14px; flex: 0 0 380px; box-sizing: border-box; padding: 56px 48px 40px 56px; border-right: 1px solid var(--rule3); overflow-y: auto; }
.ask-rail .title { font-size: 64px; }
.rail-sec { margin-top: 40px; }
.rail-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.rail-list button { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.rail-list button:hover .nm { color: var(--ink2); }
.rail-list .nm { font-family: var(--serif); font-size: 24px; }
.rail-list .tx { font-size: 14px; line-height: 1.45; color: var(--label); }
body.desk .ask-head { display: none; }
body.desk .ask-main { --col: max(56px, calc((100% - 820px) / 2)); padding-bottom: 32px; }
body.desk .thread { padding-top: 40px; }
body.desk .msgs { padding: 0 var(--col); gap: 28px; }
body.desk .m.hy .txt { font-size: 30px; max-width: 680px; }
body.desk .m.me .bubble { font-size: 18px; max-width: 520px; }
body.desk .chips { padding: 16px var(--col) 14px; flex-wrap: wrap; overflow: visible; }
body.desk .composer { margin: 0 var(--col); }
body.desk .composer textarea { font-size: 18px; }

/* Journal + Settings */
body.desk .journal { display: grid; grid-template-columns: minmax(0, 1fr) 460px; padding: 0; }
body.desk .j-main { padding: 56px 56px 72px; min-width: 0; }
body.desk .j-side { padding: 56px 56px 72px 48px; border-left: 1px solid var(--rule3); }
body.desk .set-title { margin-top: 0; }
.jhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
body.desk .jfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.jfilter button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(242,241,237,.35); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.jfilter button.on { background: var(--ink); color: #000; border-color: var(--ink); }
body.desk .tonight { margin-top: 36px; }
body.desk .entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin-top: 8px; }
body.desk .entry { border-top: 0; border-bottom: 1px solid var(--rule2); padding: 26px 0; }
body.desk .entry .txt { font-size: 28px; }
body.desk .empty { grid-column: 1 / -1; }

/* Sheets become centered dialogs */
body.desk .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 560px; max-height: 80%; border: 1px solid var(--rule); border-radius: 18px; opacity: 0; transform: translate(-50%, -46%); transition: transform .25s, opacity .25s; }
body.desk .sheet.show { opacity: 1; transform: translate(-50%, -50%); }

/* Sign-in */
body.desk .login { padding: 18vh calc(50% - 260px) 14vh; }