/* The Center for Organizing - Story Platform demo: THE DESIGN (DESIGN FIRST, factory/PROTOTYPE.md). The kit gives structure;
   the look is here. Their site (centerfororganizing.org) is calm and photographic: a sage green (#70a068) for buttons and
   accents, white space, a light sans wordmark. Here: sage on the primary action, links, the active tab and the key numbers;
   headings in the deeper sage text shade; white cards that stand apart with a hairline border on a white page.
   Rules the end test holds this file to: no px over 2, no fixed/sticky, no grid/flex, box spacing only var(--space-N). */
:root { --bg: #ffffff; --surface2: #f6f9f5; --line: #d9e3d6; --r: .875rem; --danger-text: #a3352b;
  --shadow: 0 1px 2px rgba(30, 60, 30, .05), 0 .375rem 1.25rem rgba(30, 60, 30, .06); }
a { color: var(--brand-text); text-underline-offset: .18em; }
main h1, main h2, main h3 { color: var(--brand-text); }
h1 { font-weight: 760; letter-spacing: -.02em; }
h2 { font-weight: 700; font-size: var(--step-0); }
.eyebrow { color: var(--muted); letter-spacing: .04em; }

.demo-bar { background: var(--brand-soft); color: var(--brand-text); border-bottom: 1px solid var(--line); }
.demo-bar a { color: var(--brand-text); overflow-wrap: anywhere; }
.top { box-shadow: none; border-bottom: 1px solid var(--line); background: #ffffff; }
.top-in { max-width: 90rem; }
.wordmark { color: var(--brand-text); font-weight: 500; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: -.01em; white-space: nowrap; }
.brand-t b { color: var(--muted); font-weight: 600; font-size: var(--step--1); }
.topnav a { font-weight: 640; color: var(--muted); }
.topnav a[aria-current="page"] { color: var(--brand-text); background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand); }
.tabbar a[aria-current="page"] { color: var(--brand-text); }
.icon-btn { background: transparent; border-color: transparent; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card.flat { box-shadow: none; background: var(--surface2); }
main > .rs-center:not(.narrow) { --center-max: 90rem; }

/* the pulse: big glanceable numbers, each a link to the list it counts */
.pulse-t { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.pulse .tile, a.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; }
.pulse .big .tile .n { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); color: var(--brand-text); font-weight: 780; font-variant-numeric: tabular-nums lining-nums; }
.pulse .big { --grid-min: 6.25rem; }
.pulse .big .tile { padding-inline: var(--space-3); min-block-size: 0; }
.tile .n { color: var(--brand-text); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.tile .l { color: var(--muted); font-weight: 600; }
.bars .fill { background: var(--accent-fill); }
.bars .lab { font-weight: 600; }
.bars .track { flex-basis: 100%; }
.rate .sub { flex-basis: 100%; }

.task { text-decoration: none; text-align: start; font: inherit; }
.task small { color: var(--muted); }
.task-card { text-decoration: none; color: inherit; }
.task-card:hover { border-color: var(--brand); }
.req-id { font-weight: 700; color: var(--brand-text); }
.reqs-here { background: var(--surface2); box-shadow: none; }
.reqs-here h2 { font-size: var(--step--1); color: var(--muted); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linkrow { min-block-size: 2.75rem; }
main .btn.accent { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pill.sample { background: var(--surface2); color: var(--muted); }
.pill.new { background: #fdf0ee; color: var(--danger-text); }
.opt { min-block-size: 1.75rem; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { color: var(--muted); font-weight: 600; font-size: var(--step--1); padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: 99rem; }
.steps li[aria-current="step"] { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.steps li.done { color: var(--brand-text); }
.timeline [aria-current="step"] b { color: var(--brand-text); }
.redact .bar { color: #111418; letter-spacing: -.1em; }
.tablewrap { overflow-x: auto; }
fieldset.card legend { font-weight: 700; color: var(--brand-text); }
/* header: their name is the wordmark (their site has no logo image); the small app title stays out of the row so nothing
   in the header changes width when the nav fills in (shift gate) */
.brand-t { display: none; }
.wordmark { white-space: normal; line-height: 1.2; }
.chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
/* the banner: "Prepared for" on its own line, so the wrap point cannot move when the kit's font swaps in (shift gate) */
.demo-bar .prep { display: block; font-weight: 600; }
.find .input { inline-size: clamp(10rem, 40vw, 24rem); max-inline-size: 100%; }
.foot { padding-block-end: var(--space-8); }