/* Tokens are the design system. Nothing below invents a colour. */
:root{
  --cream:#FCF9F5; --shell:#FFFFFF; --petal:#FDEFF1;
  --rose:#F2B8C6; --berry:#B45571;
  --ink:#453A3C; --ink-2:#6E5C60; --muted:#9A8489;
  --line:#F1E7E5; --rule:#E6D8D6;
  --butter:#FCF0D9; --butter-ink:#8A6524;
  --sage:#E3EDDF; --sage-ink:#537349;
  --sky:#E0EAF1; --sky-ink:#4F6C85;
  --display:'Instrument Serif',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gutter:24px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.app{max-width:430px;margin:0 auto;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 22px) var(--gutter) 108px}
a{color:inherit;text-decoration:none}
h1{font-family:var(--display);font-weight:400;font-size:38px;line-height:1;margin:0}
h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;margin:0}
.sub{font-size:15px;color:var(--muted);margin-top:3px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.label.accent{color:var(--berry)}
.head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.card{background:var(--shell);border:1px solid var(--line);border-radius:16px;padding:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:12px;align-items:center}
.row img{width:58px;height:77px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--petal)}
.row .grow{min-width:0;flex-grow:1;display:flex;flex-direction:column;gap:5px}
.row .t{font-family:var(--display);font-size:18px;line-height:1.14}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.tag.safe{background:var(--petal);color:var(--berry)}
.tag.natural{background:var(--shell);border:1px solid var(--rule);color:var(--muted)}
.tag.stretch{background:transparent;border:1px dashed var(--rule);color:var(--muted)}
.tag.rise{background:var(--butter);color:var(--butter-ink)}
.tag.good{background:var(--sage);color:var(--sage-ink)}
.tag.info{background:var(--sky);color:var(--sky-ink)}
.tag.bad{background:var(--petal);color:var(--berry)}
.btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;
  background:var(--berry);color:#fff;font-family:var(--body);font-size:17px;border:0;width:100%;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--ink)}
.field{width:100%;height:52px;border-radius:999px;border:1px solid var(--rule);background:var(--shell);
  padding:0 18px;font-family:var(--body);font-size:16px;color:var(--ink)}
.field::placeholder{color:var(--muted)}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(84px + env(safe-area-inset-bottom));
  background:var(--shell);border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:11px 26px env(safe-area-inset-bottom);z-index:20}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted);width:33%}
.tabbar a.on{color:var(--ink)}
.tabbar a.on.ideas{color:var(--berry)}
.empty{text-align:center;padding:48px 12px;color:var(--muted)}
.empty .big{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:8px;line-height:1.15}
.bar{display:flex;gap:3px;height:24px}
.bar div{border-radius:4px}
.swatches{display:flex;height:32px;border-radius:9px;overflow:hidden}
.swatches div{flex-grow:1}
.kv{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--berry);padding-top:3px}
.deck{position:relative;height:min(62dvh,540px);min-height:380px;margin:14px 0}
.deck .c{position:absolute;inset:0;background:var(--shell);border:1px solid var(--rule);border-radius:22px;
  padding:22px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(180,85,113,.10);
  touch-action:pan-y;will-change:transform;overflow:hidden}
.deck .c:nth-child(2){transform:scale(.97) translateY(8px);z-index:2;box-shadow:none;background:var(--petal)}
.deck .c:nth-child(3){transform:scale(.94) translateY(16px);z-index:1;box-shadow:none;background:var(--petal);opacity:.6}
.deck .c:first-child{z-index:3}
.deck .line{font-family:var(--display);font-style:italic;font-size:27px;line-height:1.12;margin:12px 0 10px;flex-shrink:0}
/* One scrolling region. The card must clip: an idea can run long and spilling
   over the buttons underneath is worse than a scrollbar. */
.deck .scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
.deck .body{font-size:16.5px;line-height:1.45;color:var(--ink-2);margin:0}
.deck .why{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.deck .tags{flex-shrink:0}
.acts{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px}
.acts button{border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:999px}
.acts .no{width:58px;height:58px;background:var(--shell);border:1px solid var(--rule)}
.acts .yes{width:66px;height:66px;background:var(--berry)}
.hint{text-align:center;font-size:14px;color:var(--muted);margin-top:14px;line-height:1.4}
.flash{background:var(--petal);color:var(--berry);border-radius:14px;padding:12px 15px;font-size:15px;margin-bottom:14px}
.flash.warn{background:var(--butter);color:var(--butter-ink)}
.week{background:var(--shell);border:1px solid var(--rule);border-radius:16px;overflow:hidden;margin-bottom:14px}
.week .h{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line)}
.week .dot{width:6px;height:6px;border-radius:999px;background:var(--butter-ink)}
.week .g{display:flex}
.week .g>div{flex:1 1 0;padding:10px 12px;border-right:1px solid var(--line)}
.week .g>div:last-child{border-right:0}
.week .v{font-family:var(--display);font-size:18px;line-height:1}
.week .s{font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.3}

/* Quiz */
.progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden}
.progress div{height:4px;background:var(--rose);border-radius:999px;transition:width .3s ease}
.opt{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:16px;background:var(--shell);
  border:1px solid var(--rule);font-size:17px;cursor:pointer;min-height:52px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{flex-grow:1}
.opt .tick{opacity:0;flex-shrink:0}
.opt:has(input:checked){background:var(--berry);color:#fff;border-color:var(--berry)}
.opt:has(input:checked) .tick{opacity:1}
.opt:has(input:focus-visible){outline:2px solid var(--berry);outline-offset:2px}
.linky{background:none;border:0;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);cursor:pointer}
.quiz{display:block}