/* Unemployed NYC components. Generated bundle: tokens + components. Edit design-system/src and rebuild. */
/* Unemployed NYC tokens. Generated by design-system/scripts/build.mjs from tokens.source.json. Do not edit. */
:root {
  --white: #FFFFFF;
  --spruce-25: #F2F6F5;
  --spruce-50: #E2F0EC;
  --spruce-75: #E4EEEB;
  --spruce-100: #E4ECE9;
  --spruce-150: #BFE8DD;
  --spruce-200: #D2DEDA;
  --spruce-250: #BCCFCA;
  --spruce-300: #72D3C1;
  --spruce-350: #9DB2AD;
  --spruce-400: #31A992;
  --spruce-450: #7C8E89;
  --spruce-500: #088268;
  --spruce-550: #607773;
  --spruce-600: #0A6658;
  --spruce-650: #435759;
  --spruce-700: #2F4A44;
  --spruce-750: #2B3E3B;
  --spruce-800: #123F37;
  --spruce-825: #223331;
  --spruce-850: #153430;
  --spruce-875: #122A26;
  --spruce-900: #162624;
  --spruce-925: #0B1F1C;
  --spruce-950: #0E1A19;
  --gold-50: #FBF0D9;
  --gold-300: #F0BE4A;
  --gold-500: #BD891C;
  --gold-600: #B47400;
  --gold-800: #8A5800;
  --gold-950: #2E2814;
  --violet-400: #8D80CA;
  --violet-600: #786AB9;
  --red-50: #FBEAEE;
  --red-300: #F48FA1;
  --red-600: #B3264A;
  --red-950: #36191F;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 72px;
  --space-20: 80px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 50%;
  --content-width: 640px;
  --gutter: 16px;
  --tap-target: 44px;
  --breakpoint-md: 720px;
  --container-md: 560px;
  --border-hair: 1px;
  --border-strong: 1.5px;
  --border-heavy: 2px;
  --focus-ring: 3px;
  --text-xs: 13px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-4xl: 52px;
  --text-amount-min: 56px;
  --text-amount-max: 128px;
  --font-display: "Gabarito", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root, [data-theme="light"] {
  --bg: var(--spruce-25);
  --surface: var(--white);
  --wash: var(--spruce-50);
  --ink: var(--spruce-875);
  --ink-2: var(--spruce-700);
  --muted: var(--spruce-650);
  --line: var(--spruce-200);
  --outline: var(--spruce-450);
  --grid: var(--spruce-100);
  --accent: var(--spruce-600);
  --on-accent: var(--white);
  --data-1: var(--spruce-500);
  --data-2: var(--violet-600);
  --on-data: var(--white);
  --limit: var(--gold-600);
  --limit-ink: var(--gold-800);
  --limit-wash: var(--gold-50);
  --tag: var(--spruce-800);
  --on-tag: var(--spruce-25);
  --error: var(--red-600);
  --error-wash: var(--red-50);
  --card-border: var(--line);
  --tear-line: #728183;
  --link-line: #509187;
  --chart-area: #E6F3F0;
  --tick-week: #98ADA9;
  --tick-day: #C39033;
  --tick-quiet: #728183;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--spruce-950);
    --surface: var(--spruce-900);
    --wash: var(--spruce-850);
    --ink: var(--spruce-75);
    --ink-2: var(--spruce-250);
    --muted: var(--spruce-350);
    --line: var(--spruce-750);
    --outline: var(--spruce-550);
    --grid: var(--spruce-825);
    --accent: var(--spruce-300);
    --on-accent: var(--spruce-925);
    --data-1: var(--spruce-400);
    --data-2: var(--violet-400);
    --on-data: var(--spruce-925);
    --limit: var(--gold-500);
    --limit-ink: var(--gold-300);
    --limit-wash: var(--gold-950);
    --tag: var(--spruce-150);
    --on-tag: var(--spruce-950);
    --error: var(--red-300);
    --error-wash: var(--red-950);
    --card-border: var(--surface);
    --tear-line: #7B8F8B;
    --link-line: #549C8F;
    --chart-area: #1B3E38;
    --tick-week: #556C67;
    --tick-day: #9C751E;
    --tick-quiet: #7B8F8B;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: var(--spruce-950);
  --surface: var(--spruce-900);
  --wash: var(--spruce-850);
  --ink: var(--spruce-75);
  --ink-2: var(--spruce-250);
  --muted: var(--spruce-350);
  --line: var(--spruce-750);
  --outline: var(--spruce-550);
  --grid: var(--spruce-825);
  --accent: var(--spruce-300);
  --on-accent: var(--spruce-925);
  --data-1: var(--spruce-400);
  --data-2: var(--violet-400);
  --on-data: var(--spruce-925);
  --limit: var(--gold-500);
  --limit-ink: var(--gold-300);
  --limit-wash: var(--gold-950);
  --tag: var(--spruce-150);
  --on-tag: var(--spruce-950);
  --error: var(--red-300);
  --error-wash: var(--red-950);
  --card-border: var(--surface);
  --tear-line: #7B8F8B;
  --link-line: #549C8F;
  --chart-area: #1B3E38;
  --tick-week: #556C67;
  --tick-day: #9C751E;
  --tick-quiet: #7B8F8B;
  color-scheme: dark;
}

/* unemployed.nyc components. Every color is a token (the build fails on a raw color). Sizes, spaces, radii and borders come from tokens too, except a few fixed shapes: the tag's cut corner and hole, tick bars.
   Class prefix: uny-. Elements: uny-block__part. States: is-*. Variants: uny-block--variant. */

/* ---------- Base (low specificity so the theme can override) ---------- */
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--text-md); line-height: 1.6; font-variant-numeric: tabular-nums; margin: 0; }
:where(.uny-scope, body) :where(h1, h2, h3) { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
:where(.uny-scope, body) :where(a) { color: var(--accent); text-decoration-thickness: var(--border-strong); text-underline-offset: 3px; text-decoration-color: var(--link-line); }
:where(.uny-scope, body) :where(a:hover) { text-decoration-color: var(--accent); text-decoration-thickness: var(--border-heavy); }
:where(.uny-scope, body) :where(:focus-visible) { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Layout ---------- */
.uny-page { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--space-7) var(--space-16); display: grid; gap: var(--space-14); }
.uny-col { max-width: var(--content-width); }

/* Containers. Components size from the space they sit in, not from the screen, so a block looks right
   in the column, a sidebar or a preview card alike (F, October 16, 2026: "our style code is not dynamic").
   The column is a container for the blocks in it; the tag and each section are containers for their parts.
   The roomy layout starts when that space is at least 560px wide (container-md). Query conditions
   can't read variables, so 560px is written out below. */
:where(.wp-block-post-content, .is-root-container, .uny-page, .uny-scope) { container-type: inline-size; }
.uny-tag, .uny-card { container-type: inline-size; }
.uny-stack { display: grid; gap: var(--space-3); }
.uny-title { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4.5vw + 1rem, var(--text-4xl)); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.uny-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--muted); }

/* ---------- Wordmark ---------- */
.uny-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; min-height: var(--tap-target); }
.uny-wordmark svg { width: 22px; height: 22px; flex: none; }
.uny-wordmark .uny-mark { fill: var(--tag); }

/* ---------- Header ---------- */
.uny-header { border-bottom: var(--border-hair) solid var(--line); background: var(--bg); }
.uny-header__in { box-sizing: border-box; max-width: calc(var(--content-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; }
.uny-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1) var(--space-5); }
.uny-nav a { display: inline-flex; align-items: center; min-height: var(--tap-target); font-weight: 700; font-size: var(--text-sm); color: var(--ink); text-decoration: none; }
.uny-nav a:hover, .uny-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.uny-menu-btn { display: none; }
@media (max-width: 719px) {
  .uny-menu-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); padding-inline: var(--space-3); font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--ink); background: var(--surface); border: var(--border-hair) solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; }
  .uny-header__in { flex-wrap: wrap; }
  .uny-nav { flex-basis: 100%; display: none; padding-bottom: var(--space-3); }
  .uny-nav.is-open { display: block; }
  .uny-nav ul { flex-direction: column; }
  .uny-nav li + li { border-top: var(--border-hair) solid var(--line); }
}

/* ---------- Footer ---------- */
.uny-footer { border-top: var(--border-hair) solid var(--line); margin-top: var(--space-12); }
.uny-footer__in { box-sizing: border-box; max-width: calc(var(--content-width) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-12); display: grid; gap: var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.uny-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.uny-footer a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.uny-footer__fine { color: var(--muted); max-width: var(--content-width); margin: 0; }

/* ---------- Price tag: the money answer, once per page ---------- */
.uny-tag { position: relative; color: var(--on-tag); padding: var(--space-5) var(--space-6) var(--space-6) var(--space-8); display: grid; gap: var(--space-2); max-width: var(--content-width); box-sizing: border-box;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); background: var(--tag); }
.uny-tag::before { content: ""; position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--bg); }
.uny-tag__label { font-family: var(--font-text); font-size: var(--text-md); font-weight: 700; line-height: 1.3; color: var(--on-tag); margin: 0; }
.uny-tag__amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(var(--text-amount-min), 28cqi, var(--text-amount-max)); line-height: 0.9; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); font-variant-numeric: proportional-nums; }
.uny-tag__unit { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 700; letter-spacing: 0; }
.uny-tag__lead { font-size: var(--text-lg); font-weight: 700; line-height: 1.35; text-wrap: pretty; margin: 0; }
.uny-tag__note { font-size: var(--text-md); line-height: 1.4; margin: 0; }
.uny-tag__caption { font-size: var(--text-sm); font-weight: 700; line-height: 1.4; margin: 0; }

/* ---------- Ticks: time you can count ---------- */
.uny-ticks { display: flex; flex-wrap: wrap; gap: 2px; align-items: end; }
.uny-ticks i { width: 3px; height: 12px; border-radius: 1px; background: var(--tick-quiet); }
.uny-ticks i.is-break { margin-right: 7px; }
/* On the tag, the 26 weeks run the full width like a ruler, so the time reads as the length of the tag. */
.uny-ticks--tag { gap: 3px; margin-top: var(--space-1); flex-wrap: nowrap; justify-content: space-between; }
.uny-ticks--tag i.is-break { margin-right: var(--space-5); }
.uny-ticks--tag i { width: 4px; height: 18px; background: var(--tick-week); }
.uny-ticks--day i { background: var(--tick-day); }

/* ---------- Section: one heading, one visual, one takeaway ----------
   Open, not boxed: the visual inside carries the structure, and space separates sections.
   Spacing groups by meaning: the heading sits tight on its hint, then a bigger step to the visual and the takeaway. */
.uny-card { --uny-gap: var(--space-5); display: grid; gap: var(--uny-gap); min-width: 0; }
.uny-card > .uny-card__title { margin-bottom: calc(var(--space-2) - var(--uny-gap)); }
.uny-card__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; font-weight: 700; margin: 0; }
.uny-card__sub { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; margin: 0; }
.uny-small { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.uny-card > .uny-small:not(:nth-child(2)), .uny-card > .uny-readout { margin-top: calc(var(--space-2) - var(--uny-gap)); }

/* Sections inside WordPress post content: the same gap the .uny-page grid uses. */
.wp-block-post-content > :is(.uny-tag, .uny-card, .uny-callout, .uny-sources, .uny-faq, .uny-newsletter, .uny-table, .uny-articles),
.wp-block-post-content > :is(.uny-tag, .uny-card, .uny-callout, .uny-sources, .uny-faq, .uny-newsletter, .uny-table, .uny-articles) + * { margin-block-start: var(--space-14); }
.wp-block-post-content > .uny-tag + .uny-callout { margin-block-start: var(--space-5); }
.wp-block-post-content > :first-child { margin-block-start: 0; }

/* ---------- Tear-off line: the one thing to remember ---------- */
.uny-tear { padding-top: var(--space-3); border-top: var(--border-heavy) dashed var(--tear-line); }
.uny-tear p { font-size: var(--text-md); line-height: 1.45; font-weight: 700; color: var(--ink); text-wrap: pretty; max-width: var(--content-width); margin: 0; }

/* ---------- Checked line: when we last checked the facts ---------- */
.uny-checked { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-target); font-size: var(--text-sm); color: var(--accent); }
.uny-checked__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Chart ---------- */
.uny-chart { width: 100%; min-width: 0; }
.uny-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.uny-chart svg:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 4px; }
.uny-c-grid { stroke: var(--grid); stroke-width: 1; }
.uny-c-base { stroke: var(--ink-2); stroke-width: 1; }
.uny-c-tick { fill: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.uny-c-area { fill: var(--chart-area); }
.uny-c-line { fill: none; stroke: var(--data-1); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.uny-c-line--2 { stroke: var(--data-2); stroke-width: 2.5; stroke-dasharray: 6 4; }
.uny-c-limit { stroke: var(--limit); stroke-width: 2; stroke-dasharray: 6 4; }
.uny-c-knee { fill: var(--limit); stroke: var(--surface); stroke-width: 2; }
.uny-c-limit-label { fill: var(--limit-ink); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; }
.uny-c-cross { stroke: var(--ink-2); stroke-width: 1; }
.uny-c-hover { fill: var(--surface); stroke: var(--data-1); stroke-width: 3.5; }
.uny-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 10px; font-size: var(--text-md); background: var(--wash); border-radius: var(--radius-sm); padding: 10px var(--space-3); }
.uny-readout__dots { flex: 1 1 24px; min-width: 16px; border-bottom: var(--border-heavy) dotted var(--outline); transform: translateY(-5px); }
.uny-readout__value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }

/* ---------- Months: which 3-month blocks count ---------- */
.uny-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--uny-months, 6), minmax(0, 1fr)); gap: var(--space-1); }
.uny-months li { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-2) 10px; display: grid; gap: var(--space-1); align-content: start; font-size: var(--text-sm); line-height: 1.25; border: var(--border-strong) dashed var(--outline); color: var(--ink-2); }
.uny-months li.is-counted { background: var(--data-1); border: var(--border-strong) solid var(--data-1); color: var(--on-data); }
.uny-months__when { font-weight: 700; }
@container (max-width: 559px) {
  .uny-months { grid-template-columns: 1fr; gap: 6px; }
  .uny-months li { grid-template-columns: 1fr auto; align-items: baseline; padding: 10px var(--space-3); }
  .uny-months__status { font-weight: 700; }
}

/* ---------- Free list: one week of free things ----------
   The top of the page is option 1 of three mockups (F, October 17, 2026): the week's picks, each with its day and
   borough, then a row of the 7 days in the data fill, then links to the always-free and under-$10 lists. An empty day
   is dashed and points to the always-free list. Then one section per day. No tear-off line: a day is a list, not a
   visual. The 7-column day row fits a 320px column, so it needs no container query. */
.uny-week { display: grid; }
.uny-week__title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; color: var(--ink); }
.uny-picks { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; }
.uny-picks li { display: grid; padding-block: var(--space-1) var(--space-2); border-top: var(--border-hair) solid var(--line); }
.uny-picks li:first-child { border-top: 0; }
.uny-picks a { justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap-target); font-weight: 700; line-height: 1.3; }
.uny-picks span { font-size: var(--text-sm); color: var(--muted); }

.uny-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.uny-days__cell { display: grid; justify-items: center; align-content: center; min-height: var(--tap-target); box-sizing: border-box; padding-block: var(--space-1); border-radius: var(--radius-sm); background: var(--data-1); border: var(--border-strong) solid var(--data-1); color: var(--on-data); font-size: var(--text-sm); line-height: 1.2; text-decoration: none; }
a.uny-days__cell:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.uny-days__day.is-empty .uny-days__cell { background: none; border-style: dashed; border-color: var(--outline); color: var(--ink-2); }
.uny-week__more { margin: 0; }
.uny-week__more a { display: inline-flex; align-items: center; min-height: var(--tap-target); }

/* The day row stays pinned at the top of the screen for the whole page, under the WordPress admin bar when there is one,
   with a Top link last (option 1 of three navigation mockups, F, October 17, 2026). */
.uny-daybar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-block: var(--space-2); box-shadow: 0 var(--border-hair) 0 var(--line); }
.uny-daybar .uny-days { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.uny-days__day--top .uny-days__cell { background: none; border-color: var(--ink); color: var(--ink); }
:where([id^="day-"], #always-free, #under-10, #sources, .uny-free__item) { scroll-margin-top: var(--space-16); }
/* Signed in, WordPress pins its own admin bar on wider screens (46px tall from 601px, 32px from 783px), so the day bar
   sits under it. Visitors never see the admin bar. These are WordPress's sizes, not design tokens. */
@media (min-width: 601px) {
  .admin-bar .uny-daybar { top: 46px; }
  .admin-bar :where([id^="day-"], #always-free, #under-10, #sources, .uny-free__item) { scroll-margin-top: calc(var(--space-16) + 46px); }
}
@media (min-width: 783px) {
  .admin-bar .uny-daybar { top: 32px; }
  .admin-bar :where([id^="day-"], #always-free, #under-10, #sources, .uny-free__item) { scroll-margin-top: calc(var(--space-16) + 32px); }
}
.uny-free { list-style: none; margin: 0; padding: 0; display: grid; }
.uny-free__item { padding-block: var(--space-2); border-top: var(--border-hair) solid var(--line); }
.uny-free__item:first-child { border-top: 0; padding-top: 0; }
.uny-free__item:last-child { padding-bottom: 0; }
.uny-free__item p { margin: 0; }
/* Each entry folds to one line: the name, then "time, borough". A tap opens the details. The + turns into a minus. */
.uny-free__fold { display: grid; gap: var(--space-1); }
.uny-free__head { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; min-height: var(--tap-target); }
.uny-free__head::-webkit-details-marker { display: none; }
.uny-free__head::after { content: "+"; grid-row: 1 / span 2; grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1; color: var(--accent); }
.uny-free__fold[open] > .uny-free__head::after { content: "\2212"; }
.uny-free__head:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-free__title { font-weight: 700; font-size: var(--text-md); line-height: 1.35; color: var(--ink); }
.uny-free__when { font-size: var(--text-sm); color: var(--muted); }
.uny-free__what { font-size: var(--text-md); color: var(--ink-2); }
.uny-free__meta { display: grid; gap: 2px; font-size: var(--text-sm); color: var(--muted); }
.uny-free__note { font-size: var(--text-sm); color: var(--ink-2); }
.uny-free__link { justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap-target); font-weight: 700; font-size: var(--text-sm); }

/* ---------- Doors: the front page's two big choices ----------
   Each door is one link: the question a reader has, one short line, and where it goes. F picked this "two doors" front
   page from three mockups on October 17, 2026, knowing the boxes depart from open sections. Stacked in a narrow space,
   side by side from 560px. */
.uny-doors { display: grid; gap: var(--space-3); }
.uny-door { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-5); border: var(--border-hair) solid var(--card-border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; }
.uny-door:hover { border-color: var(--accent); }
.uny-door:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-door__ask { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; }
.uny-door__line { color: var(--ink-2); }
.uny-door__go { margin-top: var(--space-1); font-weight: 700; color: var(--accent); }
@container (min-width: 560px) {
  .uny-doors { grid-template-columns: 1fr 1fr; }
}

/* ---------- Checklist: the reader ticks their own boxes ---------- */
.uny-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.uny-checks label { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: start; padding-block: var(--space-2); cursor: pointer; position: relative; }
.uny-checks input { position: absolute; opacity: 0; width: 30px; height: 30px; margin: 0; left: 0; top: 6px; }
.uny-check__box { width: 28px; height: 28px; border-radius: var(--radius-md); border: var(--border-heavy) solid var(--outline); display: grid; place-items: center; margin-top: 1px; background: var(--surface); }
.uny-check__box svg { width: 16px; height: 16px; fill: none; stroke: var(--on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.uny-checks input:checked + .uny-check__box { background: var(--accent); border-color: var(--accent); }
.uny-checks input:checked + .uny-check__box svg { opacity: 1; }
.uny-checks input:focus-visible + .uny-check__box { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-checks b { display: block; font-size: var(--text-md); line-height: 1.35; }
.uny-checks b + span { display: block; font-size: var(--text-sm); color: var(--muted); }

/* ---------- Deadline: a form, what it fixes, how long you have ---------- */
.uny-deadline { display: grid; gap: var(--space-2); padding-block: var(--space-3); }
.uny-deadline + .uny-deadline { border-top: var(--border-hair) solid var(--line); }
.uny-deadline__ask { font-size: var(--text-md); font-weight: 700; line-height: 1.35; margin: 0; }
.uny-deadline__text { font-size: var(--text-md); color: var(--ink-2); margin: 0; }
.uny-deadline__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.uny-formlink { font-weight: 700; font-size: var(--text-sm); color: var(--ink); text-decoration: none; border: var(--border-hair) solid var(--outline); border-radius: var(--radius-sm); padding: var(--space-2) 10px; min-height: var(--tap-target); display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface); }
.uny-formlink:hover { border-color: var(--accent); }
.uny-formlink span { font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
.uny-chip { display: inline-flex; align-items: center; background: var(--limit-wash); color: var(--limit-ink); border-radius: var(--radius-sm); padding: var(--space-1) 10px; font-weight: 700; font-size: var(--text-sm); }

/* ---------- Buttons ---------- */
.uny-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); padding: 10px 18px; border-radius: var(--radius-sm); border: var(--border-strong) solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; font-size: var(--text-md); line-height: 1.2; text-decoration: none; cursor: pointer; }
.uny-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.uny-btn:active { transform: translateY(1px); }
.uny-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--outline); }
.uny-btn--secondary:hover { background: var(--wash); color: var(--ink); border-color: var(--accent); }
.uny-btn:disabled, .uny-btn[aria-disabled="true"] { background: var(--wash); border-color: var(--line); color: var(--muted); cursor: not-allowed; transform: none; }
.uny-btn.is-busy { cursor: progress; }
.uny-btn.is-busy::after { content: ""; width: 14px; height: 14px; border-radius: var(--radius-full); border: var(--border-heavy) solid currentColor; border-right-color: transparent; animation: uny-spin 0.8s linear infinite; }
@keyframes uny-spin { to { transform: rotate(1turn); } }

/* ---------- Fields ---------- */
.uny-field { display: grid; gap: 6px; }
.uny-field__label { font-weight: 700; font-size: var(--text-md); }
.uny-field__help { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.uny-input-wrap { display: flex; align-items: stretch; border: var(--border-strong) solid var(--outline); border-radius: var(--radius-sm); background: var(--surface); min-height: 48px; }
.uny-input-wrap:focus-within { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-input-affix { display: grid; place-items: center; padding-inline: var(--space-3); color: var(--muted); font-weight: 700; border-right: var(--border-hair) solid var(--line); }
.uny-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-md); color: var(--ink); padding: 10px var(--space-3); }
.uny-input:focus { outline: none; }
.uny-input::placeholder { color: var(--muted); }
.uny-field.is-invalid .uny-input-wrap { border-color: var(--error); }
.uny-field__error { display: none; font-size: var(--text-sm); font-weight: 700; color: var(--error); background: var(--error-wash); border-radius: var(--radius-sm); padding: 6px 10px; margin: 0; }
.uny-field.is-invalid .uny-field__error { display: block; }
.uny-input:disabled { color: var(--muted); cursor: not-allowed; }

/* ---------- Notice ---------- */
.uny-callout { border-left: var(--space-1) solid var(--line); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); max-width: var(--content-width); box-sizing: border-box; }
.uny-callout__title { font-weight: 700; font-size: var(--text-md); margin: 0; color: var(--ink); }
:where(.uny-callout) p { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.uny-callout--time { background: var(--limit-wash); border-left-color: var(--limit); }
.uny-callout--time .uny-callout__title { color: var(--limit-ink); }

/* ---------- FAQ ---------- */
.uny-faq { border-top: var(--border-hair) solid var(--line); }
.uny-faq details { border-bottom: var(--border-hair) solid var(--line); }
.uny-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--tap-target); padding-block: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.25; }
.uny-faq summary::-webkit-details-marker { display: none; }
.uny-faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: var(--border-heavy) solid var(--ink-2); border-bottom: var(--border-heavy) solid var(--ink-2); transform: rotate(45deg) translateY(-3px); }
.uny-faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.uny-faq__a { padding-bottom: var(--space-4); font-size: var(--text-md); color: var(--ink-2); max-width: var(--content-width); }
.uny-faq__a p { margin: 0 0 var(--space-2); }

/* ---------- Table ---------- */
.uny-table { overflow-x: auto; }
.uny-table table { border-collapse: collapse; width: 100%; font-size: var(--text-md); }
.uny-table caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2); }
.uny-table th { text-align: left; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); border-bottom: var(--border-heavy) solid var(--line); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.uny-table td { border-bottom: var(--border-hair) solid var(--line); padding: 10px var(--space-3) 10px 0; }
.uny-table .is-num { text-align: right; font-family: var(--font-display); font-weight: 700; }
.uny-table tr.is-limit td { background: var(--limit-wash); color: var(--ink); }

/* ---------- Article card (topic pages, home) ---------- */
.uny-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.uny-article-card { background: var(--surface); border: var(--border-hair) solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: 6px; position: relative; }
.uny-article-card:hover { border-color: var(--accent); }
.uny-article-card__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; font-weight: 700; margin: 0; }
.uny-article-card__title a { color: var(--ink); text-decoration: none; }
.uny-article-card__title a::after { content: ""; position: absolute; inset: 0; }
.uny-article-card__title a:focus-visible { outline: none; }
.uny-article-card:focus-within { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
:where(.uny-article-card) p { margin: 0; font-size: var(--text-md); color: var(--ink-2); }
.uny-article-card__meta { font-size: var(--text-sm); color: var(--muted); }

/* ---------- Newsletter ---------- */
.uny-newsletter { background: var(--wash); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-3); max-width: var(--content-width); }
.uny-newsletter__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; margin: 0; }
:where(.uny-newsletter) p { margin: 0; color: var(--ink-2); }
.uny-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.uny-newsletter__row .uny-field { flex: 1 1 220px; }
.uny-newsletter__fine { font-size: var(--text-sm); color: var(--muted); }

/* ---------- Sources ---------- */
.uny-sources { border-top: var(--border-hair) solid var(--line); padding-top: var(--space-4); display: grid; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); max-width: var(--content-width); }
.uny-sources__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0; }
.uny-sources ol { margin: 0; padding-left: 22px; display: grid; gap: var(--space-2); }
.uny-sources a { padding-block: var(--space-3); }
.uny-sources__domain { color: var(--muted); }
/* The list folds to one line with its count. The "Checked" note under it stays in view. */
.uny-sources__fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); }
.uny-sources__fold summary::-webkit-details-marker { display: none; }
.uny-sources__fold summary::after { content: "+"; width: 1em; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1; color: var(--accent); }
.uny-sources__fold[open] summary::after { content: "\2212"; }
.uny-sources__fold summary:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.uny-sources__count { margin-left: auto; color: var(--muted); }
.uny-sources__fold ol { margin-top: var(--space-2); }
:where(.uny-sources) p { margin: 0; }

/* ---------- Roomy: the space a block sits in is at least container-md (560px) wide ---------- */
/* The stand-alone page wrapper is the page itself, so it follows the screen. */
@media (min-width: 720px) { .uny-page { gap: var(--space-20); } }
@container (min-width: 560px) {
  .wp-block-post-content > :is(.uny-tag, .uny-card, .uny-callout, .uny-sources, .uny-faq, .uny-newsletter, .uny-table, .uny-articles),
  .wp-block-post-content > :is(.uny-tag, .uny-card, .uny-callout, .uny-sources, .uny-faq, .uny-newsletter, .uny-table, .uny-articles) + * { margin-block-start: var(--space-20); }
  .wp-block-post-content > .uny-tag + .uny-callout { margin-block-start: var(--space-6); }
  .wp-block-post-content > :first-child { margin-block-start: 0; }
  .uny-card { --uny-gap: var(--space-6); }
  .uny-card__title { font-size: var(--text-2xl); }
  .uny-tag { padding: 28px 36px 30px 40px; }
  .uny-newsletter { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .uny-btn.is-busy::after { animation-duration: 2.4s; }
  * { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .uny-tag { border: 2px solid CanvasText; }
  .uny-check__box, .uny-months li, .uny-formlink { border-color: CanvasText; }
}

/* Twenty Twenty-Five compatibility: the parent theme's own templates (blog index, archive, search, 404) name its presets.
   theme.json replaces those presets, so map the old names onto this system's tokens. */
:root {
  --wp--preset--color--base: var(--bg); --wp--preset--color--contrast: var(--ink);
  --wp--preset--color--accent-1: var(--wash); --wp--preset--color--accent-2: var(--limit-wash); --wp--preset--color--accent-3: var(--accent);
  --wp--preset--color--accent-4: var(--ink-2); --wp--preset--color--accent-5: var(--wash); --wp--preset--color--accent-6: var(--line);
  --wp--preset--font-family--manrope: var(--font-text); --wp--preset--font-family--fira-code: var(--font-text);
  --wp--preset--spacing--10: var(--space-4); --wp--preset--spacing--20: var(--space-5); --wp--preset--spacing--30: var(--space-6);
  --wp--preset--spacing--40: var(--space-8); --wp--preset--spacing--50: var(--space-12); --wp--preset--spacing--60: var(--space-16);
  --wp--preset--spacing--70: var(--space-16); --wp--preset--spacing--80: var(--space-16);
}