@import url("tokens.css");

  .sync-dialog { max-width: min(90vw, 480px); max-height: 85dvh; overflow: auto; color: var(--text); background: var(--bg); border: 1px solid var(--line); }
  .sync-dialog p { line-height: 1.5; }
  .sync-dialog input { width: 100%; background: var(--bg2); border: 1px solid var(--line); padding: 8px; }
  .sync-dialog button, #banner button { min-height: 32px; padding: 4px 8px; text-decoration: underline; }
  .sync-dialog button:disabled { opacity: .5; }
  .banner.native-reader { flex-wrap: wrap; white-space: normal; justify-content: space-between; height: auto; }
  .native-reader #native-offline-feedback { flex-basis: 100%; text-align: center; }

  html { font-size: var(--font-root-size); height: 100%; box-sizing: border-box; overscroll-behavior: none; touch-action: pan-x pan-y; }
  *, *::before, *::after { box-sizing: border-box; }
  body {
    height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: pan-x pan-y;
    background: var(--page); color: var(--text);
    font: var(--font-body); font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
  }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  input, textarea, select { font: var(--font-input); color: var(--text); }
  .hd .proj, .chip .k, .chip .n, .id, .st, .mk, .chev, .cmd, .cmenu, code, pre, kbd, .memoryCardID, .memoryLane { font-family: var(--mono); }

  /* ---------- app shell ---------- */
  .app {
    position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden;
    padding-left: var(--sal); padding-right: var(--sar);
    background: var(--bg); display: flex; flex-direction: column;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y;
    --vv-left: 0px; --vv-top: 0px; --vv-width: 100%; --vv-bar-y: 0px;
  }

  header.hd { flex: none; height: 32px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); background: var(--bg2); touch-action: none; }
  .hd .proj { font-weight: 700; color: var(--text); height: 32px; display: flex; align-items: center; gap: 4px; padding-right: 6px; }
  .hd .proj .prompt { color: var(--accent); }
  .hd .proj small { color: var(--muted); font-weight: 400; }
  .banner {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 22px; padding: 0 12px; overflow: hidden; white-space: nowrap;
    font-size: 0.769rem; letter-spacing: 0.02em; color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--transparent), var(--banner-sheen) 50%, var(--transparent));
  }
  .banner[hidden] { display: none; }
  .banner .t { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .banner .t::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
  .banner a { flex: none; color: var(--accent); text-decoration: none; opacity: 0.85; }
  .banner a:hover { opacity: 1; text-decoration: underline; }
  .hd .dot { width: 28px; height: 32px; display: grid; place-items: center; color: var(--green); }
  .hd .dot.pulse { animation: pulse 1.2s ease-out 2; }
  .hd .dot.bad { color: var(--orange); }
  @keyframes pulse { 50% { color: var(--yellow); transform: scale(1.35); } }
  .hd .cnt { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.923rem; display: flex; gap: 10px; align-items: center; }
  .hstat { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
  .hd .ib { width: 36px; height: 32px; display: grid; place-items: center; color: var(--dim); font-size: 1.154rem; }
  .hd .ib.on { color: var(--yellow); }
  .hd .ib.follow { font-size: 0.846rem; font-weight: 700; }

  .chips { flex: none; height: 34px; display: flex; gap: 6px; align-items: center; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--bg2); }
  .chips::-webkit-scrollbar { display: none; }
  .chips[hidden] { display: none !important; }
  .chip { flex: none; height: 24px; border: 1px solid var(--line); border-radius: 12px; padding: 0 9px; display: flex; align-items: center; gap: 5px; font-size: 0.923rem; color: var(--muted); white-space: nowrap; }
  .chip[data-chip]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sc, var(--muted)); }
  .chip .k { color: var(--muted); font-size: 0.846rem; }
  .chip .n { color: var(--muted); font-size: 0.846rem; }
  .chip.on { border-color: var(--line); background: var(--selected); color: var(--muted); }
  .chip.on .k, .chip.on .n { color: var(--text-soft); opacity: 1; }
  .chip.q { border-style: dashed; max-width: 180px; }
  .chip.q span { overflow: hidden; text-overflow: ellipsis; }
  .chip.fx { border-color: var(--line); }
  .chips .sep { flex: none; width: 1px; height: 18px; background: var(--line); }

  /* The views and the bar: a column with the bar at the bottom on a phone, a row with the bar as a rail at the left in every other class.
     The detail host sits between them, out of the flow: its sheet or panel is placed against .body, so a side panel starts
     below the header and the chips while a phone sheet still rises from the bottom edge. */
  .body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
  #detailHost, #menuHost { display: contents; }
  main { flex: 1; min-height: 0; min-width: 0; position: relative; }
  .view { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .view[hidden] { display: none !important; }
  .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* ---------- tree rows ---------- */
  .ptr { height: 0; overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: 0.923rem; transition: height .2s; }
  .ptr.ready { color: var(--cyan); }
  .row { position: relative; overflow: hidden; touch-action: pan-y; border-bottom: 1px solid var(--row-rule); }
  .row .ul, .row .ur { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px; font-weight: 700; font-size: 0.923rem; color: var(--ink); }
  .row .ul { justify-content: flex-start; background: var(--cyan); }
  .row .ur { justify-content: flex-end; background: var(--muted); }
  .row .ul.long { background: var(--accent); } .row .ur.long { background: var(--orange); }
  .row .ul.weak, .row .ur.weak { filter: saturate(.3) brightness(.6); }
  .rc { position: relative; z-index: 1; background: var(--bg); padding: 4px 16px 4px calc(16px + var(--d, 0) * 13px); min-height: 44px; }
  .row.snap .rc { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  .l1, .l2 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
  .l1 .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  .wrap .l1 { white-space: normal; align-items: flex-start; }
  .wrap .l1 .t { white-space: normal; overflow-wrap: anywhere; }
  .l2 { font-size: 0.885rem; color: var(--muted); padding-left: 34px; overflow: hidden; }
  .l2 > * { flex: none; }
  .mi, .hstat { color: var(--muted); }
  .stw, .pill.status { display: inline-flex; align-items: baseline; gap: 5px; }
  .sdot, .st { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sc, var(--muted)); }
  .msep { color: var(--ghost); }
  .chev { width: 28px; margin-left: -8px; margin-right: -6px; text-align: center; color: var(--muted); flex: none; position: relative; }
  .chev::after { content: ""; position: absolute; inset: -12px -4px; }
  .chev.none { visibility: hidden; }
  .id { flex: none; color: var(--text-soft); }
  .row.sel .rc { background: var(--row-selected); box-shadow: inset 3px 0 var(--hi); }
  .row.sel .id { color: var(--text); }
  .row.dim .t, .row.dim .id { opacity: .5; }
  .row.marked .rc { background: var(--row-marked); box-shadow: inset 3px 0 var(--accent); }
  .mk { flex: none; width: 12px; color: var(--accent); }
  .row.flash .rc { animation: flash 2.4s ease-out; }
  @keyframes flash { 0%, 30% { background: var(--row-flash); } }
  .ph { position: sticky; top: 0; z-index: 2; background: var(--bg3); color: var(--accent); padding: 6px 16px; font-weight: 700; display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
  .ph .n { color: var(--muted); font-weight: 400; }
  .empty { padding: 32px 16px; color: var(--muted); text-align: center; }
  .empty button { color: var(--text-soft); text-decoration: underline; }
  .memoryLoading { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .memoryLoading progress { width: min(260px, 70%); accent-color: var(--text-soft); }
  .fbar { flex: none; padding: 6px 16px; background: var(--hover); color: var(--accent); display: flex; gap: 8px; align-items: center; font-size: 0.923rem; border-bottom: 1px solid var(--line); }
  .fbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fbar button { color: var(--text); padding: 4px 6px; }

  /* ---------- bottom bars ---------- */
  nav.bar { flex: none; height: calc(48px + var(--sab)); padding-bottom: var(--sab); display: flex; border-top: 1px solid var(--line); background: var(--bg2); }
  nav.bar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); font-size: 0.846rem; line-height: 14px; }
  nav.bar button .g { font-size: 1.231rem; line-height: 18px; }
  nav.bar button.on { color: var(--hi); }
  nav.bulk { background: var(--bulk-bg); }
  nav.bulk .cnt { flex: 1.3; color: var(--accent); font-weight: 700; font-size: 0.923rem; }
  nav.bulk button { color: var(--text); }
  nav.bulk button.red { color: var(--red); }

  /* ---------- board ---------- */
  .tabs { flex: none; display: flex; gap: 4px; padding: 6px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; height: 30px; border-radius: 6px; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: var(--dim); border: 1px solid var(--transparent); font-size: 0.923rem; }
  .tab.unf { color: var(--cyan); }
  .bbody { flex: 1; min-height: 0; display: flex; position: relative; }
  /* The phone board: every column is a box, stacked under the chip row, as mockup A's phone board (docs/adr/0052). */
  .bcol { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 16px; display: grid; grid-auto-rows: min-content; align-content: start; gap: 12px; touch-action: pan-y; }
  .bbox { min-width: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-1); }
  .bhead { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0; color: var(--text); font-weight: 700; text-align: left; }
  .bhead .st { width: 7px; height: 7px; }
  .bhead .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bhead b { font-weight: 500; color: var(--muted); }
  .bhead .ch { color: var(--muted); font-weight: 400; }
  .bbox.folded .bhead { border-bottom: 0; border-radius: 3px; }
  .bbox.drop { background: var(--hover); outline: 1px dashed var(--accent); outline-offset: -1px; }
  .bcards { padding: 10px 10px 4px; }
  .bcards .empty { padding: 12px 8px 16px; }
  .bmore { width: 100%; min-height: 44px; margin: 4px 0 6px; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted); font-weight: 600; }
  .card { position: relative; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-raised); padding: 6px 8px 6px calc(8px + min(var(--d, 0), 4) * 14px); margin-bottom: 6px; }
  .card .l1 { align-items: center; }
  .card .l1 .t { font-weight: 600; }
  .card .st { width: 7px; height: 7px; align-self: center; }
  .card .l1 .ty { flex: none; width: 1.1em; text-align: center; }
  .card .l1 .id { flex: none; }
  .card .tags { flex: none; display: flex; gap: 8px; margin-left: auto; font-size: 0.885rem; }
  .card .tags .tb, .card .tags .tl, .card .tags .tk { color: var(--muted); }
  .card .tp, .wepic .tp, .lane .tp { color: var(--muted); font-weight: 600; }
  .card .l2 { padding: 3px 0 0 13px; }
  .card.sel { background: var(--selected); border-color: var(--line); box-shadow: inset 3px 0 var(--hi); padding-top: 7px; padding-bottom: 7px; margin: 4px 0 7px; }
  .card.sel .l1 { white-space: normal; align-items: flex-start; }
  .card.sel .l1 .t { white-space: normal; overflow-wrap: anywhere; }
  .card.sel .tags { flex-wrap: wrap; }
  .card.ghost { position: absolute; z-index: 90; pointer-events: none; opacity: .92; box-shadow: var(--lifted-shadow); transform: rotate(-2deg); width: 300px; }
  .card.lifted { opacity: .3; }
  .lane { width: 100%; text-align: left; display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 0.923rem; padding: 8px 8px 7px; white-space: nowrap; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-2); margin: 8px 0 5px; }
  .lane .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
  .lane .n { color: var(--muted); }
  .lane .ch { width: 12px; color: var(--muted); }
  .lane .ei { color: var(--text-soft); }
  .lane .bar { flex: none; align-self: center; width: 44px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .lane .bar i { display: block; height: 100%; background: var(--text-soft); }
  .card .l3 { padding-left: calc(1.1em + 6px); font-size: 0.885rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .l3 .e { color: var(--text-soft); }
  /* Inside a box each lane is a group, so its header sticks to the top of the board until the next lane pushes it off; the negative top lifts it over the board's 12 px padding. */
  .bcards .lane { position: sticky; top: -12px; z-index: 2; width: calc(100% + 20px); margin: 0 -10px 8px; padding: 8px 10px 7px; background: var(--surface-1); border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; align-items: center; }
  /* the wide board: every column side by side, epic lanes as rows across them */
  .wboard { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-auto-rows: min-content; align-content: start; column-gap: 12px; padding: 0 16px 24px; touch-action: pan-x pan-y; }
  .whead { position: sticky; top: 0; z-index: 3; display: flex; align-items: baseline; gap: 8px; padding: 10px 8px 8px; background: var(--bg); border-bottom: 2px solid var(--hc, var(--line)); color: var(--text); font-weight: 700; text-align: left; }
  .whead b { font-weight: 400; color: var(--muted); }
  .whead:hover span { color: var(--text); }
  .whead.rail { writing-mode: vertical-rl; align-items: center; padding: 10px 0; font-weight: 400; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; height: 120px; }
  .wboard .lane { grid-column: 1 / -1; padding: 12px 6px 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .lane .lf { display: flex; gap: 0 6px; color: var(--muted); font-size: 0.885rem; }
  .lane .t { flex: 1; }
  .lane.lfacts .t { color: var(--text); }
  .lane .ls { flex-basis: 100%; padding-left: 18px; color: var(--muted); font-size: 0.885rem; overflow: hidden; text-overflow: ellipsis; }
  .wcell { min-height: 44px; padding: 10px 0 4px; border-radius: 6px; }
  .wcell.drop, .whead.drop { background: var(--hover); outline: 1px dashed var(--accent); outline-offset: -1px; }
  .wboard .card { cursor: pointer; }
  .wempty { grid-column: 1 / -1; }
  .whint { margin-left: auto; align-self: center; color: var(--muted); font-size: 0.846rem; white-space: nowrap; }
  .whead.epich { color: var(--text); border-bottom-color: var(--line); cursor: default; }
  .wboard .lt { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
  /* The cell stretches to its lane's row, so a tall lane keeps its epic beside every card. */
  .wepic { align-self: stretch; align-content: start; margin: 16px 0 4px; padding: 8px 10px 10px; border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 0.923rem; }
  .wepic:hover:not(.sel) { border-color: var(--muted); border-left-color: var(--muted); }
  .wepic.sel { background: var(--selected); border-color: var(--line); border-left-color: var(--accent); }
  .wepic .eh { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; color: var(--muted); min-width: 0; }
  .wepic .eh .t { flex: 1; min-width: 0; font-weight: 600; -webkit-line-clamp: 2; }
  .wepic .es { grid-column: 1 / -1; color: var(--dim); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wepic .em { grid-column: 1 / -1; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 6px; }
  .wepic .ec { display: flex; flex-wrap: wrap; gap: 0 6px; }
  .wepic .cw, .lane .cw, .wepic .cb, .lane .cb, .wepic .cr, .lane .cr, .wepic .lb, .lane .lb, .wepic .od, .lane .od { color: var(--muted); }
  .wepic .eh button { color: var(--muted); padding: 0 2px; }
  .wepic .ei { color: var(--text-soft); font-weight: 700; }
  .wepic .t { grid-column: 1 / -1; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .wepic .ep { align-self: center; height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; }
  .wepic .ep i { display: block; height: 100%; background: var(--muted); }
  .wepic .en { color: var(--dim); font-variant-numeric: tabular-nums; }
  .wepic .ec { grid-column: 1 / -1; color: var(--muted); }
  /* A lane is never shorter than three one-line cards, so a short epic cell, No epic above all, still shows a few before its cells clip the rest. */
  .wepic { min-height: 9.2rem; }
  /* A cell that must not set its lane's height holds its cards in a box out of the flow (render.ts railCell). The insets are the cell's padding. */
  .wcell.wsc { position: relative; min-height: 0; }
  .wbox { position: absolute; inset: 10px 0 4px; overflow: hidden; --fade: min(32px, 20%); scroll-padding-block: var(--fade); }
  /* Only the box that holds the cursor's card scrolls and has a scroll bar. Every other box clips its cards behind the fades, so the wheel or a trackpad over it scrolls the board and never catches in a cell on the way through the epics. */
  .wbox.cur { overflow-y: auto; }
  /* The last card's margin would let a box that holds every card scroll by it, and fade an edge with nothing past it. */
  .wbox > .card:last-child { margin-bottom: 0; }
  /* Only the cursor's box has a scroll bar, and macOS hides that one until a scroll starts, so an edge of any box with more cards past it fades (render.ts markCellEdges), over a card's height where the box has room. The scroll padding keeps the cursor's card out of the fade. A mask reads only alpha, so --ink stands for any opaque colour. */
  .wbox.up { -webkit-mask-image: linear-gradient(var(--transparent), var(--ink) var(--fade)); mask-image: linear-gradient(var(--transparent), var(--ink) var(--fade)); }
  .wbox.down { -webkit-mask-image: linear-gradient(var(--ink) calc(100% - var(--fade)), var(--transparent)); mask-image: linear-gradient(var(--ink) calc(100% - var(--fade)), var(--transparent)); }
  .wbox.up.down { -webkit-mask-image: linear-gradient(var(--transparent), var(--ink) var(--fade), var(--ink) calc(100% - var(--fade)), var(--transparent)); mask-image: linear-gradient(var(--transparent), var(--ink) var(--fade), var(--ink) calc(100% - var(--fade)), var(--transparent)); }

  /* ---------- search / more / graph ---------- */
  .sbox { flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; background: var(--bg); }
  .sbox input { flex: 1; min-width: 0; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-1); padding: 0 12px; outline: none; }
  .sbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
  .sbox button { color: var(--text-soft); font-size: 0.923rem; padding: 8px 6px; border-radius: 4px; }
  .sugg { flex: none; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--surface-1); }
  .sugg::-webkit-scrollbar { display: none; }
  .sugg .chip { color: var(--text-soft); background: var(--bg); border-radius: 4px; }
  .sugg .chip.v { color: var(--text); background: var(--selected); }
  .shead { padding: 8px 16px; color: var(--muted); font-size: 0.923rem; display: flex; justify-content: space-between; align-items: center; }
  .shead button { color: var(--text-soft); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
  .sec { padding: 14px 16px 6px; font-size: 0.846rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .syntax { padding: 0 16px; }
  .item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 16px; min-height: 44px; border-bottom: 1px solid var(--row-rule); }
  .item .g { width: 18px; text-align: center; color: var(--muted); flex: none; }
  .item .x { flex: 1; min-width: 0; }
  .item .x small { display: block; color: var(--muted); font-size: 0.885rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .item .v { color: var(--muted); font-size: 0.923rem; flex: none; }
  .item .v.on { color: var(--text-soft); }
  .crumbs { flex: none; display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .crumbs button { flex: none; color: var(--muted); font-size: 0.923rem; padding: 3px 6px; border-radius: 4px; }
  .crumbs button:last-child { color: var(--accent); background: var(--selected); }
  .gnode { margin: 10px 12px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--hover); }
  .gnode .t2 { color: var(--text); font-weight: 700; white-space: normal; }
  .gnode .l2 { padding-left: 0; }
  .gsec { padding: 10px 16px 4px; font-size: 0.846rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 8px; }
  .gsec b { color: var(--dim); font-weight: 500; }

  /* ---------- sheets ---------- */
  .detail {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    height: var(--h, 52%); background: var(--bg2); border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0; box-shadow: var(--panel-shadow);
    display: flex; flex-direction: column; transform: translateY(0);
    transition: height .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .detail.enter { transform: translateY(100%); }
  .detail.drag { transition: none; }
  .detail.full { border-radius: 0; }
  .detail.full .grab { height: calc(18px + var(--sat)); padding-top: var(--sat); }
  .dhead { flex: none; touch-action: none; padding: 0 12px 6px 16px; border-bottom: 1px solid var(--line); }
  .grab { height: 18px; display: grid; place-items: center; }
  .grab::before { content: ""; width: 38px; height: 4px; border-radius: 2px; background: var(--line); }
  .dtop { display: flex; align-items: center; gap: 6px; font-size: 0.923rem; color: var(--muted); }
  .dtop .sp { flex: 1; }
  .dtop button { padding: 4px 6px; color: var(--dim); }
  .dtop button[disabled] { color: var(--ghost); cursor: default; }
  .dtop .back { color: var(--hi); }
  .dtitle { font-size: 1.154rem; line-height: 21px; font-weight: 700; margin: 4px 0 2px; text-wrap: balance; }
  .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 0.923rem; }
  .pill { border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; line-height: 18px; color: var(--muted); }
  .dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 16px 20px; }
  .dbody.snap { transition: transform .2s ease-out, opacity .2s; }
  .meta { display: grid; grid-template-columns: 88px 1fr; gap: 3px 10px; font-size: 0.923rem; margin: 0 0 12px; padding: 8px 0 10px; border-bottom: 1px solid var(--line-soft); }
  .meta dt { color: var(--muted); } .meta dd { margin: 0; color: var(--dim); overflow-wrap: anywhere; }
  .dsec { margin: 14px 0 4px; font-size: 0.846rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
  .dsec button { min-height: 24px; padding: 4px 6px; margin: -4px 0; border-radius: 4px; color: var(--hi); text-transform: none; letter-spacing: 0; }
  .rel { display: flex; gap: 7px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; min-height: 38px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-1); white-space: nowrap; margin-bottom: 6px; }
  .rel .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .rel .kn { flex: none; width: 1ch; color: var(--muted); }
  .bar2 { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; margin: 8px 0 8px; }
  .bar2 i { display: block; height: 100%; background: var(--text-soft); }
  .md { color: var(--dim); font-size: 1rem; line-height: 20px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
  .md h3 { color: var(--text); font-size: 1rem; margin: 14px 0 5px; }
  .md p { margin: 0 0 8px; }
  .md ul, .md ol { margin: 0 0 8px; padding-left: 18px; }
  .md code { color: var(--text-soft); background: var(--bg3); border-radius: 3px; padding: 0 3px; font-size: 0.923rem; }
  .md pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; overflow-x: auto; font-size: 0.923rem; line-height: 17px; }
  .md pre code { background: none; padding: 0; color: var(--text); }
  .md .mermaid-diagram { background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 0 8px; }
  .md .mermaid-diagram pre { border: 0; padding: 0; margin: 0; }
  .md .mermaid-diagram svg { display: block; max-width: none !important; height: auto; }
  .md b { color: var(--text); }
  .cm { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-1); padding: 8px 10px; margin: 8px 0; }
  .cm .who { font-size: 0.885rem; color: var(--muted); } .cm .who b { color: var(--text-soft); font-weight: 500; }
  .dacts { flex: none; display: flex; border-top: 1px solid var(--line); padding-bottom: var(--sab); }
  .dacts button { flex: 1; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.846rem; color: var(--dim); gap: 1px; }
  .dacts button .g { font-size: 1.077rem; color: var(--muted); }
  .pager { font-size: 0.846rem; color: var(--muted); }

  .backdrop { position: absolute; inset: 0; z-index: 30; background: var(--overlay); opacity: 0; transition: opacity .2s; }
  .backdrop.on { opacity: 1; }
  .msheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; max-height: calc(100% - var(--sat) - 24px);
    background: var(--bg2); border-radius: 14px 14px 0 0; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
    padding-bottom: var(--sab);
  }
  .msheet.on { transform: translateY(0); }
  .msheet .mh { flex: none; touch-action: none; padding: 0 16px 8px; }
  .msheet .mh h3 { margin: 0; font-size: 1.077rem; line-height: 20px; }
  .msheet .mh p { margin: 2px 0 0; font-size: 0.923rem; color: var(--muted); }
  .msheet .mb { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
  .opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 16px; min-height: 46px; border-top: 1px solid var(--row-rule); color: var(--text-soft); }
  .opt .g { width: 18px; text-align: center; flex: none; color: var(--muted); }
  .opt .g.dotg { display: grid; place-items: center; font-size: 0; line-height: 0; }
  .opt .g.dotg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--muted)); }
  .opt .x { flex: 1; min-width: 0; } .opt .x small { display: block; color: var(--muted); font-size: 0.885rem; }
  .opt .key { color: var(--muted); font-size: 0.846rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
  .opt.red { color: var(--red); }
  .opt.cur { background: var(--selected); box-shadow: inset 3px 0 var(--hi); color: var(--text); }
  .form { display: grid; gap: 12px; padding: 4px 16px 8px; }
  .form label { display: grid; gap: 4px; font-size: 0.846rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
  .form input, .form textarea, .form select { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-1); padding: 8px 10px; outline: none; text-transform: none; letter-spacing: 0; }
  .form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
  .form textarea { min-height: 88px; resize: vertical; }
  .segs { display: flex; gap: 4px; flex-wrap: wrap; }
  .segs button { border: 1px solid var(--line); border-radius: 6px; min-height: 34px; padding: 0 10px; font-size: 0.923rem; color: var(--text-soft); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-1); }
  .segs button.on { border-color: var(--line); background: var(--selected); color: var(--text); box-shadow: inset 0 -2px var(--hi); }
  .segDot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--muted)); }
  .fbtns { display: flex; gap: 8px; padding: 8px 16px 4px; }
  .fbtns button { flex: 1; height: 44px; border-radius: 8px; border: 1px solid var(--line); font-weight: 700; }
  .fbtns .pri { background: var(--text); color: var(--ink); border-color: var(--text); }
  .fbtns .danger { background: var(--red); color: var(--ink); border-color: var(--red); }
  .cmd { margin: 6px 16px; padding: 8px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--text-soft); font-size: 0.923rem; overflow-x: auto; white-space: pre; user-select: text; -webkit-user-select: text; }
  .gtable { width: 100%; border-collapse: collapse; font-size: 0.923rem; }
  .gtable td { padding: 7px 16px; border-top: 1px solid var(--row-rule); vertical-align: top; }
  .gtable td:first-child { color: var(--text); width: 46%; padding-right: 4px; }
  .gtable td:last-child { color: var(--muted); }
  .gtable kbd { font: inherit; color: var(--accent); }
  .gtable .ok { color: var(--text-soft); }
  .qr { width: 132px; height: 132px; margin: 8px auto; display: grid; grid-template-columns: repeat(21, 1fr); background: var(--qr-bg); padding: 6px; border-radius: 6px; }
  .qr i { background: var(--qr-ink); } .qr i.o { background: var(--transparent); }

  .toast { position: absolute; left: 12px; right: 12px; bottom: calc(56px + var(--sab)); z-index: 40; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px 12px; box-shadow: var(--toast-shadow); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; overflow: hidden; transform: translateY(12px); opacity: 0; transition: transform .2s, opacity .2s; pointer-events: none; }
  .toast.on { transform: none; opacity: 1; pointer-events: auto; }
  .toast .m { font-size: 0.923rem; color: var(--text); }
  .toast .c { grid-column: 1; font-size: 0.846rem; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toast button { grid-row: 1 / span 2; grid-column: 2; color: var(--yellow); font-weight: 700; padding: 8px 6px; }
  .toast .tm { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--yellow); width: 100%; transform-origin: left; }

  .sat { flex: none; height: var(--sat); background: var(--bg2); }
  .boot { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); color: var(--muted); padding: 24px; text-align: center; }
  .boot[hidden] { display: none; }
  .boot a, .boot button { color: var(--cyan); text-decoration: underline; }
  .stale { flex: none; padding: 4px 16px; background: var(--priority-alert); color: var(--orange); font-size: 0.885rem; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
  .stale span { flex: 1; min-width: 0; }
  .stale button { color: var(--text); }
  .row { content-visibility: auto; contain-intrinsic-size: auto 45px; }
  .ro { color: var(--orange); font-size: 0.846rem; }
  :focus-visible { outline: 2px solid var(--hi); outline-offset: -2px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .err { color: var(--red); }

  /* ---------- touch classes: phone and tablet ----------
     The calm rows of the direction A mockups, a status dot where the TUI has a glyph and a
     neutral ID, and 44 px targets on the rows, the detail's head and relations, and the sheets. */
  .app:is(.phone, .tablet) .row .rc { min-height: 44px; padding-top: 5px; padding-bottom: 4px; background: var(--bg); }
  .app:is(.phone, .tablet) .row .l1 .t { font-weight: 600; }
  .app:is(.phone, .tablet) .row .id { color: var(--text-soft); }
  .app:is(.phone, .tablet) .row.sel .id { color: var(--text); }
  .app:is(.phone, .tablet) .row .st {
    width: 8px; height: 8px; border-radius: 50%; align-self: center; background: currentColor;
    color: inherit; font-size: 0; line-height: 0; box-shadow: 0 0 0 3px var(--bg);
  }
  .app:is(.phone, .tablet) .ph { min-height: 44px; align-items: center; padding-top: 0; padding-bottom: 0; }
  .app:is(.phone, .tablet) .dtop { min-height: 44px; align-items: center; }
  .app:is(.phone, .tablet) .dtop button { min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 4px; }
  .app:is(.phone, .tablet) .dtop .back { min-width: 56px; text-align: left; }
  .app:is(.phone, .tablet) .rel { min-height: 44px; padding: 10px 0; }
  .app:is(.phone, .tablet) .dacts button { min-height: 48px; }
  .app:is(.phone, .tablet) .opt { min-height: 48px; }
  .app:is(.phone, .tablet) .fbtns button { min-height: 44px; }
  /* ---------- phone native layer ---------- */
  .app.phone header.hd { height: 38px; padding: 0 6px 0 12px; background: var(--surface-0); }
  .app.phone .hd .proj, .app.phone .hd .dot, .app.phone .hd .ib { height: 38px; min-width: 38px; }
  .app.phone .hd .proj { padding-right: 4px; }
  .app.phone .chips { height: 34px; padding: 0 10px; background: var(--bg); }
  .app.phone .chip { height: 26px; border-radius: 3px; padding: 0 8px; }
  .app.phone nav.bar {
    min-height: calc(50px + var(--sab)); height: calc(50px + var(--sab));
    background: var(--surface-0); border-top-style: dashed;
  }
  .app.phone nav.bar button { min-height: 50px; font-family: var(--ui); }
  .app.phone nav.bar button .g { font-family: var(--mono); color: var(--accent); }
  .app.phone nav.bar button.on { background: var(--selected); }
  .app.phone .detail, .app.phone .msheet { border-radius: 8px 8px 0 0; background: var(--surface-2); }
  .app.phone .detail.full { border-radius: 0; }
  .app.phone .dhead { padding: 0 12px 8px 16px; }
  .app.phone .dtitle { font-size: 1.077rem; line-height: 20px; }
  .app.phone .msheet .mh { padding: 0 16px 10px; }
  .app.phone.vzoom header.hd,
  .app.phone.vzoom nav.bar {
    z-index: 25;
    transform: translate(var(--vv-left), var(--vv-top));
    width: var(--vv-width);
  }
  .app.phone.vzoom nav.bar {
    transform: translate(var(--vv-left), var(--vv-bar-y));
  }
  /* ---------- size classes ----------
     util.ts puts phone, tablet, desktop or wide on #app from its width (docs/adr/0052).
     In every class but phone the views sit beside a rail, and the detail is a side
     panel below the header and the chips, down to the bottom edge, that the views make room for. */
  .app:not(.phone) { --dw: min(460px, 42vw); --rail-w: 64px; }
  .app:not(.phone) .body { flex-direction: row; }
  .app:not(.phone) nav.bar { order: -1; flex-direction: column; width: var(--rail-w); height: auto; padding: 8px 0 var(--sab); border-top: 0; border-right: 1px solid var(--line); font-family: var(--mono); }
  .app:not(.phone) nav.bar button { flex: none; height: 52px; }
  .app:not(.phone) nav.bulk .cnt { height: auto; padding: 8px 4px; }
  .app:not(.phone) .toast { left: calc(var(--sal) + var(--rail-w) + 12px); right: auto; width: min(420px, calc(100% - var(--rail-w) - 24px)); bottom: calc(12px + var(--sab)); }
  .app:not(.phone) .detail {
    left: auto; top: 0; bottom: var(--sab); width: var(--dw); height: auto;
    border-top: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: var(--side-panel-shadow);
  }
  .app:not(.phone) .detail.enter { transform: translateX(100%); }
  /* Full width covers the views but not the rail, and narrows nothing, so the board keeps its layout for when the panel shrinks back. */
  .app:not(.phone) .detail.full { left: var(--rail-w); width: auto; border-left: 0; box-shadow: none; }
  .app:not(.phone) .detail .grab { display: none; }
  .app:not(.phone) .detail .dhead { padding-top: 10px; touch-action: auto; }
  .app:not(.phone) .detail .dacts { padding-bottom: 0; }
  .app.hasdetail:not(.phone) .view { right: var(--dw); }
  /* Tablet: the split view of the direction A mockups (docs/mockups/responsive-web/shots/a-tablet-*.png).
     The list keeps a pane of 300 to 420 px at the left, upright or on its side, and the detail takes
     the rest as a flat pane behind a divider rather than a sheet over the list, so both read as one surface. */
  .app.tablet { --list-w: clamp(300px, 38vw, 420px); }
  .app.tablet.hasdetail .view { right: auto; width: var(--list-w); }
  .app.tablet .detail { left: calc(var(--rail-w) + var(--list-w)); width: auto; background: var(--bg); box-shadow: none; }
  .app.tablet .detail .dhead { padding: 12px 16px 10px 20px; }
  .app.tablet .dbody { padding: 10px 20px 24px; }
  /* ---------- desktop and wide: the sidebar shell of the direction A mockup ----------
     (docs/mockups/responsive-web/shots/a-desktop.png). #app is a grid: the sidebar spans the whole height at
     the left with the project above the views and the connection below them, the header and the chips sit
     to its right, and the detail is a third column beside the views rather than a panel over them, so the
     tree or the board and an issue read together. The body and the sheet host hand their children to the
     grid; a sheet and its backdrop are placed against #app, as everywhere. */
  .app:is(.desktop, .wide) {
    --rail-w: 220px; --dw: 430px;
    display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  }
  .app.wide {
    --dw: clamp(560px, 24vw, 680px);
    --wide-prose-w: 72ch;
  }
  .app.wide .dbody > :is(.meta, .dsec, .md, .rel, .bar2, .cm, .issueMemoryLink) {
    max-width: min(100%, var(--wide-prose-w));
  }
  .app:is(.desktop, .wide) .sat { grid-column: 1 / -1; grid-row: 1; }
  .app:is(.desktop, .wide) nav.bar { grid-column: 1; grid-row: 2 / -1; }
  .app:is(.desktop, .wide) header.hd { grid-column: 2 / -1; grid-row: 2; min-width: 0; height: 40px; padding: 0 10px 0 16px; }
  .app:is(.desktop, .wide) .hd .ib { width: 34px; height: 34px; border-radius: 8px; }
  .app:is(.desktop, .wide) .hd .proj, .app:is(.desktop, .wide) .hd .dot { height: 34px; border-radius: 8px; }
  .app:is(.desktop, .wide) .hd .proj { margin-left: -4px; padding: 0 6px 0 4px; }
  .app:is(.desktop, .wide) .banner { grid-column: 2 / -1; grid-row: 3; min-width: 0; }
  .app:is(.desktop, .wide) .chips { grid-column: 2 / -1; grid-row: 4; min-width: 0; }
  .app:is(.desktop, .wide) .stale { grid-column: 2 / -1; grid-row: 5; min-width: 0; }
  .app:is(.desktop, .wide) .body, .app:is(.desktop, .wide) #sheetHost { display: contents; }
  .app:is(.desktop, .wide) main { grid-column: 2; grid-row: 6; }
  .app:is(.desktop, .wide).hasdetail .view { right: 0; }
  .app:is(.desktop, .wide) .detail { position: relative; inset: auto; grid-column: 3; grid-row: 6; min-height: 0; background: var(--bg); box-shadow: none; }
  .app:is(.desktop, .wide) .detail.full { grid-column: 2 / -1; left: auto; }
  /* The sidebar: the brand, one row per view with its glyph, and the connection at the foot. */
  .app:is(.desktop, .wide) nav.bar { padding: 0 0 var(--sab); }
  .sbrand { display: grid; gap: 2px; align-content: center; min-height: 62px; margin-bottom: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); }
  .sbrand b { font-size: 1.385rem; line-height: 1.2; color: var(--text); }
  .sbrand small { color: var(--muted); font-size: 0.923rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app:is(.desktop, .wide) nav.bar button { flex-direction: row; justify-content: flex-start; gap: 10px; height: 38px; margin: 0 12px 4px; padding: 0 10px; border-radius: 8px; font-size: 1rem; line-height: 18px; color: var(--text-soft); text-align: left; }
  .app:is(.desktop, .wide) nav.bar button .g { width: 18px; text-align: center; font-size: 1rem; line-height: 18px; color: var(--muted); }
  .app:is(.desktop, .wide) nav.bar button.on { background: var(--selected); color: var(--text); }
  .app:is(.desktop, .wide) nav.bar button.on .g { color: var(--text); }
  .app:is(.desktop, .wide) nav.bulk .cnt { height: auto; padding: 8px 10px; font-size: 1rem; }
  .sfoot { margin-top: auto; display: grid; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.923rem; }
  .sfoot .slive { display: inline-flex; align-items: center; gap: 6px; --sc: var(--muted); }
  .sfoot .slive.live { --sc: var(--open); }
  .sfoot .slive.stale { --sc: var(--danger); }
  .app:is(.desktop, .wide) nav.bar .sfoot button { height: auto; margin: 0; padding: 0; border-radius: 0; font-size: inherit; line-height: inherit; color: var(--muted); }
  /* Rows at the mockup's density, and an opaque base under the selection's tint: the swipe labels lie beneath .rc. */
  .app:is(.desktop, .wide) .row .rc { min-height: 40px; padding-top: 3px; padding-bottom: 3px; }
  .app:is(.desktop, .wide) .row.sel .rc { background: linear-gradient(var(--selected), var(--selected)) var(--bg); }
  .app:is(.desktop, .wide) .row.marked .rc { background: linear-gradient(var(--row-marked), var(--row-marked)) var(--bg); }
  .app:is(.desktop, .wide) :is(.row, .card, .wepic, .rel, .lane, .ph, .item, .opt) { cursor: pointer; }
  .app:is(.desktop, .wide) .bbody.dragging, .app:is(.desktop, .wide) .bbody.dragging * { cursor: grabbing; }
  /* Hover: one wash on everything a mouse can press, only where a pointer can hover. */
  @media (hover: hover) {
    .app:is(.desktop, .wide) .row:hover:not(.sel, .marked) .rc { background: linear-gradient(var(--hover), var(--hover)) var(--bg); }
    .app:is(.desktop, .wide) .card:hover:not(.sel), .app:is(.desktop, .wide) .wepic:hover:not(.sel) { background: var(--hover); }
    .app:is(.desktop, .wide) nav.bar button:hover { background: var(--hover); color: var(--text); }
    .app:is(.desktop, .wide) :is(.hd .ib, .hd .proj, .hd .dot, .chip, .tab, .rel, .item, .opt, .lane, .ph, .crumbs button, .dtop button:not([disabled]), .dacts button, .dsec button, .fbar button, .shead button, .whead, .memoryTools button):hover { background: var(--hover); color: var(--text); }
    .app:is(.desktop, .wide) :is(.dtop button:not([disabled]), .dacts button, .dsec button, .fbar button, .shead button):hover { border-radius: 4px; }
  }
  /* The context menu: the swipe actions for a mouse, at the pointer and inside #app. */
  .cmenu { position: absolute; z-index: 50; min-width: 210px; max-width: 300px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); box-shadow: var(--lifted-shadow); outline: none; }
  .cmenu .cmh { display: flex; gap: 6px; align-items: baseline; margin-bottom: 4px; padding: 6px 8px 7px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.885rem; white-space: nowrap; overflow: hidden; }
  .cmenu .cmh .t { overflow: hidden; text-overflow: ellipsis; font-family: var(--ui); }
  .cmenu button { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; text-align: left; color: var(--text-soft); white-space: nowrap; }
  .cmenu button .g { width: 16px; text-align: center; color: var(--muted); }
  .cmenu button .x { flex: 1; }
  .cmenu button kbd { font-size: 0.846rem; color: var(--ghost); }
  .cmenu button:hover, .cmenu button:focus-visible { background: var(--hover); color: var(--text); }
  .cmenu button.red { color: var(--danger); }
  .cmenu .csep { height: 1px; margin: 4px 6px; background: var(--line-soft); }
  /* A sheet is a dialog in the middle of the window, not a phone's bottom sheet. */
  .app:is(.desktop, .wide) .msheet {
    top: 10vh; bottom: auto; left: 0; right: 0; width: min(560px, calc(100% - 48px)); margin: 0 auto; max-height: 80vh; padding-bottom: 0;
    border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--lifted-shadow);
    transform: translateY(16px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out;
  }
  .app:is(.desktop, .wide) .msheet.on { transform: none; opacity: 1; }
  .app:is(.desktop, .wide) .msheet .grab { display: none; }
  .app:is(.desktop, .wide) .msheet .mh { padding-top: 14px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
[hidden] { display: none !important; }

  #vMemory { overflow: hidden; background: var(--bg); }
  .memoryTools, .memoryLegend { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
  .memoryTools { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
  .memoryTools b { color: var(--text); margin-right: 2px; }
  .memoryTools label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.923rem; }
  .memoryTools select { max-width: min(360px, 70vw); height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 0 8px; }
  .memoryTools input[type="range"] { accent-color: var(--text-soft); }
  .memoryTools button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-soft); background: var(--bg); }
  .memoryTools button[aria-pressed="true"] { background: var(--selected); color: var(--text); box-shadow: inset 0 -2px var(--hi); }
  .memoryLegend { color: var(--muted); font-size: .85rem; line-height: 1.7; }
  .memoryLegend span { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
  .memoryTools, .memoryLegend { flex-shrink: 0; }
  .memoryCanvas { flex: 1 1 auto; min-height: 260px; position: relative; background: var(--bg); }
  .memoryCanvas svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
  .memoryCanvas [data-node] { touch-action: none; }
  #vMemory.memoryNoLabels .memoryEdgeLabel { display: none; }
  .memoryCanvas [data-node] { cursor: pointer; outline: none; }
  .memoryCanvas [data-node] { color: var(--text-soft); transition: opacity 160ms; }
  .memoryCanvas [data-node][data-kind="issue"] { color: var(--text-soft); }
  .memoryCanvas .memoryCard { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1.5; }
  .memoryCanvas [data-node]:hover .memoryCard, .memoryCanvas [data-node]:focus .memoryCard { stroke: var(--text-soft); stroke-width: 2.5; }
  .memoryCanvas [aria-pressed="true"] .memoryCard { stroke: var(--hi); stroke-width: 2.5; }
  .memoryCanvas text { fill: var(--text-soft); font-size: 12px; }
  .memoryCanvas .memoryCardTitle { fill: var(--text); font-size: 13px; font-weight: 600; }
  .memoryCanvas .memoryCardID, .memoryCanvas .memoryLane { fill: var(--muted); font-size: 11px; }
  .memoryOverview .memoryCardKind, .memoryOverview .memoryCardTitle { visibility: hidden; }
  .memoryOverview .memoryCardID { fill: currentColor; font-size: calc(10px / var(--memory-scale)); transform: translateY(-28px); }
  .memoryOverview [data-kind="issue"] .memoryCardID { transform: translateY(65px); }
  .memoryOverview .memoryEdgeLabel { opacity: 0; }
  .memoryOverview [data-edge-kind]:hover .memoryEdgeLabel, .memoryOverview .memoryEdgeLabel:focus { opacity: 1; }
  .memoryCanvas [data-edge-kind] > path { stroke-width: var(--memory-line, 2px); }
  .memoryStep { display: flex; align-items: center; gap: 6px; }
  .memoryZoom { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
  .memoryZoom button { min-width: 36px; min-height: 36px; font-size: 1.2rem; }
  .memoryZoom output { min-width: 5ch; text-align: center; color: var(--dim); }
  .memoryStep output { min-width: 3ch; text-align: center; }
  .memoryLegend svg { vertical-align: middle; overflow: visible; }
  .memoryLegend small { opacity: .7; }
  .memoryCanvas .memoryEdgeLabel { cursor: pointer; }
  .memoryCanvas .memoryEdgeLabel rect { fill: var(--surface-2); stroke: var(--line); stroke-width: .5; }
  .memoryCanvas .memoryEdgeLabel text { pointer-events: none; fill: var(--text-soft); }
  .memoryCanvas .memoryEdgeLabel:focus { text-decoration: underline; outline: none; }
  .memoryCanvas [data-edge-kind] { transition: opacity 160ms; }
  .memoryDim { opacity: calc(var(--memory-fade, .75) * .6); }
  .memoryCanvas [data-node].memoryDim { opacity: var(--memory-fade, .75); }
  .issueMemoryLink { margin: 10px 0; padding: 10px; border-left: 2px solid var(--line); }
  .issueMemoryLink summary { cursor: pointer; line-height: 1.7; }
  .issueMemoryLink summary span { color: var(--dim); font-size: .85rem; }
  .issueMemoryLink small { overflow-wrap: anywhere; color: var(--dim); }
  #native-conflicts details { margin: 12px 0; padding: 8px; border: 1px solid var(--line); }
  #native-conflicts p { white-space: pre-wrap; overflow-wrap: anywhere; }
  #native-conflicts h4 { margin: 12px 0 4px; text-transform: capitalize; }