/* =====================================================================
   Vaydos partner portal — portal.css

   Built on the same tokens as the public site so the two feel like one
   company: the charcoal, the paper white, the logo orange, Archivo for
   text and Martian Mono for references and data.

   Where it differs from site.css, it differs on purpose. The marketing
   site is a poster; this is a tool someone opens to answer a question. So
   the type is smaller, the rhythm is tighter, and the orange is kept for
   things you can act on rather than used as decoration.
   ===================================================================== */

/* ---------- 1. Fonts ---------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens --------------------------------------------- */

:root {
  --ink:       #2E2E35;
  --ink-2:     #36363C;
  --paper:     #F5F4F2;
  --concrete:  #E7E6E3;
  --steel:     #61616B;
  --steel-lt:  #A9A9B3;
  --white:     #FFFFFF;

  --orange:    #F06C2A;
  --orange-lt: #F69C36;
  --orange-dk: #D95818;
  --orange-ink:#A33D0E;
  --on-orange: #2A1000;
  --alert:     #C43A16;

  --good:      #1F7A4D;
  --good-bg:   #E4F2EA;
  --warn-bg:   #FFF3E0;
  --bad-bg:    #FDE8E2;
  --info-bg:   #E9EEF5;
  --info-line: #46618C;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rule: rgba(46, 46, 53, .14);
  --radius: 6px;
  --edge: clamp(1rem, 4vw, 2.5rem);
  --shadow: 0 1px 2px rgba(46, 46, 53, .06), 0 4px 16px rgba(46, 46, 53, .05);
}

/* ---------- 3. Reset ---------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-dk); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Visible only to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { left: 0; }

.is-hidden { display: none !important; }

/* ---------- 4. Header --------------------------------------------- */

.topbar {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--orange);
}

.topbar__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: .85rem var(--edge);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.topbar__brand img { width: 130px; height: auto; }

.topbar__sub {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-lt);
  border-left: 1px solid rgba(245, 244, 242, .25);
  padding-left: .75rem;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.navlink {
  color: var(--paper);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: .45rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.navlink:hover { background: rgba(245, 244, 242, .1); color: var(--paper); }
.navlink.is-active { background: rgba(245, 244, 242, .15); color: var(--white); font-weight: 600; }

.navlink--button {
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.navlink--lang {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  border: 1px solid rgba(245, 244, 242, .3);
}

.topbar__signout { display: inline; }

/* The nav collapses behind a button on small screens. */
.topbar__toggle { display: none; }

@media (max-width: 860px) {
  .topbar__toggle {
    display: block;
    background: none;
    border: 1px solid rgba(245, 244, 242, .35);
    border-radius: var(--radius);
    width: 42px; height: 38px;
    cursor: pointer;
    position: relative;
  }
  .topbar__toggle-bar,
  .topbar__toggle-bar::before,
  .topbar__toggle-bar::after {
    content: ''; position: absolute; left: 10px; width: 20px; height: 2px;
    background: var(--paper);
  }
  .topbar__toggle-bar { top: 18px; }
  .topbar__toggle-bar::before { top: -6px; left: 0; }
  .topbar__toggle-bar::after  { top: 6px; left: 0; }

  .topbar__nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    padding-top: .5rem;
  }
  .topbar__nav.is-open { display: flex; }
  .navlink { padding: .7rem .5rem; }
  .topbar__signout, .topbar__signout .navlink { width: 100%; text-align: left; }
}

/* ---------- 5. Banners -------------------------------------------- */

.banner { border-bottom: 1px solid var(--rule); }
.banner__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: .7rem var(--edge);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .94rem;
}
.banner--success { background: var(--good-bg); border-bottom-color: var(--good); }
.banner--error   { background: var(--bad-bg);  border-bottom-color: var(--alert); }
.banner--warn    { background: var(--warn-bg); border-bottom-color: var(--orange); }
.banner--info    { background: var(--info-bg); border-bottom-color: var(--info-line); }
.banner--bad     { background: var(--bad-bg);  border-bottom-color: var(--alert); }

.linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--orange-ink);
  text-decoration: underline; cursor: pointer;
}

/* ---------- 6. Layout --------------------------------------------- */

.page { flex: 1 0 auto; padding: 2rem 0 4rem; }

.shell { max-width: 78rem; margin: 0 auto; padding: 0 var(--edge); }
.shell--form   { max-width: 48rem; }
.shell--narrow { max-width: 27rem; }

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
/* Stacked on anything narrower than a small laptop. The single column is
   minmax(0, 1fr) rather than 1fr for the same reason as the two-column
   rule above: a grid item's automatic minimum size is its content, so a
   wide table inside would push the column — and the whole page — past the
   width of a phone instead of scrolling inside its own wrapper. */
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }

.col--side { display: grid; gap: 1.25rem; }

.grid { display: grid; gap: 0 1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.section { margin-top: 2.5rem; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}

/* ---------- 7. Type ----------------------------------------------- */

.h1 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  font-stretch: 95%;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .75rem; }
.h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
.h4 {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel);
  margin: 1.25rem 0 .4rem;
}

.lede { color: var(--steel); margin-top: .4rem; max-width: 52ch; }
.muted { color: var(--steel); }
.small { font-size: .88rem; }
.mono { font-family: var(--mono); font-size: .82rem; letter-spacing: -.02em; }
.nowrap { white-space: nowrap; }
.breakable { overflow-wrap: anywhere; }

.pagehead { margin-bottom: 1.75rem; }
.pagehead--split {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.headactions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.crumb { font-size: .9rem; margin-bottom: .75rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

.sub {
  display: block;
  font-size: .82rem;
  color: var(--steel);
  margin-top: .1rem;
}
.sub--bad { color: var(--alert); font-weight: 600; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--concrete); color: var(--steel);
  padding: .1rem .35rem; border-radius: 3px;
  margin-left: .4rem;
}

.linkish { font-size: .92rem; font-weight: 600; }

/* ---------- 8. Cards ---------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.card--quiet { background: transparent; box-shadow: none; }
.card--centred { text-align: center; }
.card--form { padding: 1.75rem; }
.card__foot {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .92rem;
}
.card__foot p { margin-bottom: .35rem; }

.subcard {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--paper);
}

/* ---------- 9. Stats ---------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--steel-lt);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  display: flex; flex-direction: column; gap: .15rem;
  text-decoration: none; color: inherit;
}
.stat--link:hover { border-left-color: var(--orange); color: inherit; }
.stat--money { border-left-color: var(--orange); }
.stat--attention { border-left-color: var(--alert); background: var(--bad-bg); }

.stat__label {
  font-family: var(--mono);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel);
}
.stat__value {
  font-size: 1.6rem; font-weight: 700;
  font-stretch: 92%; letter-spacing: -.02em;
  line-height: 1.1;
}
.stat__value--sm { font-size: 1.05rem; }
.stat__note { font-size: .78rem; color: var(--steel); }

/* ---------- 10. Tables -------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
  /* A positioning context, so the .sr-only labels inside the admin's
     per-row forms are contained here. Without it their containing block is
     the page: they sit at the scrolled-out x-position of their row and
     stretch the document, which showed up as a phone scrolling sideways
     into empty space. */
  position: relative;
}

.table { width: 100%; border-collapse: collapse; font-size: .94rem; }

.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  white-space: nowrap;
}

.table td {
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(240, 108, 42, .03); }

.table--tight td, .table--tight th { padding: .55rem .7rem; }

.row--muted td { opacity: .55; }

/* ---------- 11. Pills and chips ----------------------------------- */

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .04em;
  padding: .22rem .5rem;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill--neutral  { background: var(--concrete); color: var(--ink-2); }
.pill--progress { background: var(--info-bg); color: var(--info-line); }
.pill--good     { background: var(--good-bg); color: var(--good); }
.pill--bad      { background: var(--bad-bg); color: var(--alert); }
.pill--warn     { background: var(--warn-bg); color: var(--orange-ink); }

.filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.25rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem;
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.chip:hover { border-color: var(--steel-lt); color: var(--ink); }
.chip.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.chip__n { font-family: var(--mono); font-size: .68rem; opacity: .75; }
/* Separates Open / Closed from the individual statuses. */
.filters__rule { width: 1px; align-self: stretch; background: var(--rule); margin: 0 .2rem; }

/* The filter panel above each referral list. Labelled fields in a grid
   that reflows from four across to one on a phone. */
.filterbar {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.filterbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .25rem 1rem;
  align-items: start;
}
.filterbar__grid .field { margin-bottom: .6rem; }
.filterbar__search { grid-column: span 2; }
@media (max-width: 560px) { .filterbar__search { grid-column: auto; } }
.filterbar__range { display: contents; }
.filterbar__grid .field--check { align-self: end; padding-bottom: .4rem; }
.filterbar__more { margin-top: .4rem; padding-top: .8rem; }
.filterbar__more .disclosure__summary { margin-bottom: .6rem; }
.filterbar__actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }

/* Sortable column headings. */
.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
.sortlink:hover { color: var(--orange-ink); text-decoration: underline; }
.sortlink.is-sorted { color: var(--ink); }
.sortlink__arrow { margin-left: .3rem; font-family: var(--display); }

/* ---------- 12. Forms --------------------------------------------- */

.fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.legend {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--orange-ink);
  padding: 0 0 .6rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}

.field { margin-bottom: 1.15rem; }

.label {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.label__note { font-weight: 400; color: var(--steel); font-size: .85rem; }

.input {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--steel-lt);
  border-radius: var(--radius);
}
.input:hover { border-color: var(--steel); }
.input:focus-visible { border-color: var(--orange); }

.input--area { resize: vertical; min-height: 5rem; line-height: 1.5; }
.input--money { font-family: var(--mono); font-size: .88rem; }
.input--select {
  appearance: none;
  padding-right: 2rem;
  /* The same chevron as the searchable country picker, so the two kinds
     of dropdown look alike side by side. A data: image, which the CSP's
     img-src allows. */
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2361616B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .75rem center;
}
.combo__button.input--select { background-image: none; }

.input--mini { padding: .35rem .5rem; font-size: .85rem; width: auto; display: inline-block; }
.input--tiny { width: 4.5rem; }

.field__help {
  font-size: .85rem;
  color: var(--steel);
  margin-top: .3rem;
  max-width: 60ch;
}

.field__error {
  font-size: .85rem;
  font-weight: 600;
  color: var(--alert);
  margin-top: .3rem;
}
.field--error .input { border-color: var(--alert); border-width: 2px; }

.field--check { margin-bottom: 1.25rem; }
.checkbox {
  display: flex; align-items: flex-start; gap: .6rem;
  cursor: pointer;
  font-size: .94rem;
}
.checkbox__box {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: .22rem;
  accent-color: var(--orange);
  cursor: pointer;
}
.checkbox__label { line-height: 1.5; }

.formactions {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.5rem;
}

.rowform {
  display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.rowactions { display: flex; gap: .4rem; flex-wrap: wrap; }

.searchbar {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.searchbar .input { width: auto; flex: 1 1 12rem; min-width: 0; }
.searchbar__clear { align-self: center; }

/* The partner ID under a heading: VP-00001. */
.partnerid { font-size: .94rem; margin-top: .4rem; }
.partnerid .mono { font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.partnerid .field__help { display: block; margin-top: .15rem; }

/* The searchable dropdown drawn over a country select by portal.js. */
.combo { position: relative; }
.combo__button {
  text-align: left;
  cursor: pointer;
  padding-right: 2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo__button::after {
  content: "";
  position: absolute; right: .8rem; top: 50%;
  width: .45rem; height: .45rem;
  margin-top: -.35rem;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(45deg);
}
.combo__button--empty { color: var(--steel); }
.field--error .combo__button { border-color: var(--alert); border-width: 2px; }
.combo__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  min-width: 14rem;
  padding: .4rem;
  background: var(--white);
  border: 1px solid var(--steel-lt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.combo__search { margin-bottom: .35rem; }
.combo__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 15rem; overflow-y: auto;
}
.combo__option {
  padding: .45rem .6rem;
  font-size: .94rem;
  border-radius: 4px;
  cursor: pointer;
}
.combo__option:hover,
.combo__option.is-active { background: var(--concrete); }
.combo__option[aria-selected="true"] { font-weight: 600; }
.combo__none { padding: .45rem .6rem; font-size: .9rem; color: var(--steel); }

/* ---------- 13. Buttons ------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .65rem 1.15rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--concrete); color: var(--ink); }

.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange);
}
.btn--primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: var(--on-orange); }

.btn--quiet {
  background: transparent;
  border-color: var(--steel-lt);
  color: var(--steel);
}
.btn--quiet:hover { background: var(--concrete); color: var(--ink); }

.btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.btn--full { width: 100%; text-align: center; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* In the dark header the outline colour has to flip to stay visible. */
.topbar .btn--sm { border-color: var(--orange); }

/* ---------- 14. Notices, empties ---------------------------------- */

.notice {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--steel-lt);
  background: var(--white);
  font-size: .94rem;
  margin-bottom: 1.25rem;
}
.notice--info { background: var(--info-bg); border-left-color: var(--info-line); }
.notice--ok   { background: var(--good-bg); border-left-color: var(--good); }
.notice--bad  { background: var(--bad-bg);  border-left-color: var(--alert); }
.notice--wide { display: block; }

.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--steel-lt);
  border-radius: var(--radius);
  color: var(--steel);
}
.empty p { margin-bottom: 1rem; }
.empty p:last-child { margin-bottom: 0; }
.empty--small { padding: 1.75rem 1rem; text-align: left; }

/* ---------- 15. Definition lists ---------------------------------- */

.deflist { display: grid; gap: .1rem; }
.deflist dt {
  font-family: var(--mono);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel);
  margin-top: .85rem;
}
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: 0; font-size: .94rem; }

/* ---------- 16. Timeline ------------------------------------------ */

.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.timeline__item {
  position: relative;
  padding: 0 0 1.25rem 1.5rem;
  border-left: 2px solid var(--concrete);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline__item::before {
  content: '';
  position: absolute; left: -.42rem; top: .4rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--paper);
}
.timeline__item--internal::before { background: var(--steel-lt); }

.timeline__when {
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .05em;
  color: var(--steel);
  text-transform: uppercase;
}
.timeline__what { font-size: .94rem; font-weight: 500; }

/* What an admin corrected on a referral: label, old value, new value. */
.changelist { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }
.changelist li {
  font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
}
.changelist strong { font-weight: 600; }
.changelist strong::after { content: ":"; }
.changelist__from { color: var(--steel); text-decoration: line-through; }
.timeline__note {
  font-weight: 400;
  color: var(--steel);
  margin-top: .3rem;
  padding: .6rem .8rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: .9rem;
}

/* ---------- 17. Progress bar -------------------------------------- */

.progress {
  height: .4rem;
  background: var(--concrete);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.progress__bar { display: block; height: 100%; background: var(--orange); width: 0; }
.progress--good { background: var(--good); }
.progress--bad  { background: var(--steel-lt); }
.progress--warn { background: var(--orange-lt); }

/* The width is a class, not a style attribute.
   Content-Security-Policy forbids inline styles — which is worth keeping,
   because it is the rule that makes an injected style attribute useless —
   so the handful of widths the pipeline can produce are enumerated here.
   Lead::progressPercent only ever returns multiples of five. */
.progress__bar--w0   { width: 0; }
.progress__bar--w5   { width: 5%; }
.progress__bar--w10  { width: 10%; }
.progress__bar--w15  { width: 15%; }
.progress__bar--w20  { width: 20%; }
.progress__bar--w25  { width: 25%; }
.progress__bar--w30  { width: 30%; }
.progress__bar--w35  { width: 35%; }
.progress__bar--w40  { width: 40%; }
.progress__bar--w45  { width: 45%; }
.progress__bar--w50  { width: 50%; }
.progress__bar--w55  { width: 55%; }
.progress__bar--w60  { width: 60%; }
.progress__bar--w65  { width: 65%; }
.progress__bar--w70  { width: 70%; }
.progress__bar--w75  { width: 75%; }
.progress__bar--w80  { width: 80%; }
.progress__bar--w85  { width: 85%; }
.progress__bar--w90  { width: 90%; }
.progress__bar--w95  { width: 95%; }
.progress__bar--w100 { width: 100%; }

/* A button that has been pressed and is waiting for the server. Set by
   portal.js as a class, for the same reason as above. */
.btn.is-submitting { pointer-events: none; opacity: .6; }

/* ---------- 18. Activity list ------------------------------------- */

.activity { list-style: none; padding: 0; margin: 0; }
.activity__item {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .88rem;
}
.activity__item:last-child { border-bottom: 0; }
.activity__what { font-family: var(--mono); font-size: .74rem; display: block; }
.activity__who, .activity__when { color: var(--steel); font-size: .8rem; }
.activity__who::after { content: ' · '; }

/* ---------- 19. Disclosure ---------------------------------------- */

.disclosure {
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
  padding-top: 1rem;
}
.disclosure__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .94rem;
  color: var(--orange-ink);
  list-style-position: outside;
  margin-bottom: 1rem;
}
.disclosure__summary:hover { color: var(--orange-dk); }

/* ---------- 20. Footer -------------------------------------------- */

.foot {
  flex: none;
  border-top: 1px solid var(--rule);
  background: var(--concrete);
  padding: 1.5rem 0;
  font-size: .85rem;
  color: var(--steel);
}
.foot__inner {
  max-width: 78rem; margin: 0 auto; padding: 0 var(--edge);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- 21. Signed-out pages ---------------------------------- */

/* The login, register and reset pages have no sidebar and little content,
   so they get vertical breathing room rather than sitting under the
   header looking abandoned. */
.body--plain .page { display: flex; align-items: center; padding: 3rem 0; }
.body--plain .shell { width: 100%; }

/* ---------- 22. Print --------------------------------------------- */

/* Somebody will print a commission statement and put it in a file. */
@media print {
  .topbar, .foot, .filters, .formactions, .searchbar, .banner, .skip { display: none; }
  body { background: #fff; }
  .card, .tablewrap { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* ---------- 23. Reduced motion ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}