/* Jyotish Guide - one stylesheet, no framework. Phone first; light and dark by the device setting.
   The look (the owner's choice, 2026-11-13): night-sky indigo #534AB7 on #F4F3FE, soft star gold #FFD466 for what glows
   or matters, deep indigo #2E2A6B for lines and strong text; a deep-night page in dark mode with the same accents. No
   orange, brown, saffron or clay anywhere - the mascot (a white owl in an indigo hat) is drawn in the same colours.
   Gold is a FILL and a MARK (progress, the good hours, the streak, a selected choice), never small text on a light page.
   Tones follow UI brief section 6 (good = green, care = rose, mixed = gold edge); colour is never the only signal:
   every tone also carries a mark and a word. Every animation is switched off under prefers-reduced-motion. */

:root {
  color-scheme: light;
  --bg: #F4F3FE; --surface: #FFFFFF; --soft: #E9E7FB; --ink: #2E2A6B; --muted: #5C5790; --line: #DCD8F6;
  --primary: #534AB7; --primary-ink: #FFFFFF; --primary-deep: #3B3391; --accent: #534AB7; --accent-soft: #E4E1FC;
  --gold: #FFD466; --gold-deep: #E3AE2B; --gold-soft: #FFF3CC; --gold-ink: #2E2A6B;
  --good: #23704A; --good-bg: #DFF3E7; --bad: #A3345A; --bad-bg: #FBE4EC; --mixed: #E3AE2B; --mixed-ink: #2E2A6B; --mixed-bg: #FFF1C7;
  --neutral: #5C5790; --neutral-bg: #ECEAF9;
  --tile: transparent;                 /* behind a picture drawn with deep-indigo outlines: a light tile in dark mode */
  --night: rgba(46, 42, 107, .12);
  --radius: 20px; --gap: 18px; --tabs-h: 68px; --shadow: 0 2px 0 rgba(46, 42, 107, .06), 0 8px 24px rgba(46, 42, 107, .07);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal", "Lohit Devanagari", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #12102B; --surface: #1C1942; --soft: #262256; --ink: #EEECFF; --muted: #B4AFE2; --line: #353070;
    --primary: #6A61D8; --primary-ink: #FFFFFF; --primary-deep: #463DA6; --accent: #B9B3FF; --accent-soft: #2E2A6B;
    --gold: #FFD466; --gold-deep: #E3AE2B; --gold-soft: #3A3462; --gold-ink: #FFE6A3;
    --good: #8BD9A8; --good-bg: #17352B; --bad: #F4A0BC; --bad-bg: #3E1D3A; --mixed: #FFD466; --mixed-ink: #FFE6A3; --mixed-bg: #34305E;
    --neutral: #B4AFE2; --neutral-bg: #262256;
    --tile: #ECEAFB;
    --night: rgba(0, 0, 0, .28);
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; }
html:lang(hi) body { line-height: 1.75; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; line-height: 1.35; font-weight: 750; }
h3 { font-size: 1.0625rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 650; }
a { color: var(--accent); text-underline-offset: 3px; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: 10px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 40; }
.skip:focus { left: 8px; top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: .875rem; line-height: 1.5; }
html:lang(hi) .small { line-height: 1.65; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.center { text-align: center; }

/* ---- frame */
.app { max-width: 640px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gap); padding-top: max(12px, env(safe-area-inset-top)); }
.brand { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.main { flex: 1; padding: 4px var(--gap) 32px; display: flex; flex-direction: column; gap: 20px; outline: none; }
body.with-tabs .main { padding-bottom: calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom)); }
body.with-tabs .main.screen-ask { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
body.staged .top, body.staged .tabs { display: none; }
body.staged .main { padding: 0; }
.boot { padding: 48px 0; text-align: center; color: var(--muted); }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; background: var(--surface);
  border-top: 2px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.tab { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 54px;
  color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 600; line-height: 1.3; border-radius: 14px; }
.tab.on { color: var(--accent); background: var(--accent-soft); }
.icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 800px) {
  .app { max-width: 720px; }
  .tabs { position: sticky; top: 0; bottom: auto; order: -1; border-top: 0; border-bottom: 2px solid var(--line); background: var(--bg); justify-content: flex-start; gap: 6px; padding: 6px var(--gap); }
  .top { order: -2; }
  .tab { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 10px 16px; font-size: .95rem; max-width: none; min-height: 46px; }
  .icon { width: 20px; height: 20px; }
  body.with-tabs .main, body.with-tabs .main.screen-ask { padding-bottom: 48px; padding-top: 20px; }
}

/* ---- surfaces */
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card.soft { background: var(--soft); border-color: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.card.notice { border-color: var(--gold-deep); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.section { display: flex; flex-direction: column; gap: 12px; }
.rows { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline.between { justify-content: space-between; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .row { grid-template-columns: 1fr; } }

/* ---- buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .08s ease; }      /* no colour transition: a theme change must repaint at once (a paused tab froze it half-way) */
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); border-color: var(--primary-deep); color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-deep); }
.btn.primary:active { box-shadow: 0 1px 0 var(--primary-deep); transform: translateY(3px); }
.btn.big { min-height: 56px; font-size: 1.125rem; width: 100%; }
.btn.small { min-height: 44px; padding: 6px 14px; font-size: .92rem; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--muted); border-top-color: transparent; animation: spin .8s linear infinite; }
.btn.primary.busy::after { border-color: var(--primary-ink); border-top-color: transparent; }
.link { background: none; border: 0; padding: 4px; min-height: 44px; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
label, .label { font-weight: 700; font-size: .95rem; }
.hint { font-size: .875rem; color: var(--muted); line-height: 1.5; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--primary); }
.with-peek { display: flex; gap: 8px; }
.peek { flex: 0 0 auto; min-width: 76px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--accent); }
.segs { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.segs.wide { display: flex; }
.seg { flex: 1; min-height: 44px; padding: 6px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg.on { background: var(--primary); color: var(--primary-ink); font-weight: 800; }
.alert { padding: 12px 14px; border-radius: 16px; border-left: 5px solid var(--bad); background: var(--bad-bg); }
.alert.good { border-color: var(--good); background: var(--good-bg); }
.alert.mixed { border-color: var(--mixed); background: var(--mixed-bg); }
.slot:empty { display: none; }
details > summary { cursor: pointer; font-weight: 700; min-height: 32px; }
details.manual { margin-top: 10px; }
details.manual[open] > summary { margin-bottom: 10px; }

/* ---- the mascot (web/js/mascot.js): the owner's pose as ONE picture (the owl: white, with an indigo hat and a crystal
   orb). It breathes from its feet (.m-pic); `happy` blinks (its `blink` twin, .m-blink, shown for a moment); each pose
   plays a one-shot reaction on .m-stage (the whole body) and its small effects (.m-fx). The feet stand at about 91% of
   the picture's height in every pose, so that is where breath and reactions pivot. */
.mascot { position: relative; display: inline-flex; flex: 0 0 auto; --breath: 3.8s; --feet: 91%; }
.mascot .mascot-art { width: 100%; height: 100%; display: block; object-fit: contain; }
.mascot.xl { width: 160px; height: 160px; } .mascot.lg { width: 120px; height: 120px; } .mascot.md { width: 96px; height: 96px; } .mascot.sm { width: 44px; height: 44px; }
.m-stage { position: relative; width: 100%; height: 100%; transform-origin: 50% var(--feet); }
.m-stage.leaving { position: absolute; inset: 0; z-index: 1; animation: fade-out .3s ease both; pointer-events: none; }
.m-pic { position: absolute; inset: 0; transform-origin: 50% var(--feet); animation: owl-breath var(--breath) ease-in-out infinite; }
.m-pic .m-blink { position: absolute; inset: 0; visibility: hidden; }
.m-stage.shut .m-blink { visibility: visible; } .m-stage.shut .m-open { visibility: hidden; }
.mascot.pose-sleepy { --breath: 5.4s; } .mascot.pose-gentle { --breath: 4.6s; }
.mascot.pose-celebrate, .mascot.pose-cheer { --breath: 2.6s; }
/* the owl's deep-indigo outline melts into the night page: a faint lilac glow keeps its hat apart from it */
@media (prefers-color-scheme: dark) { .m-pic .mascot-art { filter: drop-shadow(0 0 4px rgba(201, 194, 245, .38)); } }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: block; flex: 0 0 auto; object-fit: cover; }
.avatar.busy { animation: glow 1.6s ease-in-out infinite; }
.inline.nowrap-row { flex-wrap: nowrap; }
.mascot.pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.mascot-spark { animation: twinkle 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.mascot-eyes { animation: blink 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
/* reactions, played once when the pose appears (or again on react()) */
.react-greeting > .m-stage { animation: hop .6s ease-out .1s, owl-tilt 1.2s ease-in-out; }
.react-pointing > .m-stage { animation: nudge .7s ease-in-out 2; }
.react-cheer > .m-stage { animation: hop .45s ease-out 2; }
.react-celebrate > .m-stage { animation: jump .9s cubic-bezier(.3, 1.4, .5, 1); }
.react-thinking > .m-stage { animation: owl-sway 3.2s ease-in-out; }
.react-listening > .m-stage { animation: lean .6s ease-out forwards; }
.react-reading > .m-stage { animation: nod 1.6s ease-in-out 2; }
.react-gentle > .m-stage { animation: sway 2.6s ease-in-out 2; }
.react-sleepy > .m-stage { animation: owl-droop 2.4s ease-in-out; }
.react-oops > .m-stage { animation: shake .5s ease-in-out; }
.react-private > .m-stage { animation: nod 1.2s ease-in-out; }
.react-waiting > .m-stage { animation: bob 1.6s ease-in-out 2; }
/* small effects beside the mascot: gold sparks, thinking dots, a sleepy "z" (decoration; aria-hidden) */
.m-fx { position: absolute; inset: 0; pointer-events: none; }
.m-fx i { position: absolute; display: block; }
.pose-celebrate .m-fx i { left: 50%; top: 30%; width: 9px; height: 9px; background: var(--gold); border: 1.5px solid var(--gold-deep); transform: rotate(45deg); border-radius: 2px;
  opacity: 0; animation: spark-out 1.1s ease-out .15s both; }
.pose-celebrate .m-fx i:nth-child(1) { --dx: -62px; --dy: -34px; } .pose-celebrate .m-fx i:nth-child(2) { --dx: 60px; --dy: -42px; }
.pose-celebrate .m-fx i:nth-child(3) { --dx: -38px; --dy: -70px; } .pose-celebrate .m-fx i:nth-child(4) { --dx: 34px; --dy: -74px; }
.pose-celebrate .m-fx i:nth-child(5) { --dx: -74px; --dy: 4px; } .pose-celebrate .m-fx i:nth-child(6) { --dx: 72px; --dy: 0; }
.pose-celebrate .m-fx i:nth-child(7) { --dx: 0; --dy: -86px; }
.pose-cheer .m-fx i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); border-radius: 2px; animation: twinkle 1.4s ease-in-out infinite; }
.pose-cheer .m-fx i:nth-child(1) { right: 6%; top: 8%; } .pose-cheer .m-fx i:nth-child(2) { right: -2%; top: 26%; animation-delay: .4s; }
.pose-cheer .m-fx i:nth-child(3) { left: 4%; top: 14%; animation-delay: .8s; }
.pose-thinking .m-fx i { top: 6%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--gold-deep); animation: think-dot 1.4s ease-in-out infinite; }
.pose-thinking .m-fx i:nth-child(1) { right: 22%; } .pose-thinking .m-fx i:nth-child(2) { right: 12%; animation-delay: .2s; } .pose-thinking .m-fx i:nth-child(3) { right: 2%; animation-delay: .4s; }
.pose-sleepy .m-fx i { right: 10%; top: 14%; font-style: normal; font-weight: 800; color: var(--accent); font-size: 15px; line-height: 1; opacity: 0; animation: zzz 3.2s ease-in-out infinite; }
.pose-sleepy .m-fx i::before { content: "z"; }
.pose-sleepy .m-fx i:nth-child(2) { animation-delay: 1.6s; font-size: 12px; }
.mascot.sm .m-fx { display: none; }
.streak-art { width: 22px; height: 22px; display: block; object-fit: contain; }
.brand-icon { width: 36px; height: 36px; border-radius: 10px; display: block; object-fit: cover; }
.duo { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }

/* ---- pictures (web/js/art.js: the owner's file when it is there, a drawn shape until then) */
.token { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.token-art { width: 100%; height: 100%; display: block; object-fit: contain; }
/* the recoloured pictures have deep-indigo outlines that vanish on a dark page: in dark mode they sit on a light tile */
img.token-art, img.bit-art { background: var(--tile); border-radius: 24%; }
@media (prefers-color-scheme: dark) { img.token-art { padding: 8%; } img.bit-art { padding: 3px; } .token.xs img.token-art { padding: 2px; border-radius: 6px; } }
.token.xs { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
.token.sm { width: 36px; height: 36px; } .token.md { width: 64px; height: 64px; } .token.lg { width: 96px; height: 96px; }
.node .token { width: 100%; height: 100%; color: inherit; }
.stop .node:has(img.token-art) { padding: 6px; }          /* a picture fills the stop; a drawn line keeps its margin */
/* the small things (art/bits/) and the check-in's mood faces (art/diary/mood_*) */
.bit-art { display: block; flex: 0 0 auto; object-fit: contain; }
.kicker.with-bit { display: inline-flex; align-items: center; gap: 8px; }
.node-badge { position: absolute; right: -10px; top: -10px; filter: drop-shadow(0 2px 0 rgba(46, 42, 107, .18)); }
@media (prefers-color-scheme: dark) { img.node-badge { padding: 3px; } }
.mood-art { display: block; flex: 0 0 auto; border-radius: 50%; }
.moods .btn.mood-btn { flex-direction: column; gap: 4px; min-height: 92px; border-radius: 22px; padding: 10px 6px; }
.strip .dot img { display: block; border-radius: 50%; background: transparent; padding: 0; }
.strip .d.mood-good .dot:has(img), .strip .d.mood-rough .dot:has(img), .strip .d.mood-mixed .dot:has(img), .strip .d.opened .dot:has(img) { border: 0; background: none; }
.pick-row { display: flex; align-items: center; gap: 12px; }
.nowrap { white-space: nowrap; }
.card.oops { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.medal { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 68px; }
.medal .medal-art { width: 100%; aspect-ratio: 1; height: auto; display: block; object-fit: contain; }
.medal-n { position: relative; margin-top: -12px; padding: 0 10px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 2px var(--gold); font-weight: 800; font-size: .8rem;
  line-height: 1.6; font-variant-numeric: tabular-nums; }
.medal.xl { width: 148px; } .medal.xl .medal-n { margin-top: -22px; padding: 2px 18px; font-size: 1.35rem; }
.medal.off .medal-art { filter: grayscale(1); opacity: .32; }
.medal.off .medal-n { background: var(--soft); color: var(--muted); }
.medals { display: flex; justify-content: space-around; gap: 8px; width: 100%; }

/* ---- the sky band on Today: the picture (or a drawn sky) in a strip at the top, the words below it on the page's own
   colour. The owner's four sky strips end in a plain cream band (their lower half); that band is never shown: the
   picture is masked so that it fades into the page colour just under its hills, in both themes. */
.sky { position: relative; overflow: hidden; border-radius: var(--radius); display: flex; align-items: flex-end; background: var(--bg); --fade: 60%; --clear: 69%; }
/* each strip keeps its own aspect (8:3), so the line where its hills meet the cream band stays at the same place at any
   width; the mask fades the picture out just above that line (measured per picture), and the words start below it */
.sky-img, .sky-drawn { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--fade), transparent var(--clear)); mask-image: linear-gradient(to bottom, #000 0%, #000 var(--fade), transparent var(--clear)); }
.sky.has-art .sky-drawn { display: none; }
.sky-orb { position: absolute; border-radius: 50%; }
.sky-text { position: relative; width: 100%; padding: calc(37.5% * var(--text-at, .7)) 14px 12px; }   /* a % of the width: 37.5% is the strip's height */
.sky.sky-morning { --fade: 44%; --clear: 53%; --text-at: .56; }
.sky.sky-day { --fade: 60%; --clear: 69%; --text-at: .7; }
.sky.sky-evening { --fade: 54%; --clear: 63%; --text-at: .64; }
.sky.sky-night { --fade: 59%; --clear: 68%; --text-at: .69; }
.sky:not(.has-art) { --fade: 40%; --clear: 78%; --text-at: .62; }
.sky-morning .sky-drawn { background: linear-gradient(#FFE29A, #FFF3CC); } .sky-morning .sky-orb { width: 54px; height: 54px; left: 14%; top: 26%; background: #FFD466; box-shadow: 0 0 0 8px rgba(255, 212, 102, .35); }
.sky-day .sky-drawn { background: linear-gradient(#D9D5FB, #F1EFFF); } .sky-day .sky-orb { width: 40px; height: 40px; right: 16%; top: 12%; background: #FFD466; box-shadow: 0 0 0 7px rgba(255, 212, 102, .35); }
.sky-evening .sky-drawn { background: linear-gradient(#6E64D0, #B3ABF2); } .sky-evening .sky-orb { width: 58px; height: 58px; right: 20%; top: 30%; background: #FFD466; }
.sky-night .sky-drawn { background: linear-gradient(#1E1A4D, #3B357F); } .sky-night .sky-orb { width: 34px; height: 34px; left: 16%; top: 14%; background: transparent; box-shadow: 9px 5px 0 0 #FFE6A3; }
@media (prefers-color-scheme: dark) { .sky-img { filter: brightness(.86) saturate(.95); } }

/* ---- the welcome slides */
.slides { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.slides::-webkit-scrollbar { display: none; }
.slide-page { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 10px; }
.slide-page h2 { font-size: 1.35rem; }
.scene { width: 100%; min-height: 176px; display: grid; place-items: center; }
.scene-art { width: min(240px, 62vw); aspect-ratio: 1; height: auto; object-fit: contain; display: block; }
.dots { display: flex; justify-content: center; }
.dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--line); }
.dot.on::before { width: 24px; background: var(--primary); }

/* ---- welcome */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 2vh 0 24px; }
.hero .lead { font-size: 1.125rem; max-width: 30ch; color: var(--muted); }
.hero .stack { width: 100%; max-width: 360px; margin-top: 12px; }

/* ---- tones */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; line-height: 1.5; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; }
.chip.tone-good { background: var(--good-bg); color: var(--good); }
.chip.tone-bad { background: var(--bad-bg); color: var(--bad); }
.chip.tone-mixed { background: var(--mixed-bg); color: var(--mixed-ink); box-shadow: inset 0 0 0 2px var(--mixed); }
.tone-good { --edge: var(--good); } .tone-bad { --edge: var(--bad); } .tone-mixed { --edge: var(--mixed); } .tone-neutral { --edge: var(--line); }

/* ---- a reading: a short face, "More" for the whole line, "Why?" for its source */
.points { display: flex; flex-direction: column; gap: 12px; }
.point, .area { background: var(--surface); border: 2px solid var(--line); border-left: 7px solid var(--edge, var(--line)); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.point-head, .area-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.area-head { justify-content: space-between; }
.about { font-size: .85rem; color: var(--muted); font-weight: 600; }
.point-text { font-size: 1.125rem; font-weight: 600; line-height: 1.45; }
html:lang(hi) .point-text { line-height: 1.65; }
.full-text { font-size: 1rem; color: var(--ink); background: var(--soft); border-radius: 14px; padding: 10px 12px; }
.cond { color: var(--muted); }
.taps { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tap-link { background: none; border: 0; padding: 4px 0; min-height: 44px; color: var(--accent); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.src-full { font-size: .9rem; line-height: 1.5; background: var(--soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.disclaimer { font-size: .84rem; line-height: 1.5; color: var(--muted); border-top: 2px solid var(--line); padding-top: 14px; margin-top: 8px; }

/* ---- the stage: one idea per screen (the ritual, a stop of the path) */
.stage { min-height: 100dvh; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) var(--gap) calc(18px + env(safe-area-inset-bottom)); gap: 16px; }
.stage-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.stage-x { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.progress { flex: 1; display: flex; gap: 6px; }
.progress span { flex: 1; height: 10px; border-radius: 999px; background: var(--line); transition: background .3s ease; }
.progress span.on { background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.stage-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; }
.stage-body.left { align-items: stretch; text-align: left; justify-content: flex-start; padding-top: 8px; }
.stage-foot { display: flex; flex-direction: column; gap: 8px; }
.slide { animation: slide .32s ease both; }
.kicker { font-size: .9rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
html:lang(hi) .kicker { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.big-line { font-size: 1.5rem; line-height: 1.35; font-weight: 750; max-width: 22ch; }
html:lang(hi) .big-line { line-height: 1.55; font-size: 1.4rem; }
.sub-line { color: var(--muted); max-width: 30ch; }
.picks { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px; text-align: left;
  border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform .08s ease; }
.pick:active { transform: scale(.98); }
.pick.on { border-color: var(--primary); background: var(--gold-soft); box-shadow: 0 0 0 2px var(--gold) inset; }
.pick .pick-main { font-weight: 750; font-size: 1.125rem; }
.pick .pick-sub { color: var(--muted); font-size: .92rem; }
.pick .time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.window { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px; border-radius: var(--radius); background: var(--bad-bg); color: var(--bad); }
.window .time { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.streak-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold); font-weight: 800; font-size: .95rem; }
.streak-big { font-size: 3.4rem; line-height: 1; font-weight: 850; color: var(--accent); font-variant-numeric: tabular-nums; }
.sparks { position: relative; width: 0; height: 0; }
.sparks i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); opacity: 0; animation: burst 1s ease-out .15s both; }
.sparks i:nth-child(1) { --dx: -110px; --dy: -70px; } .sparks i:nth-child(2) { --dx: 110px; --dy: -80px; background: var(--primary); }
.sparks i:nth-child(3) { --dx: -70px; --dy: -130px; background: #A79FF2; } .sparks i:nth-child(4) { --dx: 70px; --dy: -140px; }
.sparks i:nth-child(5) { --dx: -140px; --dy: 10px; background: var(--primary); } .sparks i:nth-child(6) { --dx: 140px; --dy: 0; background: #A79FF2; }

/* ---- today */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hello.path-hello { justify-content: flex-start; }
.hello h1 { font-size: 1.45rem; }
.day-card { display: flex; gap: 14px; align-items: flex-start; border-left: 7px solid var(--edge, var(--line)); }
.day-card .day-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.day-line { font-size: 1.3rem; line-height: 1.4; font-weight: 750; }
html:lang(hi) .day-line { line-height: 1.6; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; flex-direction: column; padding: 8px 14px; border-radius: 16px; background: var(--soft); }
.pill b { font-size: 1rem; }
.hours { display: flex; flex-direction: column; gap: 8px; }
.hours-bar { position: relative; height: 34px; border-radius: 999px; background: var(--soft); overflow: hidden; border: 2px solid var(--line); }
.hours-bar .seg-good, .hours-bar .seg-bad, .hours-bar .night, .hours-bar .now { position: absolute; top: 0; bottom: 0; }
.hours-bar .night { background: var(--night); }
.hours-bar .seg-good { background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.hours-bar .seg-bad { background: repeating-linear-gradient(45deg, var(--bad), var(--bad) 5px, transparent 5px, transparent 9px); border-left: 2px solid var(--bad); border-right: 2px solid var(--bad); }
.hours-bar .now { width: 3px; background: var(--ink); border-radius: 2px; }
.hours-scale { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; background: var(--gold); border: 1px solid var(--gold-deep); }
.legend i.bad { background: repeating-linear-gradient(45deg, var(--bad), var(--bad) 3px, transparent 3px, transparent 6px); border: 1px solid var(--bad); }
.hour-list { display: flex; flex-wrap: wrap; gap: 8px; }
.period { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); border: 2px solid transparent; font-size: .95rem; }
.period.bad { background: var(--bad-bg); color: var(--bad); }
.period.now { border-color: currentColor; }
.period.mine { box-shadow: 0 0 0 3px var(--primary); }
.period .time { font-variant-numeric: tabular-nums; font-weight: 700; }
.period .when { font-size: .78rem; font-weight: 800; }
.moods { display: flex; gap: 8px; width: 100%; }
.moods .btn { flex: 1; }
.areas { display: flex; flex-direction: column; gap: 10px; }
.list-block { background: var(--surface); border: 2px solid var(--line); border-top: 7px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.list-block.good { border-top-color: var(--good); } .list-block.bad { border-top-color: var(--bad); } .list-block.mixed { border-top-color: var(--mixed); }
.list-block h3 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.list-block.good h3 { color: var(--good); } .list-block.bad h3 { color: var(--bad); } .list-block.mixed h3 { color: var(--mixed-ink); }
.lb-mark { font-weight: 800; }
.lines li { padding: 8px 0; border-top: 2px solid var(--line); }
.lines li:first-child { border-top: 0; }
.details-body { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }

/* ---- the path */
.path { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 4px; }
.stop { display: flex; align-items: center; gap: 14px; width: 82%; padding: 6px 0; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.stop:nth-child(4n+2) { margin-left: 9%; } .stop:nth-child(4n+3) { margin-left: 18%; } .stop:nth-child(4n+4) { margin-left: 9%; }
.stop .node { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent);
  border: 4px solid var(--primary); box-shadow: 0 5px 0 var(--primary-deep); padding: 14px; }
.stop.open .node { background: var(--gold-soft); border-color: var(--gold-deep); box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 6px rgba(255, 212, 102, .35); }
.stop.done .node { background: var(--surface); color: var(--good); border-color: var(--good); box-shadow: 0 5px 0 var(--line); }
.stop.locked { cursor: default; }
.stop.end { cursor: default; }
.stop.locked .node { background: var(--soft); color: var(--muted); border-color: var(--line); box-shadow: 0 5px 0 var(--line); }
.stop.locked .node img { filter: grayscale(1); opacity: .45; }
.stop.open .node { animation: bob 2.2s ease-in-out infinite; }
.stop .stop-title { font-weight: 750; font-size: 1.05rem; line-height: 1.3; }
.stop .stop-sub { font-size: .85rem; color: var(--muted); }

/* ---- ask */
.log { display: flex; flex-direction: column; gap: 14px; }
.turn { border-radius: 22px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; max-width: 92%; }
.turn.from-you { align-self: flex-end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 6px; font-weight: 600; }
.turn-row { display: flex; gap: 8px; align-items: flex-end; }
.turn.from-app { background: var(--surface); border: 2px solid var(--line); border-bottom-left-radius: 6px; }
.turn.from-app .reply { font-size: 1.1rem; line-height: 1.5; }
html:lang(hi) .turn.from-app .reply { line-height: 1.7; }
.turn.from-app .points .point { background: var(--bg); box-shadow: none; }
.turn.from-app .point-text { font-size: 1rem; font-weight: 500; }
.turn.waiting { flex-direction: row; align-items: center; color: var(--muted); }
.needs { font-weight: 700; }
.noted { background: var(--soft); border-radius: 14px; padding: 8px 12px; }
.noted ul { list-style: disc; padding-left: 20px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .btn { text-align: left; justify-content: flex-start; min-height: 44px; border-radius: 18px; font-weight: 600; font-size: .95rem; }
.composer .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.composer .chips .btn { flex: 0 0 auto; white-space: nowrap; }
.composer { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); background: var(--bg); padding: 10px 0; border-top: 2px solid var(--line); margin-top: 4px; }
.composer .send-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 50px; border-radius: 22px; }
@media (min-width: 800px) { .composer { bottom: 0; padding-bottom: 12px; } }

/* ---- me */
.facts { display: flex; flex-direction: column; padding: 4px 18px; }
.fact { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 2px solid var(--line); }
.fact:first-child { border-top: 0; }
.fold > summary { list-style-position: inside; }
.fold[open] > summary { margin-bottom: 12px; }
.fold-body { display: flex; flex-direction: column; gap: 12px; }
.danger-zone { border-color: var(--bad); }
.danger-zone > summary { color: var(--bad); }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: 100%; }
.strip .d { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.strip .dot { width: 34px; height: 34px; padding: 0; cursor: default; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.strip .dot::before { content: none; }              /* (not the welcome slides' dot) */
.strip .d.opened .dot { border: 2px solid var(--gold-deep); background: var(--gold-soft); color: var(--gold-ink); }
.strip .d.mood-good .dot { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.strip .d.mood-rough .dot { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

/* ---- place picker */
.place-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.place { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: 50px; padding: 8px 14px; text-align: left; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.place:hover { border-color: var(--primary); }
.sep { margin-top: 6px; }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--soft); }

/* ---- consent and prose */
.prose { display: flex; flex-direction: column; gap: 14px; }
.status-line { padding: 10px 14px; border-radius: 16px; background: var(--soft); font-weight: 600; }

/* ---- report */
.report-head { display: flex; flex-direction: column; gap: 8px; }
.stmts { display: flex; flex-direction: column; gap: 8px; }
.stmt { border-left: 5px solid var(--edge, var(--line)); padding: 2px 0 2px 12px; }
.cite { color: var(--muted); font-size: .875rem; }
.group { display: flex; flex-direction: column; gap: 8px; }
.plain { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.house { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }

/* ---- kundli */
.chart-stage { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; }
.chart { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.chart .sg { fill: var(--muted); font-size: 12px; text-anchor: middle; dominant-baseline: middle; }
.chart .pl { fill: var(--ink); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.table-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-size: .8rem; color: var(--muted); font-weight: 700; }
tbody th { font-weight: 700; position: sticky; left: 0; background: var(--surface); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }
.dashas { display: flex; flex-direction: column; }
.dashas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.dashas li.running { font-weight: 700; }

/* ---- status */
.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; text-align: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .9s linear infinite; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom)); z-index: 30; max-width: min(92vw, 520px);
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 18px; font-size: .95rem; font-weight: 600; text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes owl-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.024); } }
@keyframes owl-droop { 0%, 100% { transform: translateY(0) rotate(0); } 45%, 70% { transform: translateY(3px) rotate(-2deg) scaleY(.975); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(1px) scaleY(.97); } }
@keyframes owl-tilt { 0%, 100% { rotate: 0deg; } 30% { rotate: -5deg; } 65% { rotate: 2deg; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(7px) rotate(2deg); } }
@keyframes jump { 0% { transform: scale(1, 1); } 18% { transform: scale(1.06, .9); } 45% { transform: translateY(-18px) scale(.96, 1.06); } 75% { transform: translateY(0) scale(1.04, .95); } 100% { transform: scale(1, 1); } }
@keyframes owl-sway { 0%, 100% { rotate: 0deg; } 30% { rotate: -3.5deg; } 70% { rotate: 2deg; } }
@keyframes lean { to { transform: rotate(3.5deg) translateX(3px); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(2.5deg) translateY(2px); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px) rotate(-1.5deg); } 40%, 80% { transform: translateX(4px) rotate(1.5deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 102, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 212, 102, .55); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes spark-out { 0% { transform: translate(0, 0) rotate(45deg) scale(.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(1); opacity: 0; } }
@keyframes think-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes zzz { 0% { transform: translate(0, 6px) scale(.7); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -22px) scale(1.1); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* ---- "What today suits" (dos.js): a card per activity - its picture, a mark AND a word for the verdict, the hours it
   holds for, the engine's line as it is (its head in bold), the books, and "Why?" */
.dos-block { gap: 12px; }
.do-list { display: flex; flex-direction: column; gap: 12px; }
.do-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 2px solid var(--line); border-left: 8px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 10px 12px; box-shadow: var(--shadow); }
.do-card.v-good { border-left-color: var(--good); } .do-card.v-bad { border-left-color: var(--bad); } .do-card.v-mixed { border-left-color: var(--mixed); }
.do-card.past { opacity: .62; }
.point.past, .lines li.past { opacity: .62; }
.lines li.past .chip { display: inline-flex; margin-bottom: 4px; }
.do-pic { flex: 0 0 auto; width: 56px; height: 56px; }
.do-art { display: block; width: 56px; height: 56px; object-fit: contain; }
.do-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.do-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.when-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .82rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.do-line { font-size: 1.04rem; line-height: 1.4; }
.do-line strong { font-weight: 750; }
.do-rest { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
html:lang(hi) .do-line { line-height: 1.6; } html:lang(hi) .do-rest { line-height: 1.65; }
.do-links { display: flex; align-items: flex-start; gap: 0 14px; }
.do-links .tap-link { flex: 0 0 auto; padding-top: 0; min-height: 44px; display: inline-flex; align-items: flex-start; }
.do-books { flex: 1; min-width: 0; color: var(--accent); font-weight: 700; font-size: .88rem; line-height: 1.5; padding-top: 1px; }
.do-why { background: var(--soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.do-reasons, .do-rules { display: flex; flex-direction: column; gap: 4px; }
.do-reasons li, .do-rules li { display: flex; gap: 8px; align-items: baseline; }
.do-rule-text { display: block; }
.do-side { font-weight: 800; flex: 0 0 auto; width: 1em; text-align: center; }
.do-side.good, .do-group.good { color: var(--good); } .do-side.bad, .do-group.bad { color: var(--bad); } .do-side.mixed, .do-group.mixed { color: var(--mixed-ink); }
.do-direction { background: var(--soft); border-radius: 16px; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 2px; }
.do-direction .do-why { background: var(--surface); }
.small-spin { width: 22px; height: 22px; border-width: 2.5px; }
.back-link { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.diary-day-actions { align-items: flex-start; }

/* ---- the diary (diary.js) and the five moods (also Today's evening check-in) */
.hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.mood-pick { display: flex; justify-content: space-between; gap: 4px; width: 100%; }
.mood-opt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 44px;
  border: 2px solid transparent; border-radius: 14px; background: none; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; }
.mood-opt.on { border-color: var(--gold-deep); background: var(--gold-soft); color: var(--ink); }
.mood-opt:active { transform: scale(.96); }
.mood-opt.busy { opacity: .6; }
.card.said { display: flex; gap: 12px; align-items: flex-start; }
.said-art { flex: 0 0 auto; display: block; object-fit: contain; }
.diary-art { display: block; flex: 0 0 auto; object-fit: contain; }
.diary-days { display: flex; flex-direction: column; padding: 4px 18px; }
.diary-days > li { border-top: 2px solid var(--line); }
.diary-days > li:first-child { border-top: 0; }
.diary-day { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 0; min-height: 56px; background: none; border: 0; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
li.diary-day.still { cursor: default; align-items: flex-start; }
.dd-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dd-go { flex: 0 0 auto; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.week-days summary, .learn-more summary { color: var(--accent); font-weight: 700; cursor: pointer; padding: 6px 0; }
.learn-more p { margin-top: 8px; }
.week-days ul { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.dd-face { flex: 0 0 auto; width: 38px; display: grid; place-items: center; }
.dd-date { font-weight: 800; font-size: .92rem; display: block; }
.week-moods { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.wm { display: inline-flex; align-items: center; gap: 3px; }
.diary-empty .diary-art { margin: 0 auto; }
.stack.tight { gap: 6px; }
.grow { flex: 1; min-width: 0; }

/* ---- "What I know about you" (memory.js) */
.switch-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.switch { position: relative; flex: 0 0 auto; width: 56px; height: 32px; border-radius: 999px; border: 2px solid var(--line); background: var(--soft); cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(46, 42, 107, .3); transition: left .15s; }
.switch.on { background: var(--primary); border-color: var(--primary-deep); }
.switch.on::after { left: 27px; background: #FFFFFF; }
.switch:disabled { opacity: .5; cursor: default; }
.switch.busy { color: transparent; }
.version { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-top: 8px; border-top: 2px solid var(--line); }

/* the pictures of dos/ and diary/ have deep-indigo outlines: on a light tile in dark mode, like the rest of the art */
img.do-art, img.diary-art { background: var(--tile); border-radius: 22%; }
@media (prefers-color-scheme: dark) { img.do-art { padding: 5px; } img.diary-art { padding: 3px; } }

/* movement only, never opacity: a page whose animations are paused (a background tab) must still show its content */
@keyframes pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes slide { 0% { transform: translateX(24px); } 100% { transform: translateX(0); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes burst { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner, .btn.busy::after { animation: spin 2.5s linear infinite !important; }
  .sparks, .m-fx { display: none; }
}
@media print { .tabs, .top, .composer, .btn { display: none !important; } body { background: #fff; } }