/* Sample-kitchen demo. Scoped to the public demo page. Tokens, type scale,
   control heights, and the palette come from the shared public site; this file
   only lays out the three-kitchen journey. */
.sf-weekly-demo-page { --ink: var(--green-deep); --ink-soft: var(--green); --citrus: var(--orange); --gold: var(--orange); --gold-soft: var(--coral-soft); --paper-warm: #f4f8f3; --border: rgba(45, 95, 57, .25); --sf-purple-soft: #f0dfe7; background: var(--paper); }
.weekly-demo-hero { padding: clamp(32px, 4.5vw, 52px) 0 clamp(24px, 3vw, 36px); background: linear-gradient(132deg, #f4f8f3 0%, #fff 55%, #e9f0e7 100%); border-bottom: 1px solid var(--border); }
.weekly-demo-hero-grid { display: grid; grid-template-columns: minmax(0, 48rem); justify-content: center; gap: clamp(30px, 7vw, 92px); align-items: end; }
.weekly-demo-hero h1 { max-width: 22ch; margin-bottom: 20px; font-size: clamp(1.9rem, 2.3vw, 2.45rem); line-height: 1.18; }
.weekly-demo-hero h1 em { color: var(--green); font-weight: 500; }
.weekly-demo-hero .lede { max-width: 52rem; }
.weekly-demo-sample { margin: 1rem 0 0; color: var(--wd-muted, rgba(29, 64, 39, .70)); font-size: .82rem; font-weight: 650; }
.weekly-demo-section { padding: clamp(28px, 4vw, 54px) 0; }
.weekly-demo-loading, .weekly-demo-noscript { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper-warm); }
.weekly-demo-closing { padding: clamp(44px, 6vw, 74px) 0; background: var(--paper-warm); border-top: 1px solid var(--border); }
.weekly-demo-closing h2 { max-width: 24ch; font-size: clamp(1.45rem, 1.8vw, 1.9rem); }

.weekly-demo-app { --wd-border: rgba(45, 95, 57, .27); --wd-muted: rgba(29, 64, 39, .70); --wd-panel: #fff; --wd-soft: #f5f8f3; display: grid; gap: 18px; }
.weekly-demo-app h2, .weekly-demo-app h3, .weekly-demo-app h4 { scroll-margin-top: 5.5rem; }
.weekly-demo-app .wd-panel h3 { scroll-margin-top: 110px; }
.weekly-demo-app :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.weekly-demo-app .btn { min-height: 44px; }
.weekly-demo-app .btn-small { padding: 8px 14px; font-size: .84rem; }

/* Shared small pieces ------------------------------------------------------ */
.wd-step-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--coral-deep); font-size: .7rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.wd-section-heading h3 { margin-bottom: 9px; font-size: clamp(1.18rem, 1.35vw, 1.45rem); }
.wd-section-heading p:not(.wd-step-label) { margin: 0 0 18px; font-size: .94rem; line-height: 1.55; }
.wd-ingredient-icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wd-ingredient-onion { color: var(--purple); }
.wd-ingredient-garlic { color: #b37d08; }
.wd-ingredient-pepper { color: var(--coral-deep); }
.wd-ingredient-pepper .wd-ingredient-stem { color: var(--sage); stroke: currentColor; }
.wd-ingredient-cilantro { color: var(--green); }

.wd-tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 2px 9px; border: 1px solid transparent; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.wd-tag.verified { border-color: rgba(45, 95, 57, .35); background: var(--green-soft); color: var(--green-deep); }
.wd-tag.inference { border-color: rgba(224, 120, 35, .55); background: var(--gold-soft); color: #7a4a10; }
.wd-tag.unknown { border-color: rgba(232, 93, 63, .42); background: var(--coral-soft); color: #8f2f1c; }
.wd-tag.projection { border-color: rgba(140, 59, 109, .4); background: var(--purple-soft); color: var(--purple-deep); }
.wd-tag.assumption { border-color: rgba(140, 59, 109, .4); background: #fff; color: var(--purple-deep); border-style: dashed; }
.wd-tag.record { border-color: var(--wd-border); background: var(--wd-soft); color: var(--wd-muted); }

.wd-claims { display: grid; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.wd-claim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--wd-border); border-radius: var(--radius-sm); background: #fff; }
.wd-claim p { margin: 0; max-width: none; color: var(--ink); font-size: .9rem; line-height: 1.5; }
.wd-claim p em { color: var(--purple-deep); font-style: italic; }

.wd-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--wd-border); border-radius: var(--radius-sm); background: var(--wd-border); overflow: hidden; }
.wd-figures > div { min-width: 0; padding: 13px 14px; background: #fff; }
.wd-figures dt { margin-bottom: 5px; color: var(--wd-muted); font-size: .69rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.wd-figures dd { margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.wd-figures small { display: block; margin-top: 4px; color: var(--wd-muted); font-size: .78rem; line-height: 1.4; }

.wd-table { overflow-x: auto; margin: 14px 0; border: 1px solid var(--wd-border); border-radius: var(--radius-sm); background: #fff; }
.wd-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.wd-table caption { padding: 11px 13px; color: var(--ink); background: var(--wd-soft); font-weight: 650; text-align: left; }
.wd-table th, .wd-table td { padding: 9px 12px; border-top: 1px solid var(--wd-border); text-align: left; vertical-align: top; }
.wd-table thead th { color: var(--wd-muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wd-table tbody th { color: var(--ink); font-weight: 650; }
.wd-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.wd-table tr.is-emphasis th, .wd-table tr.is-emphasis td { background: var(--green-soft); font-weight: 650; }

.wd-working { margin-top: 16px; border: 1px solid var(--wd-border); border-radius: var(--radius-sm); background: var(--wd-soft); }
.wd-working summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 14px; color: var(--ink); cursor: pointer; font-weight: 700; list-style: none; }
.wd-working summary::-webkit-details-marker { display: none; }
.wd-working summary span { color: var(--coral-deep); font-size: 1.1rem; }
.wd-working[open] summary span { transform: rotate(45deg); }
.wd-working-body { padding: 4px 14px 14px; }
.wd-working-body p, .wd-working-body li { max-width: none; font-size: .86rem; line-height: 1.55; }
.wd-working-body p { margin: 12px 0 0; }
.wd-working-body ul { margin: 8px 0 0; padding-left: 1.2rem; }
.wd-working-body .wd-table { background: #fff; }

/* Entry: three kitchens --------------------------------------------------- */
.wd-entry { display: grid; gap: 22px; }
.wd-entry-heading h2 { max-width: 24ch; margin-bottom: 8px; font-size: clamp(1.45rem, 1.8vw, 1.9rem); }
.wd-entry-heading p { max-width: 60ch; margin: 0; font-size: .95rem; }
.wd-entry-heading .eyebrow { margin-bottom: 8px; }
.wd-kitchen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wd-kitchen { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 240px; padding: 22px; border: 1px solid var(--wd-border); border-radius: var(--radius); background: var(--wd-panel); color: var(--ink); cursor: pointer; text-align: left; box-shadow: 0 9px 30px rgba(45, 95, 57, .05); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.wd-kitchen:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: var(--shadow-sm); }
.wd-kitchen strong { font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.08; }
.wd-kitchen p { margin: 0; max-width: none; color: var(--ink); font-size: .9rem; line-height: 1.5; }
.wd-kitchen-type { display: flex; align-items: center; gap: 8px; color: var(--coral-deep); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-kitchen-type em { padding: 1px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-style: normal; letter-spacing: .04em; }
.wd-kitchen-owner { color: var(--wd-muted); font-size: .84rem; font-weight: 650; }
.wd-kitchen-cta { margin-top: auto; padding-top: 8px; color: var(--green-deep); font-size: .86rem; font-weight: 700; }
.wd-kitchen.is-seen { border-style: dashed; }
.wd-entry-fine { margin: 0; color: var(--wd-muted); font-size: .82rem; font-weight: 650; }

/* Journey shell ------------------------------------------------------------ */
.wd-guided { display: grid; gap: 16px; }
.wd-journey-bar { display: flex; gap: 18px; align-items: end; justify-content: space-between; padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); background: var(--green-deep); color: var(--cream); }
.wd-journey-bar h2 { margin: 0 0 4px; color: var(--cream); font-size: clamp(1.45rem, 1.8vw, 1.9rem); }
.wd-journey-bar p { margin: 0; color: rgba(255, 253, 249, .85); font-size: .9rem; }
.wd-journey-bar .eyebrow { margin-bottom: 8px; color: var(--sf-purple-soft); }
.wd-journey-bar .btn-ghost { flex: 0 0 auto; border-color: rgba(255,255,255,.6); color: var(--white); white-space: nowrap; }
.wd-journey-bar .btn-ghost:hover { border-color: var(--orange); background: rgba(255,255,255,.1); }
.wd-journey-bar :focus-visible { outline-color: var(--citrus); }

.wd-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0; margin: 0; list-style: none; overflow: hidden; border: 1px solid var(--wd-border); border-radius: var(--radius); background: var(--wd-border); }
.wd-stages li { min-width: 0; background: var(--wd-panel); }
.wd-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 10px; width: 100%; min-height: 116px; padding: 15px 17px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.wd-stage .wd-ingredient-icon { grid-row: 1 / 4; align-self: start; width: 1.75rem; height: 1.75rem; }
.wd-stage span { display: block; margin-bottom: 4px; color: var(--coral-deep); font-size: .7rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.wd-stage strong { display: block; font-size: .95rem; }
.wd-stage small { display: block; color: var(--wd-muted); font-size: .78rem; line-height: 1.45; }
.wd-stages li.is-current .wd-stage { background: var(--green); color: var(--cream); }
.wd-stages li.is-current strong { color: #fffdf9; }
.wd-stages li.is-current small { color: rgba(255,253,249,.8); }
.wd-stages li.is-current span { color: var(--orange); }
.wd-stages li.is-current .wd-ingredient-icon { color: #fffdf9; }
.wd-stages li.is-current .wd-ingredient-stem { color: rgba(255,253,249,.7); }
.wd-stages li.is-complete .wd-stage { background: var(--paper-warm); }
.wd-stage:focus-visible { outline-offset: -4px; }

.wd-workspace { display: grid; gap: 18px; align-items: start; }
.wd-workspace[data-layout="split"] { grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); }
.wd-panel, .wd-inputs { min-width: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--wd-border); border-radius: var(--radius); background: var(--wd-panel); box-shadow: 0 9px 30px rgba(45, 95, 57, .05); }

/* Step 1: records ---------------------------------------------------------- */
.wd-situation { margin: 0 0 18px; padding: 16px 18px; border-left: 4px solid var(--purple); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--purple-soft); }
.wd-situation p { margin: 0; max-width: 62ch; font-family: var(--display); font-size: 1.22rem; font-weight: 500; line-height: 1.35; }
.wd-situation footer { margin-top: 8px; color: var(--purple-deep); font-size: .8rem; font-weight: 650; }
.wd-records-lead { margin: 0 0 10px; color: var(--ink); font-size: .9rem; font-weight: 650; }
.wd-record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.wd-record { display: grid; gap: 5px; align-content: start; justify-items: start; min-height: 86px; padding: 13px; border: 1px solid var(--wd-border); border-radius: var(--radius-sm); background: var(--wd-soft); }
.wd-record strong { font-size: .9rem; line-height: 1.3; }
.wd-record span:not(.wd-tag) { color: var(--wd-muted); font-size: .8rem; line-height: 1.4; }
.wd-records-note { margin: 16px 0 0; padding: 12px 13px; border-radius: 8px; background: var(--purple-soft); color: var(--ink); font-size: .84rem; line-height: 1.5; max-width: none; }

/* Steps 2 and 3: finding, inputs, next move -------------------------------- */
.wd-changed .wd-figures { margin-top: 4px; }
.wd-inputs.is-changed { border-color: var(--purple); }
.wd-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wd-field { display: grid; gap: 7px; }
.wd-field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-size: .82rem; font-weight: 650; }
.wd-field-input { position: relative; }
.wd-field-input input { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid var(--wd-border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.wd-field-input > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--wd-muted); font-weight: 650; pointer-events: none; }
.wd-field-input > span:empty { display: none; }
.wd-affix-prefix { left: 12px; }
.wd-affix-suffix { right: 12px; }
.wd-field-input.has-prefix input { padding-left: 26px; }
.wd-field-input.has-suffix input { padding-right: 34px; }
.wd-range { width: 100%; min-height: 1.55rem; accent-color: var(--coral); cursor: ew-resize; touch-action: pan-y; }
.wd-range:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.wd-field.is-assumption { padding: 10px; border: 1px dashed rgba(140, 59, 109, .5); border-radius: 8px; }
.wd-state-message { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--green); background: var(--wd-soft); color: var(--ink); font-size: .84rem; }
.wd-state-message.is-caution { border-left-color: var(--coral); background: var(--coral-soft); }
.wd-scenario-marker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--wd-soft); color: var(--wd-muted); font-size: .84rem; }
.wd-scenario-marker > strong, .wd-scenario-marker > span { display: block; min-height: 2.6em; align-content: center; }
.wd-scenario-marker .btn[disabled] { opacity: .45; cursor: not-allowed; }
.wd-inputs.is-changed .wd-scenario-marker { background: var(--purple-soft); color: var(--purple-deep); }
.wd-scenario-marker strong { color: var(--purple-deep); }

.wd-recommendation { margin-top: 4px; padding: clamp(18px, 2.5vw, 26px); border: 2px solid var(--green); border-radius: var(--radius); background: #f4f8f3; }
.wd-recommendation-kicker { margin: 0 0 8px; color: var(--green-deep); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-recommendation h4 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.wd-recommendation > p { margin: 0 0 12px; max-width: none; color: var(--ink); font-size: .92rem; line-height: 1.55; }
.wd-recommendation.is-now { margin-top: 18px; }
.wd-projection { display: grid; gap: 8px; justify-items: start; margin: 12px 0; padding: 12px 14px; border-left: 4px solid var(--purple); border-radius: 0 8px 8px 0; background: #fff; }
.wd-projection p { margin: 0; max-width: none; color: var(--ink); font-size: .88rem; line-height: 1.5; }
.wd-projection.is-none { border-left-color: var(--wd-border); }
.wd-projection.is-none p { color: var(--wd-muted); }
.wd-standing { margin: 0 !important; color: var(--wd-muted) !important; font-size: .82rem !important; font-style: italic; }
.wd-secondary { margin: 14px 0 0; padding: 12px 13px; border-radius: 8px; background: var(--purple-soft); color: var(--ink); font-size: .86rem; line-height: 1.5; max-width: none; }

/* Steady results: the volatile part of a result panel never shrinks below the
   tallest height it has reached on the current step, the recommendation title
   and projection reserve their usual two lines, and on one-column layouts the
   inputs sit above the results so a drag never moves the control being held. */
.wd-results-core { display: block; }
.wd-recommendation h4 { min-height: 2.3em; }
.wd-projection { min-height: 4.5rem; }
.wd-projection.is-none { align-content: center; }

/* Step 4: follow through --------------------------------------------------- */
.wd-follow-note { padding: 10px 12px; border-left: 3px solid var(--purple); background: var(--purple-soft); font-size: .84rem !important; }
.wd-lesson { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--green-deep); color: #fffdf9; font-size: .92rem; line-height: 1.55; max-width: none; }
.wd-lesson strong { color: var(--sf-purple-soft); }

/* Navigation --------------------------------------------------------------- */
.wd-journey-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 4px 0; border-top: 1px solid var(--wd-border); }
.wd-journey-controls > span { max-width: 34ch; color: var(--wd-muted); font-size: .8rem; text-align: center; }
.wd-journey-controls > div { display: flex; justify-content: flex-end; gap: 10px; }
.wd-journey-controls button[disabled] { opacity: .45; cursor: not-allowed; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 880px) {
  .weekly-demo-hero-grid { grid-template-columns: 1fr; }
  .wd-workspace[data-layout="split"] { grid-template-columns: 1fr; }
  .wd-workspace[data-layout="split"] .wd-inputs { order: -1; }
  .wd-kitchen-grid { grid-template-columns: 1fr; }
  .wd-kitchen { min-height: 0; }
  .wd-journey-bar { display: grid; align-items: start; }
  .wd-journey-bar .btn-ghost { justify-self: start; }
  .wd-figures { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .weekly-demo-app .wd-panel h3 { scroll-margin-top: 101px; }
  .weekly-demo-hero { padding: 26px 0 22px; }
  .weekly-demo-hero h1 { font-size: clamp(1.82rem, 7.5vw, 2.05rem); line-height: 1.2; }
  .weekly-demo-section { padding-block: 26px; }
  .weekly-demo-closing h2 { font-size: clamp(1.35rem, 5.4vw, 1.6rem); }
  .wd-journey-bar, .wd-panel, .wd-inputs, .wd-kitchen { border-radius: 15px; }
  .wd-journey-bar { padding: 20px; }
  .wd-stages { grid-template-columns: repeat(2, 1fr); }
  .wd-stage { min-height: 105px; padding: 13px; }
  .wd-record-list, .wd-field-grid { grid-template-columns: 1fr; }
  .wd-claim { grid-template-columns: 1fr; }
  .wd-journey-controls { grid-template-columns: 1fr; }
  .wd-journey-controls > span { order: 3; text-align: left; }
  .wd-journey-controls > div { justify-content: stretch; }
  .wd-journey-controls > div button { flex: 1 1 auto; }
  .wd-journey-bar .btn-ghost { width: 100%; white-space: normal; }
  .wd-scenario-marker { grid-template-columns: 1fr; }
  .wd-scenario-marker > strong, .wd-scenario-marker > span { min-height: 3.9em; }
  .wd-scenario-marker .btn { width: 100%; }
}

@media (max-width: 420px) {
  .wd-table { overflow-x: visible; }
  .wd-table table, .wd-table tbody, .wd-table tr, .wd-table th, .wd-table td { display: block; width: 100%; }
  .wd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wd-table caption { display: block; }
  .wd-table tr { border-top: 1px solid var(--wd-border); }
  .wd-table tbody th { padding-bottom: 4px; border-top: 0; }
  .wd-table td { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; padding-bottom: 4px; border-top: 0; text-align: right; }
  .wd-table td::before { content: attr(data-label); color: var(--wd-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .wd-table td:last-child { padding-bottom: 10px; }
  .wd-stages { grid-template-columns: 1fr; }
  .wd-stage { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-kitchen, .wd-working summary span { transition: none; }
  .wd-kitchen:hover { transform: none; }
}