/* THE DOMAIN (v7 "the living app"): a world that grows from what you build.
   Same holo look as every other tab: hub-panel frames (amber corner brackets,
   scanlines), cyan --holo lines and headings, amber brand text, mono labels.
   The world is drawn on the canvas in the dark; everything on top is a plain,
   readable holo panel. --dom-c is the stage colour (domain.js); it tints the
   world and the stage chip only.
   Hub rules: no backdrop-filter, no looping animations on big surfaces (the
   canvas repaints every frame). Phones (≤820px): panels stack under the stage. */

#tab-domain { --dom-c: #4fe3ff; --dom-void: #02040a; --dom-ink: var(--text, #f3e6c8); --dom-dim: #8fa6b6; }

.dom-wrap { position: relative; }
.dom-stage.hub-panel { position: relative; height: clamp(540px, calc(100vh - var(--nav-h, 56px) - 210px), 880px);
  overflow: hidden; background: var(--dom-void); }
.dom-stage.hub-panel::before { inset: 0; }  /* brackets inside: the stage clips its overflow */
.dom-stage > :not(canvas) { z-index: 3; }
.dom-stage.reveal { animation: domReveal .9s cubic-bezier(.16, 1, .3, 1) both; }
.dom-stage.reveal-q { animation: domReveal .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes domReveal { from { clip-path: circle(0% at 50% 56%); } to { clip-path: circle(150% at 50% 56%); } }
#dom-world { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#dom-world.can-grab { cursor: grab; }
#dom-world.grab { cursor: grabbing; }

/* ---- HUD over the world ---------------------------------------------------------------- */
.dom-head { position: absolute; left: 22px; top: 20px; max-width: min(460px, 58%); pointer-events: none; }
.dom-head > * { pointer-events: auto; }
.dom-kan { font: 600 11px/1 "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; letter-spacing: .7em;
  color: var(--holo); opacity: .75; margin-bottom: 8px; }
.dom-name { display: block; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: text;
  font: 800 clamp(18px, 2.4vw, 26px)/1.15 var(--mono); letter-spacing: .22em; color: var(--amber); text-transform: uppercase;
  text-shadow: 0 0 14px var(--glow); }
.dom-name:hover { filter: brightness(1.15); background: none; }
.dom-name-in { font: 800 20px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: rgba(2, 8, 14, .9);
  color: var(--amber); border: 1px solid var(--holo); border-radius: 6px; padding: 4px 8px; width: min(420px, 100%); }
.dom-stageline { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; color: var(--dom-dim); font: 12px/1.4 var(--mono); }
.dom-chip { flex: none; font: 800 10px/1 var(--mono); letter-spacing: .26em; color: var(--dom-c); border: 1px solid var(--dom-c);
  background: rgba(2, 8, 14, .8); padding: 5px 8px 4px; border-radius: 3px; box-shadow: 0 0 12px color-mix(in srgb, var(--dom-c) 40%, transparent); }
.dom-meter { margin-top: 12px; width: min(300px, 100%); height: 6px; border: 1px solid var(--holo-dim); background: rgba(2, 8, 14, .8); border-radius: 3px; overflow: hidden; }
.dom-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a7aff, var(--holo)); box-shadow: 0 0 10px rgba(79, 227, 255, .5); transition: width .8s ease; }
.dom-meter-l { margin-top: 6px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--dom-dim); }

.dom-stats { position: absolute; right: 18px; top: 20px; display: flex; gap: 8px; }
.dom-stat { min-width: 78px; padding: 8px 10px 7px; border-radius: 6px; background: var(--hub-bg); border: 1px solid var(--holo-dim); text-align: right;
  box-shadow: 0 0 24px rgba(79, 227, 255, .06) inset; }
.dom-stat b { display: block; font: 800 18px/1 var(--mono); color: var(--dom-ink); }
.dom-stat span { display: block; margin-top: 5px; font: 700 9px/1 var(--mono); letter-spacing: .24em; color: var(--holo); opacity: .8; }
.dom-stat.hot b { color: var(--amber); text-shadow: 0 0 12px var(--glow); }

.dom-spin { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); font: 600 10px var(--mono); letter-spacing: .2em;
  color: var(--dom-dim); text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.dom-spin.full { color: var(--amber); }
.dom-tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 11px; border-radius: 6px; background: var(--hub-bg);
  border: 1px solid var(--holo-dim); font: 12px/1.5 var(--mono); color: #cfe9ff; max-width: 250px; }
.dom-tip.hidden { display: none; }
.dom-tip b { font: 800 10px var(--mono); letter-spacing: .22em; }

/* ---- the dock (styled like the tab bar) ------------------------------------------------ */
.dom-dock { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px;
  border-radius: 6px; background: rgba(5, 7, 12, .97); border: 1px solid rgba(79, 227, 255, .22); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.dom-dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 66px; padding: 8px 8px 7px;
  background: none; border: 0; border-radius: 4px; color: #6c8494; cursor: pointer; }
.dom-dock button b { font-size: 16px; line-height: 1; font-weight: 400; color: var(--holo); }
.dom-dock button span { font: 700 9px/1 var(--mono); letter-spacing: .16em; }
.dom-dock button:hover { color: #cfe9ff; background: rgba(79, 227, 255, .05); filter: none; }
.dom-dock button.on { color: var(--amber); background: linear-gradient(180deg, rgba(255, 176, 32, .10), transparent); }
.dom-dock em { position: absolute; top: 3px; right: 8px; font: 800 9px/1 var(--mono); font-style: normal; color: #05060a;
  background: var(--amber); border-radius: 7px; padding: 2px 4px; }
.dom-dock em:empty { display: none; }

/* ---- panels ------------------------------------------------------------------------------ */
.dom-card.hub-panel { position: absolute; z-index: 4; width: 300px; overflow: auto; padding: 14px 16px;
  color: var(--dom-ink); font-size: 13px; line-height: 1.5; }
.dom-card.hidden { display: none; }
.dom-card > *, .dom-sheet > * { position: relative; z-index: 3; }
/* both end above the dock (it is ~76px tall with its margin) */
.dom-left { left: 18px; top: 250px; max-height: calc(100% - 250px - 88px); }
.dom-right { right: 18px; top: 150px; max-height: calc(100% - 150px - 88px); }
.dc-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.dc-h small { font: 500 10px var(--mono); letter-spacing: .12em; color: var(--dom-dim); }
.dom-btn { padding: 7px 12px; border-radius: 6px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .08);
  color: var(--holo); font: 700 10px var(--mono); letter-spacing: .16em; cursor: pointer; }
.dom-btn:hover { border-color: var(--holo); box-shadow: 0 0 12px rgba(79, 227, 255, .25); filter: none; }
.dom-btn.solid { background: rgba(255, 176, 32, .12); color: var(--amber); border-color: rgba(255, 176, 32, .5); }
.dom-btn.solid:hover { border-color: var(--amber); box-shadow: 0 0 12px var(--glow); }
.dom-btn.ghost { background: none; color: var(--dom-dim); }
.dom-btn.small { padding: 4px 8px; font-size: 9px; }
.dom-mute { color: var(--dom-dim); }

/* brief + while you were gone */
.db-hello { margin: 0 0 8px; font: 800 14px var(--mono); letter-spacing: .06em; color: var(--amber); }
.db-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.db-lines li { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: start; padding: 7px 0; border-top: 1px solid var(--holo-dim); }
.db-lines li i { font-style: normal; text-align: center; }
.db-lines li[data-go] { cursor: pointer; }
.db-lines li[data-go]:hover span { color: #fff; }
.db-lines li b { color: var(--holo); font-weight: 400; }
.db-gone { margin-bottom: 14px; padding: 0 0 12px 10px; border-left: 2px solid var(--holo); border-bottom: 1px solid var(--holo-dim); }
.db-gone .big { font: 800 24px/1 var(--mono); color: var(--amber); text-shadow: 0 0 14px var(--glow); }
.db-grow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.db-grow span { padding: 3px 7px; border-radius: 4px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .05); font: 600 10px var(--mono); letter-spacing: .08em; }

/* studio pulse */
.dp-streak { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dp-streak b { font: 800 34px/1 var(--mono); color: var(--amber); text-shadow: 0 0 16px var(--glow); min-width: 38px; }
.dp-streak.cold b { color: var(--dom-dim); text-shadow: none; }
.dp-streak span { display: block; font: 700 9px var(--mono); letter-spacing: .22em; color: var(--holo); }
.dp-streak em { display: block; font-style: normal; font-size: 12px; color: var(--dom-dim); }
.dp-week { font: 12px var(--mono); color: var(--dom-dim); margin-bottom: 10px; }
.dp-week b { color: var(--dom-ink); }
.dp-row { display: grid; grid-template-columns: 8px 86px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; }
.dp-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.dp-row span { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--dom-dim); }
.dp-row b { font: 700 11px var(--mono); }
.dp-spark { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.dp-spark u { flex: 1; min-height: 1px; background: var(--c); opacity: .8; border-radius: 1px; text-decoration: none; }
.dp-spark u.z { opacity: .12; }
.dp-recent { list-style: none; margin: 10px 0 0; padding: 0; }
.dp-recent li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 5px 0; border-top: 1px solid var(--holo-dim); font-size: 12px; }
.dp-recent li small { font: 600 10px var(--mono); color: var(--holo); opacity: .7; }
.dp-recent li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-next { margin-top: 10px; font-size: 12px; color: var(--dom-dim); }
.dp-next b { color: var(--amber); }
.dp-empty p { margin: 0 0 10px; color: var(--dom-dim); }

/* ---- sheets (codex, evolve, studio, desk toy) ------------------------------------------ */
.dom-sheet.hub-panel { position: absolute; z-index: 6; right: 12px; top: 12px; bottom: 12px; width: min(440px, calc(100% - 24px));
  display: flex; flex-direction: column; background: rgba(6, 9, 16, .97); animation: domSheet .28s cubic-bezier(.16, 1, .3, 1); }
.dom-sheet.wide { left: 12px; width: auto; }
.dom-sheet.hidden { display: none; }
@keyframes domSheet { from { opacity: 0; transform: translateX(18px); } }
.dom-sheet-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--holo-dim);
  font: 800 12px var(--mono); letter-spacing: .32em; color: var(--amber); text-shadow: 0 0 14px var(--glow); }
.dom-sheet-h button { background: none; border: 0; color: var(--dom-dim); font-size: 16px; cursor: pointer; padding: 2px 6px; }
.dom-sheet-h button:hover { color: var(--holo); filter: none; }
.dom-sheet-b { flex: 1; overflow: auto; padding: 14px 16px 18px; color: var(--dom-ink); font-size: 14px; line-height: 1.55; }
.ds-sec { margin: 18px 0 8px; font: 700 10px var(--mono); letter-spacing: .28em; color: var(--holo); }
.ds-sec:first-child { margin-top: 0; }

/* codex */
.cx-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--dom-dim); }
.cx-dots { display: flex; gap: 4px; }
.cx-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--holo); }
.cx-dots i.on { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px var(--glow); }
.cx-card { position: relative; padding: 20px 18px 18px; border-radius: 6px; min-height: 200px;
  background: linear-gradient(160deg, rgba(79, 227, 255, .07), rgba(79, 227, 255, .02) 60%, transparent);
  border: 1px solid var(--holo-dim); border-left: 2px solid var(--holo); }
.cx-src { font: 700 9px var(--mono); letter-spacing: .24em; color: var(--holo); }
.cx-new { margin-left: 6px; color: var(--amber); }
.cx-q { margin: 10px 0 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.cx-a { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--holo-dim); white-space: pre-line; color: #cfe9ff; animation: cxA .35s ease; }
@keyframes cxA { from { opacity: 0; transform: translateY(6px); } }
.cx-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.cx-acts .dom-btn { padding: 10px 4px; text-align: center; }
.cx-acts .dom-btn small { display: block; margin-top: 3px; font-size: 8px; opacity: .6; letter-spacing: .1em; }
.cx-g0 { border-color: rgba(255, 90, 74, .5) !important; color: #ff8a7a !important; }
.cx-g3 { border-color: rgba(125, 255, 154, .45) !important; color: #7dff9a !important; }
.cx-reveal { width: 100%; margin-top: 14px; padding: 12px; }
.cx-done { text-align: center; padding: 26px 10px; color: var(--dom-dim); }
.cx-done b { display: block; font: 800 30px var(--mono); color: var(--amber); text-shadow: 0 0 14px var(--glow); margin-bottom: 6px; }
.cx-note textarea, .cx-search { width: 100%; box-sizing: border-box; border-radius: 6px; background: rgba(2, 8, 14, .9);
  border: 1px solid var(--holo-dim); color: var(--dom-ink); }
.cx-note textarea { min-height: 64px; resize: vertical; padding: 9px 10px; font: 14px/1.45 inherit; }
.cx-search { padding: 7px 10px; font: 13px inherit; margin-bottom: 6px; }
.cx-note textarea:focus, .cx-search:focus { outline: none; border-color: var(--holo); box-shadow: 0 0 10px rgba(79, 227, 255, .2); }
.cx-note .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--dom-dim); }
.cx-log { list-style: none; margin: 0; padding: 0; }
.cx-log li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-top: 1px solid var(--holo-dim); font-size: 13px; }
.cx-log li small { display: block; font: 600 10px var(--mono); color: var(--dom-dim); margin-top: 2px; }
.cx-log li button { background: none; border: 0; color: var(--dom-dim); cursor: pointer; align-self: start; }
.cx-log li button:hover { color: var(--alert); filter: none; }
.cx-log .card-q { color: var(--holo); }
.cx-decks { display: grid; gap: 6px; }
.cx-deck { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--dom-dim); }
.cx-deck u { height: 5px; border-radius: 3px; border: 1px solid var(--holo-dim); background: rgba(2, 8, 14, .8); overflow: hidden; text-decoration: none; }
.cx-deck u i { display: block; height: 100%; background: linear-gradient(90deg, #3a7aff, var(--holo)); }

/* evolve */
.ev-prop { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--holo-dim); border-left: 2px solid var(--amber); background: rgba(79, 227, 255, .03); margin-bottom: 8px; }
.ev-prop h4 { margin: 0 0 4px; font: 800 12px var(--mono); letter-spacing: .08em; color: var(--amber); }
.ev-prop p { margin: 0 0 10px; color: var(--dom-dim); font-size: 13px; }
.ev-prop .row { display: flex; gap: 6px; }
.ev-hours { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin: 4px 0 2px; }
.ev-hours u { flex: 1; min-height: 1px; background: linear-gradient(0deg, rgba(79, 227, 255, .2), var(--holo)); border-radius: 2px 2px 0 0; text-decoration: none; }
.ev-hours u.pk { background: var(--amber); box-shadow: 0 0 8px var(--glow); }
.ev-hl { display: flex; justify-content: space-between; font: 500 9px var(--mono); color: var(--dom-dim); }
.ev-tab { display: grid; grid-template-columns: 96px 1fr 52px; gap: 8px; align-items: center; padding: 3px 0; font: 600 10px var(--mono); letter-spacing: .1em; }
.ev-tab u { height: 6px; border-radius: 3px; border: 1px solid var(--holo-dim); background: rgba(2, 8, 14, .8); overflow: hidden; text-decoration: none; }
.ev-tab u i { display: block; height: 100%; background: linear-gradient(90deg, #3a7aff, var(--holo)); }
.ev-tab small { text-align: right; color: var(--dom-dim); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-chips button { padding: 5px 9px; border-radius: 12px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .05); color: #cfe9ff; font: 600 10px var(--mono); letter-spacing: .1em; cursor: pointer; }
.ev-chips button:hover { border-color: var(--holo); filter: none; }
.ev-toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .03); }
.ev-hist { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--dom-dim); }
.ev-hist li { padding: 5px 0; }
.ev-hist li::before { content: "✓ "; color: var(--holo); }

/* studio link */
.st-code { display: block; margin: 8px 0; padding: 10px 12px; border-radius: 6px; background: rgba(2, 8, 14, .9); border: 1px dashed var(--holo);
  color: var(--holo); font: 12px/1.6 var(--mono); word-break: break-all; white-space: pre-wrap; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-grid div { padding: 10px; border-radius: 6px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .03); text-align: center; }
.st-grid b { display: block; font: 800 18px var(--mono); color: var(--amber); }
.st-grid span { font: 600 9px var(--mono); letter-spacing: .16em; color: var(--holo); opacity: .8; }
.st-ms { list-style: none; margin: 0; padding: 0; }
.st-ms li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 0; border-top: 1px solid var(--holo-dim); font-size: 13px; }
.st-ms li.todo { opacity: .5; }
.st-ms small { display: block; color: var(--dom-dim); font-size: 11px; }

/* desk toy */
.toy-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.toy-bar .sp { flex: 1; }
.toy-bar .dom-btn.on { color: var(--amber); border-color: rgba(255, 176, 32, .55); background: rgba(255, 176, 32, .1); }
.toy-wrap { position: relative; min-height: 300px; border-radius: 6px; overflow: hidden; background: #03050b; border: 1px solid var(--holo-dim); }
#dom-toy { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.dom-sheet.wide .dom-sheet-b { display: flex; flex-direction: column; }
.dom-sheet.wide .toy-wrap { flex: 1; }

/* ---- zen --------------------------------------------------------------------------------- */
.dom-zen-exit { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: none; background: none; border: 0;
  font: 600 10px var(--mono); letter-spacing: .24em; color: var(--dom-dim); cursor: pointer; opacity: .6; }
.dom-wrap.zen .dom-head, .dom-wrap.zen .dom-stats, .dom-wrap.zen .dom-dock, .dom-wrap.zen .dom-card,
.dom-wrap.zen .dom-spin, .dom-wrap.zen .dom-sheet { display: none; }
.dom-wrap.zen .dom-zen-exit { display: block; }

/* ---- full screen (sys/fullscreen.js makes the wrap a fixed layer) ---------------------- */
.dom-wrap.gfull { background: #02040a; overflow: auto; }
.dom-wrap.gfull .dom-stage.hub-panel { height: 100%; border-radius: 0; }

/* ---- the expansion ---------------------------------------------------------------------- */
.dom-expand { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  transition: opacity .5s ease; }
.dom-expand.hidden { display: none; }
.dom-expand.out { opacity: 0; pointer-events: none; }
/* a full-size ring scaled up from nothing: its border stays a hairline (a small ring scaled up would thicken) */
.dx-ring { position: absolute; left: 50%; top: 56%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%;
  border: 2px solid var(--holo); box-shadow: 0 0 30px var(--holo), inset 0 0 30px var(--holo); transform: scale(0); opacity: 0; }
.dom-expand.go .dx-ring { animation: dxRing 1.7s cubic-bezier(.16, 1, .3, 1) forwards; }
.dom-expand.go .dx-ring.two { animation-delay: .18s; border-color: var(--amber); box-shadow: 0 0 14px var(--amber); }
@keyframes dxRing { 0% { transform: scale(0); opacity: 1; } 65% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.dx-kan { position: relative; font: 900 clamp(46px, 11vw, 132px)/1 "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; color: #fff;
  letter-spacing: .14em; text-shadow: 0 0 40px var(--holo), 0 0 90px rgba(79, 227, 255, .6); display: flex; gap: .04em; }
.dx-kan span { opacity: 0; transform: scale(1.8); filter: blur(10px); }
.dom-expand.go .dx-kan span { animation: dxChar .5s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes dxChar { to { opacity: 1; transform: none; filter: none; } }
.dx-rom { position: absolute; top: calc(50% + clamp(40px, 8vw, 90px)); font: 600 11px var(--mono); letter-spacing: .8em; color: var(--holo); opacity: 0; }
.dx-name { position: absolute; top: calc(50% + clamp(66px, 11vw, 130px)); font: 800 clamp(14px, 2vw, 20px) var(--mono); letter-spacing: .4em;
  color: var(--amber); text-shadow: 0 0 14px var(--glow); opacity: 0; text-align: center; padding: 0 16px; }
.dom-expand.go .dx-rom { animation: dxFade .6s ease .55s forwards; }
.dom-expand.go .dx-name { animation: dxFade .7s ease .95s forwards; }
@keyframes dxFade { from { opacity: 0; letter-spacing: 1.2em; } to { opacity: .95; } }

/* ---- the tab bar learns you (sys/adapt.js) ---------------------------------------------- */
nav button[data-t].dormant { opacity: .38; }
nav button[data-t].dormant:hover, nav button[data-t].dormant.on { opacity: 1; }
nav button[data-t].pinned::after { content: "•"; margin-left: 4px; color: var(--amber); }
.tap-rip { position: fixed; z-index: 90; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(79, 227, 255, .8); animation: tapRip .42s ease-out forwards; }
@keyframes tapRip { to { transform: scale(7); opacity: 0; } }
.reduced-motion .tap-rip { display: none; }
.reduced-motion .dom-stage.reveal, .reduced-motion .dom-stage.reveal-q { animation: none; }

/* ---- phones: the stage on top, the panels under it -------------------------------------- */
@media (max-width: 820px) {
  .dom-stage.hub-panel { height: clamp(430px, 66vh, 640px); }
  .dom-head { left: 14px; top: 16px; max-width: calc(100% - 28px); }
  #dom-stage-desc { display: none; }
  .dom-stats { left: 14px; right: 14px; top: auto; bottom: 84px; justify-content: space-between; }
  .dom-stat { flex: 1; min-width: 0; padding: 6px 8px; }
  .dom-stat b { font-size: 14px; }
  .dom-spin { bottom: 138px; }
  .dom-dock { left: 8px; right: 8px; transform: none; justify-content: space-between; bottom: 8px; }
  .dom-dock button { min-width: 0; flex: 1; padding: 7px 2px 6px; }
  .dom-dock button span { font-size: 8px; letter-spacing: .08em; }
  .dom-card.hub-panel { position: relative; left: auto; right: auto; top: auto; width: auto; max-height: none; margin-top: 12px; }
  .dom-sheet.hub-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 86vh; z-index: 60; }
  .dom-sheet.wide { left: 0; }
  .cx-q { font-size: 17px; }
}