/* The app's Welcome and first-time setup screens (app-welcome.html).
   Self-contained on purpose: no site.css, so none of the website's header,
   page-intro or theme rules can reach it. Always the warm cream ground the
   app screens use (app.css), so this screen and the hand-off to Today read
   as one surface.

   Primary buttons are white on the website's #F97B16 by the owner's
   decision. That measures 2.67:1, under WCAG AA; it is an open item for the
   component review, recorded rather than fixed by changing either colour.
   Welcome uses the original artwork from the owner's Welcome v8 export.
   The mascot and its decorative scenery stay still. */
:root {
  color-scheme: light;
  --cream: #FFF8F0;
  --ink: #2b2724;
  --text: #3c3a37;
  --text-dim: #5e5b57;
  --text-muted: #6f6b66;
  --line: #e7d9c8;
  --line-strong: #ddcbb5;
  --card: #FFFEFA;
  --chip: #fffdf8;
  --primary: #F97B16;
  --primary-edge: #CB5D07;
  --primary-hover: #FF8C2E;
  --primary-deep: #A94B03;
  --primary-tint: #fff0e0;
  --peach: #ffe7cc;
  --bad-bg: #fde8e4;
  --bad-fg: #8f2a1c;
  --gap-x: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* Each screen is at least one viewport tall and grows past it (scrolling)
   when large text or a short viewport needs the room; nothing is clipped. */
.screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) var(--gap-x) max(16px, env(safe-area-inset-bottom));
}
.screenCentered { justify-content: center; align-items: center; text-align: center; gap: 12px; }

.visuallyHidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Welcome ------------------------------------------------------------ */
.cat {
  display: block;
  width: clamp(88px, min(40vw, 22svh), 184px);
  height: auto;
  margin: 0 auto;
}
.catSmall { width: clamp(80px, 22vw, 112px); }
/* Welcome v8: 390 × 844 reference, with room to scroll on short screens or
   with large text. Insets belong to the actual app, not a drawn phone frame. */
#welcome, #loading {
  max-width: 480px;
  padding: max(54px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-left), env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom));
}
#loading { justify-content: flex-start; align-items: stretch; }
.welcomeCopy {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.cat { animation: none; transform: none; }
.wordmark {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary-deep);
}
.scene {
  position: relative;
  flex: none;
  height: 330px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px;
  background: #FFEBD2;
}
.scene .cat { position: relative; width: auto; height: 286px; margin: 0 0 22px; }
.sceneHill { position: absolute; border-radius: 50%; }
.sceneHillLeft { left: -40px; bottom: -70px; width: 260px; height: 160px; background: #F9DAB3; }
.sceneHillRight { right: -60px; bottom: -80px; width: 280px; height: 170px; background: #F6CF9F; }
.sceneSpark { position: absolute; }
.sceneSparkGold { left: 34px; top: 54px; width: 26px; height: 26px; fill: #F5B83D; }
.sceneSparkOrange { right: 44px; top: 96px; width: 18px; height: 18px; fill: var(--primary); }
.sceneGreeting {
  position: absolute; right: 22px; top: 26px;
  font: 700 1.5rem/1 "Caveat", cursive;
  color: var(--primary-deep); transform: rotate(6deg);
}
.sceneShadow {
  position: absolute; left: 50%; bottom: 18px; width: 200px; height: 20px;
  margin-left: -100px; border-radius: 50%; background: #3A1A02; opacity: .14;
}
.headline {
  margin: clamp(12px, 3svh, 28px) 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 7.4vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 14em;
  text-wrap: balance;
}
.lede {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 22em;
  text-wrap: pretty;
}
#welcome .headline {
  margin: 0; max-width: none; font-size: 2.375rem; line-height: 1.08;
  letter-spacing: -.01em; color: #22211F; text-wrap: initial;
}
#welcome .headline span { color: var(--primary); }
#welcome .lede {
  margin: 2px 0 0; max-width: none; font-size: 1.1875rem; line-height: 1.45;
  font-weight: 600; color: #4A4744;
}
.welcomeActions { display: flex; flex-direction: column; gap: 10px; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn { font-family: var(--display); gap: 8px; }
.btnIcon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* White label and icon in every state: normal, pressed, busy, disabled. */
.btnPrimary, .btnPrimary:hover, .btnPrimary:active, .btnPrimary:disabled {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--primary-edge);
}
@media (hover: hover) { .btnPrimary:hover { background: var(--primary-hover); } }
.btnSecondary {
  background: var(--card);
  color: var(--primary-deep);
  border-color: var(--line-strong);
  box-shadow: 0 4px 0 #e4d5c2;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-edge); }
.btnSecondary:active { box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.welcomeActions .btn { font-family: inherit; }
.welcomeActions .btnPrimary {
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .045em;
}
.btnApple { background: #000; color: #fff; font: 600 1.125rem/1.2 -apple-system,BlinkMacSystemFont,sans-serif; flex-wrap: wrap; }
.btnApple svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.btnApple small { font-size: .625rem; font-weight: 800; white-space: nowrap; }
.btnSignIn { min-height: 48px; font-size: 1.0625rem; color: var(--primary-deep); }
@media (hover: hover) { .btnSignIn:hover { color: #9A4A07; } }
.btnSignIn:active { box-shadow: none; }
.btn:focus-visible, .textBtn:focus-visible, .legal a:focus-visible,
.field input:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.btnPrimary:active { box-shadow: 0 1px 0 var(--primary-edge); }
#error .btn { max-width: 320px; margin-top: 12px; }

/* Reserved even while empty, so adding the links later does not move the
   buttons. */
.legal {
  min-height: 2.6em;
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
}
.legal a { color: var(--text); font-weight: 700; text-underline-offset: 2px; }
#welcome .legal { margin: 0; font-size: .875rem; line-height: 1.4; font-weight: 600; }

/* ---- first-time setup ---------------------------------------------------- */
#setup-form { display: flex; flex-direction: column; flex: 1 0 auto; }
.setupBar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.backBtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px; padding: 0;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
.backBtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.backBtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.progressSegments { flex: 1; display: flex; gap: 5px; min-width: 0; }
.progressSegments span { flex: 1; height: 6px; border-radius: 6px; background: #e7dfcf; }
.progressSegments span.done { background: var(--primary); }
.progressLabel { flex: none; margin: 0; font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); }

.step { flex: 1 0 auto; }
.stepEyebrow {
  margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary-deep);
}
.stepTitle {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}
.stepTitle:focus { outline: none; }
.stepNote { margin: 6px 0 0; color: var(--text-dim); }
.step > .stepTitle + :not(.stepNote) { margin-top: 20px; }
.step > .stepNote + * { margin-top: 24px; }

.ask { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.ask legend { padding: 0; margin-bottom: 10px; font-weight: 800; color: var(--text); }
.ask legend em { font-style: normal; font-weight: 600; color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--chip);
  border: 1.5px solid #dcccba;
  border-radius: 12px;
}
.chip input:checked + span { background: var(--peach); border-color: #d16d33; color: #97411b; box-shadow: 0 2px 0 #d7a073; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.field { display: block; margin: 0 0 22px; }
.field > span { display: block; margin-bottom: 8px; font-weight: 800; color: var(--text); }
.field input, .field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 1.0625rem; /* 16px+ keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--chip);
  border: 1.5px solid var(--line-strong);
  border-radius: 13px;
}
.field input::placeholder { color: #a39e97; }
.hint { display: block; min-height: 1.4em; margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); }

.feedback {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--text);
}
.feedback[data-error="true"] { background: var(--bad-bg); color: var(--bad-fg); }

/* In the flow, not fixed: with the keyboard open the page scrolls to them
   like any other control instead of hiding them behind it. */
.setupActions { display: flex; gap: 12px; padding-top: 20px; }
.setupActions .btn { flex: 1; }
/* Setup v8: the stored answers and optional-question rules are shared with
   the website; these are the app's controls and composition. */
#setup { padding-top:max(50px,env(safe-area-inset-top)); padding-bottom:max(30px,env(safe-area-inset-bottom)); max-width:480px; }
#setup-form { min-width:0; }
.setupBar { margin-bottom:24px; }
.progressSegments { gap:0; height:12px; border-radius:6px; background:#f1e3d0; overflow:hidden; }
.progressSegments span { height:12px; border-radius:0; background:none; }
.progressSegments span.done { background:var(--primary); }
.progressLabel { font-size:1rem; }
.setupHead { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.setupHead > div { flex:1; min-width:0; }
.setupHead .stepTitle { font-size:2rem; line-height:1.08; }
.setupHead .stepTitle span { color:var(--primary); }
.setupHead .stepNote { font-size:1.1875rem; font-weight:600; line-height:1.45; margin-top:8px; }
.setupMascot { display:flex; align-items:flex-end; justify-content:center; flex:none; width:117px; height:124px; border:2px solid #2b1106; border-radius:24px; background:#ffebd2; box-shadow:0 4px 0 #2b1106; overflow:hidden; }
.setupMascot img { height:108px; width:auto; max-width:100%; object-fit:contain; }
#setup .ask legend,#setup .field > span { font:800 1.25rem/1.2 var(--display); color:#22211f; margin-bottom:12px; }
#setup .chips { gap:10px; }
#setup .chip span { border:2px solid #ead9c3; background:#fff; box-shadow:0 3px 0 #ead9c3; border-radius:14px; font-size:1rem; }
#setup .chip input:checked + span { background:#fff0e0; border-color:var(--primary); box-shadow:0 3px 0 #e9a86a; }
#setup .field input,#setup .field select { background:#fff; border:2px solid #ead9c3; border-radius:16px; min-height:56px; font-size:1.125rem; }
#setup .field input[type="number"] { font-size:1.375rem; font-weight:800; }
#setup .hint { font-size:1.0625rem; font-weight:600; }
#setup .ratingGoal { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 12px 16px; border:2px solid #f3e3cc; border-radius:22px; box-shadow:0 4px 0 #f3e3cc; background:#fff; }
#setup .ratingGoal > span { margin:0; font-size:1.1875rem; }
#setup-current-rating { display:block; margin-top:4px; font:700 .9375rem/1.3 'Nunito',sans-serif; color:var(--text-dim); }
#setup .ratingGoal input { width:112px; text-align:center; min-width:0; }
.setupNote { display:flex; align-items:flex-start; gap:14px; padding:16px; border:2px solid #f5c08a; border-radius:22px; background:#fff0e0; margin:8px 0 16px; }
.setupNoteIcon { display:grid; place-items:center; width:44px; height:44px; flex:none; border:2px solid #f5c08a; border-radius:12px; background:#fff; color:var(--primary-deep); font-size:1.75rem; }
.setupNote strong { display:block; font:800 1.1875rem/1.2 var(--display); color:#22211f; }
.setupNote p { margin:4px 0 0; font-size:1rem; font-weight:600; color:#5a3410; }
.setupNote small { display:block; font-size:.75rem; letter-spacing:.1em; font-weight:800; text-transform:uppercase; color:var(--primary-deep); margin-bottom:4px; }
.minuteChoices { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px!important; }
.minuteChoices .chip span { min-height:92px; display:flex; flex-direction:column; justify-content:center; gap:4px; border-radius:20px!important; }
.minuteChoices b { font:800 1.75rem/1 var(--display); }
.minuteChoices small { font-size:1rem; font-weight:700; }
#setup .setupActions .btn { font-family:inherit; text-transform:uppercase; font-size:1.0625rem; letter-spacing:.045em; }
@media (max-width:359px) { .setupMascot { width:88px; height:104px; } .setupMascot img { height:94px; } .setupHead .stepTitle { font-size:1.75rem; } }