/* ===========================================================================
   SHER — Member intake (application) page.
   Bespoke phone-first UI. Colours/type come from tokens.css — no invented theme.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #E7E0D2; color: var(--ink);
       font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

.intake {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  background: var(--parchment); display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(20,16,12,.12);
}

.top-nav { background: var(--midnight); padding: 1.05rem 1.15rem 1rem;
           display: flex; justify-content: center; align-items: center; position: relative; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wordmark { font-family: var(--font-serif); font-weight: 400; letter-spacing: .4em;
            text-transform: uppercase; color: var(--linen); font-size: 1.05rem; padding-left: .4em; }
.nav-back { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
            color: var(--fog); font-size: 1.3rem; line-height: 1; text-decoration: none;
            cursor: pointer; user-select: none; }
.nav-back.hide { visibility: hidden; }
.tricolour { height: 3px; width: 56px; display: flex; border-radius: 2px; overflow: hidden; }
.tricolour span { flex: 1; }
.tricolour span:nth-child(1) { background: var(--ember); }
.tricolour span:nth-child(2) { background: var(--linen); }
.tricolour span:nth-child(3) { background: var(--fern); }

.progress { height: 2px; background: rgba(122,104,88,.18); }
.progress > i { display: block; height: 100%; width: 0; background: var(--ember);
                transition: width .3s cubic-bezier(.4,0,.2,1); }

.screen { flex: 1; overflow-y: auto; padding: 1.9rem 1.5rem 1.4rem; display: flex; flex-direction: column; }
.eyebrow-s { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
h2.s { font-family: var(--font-serif); font-weight: 400; font-size: 1.95rem; line-height: 1.1;
       color: var(--midnight); margin: 0 0 .5rem; text-wrap: balance; }
.sub { font-size: .92rem; color: var(--bark); line-height: 1.5; margin: 0 0 1.3rem;
       text-wrap: balance; max-width: 32ch; }
.qmeta { font-size: .75rem; color: var(--muted); margin: -.7rem 0 1rem; letter-spacing: .02em; }
.qmeta.full { color: var(--ember); }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { padding: .62rem 1rem; border: 1px solid var(--rule); border-radius: 22px; background: var(--chalk);
        font-size: .92rem; color: var(--bark); cursor: pointer; line-height: 1.1; user-select: none;
        transition: all .15s ease; }
.chip:active { transform: scale(.97); }
.chip.sel { background: var(--midnight); border-color: var(--midnight); color: var(--linen); }
.chip.excl { font-style: italic; color: var(--muted); }
.chip.excl.sel { background: var(--dusk); border-color: var(--dusk); color: var(--linen); }
.chip.more { border-style: dashed; color: var(--ember); border-color: var(--tallow); }
.chip.more.sel { background: var(--chalk); color: var(--ember); border-color: var(--ember); border-style: solid; }
.chip.quiet.sel { background: var(--forest); border-color: var(--forest); color: var(--linen); }
.chip.dis { opacity: .4; cursor: not-allowed; }

.grp-lab { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
           margin: .2rem 0 .65rem; display: flex; align-items: center; gap: .6rem; }
.grp-lab::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.field { margin-top: 1rem; }
.field > label { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--muted); margin-bottom: .4rem; }
.field > label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.inp { width: 100%; background: var(--chalk); border: 1px solid var(--rule); border-radius: 8px;
       padding: .8rem .85rem; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); }
.inp::placeholder { color: #b3a894; }
.inp-phone { display: flex; align-items: center; background: var(--chalk); border: 1px solid var(--rule);
             border-radius: 8px; overflow: hidden; }
.inp-phone .cc { padding: .8rem .7rem; background: var(--linen); color: var(--bark); border-right: 1px solid var(--rule); }
.inp-phone input { flex: 1; border: none; background: transparent; padding: .8rem .85rem;
                   font-size: 1rem; font-family: var(--font-sans); outline: none; }
.hint { font-size: .76rem; color: var(--muted); margin-top: .4rem; line-height: 1.45; text-wrap: pretty; }
.err { font-size: .82rem; color: #8B3524; margin-top: .5rem; min-height: 1rem; text-wrap: balance; }

.otp-input { width: 100%; text-align: center; letter-spacing: .5em; font-size: 1.8rem;
             font-family: var(--font-serif); color: var(--midnight); background: var(--chalk);
             border: 1px solid var(--rule); border-radius: 10px; padding: .7rem; margin: .4rem 0 1rem; }
.resend { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); }
.resend a { color: var(--ember); cursor: pointer; text-decoration: none; }
.resend a.wait { color: #c3b9a4; pointer-events: none; }
.dev-code { margin-top: .8rem; font-size: .74rem; color: var(--turmeric); text-align: center; }

.dial-wrap { position: relative; height: 230px; margin: .2rem 0 .4rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent); }
.dial-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; text-align: center;
               padding: 90px 0; scrollbar-width: none; }
.dial-scroll::-webkit-scrollbar { display: none; }
.dial-scroll .yr { height: 50px; line-height: 50px; scroll-snap-align: center;
                   font-family: var(--font-serif); color: var(--bark); font-size: 1.35rem;
                   cursor: pointer; opacity: .5; transition: all .2s; }
.dial-scroll .yr.sel { color: var(--midnight); font-size: 1.95rem; font-weight: 500; opacity: 1; }
.dial-band { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
             width: 170px; height: 52px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
             pointer-events: none; }

.serve-block { padding: 1rem 0; border-top: 1px solid var(--rule); }
.serve-block:first-of-type { border-top: none; padding-top: .2rem; }
.serve-block .sb-h { font-family: var(--font-serif); font-size: 1.3rem; color: var(--midnight); margin: 0 0 .6rem; }
.subrow { margin-top: .8rem; }
.subrow .sr-lab { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.notetag { display: inline-block; margin-top: .5rem; font-size: .72rem; color: var(--muted);
           background: var(--linen); border-radius: 4px; padding: .2rem .5rem; }

.grow { flex: 1; min-height: .8rem; }
.footer { padding: .9rem 1.3rem 1.3rem; background: linear-gradient(to top, var(--parchment) 70%, transparent);
          display: flex; gap: .7rem; align-items: center; }
.btn { border: none; border-radius: 10px; padding: .95rem; font-family: var(--font-sans); font-size: 1rem;
       font-weight: 600; cursor: pointer; letter-spacing: .02em; flex: 1; }
.btn-primary { background: var(--ember); color: #fff; }
.btn-primary:disabled { background: #dcc6b2; cursor: default; }
.btn-back { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); font-weight: 500;
            padding: .95rem .6rem; cursor: pointer; font-family: var(--font-sans); font-size: .95rem; }
.foot-note { font-size: .74rem; color: var(--muted); text-align: center; margin-top: .7rem;
             line-height: 1.45; text-wrap: balance; }

.centered { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.centered h2.s { font-size: 2.4rem; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--rule); border-top-color: var(--ember);
           border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }