/*
 * Compass interface styles. One file, same origin, no web fonts.
 * WCAG 2.2 AA: text contrast of at least 4.5:1, a focus outline that is always
 * visible, and every interactive target at least 24 by 24 CSS pixels (most are
 * 44). Status is never shown by colour alone: every state carries a word and
 * an icon as well.
 */

:root {
  --ink: #1b1f24;
  --ink-muted: #4a5360;
  --paper: #ffffff;
  --paper-alt: #f4f5f7;
  --rule: #6b7480;
  --rule-light: #d5d9df;
  --link: #1a4fb5;
  --focus: #0b3d91;
  --focus-halo: #ffdd00;
  --error: #b3261e;
  --ok: #1e6b3a;
  --warn: #8a4b00;
  --brand: #0f2a4a;

  /*
   * The target's look (roadmap 120, docs/design/target-ui-2026-10-05.html).
   * Where a target shade failed WCAG 2.2 AA it was moved as little as passes
   * (DECISIONS.md, roadmap 120): muted text #6a7688 to #616c7d (4.52:1 on
   * the column grey), the bar's control border #3b5a78 to #4c759c (3.02:1 on
   * the bar), the chip and card border #d6dde6 to #728aa9 (3.02:1 on the
   * column grey), the card's left edge #7fc4ff to #0088fc (3.01:1), and
   * the card's attention line #b4541a to #b05219 (4.50:1 on a hovered card).
   */
  --bar: #0f2a44;
  --bar-text: #c9d6e3;
  --bar-field: #1e3d5c;
  --bar-field-text: #9fb3c8;
  --bar-line: #4c759c;
  --accent: #7fc4ff;
  --page: #f4f6f9;
  --column: #e9edf2;
  --column-text: #4a5668;
  --muted: #616c7d;
  --line: #728aa9;
  --card-edge: #0088fc;
  --attention-text: #b05219;

  /*
   * The stage header boxes' fills (Shaya, 7 October, brief #422), one hue
   * per stage, each behind white text. Contrast with white, then with the
   * column grey #e9edf2 (the box's edge, 1.4.11): Lead blue #1f5f9e 6.59:1
   * and 5.60:1, teal #0c6b6b 6.30:1 and 5.36:1, amber #8a5a00 5.93:1 and
   * 5.04:1, indigo #4338a8 8.86:1 and 7.54:1, orange #b0420c 5.78:1 and
   * 4.92:1, purple #6f3a9e 7.57:1 and 6.44:1, green #2b6a33 6.54:1 and
   * 5.56:1, Closed grey #5c6470 5.98:1 and 5.09:1. Closed is not on the
   * board yet (roadmap 133).
   */
  --stage-lead: #1f5f9e;
  --stage-fact-find: #0c6b6b;
  --stage-terms-onboarding: #8a5a00;
  --stage-application: #4338a8;
  --stage-underwriting-valuation: #b0420c;
  --stage-offer-legals: #6f3a9e;
  --stage-completion: #2b6a33;
  --stage-closed: #5c6470;
  --stage-header-text: #ffffff;
}

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

html {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
}

body {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

main:focus,
h1:focus,
h2:focus,
.error-summary:focus {
  outline: none;
  box-shadow: none;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--link);
  z-index: 10;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Header: the target's dark top bar (roadmap 120). The tabs at the left,
   drawn as folder tabs (brief #423); Settings, Search and the account
   button at the right. Below 48rem the bar wraps, and the Settings and
   account lists open in its flow, so nothing covers a control or pushes the
   page sideways at 320px. */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  min-height: 3.5rem;
  padding: 0.25rem 1.25rem;
  background: var(--bar);
  color: #ffffff;
}

.site-header a {
  color: #ffffff;
}

.site-header :focus-visible {
  outline-color: var(--focus-halo);
  box-shadow: none;
}

.brand {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.brand a {
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0;
  text-transform: uppercase;
}

.brand-by {
  color: var(--accent);
  text-transform: none;
}

.site-nav {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
}

.site-nav > ul {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Folder tabs (brief #423), like the dividers in a filing cabinet: rounded
 * top corners and an outline against the bar (#6a92b8 on the bar, 4.47:1).
 * The other tabs sit a little lower and darker, and lift on hover and
 * focus. The current tab takes the page's own background and stands at the
 * bar's foot, so it joins the content below with no line between them; it
 * is bold as well, so it is marked by shape and weight, not colour alone.
 */
.site-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0 0.75rem;
  color: var(--bar-text);
  background: var(--bar-field);
  border: 1px solid #6a92b8;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(0.25rem);
  transition: transform 0.1s ease-out;
}

.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus-visible {
  color: #ffffff;
  background: #2a4d70;
  transform: none;
}

.site-nav > ul > li > a:hover {
  text-decoration: underline;
}

.site-nav > ul > li > a[aria-current='page'] {
  color: var(--ink);
  background: var(--page);
  border-color: var(--page);
  font-weight: 700;
  transform: none;
}

/* The yellow ring would vanish on the pale tab: a dark ring inside it. */
.site-nav > ul > li > a[aria-current='page']:focus-visible {
  outline-color: var(--focus);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav > ul > li > a {
    transition: none;
  }
}

/*
 * From 72rem (where they fit beside one another) the brand has the bar's
 * first row, and the tabs, Settings, Search and the account button share
 * the second, the tabs standing on the bar's foot so the current one meets
 * the page. Narrower, the bar wraps as before, Search and the account
 * button below the tabs, and the current tab keeps its shape, weight and
 * pale face.
 */
@media (min-width: 72rem) {
  .site-header {
    padding-bottom: 0;
  }

  .site-header > .brand {
    flex-basis: 100%;
  }
}

/*
 * Settings: a disclosure (roadmap 93), at the right of the bar. Below 48rem
 * its list opens in the header's flow; wider, it drops below the button over
 * the page, lined up with the button's right edge.
 */
.site-nav-group {
  position: relative;
  align-self: center;
  margin-left: auto;
}

.site-nav-toggle {
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  color: #ffffff;
  background: transparent;
  border: 1px solid var(--bar-line);
  border-radius: 6px;
  cursor: pointer;
}

/* A chevron drawn with borders, so it adds nothing to the button's name. */
.site-nav-chevron {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin: 0 0.2em 0.15em 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.site-nav-toggle[aria-expanded='true'] .site-nav-chevron {
  margin-bottom: -0.1em;
  transform: rotate(-135deg);
}

/* The page shown is one of the settings: bold and underlined, not colour alone. */
.site-nav-toggle[data-current] {
  font-weight: 700;
  border-bottom: 3px solid #ffffff;
}

.site-nav .site-nav-settings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0.25rem 0 0.25rem 1rem;
  list-style: none;
}

.site-nav .site-nav-settings[hidden] {
  display: none;
}

.site-nav-settings a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  padding: 0 0.25rem;
  color: #ffffff;
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .site-nav .site-nav-settings {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 14rem;
    padding: 0.25rem 0.75rem;
    background: var(--bar);
    border: 1px solid #ffffff;
    border-radius: 6px;
  }
}

/* The account button: the viewer's initials in a circle (roadmap 120). */
.account {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.account-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--bar);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.account-toggle[aria-expanded='true'] {
  box-shadow: 0 0 0 3px #ffffff;
}

.account-list {
  flex-basis: 100%;
  padding: 0.25rem 0 0.5rem;
}

.account-list p {
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .account-list {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 14rem;
    max-width: 22rem;
    padding: 0.75rem;
    background: var(--bar);
    border: 1px solid #ffffff;
    border-radius: 6px;
  }
}

.site-header .button-secondary {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* Layout */

main {
  display: block;
  padding: 1.5rem;
  max-width: 90rem;
  margin: 0 auto;
}

main.narrow {
  max-width: 34rem;
}

/* The cockpit uses the width of the screen. */
main.cockpit {
  max-width: none;
  padding-top: 0.75rem;
}

/* The page heading and its chips on one line (roadmap 120), wrapping when
   narrow. */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}

.page-bar h1 {
  font-size: 1.375rem;
  margin: 0;
}

.chip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
}

/* A chip: a button with a 3:1 border, pressed shown filled and ticked. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--bar);
  text-decoration: underline;
}

.chip[aria-pressed='true'] {
  color: #ffffff;
  background: var(--bar);
  border-color: var(--bar);
}

.chip[aria-pressed='true']::before {
  content: '✓' / '';
}

/* The pipeline's filter chips (roadmap 121), each pair or set kept
   together as it wraps. */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

/* The finance chips (Shaya, 6 October, item 5) keep to one line: the
   script sets --family-room to the width all of them need, the group
   shrinks below it when the line is short, and the chips that do not fit
   go behind "More" at its end. Nothing clips the row: until the script has
   fitted a chip that grew (a user's text spacing), it shows in full. */
.page-bar .chip-bar {
  flex: 1 1 auto;
  min-width: 0;
}

.family-chips {
  flex: 0 1 var(--family-room, auto);
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

.family-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem 0.625rem;
  flex: 0 1 auto;
  min-width: 0;
}

.family-row .chip {
  flex: none;
  white-space: nowrap;
}

.chip-more {
  position: relative;
  flex: none;
}

.chip-more > .chip {
  white-space: nowrap;
}

.chip-more-icon {
  margin-left: 0.25em;
}

.chip-more [aria-expanded='true'] .chip-more-icon {
  display: inline-block;
  transform: rotate(180deg);
}

.chip-more-list[hidden] {
  display: none;
}

.chip-more-list {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: max-content;
  max-width: 16rem;
  padding: 0.625rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* "Showing N of M cases", after each change of filter. */
.cases-count {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.pipeline {
  margin-bottom: 1.5rem;
}

@media (max-width: 30rem) {
  main {
    padding: 1rem;
  }
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1rem 0 0.25rem;
}

.lede {
  color: var(--ink-muted);
  margin-top: 0;
}

.note {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

.panel {
  border: 1px solid var(--rule-light);
  border-top: 4px solid var(--brand);
  padding: 1rem;
  background: var(--paper);
  margin-bottom: 1.5rem;
}

/* The panels below the board take the compact look (roadmap 120). */
.panel-compact {
  border: 1px solid var(--rule-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

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

.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cockpit-grid .panel {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .cockpit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The wide panels (obligations, the work queue) take two thirds. */
@media (min-width: 75rem) {
  .cockpit-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Empty and error states: one calm look for "nothing here yet", and a
   clearly different one, with an icon and the word Error, for a failure. */

.empty-state {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border-left: 4px solid var(--rule-light);
  padding: 0.75rem 1rem;
  margin: 0;
}

.empty-state::before {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--rule);
  border-radius: 50%;
}

.error-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  color: var(--ink);
  background: #fdf1f0;
  border: 2px solid var(--error);
  border-left-width: 6px;
  padding: 0.75rem 1rem;
  margin: 0;
}

.error-state .status-icon,
.error-state strong {
  color: var(--error);
}

/* Stage board (roadmap 120): grey columns, each headed by a box filled
   with its stage's colour, its name in bold white capitals and its count
   (brief #422), holding compact white cards. Below 56.25rem (about 900px) the columns stack, one stage per row,
   so nothing scrolls sideways at 320px. Wider (Shaya, 6 October, item 1),
   eight columns (the seven stages and Closed) of the same width side by side, the board as tall as the
   window below the top bar, and a long column scrolling inside itself, so
   the page never grows with the longest one. */

.board {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

.board-column {
  --stage-colour: var(--column-text);
  background: var(--column);
  border-radius: 8px;
  padding: 0.5rem;
  min-width: 0;
}

.board-column[data-stage='lead'] { --stage-colour: var(--stage-lead); }
.board-column[data-stage='fact-find'] { --stage-colour: var(--stage-fact-find); }
.board-column[data-stage='terms-onboarding'] { --stage-colour: var(--stage-terms-onboarding); }
.board-column[data-stage='application'] { --stage-colour: var(--stage-application); }
.board-column[data-stage='underwriting-valuation'] { --stage-colour: var(--stage-underwriting-valuation); }
.board-column[data-stage='offer-legals'] { --stage-colour: var(--stage-offer-legals); }
.board-column[data-stage='completion'] { --stage-colour: var(--stage-completion); }
.board-column[data-stage='closed'] { --stage-colour: var(--stage-closed); }

/* The header box: the stage's fill, white text, and the name wrapping
   rather than being cut off. The fill is the box's edge, at least 3:1 on
   the column grey; it replaces the column's old coloured top border. */
.board-column h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--stage-colour);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--stage-header-text);
}

.stage-name {
  overflow-wrap: break-word;
  min-width: 0;
}

.count {
  flex: none;
}

.column-empty {
  margin: 0;
  padding: 0 0.25rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Stacked, an empty stage is one compact line: its heading, then "No cases". */
@media (max-width: 56.2375rem) {
  .board-column.is-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .board-column.is-empty h3 {
    flex: 1 1 auto;
    margin: 0;
  }

  .board-column.is-empty .column-empty {
    padding-bottom: 0;
  }
}

@media (min-width: 56.25rem) {
  .board {
    display: grid;
    /* The seven stages and Closed (brief #438). */
    grid-template-columns: repeat(8, minmax(9rem, 1fr));
    /* Two rows shared by every column (brief #422): the header boxes, as
       tall as the tallest title, then the cards. */
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 0;
    /* The window's height less the top bar, the page bar and the count. */
    height: max(20rem, calc(100vh - 10rem));
    overflow-x: auto;
    padding: 0 0 0.5rem;
  }

  /* Each column takes both rows as a subgrid, so a two-line title such as
     "Fact Find & Indicative Terms" makes every header box taller together,
     never one alone. */
  .board-column {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: subgrid;
    /* One track no wider than the column, as the flex column was: a long
       word in a card wraps rather than widening the card list. */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
    min-height: 0;
  }

  .board-column h3 {
    margin: 0;
  }
}

/* From 72rem the top bar gives the brand its own row (brief #423): the
   board is that much shorter, so it still ends inside the window. */
@media (min-width: 72rem) {
  .board {
    height: max(20rem, calc(100vh - 12.5rem));
  }
}

.placement-rules {
  margin-top: 1rem;
  border-top: 1px solid var(--rule-light);
  padding-top: 0.5rem;
}

.placement-rules summary {
  min-height: 44px;
  padding: 0.6rem 0;
  font-weight: 700;
  cursor: pointer;
}

.placement-rules dl {
  margin: 0 0 0.75rem;
}

.placement-rules dt {
  font-weight: 700;
  margin-top: 0.5rem;
}

.placement-rules dd {
  margin: 0;
}

.board-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0.5rem;
}

@media (min-width: 56.25rem) {
  /* The cards stack down the column and scroll inside it. Every card is a
     button, so the keyboard reaches each one and the column scrolls to it;
     the padding keeps a focused card's outline and halo inside the clip. */
  .board-column .board-cards {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: -0.5rem;
    padding: 0.5rem;
  }
}

/* A card: white, a 3:1 border and a blue left edge, the name in bold. */
.case-card {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--card-edge);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 0.5rem 0.5625rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.case-card:hover {
  border-color: var(--bar);
  background: #eaf0f8;
}

.case-card:hover .case-name {
  text-decoration: underline;
}

.case-card:focus-visible {
  border-color: var(--bar);
}

/* The open case: a thicker border all round, not colour alone. */
.case-card[aria-pressed='true'] {
  border-width: 3px;
  border-left-width: 6px;
  border-color: var(--bar);
}

.case-card .case-name {
  display: block;
  font-weight: 700;
}

.case-card .meta {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

/* The amount and finance type, and the viewer's next action (roadmap 121).
   The target's next-action orange (#b4541a) is taken at --attention-text,
   which holds 4.5:1 on the card's hover tint as well as on white. */
.case-card .card-figure {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

.case-card .card-next {
  display: block;
  margin-top: 0.25rem;
  color: var(--attention-text);
  font-size: 0.75rem;
}

.case-card .case-attention {
  margin-top: 0.25rem;
  color: var(--attention-text);
}

/* A closed case (brief #438): why it closed, and the "Money not reconciled"
   flag in words with a mark, never colour alone (D60 Q6). --warn holds
   4.5:1 on white and on the card's hover tint. */
.case-card .card-closure {
  margin-top: 0.25rem;
}

.money-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 700;
}

.money-flag .status-icon {
  font-size: 0.7rem;
}

/* The cases table's Move to stage (brief #438): the menu opens below the
   button, inside the cell. */
.table-move .stage-move {
  min-width: 11rem;
}

/* A reason or file name from the server can be one long word; it wraps
   rather than pushing the page sideways at 320px (roadmap 82). */
.decision-reason {
  overflow-wrap: anywhere;
}

/* The case page (roadmap 30) */

.breadcrumbs ol {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 0.25rem;
  color: var(--ink-muted);
}

.breadcrumbs a {
  display: inline-block;
  min-height: 24px;
}

/* The case's tabs (roadmap 119, brief #353), under the summary header in
   the panel and on the case page. Colours from the approved target; its
   grey tab text (#6a7688) fails 4.5:1 on white, so --ink-muted stands in.
   The chosen tab is marked by its bar and weight as well as its colour, and
   the tabs wrap onto a second line rather than scroll sideways. */

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--rule-light);
  margin: 0 0 1rem;
}

.tab-list [role="tab"] {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}

.tab-list [role="tab"]:hover {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--rule);
}

.tab-list [role="tab"][aria-selected="true"] {
  color: #0f2a44;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #0f2a44;
}

.tab-list [role="tab"]:focus-visible {
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.tab-list [role="tab"][aria-selected="true"]:focus-visible {
  box-shadow: inset 0 -3px 0 #0f2a44, 0 0 0 6px var(--focus-halo);
}

[role="tabpanel"] {
  overflow-wrap: anywhere;
}

/* The blocks inside a case tab (brief #383): each under its own heading in
   the target's style (small, upper case, slate #4a5668 at 7.4:1 on white),
   with a divider between blocks so a person scrolling can tell what they
   are looking at. */

[role="tabpanel"] > * + * {
  border-top: 1px solid var(--rule-light);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

[role="tabpanel"] > h2 + * {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

[role="tabpanel"] h3 {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--column-text);
  margin: 0 0 0.5rem;
}

/* System information (brief #383): one small muted area at the foot of a
   tab, closed by default, and a refusal's code on its own muted line. The
   muted ink #4a5360 is 7.6:1 on white. */

.system-area {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

[role="tabpanel"] h3.system-heading {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

.system-toggle {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  min-height: 1.5rem;
  padding: 0.25rem 0;
  font: inherit;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}

.system-toggle::before {
  content: "\25B8\00A0" / "";
}

.system-toggle[aria-expanded="true"]::before {
  content: "\25BE\00A0" / "";
}

.system-body {
  margin-top: 0.5rem;
}

.system-body .note,
.system-body table {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.system-line {
  margin: 0.25rem 0 0;
}

.system-label {
  font-weight: 600;
}

/* The working panel (roadmap 96, brief #353): a modal dialog from the
   right, over the dimmed board, full width on a narrow screen. Colours from
   the approved target; its grey label text (#6a7688) and amber (#b4541a)
   fail 4.5:1 on their tiles, so --ink-muted and --warn stand in. */

.has-case-panel {
  overflow: hidden;
}

.case-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(1020px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
}

.case-panel[open] {
  display: flex;
  flex-direction: column;
  animation: case-panel-in 0.2s ease-out;
}

.case-panel::backdrop {
  background: rgba(15, 42, 68, 0.35);
}

@keyframes case-panel-in {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
}

.case-panel-bar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--rule-light);
}

.case-panel-body {
  flex: 1;
  overflow: auto;
  padding: 0 1.5rem 1.5rem;
  overflow-wrap: anywhere;
  scroll-padding-top: var(--case-header-clearance, 0px);
}

/* The summary header (roadmap 97): sticky at the top of the panel and of the
   case page, once there is room for it to stay without covering the work. */

.case-header {
  background: var(--paper);
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--rule-light);
  margin-bottom: 1rem;
}

.case-header h2 {
  margin: 0 0 0.25rem;
}

.case-header-links {
  margin: 0 0 0.5rem;
}

.case-page .case-header {
  padding-top: 0;
}

@media (min-width: 48em) and (min-height: 40em) {
  .case-header {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  html {
    scroll-padding-top: var(--case-header-clearance, 0px);
  }
}

.stage-strip {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 4px;
}

.stage-step {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  font-size: 0.8125rem;
  padding: 0.3rem 0.25rem;
  border-radius: 3px;
  background: #e9edf2;
  color: var(--ink-muted);
}

.stage-step.is-done {
  background: #cfe6d8;
  color: #255c3a;
}

.stage-step.is-current {
  background: #0f2a44;
  color: #ffffff;
  font-weight: 600;
}

.case-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.case-tiles-next {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.case-tile {
  background: #f4f6f9;
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
}

.case-tile dt {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 400;
}

.case-tile dd {
  margin: 0;
  font-weight: 600;
}

.case-tile.is-alert {
  background: #fff1e6;
}

.case-tile.is-alert dd {
  color: var(--warn);
}

/* Lenders (roadmap 101): the filter bar, one labelled control per filter,
   side by side where they fit, so later filters slot in beside them; and
   the disclosure button that opens a lender's detail. Ink on paper, as the
   body text. */

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0 1rem;
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  min-width: 0;
}

.filter-bar legend {
  grid-column: 1 / -1;
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.5rem;
}

.filter-bar .field {
  margin-bottom: 0.75rem;
}

.lender-toggle {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  min-height: 24px;
  padding: 0.25rem 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.lender-toggle::before {
  content: "\25B8\00A0" / "";
}

.lender-toggle[aria-expanded="true"]::before {
  content: "\25BE\00A0" / "";
}

.lender-detail > td {
  background: var(--paper-alt);
}

/* Lists and tables */

.plain-list {
  margin: 0;
  padding-left: 1.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0 1rem;
}

/* A table wider than its panel scrolls inside its own labelled region, which
   takes keyboard focus; the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
}

.table-scroll table {
  margin: 0;
}

th.case-name,
td.case-name {
  min-width: 14rem;
}

caption {
  text-align: left;
  font-weight: 700;
  padding: 0.25rem 0;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--rule-light);
}

/* The contact the palette opened (brief #441): a shaded row and a bar at
   its start, so it is marked by more than colour. */
tr[aria-current='true'] > th,
tr[aria-current='true'] > td {
  background: var(--paper-alt);
}

tr[aria-current='true'] > :first-child {
  box-shadow: inset 4px 0 0 var(--focus);
}

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

/* Status: word plus icon, never colour alone */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}

.status-icon {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  line-height: 1.2;
  font-size: 0.85rem;
}

.status-healthy {
  color: var(--ok);
}

.status-degraded,
.status-untested,
.status-unknown {
  color: var(--warn);
}

.status-failing {
  color: var(--error);
}

.status-not_configured,
.status-not_connected {
  color: var(--ink-muted);
}

/* Integrations */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
}

.card {
  border: 1px solid var(--rule-light);
  border-top: 4px solid var(--brand);
  padding: 1rem;
  height: 100%;
}

.card h2 {
  font-size: 1.15rem;
}

.card dl {
  margin: 0.5rem 0;
}

.card dt {
  font-weight: 700;
  margin-top: 0.5rem;
}

.card dd {
  margin: 0;
}

.restriction {
  font-weight: 700;
  border-left: 4px solid var(--brand);
  padding-left: 0.5rem;
}

/* Forms */

.field {
  margin-bottom: 1.25rem;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.hint {
  color: var(--ink-muted);
  margin: 0 0 0.25rem;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  font: inherit;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
}

select,
textarea,
input[type='date'] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  font: inherit;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
}

textarea {
  resize: vertical;
}

input[type='date'] {
  max-width: 14rem;
}

select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--error);
  border-width: 3px;
}

input.short-input {
  max-width: 8rem;
}

input.code-input {
  max-width: 10rem;
  letter-spacing: 0.2em;
}

input[aria-invalid='true'] {
  border-color: var(--error);
  border-width: 3px;
}

.field-error {
  color: var(--error);
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.field-error::before {
  content: 'Error: ';
}

.error-summary {
  border: 4px solid var(--error);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.error-summary h2 {
  font-size: 1.2rem;
}

.error-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.error-summary a {
  color: var(--error);
  font-weight: 700;
}

.confirmation {
  border: 4px solid var(--ok);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.button {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand);
  border: 2px solid var(--brand);
  cursor: pointer;
}

.button-secondary {
  color: var(--brand);
  background: var(--paper);
}

.button[disabled] {
  cursor: not-allowed;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border-color: var(--rule);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

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

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Card colour (mail sender): always with a word and an icon beside it */

.card-green {
  border-left: 6px solid var(--ok);
}

.card-red {
  border-left: 6px solid var(--error);
}

.card-amber {
  border-left: 6px solid var(--warn);
}

.colour-green {
  color: var(--ok);
}

.colour-red {
  color: var(--error);
}

.colour-amber {
  color: var(--warn);
}

/* Changes to check (brief #118): each suggestion is a card with a heading,
   its before and after, who suggested it and why, then the decision. */

.change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

/* A card never grows past its panel; its table scrolls inside itself. */
.change {
  min-width: 0;
  border: 1px solid var(--rule-light);
  border-left: 4px solid var(--brand);
  padding: 0.75rem 1rem;
}

.change h3 {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.change td,
.change dd {
  overflow-wrap: anywhere;
}

.change-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
}

.change-details dt {
  font-weight: 700;
}

.change-details dd {
  margin: 0;
}

.change .actions {
  margin-top: 0.75rem;
}

.decline-form {
  width: 100%;
}

.status-waiting {
  color: var(--warn);
  margin: 0;
}

.rate {
  margin: 0 0 0.75rem;
}

/* A warning: an icon and the word Warning as well as its colour. */
.warning-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  color: var(--ink);
  background: #fff6e5;
  border: 2px solid var(--warn);
  border-left-width: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
}

.warning-state .status-icon,
.warning-state strong {
  color: var(--warn);
}

.confirmation-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-left: 6px solid var(--ok);
  padding: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}

.confirmation-line .status-icon {
  color: var(--ok);
}

.suggest {
  border-top: 1px solid var(--rule-light);
  margin-top: 1.5rem;
  padding-top: 1rem;
  max-width: 40rem;
}

/* How this case is classified (S3). The result stands out; each control
   says in words whether the firm has defined it, with an icon beside it,
   never colour alone. */
.classification {
  border-top: 1px solid var(--rule-light);
  margin-top: 1.5rem;
  padding-top: 1rem;
  max-width: 48rem;
}

.classification h4 {
  margin: 1rem 0 0.25rem;
}

.classification-result {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.control-list li {
  margin-bottom: 0.25rem;
}

.control-held .status-icon {
  color: var(--ok);
}

.control-missing .status-icon,
.control-missing strong {
  color: var(--warn);
}

/* S3 v2 (brief #131): a pending exemption or a referral. An icon and words
   as well as the border, never colour alone. */
.decision-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-left-width: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
}

.decision-record {
  border-left: 6px solid var(--rule-light);
  padding: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}

.decision-record p {
  margin: 0.25rem 0;
}

.decision-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.decision-form legend {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.decision-form .choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.decision-form .choice input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: none;
}

/* New case (brief #133): the button beside the board heading, and its form in place below it. */
.panel-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.panel-heading h2 {
  margin: 0;
}

.new-case {
  border-left: 4px solid var(--brand);
  padding: 0.5rem 1rem 1rem;
  margin-bottom: 1rem;
  max-width: 40rem;
}

.new-case h3 {
  margin-top: 0.5rem;
}

/* Quick case entry (brief #426): the finance type and amount side by side
   where there is room, and stacked at 320 px; each party and the property
   in its own box. */
.new-case-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 1rem;
}

.new-case-form fieldset {
  border: 1px solid var(--rule);
  padding: 0.75rem 1rem 0.25rem;
  margin: 0 0 1.25rem;
  min-width: 0;
}

.new-case-form legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.new-case-form .party-list fieldset {
  border-left: 4px solid var(--brand);
}

.party-matches {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.party-search-status:empty {
  display: none;
}

.party-search-status,
.party-linked {
  margin: 0 0 0.75rem;
}

.new-case-form fieldset > .button,
.party-entry + div > .button,
.new-case-form .field-error .button {
  margin: 0 0 1rem;
}

input.input-short {
  max-width: 10rem;
}

/* S4 (brief #132): the case's checks. Each state has an icon and words as
   well as its colour; blocked is never shown by colour alone. */
.checks {
  border-top: 1px solid var(--rule-light);
  margin-top: 1.5rem;
  padding-top: 1rem;
  max-width: 48rem;
}

.check-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  border: 2px solid var(--ink);
  border-left-width: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
}

.check-summary.check-blocked {
  border-color: var(--error);
}

.check-summary.check-met {
  border-color: var(--ok);
}

.check-list > li {
  border-top: 1px solid var(--rule-light);
  padding: 0.75rem 0;
}

.check-name,
.check-state {
  margin: 0 0 0.25rem;
}

.check-state {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
}

.check-met .status-icon {
  color: var(--ok);
}

.check-unmet .status-icon,
.check-waiting .status-icon {
  color: var(--warn);
}

.check-blocked .status-icon,
.check-blocked strong {
  color: var(--error);
}

.check-action .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.check-form-title {
  font-weight: 700;
  margin: 0.5rem 0;
}

/* S5 (brief #156): the case's obligations. Each state has an icon and words
   as well as its colour, as the checks do. */
.obligations {
  border-top: 1px solid var(--rule-light);
  margin-top: 1.5rem;
  padding-top: 1rem;
  max-width: 48rem;
}

.obligation-list > li {
  border-top: 1px solid var(--rule-light);
  padding: 0.75rem 0;
}

.obligation-name {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.obligation-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0;
}

.obligation-facts dt {
  font-weight: 700;
}

.obligation-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.decision-form [hidden] {
  display: none;
}

/* Notes on a case (brief #427): the add box, the filter and the list */

.case-notes .case-note-filter input[type='search'] {
  display: block;
  width: 100%;
  max-width: 28rem;
  min-height: 44px;
  padding: 0.5rem;
  font: inherit;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
}

.case-note-list > li {
  margin-bottom: 0.75rem;
}

.case-note {
  border-left: 4px solid var(--rule);
  padding: 0.5rem 0 0.5rem 0.75rem;
}

.case-note-byline {
  margin: 0 0 0.25rem;
}

/* The text as written: its line breaks kept, a long word wrapped at 320 px */
.case-note-body {
  margin: 0 0 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.case-note-hidden {
  border-left-style: dashed;
}

.case-note-earlier summary {
  min-height: 24px;
  cursor: pointer;
}

.case-note-actions,
.case-note-hide-confirm .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Documents (brief #152): the case's section and the firm page */

.documents {
  margin-top: 2rem;
  border-top: 2px solid var(--rule);
  padding-top: 1rem;
}

.document-list > li {
  border-left: 4px solid var(--rule);
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.document-name {
  margin: 0 0 0.25rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.document-form {
  max-width: 36rem;
}

input[type='file'] {
  display: block;
  max-width: 100%;
  min-height: 44px;
  padding: 0.5rem 0;
  font: inherit;
}

input[type='file'][aria-invalid='true'] {
  outline: 3px solid var(--error);
  outline-offset: 2px;
}

/* Roadmap 95: the case's drop zone and the list of files to file. The zone
   says what to do in words and is highlighted by a solid border in place of
   a dashed one, not colour alone; the file input inside it does everything a drop does. */

.drop-zone {
  max-width: 36rem;
  border: 3px dashed var(--rule);
  padding: 1rem;
  margin-bottom: 1rem;
}

.drop-zone.is-over {
  border-style: solid;
  border-color: var(--brand);
  background: var(--paper-alt);
}

.drop-zone-words {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.drop-list {
  max-width: 36rem;
}

.drop-list > li {
  border-left: 4px solid var(--rule);
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.drop-list .document-name .note {
  font-weight: 400;
}

.drop-list .actions {
  margin-top: 0.5rem;
}

/* S6 (brief #157): the facility, its drawdown schedule, and a stage pinned
   as an exception. The pin is marked by an icon and words, never colour
   alone. */

.facilities,
.stage-override {
  margin-top: 1.5rem;
}

.facility {
  border-top: 1px solid var(--rule-light);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

/* Long labels: one column on a narrow screen, two from 40rem. */
.facility-facts {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .facility-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

.facility h4 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1rem;
}

.drawdown-list > li {
  border-left: 4px solid var(--rule-light);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.drawdown-blocking ul {
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding: 0;
}

.facility-events summary {
  min-height: 44px;
  padding: 0.6rem 0;
  cursor: pointer;
}

.pinned-stage {
  font-weight: 700;
}

.case-card .pinned-stage {
  display: block;
  margin-top: 0.25rem;
}

/* Needs attention (U3, brief #237): each line says what it is in words,
   with an icon, and names the kind of work in full, never a bare letter. */

.attention-list li {
  margin-bottom: 0.5rem;
}

.status-breached {
  color: var(--error);
}

.kind-marker {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
}

/* The Board and Table switch, two chips in the chip bar (roadmap 120): the
   chosen view is filled and ticked, so the state is never shown by colour
   alone. The tick is not read out: the button's pressed state says it. */

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A sortable column heading: the whole heading is the button. */

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--link);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.cases-table th[scope='row'] {
  font-weight: 700;
}

.cases-table .pinned-stage {
  color: var(--ink-muted);
}

/* Moving a case (D59, brief #388): the card can be dragged to another
   column, or moved with its stage menu, opened by M on the card (brief
   #410: no visible button on the card) and shown below it. A column a dragged card
   can go to has a dashed outline; the one under it a solid one, in a 3:1
   colour, and never colour alone: the outline itself is the mark. */
.board-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.board-card[draggable='true'] {
  cursor: grab;
}

.board-card.is-dragging {
  opacity: 0.6;
}

.is-dragging-card .board-column {
  outline: 2px dashed var(--line);
  outline-offset: -2px;
}

.is-dragging-card .board-column.is-drop-over {
  outline: 3px solid var(--bar);
  outline-offset: -3px;
  background: #dde6f0;
}

.card-move .move-menu {
  margin-top: 0;
}

/* Move to stage in the case header, beside the stage (brief #410). */
.case-header-move {
  margin: 0.375rem 0 0;
}

.stage-move {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 20rem;
}

.move-button {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}

.move-button:hover {
  border-color: var(--bar);
  text-decoration: underline;
}

.move-menu {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.move-menu[hidden] {
  display: none;
}

.move-menu [role='menuitemradio'] {
  display: flex;
  gap: 0.375rem;
  min-height: 2rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.move-menu [role='menuitemradio']:hover,
.move-menu [role='menuitemradio']:focus {
  background: #eaf0f8;
  text-decoration: underline;
}

.move-menu [aria-checked='true'] {
  font-weight: 700;
}

.move-mark {
  flex: none;
  width: 1em;
}

.move-current {
  color: var(--muted);
  font-weight: 400;
}

/* The hint where the stage set by hand and the calculated one differ:
   small and muted, in words. */
.stage-hint {
  color: var(--muted);
  font-size: 0.75rem;
}

.board-status:empty {
  display: none;
}

/* The confirm before a move and the Application prompt: small modal
   dialogs (brief #410). */
.move-dialog {
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.move-dialog::backdrop {
  background: rgba(15, 42, 68, 0.35);
}

.move-dialog h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.move-dialog select,
.move-dialog input {
  max-width: 100%;
}

/* Edit details in the case header (brief #432). While the form is open the
   header is not sticky, so the form and its buttons scroll into view at any
   height (WCAG 2.4.11, 1.4.10). */
.case-header-edit {
  margin: 0.375rem 0 0;
}

.case-details-form {
  max-width: 36rem;
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--rule-light);
}

input.amount-input {
  max-width: 14rem;
}

@media (min-width: 48em) and (min-height: 40em) {
  .case-header:has(.case-details-form:not([hidden])) {
    position: static;
  }
}

/* Tasks (brief #436): the case panel's Tasks tab and My tasks' Your tasks.
   One task per row, its actions under it, wrapping at 320 px; the done
   tasks folded under a disclosure. */
.task-list .task-items {
  list-style: none;
  padding-left: 0;
}

.task-list .task-item {
  border-top: 1px solid var(--rule-light);
  padding: 0.75rem 0;
}

.task-list .task-title {
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.task-list .task-meta,
.task-list .task-notes {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.task-list .task-notes {
  white-space: pre-wrap;
}

.task-list .task-late {
  color: var(--error);
  font-weight: 600;
}

.task-list .task-actions {
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.task-list .task-add {
  margin: 0.5rem 0 1rem;
}

.task-list .task-form textarea,
.task-list .task-form input[type='text'] {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
}

.task-list .task-form select {
  max-width: 100%;
}

.task-list .task-done-list {
  margin-top: 1rem;
}

.task-list .task-done-list summary {
  cursor: pointer;
  font-weight: 600;
}

.task-list .task-done .status-icon {
  color: var(--ok);
}