/* 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. */

/* The type stack is the site's, not a second one.

   This file carried `'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive`
   for both tokens plus a Google Fonts @import for Comic Neue, so /app/ — and
   native/www/app/app.css, which is a byte-identical copy shipped inside the
   packaged mobile app — rendered a benefits calculator in a joke typeface.
   The stacks below are copied verbatim from src/theme.css so the app and the
   site cannot drift into a third typeface. If you change one, change both.

   The @import is the same one theme.css uses. Offline — inside the packaged
   native app — it simply fails and the stack falls through to Georgia and the
   platform sans, which is the designed fallback, not a broken page. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

/* `hidden` must actually hide — and in the app this file is the ONLY
   stylesheet loaded.

   theme.css carries `[hidden] { display: none !important; }` for exactly this
   reason, with a comment explaining that any author `display` beats the
   user-agent rule. The app shell does not load theme.css. So `#install` below,
   which sets `display: flex`, ignored its own `hidden` attribute and the
   "Install Unclaimed for offline use" bar was pinned across the bottom of
   every screen of the packaged app — inside the app somebody had already
   installed, over the results.

   Nothing errored. The state machine was right and the screen disagreed with
   it, which is the same shape as the account page's duplicate button.

   First rule here so it is impossible to miss, and `!important` because the
   point is to beat every author rule that follows. */
[hidden] { display: none !important; }

: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: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { 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; }

/* Withheld records, drawn the same way as on the web site.

   These were pulsing gradient bars on a descending opacity ramp — the
   loading-skeleton pattern, which promises that the content is on its way.
   It is not on its way; it is behind a paywall, and a reader who waits for a
   shimmer to resolve eventually decides the app is broken. Same idiom as
   src/theme.css now: the shape of the row, a blurred name, ●●●● where a real
   amount would be, every row at full strength, no animation. */
.locked__rows { display: grid; gap: .5rem; margin: 1.1rem 0 1.3rem; }
.locked__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 3.1rem; padding: 0 .9rem; border-radius: .8rem;
  background: rgba(29,36,48,.055);
  box-shadow: inset 0 0 0 1px rgba(29,36,48,.09);
}
.locked__row::before {
  content: ''; display: block; height: .7rem; width: min(58%, 14rem);
  border-radius: 999px; background: rgba(29,36,48,.16); filter: blur(2.5px);
}
.locked__row::after {
  content: '●●●●'; letter-spacing: .18em; font-size: .8rem;
  color: var(--ink-3); white-space: nowrap;
}

/* 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; }
}