/* ==========================================================================
   Member portal
   --------------------------------------------------------------------------
   The portal's identity, decided September 2026: not CHA's, not prominently
   Cove's. It should read as infrastructure - closer to a national data agency
   than to a product. So: one restrained palette, the existing blue as the only
   accent, white space and typographic hierarchy doing the work colour would do
   elsewhere, and no illustration, gradient or hero.

   TYPE. Source Serif 4 for headings and lead prose, Source Sans 3 for
   everything else, both embedded below. The PDF reports use the same pair, so
   a member moving between a page and a report sees one thing. No system font
   is relied on: the fallbacks exist for the moment before the files arrive.

   Every colour, space and type decision resolves to a custom property in the
   block below; no literal colour appears outside it. The portal's NAME is not
   here either - it lives in branding.ts and reaches templates as a local.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}

:root {
  /* The accent. Kept from the first build; it is the one colour on the page
     that is not a neutral or a status. */
  --colour-primary: #1e5c8f;
  --colour-primary-dark: #164a72;

  /* Neutrals. Ink, three greys and white. */
  --colour-text: #16202b;
  --colour-text-muted: #5b6670;
  --colour-text-faint: #8a949d;
  --colour-border: #d9dee3;
  --colour-border-strong: #b9c2ca;
  --colour-surface: #ffffff;
  --colour-canvas: #f6f7f8;

  /* Status. Always paired with a word; never the only signal. */
  --colour-success: #1d6f47;
  --colour-warning: #9a5f07;
  --colour-error: #b3261e;
  --colour-success-bg: #edf6f0;
  --colour-warning-bg: #fbf3e5;
  --colour-error-bg: #fbecea;
  --colour-info-bg: #eef3f8;
  --colour-focus: #b8860b;

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius: 3px;
  --space-unit: 8px;
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);

  --measure: 66ch;
  --container: 1040px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  background: var(--colour-surface);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--colour-text);
  background: var(--colour-surface);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}

h1 {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}
h2 {
  font-size: 1.375rem;
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

a {
  color: var(--colour-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--colour-primary-dark);
}

strong {
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--colour-canvas);
  border: 1px solid var(--colour-border);
  border-radius: 2px;
  padding: 0 0.3em;
}

hr {
  border: 0;
  border-top: 1px solid var(--colour-border);
  margin: var(--space-4) 0;
}

/* Visible focus everywhere. Hospital builds are keyboard-heavy and often run
   older browsers, so this is a plain outline rather than :focus-visible alone. */
a:focus,
button:focus,
input:focus,
select:focus,
summary:focus,
[tabindex]:focus {
  outline: 3px solid var(--colour-focus);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--colour-surface);
  padding: var(--space-1) var(--space-2);
  z-index: 10;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-1);
}

.text-muted {
  color: var(--colour-text-muted);
}

.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Masthead - the portal's name, and whose data this is
   --------------------------------------------------------------------------
   Two rows. The first names the portal and the signed-in person. The second,
   signed in only, names the ORGANISATION in the largest type on the page
   short of the h1, with the navigation beside it. Multi-tenancy is the
   platform's central promise, and a member must be able to tell at a glance
   whose data they are looking at - by name, never by codename.
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.masthead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.masthead__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--colour-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.masthead__name:hover {
  color: var(--colour-primary-dark);
}

.masthead__account {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

.masthead__account a {
  color: var(--colour-text-muted);
}

.masthead__tenant {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-2);
}

.masthead__org {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--colour-text);
  max-width: none;
}

.masthead__org-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: 2px;
}

.site-nav__list {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  display: block;
  padding: var(--space-1) 0 calc(var(--space-2) - 2px);
  color: var(--colour-text-muted);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover {
  color: var(--colour-text);
}

.site-nav__list a[aria-current='page'] {
  color: var(--colour-text);
  border-bottom-color: var(--colour-primary);
}

.site-main {
  flex: 1 0 auto;
  padding-top: var(--space-5);
  padding-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   Colophon - "Powered by Cove Solutions", help, and the build stamp
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--colour-border);
  background: var(--colour-canvas);
  padding: var(--space-4) 0 var(--space-5);
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

.colophon__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.colophon p {
  margin: 0 0 calc(var(--space-unit) * 0.5);
}

.colophon__powered {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-text-muted);
  text-decoration: none;
}

.colophon__powered img {
  display: block;
  height: 30px;
  width: auto;
}

.colophon__text {
  text-align: right;
}

/* The schema version. Quieter than the rest of the footer: diagnostic
   information for the people who run the platform, not something a member
   reading the page needs to take in. */
.colophon__version {
  font-size: 0.8125rem;
  color: var(--colour-text-faint);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: calc(var(--space-unit) * 0.875) var(--space-2);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  background: var(--colour-surface);
  color: var(--colour-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--colour-text-muted);
  color: var(--colour-text);
}

.button--primary {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: var(--colour-surface);
}

.button--primary:hover {
  background: var(--colour-primary-dark);
  border-color: var(--colour-primary-dark);
  color: var(--colour-surface);
}

.button--small {
  font-size: 0.9375rem;
  padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
}

.button[disabled],
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Page structure
   -------------------------------------------------------------------------- */

.page-lead {
  color: var(--colour-text-muted);
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

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

.section {
  margin: var(--space-6) 0 0;
}

.section > h2 {
  margin-bottom: var(--space-1);
}

.section__note {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/* A heading with a control beside it. */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.section__head h2 {
  margin-bottom: 0;
}

/* The public landing page. Deliberately generic: a name, one sentence, a way
   in, an address. Someone without an account should learn almost nothing. */
.entrance {
  padding: var(--space-8) 0 var(--space-6);
  max-width: 34rem;
}

.entrance h1 {
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}

.entrance__tagline {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-4);
}

.entrance__contact {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
  margin-top: var(--space-4);
}

.panel {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.panel--muted {
  background: var(--colour-canvas);
}

.panel h2 {
  font-size: 1.125rem;
}

.empty-state {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  max-width: 44rem;
}

.empty-state--large {
  padding: var(--space-6) var(--space-4);
}

.empty-state h2 {
  margin-bottom: var(--space-2);
}

.plain-list,
.tight-list {
  padding-left: var(--space-3);
}

.tight-list li {
  margin-bottom: var(--space-1);
  max-width: var(--measure);
}

/* A definition list laid out as label / value rows. */
.deflist {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(var(--space-unit) * 0.75) var(--space-3);
  max-width: var(--measure);
}

.deflist dt {
  font-weight: 600;
}

.deflist dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--colour-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  background: var(--colour-surface);
  max-width: 48rem;
}

.notice__heading {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: calc(var(--space-unit) * 0.5);
}

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

.notice--success {
  border-left-color: var(--colour-success);
  background: var(--colour-success-bg);
}

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

.notice--error {
  border-left-color: var(--colour-error);
  background: var(--colour-error-bg);
}

.notice--info {
  border-left-color: var(--colour-primary);
  background: var(--colour-info-bg);
}

.notice--muted {
  border-left-color: var(--colour-text-muted);
  background: var(--colour-canvas);
}

/* Truncation must not be missable. */
.notice--loud {
  border-width: 2px;
  border-left-width: 6px;
}

/* --------------------------------------------------------------------------
   Status badge - label, colour and glyph. Never colour alone.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-unit) * 0.75);
  padding: calc(var(--space-unit) * 0.375) var(--space-1);
  border: 1px solid;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.badge__glyph {
  font-weight: 700;
}

.badge.is-accepted {
  color: var(--colour-success);
  border-color: var(--colour-success);
  background: var(--colour-success-bg);
}

.badge.is-warning {
  color: var(--colour-warning);
  border-color: var(--colour-warning);
  background: var(--colour-warning-bg);
}

.badge.is-rejected {
  color: var(--colour-error);
  border-color: var(--colour-error);
  background: var(--colour-error-bg);
}

.badge.is-pending {
  color: var(--colour-primary);
  border-color: var(--colour-primary);
  background: var(--colour-info-bg);
}

.badge.is-muted {
  color: var(--colour-text-muted);
  border-color: var(--colour-border-strong);
  background: var(--colour-canvas);
}

/* Required / optional on the specification page. Words, not colour. */
.badge--required {
  color: var(--colour-text);
  border-color: var(--colour-border-strong);
  background: var(--colour-surface);
}

.count-chip {
  display: inline-block;
  min-width: 2em;
  padding: 0 0.4em;
  border-radius: var(--radius);
  background: var(--colour-canvas);
  border: 1px solid var(--colour-border);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--colour-text-muted);
  vertical-align: middle;
}

.inline-flag {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--colour-warning);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colour-surface);
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: calc(var(--space-unit) * 1.25) var(--space-2);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}

.data-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  border-bottom: 2px solid var(--colour-text);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.data-table tbody th {
  font-weight: 600;
}

.data-table--compact th,
.data-table--compact td {
  padding: calc(var(--space-unit) * 0.75) var(--space-2);
  font-size: 0.9375rem;
}

.data-table td.numeric,
.data-table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row-flagged {
  background: var(--colour-warning-bg);
}

.cell-note {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
  font-weight: 400;
}

/* A note printed under a table - a threshold, a unit, what a column means. */
.table-note {
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
  margin-top: calc(var(--space-unit) * 0.5);
}

/* A value past its threshold. One of three signals - the row tint and the
   words beneath it are the others - so this never carries the meaning alone. */
.value-breach {
  color: var(--colour-warning);
  font-weight: 700;
}

/* The submission reference: present and copyable, but not competing with the
   outcome of the page. */
.reference-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.reference-line__label {
  font-weight: 600;
}

.reference-line code {
  user-select: all;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form {
  max-width: 44rem;
}

.field {
  margin-bottom: var(--space-4);
  border: 0;
  padding: 0;
  min-width: 0;
}

.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: calc(var(--space-unit) * 0.5);
  padding: 0;
}

.field__hint {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-1);
}

.field__control {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: calc(var(--space-unit) * 0.875) var(--space-1);
  font: inherit;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
}

.radio-row {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-bottom: var(--space-1);
}

.radio-row input {
  margin-top: 0.35em;
}

.radio-row label {
  display: block;
}

.radio-row__note {
  display: block;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
  max-width: var(--measure);
}

.radio-row.is-disabled label {
  color: var(--colour-text-muted);
}

.form__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.form__actions--spaced {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

/* What happens after the button is pressed. Quieter than a notice - it is
   orientation, not a warning. */
.form__note {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
  max-width: 60ch;
}

.form-inline {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9375rem;
  flex-wrap: wrap;
}

.form-inline label {
  color: var(--colour-text-muted);
}

.form-inline select,
.form-inline input[type='text'] {
  padding: calc(var(--space-unit) * 0.5) var(--space-1);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  background: var(--colour-surface);
  font: inherit;
}

/* --------------------------------------------------------------------------
   Upload progress
   -------------------------------------------------------------------------- */

.progress {
  margin-bottom: var(--space-3);
}

.progress progress {
  width: 100%;
  max-width: 32rem;
  height: calc(var(--space-unit) * 1.5);
}

.progress__text {
  font-variant-numeric: tabular-nums;
  margin: var(--space-1) 0 0;
  font-weight: 600;
}

.progress__note {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Submission page
   -------------------------------------------------------------------------- */

.breadcrumb {
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-2);
}

.submission-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
}

.summary-grid__item {
  border-top: 2px solid var(--colour-text);
  padding: var(--space-1) 0 var(--space-2);
}

.summary-grid dt {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.summary-grid dd {
  margin: calc(var(--space-unit) * 0.5) 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A tile whose value is not a result yet. */
.summary-grid__item--pending dd {
  color: var(--colour-text-muted);
  font-weight: 400;
}

.episode-block {
  margin-bottom: var(--space-3);
}

.episode-block__key {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 1rem;
  margin-bottom: var(--space-1);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pagination__status {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/* Expandable episode lists on grouped warnings. <details> rather than script:
   the content security policy allows no inline JavaScript, and disclosure
   needs none. */
.episode-reveal {
  margin-top: var(--space-1);
  font-weight: 400;
}

.episode-reveal > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--colour-primary);
  text-align: right;
}

.episode-reveal__list {
  margin: var(--space-1) 0 0;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.9;
  /* A group can cover thousands of episodes; the list scrolls rather than
     pushing the rest of the table off the screen. */
  max-height: 12rem;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Two-column layout
   -------------------------------------------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.layout-split__aside .panel {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Task list - the Collections page
   --------------------------------------------------------------------------
   Four tasks: a verb, a state, and a way to act. Outstanding tasks carry the
   accent down their left edge and full-size type; a completed one is
   recessed - smaller, greyer, no accent - so the eye goes to what is still to
   do. The state is always in words as well: a reader who cannot distinguish
   the colours reads the same sentence.
   -------------------------------------------------------------------------- */

.task-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  max-width: 48rem;
}

.task {
  border: 1px solid var(--colour-border);
  border-left: 3px solid var(--colour-primary);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--colour-surface);
}

.task--done {
  border-left-color: var(--colour-border);
  background: var(--colour-canvas);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  color: var(--colour-text-muted);
}

.task--done .task__heading {
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--colour-text-muted);
}

.task--later {
  border-left-color: var(--colour-border);
  color: var(--colour-text-muted);
  background: transparent;
}

.task--later .task__heading {
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--colour-text-muted);
}

.task__heading {
  margin: 0 0 calc(var(--space-unit) * 0.5);
  font-size: 1.25rem;
}

.task__mark {
  color: var(--colour-success);
  font-weight: 700;
}

.task__grain,
.task__needs,
.task__state,
.task__prior {
  margin: 0 0 calc(var(--space-unit) * 0.5);
  max-width: var(--measure);
  font-size: 0.9375rem;
}

.task__grain,
.task__state,
.task__prior {
  color: var(--colour-text-muted);
}

.task__actions {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.9375rem;
}

.task--done .task__actions {
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Specification page
   -------------------------------------------------------------------------- */

.spec-contents {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 0.9375rem;
}

.spec-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.spec-section > h2 {
  margin-bottom: var(--space-1);
}

.spec-files {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}

.spec-files li {
  padding: calc(var(--space-unit) * 0.75) 0;
  border-bottom: 1px solid var(--colour-border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  max-width: var(--measure);
}

.spec-files__note {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 800px) {
  .layout-split {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 1.625rem;
  }

  .masthead__org {
    font-size: 1.25rem;
  }

  .site-nav__list {
    gap: var(--space-3);
  }

  .colophon__text {
    text-align: left;
  }

  .deflist {
    grid-template-columns: 1fr;
    gap: calc(var(--space-unit) * 0.25) 0;
  }

  .deflist dd {
    margin-bottom: var(--space-1);
  }
}

/* --------------------------------------------------------------------------
   Print - a rejected submission is often taken away on paper
   -------------------------------------------------------------------------- */

@media print {
  .site-nav__list,
  .masthead__account,
  .form__actions,
  .pagination,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }

  .colophon {
    background: #fff;
  }

  .data-table th,
  .data-table td {
    border-color: #000;
  }
}