/* UNCLAIMED — app skin.
   Same glass language as the site, retuned for a thumb: bigger targets,
   denser rows, safe-area insets so nothing hides under the iOS home bar. */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');

:root {
  --ink:   #12303a;
  --ink-2: rgba(29,36,48,.82);
  --ink-3: rgba(29,36,48,.66);
  --ink-4: rgba(29,36,48,.5);
  --line:  rgba(29,36,48,.12);
  --terracotta: #a8442a;
  --sage: #1f7a52;
  --gold: #715c0d;
  --font-heading: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;
  --font-body: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: #eef7f7;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
}

body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30rem 30rem at 10% -6%, rgba(45,190,190,.30), transparent 62%),
    radial-gradient(26rem 26rem at 92% 8%, rgba(80,170,235,.22), transparent 64%),
    linear-gradient(165deg, #f2fbfa 0%, #eef7f7 55%, #e7f2f4 100%);
}

/* Glass primitive */
.tile, .btn, .chip, .note, .total, .field, .choice, .stepper {
  position: relative; border: none;
  background: rgba(29,36,48,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(29,36,48,.08);
}
.tile::before, .btn::before, .chip::before, .note::before,
.total::before, .field::before, .choice::before, .stepper::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(29,36,48,.08) 22%,
    transparent 42%, transparent 58%, rgba(29,36,48,.08) 78%, rgba(255,255,255,.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

h1 { font-family: var(--font-heading); font-weight: 400; font-size: 2.3rem;
     line-height: 1; letter-spacing: -.03em; margin: 0 0 .6rem; }
h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.35rem;
     letter-spacing: -.02em; margin: 1.8rem 0 .7rem; display: flex;
     align-items: center; gap: .5rem; }
.count { font-family: var(--font-body); font-size: .75rem; color: var(--ink-4); }
p { margin: 0 0 .8rem; color: var(--ink-2); }
.lede { color: var(--ink-2); }
.small { font-size: .89rem; color: var(--ink-3); }
.tiny { font-size: .78rem; color: var(--ink-4); }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .2em;
           color: var(--ink-4); margin: 0 0 .5rem; }
.warn { color: #ffb4a2; font-size: .89rem; }

/* Chrome */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: calc(env(safe-area-inset-top) + .7rem) 1rem .7rem;
  background: rgba(0,0,0,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--font-heading); font-size: 1.15rem; }
.appbar__title { font-size: .92rem; color: var(--ink-3); }
.iconbtn { background: none; border: none; color: var(--ink); font-size: 1.3rem;
           width: 44px; height: 44px; cursor: pointer; }
.appmain { padding: 1.2rem 1rem 3rem; }
#app { transition: opacity .22s ease, transform .22s ease; }
#app.is-out { opacity: 0; transform: translateY(6px); }

.hero { margin-bottom: 1.6rem; }

/* Controls — every target at least 44px */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .8rem 1.3rem; border-radius: 9999px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  cursor: pointer; transition: transform .15s ease, background .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: #fff; color: #000; }
.btn-block { display: flex; width: 100%; margin-top: .7rem; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.6rem; }
.tile { display: flex; flex-direction: column; gap: .25rem; text-align: left;
        border-radius: 1.1rem; padding: 1rem; min-height: 96px; color: var(--ink);
        font-family: var(--font-body); cursor: pointer; }
.tile:active { transform: scale(.99); }
.tile__k { font-family: var(--font-heading); font-size: 1.1rem; }
.tile__v { font-size: .8rem; color: var(--ink-4); line-height: 1.35; }

.q { margin-bottom: 1.8rem; }
.field { width: 100%; min-height: 50px; border-radius: .9rem; padding: .8rem 1rem;
         color: var(--ink); font-family: var(--font-body); font-size: 1rem; appearance: none; }
.field option { background: #111; }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { border-radius: 9999px; padding: .65rem 1.05rem; min-height: 44px;
          color: var(--ink-2); font-family: var(--font-body); font-size: .93rem; cursor: pointer; }
.choice.is-on { background: #0f6f76; color: #fff; }

.stepper-row { display: flex; gap: 1rem; }
.stepper-row label { flex: 1; font-size: .85rem; color: var(--ink-3); }
.stepper { display: flex; align-items: center; justify-content: space-between;
           border-radius: 9999px; margin-top: .4rem; padding: .25rem; }
.stepper button { width: 42px; height: 42px; border: none; background: none;
                  color: var(--ink); font-size: 1.25rem; cursor: pointer; }
.stepper output { font-family: var(--font-heading); font-size: 1.2rem; min-width: 2ch; text-align: center; }

/* Result */
.total { border-radius: 1.25rem; padding: 1.4rem; margin-bottom: 1rem; }
.total__n { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.05;
            letter-spacing: -.03em; margin-bottom: .3rem; }

.prows { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
        padding: .85rem .1rem; border-bottom: 1px solid var(--line); color: inherit;
        text-decoration: none; }
.prow__name { font-size: .98rem; }
.prow__meta { font-size: .78rem; color: var(--ink-4); margin: .1rem 0 .35rem; }
.prow__amt { font-family: var(--font-heading); font-size: 1.15rem; flex-shrink: 0; }

.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px;
        padding: .2rem .6rem; font-size: .72rem; }
.chip::after { content: ''; width: 5px; height: 5px; border-radius: 50%; order: -1; }
.chip--closing { color: #ffb4a2; } .chip--closing::after { background: var(--terracotta); }
.chip--open { color: var(--sage); }  .chip--open::after { background: var(--sage); }
.chip--soon { color: #f0d089; }      .chip--soon::after { background: var(--gold); }
.chip--later, .chip--stalled, .chip--unknown { color: var(--ink-4); }
.chip--later::after, .chip--stalled::after, .chip--unknown::after { background: var(--ink-4); }

.note { border-radius: 1rem; padding: 1rem; font-size: .89rem; color: var(--ink-2); margin: 1rem 0; }
.foot { margin-top: 2.4rem; font-size: .75rem; color: var(--ink-4); }

#install { position: fixed; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom) + 1rem);
           z-index: 20; border-radius: 1rem; padding: .9rem 1rem; display: flex;
           align-items: center; justify-content: space-between; gap: .8rem;
           background: rgba(20,20,20,.9); backdrop-filter: blur(20px); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------------ */
/* The wall                                                            */
/*                                                                     */
/* Deliberately not a blur over real content: there is no real content  */
/* in this markup to blur. The rows below are empty divs. Everything    */
/* being sold — names, amounts, links, deadlines — is absent from the   */
/* document because the server never sent it.                          */
/* ------------------------------------------------------------------ */

.locked { border-radius: 1.25rem; padding: 1.4rem; margin: 1rem 0; position: relative; isolation: isolate; }
.locked::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.24), rgba(29,36,48,.08) 45%, rgba(29,36,48,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.locked h2 { margin: 0 0 .4rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }

/* Ghost rows: the silhouette of a list, so the wall reads as "there is
   something here" rather than as an error state. */
.locked__rows { display: grid; gap: .5rem; margin: 1.1rem 0 1.3rem; }
.locked__row {
  height: 3.1rem; border-radius: .8rem;
  background: linear-gradient(90deg, rgba(29,36,48,.08), rgba(29,36,48,.08) 60%, rgba(255,255,255,.045));
}
.locked__row:nth-child(2) { opacity: .72; }
.locked__row:nth-child(3) { opacity: .48; }
.locked__row:nth-child(4) { opacity: .26; }

@media (prefers-reduced-motion: no-preference) {
  .locked__row { animation: lockedPulse 3.2s ease-in-out infinite; }
  .locked__row:nth-child(2) { animation-delay: .18s; }
  .locked__row:nth-child(3) { animation-delay: .36s; }
  .locked__row:nth-child(4) { animation-delay: .54s; }
  @keyframes lockedPulse { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }
}

/* The pending state: a question outstanding, not a zero.
   Warm rather than red — nothing has gone wrong, we just cannot answer yet. */
.total--pending .total__n { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.total--pending .btn { margin-top: 1.1rem; }

/* ------------------------------------------------------------------ */
/* Form rhythm                                                         */
/*                                                                     */
/* The check was cramped: 1.8rem between questions and 0.5rem between  */
/* chips, so a screen of options read as one undifferentiated block    */
/* and it was genuinely hard to tell which answer belonged to which    */
/* question. Everything below is spacing — no colours, no new          */
/* components — because that was the whole problem.                    */
/* ------------------------------------------------------------------ */

.q { margin-bottom: 2.9rem; }
.q > h2, .q > .qlabel { margin-bottom: .35rem; }

/* The hint under a question belongs to the question, not to the gap. */
.q .small, .q .tiny { margin-bottom: 1rem; color: var(--ink-3); }

.choices { gap: .7rem; row-gap: .7rem; margin-top: .2rem; }
.choice { padding: .78rem 1.25rem; min-height: 48px; }

.field { margin-top: .2rem; padding: .95rem 1.1rem; min-height: 54px; }

/* Adults/children steppers sat flush against each other on a phone. */
.stepper { margin-top: .5rem; padding: .3rem; }
.stepper + .stepper, .q .grid-2 { gap: 1rem; }

/* The submit is a decision — give it air rather than letting it ride up
   against the last option, where it gets tapped by accident. */
.appmain > .btn-block:last-of-type { margin-top: 2rem; }

/* Reading measure: full-width body text on a wide screen is unreadable
   regardless of how well spaced it is. */
.q .small, .q .tiny, .hero p { max-width: 62ch; }

@media (min-width: 720px) {
  .appmain { padding: 2rem 1.6rem 4rem; }
  .q { margin-bottom: 3.3rem; }
}