/* engram.css — the chosen visual pathway (2026-09-04) for the opened pages
   (map.html, room.html). Light is the base, dark the inversion of the same
   system. Mono for metadata, serif for content; hairline rules, never boxes;
   the region hues are the only saturated thing on screen.

   html[data-theme="engram-light" | "engram-dark"], html[data-colour="region" | "kind"]
   Tokens read by public/map/renderer.js:
     --c-center --c-region --c-node --c-node-alt --c-attach --c-quiet --c-idea --c-line --c-well --c-well-stroke
     --r0 … --r5 region palette
     --lane-blue --lane-purple --lane-green --lane-red  lane colours, named by framing.lanes.<key>.colour */

:root, html[data-theme="engram-light"] {
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --serif: var(--font);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #f7f5f0; --bg-2: #edeae2; --fg: #16151a; --muted: #6d6a63; --faint: #a5a199;
  --rule: rgba(22,21,26,0.16); --rule-soft: rgba(22,21,26,0.08);
  --r0: #e59a2a; --r1: #4a8fdc; --r2: #2fb389; --r3: #cf6ac4; --r4: #e5714a; --r5: #3aa9bd;
  --lane-blue: #2f74d0; --lane-purple: #8a4fcf; --lane-green: #3e9a62; --lane-red: #cf6b62;
  --c-center: var(--fg); --c-region: var(--muted); --c-node: var(--fg); --c-node-alt: var(--muted);
  --c-attach: var(--muted); --c-quiet: var(--faint); --c-idea: var(--fg);
  --c-line: var(--rule-soft); --c-well: transparent; --c-well-stroke: var(--rule-soft);
  --pad: 1.1rem;
  color-scheme: light;
}
html[data-theme="engram-dark"] {
  --bg: #0d0d0f; --bg-2: #171719; --fg: #eae8e3; --muted: #8c8880; --faint: #56534d;
  --rule: rgba(234,232,227,0.16); --rule-soft: rgba(234,232,227,0.07);
  --r0: #e8ae4a; --r1: #6ba4e0; --r2: #54c9a4; --r3: #dd85d2; --r4: #e3855f; --r5: #5fb8c9;
  --lane-blue: #5c9ce8; --lane-purple: #b28cf0; --lane-green: #63c08a; --lane-red: #e3918a;
  color-scheme: dark;
}

/* Type. The pathway is serif for content and mono for metadata; these are
   the alternatives Marguerite asked to compare. Metadata stays mono in all. */
html[data-font="sans"]    { --font: "Hanken Grotesk", -apple-system, system-ui, "Helvetica Neue", sans-serif; }
html[data-font="grotesk"] { --font: "Space Grotesk", -apple-system, system-ui, sans-serif; }
html[data-font="system"]  { --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif; }
html[data-font="mono"]    { --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
html[data-font="sans"], html[data-font="grotesk"], html[data-font="system"], html[data-font="mono"] { --serif: var(--font); }
html[data-font="sans"] body, html[data-font="grotesk"] body, html[data-font="system"] body { font-size: 16px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 17px; }
body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
button, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- chrome ---- */
.topbar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem var(--pad); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); z-index: 6; }
.topbar .name { color: var(--fg); letter-spacing: 0.22em; }
.topbar .phase { color: var(--muted); margin-left: auto; }
.topbar .live { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.topbar .live.on { background: var(--r2); }
.stage { position: relative; flex: 1; min-height: 0; }
.stage svg.constellation { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; z-index: 1; }
.stage svg.constellation.panning { cursor: grabbing; }
.hud { position: absolute; left: var(--pad); right: var(--pad); bottom: max(var(--pad), env(safe-area-inset-bottom)); z-index: 6; display: flex; gap: 0.6rem; align-items: flex-end; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hint { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.btn { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; padding: 0.55rem 0.8rem; cursor: pointer; min-height: 40px; }
.btn:hover { color: var(--fg); border-color: var(--fg); }
.btn.primary { background: var(--accent, var(--fg)); color: var(--bg); border-color: var(--accent, var(--fg)); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ---- map ---- */
.map-link { stroke: var(--c-line); stroke-width: 1; fill: none; }
.map-link.kind-informs { stroke-dasharray: 3 4; }
.map-link.kind-attach { stroke: var(--c-attach); opacity: 0.6; }
.map-node { stroke: none; cursor: pointer; transition: opacity 0.15s; }
html[data-theme="engram-light"] .map-node { stroke: rgba(22,21,26,0.22); stroke-width: 1px; paint-order: stroke; vector-effect: non-scaling-stroke; }
html[data-theme="engram-dark"] .map-node { filter: drop-shadow(0 0 6px currentColor); }
.map-node.suggested { opacity: 0.55; stroke: var(--c-region); stroke-width: 1.5; stroke-dasharray: 3 3; fill-opacity: 0.35; }
.map-node.shared { stroke: var(--fg); stroke-width: 1.2; }
.map-hit { fill: transparent; stroke: none; cursor: pointer; }
.map-well-disc { fill: var(--c-well); stroke: var(--c-well-stroke); stroke-width: 1; }
.map-well-disc.dashed { fill: none; stroke: var(--faint); stroke-dasharray: 2 5; stroke-opacity: 0.8; vector-effect: non-scaling-stroke; }
.map-well.suggested .map-well-disc { stroke-dasharray: 4 4; }
.map-label { fill: var(--fg); text-anchor: middle; pointer-events: none; font-family: var(--mono); }
.map-label-region { font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted); }
.map-label-region.suggested { fill: var(--faint); }
.map-label-piece { font-family: var(--serif); font-size: 9px; }
.map-label-attach { font-size: 8px; }
.map-label-center { font-family: var(--serif); font-size: 15px; }
/* The HOW's headline in the tree layout: serif, sentence case, room to read. */
.map-label-how { font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; fill: var(--muted); }
.map-label-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--faint); }
.map-label-center.why { font-size: 26px; font-weight: 500; }
/* Twin links join the instances of one card; visible only while it is focused. */
.map-link.kind-twin { stroke: var(--fg); stroke-dasharray: 2 4; opacity: 0; vector-effect: non-scaling-stroke; }
.map-viewport.has-focus > .map-link.kind-twin.on { opacity: 0.6; }
.map-goal-star path { fill: var(--c-center); }
.map-goal-star.outline path { fill: none; stroke: var(--c-center); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.map-center-diamond { fill: none; stroke: var(--c-center); stroke-width: 1; }
.map-center-silhouette { fill: none; stroke: var(--c-center); stroke-dasharray: 4 5; stroke-width: 1.5; opacity: 0.6; }
.map-idea-ring { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-opacity: 0.9; vector-effect: non-scaling-stroke; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: ideaPulse 2.8s ease-in-out infinite; }
html[data-theme="engram-dark"] .map-idea-ring { filter: drop-shadow(0 0 4px currentColor); }
.map-idea-core { fill: var(--c-idea); pointer-events: none; }
@keyframes ideaPulse { 0%, 100% { transform: scale(1); stroke-opacity: 0.9; } 50% { transform: scale(1.22); stroke-opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .map-idea-ring { animation: none; } }
.map-viewport.has-focus > *:not(.on) { opacity: 0.07; transition: opacity 0.15s; }
.map-viewport.has-focus > .on { opacity: 1; }
.map-viewport.has-focus > .map-node.on { stroke: currentColor; stroke-width: 1px; stroke-opacity: 0.55; paint-order: stroke; }

/* ---- sheet (node detail) ---- */
.sheet { position: absolute; z-index: 10; background: var(--bg); border-top: 1px solid var(--fg); padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); display: none; font-size: 15px; line-height: 1.45; overflow: auto; }
.sheet.show { display: block; }
/* phone: bottom sheet; wide: corner card */
.sheet { left: 0; right: 0; bottom: 0; max-height: 72%; }
@media (min-width: 760px) { .sheet { left: auto; right: var(--pad); bottom: var(--pad); width: min(400px, 44vw); max-height: 70%; border: 1px solid var(--fg); border-top-width: 1px; } }
.sheet .close { position: absolute; top: 0.5rem; right: 0.7rem; border: 0; background: transparent; color: var(--faint); font-size: 1.05rem; cursor: pointer; padding: 0.25rem 0.5rem; }
.sheet .expand { position: absolute; top: 0.5rem; right: 2.5rem; border: 0; background: transparent; color: var(--faint); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; }
.sheet .expand:hover, .sheet .close:hover { color: var(--fg); }
.sheet .kind { padding-right: 4.2rem; }
/* Expanded for presenting: centred and large, the picture still visible behind. */
.sheet.big { left: 50% !important; top: 50%; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: min(880px, 86vw) !important; max-height: 82% !important; font-size: 21px; padding: 1.6rem 2rem; border: 1px solid var(--fg); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(2px); z-index: 24; }
.sheet.big .kind { font-size: 0.72rem; padding-right: 5rem; }
.sheet.big .content { font-size: 1.7rem; line-height: 1.25; }
.sheet.big .raw, .sheet.big .idea p { font-size: 1.15rem; }
.sheet.big .sec-label, .sheet.big .raw-label { font-size: 0.66rem; }
.sheet.big .meta { font-size: 0.72rem; }
.sheet.big .close { font-size: 1.4rem; top: 0.8rem; right: 1rem; }
.sheet.big .expand { top: 0.8rem; right: 2.9rem; font-size: 1.4rem; }
.sheet .kind { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; display: flex; gap: 0.6rem; align-items: baseline; padding-right: 1.6rem; }
.sheet .meta { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.sheet .meta .count { margin-left: auto; color: var(--hue, var(--fg)); white-space: nowrap; letter-spacing: 0.1em; text-transform: uppercase; }
.sheet .meta .count::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--hue, var(--fg)); margin-right: 0.35rem; vertical-align: 0.05em; }
.sheet .content { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.5rem; }
.sheet .meta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--muted); }
.sheet .raw { margin: 0 0 0.6rem; padding-left: 0.8rem; border-left: 1px solid var(--rule); color: var(--muted); font-style: italic; font-size: 0.95rem; }
.sheet .raw-label, .composer .recap-label { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-style: normal; margin-bottom: 0.15rem; }
/* Step order (theme.view.sheet = "steps"): the card reads in the composer's
   sequence, each section under its step label; the count lives on the boost
   button (phone) or in the kind line (room, board). */
.sheet .sec { margin: 0 0 0.9rem; }
.sheet .sec-label { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hue, var(--muted)); margin-bottom: 0.2rem; }
.sheet .sec .content { margin-bottom: 0; }
.sheet .sec .raw { margin-bottom: 0; }
.sheet .sec .ideas { margin-top: 0.4rem; }
.sheet .sec .propose { margin-top: 0.6rem; }
.sheet .meta.foot { margin-top: 0.8rem; }
.sheet .ideas { margin: 1rem 0 0.4rem; }
.sheet .ideas-head { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hue, var(--fg)); font-weight: 600; margin-bottom: 0.55rem; display: flex; gap: 0.5rem; align-items: baseline; }
.sheet .ideas-head b { font-size: 1.15rem; font-weight: 600; }
.sheet .idea-grid { display: grid; gap: 0.55rem; }
.sheet .idea { position: relative; padding: 0.8rem 0.9rem 0.7rem 2.1rem; border: 1px solid color-mix(in srgb, var(--hue, var(--fg)) 45%, transparent); background: color-mix(in srgb, var(--hue, var(--fg)) 12%, var(--bg)); border-radius: 2px; }
.sheet .idea-mark { position: absolute; left: 0.75rem; top: 0.7rem; color: var(--hue, var(--fg)); font-size: 1rem; line-height: 1.3; }
.sheet .idea p { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.sheet .idea-by { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--hue, var(--fg)) 70%, var(--fg)); }
.sheet .ideas.empty { padding: 0.8rem 0.9rem; border: 1px dashed var(--rule); color: var(--muted); font-size: 0.95rem; font-style: italic; border-radius: 2px; }
.sheet .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.sheet .boost { border: 1px solid var(--rule); background: transparent; color: var(--muted); border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; min-height: 40px; }
.sheet .boost::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--hue, var(--fg)); }
.sheet .boost.on { border-color: var(--hue, var(--fg)); color: var(--fg); }
.sheet .boost:hover { color: var(--fg); border-color: var(--fg); }
.sheet .propose { border: 1px solid var(--hue, var(--fg)); background: var(--hue, var(--fg)); color: var(--bg); border-radius: 2px; padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; min-height: 40px; }
.sheet .propose:hover { filter: brightness(1.08); }
.sheet .members { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.sheet .members li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.95rem; cursor: pointer; }
.sheet .members li span { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }

/* ---- join QR (theme.view.qr = "corner"; room and board) ----
   A small card above the hud; tap or press q for the large version. */
.qr { position: absolute; right: var(--pad); top: var(--pad); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.qr svg { display: block; width: 104px; height: 104px; }
.qr svg rect { fill: var(--bg); }
.qr svg path { fill: var(--fg); }
.qr-cap { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.6; max-width: 180px; }
.qr-url { display: block; overflow-wrap: anywhere; hyphens: none; letter-spacing: 0.04em; color: var(--fg); }
.qr .qr-open { padding: 0.35rem 0.6rem; min-height: 30px; font-size: 0.58rem; }
.qr .qr-close { display: none; position: absolute; top: 0.4rem; right: 0.6rem; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; }
.qr .qr-close:hover { color: var(--fg); }
/* The modal: centred, large, with a close; the room fades behind it. */
.qr.big { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); padding: 2rem 2.4rem 1.6rem; gap: 1.1rem; border-color: var(--fg); z-index: 25; cursor: default; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 72%, transparent); }
.qr.big svg { width: min(58vh, 72vw); height: min(58vh, 72vw); }
.qr.big .qr-cap { font-size: 0.85rem; max-width: none; }
.qr.big .qr-url { font-size: 1rem; letter-spacing: 0.08em; }
.qr.big .qr-open { display: none; }
.qr.big .qr-close { display: block; }

/* ---- composer (submit / attach) ---- */
.composer { position: absolute; inset: 0; z-index: 20; background: var(--bg); display: none; flex-direction: column; padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); overflow: auto; }
.composer.show { display: flex; }
.composer .step { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem; }
.composer .prompt { font-size: 1.3rem; line-height: 1.3; margin: 0 0 0.4rem; }
.composer .help { color: var(--muted); font-size: 0.95rem; font-style: italic; margin: 0 0 1rem; }
.composer .quote { border-left: 1px solid var(--rule); padding-left: 0.8rem; color: var(--muted); font-style: italic; margin: 0 0 1rem; }
.composer textarea, .composer input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0.7rem 0; font-size: 1.1rem; line-height: 1.4; resize: none; -webkit-appearance: none; }
.composer textarea:focus, .composer input:focus { outline: none; border-bottom-color: var(--fg); }
.composer textarea::placeholder, .composer input::placeholder { color: var(--faint); }
/* Actions sit right under the field so the phone keyboard never hides them. */
.composer .row { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.composer .row .btn { flex: 1 1 auto; }
.composer .done-mark { font-size: 2.4rem; line-height: 1; color: var(--accent, var(--fg)); margin: 1.2rem 0 0.8rem; }
.composer .quote .by { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; }
.composer .row.finish { margin-top: 1.6rem; }
.composer .err { color: var(--r4); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; margin-top: 0.5rem; min-height: 1em; }
.toast { position: absolute; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 30; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 2px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.toast.show { opacity: 1; }
.closed { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); text-align: center; padding: 3rem 1rem; }