/* Damian - papercraft UI. Solid colors only, no opacity, text >= 16px. */
@font-face { font-family: "Fredoka"; src: url("/static/fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; src: url("/static/fonts/fredoka-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F; }

:root {
  --ink: #2b2118; --paper: #fffdf5; --craft: #ead7b0; --craft-dot: #dcc595; --cut: #fffdf5;
  --red: #c8232c; --red-dark: #8f1219; --blue: #1d5fb8; --yellow: #f4c020; --green: #1e7a3a; --purple: #5b3fa8;
  --sky: #cfe6ff; --pink: #ffd9de; --mint: #d6f2dc; --butter: #fff1bf; --muted: #5c4a3a;
  --r: 18px 22px 16px 21px; --shadow: #2b2118; --field: #ffffff; --on-light: #2b2118;
}
/* Night: warm dark paper for 3am feeds. Light lines, black shadows, dark text kept on light surfaces. */
:root.night { --ink: #f3e4cc; --paper: #2a221d; --craft: #1a1411; --craft-dot: #2a211b; --cut: #3b3029; --shadow: #000000;
  --muted: #d4c2a5; --field: #3b3029; --butter: #4a3b1c; --sky: #1f3550; --mint: #1d3a27; --red-dark: #ff9a9a; }
:root.night body { background-image: none; }
.btn.yellow, .chip.yellow, nav.tabs a.on, .stars button.on, .seg button.on, .toast button { color: var(--on-light); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--ink);
  background-color: var(--craft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23dcc595'%3E%3Ccircle cx='13' cy='17' r='1.6'/%3E%3Ccircle cx='71' cy='9' r='1.2'/%3E%3Ccircle cx='103' cy='44' r='1.7'/%3E%3Ccircle cx='38' cy='62' r='1.1'/%3E%3Ccircle cx='86' cy='91' r='1.5'/%3E%3Ccircle cx='21' cy='104' r='1.3'/%3E%3Cpath d='M50 30 q8 3 14 -1' stroke='%23d8bf8c' stroke-width='1.2' fill='none'/%3E%3Cpath d='M8 76 q6 4 13 1' stroke='%23d8bf8c' stroke-width='1.2' fill='none'/%3E%3Cpath d='M92 116 q7 -4 14 0' stroke='%23d8bf8c' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); font-weight: 600; }
.hidden { display: none !important; }

/* paper primitives */
.paper { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r);
  box-shadow: 0 0 0 5px var(--cut), 6px 7px 0 5px var(--shadow); }
.tilt-l { transform: rotate(-1.1deg); } .tilt-r { transform: rotate(0.9deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 10px 22px;
  border: 3px solid var(--ink); border-radius: 16px 20px 15px 19px; background: var(--paper); font-weight: 600; font-size: 19px;
  box-shadow: 4px 5px 0 var(--shadow); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; touch-action: manipulation; }
.btn:active, .chip:active, .talk:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--shadow); }
a.btn { color: var(--ink); text-decoration: none; }
.btn.red { background: var(--red); color: #fff; } .btn.blue { background: var(--blue); color: #fff; }
.btn.yellow { background: var(--yellow); } .btn.green { background: var(--green); color: #fff; }
.btn.purple { background: var(--purple); color: #fff; } .btn.wide { width: 100%; }
.btn.small { min-height: 46px; font-size: 17px; padding: 6px 14px; }
.btn svg { width: 26px; height: 26px; flex: none; }
input, select, textarea { width: 100%; min-height: 54px; border: 3px solid var(--ink); border-radius: 14px 17px 13px 16px;
  background: var(--field); padding: 10px 14px; font-size: 18px; }
input:focus, textarea:focus, select:focus { outline: 4px solid var(--yellow); outline-offset: 1px; }
label { font-weight: 600; display: block; margin: 12px 0 6px; }

/* layout */
main { max-width: 640px; margin: 0 auto; padding: 18px 16px 20px; }
.view { animation: flip .32s cubic-bezier(.2,.9,.3,1.2); transform-origin: top center; }
@keyframes flip { from { transform: perspective(900px) rotateX(-14deg) translateY(10px); } to { transform: none; } }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 4px 22px; }
.banner { background: var(--red); color: #fff; padding: 8px 20px 10px; border: 3px solid var(--ink); border-radius: 12px 18px 10px 16px;
  box-shadow: 0 0 0 5px var(--cut), 5px 6px 0 5px var(--shadow); transform: rotate(-2deg); }
.banner h1 { margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: .5px; }
.age { font-weight: 600; font-size: 18px; background: var(--butter); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px;
  box-shadow: 3px 4px 0 var(--shadow); transform: rotate(1.5deg); text-align: right; }
h2 { font-size: 26px; margin: 0 0 10px; } h3 { font-size: 21px; margin: 0 0 6px; }
.card { padding: 18px 18px 20px; margin: 22px 4px 26px; }
.muted { color: var(--muted); } .small-text { font-size: 16px; }
.row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; }
.row.eq { align-items: stretch; } .row.eq .btn { flex: 1 1 0; min-height: 64px; }
.stack > * + * { margin-top: 12px; }

/* talk */
.talk-wrap { display: flex; flex-direction: column; align-items: center; margin: 6px 0 8px; }
.talk { position: relative; width: 176px; height: 176px; border-radius: 50%; border: 4px solid var(--ink); background: var(--red); color: #fff;
  box-shadow: 0 0 0 8px var(--cut), 8px 10px 0 8px var(--shadow); cursor: pointer; display: grid; place-items: center;
  transition: transform .1s ease, background .2s; }
.talk svg { width: 78px; height: 78px; }
.talk.live { background: var(--green); animation: breathe 1.6s ease-in-out infinite; }
.talk.connecting { background: var(--purple); }
.talk.speaking { background: var(--blue); }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.talk-label { margin-top: 26px; font-size: 22px; font-weight: 600; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  padding: 6px 16px; box-shadow: 3px 4px 0 var(--shadow); }
.bubbles { width: 100%; margin-top: 18px; }
.bubble { padding: 12px 16px; margin: 12px 4px; border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px; background: var(--paper);
  box-shadow: 3px 4px 0 var(--shadow); font-size: 18px; }
.bubble.me { background: var(--sky); border-radius: 18px 18px 4px 18px; margin-left: 40px; }
.bubble.it { margin-right: 40px; }
.bubble.tool { background: var(--mint); font-size: 17px; font-weight: 600; }

/* quick log */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 2px 8px; }
.chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; padding: 10px 6px;
  border: 3px solid var(--ink); border-radius: 18px 22px 17px 20px; box-shadow: 0 0 0 4px var(--cut), 5px 6px 0 4px var(--shadow);
  font-weight: 600; font-size: 19px; cursor: pointer; transition: transform .08s; text-align: center; }
.chip svg { width: 40px; height: 40px; }
.chip.blue { background: var(--blue); color: #fff; transform: rotate(-1.5deg); }
.chip.purple { background: var(--purple); color: #fff; transform: rotate(1deg); }
.chip.yellow { background: var(--yellow); transform: rotate(-.6deg); }
.chip .sub { font-size: 16px; font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stat b { display: block; font-size: 26px; line-height: 1.1; } .stat span { font-size: 16px; color: var(--muted); }

/* lists */
.item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 3px dashed var(--craft-dot); }
.item:first-child { border-top: 0; }
.item.editable { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; cursor: pointer; }
.timer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }
.timer div { border: 3px solid var(--ink); border-radius: 16px; padding: 12px; text-align: center; background: var(--field); }
.timer div.on { background: var(--purple); color: #fff; }
.timer span { display: block; font-weight: 600; } .timer b { font-size: 40px; line-height: 1.1; }
.dot { flex: none; width: 18px; height: 18px; margin-top: 5px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.src { display: inline-block; margin: 6px 6px 0 0; font-size: 16px; font-weight: 600; background: var(--butter); border: 2px solid var(--ink);
  border-radius: 10px; padding: 2px 9px; text-decoration: none; color: var(--ink); }
.nosrc { font-size: 16px; font-weight: 600; color: var(--red-dark); }
.stamp { display: inline-block; margin: 10px 10px 2px 0; padding: 4px 12px; border: 3px solid var(--red); color: var(--red-dark); background: var(--field);
  border-radius: 10px; font-weight: 700; transform: rotate(-2deg); }

/* bottom tabs */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper); border-top: 4px solid var(--ink); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
nav.tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink);
  font-size: 16px; font-weight: 600; padding: 6px 0; border-radius: 14px; border: 3px solid transparent; }
nav.tabs a svg { width: 30px; height: 30px; }
nav.tabs a.on { background: var(--yellow); border-color: var(--ink); box-shadow: 2px 3px 0 var(--shadow); }

/* sheet */
.scrim { position: fixed; inset: 0; background: #3a2d22; z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 88vh; overflow: auto; background: var(--paper);
  border-top: 4px solid var(--ink); border-radius: 26px 30px 0 0; padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
  animation: up .25s cubic-bezier(.2,.9,.3,1.15); }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 12px;
  align-items: center; justify-content: space-between; background: #2b2118; color: #fff; border: 3px solid var(--ink); padding: 12px 14px 12px 18px;
  border-radius: 16px; font-size: 18px; animation: up .2s; max-width: 608px; margin: 0 auto; }
.toast button { background: var(--yellow); color: var(--ink); border: 0; border-radius: 12px; font-weight: 700; padding: 10px 14px; min-height: 46px; }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { text-align: center; font-weight: 700; font-size: 16px; }
.cal .day { min-height: 56px; border: 2px solid var(--ink); border-radius: 10px; background: var(--field); padding: 4px; font-size: 16px; font-weight: 600; }
.cal .day.out { background: var(--craft); border-color: var(--muted); color: var(--muted); }
.cal .day.today { background: var(--butter); border-width: 3px; }
.cal .day.has::after { content: ""; display: block; width: 12px; height: 12px; margin: 4px auto 0; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }

/* story */
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.chapter { padding: 10px; cursor: pointer; text-decoration: none; color: var(--ink); }
.chapter:nth-child(odd) { transform: rotate(-1.4deg); } .chapter:nth-child(even) { transform: rotate(1.2deg); }
.chapter .cover { aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 10px; background: var(--sky); object-fit: cover; width: 100%; display: block; }
.chapter .cover.blank { display: grid; place-content: center; text-align: center; background: var(--butter); color: var(--ink);
  background-image: repeating-linear-gradient(0deg, var(--butter) 0 26px, #f1dc9a 26px 28px); }
.chapter .cover.blank b { margin: 0; font-size: 46px; line-height: 1; color: var(--red-dark); }
.chapter .cover.blank span { font-size: 16px; font-weight: 600; }
.chapter b { display: block; margin-top: 8px; font-size: 19px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.photos img:nth-child(3n+1) { transform: rotate(-1.5deg); } .photos img:nth-child(3n+2) { transform: rotate(1deg); }
.polaroid { background: #fff; padding: 10px 10px 14px; border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--shadow); transform: rotate(-1.5deg); }
.polaroid img { width: 100%; display: block; border: 2px solid var(--ink); }
.stars { display: flex; gap: 6px; } .stars button { width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 12px; background: var(--field); padding: 6px; }
.stars button.on { background: var(--yellow); } .stars svg { width: 100%; height: 100%; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: #000000; display: grid; place-items: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 80vh; border: 4px solid #fff; }
.lightbox p { color: #fff; font-size: 18px; text-align: center; }

/* growth chart */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.seg button { min-height: 50px; border: 3px solid var(--ink); border-radius: 14px; background: var(--field); font-weight: 600; font-size: 18px; }
.seg button.on { background: var(--yellow); box-shadow: 2px 3px 0 var(--shadow); }
svg.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sw { display: inline-block; width: 22px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; }
.sw.line { height: 0; border: 0; border-top: 3px dashed var(--green); border-radius: 0; }
.spinner { width: 38px; height: 38px; border: 5px solid var(--craft-dot); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; margin: 18px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.login { max-width: 460px; margin: 10vh auto 0; padding: 26px 22px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* lists */
.seg.four { grid-template-columns: repeat(4, 1fr); gap: 6px; } .seg.four button { font-size: 16px; padding: 0 2px; }
.check { flex: none; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 10px; background: var(--field); font-size: 24px; font-weight: 700; color: var(--ink); }
.check.on { background: var(--green); color: #ffffff; }
.plain { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.struck { text-decoration: line-through; }
.pill { display: inline-block; font-size: 16px; font-weight: 600; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; background: var(--butter); }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .sizes label { margin: 0; }
details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.allergens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.al { border: 3px solid var(--ink); border-radius: 12px; padding: 8px; background: var(--field); text-align: center; }
.al b { display: block; text-transform: capitalize; } .al span { font-size: 16px; }
.al.introduced { background: #d6f2dc; color: var(--on-light); } .al.reaction { background: #ffd9de; color: var(--on-light); border-color: #8f1219; }
/* brief, week plan, evidence */
.dot.red { background: var(--red); }
.num { flex: none; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--yellow); color: var(--on-light); }
.ev { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 1px 9px; }
.ev.strong { background: #1e7a3a; color: #ffffff; } .ev.moderate { background: #f4c020; color: #2b2118; }
.ev.emerging { background: #ffd9de; color: #2b2118; } .ev.unsourced { background: var(--field); color: var(--ink); }
.trend { margin: 8px 0; } .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.bar { position: relative; height: 56px; border-bottom: 3px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; }
.bar i { display: block; width: 70%; min-height: 3px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
.bar b { position: absolute; top: -2px; font-size: 16px; }
.bars.labels div { text-align: center; }

/* product verdict */
.verdict { display: inline-block; font-weight: 700; font-size: 19px; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; text-transform: capitalize; }
.verdict.no-red-flags-found { background: #1e7a3a; color: #ffffff; } .verdict.caution { background: #f4c020; color: #2b2118; }
.verdict.avoid { background: #c8232c; color: #ffffff; }