/* ============================================================================
   niswosakit · Issue 02 — The Real Raise
   Wages in Woonsocket against the price of ordinary things.
   Built on the brand tokens (Pages/css/brand.css): near-black ground,
   off-white text, green accent. Architecture borrows from Issue 01 (vote):
   the fluid type scale, spacing, masthead, green infooter, footer.
   Charts are hand-drawn SVG (charts.js) — no third-party library.
   ============================================================================ */

@layer tokens, base, components, utilities;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* semantic aliases onto the brand palette (brand.css is the source of truth) */
    --bg:    var(--ink);      /* near-black ground */
    --fg:    var(--paper);    /* off-white text */
    --fg-soft: #C7C4BC;       /* secondary text, a step down from paper */
    --accent: var(--green);   /* this lens runs green */

    /* chart line roles (semantic) */
    --c-pay:   var(--green);  /* the paycheck: the reader's line */
    --c-state: var(--fg-soft);/* Rhode Island */
    --c-nation:var(--faint);  /* United States */
    --c-home:  var(--red);    /* a house */
    --c-power: var(--aqua);   /* the electric bill */
    --c-sub:   var(--pink);   /* streaming */
    --c-cpi:   #8f8b82;       /* inflation break-even (dashed) */

    /* fluid type — clamp() on a REM scale */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
    --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
    --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.75rem);
    --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.75rem);
    --step-5:  clamp(2.49rem, 1.65rem + 4.20vw, 5.25rem);
    --step-6:  clamp(3.00rem, 1.70rem + 6.50vw, 7.00rem);

    /* space scale */
    --space-1: 0.375rem;  --space-2: 0.625rem;  --space-3: 1rem;
    --space-4: 1.5rem;    --space-5: 2.5rem;    --space-6: 4rem;   --space-7: 6rem;

    --radius: 14px;
    --radius-lg: 26px;
    --measure: 64ch;
    --ease: cubic-bezier(.2,.7,.2,1);
    --dur: 240ms;
  }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding: clamp(var(--space-4), 5vw, var(--space-7)) clamp(var(--space-3), 5vw, var(--space-6));
    padding-bottom: calc(clamp(var(--space-4), 5vw, var(--space-7)) + var(--infooter-h, 4.75rem));
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
  }

  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.18em; }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ------------------------------------------------------------ components -- */
@layer components {
  .wrap { width: 100%; max-width: 78ch; margin-inline: auto; display: flex; flex-direction: column; flex: 1 0 auto; }
  .prose { max-width: var(--measure); color: var(--fg-soft); }

  /* mono label helper: the forensic voice (caps, tracked, light) */
  .mono { font-family: var(--font-mono); font-weight: 300; text-transform: uppercase;
          letter-spacing: .14em; font-size: var(--step--1); color: var(--muted); }
  .num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* masthead */
  .masthead { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
              padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
  .wordmark { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
              font-size: var(--step-2); text-decoration:none; color: var(--fg); }
  .issue-tag { color: var(--muted); font-family: var(--font-mono); font-weight: 300;
               font-size: var(--step--1); letter-spacing:.12em; text-transform: uppercase; }
  @media (max-width: 560px) {
    .masthead { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  }

  /* hero */
  .hero { margin: var(--space-6) 0 var(--space-6); }
  .hero .eyebrow { margin-bottom: var(--space-3); }
  .hero h1 {
    font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
    font-size: var(--step-6); line-height: .92; letter-spacing: 0; text-wrap: balance;
    margin: 0;
  }
  .hero .lead { color: var(--fg-soft); font-size: var(--step-1); margin-top: var(--space-4);
                max-width: var(--measure); }
  .hero .lead strong { color: var(--fg); font-weight: 700; }

  /* section rhythm */
  section { padding-block: var(--space-6); border-top: 1px solid var(--line); }
  .section-head { margin-bottom: var(--space-4); }
  .section-head h2 { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
                     font-size: var(--step-3); line-height: 1; letter-spacing: .005em; }
  .section-head .deck { color: var(--fg-soft); margin-top: var(--space-3); max-width: var(--measure); }

  /* chart card */
  .chart { margin-top: var(--space-4); }
  .chart svg { display:block; width:100%; height:auto; overflow: visible; }
  .chart-figure { margin: 0; }
  .chart figcaption, .source {
    font-family: var(--font-mono); font-weight: 300; text-transform: uppercase; letter-spacing: .12em;
    font-size: var(--step--1); color: var(--faint); margin-top: var(--space-3); line-height: 1.5;
  }
  .source a { color: var(--muted); }
  .note { color: var(--muted); font-size: var(--step--1); margin-top: var(--space-3); max-width: var(--measure); }

  /* legend */
  .legend { display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
  .legend span { display:inline-flex; align-items:center; gap:.5em; font-family: var(--font-mono);
                 font-weight:300; text-transform:uppercase; letter-spacing:.1em; font-size: var(--step--1);
                 color: var(--fg-soft); }
  .legend i { width: 1.4em; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 2px; }
  .legend i.dash { border-top-style: dashed; }

  /* the big nominal-vs-real stat */
  .stat { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,16rem),1fr));
          gap: var(--space-4); margin: var(--space-5) 0 var(--space-4); }
  .stat .cell { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
  .stat .cell.hot { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
  .stat .big { font-family: var(--font-cond); font-weight: 900; font-size: var(--step-6); line-height:.9;
               letter-spacing:0; font-variant-numeric: tabular-nums; }
  .stat .cell.real .big { color: var(--green); }
  .stat .k { display:block; margin-top: var(--space-2); }

  /* subscription bars */
  .bars { margin-top: var(--space-4); display:grid; gap: var(--space-3); }
  .bar-row { display:grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); align-items:center; }
  .bar-row .who { font-family: var(--font-mono); font-weight: 300; text-transform: uppercase;
                  letter-spacing: .08em; font-size: var(--step--1); color: var(--fg-soft); }
  .bar-track { position: relative; }
  .bar { height: 10px; border-radius: 2px; background: var(--c-sub); }
  .bar.under { background: var(--muted); }
  .bar-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step--1);
             color: var(--fg-soft); margin-top: .3em; display:block; }
  .bar-infl { position:absolute; top:-4px; bottom:-1.4em; width: 0; border-left: 1px dashed var(--c-cpi); }
  .bar-infl span { position:absolute; top:-1.3em; left:.4em; white-space:nowrap; font-family: var(--font-mono);
                   font-weight:300; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color: var(--c-cpi); }
  @media (max-width: 560px) { .bar-row { grid-template-columns: 6.5rem 1fr; } }

  /* footer / trust */
  .site-footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top:1px solid var(--line);
                 color: var(--muted); font-size: var(--step--1); display:grid; gap: var(--space-3);
                 line-height: 1.6; }
  .site-footer strong { color: var(--fg-soft); }
  .site-footer a { color: var(--fg-soft); }
  .site-footer .issue-tag { color: var(--faint); }
}

/* ------------------------------------------------------------- utilities -- */
@layer utilities {
  .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}

/* ------------------------------------------------ infooter (full-bleed green) */
/* Ported from Issue 01 (vote). Palette-independent: green #5FFF78, black ink.
   Collapsed = slim green strip with a nudging arrow; click opens the panel. */
@layer components {
  :root { --infooter-h: 4.75rem; }

  .infooter {
    --if-green:    #5FFF78;
    --if-ink:      #000;
    --if-ink-soft: color-mix(in srgb, #000 62%, transparent);
    --if-line:     color-mix(in srgb, #000 22%, transparent);
    --if-hover:    color-mix(in srgb, #000 10%, transparent);

    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: flex; flex-direction: column;
    padding: 0; border: 0;
    height: var(--infooter-h);
    background: var(--if-green); color: var(--if-ink);
    overflow: hidden;
    box-shadow: 0 -22px 46px color-mix(in srgb, #000 10%, transparent);
    transition: height .5s var(--ease);
    will-change: height;
  }
  .infooter.is-open { height: 100vh; height: 100dvh; }

  .infooter__bar {
    flex: none; height: var(--infooter-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    width: 100%; max-width: 78ch; margin-inline: auto;
    padding-inline: clamp(var(--space-3), 5vw, var(--space-6));
  }
  .infooter__ask { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; }

  .infooter__toggle {
    flex: none; width: 3rem; height: 3rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--if-ink); background: transparent; border: 2px solid var(--if-ink);
    cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .infooter__toggle:hover { background: var(--if-hover); transform: translateY(-1px); }
  .infooter__arrow { display: block; animation: if-nudge 2.6s var(--ease) infinite; }
  .infooter.is-open .infooter__arrow { animation: none; transform: rotate(180deg); }
  @keyframes if-nudge {
    0%{transform:translateY(0)} 8%{transform:translateY(4px)} 16%{transform:translateY(0)}
    24%{transform:translateY(4px)} 32%{transform:translateY(0)} 100%{transform:translateY(0)}
  }

  .infooter__panel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; justify-content: center;
    width: 100%; max-width: 78ch; margin-inline: auto;
    padding: var(--space-4) clamp(var(--space-3), 5vw, var(--space-6)) var(--space-6);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .infooter.is-open .infooter__panel { opacity: 1; visibility: visible; }
  .infooter__panel > * + * { margin-top: var(--space-3); }
  .infooter__eyebrow { display: inline-flex; align-items: center; gap: .55em; font-weight: 600;
    color: var(--if-ink-soft); font-family: var(--font-mono); font-size: var(--step--1);
    text-transform: uppercase; letter-spacing: .1em; }
  .infooter__eyebrow .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--if-ink); }
  .infooter__h { font-size: var(--step-2); line-height: 1.05; max-width: 30ch; font-weight: 700; letter-spacing: -0.01em; }
  .infooter__tiers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .infooter .tier {
    display: inline-flex; align-items: center; justify-content: center; min-width: 4.25rem;
    padding: .7em 1.15em; cursor: pointer; text-decoration: none; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--if-ink);
    background: transparent; border: 2px solid var(--if-ink); border-radius: 999px;
    transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
  }
  .infooter .tier:hover { background: var(--if-ink); color: var(--if-green); transform: translateY(-1px); }
  .infooter__soon { font-size: var(--step--1); color: var(--if-ink-soft); }
  .infooter :focus-visible { outline: 2px solid var(--if-ink); outline-offset: 3px; }
  @media (max-width: 560px) {
    .infooter__h { font-size: var(--step-3); }
    .infooter__ask { font-size: var(--step-0); }
  }
}