/* The app shell: frame, topbar, sidebar, dock, sheets, guide, X-ray, murmurs, Ring and page transitions */

/* ---------- Frame (mobile first) ---------- */
.app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "top" "content"; }
.topbar { grid-area: top; }
.content { grid-area: content; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; outline: none; view-transition-name: page; }
.sidebar, .toc { display: none; }

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; padding-top: var(--safe-t); color: var(--ink); view-transition-name: topbar;
  transition: background var(--d-2), box-shadow var(--d-2), color var(--d-2); }
.tb-in { height: var(--topbar-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px;
  padding: 0 max(6px, var(--safe-r)) 0 max(6px, var(--safe-l)); }
.tb-back, .tb-brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-pill); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tb-back { gap: 0; padding: 0 12px 0 2px; color: var(--lapis); font: 600 var(--t-callout)/1 var(--f-body); max-width: 100%; }
.tb-back .ico { width: 26px; height: 26px; stroke-width: 2.3; flex: none; }
.tb-back-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-brand { gap: 9px; padding: 0 12px 0 10px; color: inherit; font: 750 1.125rem/1 var(--f-display); letter-spacing: -.02em; }
.tb-title { grid-column: 2; max-width: 52vw; font: 650 var(--t-callout)/1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity var(--d-2), transform var(--d-2) var(--ease-out); }
.tb-acts { grid-column: 3; justify-self: end; display: flex; gap: 0; }
#tb-still .ico + .ico { display: none; }
#tb-still[aria-pressed="true"] .ico:first-child { display: none; }
#tb-still[aria-pressed="true"] .ico + .ico { display: block; }
#tb-still[aria-pressed="true"] { color: var(--lapis); }
.topbar.is-solid { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 1px 0 var(--glass-line); }
.topbar.is-compact .tb-title { opacity: 1; transform: none; }
.topbar.is-over { color: #fff; }
.topbar.is-over .tb-back { color: #fff; }

/* ---------- Sidebar (desktop) ---------- */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 12px 10px 20px; color: var(--ink); text-decoration: none; font: 750 1.3rem/1 var(--f-display); letter-spacing: -.025em; }
.sb-brand em { margin-left: auto; padding: 4px 8px; border-radius: var(--r-pill); font: 600 .6875rem/1 var(--f-mono); font-style: normal; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.nav-group { padding: 4px 0 16px; }
.nav-sec { display: block; margin: 0; padding: 8px 10px 6px; font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
a.nav-sec:hover, a.nav-sec[aria-current="page"] { color: var(--ink); }
.nav-sub { margin: 0; padding: 10px 10px 4px; font: 600 var(--t-cap)/1 var(--f-body); color: var(--ink-3); }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; border-radius: 11px; color: var(--ink-2); text-decoration: none;
  font: 500 var(--t-sub)/1.2 var(--f-body); -webkit-tap-highlight-color: transparent; transition: background var(--d-1), color var(--d-1); }
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--e-1), inset 0 0 0 1px var(--line); }
.nav-pic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.nav-pic .pic { width: 20px; height: 20px; stroke-width: 3; }

/* ---------- Footer ---------- */
.app-foot { margin-top: auto; padding: 36px var(--gutter) calc(var(--dock-h) + var(--safe-b) + 48px); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-foot); line-height: 1.5; }
.af-in { max-width: var(--measure); margin: 0 auto; display: grid; gap: 12px; }
.af-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 750 1.125rem/1 var(--f-display); letter-spacing: -.02em; }
.af-links { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 0; }
.af-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.af-links a:hover { text-decoration: underline; }
.af-small { color: var(--ink-3); }

/* ---------- Table of contents (wide screens) ---------- */
.toc-t { margin: 0 0 10px; font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 10px; margin-left: -13px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: var(--t-foot); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.is-here { color: var(--ink); border-left-color: var(--lapis); font-weight: 600; }

@media (min-width: 1024px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "side top" "side content"; }
  .sidebar { display: block; grid-area: side; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 16px 14px 120px; border-right: 1px solid var(--line); }
  .tb-brand { visibility: hidden; }
  #dock-index { display: none; }
}
@media (min-width: 1280px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); grid-template-areas: "side top top" "side content toc"; }
  .app:has(.toc:empty) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "side top" "side content"; }
  .toc:empty { display: none !important; }
  .toc { display: block; grid-area: toc; position: sticky; top: calc(var(--topbar-h) + 28px); align-self: start; max-height: calc(100dvh - var(--topbar-h) - 56px); overflow: auto; padding: 0 28px 24px 0; }
}

/* ---------- Dock: the thumb zone ---------- */
.dock { position: fixed; z-index: 45; left: 50%; bottom: calc(12px + var(--safe-b)); display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: var(--e-2), inset 0 0 0 1px var(--glass-line); transform: translateX(-50%); view-transition-name: dock;
  transition: transform var(--d-3) var(--ease-spring), opacity var(--d-2); }
.dock.is-tucked { transform: translateX(-50%) translateY(calc(100% + 24px + var(--safe-b))); opacity: 0; }
.dock-btn { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 66px; height: 52px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font: 600 .6875rem/1 var(--f-body); -webkit-tap-highlight-color: transparent;
  transition: background var(--d-2), color var(--d-2), transform var(--d-1) var(--ease-out); }
.dock-btn .ico { width: 22px; height: 22px; }
.dock-btn:hover { color: var(--ink); }
.dock-btn:active, .dock-orb:active { transform: scale(.94); }
.dock-btn[aria-pressed="true"] { color: var(--ground); background: var(--ink); }
.dock-orb { display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 2px; padding: 0 20px 0 9px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--ground); font: 650 var(--t-sub)/1 var(--f-body); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 20px -10px oklch(0 0 0 / .5); transition: transform var(--d-1) var(--ease-out); }
.orb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pigment-c); }
.orb .mm { width: 13px; height: 13px; background: var(--ink); }
.dock-orb.is-live .orb { animation: spin var(--beat) linear infinite; }

/* On large screens the dock joins the top bar, beside Still and Settings, clear of the content */
.dock-kbd { display: none; }
@media (min-width: 1024px) {
  .dock { left: auto; right: calc(116px + var(--safe-r)); top: calc(var(--safe-t) + (var(--topbar-h) - 44px) / 2); bottom: auto; padding: 3px; transform: none;
    background: var(--surface); box-shadow: var(--e-1), inset 0 0 0 1px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock.is-tucked { transform: none; opacity: 1; }
  .dock-btn { grid-auto-flow: column; gap: 7px; min-width: 0; height: 38px; padding: 0 14px; font-size: var(--t-foot); }
  .dock-btn .ico { width: 18px; height: 18px; }
  .dock-orb { height: 38px; gap: 8px; padding: 0 15px 0 5px; font-size: var(--t-foot); box-shadow: none; }
  .orb { width: 28px; height: 28px; }
  .orb .mm { width: 10px; height: 10px; }
  .dock-kbd { display: inline-block; margin-left: 2px; padding: 3px 6px; border-radius: 6px; background: color-mix(in oklch, var(--ground) 18%, transparent); font: 600 .6875rem/1 var(--f-mono); }
}

/* ---------- Sheets ---------- */
.sheet-layer { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity var(--d-3) var(--ease-flow); }
.sheet { position: relative; width: min(100%, 680px); max-height: calc(100dvh - var(--safe-t) - 16px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink); border-radius: 30px 30px 0 0; box-shadow: var(--e-3), inset 0 0 0 1px var(--glass-line);
  transform: translateY(105%); transition: transform 480ms var(--ease-out); will-change: transform; outline: none; }
.sheet.tall { height: calc(100dvh - var(--safe-t) - 16px); }
.sheet-layer.is-open .sheet { transform: translateY(var(--drag, 0px)); }
.sheet-layer.is-open .sheet-backdrop { opacity: 1; }
.sheet.is-dragging { transition: none; }
.sheet-grip { flex: none; display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.sheet-grip span { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); }
.sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 8px 20px; touch-action: none; }
.sheet-head h2 { flex: 1; margin: 0; font: 750 var(--t-2)/1.15 var(--f-display); letter-spacing: -.02em; }
.sheet-head .icon-btn { background: var(--surface-2); width: 36px; height: 36px; }
.sheet-head .icon-btn .ico { width: 18px; height: 18px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(20px + var(--safe-b)); }
@media (min-width: 1024px) {
  .sheet-layer { align-items: center; }
  .sheet-layer .sheet { border-radius: 28px; width: min(560px, calc(100% - 48px)); max-height: min(760px, calc(100dvh - 64px)); transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform var(--d-3) var(--ease-out), opacity var(--d-2); }
  .sheet-layer.is-open .sheet { transform: none; opacity: 1; }
  .sheet-layer .sheet-grip { display: none; }
  .sheet-layer .sheet-head { padding-top: 16px; }
  .sheet-layer.is-side { justify-items: end; align-items: stretch; }
  .sheet-layer.is-side .sheet { width: 440px; height: 100dvh; max-height: none; border-radius: 0; transform: translateX(100%); opacity: 1; box-shadow: var(--e-3), -1px 0 0 var(--line); }
  .sheet-layer.is-side.is-open .sheet { transform: none; }
  .sheet-layer.is-side .sheet-backdrop { background: oklch(.15 .02 265 / .14); }
}

/* Index sheet */
.ix-search { position: sticky; top: 0; z-index: 1; padding: 2px 0 12px; background: var(--surface); }
.ix-search .field { border-radius: var(--r-pill); padding-left: 44px; min-height: 46px; background: var(--surface-2); }
.ix-search .ico { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.sheet .nav-link { min-height: 48px; font-size: var(--t-callout); border-radius: 13px; }
.sheet .nav-pic { width: 32px; height: 32px; border-radius: 9px; }
.sheet .nav-pic .pic { width: 24px; height: 24px; }
.ix-empty { padding: 24px 4px; color: var(--ink-2); }

/* Settings sheet */
.set-k { margin: 14px 4px 8px; font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.set-group { display: grid; gap: 1px; border-radius: var(--r-md); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 16px; background: var(--surface-2); }
.set-row > span { display: grid; gap: 2px; font: 600 var(--t-callout)/1.25 var(--f-body); }
.set-row small { font: 400 var(--t-foot)/1.35 var(--f-body); color: var(--ink-2); }
.set-row .segmented { flex: none; }
.set-about { margin: 18px 4px 4px; color: var(--ink-2); font-size: var(--t-foot); line-height: 1.5; }

/* ---------- Guide ---------- */
.guide { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.g-sub { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; color: var(--ink-2); font-size: var(--t-foot); }
.g-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 6px 20px 18px; }
.g-q { align-self: flex-end; max-width: 86%; padding: 11px 15px; border-radius: 20px 20px 6px 20px; background: var(--surface-3); color: var(--ink); font: 500 var(--t-callout)/1.4 var(--f-body); }
.g-a { display: grid; gap: 10px; }
.g-a-k { display: flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-a p { font: 560 var(--t-callout)/1.5 var(--f-body); }
.g-a blockquote { padding-left: 12px; border-left: 2px solid var(--line-2); }
.g-pins, .g-acts, .g-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.g-pin { text-decoration: none; }
.g-pin .ico { width: 14px; height: 14px; }
.g-empty { display: grid; gap: 14px; padding: 8px 0; }
.g-empty h3 { font: 700 var(--t-3)/1.25 var(--f-display); }
.g-empty p { color: var(--ink-2); font-size: var(--t-sub); }
.g-sugs .chip { font: 600 var(--t-foot)/1.2 var(--f-body); padding: 9px 13px; color: var(--ink); text-align: left; }
.g-form { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); }
.g-field { position: relative; flex: 1; min-width: 0; }
.g-field canvas { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; }
.g-field .field { position: relative; border-radius: var(--r-pill); padding: 0 18px; background: var(--surface-2); border-color: transparent; }
.g-send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: var(--ground); }
.g-send .ico { width: 20px; height: 20px; }
.g-send:disabled { opacity: .35; }
.g-note { padding: 0 20px 8px; color: var(--ink-3); font-size: var(--t-cap); }
.cited { border-radius: 8px; animation: cited var(--beat) var(--ease-flow) both; }
@keyframes cited { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--tyrian) 30%, transparent); background: color-mix(in oklch, var(--tyrian) 8%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; background: transparent; } }

/* ---------- Global lasso ---------- */
.lasso-g { position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--ink); color: var(--ground);
  box-shadow: var(--e-3); animation: pop var(--d-2) var(--ease-spring); }
.lasso-g .mm { margin: 0 4px 0 7px; }
.lasso-g button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 0; background: transparent; color: inherit; font: 650 var(--t-foot)/1 var(--f-body); padding: 0 12px; border-radius: var(--r-pill); white-space: nowrap; }
.lasso-g button:hover, .lasso-g button:focus-visible { background: color-mix(in oklch, var(--ground) 16%, transparent); }
.lasso-g .ico { width: 16px; height: 16px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* ---------- X-ray ---------- */
.xr-layer { position: fixed; inset: 0; z-index: 39; pointer-events: none; }
.xr-box { position: absolute; border-radius: 12px; }
.xr-box[data-r="read"] { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--tyrian) 45%, transparent); background: color-mix(in oklch, var(--tyrian) 4%, transparent); }
.xr-box[data-r="write"], .xr-box[data-r="act"] { box-shadow: inset 0 0 0 2px var(--tyrian), 0 0 0 4px color-mix(in oklch, var(--tyrian) 16%, transparent); }
.xr-box[data-r="prepare"] { box-shadow: inset 0 0 0 2px var(--tyrian); background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--tyrian) 10%, transparent) 0 6px, transparent 6px 12px); }
.xr-box[data-r="person"] { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px color-mix(in oklch, var(--ink) 10%, transparent); }
.xr-tag { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 12px); padding: 4px 8px 4px 6px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--e-2); font: 600 .6875rem/1 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-box.is-small .xr-tag { top: auto; bottom: calc(100% + 4px); left: 0; }
.xr-legend { position: fixed; z-index: 46; left: 12px; right: 12px; top: calc(var(--safe-t) + var(--topbar-h) + 8px); width: fit-content; max-width: 34rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  padding: 8px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--ground); box-shadow: var(--e-3); font: 600 .6875rem/1.3 var(--f-mono); animation: pop var(--d-2) var(--ease-spring); }
.xr-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xr-legend .r-none { box-shadow: inset 0 0 0 1.5px var(--ground); }

/* ---------- Murmurs: the AI-era snackbar, above the dock ---------- */
.murmurs { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(var(--dock-h) + var(--safe-b) + 24px); display: grid; gap: 8px; pointer-events: none; }
@media (min-width: 640px) { .murmurs { left: auto; right: 20px; width: 400px; } }
.murmur { pointer-events: auto; touch-action: pan-y; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 11px 10px 11px 16px; border-radius: 18px; background: var(--ink); color: var(--ground); box-shadow: var(--e-3);
  animation: murmur-in 420ms var(--ease-spring); transform: translateX(calc(var(--sx, 0) * 1px)); }
.murmur.out { transition: transform 260ms var(--ease-flow), opacity 260ms; opacity: 0; }
@keyframes murmur-in { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.murmur.is-model { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 13px; }
.murmur .mm { width: 15px; height: 15px; }
.murmur.live .mm { animation: spin var(--beat) linear infinite; }
.murmur .txt { font-size: var(--t-sub); line-height: 1.35; min-width: 0; }
.murmur .txt b { font-weight: 650; }
.murmur .acts { display: flex; gap: 4px; }
.murmur .acts button { border: 0; background: transparent; color: inherit; font: 650 var(--t-foot)/1 var(--f-body); min-height: 36px; padding: 0 10px; border-radius: 10px; }
.murmur .acts button.primary { background: color-mix(in oklch, var(--ground) 16%, transparent); }
.murmur .life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: var(--lapis); animation: life var(--life, 6s) linear forwards; }
.murmur:hover .life { animation-play-state: paused; }
@keyframes life { to { transform: scaleX(0); } }

/* ---------- Ring: the keyboard on demand (global) ---------- */
.ring-fab { position: fixed; left: 0; top: 0; z-index: 90; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--lapis); display: grid; place-items: center; touch-action: manipulation; box-shadow: var(--e-2);
  opacity: 0; transform: translate(var(--x), var(--y)) scale(.6); transition: opacity var(--signal), transform var(--signal) var(--ease-spring); }
.ring-fab.show { opacity: .6; transform: translate(var(--x), var(--y)); }
.ring-fab.show:hover, .ring-fab.show:active { opacity: 1; }
.ring-fab svg { width: 24px; height: 24px; }
.ringkb { --d: 272px; position: fixed; left: 0; top: 0; z-index: 90; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-3);
  transform: translate(var(--x), var(--y)) scale(var(--s, 1)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: default; }
.ringkb.live { transition: transform 360ms var(--ease-spring), opacity 220ms var(--ease-flow); }
.ringkb.closing { opacity: 0; }
.ringkb canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ring-sugg { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: flex; gap: 6px; }
.ring-sugg button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-pill); padding: 9px 14px; font: 650 var(--t-sub)/1 var(--f-display); white-space: nowrap; box-shadow: var(--e-2); }
.ring-sugg button.best { background: var(--tyrian); border-color: var(--tyrian); color: var(--on-ink); }
.rk { display: block; width: 100%; height: 100%; overflow: visible; }
.rk-eye { fill: var(--scrim); stroke: var(--line); stroke-width: 1; }
.rk-k circle { fill: transparent; }
.rk-k text { font: 600 13px var(--f-display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.rk-k.num text { font: 500 9.5px var(--f-mono); fill: var(--ink-2); }
.rk-k path { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rk-k .rk-iris { fill: var(--ground); stroke: var(--lapis); stroke-opacity: .5; stroke-width: 1.6; stroke-dasharray: .1 4.6; stroke-linecap: round; }
.rk-k .rk-sp { font: 600 6.5px var(--f-mono); letter-spacing: .14em; fill: var(--ink-2); }
.rk-k.on circle { fill: var(--lapis); } .rk-k.on text { fill: var(--on-ink); } .rk-k.on path { stroke: var(--on-ink); }

/* ---------- Brand mark: one spiral, five pigments ---------- */
.brand-mark .bm1 { stroke: var(--lapis); } .brand-mark .bm2 { stroke: var(--viridian); } .brand-mark .bm3 { stroke: var(--ochre); }
.brand-mark .bm4 { stroke: var(--madder); } .brand-mark .bm5 { stroke: var(--tyrian); }

/* ---------- Pictograms ---------- */
.pic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pic .kf { fill: currentColor; stroke: none; } .pic .dim { opacity: .38; }
.pic .p { fill: url(#pg); stroke: none; } .pic .ps { stroke: url(#pg); }
.pic .l { stroke: var(--lapis); } .pic .lf { fill: var(--lapis); stroke: none; }
.pic .t { stroke: var(--tyrian); } .pic .tf { fill: var(--tyrian); stroke: none; }
.pic .v { stroke: var(--viridian); } .pic .vf { fill: var(--viridian); stroke: none; }
.pic .o { stroke: var(--ochre); } .pic .of { fill: var(--ochre); stroke: none; }
.pic .m { stroke: var(--madder); }
.pic .sf { stroke: var(--surface); } .pic .sfill { fill: var(--surface); stroke: none; }

/* ---------- Page transitions (same-document view transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(page) { animation-duration: 360ms; }
::view-transition-old(page) { animation: vt-old 240ms var(--ease-flow) both; }
::view-transition-new(page) { animation: vt-new 360ms var(--ease-out) both; }
html[data-nav="back"]::view-transition-old(page) { animation-name: vt-old-back; }
html[data-nav="back"]::view-transition-new(page) { animation-name: vt-new-back; }
@keyframes vt-old { to { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-new { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-old-back { to { opacity: 0; transform: translateX(24px); } }
@keyframes vt-new-back { from { opacity: 0; transform: translateX(-32px); } }

/* Still: the shell stops moving too */
html.is-still .sheet, html.is-still .sheet-backdrop, html.is-still .dock, html.is-still .topbar, html.is-still .tb-title, html.is-still .ring-fab, html.is-still .ringkb { transition: none !important; }
html.is-still .lasso-g, html.is-still .xr-legend { animation: none; }

/* Guide: the log scrolls, the question field stays at the bottom */
.sheet-body.is-guide { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sheet-body.is-guide .guide { flex: 1; }
.g-body { display: grid; gap: 10px; }
.g-body p { margin: 0; }
.g-cite { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px; border-radius: 10px; vertical-align: 2px;
  background: color-mix(in oklch, var(--tyrian) 12%, var(--surface)); color: var(--tyrian); font: 700 .6875rem/1 var(--f-mono); text-decoration: none; }
.g-cite:hover { background: var(--tyrian); color: var(--on-ink); }
.g-pin b { font: 700 .6875rem/1 var(--f-mono); color: var(--tyrian); }
.g-acts .chip { gap: 7px; text-decoration: none; color: var(--ink); }
.g-a-k .mm { width: 10px; height: 10px; }
.g-note { flex: none; margin: 0; padding: 0 20px calc(8px + var(--safe-b)); }
.g-form { padding-bottom: 8px; }
/* Between 1024 and 1280 px the dock needs the top bar's middle; the sidebar already names the page */
@media (min-width: 1024px) and (max-width: 1279px) { .tb-title { display: none; } }