/* The ask screen (first screen) and the ordered planner's chips, step sheet and step cards.
   Same system as the rest: 4px spacing scale, hairline rules, square controls, one yellow action. */

.ask2 { gap: var(--s3); }
/* the question reads at a glance and leaves room for the box on a phone */
.ask2 h2 { font-size: var(--d-title); line-height: 1; }
.hero-q { gap: var(--s2); }
.hero-q .ul { font: 500 var(--fs-lg)/1.35 var(--f-body); min-height: var(--ctl); padding: var(--s2) 0; }
/* the request box: two lines so a whole sentence stays visible; Enter plans, it never adds a line */
.reqbox { display: block; resize: none; overflow: hidden; color: var(--ink); field-sizing: content; min-height: calc(2 * 1.3em + 16px); max-height: 7.5em; }
.hero-q .ul::placeholder { color: var(--ink-2); opacity: 1; font-weight: 500; }

/* example chips */
.exs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.exchip { min-height: 44px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: 0 var(--s3); font: 500 var(--fs-xs) var(--f-mono); cursor: pointer; text-align: left; border-radius: 0; }
.exchip:hover { border-color: var(--ink); }

/* I understood: ordered chips */
.understood.intent { gap: var(--s2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; counter-reset: step; }
.chips li { display: flex; align-items: center; gap: var(--s2); }
.chips .arr { color: var(--ink-2); font: 500 14px var(--f-mono); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0 var(--s3); font: 700 14px var(--f-body); text-transform: none; letter-spacing: 0; cursor: pointer; border-radius: 0; }
.chip b { font-weight: 700; }
.chip span { font: 500 11px var(--f-mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.chip.add { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); font-weight: 600; background: transparent; }
.understood.intent .u-sum { margin: 0; font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.understood.intent .u-sum b { font-weight: 500; }
.understood.intent .u-sum .by { margin-left: var(--s2); padding-left: var(--s2); border-left: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.understood.intent .u-sum .by.ai { color: var(--ink); font-weight: 500; }
.understood.intent:empty { display: none; }
.chip:hover { background: var(--surface); }

/* the step sheet: an activity grid */
.actgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1.5px solid var(--ink); }
.actb { min-height: 48px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--f-body); padding: 0 var(--s2); cursor: pointer; }
.actb:nth-child(3n) { border-right: 0; }
.actb[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.actb:hover { background: var(--bg); }
.actb[aria-pressed="true"]:hover { background: var(--ink); color: var(--bg); }

/* "Use my location": one compact row; asked only on tap */
.loc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); }
/* "Start from": a square native select (works in every browser and inside frames) */
.from { display: grid; gap: var(--s1); flex: 1 1 160px; min-width: 0; max-width: 280px; }
.areasel { min-height: 44px; width: 100%; border: 1px solid var(--ink); border-radius: 0; background: var(--surface); color: var(--ink); font: 600 var(--fs-ui) var(--f-body); padding: 0 32px 0 var(--s3);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.areasel:hover { border-color: var(--ink); background-color: var(--bg); }
.areasel option { background: var(--surface); color: var(--ink); }
.loc .small { margin: 0; color: var(--ink-2); }
.loc[data-st="on"] .small, .loc .locmsg { flex-basis: 100%; }
.locb { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 600 var(--fs-ui) var(--f-body); cursor: pointer; border-radius: 0; }
.locb:hover { background: var(--surface); }
.locb[aria-busy="true"] { border-style: dashed; cursor: progress; }
.locb .pin { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.locb .pin::after { content: ""; position: absolute; inset: 2px; background: currentColor; border-radius: 50%; }
.locon { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-height: 44px; align-content: center; flex-basis: 100%; }
.locon b { font: 700 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.locon span { font: 600 15px var(--f-body); }
.locrem { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font: 500 14px var(--f-body); cursor: pointer; }
.locrem input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); border-radius: 0; }
.loc .link { min-height: 44px; }

/* the compact block: day, then people and budget on one row (stacked under 420px) */
.quick { display: grid; gap: var(--s3); }
.quick .q { gap: var(--s1); }
.row-pb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; }
/* budget: four equal cells; the group measures itself and becomes 2 x 2 when a cell could not hold "Recommended"/"Recomendado".
   Every name uses the same size, never wraps and never breaks inside a word. */
.ask2 .bud-q { container-type: inline-size; min-width: 0; }
.ask2 .buds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--line); gap: 1px; }
.ask2 .bopt { padding: 0; border: 0; display: block; background: var(--surface); min-width: 0; }
.ask2 .bopt[data-on="true"] { background: var(--ink); color: var(--bg); }
.ask2 .bsel { width: 100%; min-height: var(--ctl); padding: var(--s1) var(--s2); display: grid; justify-items: center; gap: 2px; align-content: center; }
.ask2 .bsel::after { content: none; }
.ask2 .bsel b { font: 700 14px/1.15 var(--f-body); text-align: center; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; hyphens: none; letter-spacing: 0; }
.ask2 .bamt { font: 500 12px var(--f-mono); display: block; color: var(--ink-2); white-space: nowrap; }
@container (max-width: 459px) {
  .ask2 .buds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask2 .bsel { min-height: var(--ctl); padding: var(--s1) var(--s2); }
}

/* day tiles: never under 44px wide; on the narrowest phones the strip scrolls sideways inside itself, never the page */
@media (max-width: 359px) {
  .ask2 .days { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
}
.ask2 .bopt[data-on="true"] .bamt { color: var(--bg); }
.custom-q { justify-items: start; }
.custom-q .bamt { font: var(--fig); display: flex; align-items: baseline; gap: 2px; }
.custom-q .bamt input { width: 4.2ch; min-height: 44px; border: 0; border-bottom: 2px solid currentColor; background: transparent; font: var(--fig); text-align: right; padding: 0; border-radius: 0; -moz-appearance: textfield; appearance: textfield; }

/* folded options and the small links */
.moreopts { border-top: 1px solid var(--line); }
.moreopts summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 var(--fs-ui) var(--f-body); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.moreopts summary::-webkit-details-marker { display: none; }
.moreopts summary::before { content: "+"; font: 500 16px var(--f-mono); margin-right: var(--s2); width: 14px; }
.moreopts[open] summary::before { content: "−"; }
.moreopts > .q { padding: var(--s2) 0 var(--s3); }
.asklinks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.asklinks .link { min-height: 44px; }

@media (max-width: 420px) {
  .row-pb { grid-template-columns: 1fr; gap: var(--s3); }
  .ppl-q { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: var(--s3); }
}

/* Plan button while an outside reader works: busy look, Stop next to it */
.planrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.planrow .btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.planrow .link { min-height: 44px; }

/* Claude's answer above the plan: quiet, labelled, not a card */
.ai-reply { border-left: 3px solid var(--ink); padding: var(--s1) 0 var(--s1) var(--s3); display: grid; gap: var(--s1); }
.ai-reply p { margin: 0; }
.ai-reply p:nth-child(2) { font: 500 var(--fs-md)/1.45 var(--f-body); max-width: 60ch; }
.ai-reply .small { color: var(--ink-2); }

/* the chosen budget is ink (like the chosen day), so the focus ring sits just outside the cell, where it shows on the light neighbours */
.ask2 .bopt:focus-within { position: relative; z-index: 1; outline: 3px solid var(--accent); outline-offset: 0; }
.ask2 .bopt[data-on="true"]:focus-within { outline-color: var(--accent); }

/* ---------- the home screen (Real): what Vale is, the list, one-tap additions, the day's time window, Surprise me, how it works ---------- */
.home { gap: var(--s4); }
.home-hero { display: grid; gap: var(--s2); }
.home-hero .eyebrow { margin: 0; font: 500 var(--fs-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.home-hero h2 { margin: 0; font: 900 var(--d-title)/1 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.home-hero h2 .h2b { display: block; color: var(--ink); background: linear-gradient(transparent 62%, var(--go) 62%); width: fit-content; padding-right: 2px; }
.home-hero .lede { margin: 0; font: 400 var(--fs-lg)/1.5 var(--f-body); color: var(--ink-2); max-width: 46ch; }
/* the list: a card, so the one thing to do on this screen reads as the main thing */
.hero-q.card { background: var(--surface); border: var(--rule) solid var(--ink); padding: var(--s3) var(--s4) var(--s4); gap: var(--s3); }
.hero-q.card > .lab { margin: 0; }
.quickadd { display: grid; gap: var(--s2); }
.quickadd > .lab { margin: 0; }
.qa-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip.qa { font-weight: 600; gap: var(--s1); border-color: var(--line); background: var(--bg); }
.chip.qa > span { font: 600 var(--fs-ui) var(--f-body); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.chip.qa:hover { border-color: var(--ink); background: var(--surface); }
.chip.qa.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip.qa.on > span { color: var(--go); }
/* the day's own start and end: two square native selects side by side */
.win { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.winf { display: grid; gap: var(--s1); flex: 1 1 130px; max-width: 200px; }
.winf > span { font: 500 var(--fs-xs) var(--f-mono); color: var(--ink-2); }
/* Surprise me: the second way in, quieter than Plan */
.surprise { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.surprise .small { margin: 0; color: var(--ink-2); flex: 1 1 200px; }
/* how it works: three numbered lines and the trust line */
.how { display: grid; gap: var(--s2); border-top: var(--hair) solid var(--line); padding-top: var(--s4); }
.how h3 { margin: 0; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); align-items: start; font: 400 var(--fs-ui)/1.5 var(--f-body); }
.how li b { display: grid; place-items: center; width: 28px; height: 28px; background: var(--go); color: var(--go-ink); font: 700 var(--fs-sm) var(--f-mono); }
.how .trust { margin: var(--s1) 0 0; color: var(--ink-2); }
@media (min-width: 960px) {
  .how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how li { grid-template-columns: 1fr; align-content: start; }
}