/* ============================================================
   JOSEFIN BETA -- ported design system
   Built 2026-08-15 (Day 11). Beta's own stylesheet.

   PROVENANCE -- every rule below is copied, not authored, except the
   one clearly-marked net-new block at the end (section 8):

     1. Design tokens      <- design-reference/josefin-tokens.css (verbatim)
     2. Short-form aliases <- the `:root` block each marketing page authors
                              inline (see josefin-landing/sign-in.html), needed
                              because section 7's CSS references --acc/--ink-12
                              while section 1 defines --color-acc/--color-ink-12
     3. Reset + base       <- josefin-landing/sign-in.html
     4. Buttons            <- josefin-landing/index.html.html (verbatim)
     5. Section/typography <- josefin-landing/index.html.html (verbatim)
     6. Auth + sign-in     <- josefin-landing/sign-in.html (verbatim)
     7. System additions   <- design-reference/josefin-system-additions.css
                              (verbatim, minus the waitlist-modal section --
                              no modal exists in Beta)
     8. Items list         <- NET-NEW. Flagged, not smuggled in. See its own
                              comment for why and what it reuses.

   Nothing here restyles or reinterprets the system. josefin-landing was read
   only -- never written to, never deployed from here.

   NO OUTLOOK: the marketing sign-in page carries a single
   .auth-btn[data-provider="google"]. The only "Outlook" mention anywhere in
   the reference set is prose in josefin-design-system.md §4.6 describing the
   site's older two-button state. Nothing Outlook-related is ported.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS -- verbatim from design-reference/josefin-tokens.css
   ============================================================ */

:root {

  /* ---------- COLOUR -- authored token set ---------- */
  --color-bg:            #FAFAF8;   /* page background ("--bg")              */
  --color-bg-mid:        #F4F2EE;   /* alt section background ("--bg-mid")   */
  --color-bg-deep:       #ECEAE4;   /* deepest neutral ("--bg-deep")         */
  --color-ink:           #0E0D0A;   /* near-black -- body + headings ("--ink")*/
  --color-ink-60:        rgba(14,13,10,0.60); /* body / secondary text       */
  --color-ink-40:        rgba(14,13,10,0.40); /* muted / heading <em>        */
  --color-ink-30:        rgba(14,13,10,0.30); /* faint captions, borders     */
  --color-ink-12:        rgba(14,13,10,0.12); /* strong hairline borders     */
  --color-ink-06:        rgba(14,13,10,0.06); /* lightest hairline borders   */
  --color-acc:           #C49020;   /* gold -- primary CTA, accents ("--acc") */
  --color-acc-lt:        rgba(196,144,32,0.10); /* gold tint bg ("--acc-lt")  */

  /* On-light / on-dark literals */
  --color-white:         #fff;
  --color-hero-bg:       #1C1209;   /* dark hero / sign-in panel / Why CTA   */
  --color-dark-band:     #0E0D0A;
  --color-cream:         #F5F0E8;   /* text on dark backgrounds              */
  --color-marquee-bg:    #F0EBE0;
  --color-nav-bg:        rgba(223,222,219,0.92);
  --color-nav-bg-scrolled: rgba(223,222,219,0.98);
  --color-cream-85:      rgba(245,240,232,0.85);
  --color-cream-78:      rgba(245,240,232,0.78);
  --color-cream-55:      rgba(245,240,232,0.55);
  --color-cream-50:      rgba(245,240,232,0.50);
  --color-cream-40:      rgba(245,240,232,0.40);
  --color-cream-35:      rgba(245,240,232,0.35);

  /* Functional colours */
  --color-link:          #1A73E8;
  --color-wa-green:      #25D366;
  --color-wa-header:     #075E54;
  --color-email-red:     #EA4335;
  --color-error:         #B0341F;   /* form error state (warm red)           */

  /* Multi-actor colour system (homepage demo; kept for token parity) */
  --actor-p1:            #e8a24a;
  --actor-p2:            #c97d60;
  --actor-na:            #7a9e8a;
  --actor-sy:            #5c4630;
  --actor-p1-lt:         rgba(232,162,74,0.12);
  --actor-p2-lt:         rgba(201,125,96,0.12);
  --actor-na-lt:         rgba(122,158,138,0.14);

  /* ---------- TYPOGRAPHY -- families ---------- */
  --font-sans:   'DM Sans', sans-serif;
  --font-serif:  'Cormorant Garamond', serif;
  --font-mono:   monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-3xs:    0.42rem;
  --text-2xs:    0.55rem;
  --text-xs:     0.62rem;
  --text-sm:     0.7rem;    /* small labels, FORM LABELS                     */
  --text-sm-2:   0.72rem;   /* nav links, section eyebrow, help text         */
  --text-base-s: 0.76rem;   /* button labels                                 */
  --text-base:   0.8rem;
  --text-md:     0.88rem;   /* checkbox label                                */
  --text-md-2:   0.9rem;    /* FORM INPUT text                               */
  --text-lg:     0.95rem;   /* auth-sub                                      */
  --text-lg-2:   1rem;      /* default body / .sec-sub                       */
  --text-xl:     1.05rem;
  --text-2xl:    1.2rem;
  --text-3xl:    1.35rem;
  --text-4xl:    1.45rem;
  --text-5xl:    1.5rem;    /* auth logo                                     */
  --text-6xl:    1.7rem;
  --text-7xl:    2.25rem;

  /* Fluid display sizes */
  --text-fluid-hero:      clamp(4rem, 6vw, 7rem);
  --text-fluid-display:   clamp(3rem, 5vw, 5.5rem);
  --text-fluid-h1:        clamp(3rem, 5.5vw, 5.5rem);
  --text-fluid-h1-alt:    clamp(3.2rem, 5.5vw, 4.8rem);
  --text-fluid-sec-h:     clamp(2.6rem, 4vw, 4.2rem);   /* .sec-h -- C4 CANON */
  --text-fluid-auth-h:    clamp(2.6rem, 4vw, 3.6rem);   /* .auth-h            */
  --text-fluid-signin-h:  clamp(2.6rem, 4.2vw, 4rem);   /* .signin-h          */

  /* ---------- FONT WEIGHTS ---------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---------- LINE HEIGHT / LETTER SPACING ---------- */
  --leading-display:  1.0;
  --leading-tight:    1.1;
  --leading-snug:     1.5;
  --leading-normal:   1.7;
  --leading-relaxed:  1.85;
  --leading-loose:    1.9;

  --tracking-display:      -0.03em;
  --tracking-tight:        -0.01em;
  --tracking-button:       0.06em;
  --tracking-nav-cta:      0.05em;
  --tracking-label:        0.1em;    /* form labels, table headers            */
  --tracking-eyebrow:      0.22em;
  --tracking-eyebrow-wide: 0.28em;

  /* ---------- SPACING (ad hoc literals, not a strict scale) ---------- */
  --space-0-25:  0.25rem;
  --space-0-4:   0.4rem;
  --space-0-5:   0.5rem;
  --space-0-55:  0.55rem;
  --space-0-6:   0.6rem;
  --space-0-7:   0.7rem;
  --space-0-75: 0.75rem;
  --space-0-85: 0.85rem;
  --space-0-9:   0.9rem;
  --space-1:     1rem;
  --space-1-25: 1.25rem;
  --space-1-5:   1.5rem;
  --space-1-75: 1.75rem;
  --space-2:     2rem;
  --space-2-25: 2.25rem;
  --space-2-5:   2.5rem;
  --space-3:     3rem;
  --space-3-5:   3.5rem;
  --space-4:     4rem;
  --space-5:     5rem;

  /* ---------- LAYOUT ---------- */
  --max-content:    1100px;
  --max-narrow:     640px;
  --max-form:       480px;
  --max-auth-card:  420px;
  --nav-height:     60px;
  --section-pad-y:  72px;     /* C6 CANON                                     */
  --section-pad-x:  5rem;
  --section-pad-x-mobile: 1.5rem;

  /* ---------- BREAKPOINT (single canonical value, C8) ---------- */
  --bp-mobile:  960px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-xs:    2px;     /* buttons, nav CTAs, FORM INPUTS, notes            */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    10px;
  --radius-2xl:   12px;
  --radius-3xl:   14px;
  --radius-pill:  100px;
  --radius-full:  50%;

  /* ---------- ELEVATION ---------- */
  --shadow-hairline: 0 1px 0 var(--color-ink-06);
  --shadow-card:     0 4px 20px rgba(14,13,10,0.05);
  --shadow-float:    0 16px 48px rgba(14,13,10,0.10);
  --shadow-phone:    0 32px 72px rgba(14,13,10,0.18), 0 0 0 1px rgba(0,0,0,0.1);

  /* ---------- MOTION ---------- */
  --dur-fast:   0.15s;
  --dur-mid:    0.2s;
  --dur-slow:   0.4s;

  /* ---------- INTERACTION STATES ---------- */
  --focus-ring:        2px solid var(--color-acc);
  --focus-ring-offset: 2px;
  --state-disabled-opacity: 0.4;
}


/* ============================================================
   2. SHORT-FORM TOKEN ALIASES

   Section 7's form/interaction CSS and section 6's auth CSS both
   reference short names (--acc, --ink-12, --bg-mid). On the marketing
   site each page authors those in its own inline `:root`; the token
   file catalogues the same values under --color-* long names.

   Aliasing short -> long (rather than rewriting the additions CSS) is
   the approved approach: it keeps section 7 byte-identical to
   design-reference/josefin-system-additions.css, so a future update to
   that file can be dropped in without re-editing it. Values are
   references, not re-typed literals, so the two sets cannot drift.
   ============================================================ */

:root {
  --bg:       var(--color-bg);
  --bg-mid:   var(--color-bg-mid);
  --bg-deep:  var(--color-bg-deep);
  --ink:      var(--color-ink);
  --ink-60:   var(--color-ink-60);
  --ink-40:   var(--color-ink-40);
  --ink-30:   var(--color-ink-30);
  --ink-12:   var(--color-ink-12);
  --ink-06:   var(--color-ink-06);
  --acc:      var(--color-acc);
  --acc-lt:   var(--color-acc-lt);
}


/* ============================================================
   3. RESET + BASE -- verbatim from josefin-landing/sign-in.html
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  background: #FAFAF8;
  color: #0E0D0A;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   3b. [hidden] SUPPORT -- Beta addition, NOT part of the verbatim
   reset above.

   The `hidden` attribute gets its display:none from the USER-AGENT
   stylesheet, which loses to any author-level `display` declaration. So
   `<div class="auth-note" hidden>` stayed visible, because .auth-note
   sets display:flex -- rendering an empty red alert box on every single
   page load of /sign-in. Found on 2026-08-15 by looking at the deployed
   page in a real browser; no typecheck or unit test could have caught it.

   This is the canonical normalize.css fix, and the one place !important
   is correct: it has to outrank arbitrary author `display` values on any
   element that also carries [hidden].
   ------------------------------------------------------------ */
[hidden] { display: none !important; }


/* ============================================================
   4. BUTTONS -- verbatim from josefin-landing/index.html.html
   ============================================================ */

.btn-primary { background: var(--acc); color: #fff; padding: 0.9rem 1.8rem; border-radius: 2px; font-size: 0.76rem; font-weight: 500; text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { font-size: 0.78rem; color: var(--ink-60); text-decoration: none; display: flex; align-items: center; gap: 0.4rem; transition: color 0.15s; }
.btn-ghost:hover { color: var(--ink); }
.btn-cta { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--ink); color: #fff; padding: 1rem 2.25rem; border-radius: 2px; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: opacity 0.15s; }
.btn-cta:hover { opacity: 0.72; }
.btn-cta-ghost { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; color: var(--ink); padding: 1rem 2rem; border-radius: 2px; font-size: 0.76rem; font-weight: 500; text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--ink-30); transition: background 0.15s, border-color 0.15s; }
.btn-cta-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* .btn-primary is an <a> on the marketing site; Beta uses <button> for
   real actions. Normalise the two so a <button class="btn-primary">
   renders identically -- <button> does not inherit font or cursor. */
button.btn-primary,
button.btn-cta,
button.btn-cta-ghost {
  font-family: 'DM Sans', sans-serif;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
button.btn-cta-ghost { border: 1px solid var(--ink-30); }


/* ============================================================
   5. SECTION + TYPOGRAPHY -- verbatim from josefin-landing/index.html.html
   ============================================================ */

.section { padding: 72px 5rem; }
.wrap { max-width: 1100px; margin: 0 auto; }
.sec-eye { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 1rem; font-weight: 500; display: flex; align-items: center; gap: 0.75rem; }
.sec-eye::after { content: ''; flex: 0 0 20px; height: 1px; background: var(--ink-30); }
.sec-eye.acc { color: var(--acc); font-weight: 600; }
.sec-eye.acc::after { background: var(--acc); opacity: 0.3; }
.sec-h { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.6rem, 4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 1rem; }
.sec-h em { font-style: italic; color: var(--ink-40); }
.sec-sub { font-size: 1rem; line-height: 1.85; color: var(--ink-60); max-width: 480px; }

@media (max-width: 960px) {
  .section { padding: 72px 1.5rem; }
}


/* ============================================================
   6. AUTH + SIGN-IN -- verbatim from josefin-landing/sign-in.html
   ============================================================ */

/* -- SHELL -- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .shell { grid-template-columns: 1fr; } .signin-side { display: none; } }

/* Left: gentle credentials */
.auth-side { display: flex; flex-direction: column; padding: 2rem 2.5rem; position: relative; }
.auth-brand { display: flex; align-items: center; justify-content: space-between; }
.auth-logo { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.auth-back { font-size: 0.72rem; color: var(--ink-60); text-decoration: none; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.35rem; transition: color 0.15s; }
.auth-back:hover { color: var(--ink); }
.auth-back::before { content: '\2190'; font-size: 0.9rem; line-height: 1; }

.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.auth-card { width: 100%; max-width: 420px; }

.auth-eye { font-family: 'DM Sans'; font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--acc); font-weight: 600; margin-bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.auth-eye::before { content: ''; width: 22px; height: 1px; background: var(--acc); }

.auth-h { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 1rem; }
.auth-h em { font-style: italic; color: var(--ink-40); }

.auth-sub { font-size: 0.95rem; line-height: 1.7; color: var(--ink-60); margin-bottom: 2.5rem; max-width: 380px; }

.auth-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.5rem; }

.auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: #fff; color: var(--ink); border: 1px solid var(--ink-12); padding: 0.95rem 1.25rem; border-radius: 2px; font-family: 'DM Sans'; font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 0 var(--ink-06); }
.auth-btn:hover { border-color: var(--ink-30); box-shadow: 0 4px 14px -8px rgba(14,13,10,0.18); }
.auth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider { display: flex; align-items: center; gap: 0.85rem; margin: 0.5rem 0 1.25rem; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-30); font-weight: 500; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--ink-12); }

.auth-note { background: var(--acc-lt); border-left: 2px solid var(--acc); padding: 0.85rem 1rem; border-radius: 2px; display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 1.75rem; }
.auth-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.15rem; stroke: var(--acc); }
.auth-note p { font-size: 0.78rem; line-height: 1.55; color: var(--ink); }
.auth-note p b { font-weight: 500; }

.auth-legal { font-size: 0.7rem; line-height: 1.6; color: var(--ink-40); text-align: center; max-width: 340px; margin: 0 auto; }
.auth-legal a { color: var(--ink-60); text-decoration: underline; text-decoration-color: var(--ink-12); text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--ink); }

.auth-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; }
.auth-foot-copy { font-size: 0.65rem; color: var(--ink-30); letter-spacing: 0.04em; }
.auth-foot-links { display: flex; gap: 1.25rem; }
.auth-foot-links a { font-size: 0.7rem; color: var(--ink-40); text-decoration: none; }
.auth-foot-links a:hover { color: var(--ink); }

/* Right: warm assurance side */
.signin-side { background: #1C1209; color: #F5F0E8; padding: 3rem 3.25rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.signin-side::before {
  content: 'J'; position: absolute; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 48vw; line-height: 0.8; color: rgba(196,144,32,0.07); top: -8%; right: -18%; pointer-events: none;
}
.signin-inner { position: relative; z-index: 2; max-width: 480px; }

.signin-eye { font-family: 'DM Sans'; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--acc); font-weight: 600; margin-bottom: 2.5rem; display: inline-flex; align-items: center; gap: 0.75rem; }
.signin-eye::before { content: ''; width: 22px; height: 1px; background: var(--acc); }

.signin-h { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: 1.0; letter-spacing: -0.03em; color: #F5F0E8; margin-bottom: 2rem; }
.signin-h strong { font-weight: 600; font-style: normal; }

.signin-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }
.signin-list li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.55; color: rgba(245,240,232,0.78); }
.signin-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.32rem; stroke: var(--acc); }
.signin-list li b { color: #F5F0E8; font-weight: 500; }

.signin-quote { position: relative; z-index: 2; padding-top: 2rem; border-top: 1px solid rgba(245,240,232,0.10); max-width: 400px; }
.signin-quote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; line-height: 1.55; color: rgba(245,240,232,0.85); margin-bottom: 0.9rem; text-wrap: pretty; }
.signin-quote .cite { display: flex; align-items: center; gap: 0.7rem; }
.signin-quote .cite-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #C49020 0%, #8B6914 100%); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.9rem; color: #fff; }
.signin-quote .cite-meta { font-size: 0.7rem; color: rgba(245,240,232,0.5); letter-spacing: 0.02em; }
.signin-quote .cite-meta b { color: #F5F0E8; font-weight: 500; display: block; }

@media (max-width: 720px) {
  .auth-side { padding: 1.25rem 1.5rem 2rem; }
  .auth-center { padding: 1.5rem 0.5rem; }
  .auth-foot { flex-direction: column-reverse; gap: 1rem; padding-top: 2rem; }
}


/* ============================================================
   7. SYSTEM ADDITIONS -- verbatim from
      design-reference/josefin-system-additions.css, sections 1-2.

      Section 3 of that file (the waitlist modal) is deliberately NOT
      ported: Beta has no modal, and carrying unused CSS invites drift.
      Re-copy it from the reference file if a dialog is ever needed.
   ============================================================ */

/* ------------------------------------------------------------
   7.1 INTERACTION STATES
   ------------------------------------------------------------ */

/* Focus ring -- keyboard users only (:focus-visible). */
.btn-primary:focus-visible,
.btn-cta:focus-visible,
.btn-cta-gold:focus-visible,
.btn-cta-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-outline-dark:focus-visible,
.btn-ghost:focus-visible,
.relief-cta:focus-visible,
.relief-cta-ghost:focus-visible,
.nav-cta:focus-visible,
.nav-cta-gold:focus-visible,
.auth-btn:focus-visible,
.nav-logo:focus-visible,
.nav-links a:focus-visible,
.ft-links a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* On dark backgrounds add a faint cream halo so the ring separates. */
.btn-outline:focus-visible,
.btn-outline-dark:focus-visible,
.relief-cta-ghost:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(245,240,232,0.12);
}

/* Active (pressed) -- a small, quiet dip. No bounce. */
.btn-primary:active,
.btn-cta:active,
.btn-cta-gold:active,
.btn-cta-ghost:active,
.btn-outline:active,
.btn-outline-dark:active,
.relief-cta:active,
.relief-cta-ghost:active,
.nav-cta:active,
.nav-cta-gold:active,
.auth-btn:active {
  transform: translateY(0.5px) scale(0.992);
}

/* Disabled -- <button disabled> and .is-disabled for <a>. */
.btn-primary:disabled,        .btn-primary.is-disabled,
.btn-cta:disabled,            .btn-cta.is-disabled,
.btn-cta-gold:disabled,       .btn-cta-gold.is-disabled,
.btn-cta-ghost:disabled,      .btn-cta-ghost.is-disabled,
.btn-outline:disabled,        .btn-outline.is-disabled,
.btn-outline-dark:disabled,   .btn-outline-dark.is-disabled,
.relief-cta:disabled,         .relief-cta.is-disabled,
.relief-cta-ghost:disabled,   .relief-cta-ghost.is-disabled,
.nav-cta:disabled,            .nav-cta.is-disabled,
.nav-cta-gold:disabled,       .nav-cta-gold.is-disabled,
.auth-btn:disabled,           .auth-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .btn-cta:active, .btn-cta-gold:active,
  .btn-cta-ghost:active, .btn-outline:active, .btn-outline-dark:active,
  .relief-cta:active, .relief-cta-ghost:active, .nav-cta:active,
  .nav-cta-gold:active, .auth-btn:active {
    transform: none;
  }
}

/* ------------------------------------------------------------
   7.2 FORM-INPUT PATTERN
   ------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.field-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.field-label .req {
  color: var(--acc);
  margin-left: 0.15rem;
}

.input,
.textarea,
.select {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink-12);
  border-radius: 2px;
  padding: 0.8rem 0.95rem;
  box-shadow: 0 1px 0 var(--ink-06);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.textarea {
  min-height: 7rem;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-30);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--ink-30);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt);
}

.input:disabled,  .textarea:disabled,  .select:disabled,
.input[readonly], .textarea[readonly] {
  background: var(--bg-mid);
  color: var(--ink-40);
  cursor: not-allowed;
  box-shadow: none;
}

.select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23595852' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
}

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: #fff;
  border: 1px solid var(--ink-30);
  box-shadow: 0 1px 0 var(--ink-06);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.check input[type="checkbox"] { border-radius: 2px; }
.check input[type="radio"]    { border-radius: 50%; }
.check input:hover            { border-color: var(--ink); }
.check input:checked {
  background: var(--acc);
  border-color: var(--acc);
}
.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'><path d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.check input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px #fff;
}
.check input:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.field-help {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-40);
}
.field-error {
  font-size: 0.72rem;
  line-height: 1.5;
  color: #B0341F;
}
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: #B0341F;
}
.field.has-error .input:focus,
.field.has-error .textarea:focus,
.field.has-error .select:focus {
  box-shadow: 0 0 0 3px rgba(176,52,31,0.12);
}

.form {
  max-width: 480px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 960px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}


/* ============================================================
   8. ITEMS LIST -- NET-NEW, flagged explicitly

   The design system has no table, list, or data-row component: §4.3 of
   josefin-design-system.md documents cards only, notes their radii vary
   (4/6/10/12px), and explicitly instructs "pick one per new component."
   So this block is composed rather than copied -- but every value in it
   is a system token or an existing component's value, not a new
   invention:

     - radius        -> --radius-md (6px), the one chosen per §4.3
     - borders/bg    -> --ink-12 / #fff / --shadow-hairline, same as .input
     - label register-> .field-label's 0.7rem/0.1em/uppercase/--ink-60
     - meta text     -> --text-sm-2 (0.72rem) / --ink-60, as .field-help
     - status pills  -> --acc-lt tint + --acc, same pairing as .auth-note

   Flagged in the build record as the one place today's CSS is not a
   direct port, per the "flag ambiguity rather than improvising"
   instruction.
   ============================================================ */

/* Error variant of the existing .auth-note component (section 6). Kept here
   rather than inline in section 6 so that section stays a truthful verbatim
   copy. Recolours only -- same box, padding, radius and layout as .auth-note,
   swapping the gold tint/rule for --color-error. */
.auth-note.is-error {
  background: rgba(176,52,31,0.06);
  border-left-color: var(--color-error);
}
.auth-note.is-error svg { stroke: var(--color-error); }
.auth-note.is-error p b { color: var(--color-error); }

/* Links inside a note (e.g. the contact link in a sign-in error). Reuses
   .auth-legal a's underline treatment from section 6 rather than inventing a
   link style, and inherits colour via `currentColor` so the same rule works in
   both the default gold note and the .is-error variant. Without this an <a>
   here would render browser-default blue against the warm palette. */
.auth-note p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-underline-offset: 2px;
}
.auth-note p a:hover { text-decoration-color: currentColor; }
.auth-note p a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.app-head { display: flex; align-items: center; justify-content: space-between; padding: 2rem 5rem 0; }
.app-head-right { display: flex; align-items: center; gap: 1.5rem; }
.app-who { font-size: 0.72rem; color: var(--ink-60); letter-spacing: 0.04em; }
.app-who b { font-weight: 500; color: var(--ink); }

.items-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 2.5rem; }

.item-card {
  background: #fff;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.item-main { flex: 1; min-width: 0; }
.item-title { font-size: 1rem; font-weight: 400; color: var(--ink); line-height: 1.4; margin-bottom: 0.5rem; }
.item-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-60); }
.item-meta span b { font-weight: 500; color: var(--ink); }

.item-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 0.5rem;
}

.pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--acc-lt);
  color: var(--acc);
  white-space: nowrap;
}
.pill.is-quiet { background: var(--color-ink-06); color: var(--ink-60); }
.pill.is-done  { background: rgba(122,158,138,0.16); color: #4b6b58; }

.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }

.item-status { font-size: 0.72rem; color: var(--ink-40); line-height: 1.5; text-align: right; max-width: 180px; }
.item-status.is-error { color: var(--color-error); }
.item-status a { color: var(--ink-60); }

.empty-note {
  background: var(--bg-mid);
  border: 1px solid var(--ink-06);
  border-radius: var(--radius-md);
  padding: 2rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-60);
  margin-top: 2.5rem;
}

@media (max-width: 960px) {
  .app-head { padding: 1.5rem 1.5rem 0; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .item-card { flex-direction: column; gap: 1rem; }
  .item-side { align-items: flex-start; }
  .item-status { text-align: left; }
}


/* ============================================================
   9. APP TABS -- NET-NEW, flagged explicitly (2026-09-03, homeShell
   reconciliation -- CLAUDE.md, the /home vs /items vs /household
   nav-shell inconsistency investigation)

   The persistent post-onboarding nav bar (Home | Upcoming | All items |
   Household) has no existing equivalent anywhere in this design system --
   .app-head (section 8) has only ever carried a single link inside
   .app-head-right, never a multi-tab row. Composed from existing tokens
   only, not invented, matching section 8's own precedent for a genuinely
   new component:

     - typography -> --text-sm-2 (0.72rem), the token already earmarked
                     "nav links, section eyebrow, help text" in section 1
     - colours    -> --ink-40 (inactive) / --ink (active text) / --acc
                     (active underline) -- the same trio .sec-eye already
                     uses for its own active/accent state
     - spacing    -> 5rem / 1.5rem side padding, matching .app-head's own
                     responsive breakpoint values exactly, so the tab row's
                     edges align with the header directly above it
     - motion     -> --dur-fast, the same transition speed used by every
                     other hover/focus state in this file
     - focus ring -> the same 2px solid var(--acc) / 2px offset pattern
                     section 7.1 already applies to every other
                     interactive element
   ============================================================ */

.app-tabs { display: flex; gap: 2rem; padding: 0 5rem; border-bottom: 1px solid var(--ink-06); }
.app-tabs .tab { font-size: var(--text-sm-2); color: var(--ink-40); text-decoration: none; padding: 0.9rem 0; border-bottom: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.app-tabs .tab:hover { color: var(--ink); }
.app-tabs .tab.active { color: var(--ink); border-color: var(--acc); }
.app-tabs .tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (max-width: 960px) {
  .app-tabs { padding: 0 1.5rem; gap: 1.25rem; overflow-x: auto; }
  .app-tabs .tab { white-space: nowrap; }
}

/* ============================================================
   9a. APP SUB-TABS  (/household hub: People | Children | Preferences)
   ============================================================

   A SECOND, visually subordinate nav row, rendered directly beneath
   section 9's .app-tabs on the three /household pages only. Deliberately
   its own classes (.app-subtabs/.subtab) rather than a restyle or a
   modifier of .app-tabs/.tab -- that row is shared by all four
   post-onboarding pages and must not change; a shared-class edit is
   exactly what silently restyled an unrelated "Sign out" button during
   the 2026-09-04 button-positioning work.

   Reads as one level down from section 9 through four deliberate steps,
   all composed from existing tokens (nothing invented):

     - typography -> --text-sm (0.7rem) vs the parent row's --text-sm-2
                     (0.72rem): a genuine step down, small enough to
                     register as subordinate without becoming fine print
     - weight     -> the active tab is marked by WEIGHT + colour only,
                     with a 1px underline (vs the parent's 2px), so the
                     two rows never read as competing for the same
                     "which page am I on" job
     - ground     -> --bg-mid, a faint fill separating it from the white
                     page body below, instead of a second hard border
                     stacked under section 9's own bottom border
     - spacing    -> same 5rem / 1.5rem responsive side padding as
                     .app-tabs and .app-head, so all three rows' left
                     edges align exactly; tighter vertical padding
                     (0.55rem vs 0.9rem) reinforces the hierarchy
   ============================================================ */

.app-subtabs { display: flex; gap: 1.5rem; padding: 0 5rem; background: var(--bg-mid); border-bottom: 1px solid var(--ink-06); }
.app-subtabs .subtab { font-size: var(--text-sm); color: var(--ink-40); text-decoration: none; padding: 0.55rem 0; border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.app-subtabs .subtab:hover { color: var(--ink); }
.app-subtabs .subtab.active { color: var(--ink); font-weight: 500; border-color: var(--acc); }
.app-subtabs .subtab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (max-width: 960px) {
  .app-subtabs { padding: 0 1.5rem; gap: 1.1rem; overflow-x: auto; }
  .app-subtabs .subtab { white-space: nowrap; }
}