/* The main UI (Cases, New complaint, the case page). docs/design/DESIGN_PLAN.md:
   documents look like documents, the software stays quiet, and colour means
   something: red is safeguarding, amber is a date at risk, green is the thing
   to press. Loaded after app.css, whose older rules still style parked screens. */

@font-face {
  font-display: swap;
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/IBMPlexSerif-SemiBold.ttf") format("truetype");
}

:root {
  --canvas: #eceFed;
  --surface: #ffffff;
  --navy: #17201c;
  --ink: #17201c;
  --muted: #56615b;
  --line: #dde2de;
  --line-strong: #c9d1cc;
  --accent: #1d5b45;
  --accent-soft: #e3eee9;
  --green-hover: #164a38;
  --accent-deep: #164a38;
  --gate: #8a5a00;
  --gate-soft: #f7efdc;
  --ok: #1d5b45;
  --ok-soft: #e3eee9;
  --over: #a4262c;
  --over-soft: #fbeeee;
  --focus: #1d5b45;
  --shadow: 0 1px 2px rgb(23 32 28 / 6%);
  --radius: 4px;
  --paper-warm: #f5f1e8;
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

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

/* ---- Shell: a slim top bar instead of the sidebar ---- */

.app-shell[data-mode="shell"] {
  display: block;
}

.app-shell[data-mode="shell"] .sidebar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  flex-direction: row;
  gap: 28px;
  min-height: 0;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-shell[data-mode="shell"] .brand-mark,
.app-shell[data-mode="shell"] .brand-kicker {
  display: none;
}

.app-shell[data-mode="shell"] .brand-name {
  color: var(--ink);
  font: 600 18px/1 var(--sans);
  letter-spacing: -0.02em;
}

.app-shell[data-mode="shell"] .nav-list {
  display: flex;
  gap: 22px;
}

.app-shell[data-mode="shell"] .nav-item {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: 500;
  min-height: 56px;
  padding: 0;
  width: auto;
}

.app-shell[data-mode="shell"] .nav-item:hover {
  background: none;
  color: var(--ink);
}

.app-shell[data-mode="shell"] .nav-item.is-active {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.app-shell[data-mode="shell"] .nav-dot {
  display: none;
}

.app-shell[data-mode="shell"] .sidebar .topbar-actions {
  margin-left: auto;
}

.app-shell[data-mode="shell"] .capacity-switch {
  align-items: center;
  background: none;
  border: 0;
  color: var(--ink);
  display: flex;
  gap: 10px;
  padding: 6px 0;
}

.app-shell[data-mode="shell"] .capacity-switch .avatar {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  height: 30px;
  width: 30px;
}

.app-shell[data-mode="shell"] .capacity-role {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.app-shell[data-mode="shell"] .capacity-menu {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 32px rgb(23 32 28 / 14%);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
}

.app-shell[data-mode="shell"] .workspace {
  margin: 0 auto;
  max-width: 1228px;
}

.app-shell[data-mode="shell"] .shell-view {
  padding: 26px 24px 64px;
}

/* The page title. The case and New complaint pages carry their own header. */
.app-shell[data-mode="shell"] .shell-view > .topbar {
  margin-bottom: 18px;
}

.app-shell[data-mode="shell"] .breadcrumb {
  display: none;
}

.app-shell[data-mode="shell"] .topbar h1 {
  font: 600 28px/1.2 var(--sans);
  letter-spacing: -0.015em;
}

.app-shell[data-current-screen="case"] .shell-view > .topbar,
.app-shell[data-current-screen="intake"] .shell-view > .topbar {
  display: none;
}

/* ---- Labels: sentence case, and none sitting above a heading ---- */

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

[data-screen="inbox"] .section-heading .eyebrow,
[data-screen="intake"] .section-heading .eyebrow,
[data-screen="case"] .section-heading .eyebrow:not([data-render="case-ref"]),
[data-screen="inbox"] .section-heading h2,
.case-analysis-panel .eyebrow {
  display: none;
}

.status-pill {
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

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

.button {
  border-radius: var(--radius);
  font-weight: 500;
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.button.primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}

.button.secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

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

.button.link {
  background: none;
  border: 0;
  color: var(--accent);
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button.small {
  font-size: 13.5px;
  min-height: 0;
  padding: 6px 12px;
}

/* ---- Surfaces: paper on the desk, no boxes inside boxes ---- */

[data-screen="inbox"] .surface-section,
[data-screen="intake"] .surface-section,
[data-screen="case"] > .surface-section {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---- Cases ---- */

[data-screen="inbox"] .section-heading.with-actions {
  justify-content: flex-end;
  margin-bottom: 14px;
}

[data-screen="inbox"] .filter-row {
  gap: 6px;
}

[data-screen="inbox"] .filter-row .button.primary {
  margin-right: auto;
  order: -1;
}

.case-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 14px;
}

[data-screen="inbox"] .filter-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  min-height: 0;
  padding: 4px 12px;
}

[data-screen="inbox"] .filter-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.case-table {
  border-collapse: collapse;
  width: 100%;
}

.case-table th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 12px 20px;
  text-align: left;
  text-transform: none;
}

.case-table td {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  vertical-align: top;
}

.case-table tr:last-child td {
  border-bottom: 0;
}

.case-table tbody tr:hover {
  background: #f7f9f8;
}

.case-table tr.is-closed td {
  color: var(--muted);
}

/* The case file (owner's choice, 27 Sep): the list on the left, the selected
   case on the right. The edge of a row is its colour: red safeguarding, amber
   late, grey otherwise. */

.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.case-file {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  min-height: 620px;
  overflow: hidden;
}

.case-list {
  align-self: stretch;
  border-right: 1px solid var(--line);
}

.case-search {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--ink);
  font: 15px var(--sans);
  margin: 16px 20px 12px;
  padding: 9px 12px;
  width: calc(100% - 40px);
}

.case-search::placeholder {
  color: var(--muted);
}

.case-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.case-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-row {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 2px 10px;
  grid-template-columns: 5px 1fr auto;
  padding: 14px 20px 14px 14px;
  text-align: left;
  width: 100%;
}

.case-row:hover {
  background: #f7f9f8;
}

.case-row:focus-visible {
  outline-offset: -3px;
}

.case-row.is-selected {
  background: var(--accent-soft);
}

.case-row-edge {
  background: var(--line-strong);
  border-radius: 3px;
  grid-row: span 3;
}

.case-row.is-late .case-row-edge {
  background: var(--gate);
}

.case-row.is-safeguarding .case-row-edge {
  background: var(--over);
}

.case-row-name strong {
  font-size: 15px;
  font-weight: 600;
}

.case-row-name small {
  color: var(--muted);
  font-size: 12.5px;
  margin-left: 4px;
}

.case-row-when {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.case-row.is-late .case-row-when {
  color: var(--gate);
  font-weight: 600;
}

.case-row.is-safeguarding .case-row-when {
  color: var(--over);
  font-weight: 600;
}

.case-row-next {
  font-size: 14px;
  grid-column: 2 / -1;
}

.case-row-about {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  display: -webkit-box;
  font-size: 13px;
  grid-column: 2 / -1;
  line-height: 1.45;
  overflow: hidden;
}

.case-row.is-closed .case-row-name strong,
.case-row.is-closed .case-row-next {
  color: var(--muted);
}

.case-empty {
  color: var(--muted);
  padding: 20px;
}

.case-preview {
  padding: 26px 32px 32px;
}

.case-preview:empty {
  display: none;
}

.case-preview-top {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.case-preview-top h3 {
  font: 600 28px/1.2 var(--serif);
  margin: 0 0 4px;
}

.case-preview-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.case-preview-top .button {
  flex: none;
}

.case-preview-band {
  background: var(--accent);
  border-radius: 6px;
  color: #fff;
  margin: 18px 0;
  padding: 20px 24px;
}

.case-preview-band p {
  font: 16px/1.6 var(--serif);
  margin: 0 0 10px;
  max-width: 72ch;
}

.case-preview-band p:last-child {
  margin: 0;
}

.case-preview-band.is-empty {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.case-preview-band.is-empty p {
  font: 600 16px var(--sans);
}

.case-preview-band.is-empty .button.primary {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.case-preview-band.is-loading {
  background: var(--accent-soft);
  color: var(--muted);
}

.case-preview-next {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 18px;
}

.case-preview-next.is-late {
  border-left-color: var(--gate);
}

.case-preview-next.is-safeguarding {
  border-left-color: var(--over);
}

.case-preview-next.is-quiet {
  border-left-color: var(--line-strong);
}

.case-preview-next p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 2px 0 0;
}

.case-preview-next .button {
  flex: none;
}

.case-preview-dates {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 16px 0 0;
}

.case-preview-dates div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}

.case-preview-dates dt {
  color: var(--muted);
  font-size: 13.5px;
}

.case-preview-dates dd {
  font-size: 17px;
  font-weight: 600;
  margin: 2px 0 0;
}

.case-preview-dates dd.is-late {
  color: var(--gate);
}

/* A phone puts the work areas on a row of their own that scrolls sideways,
   so the page itself never does. */
@media (max-width: 700px) {
  .app-shell[data-mode="shell"] .sidebar {
    flex-wrap: wrap;
    gap: 0 16px;
    padding: 8px 16px 0;
  }

  .app-shell[data-mode="shell"] .nav-list {
    -webkit-overflow-scrolling: touch;
    flex: 1 0 100%;
    gap: 18px;
    order: 3;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell[data-mode="shell"] .nav-item {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* A phone gets the list only: tapping a row opens the case. */
@media (max-width: 700px) {
  .case-file {
    display: block;
    min-height: 0;
  }

  .case-list {
    border-right: 0;
  }

  .case-preview {
    display: none;
  }

  .case-search {
    margin: 12px 14px 10px;
    width: calc(100% - 28px);
  }

  .case-filters {
    padding: 0 14px 12px;
  }

  .case-row {
    padding: 12px 14px 12px 10px;
  }

  .case-row.is-selected {
    background: none;
  }
}

/* ---- New complaint ---- */

[data-screen="intake"] .screen-grid.two-one {
  align-items: start;
  gap: 40px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

[data-screen="intake"] .section-heading h2,
#intake-title {
  font: 600 28px/1.2 var(--sans);
  letter-spacing: -0.015em;
}

[data-screen="intake"] aside.surface-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 80px;
}

[data-screen="intake"] aside .section-heading h2 {
  font-size: 18px;
}

[data-screen="intake"] .complaint-box {
  font: 16px/1.6 var(--serif);
}

.intake-redaction-text {
  font: 16px/1.65 var(--serif);
  margin: 0 0 14px;
  white-space: pre-wrap;
}

mark.ai-token,
.intake-redaction-choice mark {
  background: var(--accent-soft);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgb(29 91 69 / 35%);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.92em;
  font-weight: 600;
  padding: 1px 5px;
}

@media (prefers-reduced-motion: no-preference) {
  mark.ai-token {
    animation: token-in 420ms ease-out;
  }
}

@keyframes token-in {
  from { background: #c7e2d6; }
  to { background: var(--accent-soft); }
}

/* ---- Case header ---- */

.case-back {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 4px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-screen="case"] .section-heading.with-actions {
  align-items: flex-start;
}

#case-title {
  font: 600 30px/1.15 var(--sans);
  letter-spacing: -0.02em;
  margin: 2px 0 4px;
}

[data-render="case-ref"] {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  order: 2;
}

.case-identity {
  color: var(--muted);
  margin: 0;
}

.case-identity .tok {
  background: var(--accent-soft);
  border: 0;
  border-radius: 3px;
  color: var(--accent);
  font-weight: 600;
  padding: 1px 5px;
}

.identity-caption {
  display: none;
}

[data-screen="case"] .case-controls > summary {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

/* The stage clock: the one graphic on the page. */
.stage-clock {
  margin: 22px 0 4px;
  max-width: 780px;
}

.stage-clock-line {
  height: 22px;
  position: relative;
}

.stage-clock-line::before {
  background: var(--line-strong);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 10px;
}

.stage-clock-fill {
  background: var(--ink);
  height: 2px;
  left: 0;
  position: absolute;
  top: 10px;
}

.stage-clock-start,
.stage-clock-end {
  background: var(--surface);
  border: 2px solid var(--muted);
  border-radius: 50%;
  height: 12px;
  position: absolute;
  top: 5px;
  width: 12px;
}

.stage-clock-start {
  left: 0;
}

.stage-clock-end {
  border-color: var(--ink);
  right: 0;
}

.stage-clock-today {
  background: var(--ink);
  height: 20px;
  position: absolute;
  top: 1px;
  width: 2px;
}

.stage-clock-labels {
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  gap: 12px;
  justify-content: space-between;
  margin-top: 4px;
}

.stage-clock-status strong {
  color: var(--ink);
}

.stage-clock.is-late .stage-clock-fill,
.stage-clock.is-late .stage-clock-today {
  background: var(--gate);
}

.stage-clock.is-late .stage-clock-end {
  border-color: var(--gate);
}

.stage-clock.is-late .stage-clock-status strong {
  color: var(--gate);
}

@media (prefers-reduced-motion: no-preference) {
  .stage-clock-fill {
    animation: clock-fill 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: left;
  }
}

@keyframes clock-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Case tabs ---- */

.case-workspace-tabs {
  border-bottom: 1px solid var(--line-strong);
  gap: 28px;
  margin-top: 24px;
}

.case-workspace-tabs .tab-button {
  background: none;
  color: var(--muted);
  font-weight: 500;
  min-height: 44px;
  padding: 10px 0;
}

.case-workspace-tabs .tab-button.is-active {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--ink);
}

[data-screen="case"] .tab-panel {
  padding-top: 26px;
}

/* ---- Analysis: the memo and its margin ---- */

.case-briefing.copilot-briefing {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.brief-layout {
  align-items: start;
  display: grid;
  gap: 18px 40px;
  grid-template-areas:
    "flag margin"
    "memo margin";
  grid-template-columns: minmax(0, 1fr) 272px;
}

.brief-flag-slot {
  grid-area: flag;
}

.brief-flag-slot:empty {
  display: none;
}

.brief-memo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-area: memo;
  padding: 44px 52px 34px;
}

.brief-margin {
  font-size: 14px;
  grid-area: margin;
  position: sticky;
  top: 80px;
}

.brief-margin > section {
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.brief-margin > section:last-child {
  border-bottom: 0;
}

.brief-margin h3 {
  font: 600 14px/1.3 var(--sans);
  margin: 0 0 6px;
}

.brief-margin p {
  margin: 0 0 10px;
}

.brief-quiet {
  color: var(--muted);
}

.brief-stale {
  color: var(--gate);
  font-weight: 600;
}

.brief-buttons {
  display: grid;
  gap: 8px;
}

.brief-dates,
.brief-letters ul {
  font-variant-numeric: tabular-nums;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brief-dates li,
.brief-letters li {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 4px 0;
}

.brief-dates .is-late {
  color: var(--gate);
  font-weight: 600;
  white-space: nowrap;
}

.brief-letters small {
  color: var(--muted);
}

.analysis-safeguarding-flag {
  background: var(--over-soft);
  border: 0;
  border-left: 4px solid var(--over);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
}

.analysis-safeguarding-flag strong {
  color: var(--over);
  display: block;
  font-size: 16px;
}

.analysis-safeguarding-flag p {
  margin: 4px 0 0;
}

.case-analysis-panel,
.case-analysis-panel.is-empty {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.analysis-review {
  display: block;
  font: 17px/1.62 var(--serif);
  max-width: 68ch;
}

.analysis-review > section {
  background: none;
  border: 0;
  margin: 0 0 40px;
  padding: 0;
}

.analysis-review h3,
.case-analysis-panel.is-empty h3,
.brief-memo > h3 {
  font: 600 20px/1.3 var(--sans);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.brief-lead {
  font: 19px/1.55 var(--serif);
  margin: 0;
}

.brief-list,
.brief-bullets,
.brief-steps {
  margin: 0;
}

.brief-list {
  list-style: none;
  padding: 0;
}

.brief-item {
  margin-bottom: 20px;
}

.brief-item h4 {
  font: 600 17px/1.45 var(--serif);
  margin: 0 0 4px;
}

.brief-item p,
.brief-steps p {
  margin: 0 0 4px;
}

.brief-why {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.brief-who {
  color: var(--muted);
  font: 13px/1.4 var(--sans);
}

.brief-options {
  font: 15px/1.5 var(--sans);
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
}

.brief-options li {
  color: var(--muted);
  padding: 2px 0 2px 20px;
  position: relative;
}

.brief-options li::before {
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 3px;
  position: absolute;
  top: 10px;
  width: 7px;
}

.brief-recommendation span {
  color: var(--accent);
  font: 600 14px/1 var(--sans);
  margin-right: 6px;
}

.brief-steps {
  padding-left: 1.4em;
}

.brief-steps > li {
  margin-bottom: 16px;
  padding-left: 4px;
}

.brief-steps > li::marker {
  color: var(--accent);
  font: 600 16px var(--sans);
}

.brief-bullets {
  padding-left: 1.2em;
}

.brief-bullets li {
  margin-bottom: 6px;
}

.analysis-limits {
  color: var(--muted);
  font-size: 15.5px;
}

.analysis-supporting-detail {
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  margin: 0 0 32px;
  padding-top: 14px;
}

.analysis-supporting-detail > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}

.analysis-detail-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
}

.analysis-detail-grid h4 {
  font-size: 15px;
  margin: 0 0 6px;
}

.brief-foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 13px/1.5 var(--sans);
  margin: 8px 0 0;
  max-width: 68ch;
  padding-top: 14px;
}

.resource-card {
  color: var(--muted);
  display: block;
  font: 13px/1.5 var(--sans);
}

/* The run: each real step as it happens. */
.analysis-run-status {
  background: none;
  border: 0;
  display: block;
  font-family: var(--sans);
  padding: 0;
}

.analysis-run-status > strong {
  display: block;
  font-size: 20px;
  margin-bottom: 16px;
}

.run-steps {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.run-step {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 16px;
  gap: 12px;
}

.run-step.is-done {
  color: var(--ink);
}

.run-step.is-active {
  color: var(--ink);
  font-weight: 600;
}

.run-mark {
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  flex: none;
  height: 18px;
  position: relative;
  width: 18px;
}

.run-step.is-done .run-mark {
  background: var(--accent);
  border-color: var(--accent);
}

.run-step.is-done .run-mark::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  height: 8px;
  left: 5px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

.run-step.is-active .run-mark {
  border-color: var(--accent);
  border-right-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .run-step.is-active .run-mark {
    animation: run-spin 900ms linear infinite;
  }

  .run-step.is-active span:last-child {
    animation: run-breathe 1.8s ease-in-out infinite;
  }

  .case-analysis-panel.is-new .analysis-review > section {
    animation: brief-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .case-analysis-panel.is-new .analysis-review > section:nth-child(2) { animation-delay: 90ms; }
  .case-analysis-panel.is-new .analysis-review > section:nth-child(3) { animation-delay: 180ms; }
  .case-analysis-panel.is-new .analysis-review > section:nth-child(4) { animation-delay: 270ms; }
  .case-analysis-panel.is-new .analysis-review > section:nth-child(n + 5) { animation-delay: 360ms; }
}

@keyframes run-spin {
  to { transform: rotate(360deg); }
}

@keyframes run-breathe {
  50% { opacity: 0.55; }
}

@keyframes brief-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.analysis-run-status.is-failed {
  border-left: 4px solid var(--gate);
  margin-bottom: 28px;
  padding-left: 16px;
}

/* ---- Complaint ---- */

.complaint-source-section,
#case-imports.workspace-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 40px;
}

#case-imports.workspace-section {
  margin-top: 18px;
}

.complaint-source-text {
  background: none;
  border: 0;
  font: 17px/1.65 var(--serif);
  max-width: 68ch;
  padding: 0;
}

.case-items-count {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 12px;
}

.case-items {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-item {
  border-bottom: 1px solid var(--line);
}

.case-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 14px 0;
}

.case-item summary::-webkit-details-marker {
  display: none;
}

.case-item summary::before {
  color: var(--muted);
  content: "▸";
  flex: none;
  transition: transform 0.15s;
}

.case-item details[open] summary::before {
  transform: rotate(90deg);
}

.case-item-head {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.case-item-head strong {
  overflow-wrap: anywhere;
}

.case-item-head small {
  color: var(--muted);
}

.case-item .status-pill {
  flex: none;
  white-space: nowrap;
}

.case-item details > :not(summary) {
  margin-left: 24px;
}

.case-item .complaint-source-text {
  white-space: pre-wrap;
}

.case-item-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 16px;
}

.case-item.is-out .case-item-head strong,
.case-item.is-out .complaint-source-text {
  color: var(--muted);
}

.case-item-out {
  background: var(--paper-warm);
  border-radius: var(--radius);
  font-size: 14px;
  padding: 8px 12px;
}

/* ---- Plan ---- */

.stage-control {
  background: var(--surface);
  border-color: var(--line);
}

.stage-control.is-confirmed {
  background: none;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 4px 14px;
}

.stage-control .eyebrow {
  display: none;
}

[data-screen="case"] .workspace-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 18px;
  padding: 28px 32px;
}

[data-screen="case"] .workspace-section .section-heading h3,
.response-outcomes h3 {
  font: 600 20px/1.3 var(--sans);
  letter-spacing: -0.01em;
}

.plan-action {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0;
}

.plan-action:last-child {
  border-bottom: 0;
}

.plan-action h4 {
  font: 600 17px/1.45 var(--serif);
  margin: 0;
}

.plan-action-rationale {
  color: var(--muted);
  font: 15.5px/1.55 var(--serif);
  max-width: 68ch;
}

.plan-action-meta {
  display: flex;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  gap: 4px 28px;
}

.plan-action-meta dt {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.plan-action.is-overdue {
  border-left: 0;
}

.plan-action.is-overdue .plan-action-meta div:nth-child(2) dd {
  color: var(--gate);
  font-weight: 600;
}

.plan-required {
  color: var(--accent);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* The Plan as the procedure (owner's choice, 27 Sep): each step a stop on a
   line with its tasks under it, and a rail for what is left to arrange. */

.plan-overview {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin: 18px 0 28px;
}

.plan-steps {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px 8px;
}

.plan-steps h4 {
  font: 600 16px/1.3 var(--sans);
  margin: 0 0 16px;
}

.plan-steps-empty {
  color: var(--muted);
}

.plan-tracks {
  display: grid;
  gap: 24px;
}

.plan-tracks.has-two {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.plan-track h5 {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 12px;
}

.plan-line {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-procedure-name {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 8px;
}

.plan-stop {
  border-left: 2px solid var(--line);
  margin-left: 8px;
  padding: 0 0 18px 20px;
  position: relative;
}

.plan-stop:last-child {
  border-left-color: transparent;
}

.plan-stop::before {
  background: var(--surface);
  border: 2px solid #9aa59f;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: -9px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.plan-stop.is-done::before {
  background: var(--accent);
  border-color: var(--accent);
}

.plan-stop.is-late::before {
  background: var(--gate);
  border-color: var(--gate);
}

.plan-stop.is-current::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.plan-stop-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.plan-stop-head strong {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.plan-stop.is-done .plan-stop-head strong {
  color: var(--muted);
}

.plan-stop-date {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-stop-date.is-late {
  color: var(--gate);
  font-weight: 600;
}

.plan-stop-date.is-quiet {
  color: var(--muted);
}

.plan-stop-owner {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin-top: 4px;
}

.plan-avatar {
  align-items: center;
  background: var(--accent-soft);
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.plan-avatar.is-empty {
  background: var(--surface);
  border: 1.5px dashed var(--gate);
  color: var(--gate);
}

.plan-stop-tasks {
  background: #f6f8f7;
  border-radius: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 6px 10px;
}

.plan-task {
  align-items: baseline;
  display: flex;
  font-size: 13.5px;
  gap: 10px;
  justify-content: space-between;
  padding: 4px 0;
}

.plan-task.is-done .plan-task-title {
  color: var(--muted);
}

.plan-task-side {
  display: flex;
  flex: none;
  gap: 8px;
  white-space: nowrap;
}

.plan-task-from {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.plan-task-from.is-yours {
  color: var(--muted);
}

.plan-task-who,
.plan-task-done {
  color: var(--muted);
  font-size: 12px;
}

.plan-rail {
  display: grid;
  gap: 14px;
}

.plan-rail-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
}

.plan-rail-card.is-late {
  background: var(--gate-soft);
  border-color: #ecd9ae;
}

.plan-rail-card h5 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}

.plan-rail-card p,
.plan-rail-note {
  font-size: 13.5px;
  margin: 0 0 10px;
}

.plan-rail-card p:last-child {
  margin-bottom: 0;
}

.plan-letter {
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13.5px;
  gap: 2px;
  padding: 10px 0;
}

.plan-letter:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.plan-letter:last-child {
  padding-bottom: 0;
}

.plan-letter span {
  color: var(--muted);
}

.plan-letter .button {
  justify-self: start;
  margin-top: 6px;
}

/* The head's approach: their own words above the steps, set in the serif
   like a document, on the warm paper so it reads as theirs, not Chancery's. */

.plan-approach {
  background: var(--paper-warm);
  border: 1px solid #e4dccb;
  border-radius: 6px;
  margin-top: 18px;
  padding: 16px 20px 18px;
}

.plan-approach[hidden] {
  display: none;
}

.plan-approach-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.plan-approach-head h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.plan-approach-placeholder {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 12px;
  max-width: 68ch;
}

.plan-approach-text {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 70ch;
}

.plan-approach-text p {
  margin: 0 0 8px;
}

.plan-approach-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
}

.plan-approach-input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--ink);
  display: block;
  font: 15px/1.55 var(--serif);
  min-height: 132px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.plan-approach-input::placeholder {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
}

.plan-approach-input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.plan-approach-foot {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 8px 0 12px;
}

.plan-approach-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.plan-approach-count {
  color: var(--muted);
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.plan-approach .button-row {
  margin: 0;
}

.plan-approach-remove {
  margin-left: auto;
}

.plan-approach-history {
  border-top: 1px solid #e4dccb;
  margin-top: 14px;
  padding-top: 10px;
}

.plan-approach-history > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
}

.plan-approach-history > summary small {
  color: var(--muted);
  font-size: 12.5px;
  margin-left: 4px;
}

.plan-approach-history ol {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.plan-approach-history li small {
  color: var(--muted);
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}

.plan-approach-history .plan-approach-text {
  color: var(--muted);
  font-size: 14.5px;
}

@media (max-width: 700px) {
  .plan-approach {
    padding: 14px 16px 16px;
  }

  .plan-approach-foot {
    flex-direction: column;
    gap: 4px;
  }
}

/* Editing within the steps: a slim bar for the version, a menu on each task,
   drag to reorder, and "Add a task here" under each step. */

.plan-bar {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  margin-top: 18px;
  padding: 10px 14px;
}

.plan-bar.is-draft {
  background: var(--gate-soft);
  border-color: #ecd9ae;
}

.plan-bar-status {
  display: grid;
  font-size: 14px;
  gap: 2px;
}

.plan-bar-status strong {
  font-weight: 600;
}

.plan-bar .plan-draft-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.plan-bar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-bar .plan-versions {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.plan-bar .plan-versions > summary {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 500;
  gap: 6px;
  list-style: none;
  padding: 5px 12px;
}

.plan-bar .plan-versions > summary::-webkit-details-marker {
  display: none;
}

.plan-bar .plan-versions > summary small {
  color: var(--muted);
  font-size: 12.5px;
}

.plan-bar:has(.plan-versions[open]) {
  align-items: start;
}

.plan-bar .plan-versions[open] {
  flex-basis: 100%;
}

.plan-bar .plan-version-list {
  font-size: 13.5px;
  margin: 12px 0 4px;
}

.plan-bar .plan-version-list li {
  display: grid;
  gap: 2px;
}

.plan-bar .plan-version-list small {
  color: var(--muted);
}

.plan-bar-actions:has(.plan-versions[open]) {
  flex-basis: 100%;
}

.plan-task {
  border-radius: 4px;
  display: block;
  margin: 0 -6px;
  padding: 4px 6px;
}

.plan-task[draggable="true"] {
  cursor: grab;
}

.plan-task.is-dragging {
  opacity: 0.45;
}

.plan-task.is-drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.plan-stop.is-drop-target > .plan-stop-tasks {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* An empty list is only a place to drop a task; it shows while dragging. */
.plan-stop-tasks.is-empty {
  background: none;
  margin: 0;
  min-height: 8px;
  padding: 0;
}

.plan-stop.is-drop-target > .plan-stop-tasks.is-empty {
  background: #f6f8f7;
  min-height: 28px;
}

.plan-task-row {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.plan-task-title {
  flex: 1;
}

.plan-task-date,
.plan-task-status {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.plan-task-date.is-late {
  color: var(--gate);
  font-weight: 600;
}

.plan-stop-status {
  border-left: 1px solid var(--line-strong);
  padding-left: 8px;
}

.plan-steps .plan-action-notes {
  color: var(--muted);
  font-size: 12.5px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.plan-task-next {
  margin: 6px 0 2px;
}

.plan-add-task {
  margin-top: 6px;
}

.plan-steps .button.tertiary.small.plan-add-task {
  color: var(--accent);
  font-size: 13px;
  padding: 2px 0;
}

.plan-menu {
  flex: none;
  position: relative;
}

.plan-menu > summary {
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
  list-style: none;
  padding: 5px 6px;
}

.plan-menu > summary::-webkit-details-marker {
  display: none;
}

.plan-menu > summary:hover,
.plan-menu[open] > summary {
  background: var(--accent-soft);
  color: var(--accent);
}

.plan-menu-list {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgb(23 32 28 / 14%);
  display: grid;
  min-width: 230px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}

.plan-menu-list button {
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  font: 400 14px/1.35 var(--sans);
  padding: 7px 10px;
  text-align: left;
}

.plan-menu-list button:hover:not(:disabled),
.plan-menu-list button:focus-visible {
  background: var(--accent-soft);
}

.plan-menu-list button:disabled {
  color: var(--muted);
  cursor: default;
}

.plan-menu-off {
  display: grid;
}

.plan-menu-off small,
.plan-menu-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  margin: -4px 0 4px;
  padding: 0 10px;
}

.plan-menu-group {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  margin: 4px 0;
  padding: 4px 0;
}

.plan-menu-group > span {
  color: var(--muted);
  font-size: 12.5px;
  padding: 4px 10px 2px;
}

.plan-withdrawn-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.plan-withdrawn-list li {
  display: grid;
  font-size: 14px;
}

.plan-withdrawn-list span {
  color: var(--muted);
  font-size: 13px;
}

/* ---- Assign people: open tasks by person, over the whole Plan tab ---- */

#case-panel-plan.is-board-open > :not(.plan-board) {
  display: none;
}

.plan-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px 26px;
}

.plan-board-head {
  align-items: center;
  display: grid;
  gap: 16px 24px;
  grid-template-columns: 1fr auto auto;
  margin-bottom: 20px;
}

.plan-board-head h4 {
  font: 600 22px/1.2 var(--serif);
  margin: 0 0 4px;
}

.plan-board-head p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 64ch;
}

.plan-board-count {
  background: #f6f8f7;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px;
  padding: 8px 14px;
  white-space: nowrap;
}

.plan-board-count strong {
  font: 400 24px/1 var(--serif);
  margin-right: 6px;
}

.plan-board-count.is-late {
  background: var(--gate-soft);
  border-color: #ecd9ae;
}

.plan-board-count.is-late strong {
  color: var(--gate);
}

.plan-board-cols {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.plan-board-col {
  background: #e9ecea;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 12px;
  transition: box-shadow 120ms ease;
}

.plan-board-col.is-open {
  background: var(--gate-soft);
  outline: 1.5px dashed #d9bf85;
  outline-offset: -1.5px;
}

.plan-board-col.is-done {
  background: #f3f5f4;
}

.plan-board-col.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.plan-board-col h5 {
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  margin: 2px 2px 4px;
}

.plan-board-col h5 small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-left: auto;
}

.plan-board-col .plan-avatar {
  background: var(--surface);
}

.plan-board-card {
  background: var(--surface);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(23 32 28 / 10%);
  display: grid;
  font-size: 14px;
  gap: 8px;
  padding: 10px 12px;
}

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

.plan-board-card.is-late {
  box-shadow: inset 3px 0 var(--gate), 0 1px 2px rgb(23 32 28 / 10%);
}

.plan-board-card.is-dragging {
  opacity: 0.5;
}

.plan-board-card > strong {
  font-weight: 500;
  line-height: 1.35;
}

.plan-board-col.is-done .plan-board-card > strong {
  color: var(--muted);
}

.plan-board-meta {
  color: var(--muted);
  display: flex;
  font-size: 12.5px;
  gap: 10px;
  justify-content: space-between;
}

.plan-board-meta .is-late {
  color: var(--gate);
  font-weight: 600;
}

.plan-board-from.is-analysis {
  color: var(--accent);
  font-weight: 600;
}

.plan-board-refusal {
  background: var(--gate-soft);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  padding: 8px 10px;
}

.plan-board-menu {
  justify-self: start;
}

.plan-board-menu > summary {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0;
  padding: 5px 9px;
}

.plan-board-menu .plan-menu-list {
  left: 0;
  right: auto;
}

.plan-board-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 2px;
}

.plan-board-col > .button {
  justify-self: start;
}

.plan-board-add {
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px;
}

.plan-board-add p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 700px) {
  .plan-board {
    border-radius: 6px;
    padding: 16px 14px 18px;
  }

  .plan-board-head {
    grid-template-columns: 1fr auto;
  }

  .plan-board-head > div {
    grid-column: 1 / -1;
  }

  .plan-board-cols {
    grid-template-columns: 1fr;
  }

  /* No dragging on a phone: Assign to… is the way. */
  .plan-board-card[draggable="true"] {
    cursor: default;
  }
}

@media (max-width: 900px) {
  .plan-overview,
  .plan-tracks.has-two {
    grid-template-columns: 1fr;
  }

  .plan-steps {
    padding: 18px 16px 4px;
  }
}

@media (max-width: 700px) {
  .plan-task-row {
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  .plan-task-title {
    flex-basis: calc(100% - 40px);
  }

  .plan-task-row .plan-menu {
    margin-left: auto;
    order: 2;
  }

  .plan-task-side {
    order: 3;
    white-space: normal;
    flex-wrap: wrap;
  }

  .plan-bar-actions {
    width: 100%;
  }
}

.response-outcome {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

/* Letters: one row per letter on the Plan's paper. The green edge marks the
   one waiting on the head to send; nothing else is coloured. */

.document-workspace-count {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 4px;
}

.document-workspace-list {
  gap: 0;
}

.document-work-item,
.document-work-item.sent,
.document-work-item.rejected {
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding-left: 14px;
}

.document-work-item.approved {
  border-left-color: var(--accent);
}

.document-work-item > header {
  padding: 18px 0 0;
}

.document-work-item h4 {
  font: 600 17px/1.3 var(--sans);
  margin: 0;
}

.document-work-item header p {
  color: var(--muted);
  margin: 4px 0 0;
}

.document-work-body {
  padding: 10px 0 18px;
}

.document-work-body p {
  line-height: 1.5;
}

.document-work-body blockquote {
  background: none;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font: 400 15px/1.55 var(--serif);
  margin: 12px 0 0;
  padding: 0 0 0 14px;
}

.document-history {
  border-top: 0;
}

.document-history summary {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  padding: 0 0 16px;
}

.document-history ol {
  padding: 0 0 12px;
}

.historical-exports {
  margin-top: 28px;
  padding-top: 22px;
}

.historical-exports h3 {
  font: 600 17px/1.3 var(--sans);
}

.export-history-list li {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
}

/* ---- Sign in: a white card on the green field, copy beside the form ---- */

.app-shell[data-mode="signin"] .signin-view,
.app-shell[data-mode="password"] .password-view {
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgb(255 255 255 / 7%) 63px 64px),
    var(--accent);
  color: var(--ink);
  min-height: 100vh;
  padding: 48px 24px;
  place-items: center;
}

.signin-panel {
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 880px;
  overflow: hidden;
  width: 100%;
}

.signin-brand {
  background: var(--paper-warm);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none;
  padding: 40px 44px 48px;
  text-align: left;
}

.signin-mark { display: none; }

.signin-wordmark {
  color: var(--accent);
  font: 600 18px/1 var(--sans);
  letter-spacing: 0.01em;
  margin: 0;
}

.signin-promise {
  font: 400 32px/1.2 var(--serif);
  margin: 72px 0 16px;
  max-width: 14ch;
}

.signin-copy {
  color: var(--muted);
  font: 400 16px/1.6 var(--serif);
  margin: 0;
  max-width: 40ch;
}

.signin-form {
  align-content: center;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  max-width: none;
  padding: 40px 44px 48px;
}

.signin-form h1 {
  font: 600 26px/1.2 var(--sans);
  margin: 0 0 12px;
}

.signin-form .field-label {
  color: var(--ink);
  font: 500 14px/1.3 var(--sans);
  margin: 10px 0 0;
}

.signin-form input {
  background: #fff;
  border: 1px solid #9aa59f;
  border-radius: var(--radius);
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  min-height: 46px;
  padding: 10px 12px;
}

.signin-form input:hover { border-color: var(--muted); }

.signin-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.signin-form .button.primary {
  font-size: 16px;
  margin-top: 18px;
  min-height: 46px;
}

/* ---- Change password: the sign-in card, with the form's own copy ---- */

.password-view {
  display: none;
}

.app-shell[data-mode="password"] {
  display: block;
}

.app-shell[data-mode="password"] .sidebar,
.app-shell[data-mode="password"] .shell-view,
.app-shell[data-mode="password"] .signin-view {
  display: none;
}

.app-shell[data-mode="password"] .password-view {
  display: grid;
}

.password-leave {
  font-size: 15px;
  justify-self: start;
  margin-top: 8px;
}

#password-status[data-tone="error"] {
  border-left: 3px solid var(--gate);
  color: var(--ink);
  padding: 2px 0 2px 12px;
}

.signin-help {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 18px 0 0;
}

@media (max-width: 820px) {
  .app-shell[data-mode="signin"] .signin-view,
  .app-shell[data-mode="password"] .password-view { padding: 24px 16px; place-items: start stretch; }
  .signin-panel { grid-template-columns: minmax(0, 1fr); }
  .signin-brand { padding: 28px 20px 28px; }
  .signin-promise { font-size: 26px; margin: 28px 0 12px; max-width: none; }
  .signin-copy { font-size: 16px; max-width: none; }
  .signin-form { align-content: start; padding: 28px 20px 32px; }
}

/* ---- Narrow screens: the answer first ---- */

@media (max-width: 900px) {
  .app-shell[data-mode="shell"] .sidebar {
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 16px;
  }

  .app-shell[data-mode="shell"] .capacity-switch .capacity-role {
    display: none;
  }

  .app-shell[data-mode="shell"] .shell-view {
    padding: 18px 16px 48px;
  }

  .brief-layout {
    display: flex;
    flex-direction: column;
  }

  .brief-margin {
    display: contents;
  }

  .brief-flag-slot { order: 1; }
  .brief-next { order: 2; }
  .brief-memo { order: 3; padding: 26px 20px 22px; }
  .brief-margin > section:not(.brief-next) { order: 4; }

  .brief-margin > section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0;
    padding: 16px;
  }

  .analysis-review {
    font-size: 16.5px;
  }

  .brief-lead {
    font-size: 18px;
  }

  .analysis-detail-grid {
    grid-template-columns: 1fr;
  }

  .stage-clock-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .stage-clock-status {
    grid-column: 1 / -1;
    order: -1;
  }

  .stage-clock-due {
    text-align: right;
  }

  [data-screen="intake"] .screen-grid.two-one {
    grid-template-columns: 1fr;
  }

  [data-screen="intake"] aside.surface-section {
    position: static;
  }

  .complaint-source-section,
  #case-imports.workspace-section,
  [data-screen="case"] .workspace-section {
    padding: 20px 18px;
  }

  .case-item summary {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .case-item-head {
    flex-basis: calc(100% - 28px);
  }

  .case-item .status-pill {
    margin-left: 24px;
  }

  .case-item details > :not(summary) {
    margin-left: 0;
  }

  .case-workspace-tabs {
    gap: 20px;
  }

}

/* ---- Overrides of older list, header and form rules ---- */

.analysis-review ul.brief-list {
  display: block;
  margin: 0;
  padding: 0;
}

.analysis-review ul.brief-options {
  display: block;
  margin: 6px 0 10px;
  padding: 0;
}

.analysis-review ul.brief-options li {
  font-size: 15px;
}

.analysis-review ol.brief-steps,
.analysis-review ul.brief-bullets {
  display: block;
  margin: 0;
}

.analysis-review li strong {
  display: inline;
  font-weight: 600;
}

.analysis-review > section.analysis-supporting-detail,
.analysis-review > details {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
}

.case-identity {
  font-size: 15px;
  font-weight: 400;
}

.complaint-box,
[data-screen="intake"] select,
[data-screen="intake"] input {
  background: var(--surface);
}

[data-screen="case"] .tab-panel > .workspace-section,
[data-screen="case"] .tab-panel > section.workspace-section:first-child {
  border: 1px solid var(--line);
  margin: 0 0 18px;
  padding: 28px 32px;
}

[data-screen="inbox"] .section-heading.with-actions > div:first-child {
  display: none;
}

[data-screen="inbox"] .filter-row {
  width: 100%;
}

@media (max-width: 900px) {
  .case-workspace-tabs {
    display: flex;
  }

  .case-workspace-tabs .tab-button,
  .case-workspace-tabs .tab-button.is-active {
    background: none;
    border-bottom: 2px solid transparent;
    border-left: 0;
  }

  .case-workspace-tabs .tab-button.is-active {
    border-bottom-color: var(--accent);
  }

  [data-screen="case"] .section-heading.with-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  [data-screen="case"] .tab-panel > .workspace-section,
  [data-screen="case"] .tab-panel > section.workspace-section:first-child {
    padding: 20px 18px;
  }

  [data-screen="inbox"] .filter-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---- The analysis as boxed sections (owner feedback, 26 Sep): compact sans
   text, one box per part, each with its own colour, so the eye finds the part
   it needs. ---- */

:root {
  --issue: #2d5f86;
  --issue-wash: #eef4f9;
  --risk: #8a5a00;
  --risk-wash: #fbf4e6;
  --decide: #1d5b45;
  --decide-wash: #e8f2ed;
  --quiet-wash: #f3f5f4;
}

.brief-memo {
  background: none;
  border: 0;
  padding: 0;
}

.analysis-review {
  display: grid;
  font: 15.5px/1.6 var(--sans);
  gap: 14px;
  max-width: none;
}

.analysis-review > section.brief-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  margin: 0;
  padding: 20px 26px 18px;
}

.analysis-review h3 {
  align-items: center;
  display: flex;
  font: 600 17px/1.3 var(--sans);
  gap: 8px;
  letter-spacing: 0;
  margin: 0 0 12px;
}

.brief-box.is-about {
  background: var(--quiet-wash);
  border-left-color: var(--ink);
}

.brief-box.is-about .brief-lead {
  font: 17px/1.6 var(--serif);
  max-width: 72ch;
}

.brief-box.is-issues { border-left-color: var(--issue); }
.brief-box.is-issues h3 { color: var(--issue); }
.brief-box.is-risks { border-left-color: var(--risk); }
.brief-box.is-risks h3 { color: var(--risk); }
.brief-box.is-decisions,
.brief-box.is-actions { border-left-color: var(--decide); }
.brief-box.is-decisions h3,
.brief-box.is-actions h3 { color: var(--decide); }
.brief-box.is-unknowns { border-left-color: var(--muted); }
.brief-box.is-limits {
  background: none;
  border-left-color: var(--line);
  color: var(--muted);
}

.brief-box .brief-item {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 14px 0;
}

.brief-box .brief-item:first-child {
  border-top: 0;
  padding-top: 2px;
}

.brief-box .brief-item:last-child {
  padding-bottom: 2px;
}

.brief-box .brief-item h4 {
  font: 600 15.5px/1.45 var(--sans);
  margin: 0 0 4px;
}

.brief-box .brief-item p {
  margin: 0 0 6px;
  max-width: 78ch;
}

.brief-callout {
  background: var(--issue-wash);
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 8px 0 4px;
  padding: 8px 12px;
}

.brief-callout span {
  color: var(--issue);
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 1px;
}

.brief-callout.is-recommendation {
  background: var(--decide-wash);
}

.brief-callout.is-recommendation span {
  color: var(--decide);
}

.brief-box.is-risks .brief-who {
  color: var(--risk);
  font-weight: 500;
}

.analysis-review ul.brief-options {
  margin: 4px 0 6px;
}

.analysis-review ul.brief-options li {
  font-size: 14.5px;
}

.analysis-review ol.brief-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.analysis-review ol.brief-steps > li {
  counter-increment: step;
  margin: 0;
  padding: 10px 0 10px 40px;
  position: relative;
}

.analysis-review ol.brief-steps > li + li {
  border-top: 1px solid var(--line);
}

.analysis-review ol.brief-steps > li::before {
  background: var(--decide);
  border-radius: 50%;
  color: #fff;
  content: counter(step);
  font: 600 13px/26px var(--sans);
  height: 26px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 26px;
}

.analysis-review ol.brief-steps p {
  margin: 4px 0;
}

.brief-sources {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.resource-card {
  font-size: 13px;
}

.resource-card span {
  color: var(--muted);
  font-weight: 600;
  margin-right: 2px;
}

.resource-card a {
  color: var(--accent);
  font-weight: 500;
}

.brief-box.is-limits .analysis-supporting-detail {
  border-top: 0;
  margin: 0 0 12px;
  padding: 0;
}

.brief-box.is-limits h3 {
  color: var(--muted);
  font-size: 15px;
}

.case-analysis-panel.is-empty,
.brief-memo > .case-analysis-panel > .analysis-run-status {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
}

.brief-foot {
  border-top: 0;
  margin-top: 12px;
  padding-top: 0;
}

.analysis-safeguarding-flag {
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: no-preference) {
  .case-analysis-panel.is-new .analysis-review > section.brief-box {
    animation: brief-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@media (max-width: 900px) {
  .brief-memo {
    padding: 0;
  }

  .analysis-review > section.brief-box {
    padding: 16px 16px 14px;
  }

  .analysis-review {
    font-size: 15px;
  }
}

/* ---- The analysis as a brief (owner's choice, 26 Sep): a green band with the
   briefing, a rated issues table, what to do now, decisions, and risks with
   what we don't know. ---- */

.brief-frame {
  display: grid;
  gap: 16px;
}

.brief-next {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 16px;
}

.brief-next p {
  margin: 0;
}

.brief-toolbar {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px 16px;
  justify-content: space-between;
}

.brief-toolbar p {
  margin: 0;
}

.brief-toolbar .brief-buttons {
  display: flex;
  gap: 8px;
}

.analysis-brief {
  display: grid;
  gap: 18px;
}

/* The summary: dark text on white for reading at length, with the green kept
   as a bar across the top. The facts panel holds engine-supplied facts only. */
.brief-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  border-top: 6px solid var(--accent);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  overflow: hidden;
}

.brief-band-text {
  padding: 24px 32px 28px;
}

.brief-band h3 {
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font: 600 20px/1.3 var(--sans);
  margin: 0 0 16px;
  padding-bottom: 12px;
}

.brief-band-text p {
  font: 17px/1.65 var(--serif);
  margin: 0 0 14px;
  max-width: 70ch;
}

.brief-band-text p:last-child {
  margin-bottom: 0;
}

.brief-band-text .brief-band-meta {
  color: var(--muted);
  font: 13px/1.4 var(--sans);
  margin: -8px 0 16px;
}

.brief-band-facts {
  align-content: start;
  background: var(--accent-soft);
  border-left: 1px solid var(--line);
  display: grid;
  font-size: 14px;
  gap: 14px;
  margin: 0;
  padding: 24px 20px;
}

.brief-band-facts > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
}

.brief-band-facts dt {
  color: var(--accent);
  font: 600 13px/1.3 var(--sans);
  margin-bottom: 6px;
}

.brief-band-facts dd {
  font: 600 15px/1.4 var(--sans);
  margin: 0;
}

.brief-band-facts ul {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brief-band-facts li {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 6px 0;
}

.brief-band-facts li + li {
  border-top: 1px solid var(--line);
}

.brief-band-facts li strong {
  white-space: nowrap;
}

/* A missed date is the one fact here that needs doing now. */
.brief-band-facts li.is-overdue {
  background: var(--over-soft);
  border-left: 3px solid var(--over);
  color: var(--over);
  margin: 0 -14px;
  padding: 6px 11px;
}

.overdue-pill {
  background: var(--over);
  border-radius: 99px;
  color: #fff;
  font: 600 11.5px/1.4 var(--sans);
  margin-left: 4px;
  padding: 1px 8px;
}

.brief-band-facts .band-processes li {
  display: block;
}

.band-process-status {
  color: var(--issue);
  display: block;
  font: 600 12px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.band-processes strong {
  display: block;
  margin-top: 2px;
}

.band-process-meta {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.band-processes details summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  margin-top: 4px;
}

.band-processes details p {
  font-size: 13.5px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.brief-section h3 {
  font: 600 18px/1.3 var(--sans);
  margin: 6px 0 12px;
}

.brief-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
}

.brief-card h3 {
  margin-top: 0;
}

.issues-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.issues-table {
  border-collapse: collapse;
  font-size: 14.5px;
  width: 100%;
}

.issues-table thead th {
  background: #f6f8f7;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  text-align: left;
}

.issues-table tbody + tbody {
  border-top: 1px solid var(--line);
}

.issues-table tbody th,
.issues-table tbody td {
  padding: 14px 16px 6px;
  text-align: left;
  vertical-align: top;
}

.issues-table tbody th {
  font-weight: 600;
  width: 28%;
}

.issues-table tbody td:nth-child(3) {
  white-space: nowrap;
  width: 1%;
}

.issues-table tbody td:nth-child(4) {
  width: 22%;
}

.issues-table .issue-detail td {
  padding: 0 16px 12px;
}

.issues-table details > summary,
.todo-list details > summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
}

.issue-reasoning {
  max-width: 80ch;
  padding: 8px 0 4px;
}

.issue-reasoning p {
  margin: 0 0 8px;
}

.view-chip {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font: 600 12.5px/1 var(--sans);
  gap: 6px;
  padding: 5px 10px;
}

.view-chip::before {
  background: currentcolor;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.view-chip.is-red { background: var(--over-soft); color: var(--over); }
.view-chip.is-amber { background: var(--risk-wash); color: var(--risk); }
.view-chip.is-green { background: var(--decide-wash); color: var(--decide); }
.view-chip.is-blue { background: var(--issue-wash); color: var(--issue); }

.brief-pair {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.brief-pair:empty {
  display: none;
}

.todo-list {
  counter-reset: todo;
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-list > li {
  counter-increment: todo;
  display: grid;
  gap: 2px;
  padding: 12px 0 12px 40px;
  position: relative;
}

.todo-list > li + li {
  border-top: 1px solid var(--line);
}

.todo-list > li:first-child {
  padding-top: 2px;
}

.todo-list > li::before {
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  content: counter(todo);
  font: 600 13px/26px var(--sans);
  height: 26px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 12px;
  width: 26px;
}

.todo-list > li:first-child::before {
  top: 1px;
}

.todo-meta {
  color: var(--muted);
  font-size: 13.5px;
}

.todo-list details p {
  font-size: 14px;
  margin: 6px 0;
}

.decision + .decision {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.decision h4 {
  font: 600 15.5px/1.4 var(--sans);
  margin: 0 0 6px;
}

.decision-options {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 6px;
  padding-left: 18px;
}

/* Risks sit straight under the summary with an amber edge and a count, so
   what the analysis caught is the first thing the head sees after it. */
.risks-spotted {
  background: var(--risk-wash);
  border-left: 4px solid var(--risk);
}

.risks-spotted h3 {
  align-items: center;
  color: var(--risk);
  display: flex;
  gap: 10px;
}

.risks-count {
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--risk);
  border-radius: 99px;
  font: 600 12.5px/1.4 var(--sans);
  padding: 1px 10px;
}

.risk-items,
.unknown-items {
  font-size: 14.5px;
  margin: 0;
}

.risk-items {
  list-style: none;
  padding: 0;
}

.risk-items {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.risk-items li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
}

.risk-items strong,
.risk-items .brief-who {
  display: block;
}

.risk-items p {
  margin: 4px 0 0;
}

/* Open questions: tiles with a question mark, counted like the risks. */
.unknowns-card h3 {
  align-items: center;
  display: flex;
  gap: 10px;
}

.unknowns-count {
  white-space: nowrap;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--muted);
  font: 600 12.5px/1.4 var(--sans);
  padding: 1px 10px;
}

.unknown-items {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
}

.unknown-items li {
  align-items: flex-start;
  background: #f6f8f7;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  gap: 10px;
  line-height: 1.45;
  padding: 10px 12px;
}

.unknown-mark {
  background: var(--surface);
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  color: var(--muted);
  flex: none;
  font: 700 12px/19px var(--sans);
  height: 20px;
  text-align: center;
  width: 20px;
}

/* Useful resources: chosen by the app, not the model, from the case's issue
   types and the school's resources. No warning colour: nothing here is one. */
.useful-group {
  color: var(--muted);
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.03em;
  margin: 4px 0 10px;
  text-transform: uppercase;
}

.useful-resources + .useful-group {
  margin-top: 20px;
}

.useful-resources {
  display: grid;
  font-size: 14.5px;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.useful-resources li {
  border: 1px solid var(--line);
  border-radius: 4px;
  border-top: 3px solid var(--accent-soft);
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}

.useful-resources strong {
  display: block;
  font-size: 15px;
}

.useful-resources a {
  color: var(--accent);
  text-decoration: none;
}

.useful-resources a:hover,
.useful-resources a:focus-visible {
  text-decoration: underline;
}

.useful-out {
  font-size: 12px;
  margin-left: 4px;
}

.useful-resources p {
  margin: 4px 0 0;
}

.useful-resources .useful-contact {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.useful-resources .useful-reason {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  margin-top: auto;
  padding-top: 8px;
}

.useful-resources .useful-reason:first-child,
.useful-resources p + .useful-reason {
  margin-top: 10px;
}

.brief-quiet-section {
  color: var(--muted);
  font-size: 14px;
}

.brief-quiet-section .analysis-supporting-detail {
  background: var(--surface);
  margin: 0;
  padding: 0;
}

.brief-quiet-section h3 {
  font-size: 15px;
}

@media (max-width: 900px) {
  .brief-band,
  .brief-pair,
  .unknown-items {
    grid-template-columns: 1fr;
  }

  .brief-band-text {
    padding: 20px;
  }

  .brief-band-text p {
    font-size: 16px;
  }

  .brief-band-facts {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 18px 20px;
  }

  .brief-next {
    align-items: flex-start;
    flex-direction: column;
  }

  .issues-table thead {
    display: none;
  }

  .issues-table tbody tr:first-child {
    display: grid;
    gap: 6px;
    padding: 14px 16px 4px;
  }

  .issues-table tbody tr:first-child > * {
    padding: 0;
    width: auto;
  }
}

.case-briefing.copilot-briefing {
  display: block;
}

.brief-frame {
  grid-template-columns: minmax(0, 1fr);
}

.brief-frame > * {
  grid-area: auto;
  order: 0;
  position: static;
}

@media (max-width: 900px) {
  .brief-frame > * {
    order: 0;
  }
}

/* A procedure step can carry a note from the analysis as a second paragraph. */
.plan-action-rationale { white-space: pre-line; }

/* A letter previewed as the recipient will read it: plain paper, no stripes. */
.rendered-document-view.is-letter {
  background: #fff;
  border: 1px solid var(--rule, #d3d9d5);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(23 32 28 / 8%);
  font-size: 15px;
  line-height: 1.55;
  max-width: 68ch;
  padding: 32px 36px;
  white-space: normal;
}
.rendered-document-view.is-letter::before { display: none; }
.rendered-document-view.is-letter p { margin: 0 0 10px; }
.rendered-document-view.is-letter h4 { font-size: 15px; font-weight: 600; margin: 16px 0 4px; }
.rendered-document-view.is-letter ul,
.rendered-document-view.is-letter ol { margin: 0 0 10px 20px; padding: 0; }
@media (max-width: 640px) {
  .rendered-document-view.is-letter { padding: 20px 16px; }
}

.signin-form .async-status:empty { display: none; }

/* ---- Windows: the letter, decisions and other dialogs over the page ---- */

.modal,
.drawer {
  background: rgb(23 32 28 / 42%);
}

.modal-panel,
.drawer-panel {
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgb(23 32 28 / 18%);
}

.modal-panel {
  padding: 28px;
}

.modal-header h2 {
  font: 600 21px/1.3 var(--sans);
  letter-spacing: -0.01em;
}

.icon-button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.icon-button:hover {
  background: var(--canvas);
  color: var(--ink);
}

.decision-context {
  background: none;
  border: 0;
  padding: 0;
}

.decision-options label,
.decision-check {
  background: var(--surface);
  border-color: var(--line);
  cursor: pointer;
}

.decision-options label:hover,
.decision-check:hover {
  border-color: var(--line-strong);
}

.decision-form input,
.decision-form select,
.decision-form textarea {
  background: var(--surface);
}

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

.overlay-status {
  border-left: 3px solid var(--line-strong);
  margin: 14px 0 0;
  padding: 2px 0 2px 12px;
}

/* app.css sets error text in a pale pink meant for the green sign-in field,
   which can't be read on the desk or in a window. */
.overlay-status[data-tone="error"],
.shell-status[data-tone="error"] {
  border-left: 3px solid var(--gate);
  color: var(--ink);
  padding: 2px 0 2px 12px;
}

/* The letter: set as a document, with a plain note of which version it is. */

.draft-banner {
  background: none;
  border: 0;
  color: var(--muted);
  font: 400 13px/1.4 var(--sans);
  margin: 0 0 8px;
  padding: 0;
}

.editor-box {
  background: var(--surface);
  font: 400 17px/1.6 var(--serif);
  padding: 18px 20px;
}

.rendered-document-view {
  background: var(--surface);
  font-family: var(--serif);
}

.rendered-document-view::before,
.rendered-document-view.is-identified::before,
.rendered-document-view.is-tokenised::before {
  background: var(--canvas);
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  font: 500 12px/1.4 var(--sans);
  text-transform: none;
}

.rendered-document-view::before {
  content: "Read only";
}

.rendered-document-view.is-identified::before {
  content: "Names shown, read only";
}

.rendered-document-view.is-tokenised::before {
  content: "Names hidden, read only";
}

/* ---- Forms: white fields with a clear edge before they are clicked ---- */

[data-screen] select,
[data-screen] textarea,
[data-screen] input:not([type="checkbox"], [type="radio"], [type="file"]) {
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

[data-screen] .field-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
}

/* ---- Record: the story as a list on the paper, the checks beside it ---- */

.file-overview {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 20px;
}

.file-overview h3 {
  font: 600 17px/1.3 var(--sans);
}

.file-overview dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.file-overview dl div {
  background: none;
  border: 0;
  padding: 0;
}

.file-overview dt {
  font-size: 13px;
  font-weight: 400;
}

.file-overview dd {
  font: 600 17px/1.3 var(--sans);
  margin-top: 2px;
}

.case-story,
.file-evidence-card,
.completeness-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.case-story h3,
.file-evidence-card h3 {
  font: 600 17px/1.3 var(--sans);
}

.file-story {
  gap: 0;
}

.case-story-event,
.case-story-event.system {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: 3px minmax(0, 1fr);
  padding: 14px 0;
}

.case-story-marker,
.case-story-event.document .case-story-marker,
.case-story-event.evidence .case-story-marker,
.case-story-event.panel .case-story-marker,
.case-story-event.follow-up .case-story-marker,
.case-story-event.system .case-story-marker {
  background: var(--line-strong);
}

/* Red is kept for safeguarding, here as everywhere. */
.case-story-event.gate .case-story-marker {
  background: var(--over);
}

.case-story-meta span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.case-story-meta time,
.case-story-event small {
  font-size: 13px;
}

.case-story-event h4 {
  font: 600 15px/1.35 var(--sans);
  margin: 4px 0 2px;
}

.case-story-event .audit-reason {
  background: none;
  border-left: 2px solid var(--line-strong);
  padding: 0 0 0 10px;
}

.completeness-card strong {
  font: 600 28px/1.1 var(--sans);
  margin-bottom: 10px;
}

.completeness-card p {
  color: var(--muted);
  line-height: 1.5;
}

.file-side-stack {
  border-left: 1px solid var(--line);
  gap: 28px;
  padding-left: 24px;
}

.evidence-record {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 0;
}

.evidence-record .status-pill {
  display: none;
}

.audit-history {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .file-side-stack {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 20px 0 0;
  }
}

.file-side-stack {
  align-content: start;
}

.record-correspondence .correspondence-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
}

.record-correspondence .correspondence-item h4 {
  font: 600 15px/1.35 var(--sans);
  margin: 8px 0 4px;
}

.record-correspondence .correspondence-item p {
  color: var(--muted);
  line-height: 1.55;
}

/* ---- Complaint: files and typed notes for the record ---- */

#case-imports h3 {
  font: 600 20px/1.3 var(--sans);
  letter-spacing: -0.01em;
}

#case-imports > p {
  line-height: 1.55;
  max-width: 68ch;
}

#case-imports .import-limits {
  color: var(--muted);
  font-size: 14px;
}

#case-imports .import-upload {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

#case-imports input[type="file"] {
  display: block;
  font: 400 15px/1.4 var(--sans);
  margin-top: 6px;
}

#case-imports input[type="file"]::file-selector-button {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  font: 500 15px/1 var(--sans);
  margin-right: 12px;
  padding: 10px 14px;
}

#case-imports details > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}

#case-imports .import-record summary small {
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
}

/* ---- Admin: tools under plain headings; the policy beside its checklist ---- */

[data-screen="admin"] .surface-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 18px;
  padding: 28px 32px;
}

[data-screen="admin"] h2 {
  font: 600 21px/1.3 var(--sans);
  letter-spacing: -0.01em;
}

[data-screen="admin"] h3 {
  font: 600 17px/1.3 var(--sans);
  margin: 28px 0 6px;
}

[data-screen="admin"] .admin-block > h3:first-child {
  margin-top: 0;
}

[data-screen="admin"] h4 {
  font: 600 15px/1.3 var(--sans);
  margin: 20px 0 8px;
}

[data-screen="admin"] .guidance-note {
  color: var(--muted);
  margin: 0 0 12px;
}

[data-screen="admin"] .inline-form-grid {
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 14px;
}

[data-screen="admin"] .admin-inset {
  grid-column: 1 / -1;
}

.diff-pane {
  background: var(--surface);
  border-color: var(--line);
}

.diff-header {
  background: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 600 15px/1.3 var(--sans);
  padding: 12px 16px;
}

.diff-pane pre {
  font: 400 14px/1.55 var(--sans);
  max-height: 420px;
  padding: 14px 16px;
}

.source-row .source-meta {
  color: var(--muted);
}

@media (max-width: 760px) {
  [data-screen="admin"] .surface-section {
    padding: 20px 16px;
  }

  .diff-grid,
  [data-screen="admin"] .admin-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="admin"] .section-heading.with-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  [data-screen="admin"] .table-wrap {
    overflow-x: auto;
  }

  .source-row-main {
    flex-direction: column;
  }
}

[data-screen="admin"] .field-label {
  display: grid;
  gap: 6px;
}

/* ---- Shell leftovers: initials in the sans, the role chooser on white ---- */

.avatar {
  font-family: var(--sans);
  font-weight: 600;
}

.capacity-panel .role-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.capacity-panel .role-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  min-height: 0;
}

.capacity-panel .role-card:hover,
.capacity-panel .role-card:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.capacity-panel .role-title {
  font: 600 17px/1.3 var(--sans);
}

.capacity-panel .role-person {
  display: none;
}

.capacity-panel .role-remit {
  color: var(--muted);
}

/* ---- My School: the school's own settings, one plain section each ---- */

[data-screen="school"] {
  max-width: 1180px;
}

[data-screen="school"] .surface-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 18px;
  padding: 28px 32px;
}

[data-screen="school"] .school-intro {
  background: none;
  border: 0;
  padding: 8px 0 4px;
}

[data-screen="school"] .school-intro .section-lede {
  font-size: 16px;
}

[data-screen="school"] h2 {
  font: 600 21px/1.3 var(--sans);
  letter-spacing: -0.01em;
}

[data-screen="school"] h3 {
  font: 600 17px/1.3 var(--sans);
  margin: 28px 0 10px;
}

[data-screen="school"] .section-lede,
[data-screen="school"] .guidance-note {
  color: var(--muted);
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 68ch;
}

[data-screen="school"] .section-heading {
  margin-bottom: 18px;
}

[data-screen="school"] .guidance-note {
  font-size: 15px;
}

/* Term dates: each term's start and end side by side. */
[data-screen="school"] .inline-form-grid.school-terms {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

[data-screen="school"] .field-label {
  display: grid;
  gap: 6px;
}

[data-screen="school"] .school-picker {
  margin-top: 16px;
  max-width: 360px;
}

[data-screen="school"] .inline-form-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

[data-screen="school"] .school-wide {
  grid-column: 1 / -1;
}

[data-screen="school"] .school-letters {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

/* Who does what: a list of roles, each with the person who fills it. */
[data-screen="school"] .school-role-grid {
  border-top: 1px solid var(--line);
  display: block;
}

[data-screen="school"] .school-role-card {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  gap: 8px 24px;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  padding: 14px 0;
}

[data-screen="school"] .school-role-card h4 {
  font: 600 15px/1.35 var(--sans);
}

[data-screen="school"] .school-role-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2px;
}

[data-screen="school"] .school-role-card .field-label {
  color: var(--muted);
  font-size: 14px;
}

/* Staff: one row per person, then the form to add someone. */
[data-screen="school"] .staff-list {
  border-top: 1px solid var(--line);
}

[data-screen="school"] .staff-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px 24px;
  grid-template-columns: minmax(0, 1fr) 140px 250px;
  padding: 14px 0;
}

[data-screen="school"] .staff-row h4 {
  font: 600 15px/1.35 var(--sans);
  margin: 0;
}

[data-screen="school"] .staff-row p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

[data-screen="school"] .staff-who p {
  margin-top: 2px;
}

[data-screen="school"] .inline-form-grid.staff-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
}

[data-screen="school"] .staff-row.is-off h4 {
  color: var(--muted);
}

[data-screen="school"] .staff-actions {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

[data-screen="school"] .school-staff h3 {
  font: 600 16px/1.35 var(--sans);
  margin: 24px 0 12px;
}

[data-screen="school"] .school-staff .button-row {
  margin-top: 16px;
}

/* Your policies: one row per policy, as Staff; the dialog adds topic boxes.
   The dialog sits outside the screen, so its fields are styled here. */
.policy-dialog .field-label {
  color: var(--ink);
  display: grid;
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
  margin-bottom: 14px;
}

.policy-dialog textarea,
.policy-dialog input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  padding: 8px 10px;
}

.policy-dialog .field-help {
  color: var(--muted);
  font-size: 14px;
}

[data-screen="school"] .policy-row {
  grid-template-columns: minmax(0, 1fr) 200px 250px;
}

.policy-dialog .policy-topics {
  border: 0;
  display: grid;
  gap: 6px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 16px;
  padding: 0;
}

.policy-dialog .policy-topics legend {
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

.policy-dialog .policy-topics .topics-hint {
  color: var(--muted);
  font-size: 14px;
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

.policy-dialog .policy-topics label {
  align-items: center;
  display: flex;
  gap: 8px;
}

@media (max-width: 640px) {
  .policy-dialog .policy-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Useful resources: rows as Staff, the school's own first, then the bank. */
[data-screen="school"] .school-resources h3 {
  font: 600 16px/1.35 var(--sans);
  margin: 24px 0 8px;
}

[data-screen="school"] .school-resources > .section-lede {
  margin: 0 0 12px;
}

[data-screen="school"] .resource-row {
  grid-template-columns: minmax(0, 1fr) 220px 200px;
}

[data-screen="school"] .resource-row .resource-contact {
  color: var(--ink);
  overflow-wrap: anywhere;
}

[data-screen="school"] .resource-row.is-off p {
  color: var(--muted);
}

.resource-dialog select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  padding: 8px 10px;
}

[data-screen="school"] .confirmed-procedure-card {
  background: none;
  border: 1px solid var(--line);
}

[data-screen="school"] .confirmed-procedure-card.unconfirmed {
  background: var(--gate-soft);
  border-color: var(--line-strong);
}

@media (max-width: 760px) {
  [data-screen="school"] .surface-section {
    padding: 20px 16px;
  }

  [data-screen="school"] .school-intro {
    padding: 4px 0;
  }

  [data-screen="school"] .section-heading.with-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  [data-screen="school"] .school-role-card {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="school"] .staff-row {
    gap: 2px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-screen="school"] .inline-form-grid.staff-form {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="school"] .staff-tasks {
    grid-column: 1;
  }

  [data-screen="school"] .staff-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: 10px;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  [data-screen="school"] .resource-row .staff-actions {
    flex-direction: column;
  }
}