/* page.css — The shell every screen sits in: About's contents strip, the
 * element reset, the navigation bar, the panes, a panel's vertical rhythm,
 * the look preview, sub-navigation, the style guide's swatches, form
 * controls and the focus rings.
 *
 * 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.
 */
/* The palette and theme axes are in public/tokens.css, loaded above. They
   were moved out of this block, unchanged, when a second and third surface
   started needing them: the Client-First layer and the style guide. Nothing
   that decides a colour, a face, a radius or a width belongs here now. */



/* On screen the send button lives on the last card; see the note on the
   element itself for why it is hidden rather than deleted. */
#submitbtn{display:none}
@media print{#submitbtn{display:block}}

/* ---- About: the contents strip ------------------------------------------
   Sticky beneath the site's own bar, whose height is measured at runtime
   into --navh rather than guessed — it moves with the safe-area inset on a
   notched phone, and a guessed offset leaves either a gap or an overlap on
   exactly the devices most people read this on.

   Drawn against the nav's own colours, because it is an extension of the
   bar rather than a thing sitting on the page. Both themes get it right
   for free: --nav and --act already differ between them. */
.abtoc{position:sticky;top:var(--navh,52px);z-index:35;
  margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 14px;
  background:var(--nav)}
.abtoc-bar{max-width:760px;margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.abtoc-btn{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;
  margin:7px 0;padding:8px 11px;cursor:pointer;text-align:left;
  background:transparent;color:var(--on-deep-muted);
  border:2px solid var(--rule-deep);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase}
.abtoc-btn:hover,.abtoc-btn[aria-expanded="true"]{background:var(--color--background-deep);color:var(--color--text-on-deep);border-color:var(--color--border)}
/* One line, always. The label is a section title and some of them are long;
   a bar that grows to two lines shifts the whole document down as you
   scroll past a section with a long name. */
.abtoc-view{display:block;flex:1;min-width:0;height:1.35em;overflow:hidden}
/* The number and the title, as they read in the dropdown. The number is
   the shorter and more useful half when you are trying to find your place
   again, so it never truncates and the title does. */
.abtoc-txt{display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.35}
.abtoc-txt .n{flex:none;color:var(--act);letter-spacing:.1em}
.abtoc-txt .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abtoc-chev{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.abtoc-btn[aria-expanded="true"] .abtoc-chev{transform:rotate(180deg)}

/* Overlays the document rather than pushing it. A menu that shoves the
   page down means the paragraph you were reading moves while you are
   deciding where to go, and closing it moves everything back. sticky is a
   positioned element, so this anchors to the strip. */
.abtoc-menu{position:absolute;left:0;right:0;top:100%;
  background:var(--nav);border-top:1px solid var(--rule-deep);
  border-bottom:4px solid var(--act);
  box-shadow:0 12px 26px rgba(0,0,0,.4);
  max-height:min(70vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.abtoc-menu ol{list-style:none;margin:0 auto;padding:6px 0 4px;max-width:760px;display:grid;gap:2px}
.abtoc-menu a{display:flex;align-items:center;gap:12px;min-height:44px;
  padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--on-deep-muted);text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:15px}
.abtoc-menu a:hover{background:var(--color--background-deep);color:var(--color--text-on-deep)}
.abtoc-menu a .n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--act);flex:none;min-width:2.2em}
/* Gold in one theme, teal in the other, and both read on this ground.
   Where you ARE gets a filled row rather than a colour, so it survives
   greyscale and every kind of colour blindness. */
.abtoc-menu a[aria-current="true"]{background:var(--color--background-deep);color:var(--color--text-on-deep)}
.abtoc-div{max-width:760px;margin:8px auto 2px;padding-top:8px;
  border-top:1px solid var(--rule-deep);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-muted)}
.abtoc-menu :focus-visible{box-shadow:0 0 0 3px var(--nav),0 0 0 6px var(--color--text-on-deep)}

/* Visually hidden, still read aloud. The button's visible text is the
   section you are in; a screen reader also needs to be told what pressing
   it does. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Never on paper: an index of a document you are holding all of. */
@media print{.abtoc{display:none!important}}

*{box-sizing:border-box}
/* Nothing here needs to move to be understood, and for some people
   movement is not a flourish but a symptom. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Two sticky bars stack above the content — the nav, and About's contents
   strip. Without this, every anchor link, every in-page Find, and the
   browser's own restore-scroll-on-back land the thing you asked for
   underneath them. The value is measured at runtime; this is the fallback
   for the moment before the script runs. */
html{scroll-padding-top:var(--stickyh,108px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:var(--page-max);margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}

.tabs{position:sticky;top:0;z-index:40;background:var(--nav);border-bottom:6px solid var(--act);
  padding-top:env(safe-area-inset-top,0px)}
/* One row, always. The bar holds two things now, and letting them wrap
   onto a second line would double the height of something pinned to the
   top of every screen. The name shrinks and, on a display narrower than
   any current phone, truncates. */
.tabs .wrap{display:flex;gap:0;align-items:center;flex-wrap:nowrap}
.tab{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.03em;
  color:var(--on-deep-muted);background:none;border:0;padding:14px 18px;cursor:pointer;border-bottom:6px solid transparent;margin-bottom:-6px}
.tab.active{color:var(--color--text-on-deep);border-bottom-color:var(--verify)}
.tab .n{font-family:var(--mono);font-size:11px;background:var(--verify);color:var(--on-verify);padding:1px 6px;margin-left:7px;border-radius:9px}

header{padding:28px 0 18px}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--muted);margin:0}
h1{font-family:var(--cond);font-weight:var(--h1-weight);font-size:clamp(25px,6vw,34px);line-height:1.08;letter-spacing:var(--h1-tracking);text-transform:var(--display-transform);margin:.3em 0 .3em}
/* The home headline is the project's whole statement, and the only thing
   above the fold that has to land. It gets its own step up rather than
   pulling every h1 on the site with it — About's is a page title and
   should stay a page title. */
#pane-home h1{font-size:clamp(30px,8vw,44px);line-height:1.06;letter-spacing:-.022em}
.lede{color:var(--muted);margin:0;font-size:15px;max-width:56ch}

section.pane{display:none}
section.pane.active{display:block}
.form_field-wrapper{margin:0 0 15px}

/* ---- vertical rhythm: the panel owns it, nothing inline ---------------
   The spacing here was thirty-odd inline margins — 10px, 14px, 15px, 16px,
   18px, 22px — picked one at a time. "Save" sat hard against the field
   above it in one panel and against an error line in another, and every new
   panel inherited whichever neighbour was copied.

   Four roles, four rules, and `npm test` fails on an inline margin anywhere
   in the shipped page so they cannot come back one at a time. (The check
   greps for the attribute; this comment is deliberately worded not to trip
   its own rule.) */

/* A sub-heading opening a new group of controls inside one panel. */
.form_label.lab-sep{margin:20px 0 6px}

/* The line a panel writes its result into. FIXED position relative to the
   control above, so "Saved" lands in the same place in every panel. */
.formstatus{margin:10px 0 0}

/* A row of buttons. One wrapper, one margin, everywhere — this is the rule
   the button flavours (.go primary, .go secondary, .btn2) never had. */
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0}
.actions:first-child{margin-top:0}

/* THE RULE THE BUTTON FLAVOURS NEVER SHARED. `.go primary`, `.go secondary`
   and `.btn2` each carried their own spacing or none, so "Save" sat hard
   against the field above it in one panel and floated in another. One gap,
   whichever flavour it is and whether or not an error line precedes it —
   .form_error is display:none until it fires, so it contributes nothing when it is
   not showing and the button does not move when it is. */
/* A full-width button used to carry a bottom margin of its own (12px), and
   consecutive ones relied on it. Kept as screen glue until the containers are
   stacks, at which point the gap is the stack's. */
.button.is-full{margin:0 0 12px}
.panel_component > .button,
.panel_component > .actions{margin-top:16px}
/* A status line belongs to the control above it, not to the next thing. */
.panel_component > .button + .formstatus,
.panel_component > .actions + .formstatus{margin-top:10px}
.panel_component > .lb-back{margin:0 0 14px}

/* Anything that begins a new group after prose or another control. */
.grouped{margin-top:16px}
/* A callout carrying its own bottom gap rather than the section's. */
.callout.tight{margin:0 0 10px}
/* A hint sitting beside a control rather than under it. */
.form_help.beside{display:inline;margin:0 0 0 8px}
/* The dot between two inline links. */
.dot-sep{color:var(--muted);margin:0 8px}
.attach-clear{margin-top:6px}
/* A moderator's assessment, under the report it belongs to. */
.txt.assessment{color:var(--muted);margin-top:6px;font-style:italic}
.form_field-wrapper:last-child{margin-bottom:0}
/* Somebody else's writing, published as they typed it: their line breaks
   and their indentation are kept, and a long unbroken string wraps instead
   of pushing the page sideways. */
.legaltext{white-space:pre-wrap;overflow-wrap:anywhere}
/* Operator-written page copy. Their paragraph breaks are theirs to keep,
   and a pasted URL wraps instead of pushing the page sideways. */
.copytext{white-space:pre-wrap;overflow-wrap:anywhere}
/* The look preview. Deliberately built from the site's own components
   rather than from swatches: a row of colour chips tells an operator
   nothing about whether their site will be readable. */
.lp-chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-sm);
  margin:0 6px 6px 0}
.lp-confirmed{background:var(--verify);color:var(--on-verify)}
.lp-serious{background:var(--seal);color:var(--on-seal)}
.lp-open{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}
.opt-req{font-size:12px;color:var(--muted);font-weight:400}

/* ---- the two preview frames ----------------------------------------
   WHY TWO FRAMES AND NOT A CARD. The old preview was a headline, a
   paragraph, one button and three chips. It answered "are these colours
   readable" and could not answer "what will my site LOOK like" — which is
   the question an operator is actually asking, and the one they otherwise
   have to save and find out.

   HOW THE SCALING WORKS, and why it is not an approximation. Each frame
   holds a page rendered at a REAL viewport width — 1280px and 390px — and
   shrinks the whole thing with transform:scale(). Type keeps its true
   proportion to the column it sits in, and the width difference between
   two themes is the actual difference rather than a drawing of one. Laying
   out a miniature at 360px and calling it a desktop would show neither.

   NO IFRAME. Every frame is an ordinary element carrying data-palette and
   data-theme, which is what the attribute-selector change bought: the
   tokens cascade in and the frame repaints on the same keystroke as the
   page behind it. An iframe would need a second copy of this stylesheet
   and would have to be let through the gate.

   BOTH FRAMES ALWAYS SHOW. Someone choosing on a phone still has to see
   what a desktop visitor gets; the reverse is likelier still. */
/* ---- sub-navigation inside a pane ----------------------------------
   Used by the admin page and the staff portal. Show and hide only: it
   changes no URL and pushes no history entry, because every pane is in the
   DOM from the first byte and popstate must never route while the site is
   gated. See HANDOFF §9. */
/* The desk checkboxes. Display only — a desk decides which portal tab
   opens first and never hides anything. */
/* The generated style guide's swatches. Values are read off the rendered
   page at runtime, so this is layout only — no colour is named here. */
.swatches{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0}
.swatches .sw{display:flex;align-items:center;gap:8px;font-size:13px}
.swatches .chip{width:26px;height:26px;border-radius:var(--radius-sm);
  border:1px solid var(--rule);flex:none}
.swatches .nm{color:var(--muted)}
.swatches code{font-family:var(--mono);font-size:12px}
.deskgrid{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 14px}
.deskgrid label{display:flex;align-items:center;gap:7px;font-size:14px}
.lp-frames{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin:14px 0 0}
.lp-frame{margin:0}
.lp-frame figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:6px}
.lp-screen{overflow:hidden;border:var(--border-main) solid var(--rule);
  border-radius:var(--radius-sm);background:var(--paper)}
/* The scaled page. transform-origin matters: without it the content is
   scaled about its centre and most of it leaves the box. */
.lp-page{transform-origin:top left;pointer-events:none;user-select:none}
.lp-desktop .lp-screen{width:352px;height:238px}
.lp-desktop .lp-page{width:1280px;height:866px;transform:scale(.275)}
.lp-phone .lp-screen{width:132px;height:238px}
.lp-phone .lp-page{width:390px;height:703px;transform:scale(.3385)}
@media(max-width:520px){
  /* Stacked. The desktop frame shrinks rather than scrolling sideways —
     the page must never scroll horizontally, and a frame is not a table. */
  .lp-desktop .lp-screen{width:100%;max-width:288px;height:195px}
  .lp-desktop .lp-page{transform:scale(.225)}
}

/* The miniature itself. Its own classes, all drawn from the same tokens
   the real page uses, so a theme or palette change moves it exactly as it
   moves the site. Deliberately NOT the real nav and hero markup: those
   carry routing, focus handling and a gate, none of which belong in a
   picture of a page. */
.lp-page{background:var(--paper);color:var(--ink);font-family:var(--sans);
  display:flex;flex-direction:column}
.lp-nav{background:var(--color--background-deep);color:var(--color--text-on-deep);
  padding:17px 24px;display:flex;align-items:center;gap:18px;font-size:15px}
.lp-nav .lp-navlinks{font-size:14px;opacity:.82;display:flex;gap:16px}
.lp-brand{font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;margin-left:auto}
.lp-brand .a{color:var(--brand-mark-deep)}
.lp-wrap{max-width:var(--page-max);margin:0 auto;padding:34px 24px;width:100%;flex:1}
.lp-h1{font-family:var(--cond);font-weight:var(--h1-weight);font-size:38px;line-height:1.12;
  letter-spacing:var(--h1-tracking);text-transform:var(--display-transform);margin:0 0 12px}
.lp-lede{font-size:17px;line-height:1.5;color:var(--ink-2);margin:0 0 20px;max-width:52ch}
.lp-btns{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.lp-btn{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;padding:13px 20px;border-radius:var(--radius);
  border:var(--border-main) solid var(--ink);box-shadow:var(--shadow)}
.lp-btn.p{background:var(--act);color:var(--act-fg)}
.lp-btn.s{background:var(--card);color:var(--ink)}
.lp-card{background:var(--card);border:var(--border-main) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:20px}
.lp-ref{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.06em}
.lp-cardh{font-family:var(--cond);font-weight:700;font-size:19px;margin:6px 0 10px;
  letter-spacing:var(--h1-tracking)}
.lp-body{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0 0 12px}
.lp-field{margin-bottom:22px}
.lp-lab{display:block;font-family:var(--mono);font-size:12px;letter-spacing:var(--label-tracking);
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.lp-input{border:var(--border-main) solid var(--field);border-radius:var(--radius-sm);
  background:var(--card);padding:12px 13px;font-size:15px;color:var(--muted)}
.lp-foot{border-top:1px solid var(--rule);padding:16px 24px;font-size:13px;
  color:var(--muted);text-align:center}



/* One focus ring for everything that can take focus.
   Two rings, not one: a single colour always loses against some background,
   and this app has buttons on white, on dark navy and on green. The inner
   ring is dark, the outer is white, so whichever the background is, one of
   the two stands against it. Three pixels because a hairline is what the
   browser gives you by default, and it is what made the Back and Next
   buttons look unfocused when they were focused. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 6px var(--color--surface), 0 0 0 8px var(--focus);
  border-radius:1px}
/* On the dark navigation bar the rings swap: light inside, dark outside. */
.tabs :where(a,button):focus-visible,.navmenu :where(a,button):focus-visible{
  outline-color:var(--color--text-on-deep);box-shadow:0 0 0 6px var(--color--background-deep), 0 0 0 8px var(--color--text-on-deep)}
/* The card itself takes focus when it opens so the new question is read
   out. That is not something to draw a box around. */
.card:focus,.card:focus-visible{outline:none;box-shadow:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.row{grid-template-columns:1fr}}


.chk-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;max-height:220px;overflow:auto;border:1px solid var(--rule-soft);margin:0 0 14px}
@media(max-width:520px){.chk-grid{grid-template-columns:1fr 1fr}}
.chk-grid label{display:flex;gap:6px;align-items:center;padding:6px 9px;font-size:13.5px;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.chk-grid input{accent-color:var(--ink)}

/* The "more than one state" picker. Reuses chk-grid's shape so it reads as
   the same kind of control as the notification state list, and stays out
   of the way entirely for the single-state case, which is almost all of
   them. */
.linkish{background:none;border:0;padding:4px 0 0;font-size:12.5px;color:var(--verify);text-decoration:underline;cursor:pointer;font-family:inherit}
.statesmore{margin-top:8px}
/* No inner scroll. A scroll box inside a card that is itself on a
   scrolling page traps the gesture on a phone, and it cut the list off at
   Illinois with nothing to say another forty states were below. The list
   flows with the page instead — longer, but nothing is hidden. */
.stgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--rule-soft);margin:6px 0 0}
@media(max-width:520px){.stgrid{grid-template-columns:1fr 1fr}}
.stgrid label{display:flex;gap:8px;align-items:center;padding:9px 10px;font-size:13.5px;border-bottom:1px solid var(--rule-soft);cursor:pointer;min-height:40px}
.stgrid label:has(input:checked){background:var(--verify-bg);font-weight:600}
.stgrid input{accent-color:var(--ink)}

/* Verification results. Deliberately not a single green banner: each check
   answers a different question, and collapsing them would hide which one
   failed at the moment that matters most. */
.vhead{padding:12px 14px;margin:0 0 12px;font-size:14px;line-height:1.5;border-left:4px solid}
.vhead.vok{background:var(--verify-bg);border-color:var(--verify)}
.vhead.vbad{background:var(--seal-bg);border-color:var(--seal);color:var(--seal)}
.vrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--rule-soft);border-top:0;font-size:13.5px;line-height:1.45}
.vrow:first-of-type{border-top:1px solid var(--rule-soft)}
.vmark{font-weight:700;width:16px;flex:0 0 16px;text-align:center}
.vrow.vok .vmark{color:var(--verify)}
.vrow.vbad .vmark{color:var(--seal)}
.vrow.vwait .vmark{color:var(--muted)}
.vdet{margin-top:14px;border:1px solid var(--rule-soft);padding:10px 12px}
.vdet summary{cursor:pointer;font-family:var(--cond);font-size:14px}
.vdet p{margin:8px 0}
.vpre{background:var(--paper);border:1px solid var(--rule-soft);padding:10px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-all;max-height:280px}
.vkv{font-size:12px;margin-top:6px}
.vkv b{display:block;font-weight:400;color:var(--muted)}
.vkv code{font-family:var(--mono);font-size:11.5px;word-break:break-all}


/* The notice behind the handover's second door. Crimson as STATUS — the word
   the look reserves it for — on a tinted ground rather than as a shouted
   block, so it reads as a warning and not as an error the operator has
   already caused. --seal-bg is the same 8% tint the serious status chip
   stands on, so this is the site's existing serious surface rather than a
   new one. */
.own-danger{color:var(--seal);background:var(--seal-bg);
  border-left:3px solid var(--seal);padding:12px 14px;border-radius:var(--radius)}

/* ---------- a logbook on the list ----------

   ONE BUTTON PER LOGBOOK, not a row with a small link in it. The list used to
   end each row with a text button reading "Questions", which was the smallest
   thing on the row when it is the only thing anybody comes to the row to do —
   and it named one part of what lies behind it. Opening a logbook is where the
   questions, the schedule, the upload freeze, launching, closing and the chain
   download all are.

   A <button> wrapping the whole tile, so the hit target is the tile and the
   keyboard gets one stop per logbook rather than one per control. */
.lb-tile{display:block;width:100%;text-align:left;margin:0 0 10px;padding:16px 18px;
  background:var(--card);color:var(--ink);cursor:pointer;
  border:var(--border-main) solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);font-family:inherit;min-height:56px;
  transition:border-color .12s ease,box-shadow .12s ease}
.lb-tile:hover{border-color:var(--ink-2)}
.lb-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lb-tile-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lb-tile-head b{font-family:var(--cond);font-size:17px;font-weight:700}
/* The chip carries the state. It is the one place on the tile where colour
   means something, so nothing else on it is coloured. */
.lb-tile-state{flex:none}
.lb-tile-sub{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
/* The slug, the question count and whether it takes files — the three things
   worth knowing without opening it. Monospace for the slug's sake: it is an
   address, and it is sealed into every report filed here. */
.lb-tile-meta{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;
  letter-spacing:.03em;color:var(--muted)}
.lb-tile-go{display:block;margin-top:10px;font-family:var(--cond);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand-mark)}
.lb-tile:hover .lb-tile-go{color:var(--ink)}

/* An optional piece of page text nobody has written yet, while an
   administrator has editing switched on.

   It is `hidden` the rest of the time — a visitor filing a report should not be
   shown an empty paragraph or a note meant for the operator. But hidden means
   its pencil is invisible too, so there would be no way to write it a first
   time. Revealed here, with the prompt as ::after rather than as text in the
   element: text put in the element would read as content, and the dialog takes
   what it shows from the slot list rather than from the page. */
body.editing [data-copy].copy-unwritten{display:block;border:1px dashed var(--rule);
  border-radius:var(--radius);padding:12px 14px;margin:0 0 14px;min-height:24px}
body.editing [data-copy].copy-unwritten::after{content:'Nothing written here yet';
  font-family:var(--cond);font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted)}

/* The volunteer form's honeypot. Off-screen rather than display:none, because
   some bots skip what is display:none and fill what is merely positioned away —
   and a real person using a screen reader is kept out of it by aria-hidden and
   tabindex="-1" on the field itself, not by this. */
.vol-nope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- an upload limit, as a row ---------------------------------------
   Eight numbers an operator sets, each inherited from the layer above
   until they type in it. The row has to carry three things at once: what
   the limit is called, the box, and WHERE THE NUMBER IN FORCE COMES FROM
   — because an operator shown only the effective value cannot tell a
   limit they set from one they inherited, and the first thing they do
   then is type all eight of the numbers already showing, which freezes
   the deployment against every later change underneath it.

   The box is narrow on purpose. A full-width field for "3" invites a
   sentence. */
.limrow{
  display:grid;
  grid-template-columns:1fr 7.5rem;
  gap:var(--space--xxsmall) var(--space--xsmall);
  align-items:center;
  padding:var(--space--xxsmall) 0;
  border-bottom:1px solid var(--rule-soft);
}
.limrow:last-of-type{border-bottom:0}
.limrow .limlab{font-size:var(--text--small);line-height:var(--leading--body)}
/* The unit belongs to the box, not to the sentence above it: "25" is not a
   limit until it says megabytes. */
.limrow .limunit{color:var(--muted);font-size:var(--text--tiny)}
/* Spans both columns so a long provenance line does not squeeze the box. */
.limrow .limsrc{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:var(--text--tiny);
  line-height:var(--leading--body);
}
/* An inherited value is shown as the placeholder, so an EMPTY box visibly
   means "whatever the layer above says" rather than "nothing" — which is
   the one distinction this whole panel exists to keep. */
.limrow input.form_input{margin:0;text-align:right}

@media (max-width:30rem){
  /* The box under the label rather than beside it: at phone width a
     7.5rem column leaves the label two words wide. */
  .limrow{grid-template-columns:1fr}
  .limrow input.form_input{text-align:left}
}