/* ICE — DAUB default, cooled by the temperature filter.
   Palette (default warm, --db-temperature negative): snow #F5F0E1, #EFE6D4 · blush #E9CDB4 · clay #C4633C,
   sage #7A8B5C, rust #B0512E, ink #3A322A. */

:root {
  --db-font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --db-font-body: 'Cabin', system-ui, sans-serif;
  --db-font-ui: 'Cabin', system-ui, sans-serif;
  --ice-sand: #EFE6D4;
  --ice-blush: #E9CDB4;
  --ice-blush-soft: #F3E2CE;
  --ice-clay: #C4633C;
  --ice-clay-deep: #A34E2C;
  --ice-sage: #71834F;
  --ice-sage-soft: #E4E7D3;
  --ice-rust: #B0512E;
  --ice-rust-soft: #F1D9C9;
  --ice-ink: #3A322A;
  --ice-muted: #6E5F4C; /* AA on cream: 5.5:1 */
  /* one colour per ICE dimension — used on dials and cube axis keys */
  --dim-impact: #B0512E;
  --dim-confidence: #7A6A57;
  --dim-effort: #71834F;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--db-color-bg);
  color: var(--ice-ink);
  font-family: var(--db-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* The ambient glow rides a fixed backdrop. On the body it tiled: the body box is
   only viewport-tall, so a scrolled page showed the seam where the tile repeated. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120vw 60vh at 85% -10%, rgba(233,205,180, .28), transparent 60%),
    radial-gradient(100vw 50vh at -10% 110%, rgba(228,231,211, .22), transparent 60%);
}

button { font-family: inherit; }
.ico, svg.lucide { width: 20px; height: 20px; max-width: none; flex: none; }
.add-own-btn { padding: 0; }

/* ============ App shell ============ */
#shell[hidden], #onboarding[hidden] { display: none !important; }
#shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
}
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
/* both app-level actions live together on the right, never adrift mid-header */
.app-actions { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
/* the mark is the app's own cuboid, same projection, frost-tinted */
.brand-mark { width: 20px; height: 20px; align-self: center; flex: none; line-height: 0; }
.brand-mark svg { width: 20px; height: 20px; display: block; overflow: visible; }
.brand-mark polygon { stroke-linejoin: round; }
.bm-front { fill: #A9C6DF; }
.bm-side { fill: #8AAAC8; }
.bm-top { fill: #E4EEF7; stroke: #FFFFFF; stroke-width: .8; stroke-opacity: .8; }
.bm-gloss { fill: url(#ice-gloss-top); }
.brand-name {
  font-family: var(--db-font-heading);
  font-weight: 640; font-size: 22px; letter-spacing: .02em;
}
.brand-tag { font-size: 13px; color: var(--ice-muted); }

.view {
  flex: 1;
  padding: 4px 20px calc(126px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

#shell::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(96px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(245,240,225,0), var(--db-color-bg) 72%);
  pointer-events: none; z-index: 5;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.app-nav {
  z-index: 6;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(400px, calc(100% - 32px));
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(58,50,42, .16);
  border: 1px solid rgba(58,50,42, .08);
}

/* ============ Onboarding ============ */
#onboarding { min-height: 100dvh; }
.ob {
  min-height: 100dvh;
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 24px 0;
  animation: ob-in .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ob-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ob-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ob-back {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center;
  background: none; border: none; border-radius: 14px; color: var(--ice-ink); cursor: pointer;
}
.ob-back:active { background: rgba(58,50,42,.07); }
.ob-back--ghost { visibility: hidden; }
.ob-progress { flex: 1; height: 6px; border-radius: 99px; }
/* Same slot as the progress bar, on the one screen where there is no progress
   to report yet. */
.ob-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ob-brand .brand-name { font-size: 20px; }

.ob-body { flex: 1; display: flex; flex-direction: column; }
.ob--welcome .ob-body, .ob--story .ob-body, .ob--scoreintro .ob-body { justify-content: center; }

.ob-title, .score-item-title, .insight-title, .list-title { text-wrap: balance; }
.ob-lede, .insight-text, .ob-hint { text-wrap: pretty; }

.ob-title {
  font-family: var(--db-font-heading);
  font-weight: 560; font-size: 40px; line-height: 1.08;
  letter-spacing: -0.01em; margin: 18px 0 12px;
}
.ob-title--sm { font-size: 30px; }
.ob-lede { font-size: 17px; line-height: 1.55; color: var(--ice-muted); margin: 0 0 8px; max-width: 42ch; }
.ob-hint { font-size: 14px; color: var(--ice-muted); margin: 2px 0 16px; }
.ob-story-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ice-clay-deep); font-size: 14px; font-weight: 600;
  padding: 10px 2px; margin: -4px 0; text-underline-offset: 3px;
}

.ob-foot {
  position: sticky; bottom: 0; z-index: 5;
  margin: auto -24px 0; padding: 26px 24px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(245,240,225,0) 0%, var(--db-color-bg) 38%);
}
.ob-cta {
  width: 100%; justify-content: center; gap: 10px;
  min-height: 54px; font-size: 17px; border-radius: 18px;
}
.ob-skip {
  background: none; border: none; color: var(--ice-muted);
  font-size: 14px; padding: 10px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

/* Illustrations (generated per illustrations/spec.json; blobs behind as fallback) */
.ob-illo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 26px;
  opacity: 0; transition: opacity .28s ease;
}
.ob-illo.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ob-illo { transition: none; }
}
.ob--scoreintro .ob-art { height: auto; aspect-ratio: 3 / 2; max-height: 23vh; overflow: hidden; border-radius: 26px; }
.ob--welcome .ob-art, .ob--story .ob-art {
  height: auto; aspect-ratio: 3 / 2; max-height: min(340px, 38vh);
  overflow: hidden; border-radius: 26px;
}

/* Art blobs */
.ob-art { position: relative; height: 180px; margin: 8px 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(.5px); }
.blob--a {
  width: 130px; height: 130px; left: 8%; top: 12%;
  background: radial-gradient(circle at 32% 28%, #F0D9BE, var(--ice-blush));
  animation: drift 7s ease-in-out infinite alternate;
}
.blob--b {
  width: 88px; height: 88px; right: 16%; top: 4%;
  background: radial-gradient(circle at 30% 30%, #D8845C, var(--ice-clay));
  animation: drift 9s ease-in-out infinite alternate-reverse;
}
.blob--c {
  width: 62px; height: 62px; right: 34%; bottom: 6%;
  background: radial-gradient(circle at 35% 30%, #9DAE78, var(--ice-sage));
  animation: drift 11s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(10px, -12px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .blob, .ob, .rank-row, .insight, .slider-val--tick, .rank-row--settled, .ai-spin { animation: none !important; }
}

.ob-name { border-radius: 16px; }

.sel-check {
  display: none; position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; color: var(--ice-clay-deep);
}
.weight-card--on .sel-check { display: block; }

/* Prompt steps */
.prompt-meta, .score-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.prompt-count { font-size: 13px; color: var(--ice-muted); font-variant-numeric: tabular-nums; }
.type-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 99px;
}
.type-chip--do { background: var(--ice-sage-soft); color: #55663A; }
.type-chip--dont { background: var(--ice-rust-soft); color: #8E3E1F; }

.picked { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 4px; }
.picked-chip { border: none; cursor: pointer; }
.picked-more {
  cursor: pointer; border: 1.2px dashed rgba(58,50,42,.3);
  background: transparent; color: var(--ice-muted); font-weight: 600;
}
.picked-chip--do { background: var(--ice-sage-soft); color: #4A5A32; }
.picked-chip--dont { background: var(--ice-rust-soft); color: #7E3418; }

.sugg-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sugg-chip {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; font-size: 14px;
}
.chip-ico { width: 14px; height: 14px; opacity: .6; }
.sugg-chip--ai { border-style: dashed; border-color: rgba(196,99,60,.45); }
.sugg-chip--ai .chip-ico { color: var(--ice-clay); opacity: .9; }
.ai-suggest {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 14px; font-size: 14px; cursor: pointer;
  border-radius: 99px; border: 1.5px dashed rgba(196,99,60,.55);
  background: transparent; color: var(--ice-clay-deep); font-weight: 600;
}
.ai-suggest[disabled] { opacity: .65; cursor: wait; }
.ai-suggest .chip-ico { opacity: 1; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-spin { animation: ai-spin .9s linear infinite; }

.add-own-row { display: flex; gap: 8px; }
.add-own { flex: 1; border-radius: 14px; }
.add-own-btn { flex: 0 0 48px; min-height: 48px; border-radius: 14px; display: grid; place-items: center; }
.need-note { font-size: 13px; color: var(--ice-clay-deep); margin: 0; text-align: center; }

/* Review */
.rev-section { margin: 14px 0; }
.rev-h {
  font-family: var(--db-font-heading); font-size: 18px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
}
.rev-h--do { color: #55663A; } .rev-h--dont { color: #8E3E1F; }
.rev-count { font-size: 12px; background: rgba(58,50,42,.08); border-radius: 99px; padding: 2px 8px; color: var(--ice-ink); }
.rev-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.rev-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; min-height: 42px;
  padding: 9px 12px 9px 15px; border-radius: 99px; font-size: 14px;
  background: var(--db-color-surface); color: var(--ice-ink);
  border: 1px solid rgba(58,50,42,.1); border-left: 4px solid transparent;
}
.rev-chip--do { border-left-color: var(--ice-sage); }
.rev-chip--dont { border-left-color: var(--ice-rust); }
.rev-chip .rev-x { color: var(--ice-muted); font-size: 17px; line-height: 1; }
.rev-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--db-color-surface); border-radius: 12px; padding: 10px 8px 10px 14px; margin-bottom: 6px;
  border: 1px solid rgba(58,50,42,.06);
}
.rev-text { font-size: 15px; }
.rev-del {
  background: none; border: none; color: var(--ice-muted); cursor: pointer;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
}
.rev-del:active { background: rgba(58,50,42,.07); }

/* Score legend + step */
.score-legend { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.score-legend li {
  background: var(--db-color-surface); border-radius: 14px; padding: 9px 14px;
  font-size: 14px; border: 1px solid rgba(58,50,42,.06);
}
.score-item-title {
  font-family: var(--db-font-heading); font-size: 24px; font-weight: 580;
  line-height: 1.2; margin: 8px 0 14px;
}

/* Sliders */
.slider-block { margin-bottom: 12px; }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; }
.slider-block { --dim: var(--dim-impact); }
.slider-block--confidence { --dim: var(--dim-confidence); }
.slider-block--effort { --dim: var(--dim-effort); }
.slider-label { font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ice-ink); }
.slider-label::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--dim); margin-right: 7px; vertical-align: 1px;
}
.slider-val, .slider-word { color: var(--dim) !important; }
.slider-val {
  font-family: var(--db-font-heading); font-size: 22px; font-weight: 600;
  color: var(--ice-clay-deep); font-variant-numeric: tabular-nums;
}
.slider-q { margin: 2px 0 8px; font-size: 14px; color: var(--ice-muted); }
.warm-range {
  --pct: 50%;
  width: 100%; height: 40px; margin: 0; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.warm-range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--dim, var(--ice-clay)) var(--pct), rgba(58,50,42,.12) var(--pct));
}
.warm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -8px; border-radius: 50%;
  background: #FFFDF7; border: 3px solid var(--dim, var(--ice-clay));
  box-shadow: 0 3px 8px rgba(58,50,42,.25);
}
.warm-range::-moz-range-track {
  height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--dim, var(--ice-clay)) var(--pct), rgba(58,50,42,.12) var(--pct));
}
.warm-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFFDF7; border: 3px solid var(--dim, var(--ice-clay));
  box-shadow: 0 3px 8px rgba(58,50,42,.25);
}
.slider-ends { display: flex; margin-top: -4px; }
.slider-word { font-size: 12px; font-weight: 600; color: var(--ice-clay-deep); }

/* External-AI prefill step */
.auto-card {
  background: var(--db-color-surface); border: 1px solid rgba(58,50,42,.08);
  border-radius: 16px; padding: 14px 16px; margin: 6px 0 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.auto-preview { font-size: 13px; color: var(--ice-muted); margin: 0; font-style: italic; }
.auto-copy { align-self: flex-start; gap: 8px; }
.auto-paste { width: 100%; box-sizing: border-box; border-radius: 14px; font-size: 14px; }
.auto-summary { font-size: 14px; font-weight: 600; color: var(--ice-clay-deep); margin: 8px 0 0; min-height: 20px; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--ice-blush-soft); color: var(--ice-clay-deep);
  border-radius: 99px; padding: 4px 10px;
}
.row-ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; display: inline-block; }

/* Blitz scoring cluster: the mode toggle lives WITH the input it controls */
.score-box {
  background: var(--db-color-surface);
  border: 1px solid rgba(58,50,42,.09);
  border-radius: 22px; padding: 12px 14px 14px;
  margin: 4px 0 12px;
}

.score-box .fader { background: #F5EFE3; }
.score-box .slider-block:last-of-type { margin-bottom: 4px; }

/* Buoyancy scene — balloons lift, weights pull, you float in between */
.float { margin: 10px 0 6px; }
.fl-caps {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 2px;
}
.fl-cap {
  flex: 1 0 auto; display: flex; flex-direction: column; gap: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ice-muted);
}
.fl-cap--down { text-align: right; }
.fl-cap b {
  font-family: var(--db-font-heading); font-size: 15px; font-weight: 620;
  letter-spacing: 0; text-transform: none;
}
.fl-cap--up b { color: var(--ice-sage); }
.fl-cap--down b { color: var(--ice-rust); }
.fl-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; margin-bottom: 12px; }
.fl-deep { fill: url(#fl-deep-grad); }
.fl-line { stroke: url(#fl-line-grad); stroke-width: 1.4; stroke-dasharray: 5 5; }
/* a second, slowly drifting line makes the surface feel like water, not a rule */
.fl-ripple {
  stroke: url(#fl-ripple-grad); stroke-width: 1.1; stroke-dasharray: 2 14;
  animation: fl-drift 9s linear infinite;
}
@keyframes fl-drift { to { stroke-dashoffset: -64; } }
.fl-figure { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
/* a face, and a ring that carries the same green-or-red the blocks use */
.fl-face { font-size: 27px; }
.fl-face-halo { fill: var(--db-color-bg); stroke-width: 1.6; }
.fl-figure--up .fl-face-halo { stroke: #5C7A45; stroke-opacity: .38; }
.fl-figure--down .fl-face-halo { stroke: #9A4526; stroke-opacity: .38; }
.fl-tether {
  stroke-width: .65; transition: opacity .3s;
  stroke: rgba(58,50,42,.22); stroke-linecap: round;
  stroke-dasharray: 3 6; vector-effect: non-scaling-stroke;
  animation: fl-flow 4.4s linear infinite;
}
@keyframes fl-flow { to { stroke-dashoffset: -18; } }
.fl-tether--drag { stroke: rgba(163,78,44,.34); animation: fl-taut 6.4s ease-in-out infinite; animation-delay: var(--bob, 0s); }
.fl-tether--lift { animation: fl-slack 5.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--bob, 0s); }
@keyframes fl-taut { 0%, 58%, 100% { stroke-opacity: 1; } 70% { stroke-opacity: .55; } }
@keyframes fl-slack { 0%, 100% { stroke-opacity: 1; } 48% { stroke-opacity: .62; } }
.fl-tether.is-muted { opacity: .18; stroke-dasharray: 3 4; }
.fl-obj { cursor: pointer; transition: opacity .3s ease, transform .55s cubic-bezier(.22,.78,.25,1); }
.fl-obj:focus-visible { outline: none; }
.fl-obj:focus-visible .fl-cube__face { stroke: #3A322A; stroke-width: 1.25; stroke-opacity: .9; }
/* identical to the editor cube: front = left face, side = right face */
.fl-obj--lift { --fl-cube-top: #D6E3C2; --fl-cube-front: #8FA97A; --fl-cube-side: #77925F; }
.fl-obj--drag { --fl-cube-top: #F0DBC6; --fl-cube-front: #D0785A; --fl-cube-side: #B25E3C; }
.fl-bob { transform-box: fill-box; transform-origin: center; }
.fl-cube__hit { fill: transparent; stroke: none; pointer-events: all; }
/* Tinted ice, not painted plastic: a touch of transparency, a lit top edge,
   and a gloss ramp per face. */
.ice-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fl-cube__face {
  stroke: #3A322A; stroke-width: .7; stroke-opacity: .2; stroke-linejoin: round;
  fill-opacity: .93;
  vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision;
  transition: fill .28s ease, stroke .28s ease, stroke-opacity .28s ease;
}
.fl-cube__face--top { stroke: #FFFFFF; stroke-opacity: .7; stroke-width: 1; }
.fl-cube__gloss {
  stroke: none; pointer-events: none;
  shape-rendering: geometricPrecision;
}
.fl-cube__face--top { fill: var(--fl-cube-top); }
.fl-cube__face--front { fill: var(--fl-cube-front); }
.fl-cube__face--side { fill: var(--fl-cube-side); }
.fl-obj.is-muted {
  --fl-cube-top: #D8D1C2; --fl-cube-front: #AFA697; --fl-cube-side: #81796E;
  opacity: .72;
}
.fl-obj.is-muted .fl-cube__face { stroke: #6F685F; stroke-opacity: .72; stroke-dasharray: 2 1.5; }
.fl-smear {
  opacity: .5;
  animation: fl-smear-pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--bob, 0s));
}
.fl-smear .fl-cube__face { stroke: none; }
.fl-smear .fl-cube__gloss { display: none; }
@keyframes fl-smear-pulse {
  0%, 100% { opacity: .34; }
  50% { opacity: .6; }
}
/* a switched-off block neither lifts nor pulls, so it shows no motion at all */
.fl-obj.is-muted .fl-smear { display: none; }
.fl-obj.is-muted .fl-bob { animation: none; }
.fl-who {
  font-family: var(--db-font-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; fill: var(--ice-ink);
  paint-order: stroke fill; stroke: var(--db-color-bg); stroke-width: 3px; stroke-linejoin: round;
}
.fl-name {
  font-family: var(--db-font-body); font-size: 9px; font-weight: 600;
  fill: var(--ice-ink); paint-order: stroke fill;
  stroke: var(--db-color-bg); stroke-width: 3px; stroke-linejoin: round;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.fl-obj.is-named .fl-name, .fl-obj:hover .fl-name, .fl-obj:focus-visible .fl-name,
.fl-obj.is-muted .fl-name { opacity: .88; }
@keyframes fl-cube-lift {
  0%, 100% { transform: translateY(0) rotate(-.12deg); }
  48% { transform: translateY(-3px) rotate(.55deg); }
  72% { transform: translateY(-2px) rotate(-.28deg); }
}
@keyframes fl-cube-tug {
  0%, 54%, 100% { transform: translateY(0) rotate(0); }
  64% { transform: translateY(3.4px) rotate(.6deg); }
  74% { transform: translateY(1px) rotate(-.4deg); }
  84% { transform: translateY(2px) rotate(.2deg); }
  92% { transform: translateY(.6px) rotate(-.1deg); }
}
.fl-obj--lift .fl-bob { animation: fl-cube-lift 5.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--bob, 0s); }
.fl-obj--drag .fl-bob { animation: fl-cube-tug 6.4s ease-in-out infinite; animation-delay: var(--bob, 0s); }
.fl-net {
  flex: 0 1 auto; text-align: center; margin: 0;
  font-family: var(--db-font-heading); font-size: 19px; font-weight: 640;
  color: var(--ice-ink); line-height: 1.15;
}
.fl-hint, .fl-what-if {
  font-size: 13px; color: var(--ice-muted); margin: 0; text-align: center;
}
.fl-what-if { color: var(--ice-clay-deep); }
.fl-restore {
  background: none; border: none; cursor: pointer; padding: 6px 4px; margin-left: 4px;
  font: inherit; color: var(--ice-muted); text-decoration: underline; text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .fl-obj, .fl-figure, .fl-bob, .fl-cube, .fl-cube__face, .fl-smear,
  .fl-tether, .fl-ripple, .fl-name { animation: none !important; transition: none !important; }
}

/* List and scene blocks: the same cuboid the builder draws, at list scale. */

/* list cuboids share the float scene's face variables and stroke */
.iso-block { display: block; overflow: visible; }
.iso-smear { opacity: .42; }
.iso-smear .fl-cube__face { stroke: none; }
.iso-smear .fl-cube__gloss { display: none; }
/* the reference diagram is not moving, so it carries no smear */
.anatomy .iso-smear { display: none; }
.iso-block--do { --fl-cube-top: #D6E3C2; --fl-cube-front: #8FA97A; --fl-cube-side: #77925F; }
.iso-block--dont { --fl-cube-top: #F0DBC6; --fl-cube-front: #D0785A; --fl-cube-side: #B25E3C; }
.rank-iso { flex: none; display: block; line-height: 0; width: 46px; }
.row .rank-iso { width: 42px; margin-right: 2px; }

.cube-note { font-style: italic; }

/* The builder cube: the block at full size, with its faces as drag handles. */
/* Digits printed on the cube faces — they move with the geometry, never jump. */
.cf-num {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cube-face--front .cf-num, .cube-face--side .cf-num {
  color: #3A322A; text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.cube-face--top .cf-num { color: var(--ice-ink); opacity: .75; }
.cube-key--w::before, .cube-stage--do ~ .cube-legend .cube-key--w::before { background: var(--dim-impact); }
@keyframes cube-lab-tick { 45% { filter: brightness(1.5); } }
.cube-lab--tick { animation: cube-lab-tick .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .cube-lab--tick { animation: none; } }

.cube-row { display: flex; align-items: center; gap: 16px; margin-bottom: 2px; }
.cube-row .cube-stage { flex: 1 1 58%; min-width: 0; }
.cube-readout { flex: 1 1 42%; min-width: 0; }
.cube-readout:empty { display: none; }
.cube-readout .editor-formula {
  position: static; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; margin: 0; padding: 0; background: transparent; box-shadow: none; border: none;
}
.cube-readout .ef-eq { display: none; }
.cube-readout .ef-expr { font-size: 13px; line-height: 1.5; }
.cube-readout .ef-val { font-size: 27px; line-height: 1.15; }

.cube-stage {
  position: relative;
  height: 176px; display: grid; place-items: center;
  perspective: 720px; touch-action: none; cursor: grab; user-select: none;
  margin-bottom: 12px;
}
.cube-stage:active { cursor: grabbing; }
.cube { position: relative; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-33deg); }
/* Edges match the SVG cuboids exactly: a hairline dark contour on the vertical
   faces, a lit white rim on the top. The old 3px cream ring dated from the
   red-next-to-green problem and made the block read as three separate tiles. */
.cube-face {
  position: absolute; left: 50%; top: 50%; border-radius: 2px;
  backface-visibility: hidden;
  box-shadow: 0 0 0 .7px rgba(58,50,42,.2);
}
.cube-face--top { box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
/* the same gloss ramps the SVG cuboids use, as CSS layers */
.cube-face--front { background-image: linear-gradient(152deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 78%); }
.cube-face--side { background-image: linear-gradient(214deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 55%, rgba(255,255,255,0) 85%); }
.cube-face--top { background-image: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.24) 48%, rgba(255,255,255,.06)); }
/* the cube wears its type: sage for a DO, clay for a DON'T */
.cube-stage { --cf-front: #D0785A; --cf-side: #B25E3C; --cf-top: #F0DBC6; }
.cube-stage--do { --cf-front: #8FA97A; --cf-side: #77925F; --cf-top: #D6E3C2; }
/* background-color only: the shorthand would wipe the gloss layer above */
.cube-face--front { background-color: var(--cf-front); cursor: move; }
.cube-face--side  { background-color: var(--cf-side); cursor: move; }
.cube-face--top   { background-color: var(--cf-top); cursor: move; }

.cube-face:hover { filter: brightness(1.07); }
.cube-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 14px;
  margin: 10px 0 20px; font-size: 11px; color: var(--ice-muted);
  position: relative; z-index: 2;
}
.cube-legend .cube-note { flex-basis: 100%; text-align: center; margin-top: 1px; }
.cube-key { display: inline-flex; align-items: center; gap: 5px; }
.cube-key::before { content: ''; width: 9px; height: 9px; border-radius: 3px; }
.cube-key--w::before { background: var(--dim-impact); }
.cube-key--h::before { background: var(--dim-confidence); }
.cube-key--d::before { background: var(--dim-effort); }
.pad-composite .fader { height: 66px; }
.pad-composite .fader-q { display: none; }
/* Onboarding scores one card per screen: everything must clear the sticky CTA. */
.ob--score .cube-stage { height: 152px; }
.ob--score .cube-legend { margin: 8px 0 12px; gap: 5px 12px; }
.ob--score .cube-legend .cube-note { display: none; }
.ob--score .pad-composite .fader { height: 58px; }
.ob--score .fader-bank { gap: 9px; }
@media (min-height: 800px) {
  .ob--score .cube-stage { height: 176px; }
  .ob--score .pad-composite .fader { height: 64px; }
}

/* Fader bank */
.fader-bank { display: flex; flex-direction: column; gap: 12px; }
/* A drag that starts on a control must not rubber-band-select the page. */
body.is-dragging, body.is-dragging * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  cursor: inherit;
}

/* Draggable controls: never let a drag turn into a text selection. */
.fader, .fader *,
.cube-stage, .cube, .cube-face,
.warm-range, .slider-block, .pad-composite, .cube-legend {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.fader {
  position: relative; height: 84px; border-radius: 18px; overflow: hidden;
  background: #F3EDE0; box-shadow: inset 0 2px 8px rgba(58,50,42,.07);
  touch-action: none; cursor: ew-resize;
}
.fader { --dim: var(--dim-impact); }
.fader--confidence { --dim: var(--dim-confidence); }
.fader--effort { --dim: var(--dim-effort); }
.fader-label::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--dim); margin-right: 7px; vertical-align: 1px;
}
.fader-num { color: var(--dim); }
.fader-end--word { color: var(--dim); }
.fader-fill {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--dim) 26%, transparent);
  border-right: 4px solid var(--dim);
  transition: width .08s ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .fader-fill { transition: none; } }
.fader-text {
  position: absolute; left: 16px; top: 12px; right: 64px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
}
.fader-label {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ice-ink);
}
.fader-q { font-size: 13px; color: #5C5346; }
.fader-num {
  position: absolute; right: 16px; top: 50%; transform: translateY(-58%);
  font-family: var(--db-font-heading); font-size: 30px; font-weight: 640;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.fader-end {
  position: absolute; bottom: 7px; left: 16px; pointer-events: none;
  font-size: 12px; font-weight: 600; color: var(--ice-muted);
  letter-spacing: .01em;
}
.fader:focus-visible { outline: 2.5px solid var(--ice-clay); outline-offset: 2px; }

.mode-seg { display: inline-flex; margin: 4px 0 8px; align-self: flex-end; --db-radius-2: 12px; }
.editor-head + .mode-seg, .score-meta + .mode-seg { margin-left: auto; }
.ob--score .slider-block:last-of-type { margin-bottom: 36px; }
.ob--score .pad-hint { margin-bottom: 10px; }
.mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 14px; font-size: 13px;
}
.mode-btn--on {
  background: var(--ice-ink); color: #F5F0E1; border-color: var(--ice-ink);
  position: relative; z-index: 1;
}
.mode-btn--on .chip-ico { opacity: 1; }

/* Weight cards */
.weight-grid { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.weight-card {
  position: relative; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px;
  padding: 16px; border-radius: 18px;
  background: var(--db-color-surface); border: 1.5px solid rgba(58,50,42,.1);
  transition: border-color .2s, box-shadow .2s;
}
.weight-card--on { border-color: var(--ice-clay); box-shadow: 0 6px 18px rgba(196,99,60,.18); }
.weight-x {
  grid-row: 1 / 3; align-self: center;
  font-family: var(--db-font-heading); font-size: 28px; font-weight: 640; color: var(--ice-clay-deep);
}
.weight-label { font-weight: 600; }
.weight-desc { font-size: 13px; color: var(--ice-muted); }
.weight-sugg {
  position: absolute; top: -9px; right: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--ice-clay); color: #FFFDF7; border-radius: 99px; padding: 3px 10px;
}

.method-mini { font-size: 13px; color: var(--ice-muted); text-align: center; margin: 4px 0 0; }

.ob--reveal .ob-art {
  height: auto; aspect-ratio: 3 / 2; max-height: 21vh;
  overflow: hidden; border-radius: 26px;
}
.reveal-note {
  margin: 4px 2px 0; padding-top: 10px;
  border-top: 1.5px dashed rgba(58,50,42,.14);
  font-size: 13px; color: var(--ice-muted);
}

/* Reveal */
.reveal-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.reveal-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--db-color-surface); border-radius: 16px; padding: 14px 16px;
  border: 1px solid rgba(58,50,42,.07);
  animation: ob-in .35s both;
}
.reveal-row:nth-child(2) { animation-delay: .12s; }
.reveal-row:nth-child(3) { animation-delay: .24s; }
.reveal-rank {
  font-family: var(--db-font-heading); font-size: 20px; font-weight: 640;
  color: var(--ice-muted); width: 22px; text-align: center;
}
.reveal-text { flex: 1; font-size: 16px; }

/* ============ Shell views ============ */
.list-section { margin-bottom: 26px; }
.list-head { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 10px; }
.list-title { font-family: var(--db-font-heading); font-size: 26px; font-weight: 600; margin: 0; }
.list-section--do .list-title { color: #55663A; }
.list-section--dont .list-title { color: #8E3E1F; }
.list-sub { font-size: 14px; color: var(--ice-muted); }

.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--db-color-surface);
  border: 1px solid rgba(58,50,42,.07); border-left-width: 4px;
  border-radius: 14px; padding: 14px 14px 14px 16px;
  min-height: 52px; font-size: 15px; color: var(--ice-ink);
  transition: transform .12s;
}
.row:active { transform: scale(.985); }
.row--do { border-left-color: var(--ice-sage); }
.row--dont { border-left-color: var(--ice-rust); }
.row-text { flex: 1; }
.row-empty { color: var(--ice-muted); font-size: 14px; margin: 4px 0 10px; }
.add-row { margin-top: 10px; }
.add-inline { width: 100%; border-radius: 14px; box-sizing: border-box; }

.score-pill {
  font-family: var(--db-font-heading); font-weight: 640; font-size: 15px;
  min-width: 44px; text-align: center; padding: 6px 10px; border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.score-pill--do { background: var(--ice-sage-soft); color: #45542E; }
.score-pill--dont { background: var(--ice-rust-soft); color: #7E3418; }
.score-pill--todo {
  background: transparent; border: 1.5px dashed rgba(58,50,42,.25);
  color: var(--ice-muted); font-family: var(--db-font-ui); font-size: 12px; font-weight: 600;
}

/* Rank */
.todo-banner {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: linear-gradient(120deg, #F6E3C8, var(--ice-blush-soft));
  border: 1px solid rgba(196,99,60,.25); border-radius: 16px;
  padding: 13px 16px; margin: 10px 0 14px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ice-clay-deep);
}
.todo-ico { color: var(--ice-clay); }
.recheck-banner .todo-ico { color: var(--ice-muted); }
.todo-cta { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }

/* Native daub toggle-group grammar: connected segments, no gaps.
   Only the group's outer radius is themed (scoped --db-radius-2). */
.seg { display: flex; width: 100%; margin: 10px 0 16px; --db-radius-2: 14px; }
.seg-btn { flex: 1; min-height: 44px; font-size: 14px; }
.seg-btn--on {
  background: var(--ice-ink); color: #F5F0E1; border-color: var(--ice-ink);
  position: relative; z-index: 1;
}

.rank-rows { display: flex; flex-direction: column; gap: 10px; }
.rank-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--db-color-surface); border: 1px solid rgba(58,50,42,.07);
  border-radius: 16px; padding: 13px 14px;
  animation: ob-in .3s both; animation-delay: var(--delay, 0ms);
  transition: transform .12s;
}
.rank-row:active { transform: scale(.985); }
.rank-num {
  font-family: var(--db-font-heading); font-size: 18px; font-weight: 640;
  color: var(--ice-muted); width: 24px; text-align: center; flex: none;
  font-variant-numeric: tabular-nums;
}
.rank-main { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rank-row { gap: 10px; }
.rank-text { font-size: 15px; font-weight: 500; }

@keyframes settle {
  from { background: var(--ice-blush-soft); border-color: rgba(196,99,60,.4); }
}
.rank-row--settled { animation: settle 1.2s cubic-bezier(.2,.7,.3,1) both; }

@keyframes val-tick { 50% { transform: scale(1.12); color: var(--ice-clay); } }
.slider-val--tick { display: inline-block; animation: val-tick .18s ease-out; }

.rank-trend { display: inline-flex; margin-left: 7px; vertical-align: -2px; }
.trend-ico { width: 15px; height: 15px; }
.rank-trend--good { color: var(--ice-sage); }
.rank-trend--bad { color: var(--ice-rust); }
.stale-chip {
  margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  border: 1.2px dashed rgba(58,50,42,.3); color: var(--ice-muted);
  border-radius: 99px; padding: 2px 8px; vertical-align: 1px;
}

/* One gentle experiment */
.overlap-card {
  background: var(--ice-blush-soft); border: 1px solid rgba(196,99,60,.22);
  border-radius: 16px; padding: 12px 14px; margin: 10px 0;
}
.overlap-q { font-size: 13px; font-weight: 600; color: var(--ice-clay-deep); margin: 0 0 8px; }
.overlap-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.overlap-both {
  background: none; border: none; cursor: pointer; padding: 8px 2px 2px;
  font-size: 12px; color: var(--ice-muted); text-decoration: underline; text-underline-offset: 3px;
}
.ai-estimated-note { color: var(--ice-clay-deep); }
.ai-guess-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ice-clay-deep); margin: -4px 0 10px;
}
.exp-card {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 16px; padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid rgba(58,50,42,.08); background: var(--db-color-surface);
  border-left-width: 4px;
}
.exp-card--protect { border-left-color: var(--ice-sage); }
.exp-card--dodge { border-left-color: var(--ice-rust); }
.exp-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ice-muted); }
.exp-item { font-family: var(--db-font-heading); font-size: 19px; font-weight: 620; }
.exp-how { font-size: 13px; color: #5C5346; }
.exp-review { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ice-ink); margin: 14px 2px 4px; }

/* Week plan */
.plan-cta {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  margin: 14px 0 4px; padding: 15px 16px; border-radius: 18px;
  background: linear-gradient(120deg, #F6E3C8, var(--ice-blush-soft));
  border: 1px solid rgba(196,99,60,.25); color: var(--ice-clay-deep);
}
.plan-cta-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.plan-cta-main b { font-family: var(--db-font-heading); font-size: 17px; font-weight: 640; }
.plan-cta-sub { font-size: 13px; color: #6E5240; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.plan-title { font-family: var(--db-font-heading); font-size: 22px; font-weight: 620; margin: 0; }
.plan-src { font-size: 13px; color: var(--ice-muted); }
.plan-days { display: flex; flex-direction: column; gap: 8px; }
.plan-day {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--db-color-surface); border: 1px solid rgba(58,50,42,.07);
  border-radius: 14px; padding: 11px 14px;
}
.plan-dayname {
  font-family: var(--db-font-heading); font-weight: 640; font-size: 14px;
  color: var(--ice-clay-deep); width: 34px; flex: none; padding-top: 1px;
}
.plan-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-pick { font-size: 15px; font-weight: 600; }
.plan-note { font-size: 13px; color: var(--ice-muted); }
.plan-avoid { font-size: 13px; color: #8E3E1F; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
.plan-avoid-ico { width: 13px; height: 13px; }
.plan-actions { display: flex; gap: 10px; margin-top: 16px; padding-bottom: env(safe-area-inset-bottom); }
.plan-actions .db-btn { flex: 1; justify-content: center; gap: 8px; min-height: 48px; }
.plan-day--ghost { min-height: 44px; align-items: center; }
.plan-sk { width: 70%; height: 14px; }

/* Insights */
.insight {
  display: flex; gap: 14px; background: var(--db-color-surface);
  border: 1px solid rgba(58,50,42,.07); border-radius: 18px;
  padding: 16px; margin: 12px 0;
  animation: ob-in .3s both; animation-delay: var(--delay, 0ms);
}
.insight-ico {
  flex: none; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #FFF9EF;
}
.insight--storm .insight-ico { background: #6E5F4C; }
.insight--clear .insight-ico { background: var(--ice-clay); }
.insight--wrench .insight-ico { background: var(--ice-rust); }
.insight--gift .insight-ico { background: var(--ice-sage); }
.insight--calendar .insight-ico { background: #B07A3F; }
.insight--question .insight-ico { background: #8B7D6A; }
.insight--hands .insight-ico { background: #8B6A3F; }
.insight--shield .insight-ico { background: #6B6B52; }
.insight--feather .insight-ico { background: #A08F70; }
.insight-title { font-family: var(--db-font-heading); font-size: 18px; font-weight: 620; margin: 2px 0 4px; }
.insight-text { font-size: 14px; line-height: 1.55; color: #5C5346; margin: 0; }

.insight-tools { display: flex; gap: 10px; margin: 18px 0 8px; }
.insight-tools .db-btn { flex: 1; justify-content: center; gap: 8px; min-height: 46px; }
.method-note { font-size: 13px; color: var(--ice-muted); text-align: center; margin: 18px 0 6px; }
.method-note a, .set-credit a {
  color: var(--ice-clay-deep);
  display: inline-block; padding: 13px 2px; margin: -13px 0;
}

/* Editor drawer */
.editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.editor-title {
  flex: 1; min-width: 0; overflow: hidden; resize: none;
  line-height: 1.3; max-height: 64px;
  border: none; background: transparent;
  font-family: var(--db-font-heading); font-size: 20px; font-weight: 600; color: var(--ice-ink);
  border-bottom: 1.5px dashed rgba(58,50,42,.2); padding: 4px 2px;
}
.editor-title:focus { outline: none; border-bottom-color: var(--ice-clay); }
/* Cube mode: the cube is the picture, so the receipt shrinks and follows it. */
.db-drawer__body.has-cube { display: flex; flex-direction: column; }
.has-cube .editor-head { order: 1; }
.has-cube .pad-composite { order: 2; }
/* one dashed rule per sheet: the title owns it, the receipt does not repeat it */
.has-cube .editor-formula {
  order: 3; position: static; margin: 0 0 18px; padding: 0;
  background: transparent; box-shadow: none; border: none; border-radius: 0;
}
.has-cube .ef-val { font-size: 20px; }
.has-cube .editor-actions { order: 4; }

.editor-formula {
  position: sticky; top: -2px; z-index: 3;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 16px;
  background: var(--ice-blush-soft); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(58,50,42,.08);
}
.ef-expr { font-size: 15px; color: #6E5F4C; font-variant-numeric: tabular-nums; }
.ef-eq { color: var(--ice-muted); }
.ef-val { font-family: var(--db-font-heading); font-size: 24px; font-weight: 640; }
.ef-val--do { color: #55663A; }
.ef-val--dont { color: #8E3E1F; }
.editor-actions { display: flex; gap: 10px; margin-top: 8px; padding-bottom: env(safe-area-inset-bottom); }
.editor-delete { color: var(--ice-rust); gap: 6px; }
.editor-save { flex: 1; justify-content: center; min-height: 52px; border-radius: 16px; }

/* Settings sheet — match editor drawer's capped overlay grammar on wide screens */
#sheet-settings .db-sheet__panel, #sheet-author .db-sheet__panel, #drawer-plan .db-drawer__panel {
  max-width: 640px; width: 100%;
  margin-left: auto; margin-right: auto;
  left: 0; right: 0;
}

/* DAUB caps a bottom sheet at 60vh whatever it holds, so a long panel scrolls
   inside a short box. Size to the content instead and only scroll past the point
   where the sheet would leave the screen. The header stays put while it does. */
.db-sheet--bottom .db-sheet__panel {
  height: auto;
  max-height: min(92dvh, 92vh);
  display: flex; flex-direction: column;
}
.db-sheet--bottom .db-sheet__header { flex: 0 0 auto; }
.db-sheet--bottom .db-sheet__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--db-space-5, 20px) + env(safe-area-inset-bottom));
}

/* Settings sheet */
.set-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ice-muted); margin: 16px 0 6px; }
.set-weights { display: flex; gap: 8px; }
.set-weights .db-btn { flex: 1; }
.set-hint { font-size: 13px; color: var(--ice-muted); margin: 6px 0 0; }
.set-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.set-actions .db-btn { justify-content: center; gap: 8px; }
.set-danger { color: var(--ice-rust); }
.set-credit { font-size: 13px; color: var(--ice-muted); text-align: center; margin: 18px 0 4px; }

/* About the author — a reading page, not another settings card. */
.author-page { max-width: 520px; margin: 0 auto; padding: 2px 0 10px; }
.author-photo {
  display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1;
  object-fit: cover; margin: 0 auto 18px; border-radius: 22px;
  background: var(--ice-sand);
}
.author-kicker {
  margin: 0 0 5px; color: var(--ice-clay); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; text-align: center;
}
.author-name {
  margin: 0 0 18px; font-family: var(--db-font-heading); font-size: 32px;
  font-weight: 620; color: var(--ice-ink); text-align: center;
}
.author-page > p:not(.author-kicker) {
  margin: 0 0 14px; color: var(--ice-ink); font-size: 15px; line-height: 1.62;
}
.author-page a { color: var(--ice-clay); text-underline-offset: 3px; }
.author-page .author-ice {
  margin-top: 20px; padding: 15px 16px; border-radius: 16px;
  background: var(--ice-sand); color: var(--ice-muted);
}
.author-links { display: flex; gap: 10px; margin-top: 18px; }
.author-links .db-btn { flex: 1; justify-content: center; gap: 7px; text-decoration: none; }
@media (max-width: 430px) {
  .author-photo { width: 100%; border-radius: 18px; }
  .author-links { flex-direction: column; }
}

@media (min-width: 700px) {
  .ob-title { font-size: 48px; }
}

/* A11y: visible focus for keyboard users.
   !important needed: daub.css .db-btn:focus-visible{outline:none} out-specifies us. */
:focus-visible {
  outline: 2.5px solid var(--ice-clay);
  outline-offset: 2px;
  border-radius: 6px;
}
.db-btn:focus-visible {
  outline: 2.5px solid var(--ice-clay) !important;
  outline-offset: 2px;
}
button.db-btn--primary:focus-visible, button.ob-cta:focus-visible {
  outline: 2.5px solid var(--ice-ink) !important;
  outline-offset: 3px !important;
  outline-color: var(--ice-ink) !important;
}
/* focus must read differently from selection (selection = terracotta border) */
.mood-card:focus-visible, .weight-card:focus-visible {
  outline: 2.5px dashed var(--ice-ink);
  outline-offset: 4px;
}
.warm-range:focus-visible { outline-offset: 6px; }

/* ---- How ICE works (always reachable from the header) ---- */

.help-eli5 {
  background: var(--ice-sand); border-radius: 16px;
  padding: 14px 16px 12px; margin: 0 0 18px;
}
.help-eli5-title {
  font-family: var(--db-font-heading); font-size: 16px; font-weight: 620;
  margin: 0 0 8px; color: var(--ice-ink);
}
.help-eli5 p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ice-ink); }
.help-eli5-list { margin: 0 0 10px; padding-left: 18px; }
.help-h {
  font-family: var(--db-font-heading); font-size: 16px; font-weight: 620;
  margin: 22px 0 8px; color: var(--ice-ink);
}
.help-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ice-muted); }
/* the labelled block */
.help-block { text-align: center; }
/* a diagram, not an item: neutral faces so nobody reads the colour as a DO */
.anatomy {
  /* Its two siblings, .fl-svg and .iso-block, already do this. Without it the
     SVG root clips at the UA default, and the longest label ("Confidence") is
     anchored close enough to the left edge that a fallback font tips it past
     zero: measured x=-0.80 with fonts.googleapis.com blocked, against +8.78
     with Cabin loaded. */
  display: block; width: 100%; max-width: 268px; margin: 4px auto 0; height: auto; overflow: visible;
  --fl-cube-top: #EFE7DA; --fl-cube-front: #CFC5B4; --fl-cube-side: #B6AC9B;
}
.anatomy-rule, .anatomy-span {
  stroke: var(--ice-muted); stroke-opacity: .45; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.anatomy-label {
  font-family: var(--db-font-body); font-size: 10px; font-weight: 700;
  letter-spacing: .03em;
}
.anatomy-label--i { fill: var(--dim-impact); }
.anatomy-label--c { fill: var(--dim-confidence); }
.anatomy-label--e { fill: var(--dim-effort); }
.help-block .help-sub { text-align: left; }
/* two worked examples, side by side */
.help-egs { display: flex; align-items: flex-end; gap: 18px; margin: 10px 0 0; }
.help-eg { flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.help-eg .iso-block { width: auto; }
.help-eg figcaption { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.help-eg b { font-size: 13px; }
.help-eg-sum { font-size: 12px; color: var(--ice-muted); font-variant-numeric: tabular-nums; }
.help-eg-score {
  font-family: var(--db-font-heading); font-size: 22px; font-weight: 640;
  color: var(--ice-sage); line-height: 1.1;
}
.help-eli5-list li { font-size: 14px; line-height: 1.6; color: var(--ice-muted); }
.help-eli5-last { margin-bottom: 0 !important; color: var(--ice-muted) !important; }
.help-formula {
  font-family: var(--db-font-heading); font-size: 17px; font-weight: 620;
  color: var(--ice-ink); margin: 2px 0 14px;
}
.help-dim { font-weight: 700; }
.help-dim--i { color: var(--dim-impact); }
.help-dim--c { color: var(--dim-confidence); }
.help-dim--e { color: var(--dim-effort); }
.help-dims { margin: 0 0 16px; }
.help-dims dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin-top: 10px; }
.help-dims dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--ice-muted); }
.help-note {
  font-size: 14px; line-height: 1.55; color: var(--ice-ink);
  background: var(--ice-sand); border-radius: 14px; padding: 12px 14px; margin: 0 0 18px;
}
.help-step { margin: 0 0 14px; }
.help-step-title { font-family: var(--db-font-heading); font-size: 16px; font-weight: 620; margin: 0 0 4px; }
.help-step-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ice-muted); }
.help-link { font-size: 13px; }
.set-help { margin-top: 6px; width: 100%; justify-content: center; }
.agent-brief {
  width: 100%; margin: 8px 0 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; resize: vertical; min-height: 96px;
  color: var(--ice-muted); background: var(--ice-sand); border-color: transparent;
}
.set-why {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--ice-clay); text-decoration: underline; text-underline-offset: 3px;
}
.help-cites { list-style: none; margin: 10px 0 12px; padding: 0; }
.help-cites li { margin-bottom: 9px; font-size: 13px; line-height: 1.5; }
.help-cites a { display: block; font-weight: 600; }
.help-cite-note { display: block; color: var(--ice-muted); }
.help-caveat { font-style: italic; }

/* Two ways in, weighted the same. Neither is the route and neither is the
   fallback: each card states its own cost, which is the only basis anyone has
   for choosing between them. */
.start-cards { display: grid; gap: 12px; margin: 6px 0 4px; }
.start-card {
  border: 1.5px solid rgba(58,50,42,.12); border-radius: 16px;
  background: var(--ice-sand); text-align: left; width: 100%;
}
.start-card--manual {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; cursor: pointer; font: inherit; color: var(--ice-ink);
}
.start-card--manual:hover { border-color: rgba(58,50,42,.22); }
.start-card-ico { display: grid; place-items: center; flex: none; color: var(--ice-clay-deep); }
.start-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.start-card-title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.start-card-sub { font-size: 13px; color: var(--ice-muted); line-height: 1.35; }
.start-card-go { flex: none; color: var(--ice-muted); }
.auto-details { padding: 0 14px 0; }
.auto-details[open] { padding-bottom: 16px; }
.auto-details-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px 0; color: var(--ice-ink);
  list-style: none;
}
.auto-details-head::-webkit-details-marker { display: none; }
.auto-details-head::after {
  content: ''; margin-left: auto; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--ice-muted); border-bottom: 2px solid var(--ice-muted);
  transform: rotate(45deg); transition: transform .2s;
}
.auto-details[open] .auto-details-head::after { transform: rotate(225deg); }
.auto-lede { font-size: 13px; margin: 0 0 12px; }
.auto-summary--stuck { color: var(--ice-clay-deep); }

/* Reduced motion, caught at the root rather than per component. The named rules
   above say what each animation is for; this one guarantees the setting is
   actually honoured, including transitions in DAUB's own components that this
   file never names. A calm-mode toggle would be redundant while this holds. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}