/* Duly Posted — the lobby notice case and the registrar's date stamp.
 *
 * One idea, spent in one place: a record that is up is *stamped*, in ink, the
 * way a clerk marks a filing — not ticked in green. Everything around the
 * stamp is quiet: a cool terrazzo floor, white cards, blue-black type set
 * large, because the reader is a board treasurer at a laptop with a folder of
 * PDFs, not a developer at a dashboard.
 *
 * Type: Atkinson Hyperlegible for reading (drawn for low-vision readers),
 * Zilla Slab for headings and the statute's letters, Courier Prime for the
 * stamp alone. All three are SIL OFL and served from here — an owner's
 * browser talks to nobody but us.
 */

@font-face { font-family: "Atkinson"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/zilla-slab-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --terrazzo: #EEF2F1;      /* the lobby floor: the page */
  --card: #FFFFFF;
  --paper: #FFFEFA;         /* what is cut out and pinned: the statute's words, the state's record */
  --ink: #14242B;           /* blue-black: text */
  --ink-soft: #4A5B63;
  --rule: #C9D3D2;
  --field-rule: #85949A;    /* the edge of a box to type in: 3 to 1 against the card */
  --stamp: #3A3F9F;         /* stamp-pad indigo: posted, and every action */
  --stamp-deep: #2A2E78;    /* the same, under the pointer */
  --stamp-wash: #ECEDFA;
  --sun: #8A5A00;           /* due: amber, dark enough to read */
  --sun-wash: #FFF3D0;
  --sun-rule: #D9B866;
  --sun-rule-soft: #E5CE8F;
  --hibiscus: #B3203F;      /* at risk */
  --hibiscus-deep: #8E1730;
  --hibiscus-wash: #FCE9EE;
  --glass: #DDEBE8;         /* does not apply / quiet fills */
  /* what is written on a fill of each colour */
  --on-stamp: #FFFFFF;
  --on-sun: #FFFFFF;
  --on-hibiscus: #FFFFFF;
  --on-ink: #FFFFFF;
  /* the floor's chips, and the shadow a pinned paper throws */
  --fleck-a: rgba(58, 63, 159, .07);
  --fleck-b: rgba(20, 36, 43, .06);
  --fleck-c: rgba(179, 32, 63, .05);
  --fleck-d: rgba(20, 36, 43, .05);
  --shade: rgba(20, 36, 43, .5);
  /* the notice case: felt, an aluminium frame, glass — and a notice that is paper in any light */
  --felt: #2F4A4F;
  --frame: #D7DEDD;
  --frame-edge: #AEBBBA;
  --glare: rgba(255, 255, 255, .13);
  --glare-soft: rgba(255, 255, 255, .06);
  --on-felt: #FFFFFF;
  --on-felt-soft: #DDEBE8;
  --on-felt-accent: #B9BCF2;
  --notice: #FFFEFA;
  --notice-ink: #14242B;
  --notice-soft: #4A5B63;
  --notice-stamp: #3A3F9F;
  --pin: #B3203F;
  --pin-shade: rgba(0, 0, 0, .25);
  --notice-shade: rgba(0, 0, 0, .6);
  /* blacking out: a page of a record is paper in any light, and a box is the black it will be */
  --blackout: #000000;
  --blackout-ghost: rgba(0, 0, 0, .55);
  --blackout-edge: #FFB000;
  --sheet-edge: #9AA7AC;

  --body: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Zilla", Georgia, serif;
  --stamp-face: "Courier Prime", "Courier New", monospace;

  --step--1: 0.9375rem;
  --step-0: 1.125rem;       /* 18px: the reading size */
  --step-1: 1.35rem;
  --step-2: 1.75rem;
  --step-3: 2.4rem;
  --step-4: 3.3rem;
  --radius: 10px;
  --measure: 38rem;
}

/* --- the lobby at night ------------------------------------------------------
   The same case, the same stamp, the lights down. Ink becomes the light thing and the
   floor the dark one; indigo, amber and hibiscus are each lifted until they read on the
   dark card at least as well as their day values read on the white one (every pair is
   measured in tests/test_dark_mode.py — a reader in their sixties is who this is for).

   Written twice because CSS has no way to say it once: the first block is for somebody
   whose computer asks for dark and who has not chosen otherwise here; the second for
   somebody who chose "Dark" in the footer (the choice is a cookie; base.html writes it on
   <html>). An association's own site has no switch and follows the computer. The test
   holds the two blocks to the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --terrazzo: #0F191D;
    --card: #18252B;
    --paper: #1C2A2E;
    --ink: #E7EEED;
    --ink-soft: #A9B8BC;
    --rule: #32444B;
    --field-rule: #6F8188;
    --stamp: #AEB2FF;
    --stamp-deep: #CDD0FF;
    --stamp-wash: #262B5C;
    --sun: #F2C462;
    --sun-wash: #2F2814;
    --sun-rule: #7A6325;
    --sun-rule-soft: #5A4A1E;
    --hibiscus: #FF93A6;
    --hibiscus-deep: #FFB3C1;
    --hibiscus-wash: #3A1820;
    --glass: #23363C;
    --on-stamp: #10143F;
    --on-sun: #2A1E00;
    --on-hibiscus: #3A0713;
    --on-ink: #0F191D;
    --fleck-a: rgba(174, 178, 255, .07);
    --fleck-b: rgba(231, 238, 237, .05);
    --fleck-c: rgba(255, 147, 166, .05);
    --fleck-d: rgba(231, 238, 237, .04);
    --shade: rgba(0, 0, 0, .6);
    --felt: #213438;
    --frame: #5B696D;
    --frame-edge: #3C494D;
    --glare: rgba(255, 255, 255, .07);
    --glare-soft: rgba(255, 255, 255, .03);
    --notice: #E9E6DB;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --terrazzo: #0F191D;
  --card: #18252B;
  --paper: #1C2A2E;
  --ink: #E7EEED;
  --ink-soft: #A9B8BC;
  --rule: #32444B;
  --field-rule: #6F8188;
  --stamp: #AEB2FF;
  --stamp-deep: #CDD0FF;
  --stamp-wash: #262B5C;
  --sun: #F2C462;
  --sun-wash: #2F2814;
  --sun-rule: #7A6325;
  --sun-rule-soft: #5A4A1E;
  --hibiscus: #FF93A6;
  --hibiscus-deep: #FFB3C1;
  --hibiscus-wash: #3A1820;
  --glass: #23363C;
  --on-stamp: #10143F;
  --on-sun: #2A1E00;
  --on-hibiscus: #3A0713;
  --on-ink: #0F191D;
  --fleck-a: rgba(174, 178, 255, .07);
  --fleck-b: rgba(231, 238, 237, .05);
  --fleck-c: rgba(255, 147, 166, .05);
  --fleck-d: rgba(231, 238, 237, .04);
  --shade: rgba(0, 0, 0, .6);
  --felt: #213438;
  --frame: #5B696D;
  --frame-edge: #3C494D;
  --glare: rgba(255, 255, 255, .07);
  --glare-soft: rgba(255, 255, 255, .03);
  --notice: #E9E6DB;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 var(--step-0)/1.55 var(--body);
  background-color: var(--terrazzo);
  /* terrazzo chips: three sizes of fleck, barely there */
  background-image:
    radial-gradient(circle at 12% 18%, var(--fleck-a) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 42%, var(--fleck-b) 0 1.5px, transparent 2px),
    radial-gradient(circle at 36% 78%, var(--fleck-c) 0 2.5px, transparent 3px),
    radial-gradient(circle at 88% 86%, var(--fleck-d) 0 1px, transparent 1.5px);
  background-size: 140px 140px, 90px 90px, 170px 170px, 60px 60px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0;
             letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--stamp); text-underline-offset: 3px; }
a:hover { color: var(--stamp-deep); }
small, .small { font-size: var(--step--1); }
.soft { color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 4px; }

/* --- the frame every page sits in ---------------------------------------- */

.bar { display: flex; align-items: center; gap: 1rem; padding: .9rem clamp(1rem, 4vw, 2.5rem);
       background: var(--card); border-bottom: 1px solid var(--rule); }
.wordmark { font: 700 1.5rem/1 var(--display); color: var(--ink); text-decoration: none;
            letter-spacing: -0.015em; }
.wordmark span { color: var(--stamp); }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem;
           font-size: var(--step--1); }
.bar .who { color: var(--ink-soft); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--stamp);
           text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
main { padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 5rem; max-width: 78rem;
       margin: 0 auto; }
footer.foot { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; max-width: 78rem; margin: 0 auto;
              color: var(--ink-soft); font-size: var(--step--1); }
footer.foot a { color: inherit; }
/* light, dark, or as the computer has it: three buttons that read as a line of the footer */
.looks { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.1rem; margin: .9rem 0 0; }
.looks .linkish { color: inherit; }
.looks .linkish[aria-pressed=true] { color: var(--ink); font-weight: 700; text-decoration: none; cursor: default; }

/* --- forms ---------------------------------------------------------------- */

label { display: block; font-weight: 700; margin: 1.1rem 0 .35rem; }
.hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
.hint.inline { display: inline; margin-left: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=file], select {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--field-rule); border-radius: 8px; padding: .7rem .8rem; }
input:focus-visible, select:focus-visible { outline-offset: 1px; border-color: var(--stamp); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; margin-top: 1.2rem; }
.check input { width: 1.35rem; height: 1.35rem; margin-top: .15rem; accent-color: var(--stamp);
               flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
       font: 700 var(--step-0)/1 var(--body); padding: .85rem 1.3rem; border-radius: 8px;
       border: 1.5px solid var(--stamp); background: var(--stamp); color: var(--on-stamp); cursor: pointer;
       text-decoration: none; }
.btn:hover { background: var(--stamp-deep); border-color: var(--stamp-deep); color: var(--on-stamp); }
.btn.quiet { background: transparent; color: var(--stamp); }
.btn.quiet:hover { background: var(--stamp-wash); color: var(--stamp-deep); }
.btn.small { font-size: var(--step--1); padding: .55rem .85rem; }
.btn[disabled] { opacity: .55; cursor: progress; }
.said { margin: 1rem 0 0; min-height: 1.5em; }
.said.bad { color: var(--hibiscus); font-weight: 700; }

/* --- the way in: a form beside the notice case ---------------------------- */

.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 5vw, 5rem);
         align-items: center; min-height: 70vh; }
.entry .form { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
               padding: clamp(1.4rem, 3vw, 2.2rem); }
.entry .form h1 { font-size: var(--step-2); margin-bottom: .4rem; }
.entry .form .btn { width: 100%; margin-top: 1.5rem; }
.entry .also { margin-top: 1.4rem; font-size: var(--step--1); }

/* The case: an aluminium frame, a felt back, and one notice pinned in it. */
.case { position: relative; background: var(--felt); border-radius: 6px; padding: clamp(1.2rem, 3vw, 2.2rem);
        border: 10px solid var(--frame); box-shadow: 0 0 0 1px var(--frame-edge), 0 18px 40px -22px var(--shade); }
.case::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* the glass */
               background: linear-gradient(115deg, var(--glare) 0 22%, transparent 22.5% 60%,
                                           var(--glare-soft) 60.5% 68%, transparent 68.5%); }
.case .plate { font: 600 var(--step--1)/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
               color: var(--on-felt-soft); margin-bottom: 1.2rem; }
/* Paper is paper with the lights down too: inside the notice the day's ink is put back. */
.notice { --ink: var(--notice-ink); --ink-soft: var(--notice-soft); --stamp: var(--notice-stamp);
          position: relative; background: var(--notice); color: var(--ink); padding: 1.6rem 1.5rem 1.4rem;
          max-width: 25rem; transform: rotate(-.6deg); box-shadow: 0 8px 18px -10px var(--notice-shade); }
.notice::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px;
                  border-radius: 50%; background: var(--pin); box-shadow: inset -2px -2px 0 var(--pin-shade); }
.notice h2 { font-size: var(--step-1); }
.notice p { font-size: var(--step--1); margin: .6rem 0 0; }
.notice .cite { color: var(--ink-soft); font-style: italic; }
.thesis { color: var(--on-felt); font: 700 clamp(1.9rem, 3.6vw, var(--step-4))/1.05 var(--display);
          margin: 1.6rem 0 0; max-width: 14ch; text-wrap: balance; }
.thesis em { font-style: normal; color: var(--on-felt-accent); }

/* --- the stamp: the one loud thing ---------------------------------------- */

.stamp { display: inline-block; font: 700 .95rem/1 var(--stamp-face); letter-spacing: .08em;
         text-transform: uppercase; color: var(--stamp); border: 2.5px solid currentColor;
         border-radius: 5px; padding: .38rem .55rem .3rem; transform: rotate(-3deg);
         /* a pad that was not quite evenly inked */
         -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 100%);
                 mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 100%); }
.stamp b { font-weight: 700; display: block; font-size: 1.15em; margin-bottom: .18rem; }
.notice .stamp { display: block; width: max-content; margin: 1rem 0 0 auto; }

/* --- the board ------------------------------------------------------------- */

.place { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.place .eyebrow { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .3rem; }
.reading { margin-left: auto; text-align: right; }
.reading .count { font: 700 var(--step-3)/1 var(--display); }
.reading .count small { font: 400 var(--step-0)/1 var(--body); color: var(--ink-soft); }
.summary { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--stamp);
           border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 2rem; }
.summary.risk { border-left-color: var(--hibiscus); }
.summary p { margin: 0; max-width: none; }
.summary p + p { margin-top: .35rem; }

.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
         grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.slot { position: relative; background: var(--card); border: 1px solid var(--rule);
        border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; display: flex;
        flex-direction: column; gap: .55rem; min-height: 8.5rem; }
/* the letter, the title, and a column the mark has to itself: a long title wraps,
   it never runs under the stamp */
.slot .head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .7rem;
              align-items: start; }
.slot .letter { font: 700 var(--step-2)/1 var(--display); color: var(--ink-soft); flex: none; }
.slot h3 { font-size: 1.2rem; padding-top: .28rem; }
.slot .detail { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.slot .detail + .detail { margin-top: .3rem; }
.slot .acts { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.slot .mark { padding-top: .1rem; }
.slot .stamp { font-size: .78rem; text-align: center; }
.tag { display: inline-block; font: 700 .8rem/1 var(--body); letter-spacing: .04em;
       text-transform: uppercase; padding: .38rem .55rem; border-radius: 99px; }

/* a slot with nothing pinned in it */
.slot.missing, .slot.late { border: 2px dashed var(--hibiscus); background: var(--hibiscus-wash); }
.slot.missing .letter, .slot.late .letter { color: var(--hibiscus); }
.slot.missing .tag, .slot.late .tag { background: var(--hibiscus); color: var(--on-hibiscus); }
.slot.due { border-color: var(--sun-rule); background: var(--sun-wash); }
.slot.due .letter { color: var(--sun); }
.slot.due .tag { background: var(--sun); color: var(--on-sun); }
.slot.unknown .tag { background: var(--ink); color: var(--on-ink); }
.slot.ok .letter { color: var(--stamp); }
.slot.na { background: transparent; border-style: dotted; }
.slot.na h3, .slot.na .letter { color: var(--ink-soft); }
.slot.na .tag { background: var(--glass); color: var(--ink-soft); }
.public-note { font-size: .8rem; color: var(--ink-soft); }

.slot h3 a { color: inherit; text-decoration: none; }
.slot h3 a:hover { color: var(--stamp); text-decoration: underline; }
.summary .begin { margin-top: .9rem; }

/* --- one letter at a time: the wizard ---------------------------------------- */

.letter-page { max-width: 46rem; }
.trail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
         font-size: var(--step--1); margin-bottom: 1.6rem; }
.letter-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem;
               align-items: start; margin-bottom: 1.1rem; }
.letter-head .letter { font: 700 var(--step-4)/.9 var(--display); color: var(--ink-soft); }
.letter-head h1 { font-size: var(--step-2); padding-top: .35rem; }
.letter-head .tag { margin-top: .6rem; background: var(--stamp); color: var(--on-stamp); }
.letter-head.missing .letter, .letter-head.late .letter { color: var(--hibiscus); }
.letter-head.missing .tag, .letter-head.late .tag { background: var(--hibiscus); color: var(--on-hibiscus); }
.letter-head.due .letter { color: var(--sun); }
.letter-head.due .tag { background: var(--sun); color: var(--on-sun); }
.letter-head.unknown .tag { background: var(--ink); color: var(--on-ink); }
.letter-head.ok .letter { color: var(--stamp); }
.letter-head.na .tag { background: var(--glass); color: var(--ink-soft); }
.lede { font-size: var(--step-1); line-height: 1.45; }

/* the statute, cut out and pinned: its words, not ours */
.clipping { margin: 1.4rem 0 0; background: var(--paper); border: 1px solid var(--rule);
            border-left: 5px solid var(--ink); padding: 1.1rem 1.3rem 1rem;
            box-shadow: 0 6px 14px -12px var(--shade); }
.clipping blockquote { margin: 0; font: 600 var(--step-0)/1.5 var(--display); }
.clipping figcaption { margin-top: .6rem; font-size: var(--step--1); color: var(--ink-soft); }

.findings { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; }
.findings li { background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--stamp);
               border-radius: 6px; padding: .6rem .9rem; font-size: var(--step--1); }
.findings li.missing, .findings li.late { border-left-color: var(--hibiscus); }
.findings li.due { border-left-color: var(--sun); }
.findings li.unknown { border-left-color: var(--ink); }
.findings li.na { border-left-color: var(--rule); color: var(--ink-soft); }

.papers { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .7rem; }
.paper { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
         padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.paper .what { flex: 1; min-width: 0; }
.paper .name { font: 600 var(--step-1)/1.2 var(--display); margin: 0; color: var(--ink); }
.paper p { margin: .25rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none;
           overflow-wrap: anywhere; }
.paper p.due { color: var(--sun); font-weight: 700; }
.paper p.late { color: var(--hibiscus); font-weight: 700; }
.paper.held { border-color: var(--sun-rule); background: var(--sun-wash); }
.paper.replaced { background: transparent; border-style: dotted; }
.paper.replaced .name { color: var(--ink-soft); }
.paper .stamp { flex: none; margin-top: .2rem; font-size: .78rem; text-align: center; }
.post-it { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--sun-rule-soft); }
.post-it .check { margin-top: 0; color: var(--ink); font-size: var(--step--1); }
.post-it .btn { margin-top: .8rem; }

.add, .or-none, .said-none { margin-top: 2.5rem; }
.add form { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
            padding: .6rem clamp(1.2rem, 3vw, 2rem) 1.7rem; margin-top: 1rem; }
input[type=file] { padding: .55rem .6rem; }
input[type=file]::file-selector-button { font: 700 var(--step--1)/1 var(--body); color: var(--stamp);
  background: var(--stamp-wash); border: 1.5px solid var(--stamp); border-radius: 6px;
  padding: .5rem .8rem; margin-right: .8rem; cursor: pointer; }
.redact { margin: 1.8rem 0 0; border: 1.5px solid var(--ink); border-radius: 8px;
          padding: .4rem 1.1rem 1.1rem; }
.redact legend { font: 700 var(--step-0)/1 var(--display); padding: 0 .4rem; }
.redact p { font-size: var(--step--1); margin: .4rem 0 .6rem; }
.redact .cite { color: var(--ink-soft); white-space: nowrap; }
.redact details { font-size: var(--step--1); }
.redact summary { cursor: pointer; color: var(--stamp); font-weight: 700; }
.redact details ul { margin: .6rem 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.add .acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
progress { display: block; width: 100%; height: .8rem; margin-top: 1.2rem; accent-color: var(--stamp); }
progress[hidden] { display: none; }
.or-none, .said-none { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.or-none p, .said-none p { margin-bottom: .7rem; }
.said-none .stamp { font-size: .78rem; margin-right: .8rem; }
.steps { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem;
         padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.steps .btn { max-width: 48%; text-align: left; line-height: 1.25; font-size: var(--step--1); }
.steps .btn span { font-weight: 400; }

/* --- records, meetings, directors: the three things a board keeps here -------
   The tabs, the rows and their cards are the desk's as well, and are written once, further
   down. Here: what a card of the board's own adds — a colour for its finding, a stamp. */

.row-card.kept { display: flex; gap: 1rem; align-items: flex-start; border-left-color: var(--stamp); }
.row-card.kept.missing, .row-card.kept.late { border-left-color: var(--hibiscus); }
.row-card.kept.due { border-left-color: var(--sun); }
.row-card.kept.unknown { border-left-color: var(--ink); }
.row-card .what { flex: 1; min-width: 0; }
.row-card .finding { color: var(--ink); }
.row-card .finding.missing, .row-card .finding.late { color: var(--hibiscus); font-weight: 700; }
.row-card .finding.due { color: var(--sun); font-weight: 700; }
.row-card .acts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .8rem; }
.row-card .acts form { margin: 0; }
.row-card .stamp { flex: none; margin-top: .2rem; font-size: .78rem; text-align: center; }
.attached { margin: .5rem 0 0; padding-left: 1.2rem; font-size: var(--step--1); color: var(--ink-soft); }
input[type=date], input[type=time] { width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--field-rule); border-radius: 8px; padding: .7rem .8rem; }
.add .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1.5rem; }
/* Two fields side by side: whatever their hints run to, the boxes line up — and a date,
   a number, a line of text and a drop-down are all one height. */
.row input, .row select { min-height: 3.4rem; }
.add .row > div, .facts .row > div { display: flex; flex-direction: column; }
.add .row > div > label, .facts .row > div > label { flex: 1; }
.add form > .btn { margin-top: 1.6rem; }
.history { margin-top: 2.5rem; }
.history summary { cursor: pointer; color: var(--stamp); font-weight: 700; }

/* --- facts the board still owes us ----------------------------------------- */

.facts { margin-top: 2.5rem; background: var(--card); border: 1px solid var(--rule);
         border-radius: var(--radius); padding: 1.4rem clamp(1.2rem, 3vw, 2rem) 1.7rem; }
.facts .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.5rem; }
.facts .btn { margin-top: 1.5rem; }

/* --- find your association -------------------------------------------------- */

.finder { max-width: 46rem; }
.finder form { display: flex; gap: .6rem; margin: 1.2rem 0 1.5rem; }
.finder form[role=search] input, .finder form[method=get] input { flex: 1; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.results li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
              padding: 1rem 1.2rem; display: flex; gap: 1rem; align-items: center; }
.results .what { flex: 1; min-width: 0; }
.results .name { font: 600 var(--step-1)/1.2 var(--display); margin: 0; }
.results p { margin: .2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
h2.minor { font-size: var(--step-1); margin-top: 2.5rem; }
.spaced { margin-top: 1.75rem; }
.facts .said { grid-column: 1 / -1; }
.empty { border: 2px dashed var(--rule); border-radius: var(--radius); padding: 1.4rem; color: var(--ink-soft); }

/* --- is this yours, and are you its: the confirm step and standing ----------- */

.record-card { background: var(--paper); border: 1px solid var(--rule); border-left: 5px solid var(--ink);
               padding: 1.1rem 1.3rem; margin: 1.4rem 0 1.8rem; box-shadow: 0 6px 14px -12px var(--shade); }
.record-card .name { font: 700 var(--step-1)/1.2 var(--display); margin: 0 0 .3rem; }
.record-card p { margin: .15rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.record-card p.name { color: var(--ink); font-size: var(--step-1); }
fieldset.choice { border: 0; padding: 0; margin: 0 0 .5rem; }
fieldset.choice legend { font-weight: 700; padding: 0; }
fieldset.choice .check { margin-top: .7rem; }
.standing-note { background: var(--sun-wash); border: 1px solid var(--sun-rule); border-left: 6px solid var(--sun);
                 border-radius: var(--radius); padding: .9rem 1.2rem; margin: 0 0 1.2rem; max-width: none; }
.take-down { flex: 1 1 100%; min-width: 0; max-width: 100%; margin-top: .6rem; font-size: var(--step--1); }
.take-down label, .take-down .hint { white-space: normal; }
.take-down input { width: 100%; box-sizing: border-box; }
.take-down summary { cursor: pointer; color: var(--ink-soft); width: max-content; }
.take-down form { margin-top: .6rem; max-width: 34rem; }
.take-down .btn { margin-top: .8rem; }
.standing-note.lapsed { background: var(--hibiscus-wash); border-color: var(--hibiscus); }
.plans { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 .8rem; }
.add .plans form.bare { margin-top: 0; }
.plans.level { align-items: center; gap: .7rem 1.4rem; }
.add .plans.level form.bare > .btn { margin-top: 0; }
.facts-list.dns { margin: 1rem 0 1.2rem; align-items: baseline; }
.again { margin: 1rem 0 0; max-width: 28rem; }
ul.plain { padding-left: 1.2rem; display: grid; gap: .5rem; max-width: var(--measure); }
.finder .trail { margin-bottom: 1.2rem; }
.finder > form { display: block; }
.finder > form[role=search], .finder > form[method=get] { display: flex; }

.list-page { max-width: 52rem; }
.rows { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.row-card { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--sun);
            border-radius: var(--radius); padding: 1rem 1.2rem; }
.row-card .name { font: 600 var(--step-1)/1.2 var(--display); margin: 0; color: var(--ink); }
.row-card p { margin: .3rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none;
              overflow-wrap: anywhere; }
form.inline { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
form.inline label { margin: 0 0 .35rem; font-size: var(--step--1); }
form.inline .acts { display: flex; gap: .6rem; margin-top: .8rem; }
.papers.sent { margin-bottom: 1.2rem; }
.list-page .eyebrow { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .4rem; letter-spacing: .04em; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.8rem; border-bottom: 1px solid var(--rule); }
.tabs a { font: 700 var(--step-0)/1 var(--body); color: var(--ink-soft); text-decoration: none;
          padding: .75rem 1.1rem; border-bottom: 4px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--stamp-deep); }
.tabs a[aria-current] { color: var(--stamp); border-bottom-color: var(--stamp); }
.row-card.plain { border-left-color: var(--stamp); }
.row-card.quiet { border-left-color: var(--rule); background: transparent; }
.tag.op { background: var(--ink); color: var(--on-ink); vertical-align: middle; }
.tag.st { background: var(--glass); color: var(--ink-soft); vertical-align: middle; }
form.search { display: flex; gap: .6rem; margin: 0 0 1.2rem; }
form.search input { flex: 1; }
.pair { display: flex; gap: .6rem; margin-top: .5rem; }
.pair input, .pair select { flex: 1; min-width: 0; padding: .5rem .7rem; font-size: var(--step--1); }
.btn.danger { background: var(--hibiscus); border-color: var(--hibiscus); color: var(--on-hibiscus); }
.btn.danger:hover { background: var(--hibiscus-deep); border-color: var(--hibiscus-deep); color: var(--on-hibiscus); }
.finder.narrow { max-width: 28rem; }
.facts-list { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .5rem 1.5rem; margin: 0 0 2rem; }
.facts-list dt { font-weight: 700; } .facts-list dd { margin: 0; }
.log { list-style: none; padding: 0; margin: .8rem 0 0; font-size: var(--step--1); display: grid; gap: .35rem; }
code { font: 700 .92em/1.3 var(--stamp-face); background: var(--glass); padding: .1rem .35rem; border-radius: 4px; overflow-wrap: anywhere; }
.finder .add form { display: block; }
.results li form { margin: 0; }
.place .who-runs { margin: .45rem 0 0; }

/* --- an association's own website (site.py) ----------------------------------- */

.site-preview { margin: 0; padding: .7rem clamp(1rem, 4vw, 2.5rem); background: var(--sun-wash);
                border-bottom: 1px solid var(--sun-rule); font-size: var(--step--1); max-width: none; }
.site-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
            gap: .4rem 2rem; padding: 1.1rem clamp(1rem, 4vw, 2.5rem); background: var(--card);
            border-bottom: 1px solid var(--rule); }
.site-name { font: 700 var(--step-1)/1.2 var(--display); color: var(--ink); text-decoration: none; }
.site-bar nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.site-bar nav a { font-weight: 700; color: var(--ink-soft); text-decoration: none; padding: .2rem 0;
                  border-bottom: 3px solid transparent; }
.site-bar nav a:hover { color: var(--stamp-deep); }
.site-bar nav a[aria-current] { color: var(--stamp); border-bottom-color: var(--stamp); }
.site-front { max-width: 52rem; }
.site-front.narrow { max-width: 38rem; }
.site-front .eyebrow { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .4rem; letter-spacing: .04em; }
.site-front .row-card .when { color: var(--ink); font-size: var(--step-0); }
.site-block { margin-top: 2.6rem; }
.site-block h2 { font-size: var(--step-1); margin-bottom: .8rem; }
.site-front .also { margin-top: 1.2rem; font-size: var(--step--1); }
input[readonly] { background: var(--glass); color: var(--ink-soft); }
.site-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; margin: 0 0 1.4rem; }
.site-who p, .site-who form { margin: 0; }
.shelf { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.shelf h2 { font-size: var(--step-1); margin-bottom: .5rem; }
.shelf h2 .letter { color: var(--stamp); margin-right: .3rem; }
.shelf .attached { font-size: var(--step-0); color: var(--ink); }
.shelf .attached li + li { margin-top: .35rem; }
textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card);
           border: 1.5px solid var(--field-rule); border-radius: 8px; padding: .7rem .8rem; resize: vertical; }
.list-page form.invite { margin: 0 0 1.2rem; }
.row-card.kept > form { margin: 0; flex: none; }
.row-card .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.row-card .side form { margin: 0; }
/* A form that is one button has no need of a card around it. */
.add form.bare { background: none; border: 0; padding: 0; box-shadow: none; margin-top: 1rem; }
.site-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 3rem; }

/* --- blacking out (redact.html, redact.js) -------------------------------------
   Each page of the file as a picture, and boxes drawn over it. The picture is paper whatever
   the light; a box is the black it will be burnt in as. */

.redact-page { max-width: 58rem; }
.redact-page .eyebrow { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .4rem; letter-spacing: .04em; }
.redact-page .lede { margin-top: .8rem; }
.touch-hint { display: none; margin: -.4rem 0 1rem; }
@media (pointer: coarse) { .touch-hint { display: block; } }
.sheets { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 2.2rem; }
.sheets > li { scroll-margin-top: 1rem; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.sheet-head h2 { font-size: var(--step-1); }
.sheet-head .tag { background: var(--hibiscus); color: var(--on-hibiscus); }
.sheet-head .check { margin: 0 0 0 auto; font-size: var(--step--1); align-items: center; }
.sheet-head .check input { margin-top: 0; }
.sheet-head .linkish { font-size: var(--step--1); }
.sheet { position: relative; line-height: 0; border: 1px solid var(--sheet-edge); background: var(--notice);
         box-shadow: 0 10px 24px -18px var(--shade); cursor: crosshair; user-select: none;
         -webkit-user-select: none; touch-action: pan-y pinch-zoom; overflow: hidden; }
.sheet.all { cursor: default; }
.sheet img { display: block; width: 100%; height: auto; pointer-events: none; }
.named .sheet { border: 2px solid var(--hibiscus); }
.box { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--blackout);
       cursor: pointer; min-width: 4px; min-height: 4px; }
.box:hover, .box:focus-visible { outline: 3px solid var(--blackout-edge); outline-offset: 1px; border-radius: 0; }
.box.ghost { background: var(--blackout-ghost); pointer-events: none; outline: 1px dashed var(--blackout-edge); }
.box.whole { cursor: default; }
.box.whole:hover { outline: 0; }
.redact-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; margin: 2rem 0 0; max-width: none; background: var(--card); border: 1px solid var(--rule);
              border-top: 4px solid var(--ink); border-radius: var(--radius) var(--radius) 0 0;
              padding: .6rem clamp(1rem, 3vw, 1.4rem); box-shadow: 0 -14px 30px -24px var(--shade); }
.redact-bar .count { font: 700 var(--step-0)/1.2 var(--display); }
.finish { background: var(--card); border: 1px solid var(--rule); border-top: 0; scroll-margin-top: 1rem;
          border-radius: 0 0 var(--radius) var(--radius); padding: 1.4rem clamp(1rem, 3vw, 1.6rem) 1.6rem; }
.finish h2 { font-size: var(--step-1); margin-bottom: .7rem; }
.finish p { font-size: var(--step--1); margin: 0 0 .6rem; max-width: 46rem; color: var(--ink-soft); }
.finish p strong { color: var(--ink); }
.finish .check { margin-top: 1rem; }
.finish .acts { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.1rem; }
.paper .redact-link { margin: .6rem 0 0; font-size: var(--step--1); }

/* --- the front page ---------------------------------------------------------- */

.front { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
         align-items: center; min-height: 68vh; }
.front h1 { font-size: clamp(2.4rem, 5vw, var(--step-4)); max-width: 15ch; }
.front .lede { font-size: var(--step-1); margin: 1.2rem 0 1.8rem; max-width: 33rem; }
.front .go { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.points { margin: 3.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.5rem 2.5rem;
          grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.points h3 { margin-bottom: .35rem; }
.points p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.points.tight { margin-top: 2.2rem; }
.front .go + .small { margin: 1rem 0 0; }

/* Further down the front page: what the law asks, what each reader sees, what it costs.
   Nothing new is drawn for it — the clipping, the board's own slots, the cards — so what
   somebody is shown here is what they find inside. */
.band { margin-top: clamp(4rem, 9vw, 6.5rem); scroll-margin-top: 1.5rem; }
.band > h2 { max-width: 24ch; }
.band > .lede { margin: .8rem 0 0; max-width: 40rem; }
.band .clipping { max-width: 46rem; }
.band .after { margin: 1.3rem 0 0; max-width: 44rem; }
.sample { position: relative; margin-top: 1.8rem; padding: 2.4rem clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 2.5vw, 1.6rem);
          border: 1px solid var(--rule); border-radius: var(--radius); background: var(--glass); }
.sample-tag { position: absolute; top: .75rem; left: clamp(1rem, 2.5vw, 1.6rem); margin: 0;
              font: 700 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sample .slot { min-height: 0; }
.panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.pane { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
        padding: 1.2rem 1.3rem 1.3rem; }
.pane h3 { margin-bottom: .45rem; }
.pane p { font-size: var(--step--1); margin: 0; max-width: none; }
.ledger { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 46rem; display: grid; gap: .6rem; }
.ledger li { background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--stamp);
             border-radius: 6px; padding: .8rem 1.1rem; font-size: var(--step--1); }
.price { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1rem 2rem;
         align-items: start; margin-top: 1.6rem; }
.price .ledger { margin-top: 0; }
.offer { border-left: 6px solid var(--stamp); padding: 1.5rem 1.6rem 1.7rem; }
.offer .figure { font: 700 var(--step-4)/1 var(--display); margin: 0; }
.offer .figure small { font: 400 var(--step-0)/1 var(--body); color: var(--ink-soft); }
.offer .or { font-size: var(--step-0); font-weight: 700; margin: .5rem 0 1rem; }
.offer p.go { margin-top: 1.3rem; }
.ask details { max-width: 46rem; border-bottom: 1px solid var(--rule); }
.ask details:first-of-type { margin-top: 1.4rem; border-top: 1px solid var(--rule); }
.ask summary { cursor: pointer; padding: .95rem 0; font-weight: 700; color: var(--ink); }
.ask summary:hover { color: var(--stamp); }
.ask details p { margin: 0 0 1.1rem; font-size: var(--step--1); color: var(--ink-soft); }
.closing { border-top: 1px solid var(--rule); padding-top: 2.5rem; }
.closing .go { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin: 1.4rem 0 0; }

.doc { max-width: 44rem; background: var(--card); border: 1px solid var(--rule);
       border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 3rem); }
.doc h1 { margin-bottom: 1rem; } .doc h2 { font-size: var(--step-1); margin: 2rem 0 .6rem; }
.doc pre { white-space: pre-wrap; font: inherit; margin: 0; }

@media (max-width: 56rem) {
  .entry, .front, .price { grid-template-columns: 1fr; min-height: 0; }
  .entry .case { order: 2; }
  .reading { margin-left: 0; text-align: left; }
  .bar .who { display: none; }
  .steps .btn span { display: none; }
  .paper, .row-card { flex-direction: column; }
  /* A column that may wrap starts a second column beside the first: not on a phone. */
  .paper { flex-wrap: nowrap; }
  .take-down { flex: none; align-self: stretch; }
  .row-card .side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: .3rem 1.2rem; }
  .pair { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .stamp.fresh { animation: press .45s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes press { from { transform: rotate(-3deg) scale(1.9); opacity: 0; }
                     to { transform: rotate(-3deg) scale(1); opacity: 1; } }
}