/* The "Take it for a spin" demo: a click-through of the app, drawn in HTML rather than
   stitched from screenshots, so choices visibly change things and dark mode works. Every
   color is a page token (styles.css), which are the app's own (ui/theme/Color.kt). The
   shapes follow the emulator screenshots: pill chips, rounded white cards, the terracotta
   bottom button. Every class is prefixed dm- so nothing here leaks into the page. */

.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.demo-text p{max-width:44ch}
.demo-text .demo-label{max-width:none}
.demo-text .dim{color:var(--dim);font-size:.98rem}
.demo-label{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1rem;
  font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-sage-soft);background:var(--sage-soft);padding:.35rem .85rem;border-radius:999px;
}
.demo-tries{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.45rem}
.demo-tries li{font-weight:700;font-size:.95rem}
.demo-tries li::before{content:"→ ";color:var(--primary)}
.demo-restart{
  font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;
  color:var(--primary);background:transparent;border:1.5px solid var(--line);
  border-radius:999px;padding:.55rem 1.2rem;
}
.demo-restart:hover{background:var(--surface)}

/* ---------- the phone ---------- */
.dm-phone{
  position:relative;width:100%;max-width:370px;height:660px;justify-self:center;
  border:10px solid var(--bezel);border-radius:38px;overflow:hidden;
  background:var(--bg);box-shadow:var(--shadow);
}
.dm-screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.dm-top{
  flex:none;display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;
  min-height:50px;padding:.55rem 1.1rem .2rem;
}
.dm-link{
  font:inherit;font-weight:800;font-size:.95rem;color:var(--primary);
  background:none;border:0;padding:.3rem .2rem;cursor:pointer;
}
.dm-body{flex:1;overflow-y:auto;padding:.2rem 1.1rem 1.2rem;scrollbar-width:thin}
.dm-foot{flex:none;padding:.6rem 1rem 1rem;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 35%)}
.dm-cta{
  display:block;width:100%;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;
  color:var(--on-primary);background:var(--primary);border:0;border-radius:999px;padding:.9rem 1rem;
}
.dm-cta:disabled{opacity:.6;cursor:default}
.dm-cta:not(:disabled):hover{filter:brightness(1.06)}

/* ---------- type ---------- */
.dm-screen h3{font-size:1.5rem;font-weight:800;margin:.2rem 0 .6rem}
.dm-screen h4{font-size:1.05rem;font-weight:800;color:var(--primary);margin:1.2rem 0 .5rem}
.dm-screen h3:focus,.dm-screen h4:focus{outline:none}
.dm-label{font-weight:700;color:var(--dim);font-size:.92rem;margin:1.1rem 0 .5rem}
.dm-muted{color:var(--dim);font-size:.92rem;margin:0 0 .6rem}

/* ---------- home ---------- */
.dm-buddy{
  display:grid;place-items:center;width:96px;height:96px;margin:.1rem auto .6rem;
  font-size:2.6rem;border-radius:50%;background:var(--primary-soft);
}
.dm-greet{text-align:center;color:var(--primary);font-weight:800;margin:0 0 .2rem}
.dm-screen .dm-ask{text-align:center;font-size:1.55rem;line-height:1.2}
.dm-meals{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.dm-meal{
  font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:.7rem .3rem;
}
.dm-meal span{font-size:1.5rem;line-height:1}
.dm-chips{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.dm-chips.wrap{display:flex;flex-wrap:wrap}
.dm-chip{
  font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--text);
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:.55rem .9rem;
}
.dm-meal[aria-pressed=true],.dm-chip[aria-pressed=true]{
  background:var(--primary-soft);color:var(--on-primary-soft);border-color:var(--primary);
}
.dm-pinned{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;cursor:pointer;
  font:inherit;color:var(--on-sage-soft);background:var(--sage-soft);
  border:0;border-radius:16px;padding:.75rem .9rem;margin:0 0 .8rem;
}
.dm-pinned b{display:block}
.dm-pinned small{font-size:.85rem;opacity:.85}

/* ---------- thinking ---------- */
.dm-thinking{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.8rem}
.dm-thinking .dm-buddy{background:var(--sage-soft);animation:dm-bob 1.4s ease-in-out infinite}
.dm-thinking p{font-weight:800;font-size:1.1rem;margin:0;min-height:1.6em}
@keyframes dm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- cards ---------- */
.dm-card{
  display:block;width:100%;text-align:left;font:inherit;color:var(--text);
  background:var(--card);border:1.5px solid var(--line);border-radius:20px;
  padding:1rem 1.05rem .5rem;margin:0 0 .8rem;
}
.dm-card-open{all:unset;display:block;cursor:pointer;border-radius:12px}
.dm-card-open:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.dm-card-title{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:800;margin:0 0 .4rem}
.dm-pill{
  display:inline-block;font-size:.8rem;font-weight:800;border-radius:999px;padding:.15rem .65rem;margin:0 0 .45rem;
  background:var(--primary-soft);color:var(--on-primary-soft);
}
.dm-pill.sage{background:var(--sage-soft);color:var(--on-sage-soft)}
.dm-why{margin:0 0 .35rem;font-size:.95rem;line-height:1.45}
.dm-sides{margin:0 0 .45rem;color:var(--dim);font-size:.85rem}
.dm-meta{margin:0 0 .2rem;font-weight:700;color:var(--dim);font-size:.88rem}
.dm-card-foot{display:flex;justify-content:flex-end}
.dm-note{
  border-radius:18px;padding:.9rem 1rem;margin:0 0 .9rem;
  background:var(--mustard-soft);color:var(--on-mustard-soft);font-weight:700;font-size:.93rem;
}
.dm-note.sage{background:var(--sage-soft);color:var(--on-sage-soft)}
.dm-note p{margin:0}
.dm-note p + p{margin-top:.4rem;font-weight:600}

/* ---------- not quite sheet ---------- */
.dm-sheet-back{position:absolute;inset:0;z-index:3;background:rgba(30,24,22,.45);display:flex;align-items:flex-end}
.dm-sheet{
  width:100%;max-height:85%;overflow-y:auto;background:var(--bg);
  border-radius:24px 24px 0 0;padding:1.1rem 1.1rem 1rem;box-shadow:var(--shadow);
}
.dm-sheet h4{color:var(--text);margin:0 0 .7rem}
.dm-sheet-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}

/* ---------- recipe ---------- */
.dm-remind{text-align:center;background:var(--sage-soft);color:var(--on-sage-soft);border-radius:20px;padding:1rem;margin:0 0 1rem}
.dm-remind .ico{font-size:1.6rem;line-height:1}
.dm-remind b{display:block;margin:.3rem 0 .2rem}
.dm-remind p{margin:0 0 .8rem;font-size:.92rem}
.dm-remind-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dm-btn{
  font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;border-radius:999px;padding:.6rem .5rem;
  background:var(--primary);color:var(--on-primary);border:1.5px solid var(--primary);
}
.dm-btn.ghost{background:transparent;color:var(--primary);border-color:var(--dim)}
.dm-facts{margin:0 0 .6rem;font-weight:700;color:var(--dim);font-size:.92rem}
.dm-fact{display:flex;gap:.5rem;margin:0 0 .55rem;font-size:.95rem}
.dm-sched{display:grid;grid-template-columns:auto 1fr;gap:.55rem .9rem;margin:0;font-size:.95rem}
.dm-sched dt{font-weight:800;white-space:nowrap}
.dm-sched dd{margin:0}
.dm-ings{list-style:none;padding:0;margin:0}
.dm-ing{
  display:flex;justify-content:space-between;gap:.6rem;width:100%;text-align:left;
  font:inherit;font-size:.95rem;color:var(--text);background:none;border:0;
  border-bottom:1px solid var(--line);padding:.5rem .1rem;cursor:pointer;
}
.dm-ing .have{color:var(--sage);font-weight:800}
.dm-ing .need{color:var(--primary);font-weight:800;font-size:.85rem}
.dm-swaps{background:var(--surface);border-radius:14px;padding:.6rem .8rem;margin:.4rem 0 .5rem;font-size:.9rem}
.dm-swaps p{margin:0 0 .3rem}
.dm-swaps p:last-child{margin:0}

/* ---------- how much is left / kitchen ---------- */
.dm-left{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:.8rem .9rem;margin:0 0 .7rem}
.dm-left b{display:block;margin:0 0 .5rem}
.dm-left .dm-chips{grid-template-columns:1fr 1fr}
.dm-group{
  display:block;font-weight:800;font-size:1.1rem;color:var(--primary);margin:1rem 0 .55rem;
}
.dm-item{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;text-align:left;
  font:inherit;color:var(--text);cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:.65rem 1.05rem;margin:0 0 .5rem;
}
.dm-item small{display:block;color:var(--dim);font-size:.8rem;font-weight:600}
.dm-item .lvl{color:var(--primary);font-weight:800;font-size:.92rem;white-space:nowrap}
.dm-item.changed{border-color:var(--sage);box-shadow:0 0 0 2px color-mix(in srgb,var(--sage) 30%,transparent)}
.dm-item.gone{opacity:.6}

/* ---------- the mock notification ---------- */
.dm-notif{
  position:absolute;z-index:4;left:.6rem;right:.6rem;top:.6rem;
  display:flex;gap:.6rem;align-items:flex-start;
  background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;
  padding:.7rem .8rem;box-shadow:var(--shadow);font-size:.88rem;
  transform:translateY(-130%);transition:transform .35s ease;
}
.dm-notif.show{transform:translateY(0)}
.dm-notif img{flex:none;width:28px;height:28px;border-radius:8px}
.dm-notif b{display:block}
.dm-notif small{color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .dm-thinking .dm-buddy{animation:none}
  .dm-notif{transition:none}
}

/* ---------- responsive ----------
   On a phone the phone frame goes: a bezel inside a real bezel looks silly and wastes
   width. The demo becomes a rounded panel that fills the column. */
@media (max-width:880px){
  .demo{grid-template-columns:1fr}
  .demo-text p{max-width:none}
}

/* The section is a framed panel, not one more band of the page, so it does not read as
   another screenshot to scroll past. The cue points at the phone: right while the phone
   sits beside the text, down once it stacks underneath. */
.demo{
  width:calc(100% - 2*clamp(1rem,4vw,3rem));margin:clamp(1rem,3vw,2rem) auto;
  padding:clamp(1.4rem,4vw,3rem);background:var(--card);border:2px solid color-mix(in srgb,var(--primary) 55%,transparent);border-radius:28px;
}
/* Dark: --card is barely off the page, so the panel uses surface tinted with terracotta
   (text 9.7:1, dim 6.4:1, primary 5.7:1). */
:root[data-theme=dark] .demo{background:color-mix(in srgb,var(--primary) 14%,var(--surface))}
.demo-cue{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 0;font-weight:700;font-size:1.2rem}
.demo-cue span{display:inline-block;font-size:1.6rem;line-height:1}
.cue-side{animation:cue-x 1.4s ease-in-out infinite}
.cue-down{display:none!important;animation:cue-y 1.4s ease-in-out infinite}
@keyframes cue-x{50%{transform:translateX(6px)}}
@keyframes cue-y{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.cue-side,.cue-down{animation:none}}
@media (max-width:880px){.cue-side{display:none!important}.cue-down{display:inline-block!important}}
@media (max-width:560px){
  .dm-phone{max-width:none;height:min(640px,82svh);border:1.5px solid var(--line);border-radius:24px}
}