/* ==========================================================================
   Public Self-Disclosure  —  /page/public-self-disclosure/
   Loaded ALONGSIDE page-head.css, which supplies the photo banner.

   WHAT THIS PAGE IS
   A regulator's checklist. Ten numbered sections, each a card, each holding
   rows of "this is the thing / here is the document". Somebody arrives here
   looking for ONE line item out of forty, so the design is built for finding
   rather than for reading: every action sits in the same column down the
   right, and the jump strip at the top means no section is more than one
   click away.

   The palette is the crest's - teal for structure, gold for the rules. Links
   are the site red only where they are the point of the row.
   ========================================================================== */

.disc-section { background: var(--page); }

/* ------------------------------------------------------------- intro ---- */
.disc-intro {
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.75;
}

/* --------------------------------------------------------- jump strip --- */
/* Ten sections is more than a screen. These are the table of contents, and
   they are real anchors so a link to one section can be sent to somebody. */
.disc-jump {
  margin: 0 0 30px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.disc-jump__label {
  margin: 0 0 11px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.disc-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.disc-jump a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--page-alt);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.disc-jump a:hover,
.disc-jump a:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ------------------------------------------------------- section card --- */
.disc-block {
  margin: 0 0 18px;
  padding: 24px 26px 8px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  /* Clears the sticky header when the jump links land here. */
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.disc-block:last-of-type { margin-bottom: 0; }

.disc-block__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--brand);
}
/* The section number. It is decorative - the heading reads correctly without
   it - so it is hidden from the screen reader rather than announced as a
   stray "zero four" before every heading. */
.disc-block__num {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}
.disc-block__rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 0 6px;
  border-radius: 2px;
  background: var(--accent);
}

/* -------------------------------------------------------------- rows ---- */
.disc-rows { margin: 0; padding: 0; list-style: none; }

/* Label left, action right, in one column all the way down the page. Below
   560px the action drops under its label rather than being squeezed into a
   sliver too narrow to read. */
.disc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.disc-row:first-child { border-top: 0; }

.disc-row__label {
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* A row answered by a rule rather than a document. It sits under the label
   as a second line, because the answers run long and the action column is
   not wide enough to hold a sentence. */
.disc-row__note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

/* ----------------------------------------------------------- actions ---- */
.disc-row__act { justify-self: end; text-align: right; }

.disc-link {
  display: inline-block;
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  background: rgba(20, 70, 63, .07);
  color: var(--brand);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.disc-link:hover,
.disc-link:focus-visible { background: var(--brand); color: #fff; }
.disc-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Several links in one action cell - the annual accounts, one per year. */
.disc-row__act .disc-link { margin: 2px 0 2px 6px; }
.disc-row__act .disc-link:first-child { margin-left: 0; }

/* Shown where the document is not uploaded yet. Quiet, and deliberately not
   shaped like the pill next to it: something that looks clickable and is not
   is worse than nothing in its place. */
.disc-pending {
  display: inline-block;
  color: var(--muted);
  font-size: .78rem;
  font-style: italic;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 575.98px) {
  .disc-block { padding: 20px 17px 6px; border-radius: var(--radius); }
  .disc-block__head { font-size: 1.02rem; gap: 9px; }
  .disc-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .disc-row__act { justify-self: start; }
  .disc-row__label { font-size: .89rem; }
  .disc-jump { padding: 14px; }
  .disc-jump a { font-size: .78rem; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .disc-link, .disc-jump a { transition: none; }
}