/* NGP poster palette, with quieter paper around the everyday controls. */
.topbar { border-bottom: 1px solid #17171440; padding-block: 18px; }
.topbar .demo-tag { border: 0; padding: 0; color: #59594f; font-size: 11px; }
.topbar .tour-entry {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 7px 10px 7px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font: 20px var(--display);
  transform: rotate(-2deg);
}
.tour-entry span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--yellow);
  font: 25px/1 var(--body);
}
.topbar .tour-entry:hover { background: var(--paper); box-shadow: 3px 3px 0 var(--lilac); transform: rotate(0); }
.sidebar :focus-visible, .mobile-nav :focus-visible, .tour-header :focus-visible {
  outline-color: var(--yellow);
}

/* A bold, consistent arrow; the select itself stays native and keyboard usable. */
select,
.capture-sort select,
.tour-practice-fields select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fffef8;
  background-image: url('../public/icons/select-chevron.svg');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 34px 34px;
  border: 2px solid var(--ink);
  border-radius: 0;
  min-height: 48px;
  padding: 10px 48px 10px 12px;
  font-size: 16px;
  cursor: pointer;
}
select:disabled { opacity: .6; cursor: default; }

.heading { margin-bottom: 32px; }
.heading h1 { font-size: clamp(40px, 4.8vw, 60px); }
.heading .eyebrow { font-size: 12px; letter-spacing: 1px; margin-bottom: 12px; }
.heading .scribble { font-size: 17px; }
.today-grid { gap: 40px; }
.section-title { margin-top: 32px; }
.section-title h2 { font-size: 27px; }
.capture { box-shadow: 4px 4px 0 var(--ink); }
.capture h2 { font-size: 29px; }
.capture-title > span { font-size: 32px; }
.capture .hint { margin-top: 12px; }
.event-card, .event-card.green, .event-card.lilac,
.event-card.green:hover, .event-card.lilac:hover {
  background: var(--paper);
  min-height: 160px;
  box-shadow: 2px 3px 0 var(--ink);
}
.event-card.green { --card-accent: var(--green); }
.event-card.lilac { --card-accent: var(--lilac); }
.event-card .sticker { background: var(--card-accent); color: var(--ink); border: 1px solid var(--ink); }
.event-card h3 { font-size: 28px; text-shadow: none; line-height: 1.15; }
.event-bottom { border-color: #17171430; font-size: 12px; margin-top: 20px; }
.capture-item button { min-height: 44px; }
.capture-item .type { background: transparent; font-size: 16px; border-color: #17171460; }
.capture-item small { font-size: 11px; }
.noticeboard { background-color: #eeede4; padding: 20px; }
.noticeboard h2 { font-size: 23px; }
.noticeboard .caption { font-size: 12px; color: #59594f; }
.little-note { background: var(--paper); transform: rotate(-1deg); padding: 17px; }
.little-note h3 { font-size: 24px; }
.side-bottom strong { font-size: 22px; line-height: 1.2; max-width: 150px; }
.page-footer { margin-top: 40px; }

.garden-card h2 { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.garden-card .sticker { background: transparent; color: var(--ink); border-bottom: 1px solid var(--ink); padding-inline: 0; transform: none; }
.garden-card-top { margin-bottom: 20px; }
.garden-card-foot { font-size: 13px; }
.garden-panel.lilac,
.garden-panel.next-session.green,
.garden-panel.next-session.lilac,
.garden-panel.next-session.yellow,
.garden-panel.next-session.pink { background: var(--paper); }
.next-session { border-left: 6px solid var(--green); }
.garden-panel.lilac { border-left: 6px solid var(--lilac); }
.garden-panel h2 { font-size: 25px; }
.activity-summary { margin-top: 20px; padding-top: 14px; border-top: 1px solid #17171430; font-size: 14px; }
.garden-heading h1 { font-size: clamp(35px, 4.3vw, 56px); }

/* The lesson explains once; the workbench gives the action room to breathe. */
.tour-dialog { background: var(--paper); }
.tour-body { align-items: start; gap: 32px; }
.tour-lesson h2 { font-size: clamp(32px, 3.6vw, 43px); margin-bottom: 18px; }
.tour-body-copy { font-size: 16px; line-height: 1.6; }
.tour-kicker { letter-spacing: .7px; font-size: 11px; }
.tour-tip { border: 0; border-left: 4px solid var(--yellow); background: transparent; box-shadow: none; transform: none; padding: 5px 0 5px 14px; margin-top: 22px; }
.tour-tip p { font-size: 14px; }
.tour-demo-capture, .tour-demo-today, .tour-demo-garden {
  background: var(--paper);
  border-top: 8px solid var(--yellow);
}
.tour-demo-today { border-top-color: var(--green); }
.tour-demo-garden { border-top-color: var(--lilac); }
.tour-demo-welcome { background: var(--lilac); }
.tour-demo-ready { background: var(--green); }
.tour-demo { min-height: 0; padding: 22px; box-shadow: 3px 3px 0 var(--ink); }
.tour-workbench-label { font-size: 21px; }
.tour-practice-note { background: transparent; border: 0; border-top: 1px solid #17171450; box-shadow: none; padding: 18px 0 0; transform: none; margin-bottom: 0; }
.tour-practice-note > p { font-size: 16px; }
.tour-practice-fields { gap: 8px; margin-top: 18px; }
.tour-reward { font-size: 20px; padding: 7px 10px; box-shadow: none; }
.tour-demo-capture .text-button { font-size: 13px; margin-top: 14px; }
.tour-ready-type { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.tour-footer { padding-block: 16px; }
.tour-next { min-width: 145px; }

@media (max-width: 700px) {
  .topbar > .demo-tag:first-child { display: inline; margin-left: 0; font-size: 10px; }
  .topbar .tour-entry { font-size: 18px; padding: 6px 8px 6px 11px; }
  .tour-entry span { width: 25px; height: 25px; font-size: 23px; }
  .heading { margin-bottom: 28px; }
  .heading h1 { font-size: clamp(35px, 8.5vw, 52px); }
  .today-grid { gap: 28px; }
  .section-title h2 { font-size: 25px; }
  .capture h2 { font-size: 25px; }
  .event-card h3 { font-size: 25px; }
  .noticeboard { margin-top: 8px; }
  .garden-heading h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .tour-body { gap: 22px; padding: 22px 18px; }
  .tour-lesson h2 { font-size: 32px; }
  .tour-demo { padding: 18px; }
  .tour-tip { margin-top: 16px; }
  .tour-footer { position: sticky; bottom: 0; padding: 12px 15px; }
  .tour-header { position: sticky; top: 0; z-index: 3; }
  .tour-next { min-width: 0; }
}
@media (max-width: 380px) {
  .capture h2 { font-size: 23px; }
  .garden-heading h1 { font-size: 32px; }
}
@media (forced-colors: active) {
  select, .capture-sort select, .tour-practice-fields select {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
    padding-right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-entry { transition: none; }
}

/* This notice stays outside the routed app, including in the embedded preview. */
.prototype-context{padding:18px clamp(18px,3vw,42px);border-bottom:2px solid var(--ink);background:#fff9dc;color:var(--ink);font:14px/1.6 var(--body)}
.prototype-context__heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
.prototype-context__heading strong{font-weight:700;max-width:65ch}
.prototype-context__heading a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-underline-offset:4px}
.prototype-context p{max-width:105ch;margin:8px 0 0}
@media(max-width:700px){.prototype-context{font-size:13px}.prototype-context__heading{align-items:flex-start;flex-direction:column;gap:4px}}

.job-progress{font-weight:700;font-size:14px;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow)}
.prototype-context{padding:10px clamp(18px,3vw,42px);font-size:13px;line-height:1.5}
.prototype-context__heading a{min-height:32px}
.prototype-context p{margin:4px 0 0}

/* Colour layer drawn from NGP's posters: leaf green, lilac, tomato, brown. */
:root{--leaf:#6aa334;--mint:#d8ecb8;--tomato:#d93a2b;--brown:#4a2c1a;--lilac-soft:#d9cfe6}
.prototype-context{background:var(--mint);border-bottom-color:var(--brown)}
.nav a.active{background:var(--yellow);box-shadow:3px 3px 0 var(--tomato)}
.event-card.green{background:var(--leaf);color:#fff}
.event-card.green .sticker,.event-card.lilac .sticker{background:var(--yellow);color:var(--ink)}
.event-card.lilac{background:var(--lilac);color:var(--ink)}
.event-card.yellow{background:var(--yellow)}
.event-card .event-bottom{font-family:var(--display);text-transform:uppercase}
.job small{color:var(--tomato)}
.job:has(input:checked) small{color:#6b6b61}
.job input:checked{background:var(--leaf);border-color:var(--leaf)}
.job input:checked:after{color:#fff}
.job-progress{background:var(--mint);border-color:var(--brown);color:var(--brown)}
.noticeboard{background:var(--lilac-soft);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.little-note{background:var(--leaf);color:#fff}
.little-note .date-stamp{color:var(--ink)}
.date-stamp span{background:var(--tomato);color:#fff}
.capture-item .type{background:var(--paper)}
.capture-item .type.lilac{background:var(--lilac)}
.capture-item .type.green{background:var(--leaf);color:#fff}
.section-title .sticker.yellow{background:var(--tomato);color:#fff}
.heading .scribble{color:var(--tomato)}
.garden-heading.green{background:var(--leaf)}
.garden-heading.yellow{background:var(--yellow)}