/*
 * The staff console's one stylesheet, written from docs/design/staff-console.md: its colour, type, spacing and
 * radius tokens with the document's values, the vendored faces, the layout (sidebar, header block, card grid, phone
 * top bar at 768 px and below) and the component hooks section 3 names that the staff pages use.
 */

/* 1. Tokens (docs/design/staff-console.md, section 1) */

:root {
  /* Canvas */
  --color-page: #f4f5f0;
  --color-surface: #ffffff;
  --color-border: #dcdfdc;
  --color-divider: #efefed;
  --color-border-control: #cbd1cd;
  --color-border-control-strong: #8a9089;

  /* Sidebars */
  --color-sidebar-staff: #2a231f;
  --color-sidebar-founder: #1c2b26;
  --color-sidebar-text: #cbc4bd;
  --color-sidebar-muted: #a1998f;
  --color-sidebar-founder-text: #c0ceca;
  --color-sidebar-founder-muted: #8e9f96;
  --color-sidebar-heading: #ffffff;
  --color-nav-active: #2b5b99;
  --color-nav-badge: #7d4f00;
  --color-nav-badge-text: #faecc7;

  /* Text */
  --color-text: #1f2a24;
  --color-text-muted: #636a65;
  --color-link: #2b5b99;

  /* Actions and status */
  --color-primary: #2b5b99;
  --color-primary-hover: #234b80;
  --color-confirm: #1f6b43;
  --color-confirm-hover: #185836;
  --color-warning: #7a5000;
  --color-danger: #9d2a2c;
  --color-disabled: #c6d0c8;

  /* Tints */
  --color-tint-blue: #eef3f9;
  --color-tint-blue-border: #cddaed;
  --color-tint-green: #f4fbf6;
  --color-tint-green-border: #e4ece6;
  --color-tint-amber: #fdf8e8;
  --color-tint-amber-border: #f0dfb3;
  --color-tint-neutral: #f7f8f3;
  --color-neutral-strong: #e8ebe8;
  --color-banner-warning: #faecc7;

  /* Dark summary card */
  --color-dark-surface: #1c2b26;
  --color-dark-text: #ffffff;
  --color-dark-muted: #9aaaa4;
  --color-dark-rule: #3e4f48;

  /* Progress */
  --color-track: #e1e5df;

  /* Chips: background then text */
  --chip-green-bg: #dff1e4;  --chip-green-fg: #206b43;
  --chip-amber-bg: #faecc7;  --chip-amber-fg: #7a5000;
  --chip-red-bg: #f9dbdb;    --chip-red-fg: #9d2a2c;
  --chip-blue-bg: #dee9f5;   --chip-blue-fg: #2b5b99;
  --chip-grey-bg: #e8ebe8;   --chip-grey-fg: #4a5562;

  /* Focus */
  --focus-ring: #2b5b99;
  --focus-ring-on-dark: #ffffff;
}

:root {
  --font-display: Newsreader, "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-page-title: 600 36px/1.15 var(--font-display);
  --text-product: 600 26px/1.2 var(--font-display);
  --text-metric: 600 32px/1.1 var(--font-display);
  --text-card-title: 500 22px/1.25 var(--font-display);
  --text-lede: 400 16px/1.45 var(--font-body);
  --text-body: 400 16px/1.45 var(--font-body);
  --text-table: 400 15px/1.4 var(--font-body);
  --text-label: 400 14px/1.4 var(--font-body);
  --text-chip: 600 14px/1.3 var(--font-body);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 40px;

  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  --sidebar-width: 260px;
}

/* 2. Faces, vendored from Fontsource (product/versions.md) */

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/newsreader-500-9ca2106a.woff2") format("woff2");
}

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/newsreader-600-b16b95ed.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-400-64251e64.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-500-290aaea2.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-600-99b2fa32.woff2") format("woff2");
}

/* 3. Base */

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

body {
  margin: 0;
  font: var(--text-body);
  color: var(--color-text);
  background: var(--color-page);
}

h1 {
  margin: 0;
  font: var(--text-page-title);
  overflow-wrap: break-word;
}

a {
  color: var(--color-link);
}

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

.console__main:focus-visible {
  outline-offset: -2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.code {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 14px;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* A part of a time or an email address (StaffConsoleHelper#unbroken_parts): whole unless wider than its line. */
.unbroken {
  display: inline-block;
  max-width: 100%;
}

/* A table column is as wide as its cells' longest unbreakable run, so there each part is one. */
.table .unbroken {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* 4. Layout (section 2) */

.console {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.console--signed-out {
  grid-template-columns: minmax(0, 1fr);
}

.console__chrome {
  display: contents;
}

.console__main {
  min-width: 0;
  padding: var(--space-8);
}

.topbar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-sidebar-staff);
  color: var(--color-sidebar-text);
}

.sidebar :focus-visible,
.topbar :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

.sidebar__name {
  margin: 0;
  font: var(--text-product);
  color: var(--color-sidebar-heading);
}

.sidebar__subtitle {
  margin: calc(-1 * var(--space-3)) 0 var(--space-2);
  font: var(--text-label);
  color: var(--color-sidebar-muted);
}

.sidebar__entries {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar__entry {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-sidebar-text);
  text-decoration: none;
}

.sidebar__entry[aria-current="page"] {
  background: var(--color-nav-active);
  color: #ffffff;
  font-weight: 600;
}

.sidebar__footer {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  font: var(--text-label);
  color: var(--color-sidebar-muted);
}

.sidebar__signed-in {
  margin: 0;
  overflow-wrap: break-word;
}

/* The role keeps its separator; the email's parts are .unbroken, so it wraps only before its @. */
.sidebar__role {
  white-space: nowrap;
}

.sidebar__footer form {
  margin: 0;
}

.sidebar__sign-out {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-sidebar-text);
  font: var(--text-label);
  text-decoration: underline;
  cursor: pointer;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.page-header__text {
  min-width: 0;
}

.page-header__lede {
  margin: var(--space-2) 0 0;
  font: var(--text-lede);
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.page-header__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.narrow {
  max-width: 32rem;
  margin: 0 auto;
}

.stack,
.columns__main,
.columns__side {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 426px;
  gap: var(--space-5);
  align-items: start;
}

.columns--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 5. Components (section 3) */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: 600 16px/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary);
  color: #ffffff;
}

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

.button--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-control);
  color: var(--color-text);
}

.button--confirm {
  background: var(--color-confirm);
  color: #ffffff;
}

.button--confirm:hover {
  background: var(--color-confirm-hover);
}

.button--on-dark {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.button:disabled {
  background: var(--color-disabled);
  border-color: transparent;
  color: #f4f5f0;
  cursor: not-allowed;
}

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  font: var(--text-chip);
  font-size: 13px;
  white-space: nowrap;
}

.chip--page {
  margin: 0 0 var(--space-3);
  padding: 6px 12px;
  font-size: 14px;
}

.chip--green {
  background: var(--chip-green-bg);
  color: var(--chip-green-fg);
}

.chip--amber {
  background: var(--chip-amber-bg);
  color: var(--chip-amber-fg);
}

.chip--red {
  background: var(--chip-red-bg);
  color: var(--chip-red-fg);
}

.chip--blue {
  background: var(--chip-blue-bg);
  color: var(--chip-blue-fg);
}

.chip--grey {
  background: var(--chip-grey-bg);
  color: var(--chip-grey-fg);
}

.banner {
  margin-bottom: var(--space-5);
  padding: 16px 20px;
  border-radius: var(--radius-card);
}

.banner p,
.banner ul {
  margin: 0;
}

.banner ul {
  padding-left: var(--space-5);
}

.banner--warning {
  border: 1px solid var(--color-tint-amber-border);
  background: var(--color-banner-warning);
  color: var(--color-text);
  font-weight: 600;
}

.banner--neutral {
  background: var(--color-neutral-strong);
}

.card {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.card--selected {
  border: 2px solid var(--color-primary);
}

.card--narrow {
  max-width: 40rem;
}

.card--table {
  padding: var(--space-6) 0 0;
  overflow: hidden;
}

.card--table > .card__title,
.card--table > p {
  padding: 0 var(--space-6);
}

.card--table > p {
  margin: 0 0 var(--space-6);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  margin: 0 0 var(--space-4);
  font: var(--text-card-title);
  overflow-wrap: break-word;
}

.card__header .card__title {
  margin: 0;
}

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

.inset {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-tint-neutral);
  font-size: 15px;
}

.inset--mono {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 14px;
  white-space: pre;
}

.details {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
}

.details__entry {
  display: contents;
}

.details dt {
  font: var(--text-label);
  color: var(--color-text-muted);
}

.details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
}

.details__entry--wide > dt,
.details__entry--wide > dd {
  grid-column: 1 / -1;
}

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

.table {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-table);
  font-variant-numeric: tabular-nums;
}

.table th {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  font: var(--text-label);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
}

.table td {
  padding: 16px 18px;
  border-top: 1px solid var(--color-divider);
  vertical-align: top;
  overflow-wrap: break-word;
}

/* A stored JSON value has no spaces to wrap at, so it may break anywhere rather than widen the table. */
.table td.code--value {
  overflow-wrap: anywhere;
}

.table__action {
  white-space: nowrap;
}

.table td:first-child {
  font-weight: 600;
}

.table__row--selected {
  background: var(--color-tint-blue);
}

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

.link-list li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-divider);
  overflow-wrap: break-word;
}

.link-list li:first-child {
  border-top: 0;
}

.timeline {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-5);
}

.timeline__time {
  margin: 0;
  font: 400 15px/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.timeline__body {
  min-width: 0;
}

/* Forms */

.form {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.field label {
  font: var(--text-label);
  color: var(--color-text-muted);
}

.field__hint {
  margin: 0;
  font: var(--text-label);
  color: var(--color-text-muted);
}

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

.field--checkbox label {
  font: var(--text-body);
  color: var(--color-text);
}

.field--checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--color-border-control-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: 400 16px/1.45 var(--font-body);
}

.field input:not([type="checkbox"]),
.field select {
  height: 48px;
  padding: 0 16px;
}

.field textarea {
  min-height: calc(3lh + 26px);
  padding: 12px 16px;
  resize: vertical;
}

.field textarea:disabled {
  background: var(--color-tint-neutral);
}

.field .editor {
  min-height: 28rem;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 14px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 6. The Models panel: page 11's roles table beside the change panel (S-042) */

/* The roles table's six columns are the registry grid's own, shared by the heading row and every role's row through
   subgrid, so each column is as wide as the content of every row needs: Role, Primary, Setting and Alternate share
   the room left once Last eval and the action column hold their chips and links whole. */
.registry {
  display: grid;
  grid-template-columns: repeat(4, auto) max-content max-content 426px;
  grid-template-rows: repeat(16, auto) 1fr;
  column-gap: var(--space-3);
  align-items: start;
}

.registry-role,
.registry__cells {
  display: contents;
}

.registry__head,
.registry__row {
  display: grid;
  grid-column: 1 / -2;
  grid-template-columns: subgrid;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-top-color: var(--color-divider);
  border-bottom: 0;
  background: var(--color-surface);
  font: var(--text-table);
}

.registry__head {
  border-top-color: var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  font: var(--text-label);
  font-weight: 500;
  color: var(--color-text-muted);
}

.registry__head + .registry-role .registry__row {
  border-top: 0;
}

.registry-role:last-child .registry__row {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* A cell holds its longest word whole; a stored value longer than 12rem breaks rather than widen the table. */
.registry__cell {
  max-width: 12rem;
  margin: 0;
  overflow-wrap: break-word;
}

.registry__cell dd {
  margin: 0;
}

.registry__cell--name {
  font-weight: 600;
}

.registry__cell--name .code {
  display: block;
  font-weight: 400;
}

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

.registry__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.registry__absent {
  grid-column: 2 / -2;
  margin: 0;
}

.registry__action {
  grid-column: -2;
  white-space: nowrap;
}

.registry__editing {
  display: none;
  font-weight: 600;
}

.side-panel {
  align-self: start;
}

.registry .side-panel {
  grid-column: -2;
  grid-row: 1 / -1;
  margin-left: var(--space-2);
}

.side-panel .details,
.eval-gate {
  margin: 0 0 var(--space-5);
}

/* One change panel is open: the fragment's, else the one the server marks default. */
.side-panel[id^="change-"] {
  display: none;
}

.side-panel[id^="change-"]:target,
main:not(:has(.side-panel[id^="change-"]:target)) .side-panel--default {
  display: block;
}

.registry-role:has(.side-panel[id^="change-"]:target) .registry__row,
main:not(:has(.side-panel[id^="change-"]:target)) .registry-role:has(.side-panel--default) .registry__row {
  background: var(--color-tint-blue);
}

.registry-role:has(.side-panel[id^="change-"]:target) .registry__change,
main:not(:has(.side-panel[id^="change-"]:target)) .registry-role:has(.side-panel--default) .registry__change {
  display: none;
}

.registry-role:has(.side-panel[id^="change-"]:target) .registry__editing,
main:not(:has(.side-panel[id^="change-"]:target)) .registry-role:has(.side-panel--default) .registry__editing {
  display: inline;
}

/* Below page 11's width the change panel narrows, so the roles table keeps its words and chips whole. */
@media (max-width: 1399px) {
  .registry {
    grid-template-columns: repeat(4, auto) max-content max-content 340px;
  }
}

/* 7. Phone width (section 6): a top bar with a menu, stacked columns, 44 px targets */

@media (max-width: 768px) {
  .console {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-sidebar-staff);
  }

  .topbar__name {
    font: var(--text-product);
    font-size: 22px;
    color: var(--color-sidebar-heading);
  }

  .sidebar {
    position: static;
    display: none;
    height: auto;
    padding: var(--space-4);
  }

  .sidebar--open {
    display: flex;
  }

  .sidebar__name {
    display: none;
  }

  .sidebar__subtitle {
    margin: 0;
  }

  .sidebar__entry,
  .sidebar__sign-out {
    min-height: 44px;
  }

  .console__main {
    padding: var(--space-4);
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header__actions {
    align-self: flex-start;
  }

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

  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  /* Only at phone width does the audit table keep a width of its own and scroll inside its card. */
  .table--wide {
    min-width: 44rem;
  }

  .details {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-1);
  }

  .details dd {
    margin-bottom: var(--space-2);
  }

  .registry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .registry__head {
    display: none;
  }

  .registry__head,
  .registry__row {
    grid-column: 1;
  }

  .registry__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
  }

  .registry__head + .registry-role .registry__row {
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .registry__cell {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-3);
    min-width: 0;
    max-width: none;
  }

  .registry__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
  }

  .registry__absent,
  .registry__action {
    grid-column: 1;
  }

  .registry__change {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .registry .side-panel {
    order: 1;
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-5);
    margin-left: 0;
  }

  .field--checkbox input {
    width: 24px;
    height: 44px;
  }

  .link-list a {
    display: inline-block;
    max-width: 100%;
    padding: 10px 0;
    line-height: 24px;
  }
}