/* Daily Routine: Today view. Designed for iPhone SE width (375px) first. */

:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --text: #22201c;
  --muted: #6f6a61;
  --line: #e2ddd2;
  --accent: #2f7d5b;
  --accent-text: #ffffff;
  --accent-soft: #dcefe5;
  --warm: #b8672a;
  --shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 6px 20px rgba(40, 30, 10, .07);

  /* Category colors (match the seeded plans) */
  --c-faith: #7c5cbf;
  --c-health: #2f9e6e;
  --c-work: #3b7dd8;
  --c-training: #d9534f;
  --c-home: #8a6d3b;
  --c-projects: #6c757d;
  --c-planning: #17a2b8;

  --radius: 16px;
  --gutter: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181b;
    --surface: #212429;
    --surface-2: #2a2e34;
    --text: #ece9e3;
    --muted: #a19d95;
    --line: #33373e;
    --accent: #4fb488;
    --accent-text: #0e1f17;
    --accent-soft: #1e3a2d;
    --warm: #e19a5c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 24px) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.top { padding: 12px var(--gutter) 8px; }
.top-row { display: flex; align-items: center; gap: 8px; }
.date-block { flex: 1; text-align: center; }
.date { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: transparent; font-size: 28px; line-height: 1; color: var(--muted);
}
.icon-btn:active { background: var(--surface-2); }
.chip {
  margin-top: 4px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--muted);
}

.week { margin-top: 12px; }
.week-bar { position: relative; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: visible; }
.week-fill { height: 100%; border-radius: 99px; background: var(--accent); width: 0; transition: width .5s ease; }
.week-goal { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--muted); opacity: .6; border-radius: 1px; }
.week-text { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--muted); }

.banner {
  margin: 8px var(--gutter); padding: 12px 14px; border-radius: 12px;
  background: #fbe9d9; color: #6b3a12; font-size: 14px;
}
@media (prefers-color-scheme: dark) { .banner { background: #3b2a1c; color: #f2c9a2; } }
.banner button { margin-left: 8px; border: 0; background: none; text-decoration: underline; color: inherit; }

main { padding: 0 var(--gutter); }
.loading { color: var(--muted); text-align: center; margin-top: 40px; }

/* ---------- Now card ---------- */
.now {
  position: relative; margin-top: 12px; padding: 18px 18px 16px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 5px solid var(--cat, var(--accent)); overflow: hidden;
}
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cue { font-size: 14px; color: var(--muted); margin-top: 6px; }
.now h1 { font-size: 24px; line-height: 1.2; margin: 4px 0 0; letter-spacing: -.01em; }
.details { margin: 10px 0 0; color: var(--text); opacity: .85; font-size: 15px; white-space: pre-line; }
.link { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; }
.badge {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 99px;
  background: #fdecd8; color: #8a4a12; font-size: 13px; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .badge { background: #45301c; color: #f2c9a2; } }
.note {
  display: block; width: 100%; margin-top: 12px; min-height: 76px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
  font: inherit; font-size: 16px; resize: vertical;
}

.actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 16px; }
.btn {
  min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-size: 17px; }
.btn-quiet { background: var(--surface-2); border-color: transparent; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; }

.all-done { text-align: center; padding: 28px 18px; }
.all-done .big { font-size: 40px; }
.all-done h1 { font-size: 22px; margin: 8px 0 4px; }
.all-done p { color: var(--muted); margin: 0; }

/* Completion burst */
.burst {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent); animation: fade .7s ease forwards;
}
.burst span {
  width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-size: 40px; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1);
}
.points-pop {
  position: absolute; right: 18px; top: 14px; font-weight: 800; font-size: 22px; color: var(--accent);
  animation: rise 1.1s ease-out forwards; pointer-events: none;
}
@keyframes pop { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-36px); } }

/* ---------- Lists ---------- */
.section-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 24px 2px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.section-title button { border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 4px; }
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-top: 1px solid var(--line); min-height: 56px; }
.row:first-child { border-top: 0; }
.row .main { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 4px 0; }
.row .title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.check {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cat, var(--line));
  background: transparent; display: grid; place-items: center; font-size: 16px; color: var(--accent-text);
}
.check:active { background: var(--accent-soft); }
.row.done .check { background: var(--accent); border-color: var(--accent); }
.row.done .title, .row.skipped .title, .row.missed .title { color: var(--muted); font-weight: 500; }
.row.skipped .check { border-style: dashed; }
.row.missed .check { opacity: .4; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); margin-left: -2px; }

details.done-list > summary {
  list-style: none; cursor: pointer; margin: 24px 2px 8px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
details.done-list > summary::-webkit-details-marker { display: none; }
details.done-list > summary::after { content: ' ▸'; }
details.done-list[open] > summary::after { content: ' ▾'; }

.empty { color: var(--muted); font-size: 15px; padding: 14px 4px; }

/* Category accents */
[data-cat="faith"] { --cat: var(--c-faith); }
[data-cat="health"] { --cat: var(--c-health); }
[data-cat="work"] { --cat: var(--c-work); }
[data-cat="training"] { --cat: var(--c-training); }
[data-cat="home"] { --cat: var(--c-home); }
[data-cat="projects"] { --cat: var(--c-projects); }
[data-cat="planning"] { --cat: var(--c-planning); }

/* ---------- Bottom sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 10; animation: fadein .15s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 10px var(--gutter) calc(env(safe-area-inset-bottom) + 16px);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); animation: slideup .2s ease;
}
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet h2 { font-size: 20px; margin: 4px 0 4px; }
.sheet .hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.choice {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 15px;
}
.choice[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.option {
  display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.option strong { display: block; }
.option span { font-size: 14px; color: var(--muted); }
.sheet-actions { display: grid; gap: 8px; margin-top: 12px; }

.plan-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.plan-row:first-child { border-top: 0; }
.plan-row .main { flex: 1; min-width: 0; }
.plan-row .title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-row.dropped .title { text-decoration: line-through; color: var(--muted); }
.plan-row .sub { font-size: 13px; color: var(--muted); }
.toggle { min-width: 92px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.plan-row.dropped .toggle { background: var(--surface-2); }

/* ---------- Notifications ---------- */
.notify-card {
  margin: 12px var(--gutter) 0; padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent-soft); display: grid; gap: 10px;
}
.notify-card strong { display: block; font-size: 16px; }
.notify-card p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.notify-card .row-btns { display: flex; gap: 8px; }
.notify-card .row-btns .btn { flex: 1; }
.footer { margin: 28px var(--gutter) 0; text-align: center; font-size: 13px; color: var(--muted); }
.footer button { border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; padding: 8px 4px; }

/* ---------- Tab bar ---------- */
body { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px;
  color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; min-height: 52px;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab svg circle[r="1.2"] { fill: currentColor; stroke: none; }
.tab[aria-current="page"] { color: var(--accent); }
body:not([data-view="today"]) .top,
body:not([data-view="today"]) #notify-card,
body:not([data-view="today"]) #footer,
body:not([data-view="today"]) #buddy,
body:not([data-view="today"]) #banner { display: none !important; }

/* ---------- Companion: the raccoon front and center on Today ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end; gap: 4px; margin: 10px var(--gutter) 0;
  padding: 10px 12px 0 4px; min-height: 172px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--hero-sky, #dcefe5) 0%, var(--hero-sky2, #f3f8f2) 62%, var(--hero-ground, #cfe6c4) 62.5%, var(--hero-ground2, #bcdcae) 100%);
  box-shadow: 0 1px 2px rgba(38, 34, 25, .08), 0 12px 28px rgba(38, 34, 25, .12);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.9) 0 2px, transparent 3px),
              radial-gradient(circle at 88% 30%, rgba(255,255,255,.75) 0 1.5px, transparent 2.5px),
              radial-gradient(ellipse at 50% 100%, rgba(62,92,55,.14), transparent 58%);
}
.hero[data-time="morning"]   { --hero-sky: #c9bbb0; --hero-sky2: #e6d6bd; --hero-ground: #788b6e; --hero-ground2: #5c7157; }
.hero[data-time="afternoon"] { --hero-sky: #9fb9c0; --hero-sky2: #d5d9ca; --hero-ground: #788d6d; --hero-ground2: #596f56; }
.hero[data-time="evening"]   { --hero-sky: #847987; --hero-sky2: #c59a79; --hero-ground: #687b60; --hero-ground2: #4d654d; }
.hero[data-time="cozy"]      { --hero-sky: #625e70; --hero-sky2: #a77b68; --hero-ground: #5a6e55; --hero-ground2: #405744; }
.hero[data-time="night"]     { --hero-sky: #192235; --hero-sky2: #394858; --hero-ground: #405545; --hero-ground2: #293d32; }
.hero-art {
  position: relative; flex: none; width: 150px; height: 150px; margin-bottom: 6px;
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero-art::after { content: ''; position: absolute; z-index: 0; left: 27px; right: 16px; bottom: 3px; height: 12px; border-radius: 50%; background: rgba(52, 73, 45, .13); filter: blur(2px); }
.hero-art svg { display: block; overflow: visible; }
.hero-art svg, .buddy-z, .buddy-sparkles, .pat-hearts { position: relative; z-index: 1; }
.hero-side { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0 14px; }
.bubble {
  position: relative; padding: 10px 13px; border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 2px 10px rgba(40, 30, 10, .12); font-size: 15px; font-weight: 600; line-height: 1.35;
}
.bubble:empty { visibility: hidden; }
.bubble::before { content: ''; position: absolute; left: -7px; bottom: 16px; border: 7px solid transparent; border-right-color: var(--surface); border-left: 0; }
.bubble-in { animation: bubble-in .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.hero-name {
  align-self: flex-start; margin-top: 8px; padding: 4px 10px; border-radius: 99px; text-decoration: none;
  background: rgba(255, 255, 255, .7); color: #2d4a3a; font-size: 13px; font-weight: 700;
}
.hero[data-time="night"] .hero-name { background: rgba(0, 0, 0, .3); color: #e6ecff; }
.buddy-z { position: absolute; right: 18px; top: 10px; font-weight: 800; font-size: 18px; color: #c9d2f0; animation: zzz 3s ease-in-out infinite; }
.buddy-z span { position: absolute; left: 10px; top: -10px; font-size: 13px; animation: zzz 3s ease-in-out 1.2s infinite; }

/* Things it does on its own (and when tapped). The parts have transform origins set in the drawing. */
.raccoon .hop-wrap, .raccoon .head-anim, .raccoon .wave-arm, .raccoon .ear-l-anim, .raccoon .pupils { transform-box: view-box; }
.raccoon.act-hop .hop-wrap { animation: hop .7s cubic-bezier(.3, 1.6, .5, 1); }
/* Waving: the resting arm steps aside for a raised arm beside the head, swinging from the elbow. */
.raccoon .wave-arm { opacity: 0; }
.raccoon.act-wave .wave-arm { opacity: 1; animation: wave 1.7s ease-in-out; }
.raccoon.act-wave .arm-r-anim { opacity: 0; }
.raccoon.act-look .head-anim { animation: look 1.8s ease-in-out; }
.raccoon.act-look .pupils { animation: glance 1.8s ease-in-out; }
.raccoon.act-tilt .head-anim { animation: tilt 1.6s ease-in-out; }
.raccoon.act-ear .ear-l-anim { animation: twitch .7s ease-in-out 2; }
.raccoon.act-shuffle .hop-wrap { animation: shy-shuffle 1.5s ease-in-out; }
.raccoon.act-shuffle .head-anim { animation: shy-head 1.5s ease-in-out; }
.raccoon.act-twinkle .hop-wrap { animation: tiny-prance 1.35s ease-in-out; }
.raccoon.act-twinkle .tail { animation: happy-tail .32s ease-in-out 4; }
.raccoon.act-cuddle .hop-wrap { animation: cuddle .9s cubic-bezier(.2, 1.5, .4, 1); }
.raccoon.act-cuddle .eyes { animation: happy-squint .9s ease-in-out; }
@keyframes hop { 30% { transform: translateY(-12px); } 60% { transform: translateY(0); } 78% { transform: translateY(-3px); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 17%, 51% { transform: rotate(-16deg); } 34%, 68% { transform: rotate(14deg); } 85% { transform: rotate(-8deg); } }
@keyframes look { 25%, 40% { transform: rotate(-6deg); } 60%, 75% { transform: rotate(6deg); } }
@keyframes glance { 25%, 40% { transform: translateX(-1.6px); } 60%, 75% { transform: translateX(1.6px); } }
@keyframes tilt { 30%, 70% { transform: rotate(10deg); } }
@keyframes twitch { 50% { transform: rotate(-14deg); } }
@keyframes shy-shuffle { 25% { transform: translateX(-3px) rotate(-2deg); } 65% { transform: translateX(3px) rotate(2deg); } }
@keyframes shy-head { 30%, 70% { transform: rotate(-5deg) translateY(2px); } }
@keyframes tiny-prance { 22%, 66% { transform: translateY(-5px) rotate(-2deg); } 44%, 88% { transform: translateY(-2px) rotate(2deg); } }
@keyframes happy-tail { 50% { transform: rotate(11deg); } }
@keyframes cuddle { 35% { transform: translateY(-4px) scale(1.045) rotate(-2deg); } 70% { transform: translateY(0) scale(.985) rotate(1deg); } }
@keyframes happy-squint { 35%, 65% { transform: scaleY(.22); } }
.buddy-sparkles { position: absolute; inset: 0; pointer-events: none; }
.buddy-sparkles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff4b8; box-shadow: 0 0 7px #fff4b8; animation: buddy-glimmer 3.2s ease-in-out infinite; }
.buddy-sparkles i:nth-child(1) { left: 13px; top: 36px; }
.buddy-sparkles i:nth-child(2) { right: 12px; top: 22px; animation-delay: 1.1s; transform: scale(.7); }
.buddy-sparkles i:nth-child(3) { right: 4px; top: 78px; animation-delay: 2.2s; transform: scale(.55); }
@keyframes buddy-glimmer { 0%, 72%, 100% { opacity: 0; } 82% { opacity: 1; } }
.pat-hearts { position: absolute; left: 50%; top: 23px; width: 50px; height: 60px; pointer-events: none; }
.pat-hearts i { position: absolute; color: #ead39a; font-size: 15px; font-style: normal; text-shadow: 0 0 5px rgba(255, 230, 160, .7); animation: heart-float 1.25s ease-out forwards; }
.pat-hearts i:nth-child(2) { left: 22px; top: 9px; color: #d7b56f; animation-delay: .12s; font-size: 11px; }
.pat-hearts i:nth-child(3) { left: 40px; top: 22px; color: #f1dfae; animation-delay: .22s; font-size: 9px; }
@keyframes heart-float { 0% { opacity: 0; transform: translateY(8px) scale(.55) rotate(-8deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-38px) scale(1.15) rotate(9deg); } }
.wiggle { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* Living details in the art */
.raccoon .body-wrap { transform-origin: 60px 112px; animation: breathe 3.6s ease-in-out infinite; }
.raccoon .eyes { transform-origin: 60px 51px; animation: blink 5s infinite; }
.raccoon .tail { transform-origin: 78px 98px; animation: sway 4s ease-in-out infinite; }
.raccoon .breathe { transform-origin: 60px 80px; animation: breathe 4.5s ease-in-out infinite; }
.raccoon .zzz { animation: zzz 3s ease-in-out infinite; }
.raccoon .z2 { animation-delay: 1.2s; }
.scene .smoke { animation: smoke 4s ease-in-out infinite; }
.scene .glow { animation: glow 3s ease-in-out infinite; }
.scene .sparkle { animation: twinkle 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.025); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes sway { 50% { transform: rotate(5deg); } }
@keyframes zzz { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes smoke { 50% { transform: translate(3px, -4px); opacity: .7; } }
@keyframes glow { 50% { opacity: .2; } }
@keyframes twinkle { 50% { opacity: .2; } }

/* ---------- Companion: Home tab ---------- */
.home-head { display: flex; align-items: baseline; justify-content: space-between; }
.link-btn { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 15px; padding: 8px 2px; }
.scene-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); line-height: 0; }
.scene-card svg { width: 100%; height: auto; display: block; }
.talk-card { width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; color: inherit; }
.talk-card:active { transform: scale(.99); }
.talk-icon { flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); }
.talk-icon svg { display: block; }
.talk-card > span:nth-child(2) { flex: 1; min-width: 0; }
.talk-card strong, .talk-card small { display: block; }
.talk-card small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.talk-arrow { color: var(--muted); font-size: 28px; }
.name-card { margin-top: 12px; display: grid; gap: 10px; }
.name-form { display: flex; gap: 8px; }
.name-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}
.stage-card { margin-top: 12px; }
.stage-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; }
.stage-line span { font-size: 13px; color: var(--muted); }
.meter { height: 10px; border-radius: 99px; background: var(--surface-2); margin: 10px 0 2px; overflow: hidden; }
.meter div { height: 100%; border-radius: 99px; background: var(--accent); transition: width .6s ease; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; }
.areas .levels { display: flex; gap: 4px; }
.areas .levels i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.areas .levels i.on { background: var(--cat); border-color: var(--cat); }
.today-tag { font-size: 12px; color: var(--accent); font-weight: 700; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.journey li { display: flex; gap: 12px; padding: 8px 4px; color: var(--muted); }
.journey li.reached { color: var(--text); }
.journey li.current { background: var(--accent-soft); border-radius: 12px; }
.journey .mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  border: 2px solid var(--line); background: var(--surface);
}
.journey .reached .mark { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.journey .sub { display: block; font-size: 13px; }

/* ---------- Companion: expressions, evolution, memory book ---------- */
.buddy-art { position: relative; }
.buddy-z { position: absolute; right: 2px; top: 0; font-weight: 800; font-size: 14px; color: var(--muted); animation: zzz 3s ease-in-out infinite; }
.raccoon .aura { transform-origin: 60px 72px; animation: aura 4s ease-in-out infinite; }
@keyframes aura { 50% { transform: scale(1.06); opacity: .75; } }
.silhouette svg { filter: brightness(0); opacity: .2; }
@media (prefers-color-scheme: dark) { .silhouette svg { filter: brightness(0) invert(1); opacity: .18; } }

.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.form-card { margin: 0; padding: 6px 4px 8px; text-align: center; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); }
.form-card.current { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.form-card svg { display: block; margin: 0 auto; }
.form-card figcaption { font-size: 13px; font-weight: 700; }
.form-card figcaption span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }

.memories { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.memory { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); }
.memory-art { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; overflow: hidden; }
.memory strong { display: block; }
.memory p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.memory-date { display: block; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }

/* Companion chat: intentionally a friend-shaped conversation, not an assistant console. */
.sheet:has(.chat-head) { height: min(82vh, 680px); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; flex: none; }
.chat-head h2, .chat-head .hint { margin: 0; }
.chat-avatar { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; overflow: hidden; }
.chat-close { margin-left: auto; align-self: flex-start; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 28px; line-height: 1; }
.chat-messages { flex: 1; min-height: 140px; overflow-y: auto; padding: 14px 2px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat-message { max-width: 86%; }
.chat-message p { margin: 0; padding: 9px 12px; border-radius: 16px; white-space: pre-wrap; }
.chat-message.from-pet { align-self: flex-start; }
.chat-message.from-pet p { background: var(--surface-2); border-bottom-left-radius: 5px; }
.chat-message.from-user { align-self: flex-end; }
.chat-message.from-user p { background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 5px; }
.chat-speaker { display: block; margin: 0 0 3px 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.chat-welcome { margin: auto; max-width: 250px; text-align: center; color: var(--muted); }
.chat-welcome strong, .chat-welcome span { display: block; }
.chat-welcome span { margin-top: 4px; font-size: 14px; }
.chat-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; min-width: 0; max-height: 108px; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.chat-form .btn { min-height: 46px; }
.chat-note { flex: none; margin: 8px 2px 0; color: var(--muted); font-size: 11px; text-align: center; }
.chat-thinking p { display: flex; gap: 4px; padding: 13px 16px; }
.chat-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-dot 1s ease-in-out infinite; }
.chat-thinking i:nth-child(2) { animation-delay: .15s; }
.chat-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 50% { transform: translateY(-3px); opacity: .55; } }

/* Evolution: the old form glows, a flash, the new form appears with sparkles */
.celebrate-art { position: relative; min-height: 160px; }
.evolving .evo-old, .evolving .evo-new { position: absolute; inset: 0; display: grid; place-items: center; }
.evolving .evo-old { animation: evo-glow 1.8s ease-in forwards; }
.evolving .evo-new { opacity: 0; animation: evo-appear .8s cubic-bezier(.2, 1.4, .4, 1) 1.9s forwards; }
.evo-flash { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff6cc 40%, transparent 70%); opacity: 0; animation: evo-flash .9s ease-out 1.5s forwards; pointer-events: none; }
.evo-sparkles { position: absolute; inset: 0; pointer-events: none; }
.evo-sparkles i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #ffe58a; opacity: 0;
  animation: evo-spark 1s ease-out calc(1.9s + var(--i) * .03s) forwards;
  --a: calc(var(--i) * 30deg);
}
@keyframes evo-glow { 0% { filter: none; } 60% { filter: brightness(1.6) drop-shadow(0 0 10px #ffe58a); } 100% { filter: brightness(3) drop-shadow(0 0 24px #fff); opacity: 0; transform: scale(1.1); } }
@keyframes evo-flash { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes evo-appear { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes evo-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(90px); } }

/* ---------- Companion: stage-up celebration ---------- */
.celebrate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); animation: fadein .2s ease; }
.celebrate-card {
  position: relative; width: 100%; max-width: 360px; padding: 20px 18px 16px; border-radius: 22px; text-align: center;
  background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1);
  display: grid; gap: 8px;
}
.celebrate-card h2 { margin: 0; font-size: 24px; }
.celebrate-card p { margin: 0; color: var(--muted); }
.celebrate-card .stage-label { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.celebrate-art { display: grid; place-items: center; }
.new-tool { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text) !important; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute; top: -10px; left: calc(var(--i) * 5.6%); width: 7px; height: 12px; border-radius: 2px;
  background: hsl(calc(var(--i) * 47), 70%, 60%); animation: fall 2.2s ease-in calc(var(--i) * .07s) forwards;
}
@keyframes fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

/* ---------- Plan editor ---------- */
.page-head h1 { font-size: 28px; letter-spacing: -.02em; margin: 14px 2px 12px; }
.back { display: inline-block; margin-top: 14px; color: var(--accent); text-decoration: none; font-weight: 600; padding: 6px 0; }
.hint { color: var(--muted); font-size: 13px; margin: 6px 2px 10px; }
.section-title a { color: var(--accent); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; text-decoration: none; padding: 4px; }
.row a.main { color: inherit; text-decoration: none; }
.row .chev { color: var(--muted); font-size: 22px; }
.row.paused .title { color: var(--muted); }
.row .sub.wrap { white-space: normal; }
.form-row select, .form-row input[type="time"] { flex: none; }
.add-btn { display: grid; place-items: center; margin-top: 10px; text-decoration: none; color: var(--accent); }
.btn-danger { margin-top: 24px; color: #b3261e; background: transparent; }
@media (prefers-color-scheme: dark) { .btn-danger { color: #f2867d; } }

.checks { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius); background: #fdf1e2; color: #5e3a12; font-size: 14px; }
.checks.ok { background: var(--accent-soft); color: var(--text); }
.checks ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.checks .when { display: block; font-weight: 700; font-size: 13px; }
.checks .what { display: block; }
@media (prefers-color-scheme: dark) { .checks { background: #3a2a18; color: #f2d2ae; } }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field .label { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0; }
.field .hint { margin: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .form select, .form textarea,
.form-row select, .form-row input[type="time"] {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
}
.form-row select, .form-row input[type="time"] { width: auto; max-width: 150px; }
.form textarea { resize: vertical; }
.form input[type="color"] { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.segmented { display: flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 3px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: grid; place-items: center; min-height: 38px; padding: 0 4px; border-radius: 8px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }

.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.toggle-row .label { color: var(--text); font-size: 16px; font-weight: 600; }
.switch { position: relative; flex: none; width: 51px; height: 31px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .2s; }
.switch span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.variants summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.variant { display: grid; grid-template-columns: 44px 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; }
.variant textarea { grid-column: 2; }
.variant-day { font-size: 14px; font-weight: 700; color: var(--muted); }

/* ---------- List / Planner switch ---------- */
.title-actions { display: inline-flex; align-items: center; gap: 6px; }
.mode-switch { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 2px; }
.mode-switch button {
  border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; padding: 4px 10px; border-radius: 6px; min-height: 28px;
}
.mode-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* ---------- Day planner ---------- */
.planner {
  position: relative; margin: 4px 0 0 46px; /* left gutter holds the hour labels */
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow);
}
.pl-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.pl-hour span { position: absolute; left: -46px; top: -8px; width: 40px; text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); }
.pl-gap {
  position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted);
  pointer-events: none; opacity: .85;
}
.pl-block {
  position: absolute; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 8px 4px 9px; border: 0; border-left: 4px solid var(--cat, var(--accent)); border-radius: 8px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 14%, var(--surface)); color: var(--text);
  text-align: left; font-size: 13px; line-height: 1.25; z-index: 1;
}
.pl-block:active { filter: brightness(.95); }
.pl-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-time { font-weight: 700; font-size: 12px; color: var(--muted); }
.pl-title { font-weight: 600; }
.pl-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-done, .pl-skipped, .pl-missed { opacity: .55; }
.pl-skipped { border-left-style: dashed; }
.pl-skipped .pl-title, .pl-missed .pl-title { text-decoration: line-through; }
.pl-current { box-shadow: 0 0 0 2px var(--accent); z-index: 2; }
.pl-now { position: absolute; left: -6px; right: 0; height: 0; border-top: 2px solid #e2504a; z-index: 3; pointer-events: none; }
.pl-now span { position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #e2504a; }
.pl-anytime { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.pl-chip {
  border: 0; border-left: 3px solid var(--cat, var(--accent)); border-radius: 8px; padding: 6px 10px;
  background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 600;
}

/* ---------- Pairing screen ---------- */
.pair-page { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
.pair { max-width: 420px; margin: 0 auto; padding: 32px var(--gutter) 0; text-align: center; }
.pair h1 { font-size: 26px; margin: 12px 0 4px; }
.pair .form { text-align: left; margin-top: 16px; }
.pair-icon { border-radius: 18px; box-shadow: var(--shadow); }
.pair code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.pair #code { font-size: 28px !important; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.pair-msg { margin: 0; min-height: 20px; font-size: 14px; color: var(--muted); text-align: center; }
.pair-msg.ok { color: var(--accent); font-weight: 600; }
.pair-msg.error { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) { .pair-msg.error { color: #f2867d; } }

/* ---------- Bunny day-arrangement assistant ---------- */
.planner-entry { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:14px; border-radius:var(--radius); background:#eee3cf; color:#493426; text-decoration:none; box-shadow:var(--shadow); }
.planner-entry > span:nth-child(2) { flex:1; display:grid; }
.planner-entry small { color:#735b43; margin-top:2px; }
.planner-entry-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#75563a; color:#f7ead1; font:700 18px Georgia,serif; }
@media (prefers-color-scheme: dark) { .planner-entry { background:#392f25; color:#f0ddbd; } .planner-entry small { color:#c9ae8b; } }
.planner-head { display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:center; }
.planner-head .back { grid-column:1 / -1; }
.planner-head h1 { margin:2px 0; }
.planner-head p { margin:0; color:var(--muted); font-size:14px; }
.owl-wrap { width:82px; height:82px; padding:5px; border-radius:26px; background:linear-gradient(145deg,#f1e5ce,#d7c29e); box-shadow:var(--shadow); }
.owl { width:100%; height:100%; filter:drop-shadow(0 5px 5px rgba(46,29,13,.18)); }
.planner-principle { margin:14px 0; padding:13px 14px; border-left:4px solid #9a7045; border-radius:10px; background:var(--surface); font-size:14px; }
.planner-thread { display:grid; gap:10px; padding-bottom:132px; }
.planner-msg { max-width:88%; padding:11px 13px; border-radius:15px; white-space:pre-wrap; }
.planner-msg.user { justify-self:end; background:var(--accent); color:var(--accent-text); border-bottom-right-radius:4px; }
.planner-msg.planner { justify-self:start; background:#eee3cf; color:#3e3024; border-bottom-left-radius:4px; }
@media (prefers-color-scheme: dark) { .planner-msg.planner { background:#392f25; color:#f0ddbd; } }
.planner-msg.thinking { opacity:.7; font-style:italic; }
.planner-compose { position:fixed; z-index:8; left:var(--gutter); right:var(--gutter); bottom:calc(env(safe-area-inset-bottom) + 70px); display:flex; gap:8px; padding:8px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }
.planner-compose textarea { flex:1; min-height:48px; max-height:110px; resize:vertical; padding:10px; border:0; background:transparent; color:var(--text); font:inherit; }
.planner-compose .btn { align-self:end; }
.change-preview { padding:15px; border:1px solid #b88b55; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.change-preview h2 { font-size:18px; margin:6px 0; }
.change-preview ul { padding-left:20px; }
.planner-warnings { margin:12px 0; padding:11px; border-radius:10px; background:#f8ead7; color:#704417; }
.planner-warnings p { margin:5px 0 0; }
@media (prefers-color-scheme: dark) { .planner-warnings { background:#3e2d1d; color:#f1c995; } }

/* ---------- Long-term programs ---------- */
.program-mark { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:#e8dfcc; color:#60482f; font:700 15px Georgia,serif; }
.program-mark.material { background:var(--accent-soft); color:var(--accent); }
.program-summary p { margin-top:0; }
.program-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.program-facts span { display:grid; padding:9px; border-radius:9px; background:var(--surface-2); font-size:13px; color:var(--muted); }
.program-facts strong { color:var(--text); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.program-phases { display:grid; gap:12px; }
.program-phase h2 { margin:4px 0; font-size:20px; }
.program-phase > p { margin:6px 0 10px; color:var(--muted); }
.phase-rules { display:flex; flex-wrap:wrap; gap:6px; }
.phase-rules span { padding:3px 8px; border-radius:99px; background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:600; }
.program-sessions { display:grid; gap:8px; margin:12px 0; }
.program-sessions article { padding:10px 11px; border-left:3px solid var(--accent); border-radius:8px; background:var(--surface-2); }
.program-sessions small { display:block; color:var(--muted); margin-top:2px; }
.program-sessions ul { margin:7px 0 0; padding-left:19px; font-size:14px; }
.program-sessions li span { color:var(--muted); }
.link.compact { margin:0; font-size:14px; }
@media (max-width:360px) { .program-facts { grid-template-columns:1fr; } }
.owl-program-entry { display:flex; align-items:center; gap:12px; margin:9px 0 12px; padding:14px; border:1px solid #b99b72; border-radius:var(--radius); background:linear-gradient(145deg,#f4ead7,#e5d3b5); color:#493426; text-decoration:none; box-shadow:var(--shadow); }
.owl-program-entry > span:nth-child(2) { flex:1; display:grid; }
.owl-program-entry small { color:#735b43; margin-top:2px; }
@media (prefers-color-scheme:dark) { .owl-program-entry { background:linear-gradient(145deg,#3d3228,#30271f); color:#f0ddbd; } .owl-program-entry small { color:#c9ae8b; } }
.owl-starters { display:flex; gap:6px; overflow-x:auto; margin:10px 0 14px; padding-bottom:3px; }
.owl-starters button { flex:none; border:1px solid var(--line); border-radius:99px; padding:7px 11px; background:var(--surface); color:var(--muted); font-size:13px; }
.program-proposal > p { color:var(--muted); }
.proposal-phases { display:grid; gap:9px; margin:12px 0; }
.proposal-phases > article { padding:11px; border-radius:10px; background:var(--surface-2); }
.proposal-phases h3 { margin:3px 0; }
.proposal-phases article > p { margin:4px 0 8px; font-size:14px; color:var(--muted); }
.proposal-session { padding:8px 0; border-top:1px solid var(--line); }
.proposal-session small { display:block; color:var(--muted); }
.proposal-session ul { margin:5px 0 0; padding-left:18px; font-size:13px; }
.proposal-session li span { color:var(--muted); }
.proposal-materials { margin:10px 0; padding:10px; border-radius:9px; background:var(--surface-2); }
.proposal-materials p { margin:4px 0; font-size:14px; }
.proposal-categories { font-size:14px; }
.program-review { margin-top:12px; text-align:center; text-decoration:none; }
.ai-usage { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--muted); font-size:12px; }
.ai-usage span { display:grid; }
.ai-usage strong { color:var(--text); font-size:16px; }
.ai-usage small { grid-column:1/-1; }
.section-title small { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.request-avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:#dfe8dc; color:#405c49; font-weight:800; }
.access-request-list .sub { text-transform:capitalize; }
.empty.compact { margin:8px 0 18px; padding:12px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(env(safe-area-inset-bottom) + 72px); z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: #23211d; color: #f4f1ea; box-shadow: var(--shadow); animation: slideup .2s ease;
}
@media (prefers-color-scheme: dark) { .toast { background: #ece9e3; color: #1b1a18; } }
.toast .msg { flex: 1; }
.toast button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; min-height: 36px; }

@keyframes fadein { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}