/* pages.css — The pages the site writes rather than collects: the About
 * document's own components, the home page, the footer, and what all of it
 * looks like on paper.
 *
 * One contiguous slice of the <style> block public/index.html used to
 * carry, in the order it was in, so the cascade is unchanged. It decides
 * no colour and no shape of its own: those are the look’s, in
 * public/tokens.css. See docs/frontend-files.md.
 */
/* ---- About: the document components ------------------------------------
   The About page carries a long-form document — the case for the project,
   an operator's guide, and the technical companion — and it needs shapes
   the rest of the site does not have: numbered steps, role cards with a
   "cannot" half, striped limitation notes, a crossing marker.

   Written against the site's tokens rather than fixed colours, so the
   palette is changed in one place and the print stylesheet can restate
   the handful of values that have to differ on paper.

   Namespaced ab- without exception. The source document called these
   .card, .step, .rule and .meta — all four already mean something else in
   the submit form, and the collision would be silent and awful.

   --ab-bw and --ab-stripe are declared once so the print stylesheet can
   take the whole document down to hairlines in two lines rather than
   fifteen. */
:root{ --ab-bw:2px; --ab-stripe:9px }

.ab{font-size:16px;line-height:1.6}
/* Sections need less air now that the rule between them is visible.
   68px of padding was compensating for a separator nobody could see. */
.ab > section{padding:26px 0;border-top:1px solid var(--rule)}
.ab > section:first-child{padding-top:6px;border-top:0}
/* The seam between the operator's half of About and the software's. It is
   also the marker abtocBuild reads to decide which of the two indexes a
   section belongs in, so the split is one element rather than a second list
   of section ids kept in step by hand. */
.ab-seam{padding:30px 0 6px;border-top:3px solid var(--ink);margin-top:12px}
.ab-seam h2{margin-top:2px}
.ab h2{font-family:var(--cond);font-weight:700;font-size:clamp(21px,5vw,26px);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.ab h3{font-family:var(--cond);font-weight:700;font-size:18px;margin:26px 0 6px;
  color:var(--ink);text-transform:none;letter-spacing:0}
.ab h4{font-family:var(--cond);font-weight:700;font-size:17px;margin:0 0 5px;color:var(--ink)}
.ab p{color:var(--ink-2);margin:0 0 12px}
.ab > section > p:last-child{margin-bottom:0}
.ab .ab-lede{font-size:17px;color:var(--ink-2);margin-bottom:16px}
.ab .ab-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
/* Its own tint rather than the divider colour. The two were the same by
   accident, so darkening the dividers to make them visible dropped inline
   code to 4.11:1 — a real regression, caught by measuring rather than by
   looking, because 4.11 and 4.5 are indistinguishable by eye. */
.ab code{font-family:var(--mono);font-size:.92em;background:var(--color--background-alt);padding:.1em .35em;
  border-radius:var(--radius-sm)}
.ab a{color:var(--ink)}

/* A white panel on the page ground. The site's own --card and --paper are
   named the other way round from the source document's --paper and
   --page; getting that backwards inverts every surface, so it is worth
   the sentence. */
.ab-card{background:var(--card);border:var(--ab-bw) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.ab-stack{display:grid;gap:14px}
.ab-card p{font-size:16px}
.ab-card p:last-child{margin-bottom:0}

/* Small uppercase metadata above a heading. Stacks on a narrow screen
   because three of these never fit on one line, and a wrapped row that
   starts with a middot reads as a typo rather than a separator. */
/* These are paragraphs, and `.ab p` is more specific than a bare class, so
   the margin here was being replaced by the ordinary paragraph one. The
   eyebrow already carried the `.ab` prefix for exactly this reason; these
   two did not, and lost their spacing silently. */
.ab .ab-meta{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.ab-meta span + span::before{content:"\00B7";margin-right:10px;color:var(--field)}
@media(max-width:560px){
  .ab-meta,.ab-meta span{display:block}
  .ab-meta span + span::before{content:none}
  .ab-meta span{margin-top:3px}
}

/* Numbered steps. The number comes from data-n so the markup carries no
   duplicate text for a screen reader to read out twice. */
.ab-steps{list-style:none;margin:0;padding:2px 18px;background:var(--card);
  border:var(--ab-bw) solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.ab-step{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding:18px 0;
  border-top:var(--ab-bw) solid var(--rule-soft)}
.ab-step:first-child{border-top:0}
.ab-step::before{content:attr(data-n);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--muted);padding-top:4px;min-width:2.8em}
.ab-step p{font-size:16px;margin:0 0 11px}
.ab-step p:last-of-type{margin-bottom:0}
.ab-step .ab-who{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:9px}

/* A labelled divider marking where the record crosses a border. */
.ab .ab-crossing{display:flex;align-items:center;gap:14px;margin:26px 0}
.ab-crossing::before,.ab-crossing::after{content:"";flex:1;
  border-top:var(--ab-bw) dashed var(--field)}
.ab-crossing span{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}

/* Roles. The "cannot" half is the load-bearing part of each card — what a
   role is prevented from doing is the actual claim — so it gets a rule
   above it rather than being another sentence in the paragraph. */
.ab-roles{display:grid;gap:14px;margin-top:14px}
@media(min-width:620px){.ab-roles{grid-template-columns:1fr 1fr}}
.ab-role h4{font-size:19px}
.ab-cannot{display:block;margin-top:11px;padding-top:11px;
  border-top:var(--ab-bw) solid var(--rule-soft);font-size:15px;color:var(--ink-2)}
.ab-cannot b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ab-flag{border-left:var(--ab-stripe) solid var(--ink)}

/* Striped notes. Crimson is "not yet" and gold-deep is "still open" —
   both status uses, never a button, which is the palette rule the whole
   design rests on. An item with no stripe colour is an ordinary fact. */
.ab-rules{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ab-rule{background:var(--card);border:var(--ab-bw) solid var(--rule);
  border-left:var(--ab-stripe) solid var(--ink);border-radius:var(--radius);
  padding:13px 16px;font-size:15.5px;color:var(--ink-2)}
.ab-rule.no{border-left-color:var(--seal)}
.ab-rule.open{border-left-color:var(--gold-deep)}
.ab-rule b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* Key and value, for the infrastructure and audience lists. */
.ab-kv{margin:0;padding:0;list-style:none}
/* A row was 76px tall for two words. The divider is the only thing
   separating one entry from the next here — there is no card around
   them — so it takes the stronger rule, and the padding comes down
   now that it is not the only signal. */
.ab-kv li{padding:9px 0;border-top:1px solid var(--rule)}
.ab-kv li:first-child{border-top:0;padding-top:2px}
.ab-kv li:last-child{padding-bottom:2px}
.ab-kv b{display:block;font-family:var(--cond);font-weight:700;font-size:16px;
  line-height:1.3;color:var(--ink)}
.ab-kv span{display:block;font-size:15px;line-height:1.45;color:var(--ink-2)}

/* The dark closing block. It sets its own foreground colours because it
   inverts the page, and those are the only fixed colours in this whole
   section — a block that is dark in both themes needs light text in both. */
.ab-close{background:var(--nav);color:var(--color--text-on-deep);padding:34px 20px;margin:26px 0 0;
  border-radius:var(--radius)}
.ab-close h2,.ab-close h3,.ab-close h4{color:var(--color--text-on-deep)}
.ab-close p{color:var(--on-deep-muted)}
.ab-close .ab-eyebrow{color:var(--on-deep-muted)}
/* Links in the dark block are white and underlined, not tinted. The
   action colour is gold in one theme and teal in the other, and teal on
   this near-black ground measures 2.84:1 — it fails, and a link nobody
   can read is worse than a link with no colour. Underline carries the
   affordance instead, which works in both themes and in greyscale. */
.ab-close a,.ab-close .linkish{color:var(--color--text-on-deep);text-decoration:underline}
.ab-close a:hover,.ab-close .linkish:hover{color:var(--act)}
.ab-needs{display:grid;gap:0;margin-top:20px;border-top:var(--ab-bw) solid var(--rule-deep)}
@media(min-width:620px){.ab-needs{grid-template-columns:1fr 1fr;column-gap:28px}}
.ab-needs > div{padding:16px 0;border-bottom:var(--ab-bw) solid var(--rule-deep)}
.ab-needs h4{font-size:18px}
.ab-needs p{font-size:15.5px;margin:0}

/* Classic takes the whole document down to hairlines in one place. The
   tokens already handle colour, radius and shadow; only the stroke widths
   and the stripe are set in pixels above, so only they are restated. */

@media print{
  .ab-card,.ab-steps,.ab-rule{box-shadow:none;border-radius:0}
  .ab-close{background:none;color:#000;padding:0}
  .ab-close h2,.ab-close h3,.ab-close h4,.ab-close p{color:#000}
  .ab-needs,.ab-needs > div{border-color:#999}
}

/* Home. The one paragraph under the headline carries the project's claim,
   so it is set larger than body copy and smaller than the lede — the
   third step in a ladder rather than a fourth voice. */
.homelede{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;max-width:62ch}
.homenote{font-size:14px;line-height:1.55;color:var(--muted);margin:16px 0 0}

.sitefoot{max-width:760px;margin:40px auto 0;padding:16px;text-align:center;font-size:12.5px;color:var(--muted)}
.sitefoot a{color:var(--muted);text-decoration:underline;cursor:pointer}
.sitefoot .ver{margin-top:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.sitefoot .ver a{text-decoration:none;border-bottom:1px dotted var(--rule)}
.sitefoot .ver a:hover{color:var(--ink)}
.sitefoot .poweredby{margin-top:6px;font-size:11.5px;color:var(--muted)}
.sitefoot .poweredby a{color:var(--muted);text-decoration:underline}

#printsheet{display:none}
@media print{
  /* Only when a report has actually been laid out for printing. Otherwise
     the page prints itself — see the form rules further down. */
  body.printing-report *{visibility:hidden}
  body.printing-report #printsheet, body.printing-report #printsheet *{visibility:visible}
  body.printing-report #printsheet{display:block;position:absolute;top:0;left:0;width:100%;padding:30px;font-family:var(--sans)}
  .ps-h{font-family:var(--cond);font-weight:700;font-size:20px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:16px}
  .ps-row{display:flex;gap:20px;margin-bottom:10px;font-size:13px}
  .ps-row .k{font-weight:700;width:160px;flex:0 0 160px}
  .ps-narr{border:1px solid #999;padding:12px;margin:14px 0;font-size:13px;line-height:1.5;white-space:pre-wrap}
  .ps-instr{border:1px solid #999;padding:12px;margin:14px 0;font-size:12px;line-height:1.6}
  .ps-instr ol{margin:6px 0 0;padding-left:18px}
  .ps-decl{border:2px solid #000;padding:14px;margin-top:22px;font-family:var(--mono);font-size:12px;line-height:1.6}
  .ps-sig{margin-top:36px;display:flex;gap:40px}
  .ps-sig div{flex:1;border-top:1px solid #000;padding-top:6px;font-size:11px}
  .ps-integrity{font-size:11px;color:#444;margin-top:10px}
}
/* ---- Printing the report form ------------------------------------------
   The paper form IS the form. There is no second copy kept in step by hand:
   print this page and you have every question in the order they are asked,
   including the ones only some people are shown, because print reveals all
   the cards at once. A question added on a Tuesday is on the paper form on
   the Tuesday. */
/* Shown only on the opening card, which is the one the nav marks .first. */
.introhow{display:none}
.cardnav.first ~ .introhow{display:block;margin-top:-14px}
@media print{.introhow{display:none!important}}

.introlen{font-size:13.5px;color:var(--muted);line-height:1.5;margin:14px 0 0;
  border-top:1px solid var(--rule);padding-top:12px}
@media print{.introlen{display:none}}

#printhead{display:none}
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  /* Everything that only makes sense on a screen. */
  .tabs,.navmenu,.sitefoot,.cardnav,.carderr,.form_error,
  .devbadge,.corner,.lockscreen,
  .linkish,.rrow .redit{display:none!important}
  .pane:not(.active){display:none!important}

  #printhead{display:block;margin-bottom:10mm;border-bottom:2pt solid #000;padding-bottom:4mm}
  #printhead h1{font-family:var(--cond);font-size:19pt;margin:0 0 3mm}
  #printhead p{margin:0 0 2mm;font-size:10pt;line-height:1.45}
  #printhead .stamp{font-family:var(--mono);font-size:9pt;margin-top:3mm}

  /* The screen's hard drop-shadow is a screen device. On paper it prints
     as a solid black edge on every card — expensive in ink and wrong to
     look at. Nothing keeps a shadow or a rounded corner here. */
  *{box-shadow:none!important;border-radius:0!important}

  /* Every question, in order, rather than one at a time. */
  .card{display:block!important;border:0;padding:0;margin:0 0 7mm;
    break-inside:avoid;page-break-inside:avoid}
  .card h2{font-family:var(--cond);font-size:13pt;margin:0 0 1.5mm}
  .cardsub{font-size:9.5pt;color:#333;margin:0 0 3mm}
  .card[data-card="intro"]{display:none!important}

  /* Somewhere to actually write. A printed box a pen can go in beats an
     input that prints as a hairline you cannot see. */
  input[type="text"],input[type="email"],input[type="date"],
  input[type="time"],input[type="number"],select{
    border:0!important;border-bottom:1pt solid #000!important;background:none!important;
    min-height:9mm;width:100%;border-radius:0}
  textarea{border:1pt solid #000!important;background:none!important;min-height:45mm;width:100%}

  /* Every option as an empty box to tick, whatever it is on screen —
     a tile, a radio, a checkbox. Nothing arrives pre-ticked on paper. */
  .picktile,.qual,.esc,.choice_item,.stgrid label{
    border:0!important;box-shadow:none!important;background:none!important;
    padding:0 0 0 7mm!important;position:relative;font-size:10pt;
    min-height:0;margin:0 0 1.5mm;display:block;text-align:left}
  .picktile::after,.esc::after{content:''!important;position:absolute;
    left:0;top:0.4mm;right:auto;transform:none;
    width:4mm;height:4mm;border:1pt solid #000!important;background:none!important;border-radius:0}
  .choice_item::before,.stgrid label::before,.qual::before{content:'';position:absolute;
    left:0;top:0.4mm;width:4mm;height:4mm;border:1pt solid #000}
  .choice_input,.stgrid input,.qual input,.pick input,.chk-grid input{display:none!important}
  /* The category boxes are real checkboxes, so on paper they draw
     themselves rather than needing a stand-in. */
  .cattile{border:0!important;background:none!important;padding:0!important;min-height:0;
    margin:0 0 1.5mm;font-size:10pt;box-shadow:none!important}
  .cattile input{display:block!important;appearance:none;-webkit-appearance:none;
    width:4mm;height:4mm;border:1pt solid #000;flex:0 0 4mm;margin-top:0.4mm}
  .catcount{display:none!important}
  .picktile b,.cattile{font-weight:400!important}
  .picktile small{display:block;color:#333;font-size:8.5pt}
  .cattiles{display:block}
  .stgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 4mm}

  /* On screen this is simply not shown unless it applies. On paper
     everything is shown at once, so it says who it is for — otherwise a
     reader assumes every question is theirs to answer. */
  .card[data-card="evidence"] h2::after{content:' — only if you have a photo or video'}
  .card[data-card="evidence"] h2::after{font-family:var(--sans);font-weight:400;font-size:9.5pt;color:#333}

  /* The browser's own date and time widgets. Useful on a screen, clutter on
     paper — a printed "mm/dd/yyyy" in grey is not a prompt, it is noise. */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator{display:none}
  input[type="date"],input[type="time"]{color:#000}

  /* A file picker is not a thing you can operate with a pen. */
  .card[data-card="evidence"] input[type="file"],
  .card[data-card="evidence"] .attlist,.card[data-card="evidence"] .attbar{display:none!important}
  .card[data-card="evidence"] .drop::after{content:'Photos and video can only be attached on the website.';
    display:block;font-size:9.5pt;font-style:italic}

  /* Folded sections are opened before printing (see beforeprint below) —
     these just stop the twisty arrow printing next to them. */
  details > summary{list-style:none;font-weight:700}
  details > summary::-webkit-details-marker{display:none}

  /* The review card is a summary of answers nobody has given yet. */
  .card[data-card="send"] .review,.rfiles{display:none!important}
}