/* ==========================================================================
   CORUM RM Portal — design system

   Built on CORUM_BRAND.md §2 tokens and its non-negotiables:
     §1.3  white space is the design element. No gradients, no shadows,
           no 3-D, no rounded corners, no decorative icons.
     §1.4  achromatic by default. Red carries meaning, never decoration.
     §3    Open Sans Light everywhere. Bold for one emphasised element only.
           Never italic, never underline, never ALL CAPS. Sentence case.
     §4.7  table anatomy: ink rule above the header, bold header, no fill,
           silver row dividers, ink rule to close. No verticals, no zebra.
     §6    the Haarlinie — a short red rule under the page title.
     §7.0  two red registers: structural (hairline, footer rule, active nav)
           and statement (at most one accent per view).
     §19   steel only for large text and non-text elements; secondary text
           is graphite.
   ========================================================================== */

:root {
  /* brand */
  --corum: #bc3a47;
  --corum-dark: #8e2b34;
  --corum-mid: #d98b93;
  --corum-light: #efc9cd;
  --corum-pale: #f7e4e6;

  /* neutrals */
  --ink: #22272b;
  --slate: #3e4448;
  --graphite: #6b6f72;
  --steel: #a3a5a6;
  --silver: #bdc0c1;
  --mist: #d4d6d8;
  --cloud: #eceef1;
  --porcelain: #f4f6f7;
  --paper: #ffffff;

  /* mandate colours (BRAND v8) — only ever to identify a mandate */
  --emerald: #2e6e5e;
  --ruby: #8e2b34;
  --sapphire: #2f4a6e;

  /* type scale — a fourth-based editorial scale, Light throughout */
  --t-display: clamp(2.1rem, 1.3rem + 2.6vw, 3rem);
  --t-h1: clamp(1.75rem, 1.2rem + 1.7vw, 2.35rem);
  --t-h2: 1.4rem;
  --t-h3: 1.06rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.78rem;

  /* rhythm */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;

  --shell: 1240px;
  --measure: 64ch;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--corum); }
:focus-visible { outline: 2px solid var(--corum); outline-offset: 3px; }

h1, h2, h3, h4 { font-weight: 300; line-height: 1.15; margin: 0; letter-spacing: -0.011em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0 0 var(--s-4); max-width: var(--measure); }
strong, b { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; color: var(--slate); }

.u-muted   { color: var(--graphite); }
.u-small   { font-size: var(--t-small); }
.u-micro   { font-size: var(--t-micro); }
.u-accent  { color: var(--corum); }
.u-right   { text-align: right; }
.u-nowrap  { white-space: nowrap; }
.u-flow > * + * { margin-top: var(--s-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- header */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--mist);
}
.masthead__top {
  max-width: var(--shell); margin: 0 auto; padding: var(--s-4) var(--s-6) var(--s-3);
  display: flex; align-items: center; gap: var(--s-5);
}
.masthead__nav {
  border-top: 1px solid var(--cloud);
}
.masthead__nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; align-items: stretch; gap: var(--s-6);
}
/* The original lockup (BRAND §2, Alle-CORUM-logo-20232.png). Never redrawn. */
.brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.brand__logo { height: 21px; width: auto; display: block; }
.brand__sub {
  color: var(--graphite); font-size: var(--t-micro); letter-spacing: .02em;
  padding-left: var(--s-3); border-left: 1px solid var(--mist);
}

.nav { display: flex; gap: var(--s-6); align-items: stretch; }
.nav__link {
  font-size: 0.95rem; color: var(--slate);
  display: inline-flex; align-items: center; padding: var(--s-3) 0 calc(var(--s-3) + 1px);
  border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--ink); border-bottom-color: var(--corum); }

.utility { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.utility__item { font-size: var(--t-micro); color: var(--graphite); }
.utility__item a:hover { color: var(--corum); }

.nav-toggle { display: none; background: none; border: 0; padding: var(--s-2); cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1px; background: var(--ink); margin: 4px 0; }

@media (max-width: 900px) {
  .masthead { position: static; }
  .masthead__top { padding: var(--s-4) var(--s-5); gap: var(--s-4); }
  .brand__sub { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .utility { display: none; }
  .masthead__nav-inner { padding: 0 var(--s-5); }
  .nav {
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--s-4); width: 100%;
  }
  .nav[hidden] { display: none; }
  .nav__link {
    padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud);
  }
  .nav__link.is-active { border-bottom-color: var(--corum); }
  .shell { padding: var(--s-6) var(--s-5) var(--s-7); }
}

/* ------------------------------------------------------------------ page */
.shell { max-width: var(--shell); margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-8); }

/* The Haarlinie (BRAND §6): 1.40in long, 1.5pt, directly beneath the title,
   left-aligned to the text margin. It is the page's one recurring red mark;
   nothing red runs vertically anywhere in the portal. */
.page-head {
  margin-bottom: var(--s-7);
}
.page-head h1::after {
  content: ""; display: block; width: 134px; height: 2px;
  background: var(--corum); margin-top: var(--s-4);
}
.page-head__eyebrow {
  font-size: var(--t-micro); color: var(--graphite); margin-bottom: var(--s-3); display: block;
}
.page-head h1 { font-size: var(--t-display); max-width: 24ch; }
.page-head__lead {
  margin-top: var(--s-4); font-size: 1.06rem; color: var(--graphite); max-width: var(--measure);
}
.page-head__actions { margin-top: var(--s-5); }

.section { margin-top: var(--s-8); }
.section > h2 { margin-bottom: var(--s-5); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.section__head h2 { font-size: var(--t-h2); }
.section__meta { font-size: var(--t-micro); color: var(--graphite); }

/* ----------------------------------------------------------------- links */
.linkish { color: var(--ink); border-bottom: 1px solid var(--mist); }
.linkish:hover { color: var(--corum); border-bottom-color: var(--corum); }
.link-arrow {
  font-size: var(--t-small); color: var(--corum); font-weight: 400;
  display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
}
.link-arrow::after { content: "›"; font-size: 1.25em; line-height: 1; }
.link-arrow:hover { color: var(--corum-dark); }
.link-arrow:hover::after { transform: translateX(2px); }
.link-arrow::after { transition: transform .12s ease; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-size: var(--t-small); font-weight: 400; line-height: 1;
  padding: 0.72em 1.35em; border-radius: 0; cursor: pointer; white-space: nowrap;
  background: var(--corum); color: var(--paper); border: 1px solid var(--corum);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--corum-dark); border-color: var(--corum-dark); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--silver); }
.btn--ghost:hover { background: var(--porcelain); color: var(--ink); border-color: var(--steel); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--corum); padding-left: 0; padding-right: 0; }
.btn--quiet:hover { background: transparent; color: var(--corum-dark); }
.btn--sm { font-size: var(--t-micro); padding: 0.55em 0.9em; }
.btn--chevron::after { content: "›"; font-size: 1.3em; line-height: 1; margin-left: .15em; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- surfaces */
.panel { padding-top: var(--s-2); }
/* Bordered link row with a red chevron on the right. */
.linkbox {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  border: 1px solid var(--mist); background: var(--porcelain);
  padding: var(--s-4) var(--s-5); font-size: var(--t-small); color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.linkbox:hover { border-color: var(--silver); background: var(--paper); color: var(--ink); }
.linkbox::after { content: "›"; color: var(--corum); font-size: 1.4em; line-height: 1; }
.linkbox__sub { display: block; font-size: var(--t-micro); color: var(--graphite); margin-top: 2px; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-8); align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ---------------------------------------------------------------- tables */
.toolbar {
  display: flex; gap: var(--s-3); align-items: flex-end; flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.toolbar__search { flex: 1 1 260px; min-width: 200px; }
.toolbar__count { margin-left: auto; font-size: var(--t-micro); color: var(--graphite); padding-bottom: .55rem; }
.toolbar__reset { padding-bottom: .5rem; }
.form-column { max-width: 46rem; }
.u-spaced { margin-top: var(--s-6); }
.range { display: flex; align-items: center; gap: var(--s-2); }
.range input { width: 9.5rem; }
.range__sep { font-size: var(--t-micro); color: var(--graphite); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
thead th {
  font-weight: 600; color: var(--slate); text-align: left; font-size: var(--t-micro);
  padding: var(--s-3) var(--s-3); white-space: nowrap;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--paper); position: sticky; top: 0; z-index: 5;
}
tbody td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--cloud); vertical-align: top; }
tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--porcelain); }
td.u-right, th.u-right { text-align: right; }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink); }
th[data-sort]::after { content: "\2195"; margin-left: .4em; color: var(--silver); font-size: .9em; }
th[data-sort][aria-sort="ascending"]::after  { content: "\2191"; color: var(--corum); }
th[data-sort][aria-sort="descending"]::after { content: "\2193"; color: var(--corum); }

.cell-title { color: var(--ink); }
.cell-sub { display: block; font-size: var(--t-micro); color: var(--graphite); margin-top: 2px; }

.empty { padding: var(--s-7) 0; text-align: center; color: var(--graphite); font-size: var(--t-small); }

/* ----------------------------------------------------------------- forms */
label { display: block; font-size: var(--t-micro); color: var(--graphite); margin-bottom: var(--s-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; font: inherit; font-size: var(--t-small); font-weight: 300;
  padding: 0.62em 0.7em; color: var(--ink); background: var(--paper);
  border: 1px solid var(--silver); border-radius: 0;
  transition: border-color .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--steel); }
input:focus, select:focus, textarea:focus { border-color: var(--corum); outline: none; box-shadow: inset 0 -2px 0 var(--corum); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
                    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2rem;
}
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
.field { margin-bottom: var(--s-5); }
.field__hint { font-size: var(--t-micro); color: var(--graphite); margin-top: var(--s-2); max-width: var(--measure); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--s-5); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
legend { padding: 0; font-size: var(--t-micro); color: var(--graphite); margin-bottom: var(--s-3); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2) var(--s-5); }
.choice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3); border: 1px solid var(--cloud); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.choice:hover { border-color: var(--silver); background: var(--porcelain); }
/* Ink, not red: a full-width red box reads as two vertical red strokes,
   which is exactly what the brand's rule discipline forbids. The checkbox
   itself stays red and carries the state. */
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.choice input { width: auto; margin-top: .28em; accent-color: var(--corum); }
.choice__label { font-size: var(--t-small); color: var(--ink); }
.choice__hint { display: block; font-size: var(--t-micro); color: var(--graphite); margin-top: 2px; }

/* ---------------------------------------------------------------- status */
.tag {
  display: inline-block; font-size: var(--t-micro); line-height: 1.4;
  padding: 1px 8px; border: 1px solid var(--silver); color: var(--graphite); white-space: nowrap;
}
.tag--current { border-color: var(--corum); color: var(--corum); }
.tag--ok      { border-color: var(--slate);  color: var(--slate); }
.tag--wait    { border-color: var(--steel);  color: var(--graphite); }
.tag--error   { border-color: var(--corum);  color: var(--corum); }
.tag--archive { border-color: var(--mist);   color: var(--steel); }

.note { border-top: 2px solid var(--silver); padding: var(--s-4) var(--s-5); background: var(--porcelain); margin-bottom: var(--s-5); }
.note--error { border-top-color: var(--corum); }
.note--info  { border-top-color: var(--slate); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note ul { margin: var(--s-2) 0 0; padding-left: 1.1rem; }
.note__title { font-weight: 600; font-size: var(--t-small); display: block; margin-bottom: var(--s-2); }


/* ------------------------------------------------------------------ charts
   One measure at a time, so every chart is a single series in one hue: no
   categorical palette, no legend, no colour-coded identity to decode. The data
   hue is the brand red (validated against the paper surface: inside the
   lightness band, above the chroma floor, above 3:1 contrast); everything else
   - axes, labels, values - wears a text token, never the series colour.

   BRAND §1.3 forbids rounded corners, so the bars keep square ends. Adjacent
   bars are separated by a 2px surface gap rather than a stroke. */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-5); }
.kpi__item { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.kpi__value { display: block; font-size: 2.1rem; line-height: 1.1; color: var(--ink); }
.kpi__label { display: block; font-size: var(--t-micro); color: var(--graphite); margin-top: var(--s-2); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.spark__bar { flex: 1 1 0; background: var(--corum); min-height: 1px; }
.spark__bar--empty { background: var(--cloud); }
.spark__axis {
  display: flex; justify-content: space-between; border-top: 1px solid var(--mist);
  padding-top: var(--s-2); font-size: var(--t-micro); color: var(--graphite);
}

.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s-7); }
.rank__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); margin-bottom: var(--s-3); }
.rank__label { font-size: var(--t-small); color: var(--ink); }
.rank__value { font-size: var(--t-small); color: var(--graphite); }
.rank__track { grid-column: 1 / -1; height: 6px; background: var(--cloud); }
.rank__fill { height: 6px; background: var(--corum); }

/* ---------------------------------------------------------- subscriptions */
.subs { padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--cloud); }
.subs:last-child { border-bottom: 0; }
.subs__detail { margin: var(--s-3) 0 0 var(--s-6); }
.subs__detail summary {
  font-size: var(--t-small); color: var(--corum); cursor: pointer; padding: var(--s-2) 0;
}
.subs__detail summary:hover { color: var(--corum-dark); }
.subs__list { list-style: none; padding: var(--s-2) 0 0; margin: 0; columns: 2; column-gap: var(--s-6); }
.subs__list li { break-inside: avoid; padding: var(--s-2) 0; }
.subs__list label { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-small); }
@media (max-width: 720px) { .subs__list { columns: 1; } }

/* ----------------------------------------------------------------- facets */
.facets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.facet {
  font: inherit; font-size: var(--t-small); color: var(--slate); cursor: pointer;
  background: none; border: 1px solid var(--mist); border-radius: 0;
  padding: .4em .85em; transition: border-color .12s ease, color .12s ease;
}
.facet:hover { border-color: var(--steel); color: var(--ink); }
.facet.is-active { border-color: var(--ink); color: var(--ink); }
.facet__count { color: var(--graphite); margin-left: .4em; font-size: var(--t-micro); }
.facet.is-active .facet__count { color: var(--slate); }

/* ------------------------------------------------------------- key facts */
.crumb { font-size: var(--t-micro); color: var(--graphite); margin-bottom: var(--s-5); }
.crumb a { color: var(--corum); }
.crumb span::before { content: "  ·  "; }

.facts { margin: 0; display: grid; gap: 0; max-width: 46rem; }
.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud);
}
.facts dt { color: var(--graphite); font-size: var(--t-small); margin: 0; }
.facts dd { margin: 0; font-size: var(--t-small); color: var(--ink); }
@media (max-width: 640px) { .facts > div { grid-template-columns: 1fr; gap: var(--s-1); } }

.plain-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; font-size: var(--t-small); }
.plain-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud); }
.plain-list li a { color: var(--ink); display: block; }
.plain-list li a:hover { color: var(--corum); }

/* ------------------------------------------------------------------ news */
.stream { border-top: 1px solid var(--ink); }
.stream__item { display: block; padding: var(--s-5) 0; border-bottom: 1px solid var(--silver); }
.stream__item:hover .stream__title { color: var(--corum); }
.stream__date { font-size: var(--t-micro); color: var(--graphite); }
.stream__title { font-size: var(--t-h3); margin-top: var(--s-2); display: block; }
.stream__excerpt { font-size: var(--t-small); color: var(--graphite); margin-top: var(--s-2); max-width: var(--measure); }

.prose { max-width: var(--measure); font-size: 1.02rem; line-height: 1.7; }
.prose h3 {
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
}
/* The 0.60in sibling hairline (BRAND §6), beneath the section title. */
.prose h3::after {
  content: ""; display: block; width: 58px; height: 2px;
  background: var(--corum); margin-top: var(--s-2);
}
.prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose p { margin-bottom: var(--s-4); }

/* The section heading already carries the red rule, so a featured block below
   it takes a neutral one. One red statement per view (BRAND §7.0). */
.featured-post { border-top: 1px solid var(--mist); padding-top: var(--s-5); }

/* ------------------------------------------------------------------ tabs */
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--mist); margin-bottom: var(--s-7); overflow-x: auto; }
.tabs a {
  font-size: var(--t-small); color: var(--graphite); padding: 0 0 var(--s-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--corum); }

/* ----------------------------------------------------------------- login */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--s-6); }
.login { width: 100%; max-width: 370px; }
.login__logo { height: 25px; width: auto; display: block; margin-bottom: var(--s-8); }
.login h1 { font-size: var(--t-h2); margin-bottom: var(--s-2); }
.login__intro { font-size: var(--t-small); color: var(--graphite); margin-bottom: var(--s-6); }
.login form { margin-top: var(--s-5); }
.login .btn { width: 100%; }
.login__foot { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--corum); font-size: var(--t-micro); color: var(--graphite); }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--corum); margin-top: var(--s-8); padding: var(--s-5) 0 var(--s-7); }
.footer__inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  font-size: var(--t-micro); color: var(--graphite);
}
.footer p { margin: 0; max-width: 70ch; }

@media print {
  .masthead, .nav, .toolbar, .btn, .footer { display: none !important; }
  body { font-size: 10pt; }
}