/* ==========================================================================
   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; }
  /* TWO CELLS ON A PHONE TOO. This was a single column, which put View on
     its own line under every label and made each row twice as tall - forty of
     them down the page. The label takes what is left and wraps; minmax(0,1fr)
     rather than 1fr so a long one actually wraps instead of forcing the grid
     wider than the screen. */
  .disc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
  }
  .disc-row__act { justify-self: end; }
  .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; }
}

/* ==========================================================================
   The intro row, and the Download button beside it
   --------------------------------------------------------------------------
   The button belongs at the top, level with the sentence that says what the
   page is: somebody who wants the whole thing as a file wants it before they
   start reading, not after forty-two rows.
   ========================================================================== */
.disc-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-start;
  justify-content: space-between;
  /* The introductory paragraph beside the button used to hold this row off
     the section list below; with it gone the button sat flush against it. */
  margin-bottom: 20px;
}
.disc-top .disc-intro { flex: 1 1 380px; margin-bottom: 0; }

.disc-download {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-deep);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.disc-download:hover { background: var(--brand); color: #fff; }
.disc-download:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 575.98px) {
  /* Full width rather than a lonely pill: at this size it is the only thing
     on its row anyway. */
  .disc-download { width: 100%; justify-content: center; }
}