/* Content surfaces: homepage, document library, sections, status check.
 *
 * Every colour, space and type value here is a token from search/style.css.
 * Nothing new is invented — the register and the website are one service and
 * must not look like two, and the brand orange in particular has exactly one
 * legitimate use (the masthead seam) which this file does not touch.
 *
 * Load order matters: this file assumes style.css has already defined :root.
 */

/* ---------------------------------------------------------------- homepage */

.hero--home {
  padding-bottom: var(--space-6);
}

.home-actions {
  display: grid;
  gap: var(--space-4);
  /* Two side by side once there is room for both to hold a usable field;
     below that they stack rather than shrink to uselessness. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: var(--space-5);
}

.home-action {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.home-action > label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.home-action__row {
  display: flex;
  gap: var(--space-2);
}

.home-action__row input {
  flex: 1 1 auto;
  min-width: 0; /* without this a flex input refuses to shrink and overflows */
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.home-action__row button {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-dark);
  background: var(--color-brand);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  cursor: pointer;
}

.home-action__row button:hover {
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
}

.home-action__note {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.home-sections {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  /* No top margin. The hero closes with space-6 of padding and .main-body
     opens with another space-6 — a third value here stacked to ~110px of dead
     ground, enough that the cards read as a separate page rather than as the
     next thing to do. Measured, not guessed. */
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

/* The section cards. Rebuilt 2026-08-02 after the first version was — fairly —
   called lazy. It had four faults and they compounded:

   * A cold grey fill (--color-sunken) with a grey --color-border-strong bar
     down the side. That pairing is what a DISABLED control looks like, so six
     of them in a grid read as six things you cannot use.
   * The heading was --color-link with `text-decoration: underline`, inside an
     <a> that already wraps the whole card. Underlining a heading in a card that
     is entirely a link is redundant twice over, and a big underlined serif
     reads as an unstyled document rather than a designed one.
   * Blue, on a register whose brand is the burnt orange in its own logo. The
     page had a brand and the cards ignored it.
   * Nothing distinguished them from each other or drew the eye anywhere.

   What replaces it: white against the page, a hairline, and a 3px brand rule
   across the top so the grid has a rhythm and the colour is BIPA's. --color-brand
   (#b05108, 5.2:1) is the token licensed to carry weight — the #F79448 band
   orange is 2.26:1 and stays the masthead seam and nothing else. */
.home-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(21 23 26 / 5%);
}

.home-section:hover {
  background: var(--color-bg);
  border-color: var(--color-brand);
  box-shadow: 0 6px 18px rgb(21 23 26 / 10%);
}

.home-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  /* Ink, not link blue, and no underline. WCAG 1.4.1 is satisfied without
     them: the affordance is the card itself — a bordered, raised region with a
     chevron, a hover state and a focus ring — not a colour difference in a run
     of prose. */
  color: var(--color-text);
  text-decoration: none;
}

.home-section:hover h2 {
  color: var(--color-brand-deep);          /* 7.6:1 */
}

.home-section p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* The chevron. Drawn from borders rather than written as a "→" character,
   because pseudo-element `content` IS announced by several screen readers and
   "right arrow" after every card title is noise a sighted user never hears. */
.home-section::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: auto;
  border-top: 2px solid var(--color-brand-deep);
  border-right: 2px solid var(--color-brand-deep);
  transform: rotate(45deg);
}

.home-section:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.home-stats {
  /* .main-body already closes with space-8. */
  margin: 0;
  padding: var(--space-5);
  background: var(--color-paper);
  border-radius: var(--radius);
}

.home-stats h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.home-stats dl {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 0;
}

.home-stats dt {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.home-stats dd {
  /* Body sans, not the display serif: Georgia's numerals are old-style, which
     is wrong for a statistic (see the type note in style.css). */
  margin: var(--space-1) 0 0;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-stats__note {
  margin: var(--space-4) 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ------------------------------------------------------- document library */

.library {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 15rem 1fr;
  align-items: start;
  margin-top: var(--space-4);
}

@media (max-width: 48rem) {
  .library {
    grid-template-columns: 1fr;
  }
  .library__filters {
    order: 2; /* results first on a phone; filters are a refinement */
  }
}

.library__filters h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.library__filters h2:first-child {
  margin-top: 0;
}

.library__filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

/* The filter links are the primary navigation of a 618-document library and
   they are read on a phone. WCAG 2.2 AA (2.5.8) sets 24px as the minimum tap
   target; these measured 32x24 with the height coming in just under, which is a
   miss on a control somebody taps repeatedly. Given as a block with real
   padding so the whole row is the target, not just the words. */
.library__filters li {
  padding: 0;
}

.library__filters li > a {
  display: block;
  padding: 0.45rem 0;
  min-height: 44px;
  /* Vertically centred without a fixed line-height, so the target stays 44px
     when a reader increases their text size rather than clipping. */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.library__filters li.is-active a {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.library__filters .count {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.library__superseded {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.library__search {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-width: var(--measure);
}

.library__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.library__search button {
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-dark);
  background: var(--color-brand);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  cursor: pointer;
}

.library__count {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 0.95rem;
}

.library__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-card {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.document-card:last-child {
  border-bottom: 1px solid var(--color-border);
}

.document-card h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
  line-height: 1.35;
}

.document-card__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.document-card__excerpt {
  margin: var(--space-2) 0 0;
  font-size: 0.95rem;
  max-width: var(--measure);
}

.document-card__excerpt mark {
  background: var(--color-focus);
  color: var(--color-focus-ink);
  padding: 0 2px;
}

.document-card__flag,
.document-card__ocr {
  display: inline-block;
  margin: var(--space-2) 0 0;
  padding: 2px var(--space-2);
  font-size: 0.8rem;
  border-radius: var(--radius);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.document-card--superseded h3 a {
  color: var(--color-muted);
}

.library__empty {
  padding: var(--space-5);
  background: var(--color-sunken);
  border-radius: var(--radius);
  max-width: var(--measure);
}

/* ------------------------------------------------------ document + page */

.document,
.page {
  max-width: var(--measure);
}

.crumb {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}

.document__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-sunken);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.document__meta dt {
  font-weight: 700;
  color: var(--color-muted);
}

.document__meta dd {
  margin: 0;
}

.document__download {
  margin: var(--space-5) 0 var(--space-2);
}

.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-on-dark);
  background: var(--color-brand);
  border-radius: var(--radius);
}

.button:hover {
  background: var(--color-brand-deep);
  color: var(--color-on-dark);
}

.document__note {
  margin: 0 0 var(--space-5);
  font-size: 0.9rem;
  color: var(--color-muted);
}

.document__text {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.notice {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius);
  border-left: 4px solid;
}

.notice p {
  margin: 0 0 var(--space-2);
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice--warning,
.notice--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-left-color: var(--color-warning-text);
}

.notice--info,
.notice--muted {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
  border-left-color: var(--color-neutral-text);
}

.page__summary {
  font-size: 1.1rem;
  color: var(--color-muted);
}

.page__children {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------- sections */

.section-list {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.section-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.section-list h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.1rem;
}

.section-list p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.section-empty {
  padding: var(--space-5);
  background: var(--color-sunken);
  border-radius: var(--radius);
  max-width: var(--measure);
}

/* ----------------------------------------------------------- status check */

.status__form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-width: 28rem;
}

.status__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.status__form button {
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-dark);
  background: var(--color-brand);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  cursor: pointer;
}

.status-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.status-card h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
}

.status-card__meta {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.95rem;
}

.status-badge {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-weight: 700;
  border-radius: var(--radius);
}

.status-badge--good {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
}

.status-badge--bad {
  background: var(--color-negative-bg);
  color: var(--color-negative-text);
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.95rem;
}

.status-table th,
.status-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.status-table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* The left edge carries the urgency, so it survives being read in greyscale
   and does not rely on colour alone. */
.status-row--overdue td:first-child {
  box-shadow: inset 3px 0 0 var(--color-warning-text);
}

.status-row--critical td:first-child {
  box-shadow: inset 3px 0 0 var(--color-negative-text);
}

.status-card__next {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.status-card__next h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.status-card__link {
  margin: var(--space-4) 0 0;
  font-size: 0.95rem;
}

.status-empty {
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--color-sunken);
  border-radius: var(--radius);
}

.hint {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pagination {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin: var(--space-5) 0;
  font-size: 0.95rem;
}

/* "Previous" and "Next" measured 32x23.56 — under the 24px WCAG 2.2 AA minimum
   (2.5.8) on a control somebody taps repeatedly to walk 618 documents. Given
   real padding rather than a fixed height, so the target grows with the
   reader's text size instead of clipping it. */
.pagination a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  text-decoration: none;
}

.pagination a:hover {
  background: var(--color-sunken);
}

/* Headings inside imported page bodies.
 *
 * BIPA marked its section headings as <h5> — a markup accident, not a
 * hierarchy — so the browser default rendered them SMALLER than the body text
 * they introduce. The visual scale is normalised here rather than by rewriting
 * their heading levels, because the level is what their source says and a
 * screen reader should hear it unchanged. */
.page__body h2,
.page__body h3,
.page__body h4,
.page__body h5,
.page__body h6 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}

.page__body h2 { font-size: 1.4rem; }
.page__body h3 { font-size: 1.2rem; }
.page__body h4,
.page__body h5,
.page__body h6 { font-size: 1.05rem; }

.page__body p {
  margin: 0 0 var(--space-3);
}

.page__body ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.page__body li {
  margin-bottom: var(--space-1);
}

.page__body > *:first-child {
  margin-top: 0;
}

/* --- My BIPA ------------------------------------------------------------- */

.declaration {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  background: var(--color-guidance-bg);
  border-left: 4px solid var(--color-brand-deep);
  border-radius: var(--radius);
}

/* A statutory declaration is not a checkbox with a label beside it. The target
   is big enough to hit on a phone and the words sit next to the control, not
   under it. */
.content-edit label[for="confirmed"] {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-weight: 700;
  cursor: pointer;
}

.content-edit input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
  flex: 0 0 auto;
}

.content-edit input[type="email"],
.content-edit input[type="search"],
.content-edit input:not([type]) {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
}

/* --- The assessment ------------------------------------------------------ */

/* A statutory fee that arrives as one number reads as arbitrary. It is
   itemised, and the money column is right-aligned and tabular so the figures
   line up on their decimal point rather than drifting with the digit widths. */
.panel--assessment {
  max-width: var(--measure);
}

.panel--assessment .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.panel--assessment .row--total td {
  border-top: 2px solid var(--color-border-strong);
}

/* Ten member slots is what CC7 offers, so ten is what we offer. On a phone the
   percentage sits under the name rather than being squeezed beside it. */
.member-row {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  align-items: end;
}

/* Small, quiet, and present. The label carries the row number so "member 7"
   means something when a validation message names it. */
.member-row__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.member-row input {
  width: 100%;
}

@media (max-width: 34rem) {
  .member-row {
    grid-template-columns: 1fr;
  }
}

.content-edit fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

.content-edit legend {
  font-weight: 700;
  padding: 0 var(--space-2);
}

/* --- Name checking ------------------------------------------------------- */

.name-result {
  border-left: 5px solid var(--color-border-strong);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-sunken);
  border-radius: var(--radius);
}

.name-result--ok { border-left-color: var(--color-positive-text); }
.name-result--refused { border-left-color: var(--color-negative-text); }
.name-result--consent { border-left-color: var(--color-brand); }

.name-result h3 {
  margin: 0 0 var(--space-2);
}

.findings {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: var(--measure);
}

/* Each finding leads with its guideline paragraph, because a rule an applicant
   can look up is a rule they can argue with. */
.finding {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.finding__para {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8125rem;
  margin-right: var(--space-2);
  color: var(--color-muted);
}

.finding--refused { color: var(--color-negative-text); }
.finding--needs_consent { color: var(--color-brand-deep); }

.dashboard-actions {
  margin-bottom: var(--space-5);
}

/* Ten member blocks is a long form. Each one is visibly its own block so a
   founder can tell where member 3 ends and member 4 begins. */
.member-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.member-block__title {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  color: var(--color-muted);
}

/* Members 4-10 behind a disclosure. Plain <details>, so it works with no
   JavaScript and is announced as expandable by a screen reader. */
.member-more {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.member-more > summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
}

.member-more__body {
  padding: 0 var(--space-4) var(--space-3);
}


/* --- Tap targets on the account area -------------------------------------
 *
 * Measured at 390px on /my/: the entity-type select came out 176x19 and the
 * submit button 134x21 — both well under the 24px WCAG 2.2 AA minimum (2.5.8),
 * because this sheet styles inputs and had no rule for `select`, `button` or a
 * file input. Same defect family as the consent buttons and the library filter
 * row: nothing here has a generic control style, so anything new renders as a
 * browser default until somebody looks. */
.content-edit select,
.content-edit input[type="file"],
.decision select,
.decision input,
.decision textarea {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.5rem var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: var(--measure);
  width: 100%;
}

.content-edit button,
.decision button {
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  min-height: 44px;
  padding: 0.6rem var(--space-5);
  border: 2px solid var(--color-brand);
  background: var(--color-brand);
  color: #fff;
  border-radius: var(--radius);
  cursor: pointer;
}

.content-edit button:hover,
.decision button:hover {
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
}

.content-edit .button--secondary,
.decision .button--secondary {
  background: transparent;
  color: var(--color-brand-deep);
}