/* W3 (11 Nov): the browser on a laptop. One codebase and one set of components: this file only lays the same screens
   out for wider windows, from layout tokens (--d-* in theme.css; a look may override any of them). It holds no colors
   and no fonts of its own: every surface, ink, radius and face comes from the active look's tokens, so switching the
   look is still one setting and a fifth look needs no desktop CSS beyond tokens.
   Widths: phone below 768 px (unchanged), tablet from 768, desktop from 1024, wide from 1440.
   Rules that must beat a look's own rules start with #phone. web/desk.js adds the rail, the second pane, the keys. */

/* ---------- everywhere: things that exist only on a laptop are hidden; Home's two groups are one column ---------- */
.d-only, .rail-id, .rail-host, .rail-foot, .d-art { display: none; }
.hm-a, .hm-b, .d-cols, .d-col { display: contents; }
/* keyboard focus is always visible (a phone with a keyboard benefits too); a tap never shows it */
:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 3px; }
.jfield input:focus-visible, textarea:focus-visible, .field input:focus-visible { outline: 0; }
/* the overlays (Go to, Keyboard) at any width */
.dk-layer { position: absolute; inset: 0; z-index: 95; display: none; background: rgb(var(--ink-rgb) / .22); padding: 14vh 16px 16px; }
.dk-layer.on { display: block; }
.kp-in, .kh-in { width: min(560px, 100%); margin: 0 auto; background: var(--card); color: var(--ink); border-radius: var(--r-l); box-shadow: 0 0 0 .5px var(--hair), var(--sh-2); overflow: hidden; }
.kp-q { display: block; width: 100%; height: 60px; padding: 0 22px; border: 0; border-bottom: .5px solid var(--hair); background: transparent; color: var(--ink); font: 400 19px/1 var(--sys); outline: 0; }
.kp-l { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; }
.kp-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-s); text-align: left; color: var(--ink); }
.kp-r b { font-weight: 500; font-size: 15.5px; }
.kp-r small { margin-left: auto; font-size: 13px; color: var(--muted); }
.kp-r.on { background: rgb(var(--ink-rgb) / .07); }
.kp-m svg { display: block; width: 24px; height: 24px; }
.kp-none { padding: 14px; color: var(--muted); font-size: 15px; }
.kp-h { display: flex; gap: 6px; align-items: center; padding: 10px 18px; border-top: .5px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.kp-h kbd + kbd { margin-left: -2px; }
.kp-h kbd:not(:first-child) { margin-left: 10px; }
.kp-h kbd:nth-child(2) { margin-left: 2px; }
kbd { white-space: nowrap; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .35), 0 1px 0 rgb(var(--ink-rgb) / .12); font: 500 12px/1 var(--sys); color: var(--ink-2); background: var(--card); }
.kh-in { padding: 20px 24px 22px; }
.kh-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kh-top h3 { font: 400 30px/1 var(--serif); letter-spacing: -.01em; }
.kh-x { font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 .5px var(--hair); }
.kh-k { margin: 16px 0 6px; font: 500 var(--label-size)/1 var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.kh-r { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; min-height: 32px; font-size: 15px; color: var(--ink-2); }
.kh-ks { display: flex; gap: 4px; align-items: center; }
.kh-ks i { font-style: normal; font-size: 12px; color: var(--muted); margin: 0 2px; }

/* ================= tablet and up: the window, not a phone frame ================= */
@media (min-width: 768px) {
  body { background: var(--bone); display: block; }
  .phone { width: 100%; height: 100%; border-radius: 0 !important; box-shadow: none !important; }
  .phone::after { border-radius: 0; }
  :root { --top: 18px; --safe-b: 0px; }
  /* every screen reads at a comfortable width, centered; the scroll stays at the window's edge */
  #phone .scr > .nav, #phone .scr > .body, #phone .scr > .foot, #phone .scr > .cd-said { padding-left: max(var(--gut), calc((100% - var(--w, var(--d-read))) / 2)); padding-right: max(var(--gut), calc((100% - var(--w, var(--d-read))) / 2)); }
  #phone .scr > .foot { padding-bottom: 28px; }
  @media (max-width: 1023.98px) { #phone .tabbar:not(.off) { padding-left: max(0px, calc((100% - 560px) / 2)); padding-right: max(0px, calc((100% - 560px) / 2)); } }
  /* sheets become a centered dialog; the stacked-card look of a phone sheet is not used */
  #phone .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100% - 48px)); max-height: min(86vh, 760px); border-radius: var(--r-xl); padding: 26px 30px 30px; opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.985); transition: transform .35s var(--ease-out), opacity .25s var(--ease-out); box-shadow: 0 0 0 .5px var(--hair), var(--sh-2); }
  #phone .sheet.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  #phone.sheet-up { background: var(--bone); }
  #phone.sheet-up .scr.on, #phone.sheet-up .tabbar:not(.off) { transform: none; border-radius: 0; }
  #phone .as { left: 50%; right: auto; width: min(420px, calc(100% - 48px)); bottom: auto; top: 50%; transform: translate(-50%, -45%); opacity: 0; transition: transform .3s var(--ease-out), opacity .2s; }
  #phone .as-wrap.on .as { transform: translate(-50%, -50%); opacity: 1; }
  #phone .toast { bottom: 32px !important; }
  /* text people copy can be selected */
  .ic p, .ic h3, .note span, .pa p, .l-intro, .long h4, .qs li, .could p, .ask p, .linkbox span, .reclink, .rec p, .da-paper, .hc-p { -webkit-user-select: text; user-select: text; }
}

/* ================= desktop: the rail, two-pane onboarding, two-column screens ================= */
@media (min-width: 1024px) {
  :root { --gut: var(--d-pad); }
  html { font-size: var(--d-text); }
  #phone .body { scrollbar-width: thin; scrollbar-color: rgb(var(--ink-rgb) / .2) transparent; }
  #phone .body::-webkit-scrollbar { display: block; width: 10px; }
  #phone .body::-webkit-scrollbar-thumb { background: rgb(var(--ink-rgb) / .16); border-radius: 10px; border: 3px solid var(--bone); }

  /* ---------- the rail (the same tab bar, standing up) ---------- */
  #phone .tabbar { left: 0; top: 0; bottom: 0; right: auto; width: var(--d-rail); height: auto; padding: 26px 14px 18px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; border: 0; background: var(--d-rail-bg); box-shadow: inset -.5px 0 0 var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: transform .45s var(--ease-out), visibility 0s; }
  #phone .tabbar.off { transform: translateX(-100%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s .45s; }
  #phone .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 42px; padding: 0 12px; border-radius: var(--r-s); font: 500 15px/1 var(--sys); letter-spacing: 0; color: var(--muted); transform: none; }
  #phone .tab svg { width: 20px; height: 20px; transform: none; }
  #phone .tab.on { color: var(--ink); background: rgb(var(--ink-rgb) / .065); }
  #phone .rail-id { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 10px 22px; margin-bottom: 12px; border-bottom: .5px solid var(--hair); text-align: left; color: var(--ink); }
  #phone .rail-mk { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
  #phone .rail-mk svg { display: block; width: 44px; height: 44px; }
  #phone .rail-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 25px/1.05 var(--serif); letter-spacing: -.01em; }
  #phone .rail-host:not([hidden]) { display: flex; margin-top: 12px; }
  #phone .rail-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 16px; }
  #phone .rail-k { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: var(--r-s); color: var(--muted); font-size: 13.5px; }
  #phone .rail-k kbd { min-width: 30px; }
  #phone.rail-on #screens { left: var(--d-rail); }
  #phone.rail-on .toast { margin-left: calc(var(--d-rail) / 2); }
  /* a screen pushed on a laptop fades and settles instead of sliding in from the phone's edge */
  #phone .scr { box-shadow: none; }
  #phone .scr.is-left { transform: translateX(-3%); opacity: 0; }
  #phone .scr.is-right { transform: translateX(3%); opacity: 0; }
  #phone .scr::after { display: none; }

  /* ---------- type sized for a 13 to 16 inch screen ---------- */
  #phone .lt { font-size: var(--d-title); line-height: 1.02; margin-top: 12px; }
  #phone .sub { font-size: 18px; line-height: 1.5; }
  #phone .nav { height: 60px; padding-top: 8px; }
  #phone .scr.tabbed .body { padding-bottom: 72px; }
  #phone .foot .btn, #phone .foot .btn2 { width: 100%; max-width: 420px; align-self: center; }
  #phone .foot { align-items: center; }

  /* ---------- hover: quiet washes on rows and controls, a lift on cards ---------- */
  @media (hover: hover) and (pointer: fine) {
    #phone .tab:hover, #phone .rail-k:hover, #phone .rail-id:hover { background: var(--d-hover); color: var(--ink); }
    #phone .tab.on:hover { background: rgb(var(--ink-rgb) / .08); }
    #phone .btn:not([disabled]):hover { filter: brightness(1.12) saturate(1.04); }
    #phone .btn2:not([disabled]):hover, #phone .pill:hover, #phone .pill-b:hover, #phone .hl-c:hover, #phone .way:hover, #phone .chip:hover, #phone .vis:hover { background-color: var(--d-hover); }
    #phone .row:hover, #phone .prow:hover, #phone .pl-h:hover, #phone .lv-r.ready:hover, #phone .ed-mini .r:hover, #phone .tq-q:hover, #phone .pg-s:hover, #phone .kp-r:hover, #phone .toc button:hover { background-color: var(--d-hover); }
    #phone .lnk:hover, #phone .sec-row button:hover, #phone .nav-b:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }
    #phone .hc { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
    #phone .hc:hover { transform: translateY(-3px); }
    #phone .qz-d:hover { box-shadow: inset 0 0 0 1px var(--qz-on, var(--ink)); }
  }
  #phone .prow, #phone .row, #phone .pl-h, #phone .tq-q, #phone .ed-mini .r { border-radius: var(--r-s); transition: background-color .15s; }

  /* ================= onboarding: the step on the left at reading width, the look's art on the right ================= */
  #phone .scr.split { display: grid; grid-template-columns: minmax(460px, 46%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; }
  #phone .scr.split > .nav { grid-column: 1; grid-row: 1; padding-top: 28px; }
  #phone .scr.split > .body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: safe center; padding-top: 12px; padding-bottom: 24px; }
  #phone .scr.split > .foot { grid-column: 1; grid-row: 3; padding-bottom: 40px; }
  #phone .scr.split > .nav, #phone .scr.split > .body, #phone .scr.split > .foot { padding-left: max(var(--d-pad), calc((100% - 480px) / 2)); padding-right: max(var(--d-pad), calc((100% - 480px) / 2)); }
  #phone .scr.split > .body > * { flex-shrink: 0; }
  #phone .scr.split > .foot .btn, #phone .scr.split > .foot .btn2 { max-width: none; }
  #phone .scr.split > .d-art { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 16px 16px 16px 0; padding: 48px; border-radius: var(--r-xl); background: var(--d-art-bg); overflow: hidden; text-align: center; min-width: 0; }
  .d-art .da-mark { width: var(--d-art); max-width: 100%; }
  .d-art .da-mark svg { display: block; width: 100%; height: auto; }
  /* F3: the mark so far, larger, and a calm change when a step adds to it (the look draws the new one in) */
  .d-art .da-sofar { position: relative; width: min(72vh, 40vw, 680px); }
  .d-art .da-sofar .da-m.da-out { position: absolute; inset: 0; animation: daOut 1.4s var(--ease-out, ease-out) both; }
  .d-art .da-sofar .da-m.da-in { animation: daIn 1.6s var(--ease-out, ease-out) both; }
  .d-art .da-s.da-new { animation: daIn 1s var(--ease-out, ease-out) .5s both; }
  @keyframes daOut { to { opacity: 0; transform: scale(.97); } }
  @keyframes daIn { from { opacity: 0; transform: scale(.94); } }
  @media (prefers-reduced-motion: reduce) { .d-art .da-sofar .da-m, .d-art .da-s.da-new { animation: none; } .d-art .da-sofar .da-m.da-out { display: none; } }
  .d-art .da-k { margin-top: 18px; font: 500 var(--label-size)/1 var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
  .d-art .da-s { font: italic 400 20px/1.3 var(--serif); color: var(--ink-2); max-width: 26em; text-wrap: balance; }
  /* Ask your AI: the prompt itself, readable, beside the steps */
  .d-art-ai { justify-content: center; }
  .d-art .da-prompt { width: min(560px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: left; max-height: 100%; min-height: 0; }
  .d-art .da-prompt .da-k { margin: 0; }
  .d-art .da-paper { flex: 1 1 auto; min-height: 0; overflow-y: auto; white-space: pre-wrap; padding: 26px 28px; border-radius: var(--r-l); background: var(--card); box-shadow: 0 0 0 .5px var(--hair); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .d-art .da-prompt .btn2 { align-self: flex-start; height: 44px; padding: 0 20px; }
  #phone .scr.split[data-name="ai"] .aicard details.more, #phone .scr.split[data-name="ai"] .aicard .lede { display: none; }
  #phone .scr.split[data-name="ai"] .aicard .aibtns { margin-top: 0; }
  #phone .scr.split.welcome { grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); }
  #phone .scr.split.welcome > .foot { grid-row: 3; padding-top: 36px; padding-bottom: 0; }
  /* welcome: the words on the left, the mark large on the right */
  #phone .scr.split.welcome > .wl-art { display: none; }
  #phone .scr.split.welcome > .wl-copy { grid-column: 1; grid-row: 2; align-self: center; text-align: left; padding: 0 max(var(--d-pad), calc((100% - 480px) / 2)); }
  #phone .scr.split.welcome .wl-name { font-size: clamp(88px, 7.4vw, 132px); margin-bottom: 26px; }
  #phone .scr.split.welcome .wl-h.wl-tag { font-size: clamp(26px, 1.9vw, 34px); line-height: 1.25; margin: 0; max-width: 17em; }
  #phone .scr.split.welcome > .foot { align-items: flex-start; }
  #phone .scr.split.welcome > .foot .btn { max-width: 320px; align-self: flex-start; }
  #phone .scr.split[data-name="invite"] .inv-mark, #phone .scr.split[data-name="prepared"] .inv-mark { display: none; }
  #phone .scr.split[data-name="invite"] .inv { text-align: left; align-items: flex-start; }
  #phone .scr.split[data-name="invite"] .inv h1 { margin: 0; max-width: 12em; }
  #phone .scr.split[data-name="invite"] .inv-sub { margin-left: 0; }
  /* the quiz: the statement large, the dots wide enough to aim at */
  #phone .scr.split[data-name="quiz"] .qz-s { font-size: clamp(34px, 2.8vw, 46px); line-height: 1.1; }
  #phone .scr.split[data-name="quiz"] .qz-dots { max-width: 440px; }
  /* links: a file of links can be dropped anywhere on the step */
  #phone .scr.split.dropping > .body { outline: 1.5px dashed rgb(var(--ink-rgb) / .35); outline-offset: -10px; border-radius: var(--r-l); }
  /* the waiting view: the mark and what we are reading on the left, the atlas on the right */
  #phone .scr.split.weave { display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 48px calc(56% + var(--d-gap) / 2) 48px var(--d-pad); overflow-y: auto; }
  #phone .scr.split.weave > * { flex-shrink: 0; }
  #phone .scr.split.weave > .wv-art { width: min(240px, 26vh); }
  #phone .scr.split.weave .wv-t { font-size: 44px; }
  #phone .scr.split.weave .wd-w { display: block; width: min(440px, 100%); max-width: none; padding: 0; margin: 18px 0 0; }
  #phone .scr.split.weave .wd-amb { position: absolute; right: var(--d-pad); top: 50%; transform: translateY(-50%); width: calc(56% - var(--d-pad) - var(--d-gap) / 2); }
  #phone .scr.split.weave .wd, #phone .scr.split.weave .wd-ready { text-align: left; }
  /* F3: reflections ready, on a laptop: one composed, centered block in the left column */
  #phone .scr.split.weave.wv-ready > .wv-art { width: min(300px, 32vh); }
  #phone .scr.split.weave.wv-ready .ready-bar.ready-top { position: static; display: flex; flex-direction: column; align-items: center; gap: 0; width: min(440px, 100%); margin: 30px 0 0; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; animation: none; }
  #phone .scr.split.weave.wv-ready .ready-bar .wd-rt b { font-size: clamp(34px, 2.6vw, 44px); line-height: 1.1; }
  #phone .scr.split.weave.wv-ready .ready-bar .wd-rt span { margin-top: 8px; font-size: 14px; }
  #phone .scr.split.weave.wv-ready .ready-bar .btn { width: 100%; max-width: 320px; margin-top: 26px; min-height: 52px; }
  #phone .scr.split.weave.wv-ready .wv-count { margin-top: 16px; text-align: center; }
  #phone .scr.split.weave.wv-ready > .wd-w { margin-top: 0; }

  /* ================= the reveal: the whole window, the art at a size that stays beautiful ================= */
  #phone .scr.reveal .rv-mark { width: clamp(260px, 36vh, 400px); max-width: none; }
  #phone .scr.reveal .rv-name { font-size: var(--d-name); margin-top: 26px; }
  #phone .scr.reveal .rv-line, #phone .scr.reveal .rv-more { font-size: 22px; max-width: 30em; }
  #phone .scr.reveal .rv-peek { width: 420px; max-width: 100%; }
  /* the reveal's foot sits in a centered column: a fixed width, without the reading-width side padding every other foot gets */
  #phone .scr.reveal > .rv-foot { width: 360px; max-width: 100%; padding-left: 0; padding-right: 0; }
  /* the full-screen drawing is capped: past this size the flower's layered paint costs more than it shows */
  #phone .rv-art { width: min(68vh, 620px); margin: calc(min(68vh, 620px) / -2) 0 0 calc(min(68vh, 620px) / -2); top: 46%; }
  #phone .rv-art > svg { width: 100%; }

  /* ================= Home: the person on the left, the cards and pairs on the right ================= */
  #phone .scr[data-name="home"] > .body.hm { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); column-gap: var(--d-gap); align-items: start; align-content: start; padding: 48px max(var(--d-pad), calc((100% - var(--d-main)) / 2)) 80px; }
  #phone .hm > .hm-av { display: none; }
  #phone .hm .hm-a, #phone .hm .hm-b { display: block; min-width: 0; }
  #phone .hm .hm-a { position: sticky; top: 0; }
  #phone .hm .hm-hero { padding-top: 0; }
  #phone .hm .hm-mark { width: var(--d-hero-mark); }
  #phone .hm .hm-name { font-size: var(--d-name); margin-top: 6px; }
  #phone .hm .hm-line { font-size: 21px; max-width: 16em; }
  #phone .hm .hm-q { margin-top: 32px; }
  #phone .hm .hm-world { margin-top: 18px; }
  #phone .hm .hm-b > .hm-sec:first-child { margin-top: 0; }
  #phone .hm .hm-b > .hm-sec:first-child .sec-row { margin-top: 0; }
  #phone .hm .hm-b > .hm-sec:first-child .sec { margin-top: 0; }
  /* the cards: a grid, every card readable at once; J and K move, Enter opens */
  #phone .hm .h-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 4px 0 6px; scroll-snap-type: none; }
  #phone .hm .hc-w { width: auto; max-width: none; }
  #phone .hm .hc { min-height: 230px; padding: 20px 22px; }
  #phone .hm .hc b { font-size: 29px; }
  #phone .hm .hc-p { -webkit-line-clamp: 4; font-size: 15px; }
  #phone .hm .hc.no { opacity: .55; }
  #phone .hm .h-dots { display: none; }
  #phone .hm .hm-left .hl-row { flex-wrap: wrap; overflow: visible; }
  #phone .hm .hm-start { max-width: 640px; }
  #phone .hm .ed-mini { max-width: none; }
  .hm .sec-hint { margin-left: auto; margin-right: 14px; font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
  /* the progress view and the area pages read in one column */
  #phone .scr[data-name="home"] > .body.pg { padding-top: 40px; }

  /* a card opened from Home: a reading view */
  #phone .scr[data-name="insight"] .ic { padding: 40px 40px 32px; }
  #phone .scr[data-name="insight"] .ic h3 { font-size: clamp(44px, 3.6vw, 56px); }
  #phone .scr[data-name="insight"] .ic p { font-size: 19px; line-height: 1.55; }

  /* ================= the pair page: both marks side by side on top, then the short page and the longer notes ================= */
  #phone .scr > .body.p-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--d-gap); align-items: start; align-content: start; padding: 24px max(var(--d-pad), calc((100% - var(--d-main)) / 2)) 80px; }
  #phone .p-body > * { grid-column: 1 / -1; min-width: 0; }
  #phone .p-body > .p-read { grid-column: 1; padding-left: 16px; }
  #phone .p-body > .thin { grid-column: 1; }
  #phone .p-body > #pmore { grid-column: 2; grid-row: 2 / span 2; padding-top: 22px; }
  #phone .p-body .p-hero { padding-bottom: 12px; border-bottom: .5px solid var(--hair); margin-bottom: 10px; }
  #phone .p-body .p-marks .jm2, #phone .p-body .p-marks > svg { width: min(560px, 100%); height: auto; }
  #phone .p-body .p-names { max-width: min(560px, 100%); }
  #phone .p-body .p-hero h1 { font-size: var(--d-title); }
  #phone .p-body .note { font-size: 21px; }
  #phone .p-body .could p { font-size: 28px; }
  #phone .p-body #pmore .more-b { padding: 28px; border-radius: var(--r-l); box-shadow: inset 0 0 0 .5px var(--hair); text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  #phone .p-body #pmore .long > .sec:first-child { margin-top: 0; }
  #phone .p-body > .world-slot { margin-top: 40px; }
  .more-why.d-only { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
  .more-why b { display: block; margin-bottom: 4px; font: 400 26px/1.1 var(--serif); color: var(--ink); }

  /* ================= Compare: the invitation on the left, your pairs on the right ================= */
  #phone .scr > .body.cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--d-gap); align-items: start; align-content: start; padding: 40px max(var(--d-pad), calc((100% - var(--d-main)) / 2)) 80px; }
  #phone .cmp > .cmp-t { grid-column: 1 / -1; }
  #phone .cmp > .cmp-hero { grid-column: 1; grid-row: 2 / span 3; margin-top: 8px; }
  #phone .cmp > .sec-row { grid-column: 2; grid-row: 2; margin-top: 8px; }
  #phone .cmp > .sec-row .sec { margin-top: 0; }
  #phone .cmp > .plist { grid-column: 2; grid-row: 3; }
  #phone .cmp > .cmp-empty { grid-column: 2; grid-row: 2 / span 2; align-self: center; }

  /* ================= Show my code: a large plain code someone can scan across a table, the link, your pairs ================= */
  #phone .scr[data-name="code"] > .body.qr-b { display: grid; grid-template-columns: auto minmax(320px, 440px); column-gap: calc(var(--d-gap) * 1.4); justify-content: center; align-content: center; align-items: start; text-align: left; min-height: 100%; padding-top: 24px; padding-bottom: 48px; }
  #phone .qr-b > * { grid-column: 2; margin-left: 0; margin-right: 0; }
  #phone .qr-b > .qr-card { grid-column: 1; grid-row: 1 / span 12; align-self: center; margin: 0; }
  #phone .qr-b .qr-plate { width: min(480px, 58vh); min-width: 300px; margin: 0; }
  #phone .qr-b .qr-mk { width: 88px; margin: 0 0 6px; }
  #phone .qr-b .qr-h { font-size: var(--d-title); text-align: left; }
  #phone .qr-b .qr-s { font-size: 18px; text-align: left; margin-left: 0; }
  #phone .qr-b .qr-share { justify-self: start; }
  #phone .qr-b .qr-link.d-only { display: flex; margin-top: 14px; }
  #phone .qr-b .qr-pairs.d-only { display: block; margin-top: 8px; }
  #phone .qr-b .lv { margin-top: 18px; }
  #phone .qr-b .lv-empty { text-align: left; }

  /* ================= the atlas: wide map, the list beside it ================= */
  #phone .scr:is([data-name="home"], [data-name="pair"], [data-name="firstpair"], [data-name="compare"], [data-name="world"]) { --w: var(--d-main); }
  #phone .scr[data-name="host"], #phone .scr[data-name="hlive"], #phone .scr[data-name="hprep"] { --w: 760px; }
  #phone .scr[data-name="sources"], #phone .scr[data-name="settings"] { --w: var(--d-two); }

  /* ================= Settings, Sources, Host, privacy: a calm column; groups side by side where it helps ================= */
  #phone .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================= wide: more room, never edge to edge ================= */
@media (min-width: 1440px) {
  :root { --d-rail: 256px; --d-main: 1280px; --d-read: 660px; }
}
@media (min-width: 1920px) {
  :root { --d-main: 1400px; --d-read: 700px; --d-text: 18px; }
}

/* ================= a host's test run (S1): the strip runs full width above the rail and the main area ================= */
@media (min-width: 1024px) {
  #phone.testing .tabbar { top: var(--ts-h); }
  #phone .test-strip { padding-left: calc(var(--d-pad) / 2 + 8px); padding-right: calc(var(--d-pad) / 2); gap: 6px 12px; }
  #phone .test-strip .ts-t { flex-direction: row; align-items: baseline; gap: 10px; }
  #phone .test-strip .ts-t b { font-size: 13.5px; }
  #phone .test-strip .ts-t span { font-size: 13px; }
  #phone .test-strip .ts-b { height: 32px; padding: 0 14px; font-size: 13px; }
  #phone.testing { --ts-h: 52px; }
  #phone.testing:has(.test-strip.capped) { --ts-h: 76px; }
  #phone.testing .scr { padding-top: 0; }
}

/* ================= the atlas on a laptop: the wide map on the left, search and your list beside it ================= */
@media (min-width: 1024px) {
  #phone .world-scr .wm:not(.wm-compact) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: var(--d-gap); row-gap: 14px; align-content: start; align-items: start; padding-top: 12px; }
  #phone .world-scr .wm:not(.wm-compact) > * { grid-column: 2; min-width: 0; }
  #phone .world-scr .wm:not(.wm-compact) > .wm-head { grid-column: 1 / -1; margin-bottom: 8px; }
  #phone .world-scr .wm:not(.wm-compact) > .wm-frame { grid-column: 1; grid-row: 2 / span 12; }
  #phone .world-scr .wm-h2 { font-size: var(--d-title); }
  #phone .world-scr .wm-hint { display: block; }
}
@media (min-width: 1024px) {
  #phone .world-scr .wm-frame { margin: 0; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--hair-2); }
  #phone .world-scr .wm-svg { height: min(64vh, 640px); }
}
@media (min-width: 1024px) {
  /* a pair drawn as one shape (the original mosaic's shared ring) is taller than two marks: it never pushes the page below the fold */
  #phone .p-body .p-marks .jm2, #phone .p-body .p-marks > svg { max-height: 38vh; }
  #phone .cmp > .cmp-hero { width: 100%; max-width: none; }
}

/* ================= B10 onboarding on a laptop; two plain columns; long card labels ================= */
@media (min-width: 1024px) {
  /* Ask your AI before copying: the prompt is in the pane, so the step does not repeat it */
  /* F3: the AI step's optional section, in the pane beside the step once the prompt is copied */
  .d-art .ai-wait { width: 100%; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; min-height: 0; }
  .d-art .ai-wait .aw-h { font-size: clamp(28px, 2.2vw, 38px); }
  .d-art .ai-wait .aw-l { font-size: 17px; margin-bottom: 16px; }
  /* once copied: the atlas fills the pane (moved there by desk.js); the step keeps the question, the paste box, Continue */
  #phone .scr.split > .d-art.d-art-took { padding: 28px 32px; align-items: stretch; justify-content: center; text-align: left; }
  .d-art .ai-atlas { width: 100%; margin: 0; min-height: 0; }
  .d-art .ai-atlas .wm { min-height: 0; }
  .d-art .ai-atlas .wm-svg { height: min(60vh, 640px); min-height: 320px; }
  #phone .scr.split[data-name="ai"] .ai-w .lt { font-size: clamp(34px, 2.8vw, 46px); }
  #phone .scr.split[data-name="ai"] > .foot.ai-foot { background: transparent; box-shadow: none; }
  /* the quiz's first screen sits in the step column, centered with the rest */
  #phone .scr.split[data-name="quiz"] .qz-intro { margin-top: 0; }
  /* D1: the statement and its dots centered in the column, not pinned to the top of a tall one */
  #phone .scr.split[data-name="quiz"] .qz-i { flex: 0 0 auto; }
  /* a card label that runs long wraps on its own side; the card number never breaks */
  #phone .hm .hc-h .ar { flex: none; white-space: nowrap; }
  #phone .hm .hc-n { min-width: 0; white-space: normal; text-align: right; line-height: 1.3; }
  /* two plain columns (Settings, Sources): .d-cols holds two .d-col; .d-lead goes first on a laptop */
  #phone .d-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--d-gap); align-items: start; }
  #phone .d-col { display: block; min-width: 0; }
  #phone .d-col.d-lead { grid-column: 1; grid-row: 1; }
  #phone .d-col:not(.d-lead) { grid-column: 2; grid-row: 1; }
  #phone .d-col > .sec:first-child { margin-top: 16px; }
}
@media (min-width: 1024px) {
  /* the step column's actions run its full width (the docked paste box most of all); quiet links stay centered */
  #phone .scr.split > .foot { align-items: stretch; }
  #phone .scr.split > .foot > .lnk, #phone .scr.split > .foot > .skip-why { align-self: center; }
}
@media (min-width: 1024px) { #phone .d-col > .sec.d-only { display: block; } #phone .d-col > .sec.d-only + .group { margin-top: 8px !important; } }

/* ================= Sources (B12's hub) on a laptop ================= */
.hub-side { display: none; }
@media (min-width: 1024px) {
  #phone .scr[data-name="sources"] { --w: 1080px; }
  #phone .body.hub.hub-two { display: grid; grid-template-columns: minmax(0, 540px) minmax(340px, 1fr); column-gap: var(--d-gap); align-items: start; align-content: start; }
  /* M3: the list gives way first so the pane keeps at least 300 px */
  #phone .body.hub.hub-two > * { grid-column: 1; min-width: 0; }
  #phone .body.hub.hub-two > .hub-side { display: block; grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 16px; margin-top: 18px; padding: 22px 24px; border-radius: var(--r-l); background: var(--card); box-shadow: 0 0 0 .5px var(--hair); max-height: calc(100vh - 140px); overflow-y: auto; }
  #phone .hub-side > .sec:first-child { margin-top: 0; }
  #phone .hub-side .hub-line { margin: 4px 0 14px; font-size: 15px; color: var(--muted); }
  #phone .hub-side .hub-x { padding: 6px 0 0; }
  /* M3: in the pane the date sits under the name, so the name keeps the row's width */
  #phone .hub-side .hub-i { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 't v x' 'd v x'; column-gap: 8px; }
  #phone .hub-side .hub-i > .t { grid-area: t; }
  #phone .hub-side .hub-i > .d { grid-area: d; }
  #phone .hub-side .hub-i > .vis-i { grid-area: v; }
  #phone .hub-side .hub-i > .rm { grid-area: x; }
  /* the open row stays marked in the list while its detail sits in the pane */
  #phone .hub-e.on.in-pane > .hub-r { background: var(--d-hover); }
}

/* ================= B11 on a laptop: the profile's two columns, the ready bar ================= */
@media (min-width: 1024px) {
  #phone .hm .hm-a .hm-best { margin-top: 28px; }
  #phone .hm .hm-a .hm-best .ic { margin: 0; }
  #phone .hm .hm-a .hm-grow { margin-top: 20px; }
  #phone .hm .hm-b > .hm-quiet, #phone .hm .hm-b > .toc { opacity: .92; }
  /* "Your reflections are ready": centered in the main area, never full width */
  #phone .ready-bar { left: 0; right: 0; margin-inline: auto; width: min(560px, calc(100% - 48px)); bottom: 32px; }
  #phone.rail-on .ready-bar { left: var(--d-rail); width: min(560px, calc(100% - var(--d-rail) - 48px)); }
  #phone .ready-bar.ready-top { bottom: auto; width: 100%; }
  #phone .ready-bar .btn { min-width: 200px; } /* G1: the wait's one button reads as the primary, like every other first-run foot */
}

/* ================= D1 (12 Nov): Home's reflections together, the card screen, the quiz centered ================= */
@media (min-width: 1024px) {
  /* every reflection in one grid on the right; No. 1 featured, the rest beside or under it */
  #phone .hm .hm-rx { display: grid; gap: 16px; align-items: stretch; }
  #phone .hm .hm-rx .hm-best { margin: 0; display: flex; flex-direction: column; }
  #phone .hm .hm-rx .hm-best-b { flex: 1; display: flex; }
  #phone .hm .hm-rx .hm-best .ic { margin: 0; flex: 1; }
  #phone .hm .hm-rx .h-deck { margin: 0; padding: 0; gap: 16px; }
  #phone .hm .hm-rx .hc-w .hc { flex: 1; }
  #phone .hm .hm-rx[data-k="0"] { grid-template-columns: minmax(0, 640px); }
  #phone .hm .hm-rx[data-k="1"], #phone .hm .hm-rx[data-k="2"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #phone .hm .hm-rx[data-k="1"] .h-deck, #phone .hm .hm-rx[data-k="2"] .h-deck { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  #phone .hm .hm-rx[data-k="4"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); }
  #phone .hm .hm-rx[data-k="4"] .h-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  #phone .hm .hm-rx[data-k="3"] .h-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #phone .hm .hm-rx[data-k="n"] .h-deck { grid-template-columns: repeat(var(--rc, 3), minmax(0, 1fr)); }
  #phone .hm .hm-rx[data-k="4"] .hc, #phone .hm .hm-rx[data-k="2"] .hc { min-height: 0; }
  /* featured across the top (3, 5 and up): its plate beside its words, so it does not tower over the row under it */
  #phone .hm .hm-rx[data-k="3"] .hm-best .ic.static, #phone .hm .hm-rx[data-k="n"] .hm-best .ic.static { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 32px; align-content: start; }
  #phone .hm .hm-rx[data-k="3"] .hm-best .ic.static > *, #phone .hm .hm-rx[data-k="n"] .hm-best .ic.static > * { grid-column: 2; }
  #phone .hm .hm-rx[data-k="3"] .hm-best .ic.static > .ic-vig, #phone .hm .hm-rx[data-k="n"] .hm-best .ic.static > .ic-vig { grid-column: 1; grid-row: 1 / span 6; }
  #phone .hm .hm-rx[data-k="3"] .hm-best .ic.static > .ic-seal, #phone .hm .hm-rx[data-k="n"] .hm-best .ic.static > .ic-seal { grid-column: auto; }
  /* the card screen: a reading column, the title in the bar */
  #phone .scr[data-name="insight"] .ins-vote { max-width: 420px; margin-inline: auto; }
  #phone .scr[data-name="insight"] .nav-c { font-size: 16px; }
}
/* a very wide window: Home and the quiz grow a little rather than floating in space */
@media (min-width: 1920px) {
  :root { --d-main: 1440px; }
  #phone .scr.split[data-name="quiz"] .qz-s { font-size: clamp(46px, 2.6vw, 56px); }
  #phone .scr.split[data-name="quiz"] .qz-dots { max-width: 520px; }
}

/* F3: the first run's reflections on a laptop: all on one page, one above the other, controls under each */
@media (min-width: 1024px) {
  #phone .scr[data-name="cards"] > .body.dk-body { overflow-y: auto; padding-bottom: 64px; }
  .dk-body .dk-t { text-align: center; margin-top: 8px; }
  .dk-body .dk-sub { text-align: center; margin: 0 auto 28px; }
  .dk-list { display: flex; flex-direction: column; gap: 40px; width: min(560px, 100%); margin: 0 auto; }
  .dk-item .ic.static { min-height: 0; }
  .dk-item .vote.dk-vote { width: min(380px, 100%); margin: 14px auto 0; }
  .dk-end { display: flex; justify-content: center; margin: 44px auto 0; width: min(560px, 100%); }
  .dk-end .btn { width: 100%; max-width: 360px; }
}

/* G3: Ask your AI and In your own words on a laptop: the step scrolls inside its column and the foot (Continue,
   Skip, the privacy line) stays put at the bottom, in view at 1440 x 900. */
@media (min-width: 1024px) {
  #phone .scr.split[data-name="ai"], #phone .scr.split[data-name="tell"] { overflow: hidden; }
  #phone .scr.split[data-name="ai"] > .body, #phone .scr.split[data-name="tell"] > .body { overflow-y: auto; min-height: 0; justify-content: flex-start; }
  #phone .scr.split[data-name="ai"] > .foot, #phone .scr.split[data-name="tell"] > .foot { padding-top: 14px; padding-bottom: 28px; border-top: .5px solid var(--hair); background: var(--bg, transparent); }
}
/* G3: the laptop deck's mark at a header size, not a 34 px dot */
@media (min-width: 1024px) {
  #phone .cd-mark.dk-mark { width: 88px; height: 88px; }
  #phone .cd-mark.dk-mark svg { width: 72px; }
}