/* =====================================================================
   memoranda console — the design layer
   ---------------------------------------------------------------------
   WHAT THIS FILE ASSUMES

   1. Bootstrap 5.3.8's dist CSS is linked BEFORE this file, served from this
      repository at /assets/vendor/bootstrap-5.3.8/css/bootstrap.min.css —
      the bytes are committed next to this file, and where they came from is
      written down in that directory's PROVENANCE.md. Nothing here is
      @import-ed and nothing is fetched from outside this origin: no CDN, no
      font host. The two typefaces — Fraunces for display, Geist for the
      interface, the same pair the public site uses — are variable woff2
      files committed under /assets/fonts and loaded by the two @font-face
      rules below; they are same-origin, so the CSP's `font-src 'self'`
      already covers them and no allowance was added for this.
   2. Bootstrap is used for its reset, its grid, its forms and its utility
      classes. It is NOT used for its look: everything below either sets a
      Bootstrap custom property (so stock components adopt this palette) or
      defines a `.mem-*` class of its own. There is no @apply anywhere,
      because there is no build step — this file is served as written.
   3. Every colour, size and duration is a token on :root. A literal colour
      in a component rule is a colour that will not follow the theme, and
      the dark theme below is a SECOND set of token values, not an
      inversion: an inverted palette produces grey text on grey panels and
      an accent that glows.
   4. If Bootstrap is absent the page still reads. The `.mem-*` layer does
      not inherit anything structural from it; losing Bootstrap costs the
      form controls and the utilities, not the layout.

   Nothing in this file is generated at runtime, so it carries no nonce and
   needs none. The one nonce the console emits is on the script tag in
   views/layout.php.
   ===================================================================== */

/* Recall response times: fixed geometry, colours following the console theme. */
.mem-latency { margin-block: var(--mem-5); padding: var(--mem-5); }
.mem-latency__figure { font-family: var(--mem-font-display); font-size: var(--mem-display); line-height: var(--mem-lh-tight); margin-block: var(--mem-3); }
.mem-latency__chart { min-width: 0; margin-block: var(--mem-4); }
.mem-latency__svg { display: block; width: 100%; height: 7.5rem; overflow: visible; }
.mem-latency__scale { color: var(--mem-ink-faint); font-size: var(--mem-text-xs); font-variant-numeric: tabular-nums; }
.mem-latency__baseline { stroke: var(--mem-line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mem-latency__service { stroke: var(--mem-accent); stroke-width: 2; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mem-latency__core { fill: var(--mem-accent-soft); stroke: none; }
.mem-latency__legend { display: flex; flex-wrap: wrap; gap: var(--mem-4); font-size: var(--mem-text-sm); margin-block: var(--mem-2); }
.mem-latency__legend span::before { content: ""; display: inline-block; width: 1rem; height: 0.25rem; margin-inline-end: var(--mem-2); background: var(--mem-accent); vertical-align: middle; }
.mem-latency__legend span + span::before { height: 0.75rem; background: var(--mem-accent-soft); border: 1px solid var(--mem-line); }

/* ---------- type: the site's two faces, self-hosted ----------------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens: light ------------------------------------------ */

:root {
  color-scheme: light dark;
}

/* An explicit choice narrows what the browser may render natively-dark. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {

  --mem-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mem-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mem-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* A type scale that is deliberately not linear at the top: the display
     size is where the bold/thin contrast lives, and a scale that grows
     evenly never gets far enough from the body text to make that contrast
     read as anything. */
  --mem-text-xs: 0.75rem;
  --mem-text-sm: 0.8125rem;
  --mem-text: 0.9375rem;
  --mem-text-md: 1.0625rem;
  --mem-text-lg: 1.375rem;
  --mem-text-xl: 1.75rem;
  --mem-display: clamp(2rem, 1.35rem + 2.1vw, 2.875rem);

  --mem-lh-tight: 1.12;
  --mem-lh: 1.55;
  --mem-track-tight: -0.022em;
  --mem-track: 0;
  --mem-track-wide: 0.08em;

  /* Spacing grows non-linearly for the same reason the type does: even
     steps give an even rhythm, and an even rhythm has no hierarchy. */
  --mem-1: 0.25rem;
  --mem-2: 0.5rem;
  --mem-3: 0.75rem;
  --mem-4: 1rem;
  --mem-5: 1.5rem;
  --mem-6: 2rem;
  --mem-7: 3rem;
  --mem-8: 4.5rem;

  /* The site's surfaces are flat: cards square, controls barely rounded.
     The pill survives for badges, where a square chip reads as a button. */
  --mem-r-sm: 2px;
  --mem-r: 2px;
  --mem-r-lg: 0px;
  --mem-r-pill: 999px;

  /* The public site's palette: cream canvas, paper-white surfaces, warm
     ink, hairline borders. */
  --mem-paper: #ebe9e1;
  --mem-surface: #ffffff;
  --mem-surface-2: #f5f4f0;
  --mem-ink: #1f1c1b;
  --mem-ink-soft: #55504a;
  --mem-ink-faint: #6f6861;
  --mem-line: #d9d6ce;
  --mem-line-strong: #c7c1b7;

  /* The accent is the site's highlighter orange burnt dark enough to work
     as TEXT: at full saturation (#ff7714) it is 2.2:1 on this cream and
     fails as a link. The full-saturation orange survives as --mem-mark,
     for the brand ring and nothing that must be read. */
  --mem-accent: #b34e00;
  --mem-accent-rgb: 179, 78, 0;
  --mem-accent-hover: #8f3e00;
  --mem-accent-ink: #ffffff;
  --mem-accent-soft: #f9e4d2;
  --mem-mark: #ff7714;

  --mem-ok: #0f7a4a;
  --mem-ok-soft: #e4f4ec;
  --mem-warn: #8a5a00;
  --mem-warn-soft: #fbf0dc;
  --mem-danger: #a61b2b;
  --mem-danger-soft: #fbe9eb;
  --mem-info: #1b5fa6;
  --mem-info-soft: #e6f0fa;

  /* The site does not lift its cards: hierarchy is hairlines and space.
     Both shadow tokens stay so components need not change, and both are
     flat. */
  --mem-shadow-1: none;
  --mem-shadow-2: none;

  --mem-quick: 120ms;
  --mem-calm: 220ms;
  --mem-ease: cubic-bezier(0.2, 0.6, 0.25, 1);

  --mem-sidebar-w: 17rem;
}

/* ---------- tokens: dark, rebuilt ----------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The site's black bands, not a grey inversion: near-black neutral
       surfaces with cream ink, exactly the palette of the page's dark
       sections. */
    --mem-paper: #0f0f0e;
    --mem-surface: #191918;
    --mem-surface-2: #232320;
    --mem-ink: #f0eee6;
    --mem-ink-soft: #c6c1b6;
    --mem-ink-faint: #bab4aa;
    --mem-line: #2b2b28;
    --mem-line-strong: #3d3c37;

    /* The accent moves the other way here: on near-black the burnt orange
       is mud, so it lightens back toward the site's highlighter instead of
       darkening away from it. */
    --mem-accent: #ff9a4d;
    --mem-accent-rgb: 255, 154, 77;
    --mem-accent-hover: #ffb173;
    --mem-accent-ink: #1f1c1b;
    --mem-accent-soft: #34251a;
    --mem-mark: #ff7714;

    --mem-ok: #56d19a;
    --mem-ok-soft: #10281f;
    --mem-warn: #e5b45c;
    --mem-warn-soft: #2a2113;
    --mem-danger: #ff8b96;
    --mem-danger-soft: #2e1418;
    --mem-info: #7fbbf2;
    --mem-info-soft: #12212f;

    --mem-shadow-1: none;
    --mem-shadow-2: none;
  }
}

/* The same dark values a second time, verbatim, under the attribute a
   reviewer sets with the sidebar switch. The duplication is the cost of
   letting an explicit choice beat the system in BOTH directions: a value
   defined only inside the media query can be escaped but never forced. */
:root[data-theme="dark"] {
    /* The site's black bands, not a grey inversion: near-black neutral
       surfaces with cream ink, exactly the palette of the page's dark
       sections. */
    --mem-paper: #0f0f0e;
    --mem-surface: #191918;
    --mem-surface-2: #232320;
    --mem-ink: #f0eee6;
    --mem-ink-soft: #c6c1b6;
    --mem-ink-faint: #bab4aa;
    --mem-line: #2b2b28;
    --mem-line-strong: #3d3c37;

    /* The accent moves the other way here: on near-black the burnt orange
       is mud, so it lightens back toward the site's highlighter instead of
       darkening away from it. */
    --mem-accent: #ff9a4d;
    --mem-accent-rgb: 255, 154, 77;
    --mem-accent-hover: #ffb173;
    --mem-accent-ink: #1f1c1b;
    --mem-accent-soft: #34251a;
    --mem-mark: #ff7714;

    --mem-ok: #56d19a;
    --mem-ok-soft: #10281f;
    --mem-warn: #e5b45c;
    --mem-warn-soft: #2a2113;
    --mem-danger: #ff8b96;
    --mem-danger-soft: #2e1418;
    --mem-info: #7fbbf2;
    --mem-info-soft: #12212f;

    --mem-shadow-1: none;
    --mem-shadow-2: none;
}

/* ---------- Bootstrap bridge ---------------------------------------- */
/* Stock Bootstrap components read these, so a .btn, a .form-control or a
   .table picks up the console palette without being restyled one by one. */

:root {
  --bs-font-sans-serif: var(--mem-font);
  --bs-font-monospace: var(--mem-mono);
  --bs-body-font-size: var(--mem-text);
  --bs-body-line-height: var(--mem-lh);
  --bs-body-bg: var(--mem-paper);
  --bs-body-color: var(--mem-ink);
  --bs-secondary-color: var(--mem-ink-soft);
  --bs-emphasis-color: var(--mem-ink);
  --bs-border-color: var(--mem-line);
  --bs-border-radius: var(--mem-r);
  --bs-border-radius-sm: var(--mem-r-sm);
  --bs-border-radius-lg: var(--mem-r-lg);
  --bs-link-color: var(--mem-accent);
  --bs-link-hover-color: var(--mem-accent-hover);
  /* Bootstrap 5.3 paints `a` from the -rgb pair, not from --bs-link-color:
     without these two the bridge above never reached a bare link. */
  --bs-link-color-rgb: var(--mem-accent-rgb);
  --bs-link-hover-color-rgb: var(--mem-accent-rgb);
  --bs-code-color: var(--mem-accent);
  --bs-primary: var(--mem-accent);
  --bs-focus-ring-width: 2px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--mem-accent);
}

/* ---------- foundation ---------------------------------------------- */

.mem-body {
  margin: 0;
  background: var(--mem-paper);
  color: var(--mem-ink);
  font-family: var(--mem-font);
  font-size: var(--mem-text);
  line-height: var(--mem-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mem-body :focus-visible {
  outline: 2px solid var(--mem-accent);
  outline-offset: 2px;
  border-radius: var(--mem-r-sm);
}

/* A focus ring only when the keyboard asked for one, and never the browser's
   default halo on top of ours. */
.mem-body :focus:not(:focus-visible) {
  outline: none;
}

.mem-skip {
  position: absolute;
  left: -9999px;
  top: var(--mem-2);
  z-index: 50;
  padding: var(--mem-2) var(--mem-4);
  border-radius: var(--mem-r);
  background: var(--mem-accent);
  color: var(--mem-accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.mem-skip:focus {
  left: var(--mem-2);
}

.mem-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* ---------- shell --------------------------------------------------- */

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

.mem-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--mem-5);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--mem-5) var(--mem-4);
  border-right: 1px solid var(--mem-line);
  background: var(--mem-surface);
}

.mem-main {
  min-width: 0;
  padding: var(--mem-6) var(--mem-6) var(--mem-7);
}

/* ---------- brand --------------------------------------------------- */

.mem-brand {
  display: flex;
  gap: var(--mem-3);
  align-items: center;
  padding: var(--mem-2);
  border-radius: var(--mem-r);
  color: inherit;
  text-decoration: none;
}

/* The site's wordmark ends in a small hollow orange ring; this is that
   ring, moved after the name by order alone so the markup stays put. */
.mem-brand__mark {
  flex: none;
  order: 2;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--mem-mark);
  border-radius: 50%;
  background: transparent;
}

.mem-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mem-brand__name {
  font-size: var(--mem-text-md);
  font-weight: 700;
  letter-spacing: var(--mem-track-tight);
}

.mem-brand__tagline {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 400;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

/* ---------- navigation ---------------------------------------------- */

.mem-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--mem-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-nav__link {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  padding: var(--mem-3);
  border-radius: var(--mem-r);
  color: var(--mem-ink-soft);
  text-decoration: none;
  transition: background var(--mem-quick) var(--mem-ease),
    color var(--mem-quick) var(--mem-ease);
}

.mem-nav__link:hover {
  background: var(--mem-surface-2);
  color: var(--mem-ink);
}

.mem-nav__link.is-current {
  background: var(--mem-accent-soft);
  color: var(--mem-accent-hover);
}

.mem-nav__icon {
  margin-top: 0.15em;
}

.mem-nav__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mem-nav__label {
  font-size: var(--mem-text);
  font-weight: 600;
  letter-spacing: var(--mem-track-tight);
}

/* The hint is the "explains rather than labels" half of every nav entry. It
   is thin next to a semibold label on purpose: that pairing is the whole
   typographic idea of this console. */
.mem-nav__hint {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 300;
  line-height: 1.35;
}

.mem-nav__link.is-current .mem-nav__hint {
  color: inherit;
  opacity: 0.75;
}

/* ---------- actor and language -------------------------------------- */

.mem-actor {
  display: flex;
  flex-direction: column;
  gap: var(--mem-1);
  margin-top: auto;
  padding: var(--mem-3);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r);
  background: var(--mem-surface-2);
}

.mem-actor__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 400;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-actor__name {
  font-size: var(--mem-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mem-actor__tenant {
  color: var(--mem-ink-soft);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  overflow-wrap: anywhere;
}

/* The way out of the session. A form, because /logout is a POST that takes the
   CSRF token: a sign-out reachable by GET is one any page on the internet can
   perform on a reviewer by embedding an image. */
.mem-actor__out {
  margin-top: var(--mem-2);
}

.mem-actor__signout {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mem-ink-soft);
  font: inherit;
  font-size: var(--mem-text-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.mem-actor__signout:hover,
.mem-actor__signout:focus-visible {
  color: var(--mem-ink);
}

.mem-lang {
  display: flex;
  gap: var(--mem-2);
  align-items: center;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
}

.mem-lang__choice {
  padding: var(--mem-1) var(--mem-2);
  border-radius: var(--mem-r-pill);
  color: var(--mem-ink-soft);
  text-decoration: none;
}

.mem-lang__choice:hover {
  background: var(--mem-surface-2);
  color: var(--mem-ink);
}

.mem-lang__choice.is-current {
  background: var(--mem-accent-soft);
  color: var(--mem-accent);
  font-weight: 600;
}

/* ---------- page head ----------------------------------------------- */

.mem-pagehead {
  display: flex;
  flex-direction: column;
  gap: var(--mem-3);
  margin-bottom: var(--mem-6);
}

.mem-pagehead__title {
  margin: 0;
  font-family: var(--mem-font-display);
  font-size: var(--mem-display);
  font-weight: 380;
  letter-spacing: -0.01em;
  line-height: var(--mem-lh-tight);
}

/* Thin, large, and grey against a heavy black title: the contrast is
   weight and colour, never size alone. */
.mem-pagehead__lede {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-md);
  font-weight: 300;
  line-height: 1.45;
}

/* The help line (C-27): the section's guide, under the title on every page so
   a refusal above it is never a dead end. One plain link — keyboard-native, no
   script — in a row that wraps on a phone. */
.mem-pagehead__help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2) var(--mem-4);
  margin: var(--mem-2) 0 0;
  font-size: var(--mem-text-sm);
}

.mem-pagehead__help-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-1);
  color: var(--mem-accent-hover);
  text-decoration: none;
}

.mem-pagehead__help-link:hover,
.mem-pagehead__help-link:focus-visible {
  text-decoration: underline;
}

.mem-pagehead__help-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- the team card in the sidebar ---------------------------- */

/* The band's three facts again, above the map, so the team stays in view
   while the page scrolls. It wears the actor card's clothes so the sidebar
   reads as one column, and the accent edge says it is the same fact as the
   band. */
.mem-sideteam {
  display: flex;
  flex-direction: column;
  gap: var(--mem-1);
  padding: var(--mem-3);
  border: 1px solid var(--mem-line);
  border-left: 3px solid var(--mem-accent);
  border-radius: var(--mem-r);
  background: var(--mem-surface-2);
}

.mem-sideteam__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-sideteam__name {
  font-size: var(--mem-text-md);
  font-weight: 600;
  line-height: var(--mem-lh-tight);
  overflow-wrap: anywhere;
}

.mem-sideteam__id {
  color: var(--mem-ink-soft);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  overflow-wrap: anywhere;
}

.mem-sideteam__customer,
.mem-sideteam__role {
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
  line-height: 1.35;
}

/* ---------- the team band ------------------------------------------- */

/* Which team this page belongs to: the first thing on every signed-in page,
   so two isolated teams open in two tabs cannot be confused. The accent edge
   is the same one the flash uses; the band is calmer than a flash because it
   is always there. It wraps on a phone and never scrolls sideways. */
.mem-teambar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2) var(--mem-3);
  align-items: baseline;
  margin-bottom: var(--mem-5);
  padding: var(--mem-3) var(--mem-4);
  border: 1px solid var(--mem-line);
  border-left: 3px solid var(--mem-accent);
  border-radius: var(--mem-r);
  background: var(--mem-surface-2);
  font-size: var(--mem-text-sm);
}

.mem-teambar__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-teambar__name {
  font-size: var(--mem-text-md);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mem-teambar__id {
  color: var(--mem-ink-soft);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  overflow-wrap: anywhere;
}

.mem-teambar__sep {
  color: var(--mem-ink-faint);
}

.mem-teambar__customer,
.mem-teambar__role {
  color: var(--mem-ink-soft);
}

.mem-teambar__switch {
  margin-left: auto;
  color: var(--mem-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mem-teambar__switch:hover,
.mem-teambar__switch:focus-visible {
  color: var(--mem-accent-hover);
}

/* ---------- the help box -------------------------------------------- */

.mem-help {
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
  box-shadow: var(--mem-shadow-1);
}

.mem-help__summary {
  display: flex;
  gap: var(--mem-2);
  align-items: center;
  padding: var(--mem-3) var(--mem-4);
  border-radius: var(--mem-r-lg);
  color: var(--mem-ink-soft);
  cursor: pointer;
  font-size: var(--mem-text-sm);
  font-weight: 600;
  list-style: none;
}

/* Both spellings are needed: WebKit still uses its own pseudo-element. */
.mem-help__summary::-webkit-details-marker {
  display: none;
}

.mem-help__summary::marker {
  content: "";
}

.mem-help__summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--mem-quick) var(--mem-ease);
}

.mem-help[open] .mem-help__summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.mem-help__icon {
  color: var(--mem-accent);
}

.mem-help__points {
  margin: 0;
  padding: 0 var(--mem-4) var(--mem-4) calc(var(--mem-4) + 1.5rem);
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-sm);
  font-weight: 300;
}

.mem-help__points li + li {
  margin-top: var(--mem-2);
}

/* ---------- flash --------------------------------------------------- */

.mem-flash {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  margin-bottom: var(--mem-5);
  padding: var(--mem-3) var(--mem-4);
  border: 1px solid var(--mem-line);
  border-left-width: 3px;
  border-radius: var(--mem-r);
  background: var(--mem-surface);
}

.mem-flash__text {
  margin: 0;
  font-size: var(--mem-text-sm);
}

.mem-flash--info {
  border-left-color: var(--mem-info);
  background: var(--mem-info-soft);
}

.mem-flash--info .mem-flash__icon {
  color: var(--mem-info);
}

.mem-flash--success {
  border-left-color: var(--mem-ok);
  background: var(--mem-ok-soft);
}

.mem-flash--success .mem-flash__icon {
  color: var(--mem-ok);
}

.mem-flash--warning {
  border-left-color: var(--mem-warn);
  background: var(--mem-warn-soft);
}

.mem-flash--warning .mem-flash__icon {
  color: var(--mem-warn);
}

.mem-flash--danger {
  border-left-color: var(--mem-danger);
  background: var(--mem-danger-soft);
}

.mem-flash--danger .mem-flash__icon {
  color: var(--mem-danger);
}

/* ---------- badges -------------------------------------------------- */

.mem-badge {
  display: inline-flex;
  gap: var(--mem-1);
  align-items: center;
  padding: 0.15rem var(--mem-2) 0.15rem var(--mem-1);
  border: 1px solid transparent;
  border-radius: var(--mem-r-pill);
  font-size: var(--mem-text-xs);
  font-weight: 600;
  letter-spacing: var(--mem-track);
  white-space: nowrap;
}

.mem-badge__icon {
  width: 1em;
  height: 1em;
}

.mem-badge--pending {
  border-color: var(--mem-line-strong);
  background: var(--mem-surface-2);
  color: var(--mem-ink-soft);
}

.mem-badge--approved {
  background: var(--mem-ok-soft);
  color: var(--mem-ok);
}

.mem-badge--rejected {
  background: var(--mem-danger-soft);
  color: var(--mem-danger);
}

.mem-badge--merged {
  background: var(--mem-accent-soft);
  color: var(--mem-accent);
}

.mem-badge--deferred {
  background: var(--mem-warn-soft);
  color: var(--mem-warn);
}

.mem-badge--forgotten {
  border-color: var(--mem-line-strong);
  background: transparent;
  color: var(--mem-ink-faint);
  text-decoration: line-through;
}

/* A replaced memory: still listed, no longer recalled. Quiet like a forgotten one, not struck through:
   its text is still readable. */
.mem-badge--superseded {
  border-color: var(--mem-line-strong);
  background: transparent;
  color: var(--mem-ink-faint);
}

/* The three CREDENTIAL states (screen 4). They borrow the proposal palette on
   purpose: a reviewer reads green as *this is in force* and red as *this is
   stopped* everywhere else in the console, and a credential page that invented
   its own colours would make them learn a second alphabet. */

.mem-badge--live {
  background: var(--mem-ok-soft);
  color: var(--mem-ok);
}

.mem-badge--revoked {
  background: var(--mem-danger-soft);
  color: var(--mem-danger);
}

.mem-badge--expired {
  border-color: var(--mem-line-strong);
  background: var(--mem-surface-2);
  color: var(--mem-ink-faint);
}

/* The secret, shown once and never again. It is a `mem-hashline` with room to
   breathe and a border that says *copy this now*: the page cannot show it a
   second time, so the styling has to carry the urgency the copy states. */

.mem-secret {
  display: flex;
  flex-direction: column;
  gap: var(--mem-2);
  margin: var(--mem-4) 0;
  padding: var(--mem-4);
  border: 1px solid var(--mem-warn);
  border-radius: var(--mem-r);
  background: var(--mem-warn-soft);
}

/* The recovery codes, shown once. A grid so eight of them read as a block a
   person copies whole, and monospace so a 0 and an O would be distinguishable —
   they cannot occur, the alphabet excludes both, and the choice of face is what
   makes that visible rather than merely true. */

/* A configuration block the customer copies (the guided setup): wraps rather
   than clipping at phone width, and looks like something to copy. */
.mem-config {
  margin: 0 0 var(--mem-3);
  padding: var(--mem-3);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-sm);
  color: var(--mem-ink);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
  line-height: var(--mem-lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mem-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mem-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-codes__item {
  padding: var(--mem-2);
  border: 1px solid var(--mem-line-strong);
  border-radius: var(--mem-r);
  background: var(--mem-surface);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
  text-align: center;
  user-select: all;
}

.mem-secret__value {
  overflow-wrap: anywhere;
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
  user-select: all;
}

/* The enrolment QR. The SVG stays black-on-white in both themes — a QR is a
   scanned artifact, and an inverted one is the variant some scanner refuses —
   so the white it carries is its own, boxed on the paper surface. */

.mem-qr {
  align-self: center;
  padding: var(--mem-2);
  border: 1px solid var(--mem-line-strong);
  border-radius: var(--mem-r);
  background: #fff;
}

.mem-qr svg {
  display: block;
  width: min(13rem, 60vw);
  height: auto;
}

/* ---------- buttons ------------------------------------------------- */

.mem-btn {
  display: inline-flex;
  gap: var(--mem-2);
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-height: 2.5rem;
  text-align: center;
  padding: var(--mem-2) var(--mem-4);
  border: 1px solid var(--mem-line-strong);
  border-radius: var(--mem-r);
  background: var(--mem-surface);
  color: var(--mem-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--mem-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mem-quick) var(--mem-ease),
    border-color var(--mem-quick) var(--mem-ease);
}

.mem-btn:hover {
  border-color: var(--mem-accent);
  color: var(--mem-accent-hover);
}

/* One primary per view: the accent fills it and nothing else; every other
   button is quiet, so five in a row read as five choices and not five shouts. */
.mem-btn:active {
  transform: translateY(1px);
}

.mem-btn--quiet {
  border-color: var(--mem-line-strong);
  background: var(--mem-surface);
  color: var(--mem-ink);
}

.mem-btn--quiet:hover {
  background: var(--mem-surface-2);
  color: var(--mem-ink);
}

.mem-btn__icon {
  width: 1.1em;
  height: 1.1em;
}

/* ---------- notices (the error pages) ------------------------------- */

.mem-notice {
  display: flex;
  flex-direction: column;
  gap: var(--mem-4);
  align-items: flex-start;
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
  box-shadow: var(--mem-shadow-1);
}

.mem-notice--warn {
  border-color: var(--mem-warn);
}

.mem-notice__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mem-warn);
}

.mem-notice__text {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-md);
  font-weight: 300;
  line-height: 1.5;
}

/* ---------- footer -------------------------------------------------- */

.mem-foot {
  margin-top: var(--mem-7);
  padding-top: var(--mem-4);
  border-top: 1px solid var(--mem-line);
}

.mem-foot__line {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 300;
}

/* ---------- responsive ---------------------------------------------- */
/* The sidebar becomes a scrollable strip rather than a drawer. A drawer
   needs a toggle, a toggle needs JavaScript or a <details> whose open state
   CSS cannot force back open on a wide screen — and this console must work
   with scripting blocked, because a CSP that strict is the point. */

/* Accent text on a tinted surface sits at 4.3:1; the hover shade lifts it
   to 6:1 without a second accent. */
.mem-lang__choice.is-current,
.mem-foot__line a {
  color: var(--mem-accent-hover);
}

/* The small uppercase count other lists still open with. */
.mem-count {
  margin: 0 0 var(--mem-5);
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

/* ---------- hierarchy and material (critique 2026-09-18, pass 3) ------- */

/* The queue's two numbers, set large and tabular, before the list: how many
   wait and how long the oldest has. The sentence stays for a screen reader. */
.mem-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-3) var(--mem-6);
  margin: 0 0 var(--mem-5);
  padding: var(--mem-4) 0;
  border-top: 1px solid var(--mem-line);
  border-bottom: 1px solid var(--mem-line);
}

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

.mem-summary__item {
  display: flex;
  align-items: baseline;
  gap: var(--mem-2);
}

.mem-summary__value {
  font-family: var(--mem-font-display);
  font-size: var(--mem-text-xl);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mem-summary__label {
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-sm);
}

/* A subtitle is a subtitle: reading weight, not a paragraph. It runs the
   full width of the page head: the 62ch measure it had wrapped a two-line
   lede into four on a wide screen (owner, 2026-09-22). */
.mem-pagehead__lede {
  font-size: var(--mem-text-md);
  font-weight: 400;
}

/* Card families: what a thing is, said by its edge. A proposal waits — it
   carries the chain's rail on its left; a key is a credential — its id leads. */
.mem-card--proposal {
  border-left: 3px solid var(--mem-accent);
}

.mem-card--key .mem-card__id {
  color: var(--mem-ink);
  font-weight: 600;
}

/* The receipt trace wears the chain: a dotted rail and a node per event. */
.mem-trace {
  position: relative;
  padding-left: 1.5rem;
}

.mem-trace::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0.4rem;
  border-left: 2px dotted var(--mem-accent);
}

.mem-trace > li {
  position: relative;
}

.mem-trace > li::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: -1.45rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--mem-accent);
  border-radius: 50%;
  background: var(--mem-surface);
}

@media (max-width: 40rem) {
  /* Four labelled values become two columns, not eight lines. */
  .mem-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- feedback: arrival, dismissal, working ---------------------- */

/* An acknowledgement arrives: 160 ms from four pixels below, once. The reduced
   motion rule further down shortens it to nothing. */
@keyframes mem-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.mem-flash {
  position: relative;
  animation: mem-rise 160ms var(--mem-ease) both;
}

/* The dismiss control the script adds to a success or info flash. Never on a
   warning or a refusal: those stay until the reader has read them. */
.mem-flash__dismiss {
  position: absolute;
  top: var(--mem-2);
  right: var(--mem-2);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--mem-r);
  background: transparent;
  color: var(--mem-ink-soft);
  font: inherit;
  font-size: var(--mem-text-md);
  line-height: 1;
  cursor: pointer;
}

.mem-flash__dismiss:hover,
.mem-flash__dismiss:focus-visible {
  background: var(--mem-surface);
  color: var(--mem-ink);
}

.mem-flash--success .mem-flash__text,
.mem-flash--info .mem-flash__text {
  padding-right: var(--mem-6);
}

/* A submit that is working says so and cannot be pressed twice. */
.mem-btn[aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
}

/* Help points open with the same short rise. */
.mem-help[open] .mem-help__points {
  animation: mem-rise 120ms var(--mem-ease) both;
}

/* ---------- the floor: targets and unbreakable tokens ---------------- */

/* Inline actions reach the 24 px target floor without changing their look;
   the primary buttons already stand at 40 px. */
.mem-actor__signout,
.mem-teambar__switch,
.mem-card__link,
.mem-card__scope,
.mem-foot__line a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

summary {
  min-height: 1.5rem;
  padding-block: 0.125rem;
}

/* A hash is seventy-one characters with no break opportunity: on a phone it
   is what pushed the receipt page to 536 px. It may break anywhere. */
.mem-main code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

@media (max-width: 60rem) {
  .mem-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the chrome must not precede the page by a screen: the brand
     row, the section strip and one utilities row, then the band — which
     already names the team, so the sidebar card stays off here. */
  .mem-sidebar {
    position: static;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mem-2) var(--mem-4);
    padding: var(--mem-3) var(--mem-4);
    border-right: 0;
    border-bottom: 1px solid var(--mem-line);
  }

  .mem-sidebar > .mem-brand,
  .mem-sidebar > nav,
  .mem-sidebar > .mem-actor {
    flex: 1 1 100%;
    /* A flex item's minimum is its content: the strip would otherwise widen
       the whole header to the length of every section name. */
    min-width: 0;
    max-width: 100%;
  }

  .mem-sideteam {
    display: none;
  }

  /* The strip scrolls sideways with a fade that says so, and snaps to an entry. */
  .mem-nav__list {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--mem-2);
    padding-bottom: var(--mem-1);
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }

  .mem-nav__list > li {
    scroll-snap-align: start;
  }

  .mem-nav__link {
    white-space: nowrap;
    padding: var(--mem-2) var(--mem-3);
  }

  .mem-nav__hint {
    display: none;
  }

  .mem-actor {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mem-1) var(--mem-3);
    margin-top: 0;
    padding: var(--mem-2) var(--mem-3);
  }

  .mem-actor__out {
    margin-top: 0;
    margin-left: auto;
  }

  .mem-lang {
    flex: 1 1 40%;
  }

  .mem-main {
    padding: var(--mem-5) var(--mem-4) var(--mem-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mem-body *,
  .mem-body *::before,
  .mem-body *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- print ---------------------------------------------------- */
/* A receipt gets printed and filed. What is chrome on screen is noise on
   paper, and a link whose target is invisible on paper is a citation with
   no source. */

@media print {
  .mem-sidebar,
  .mem-skip,
  .mem-flash,
  .mem-btn {
    display: none;
  }

  .mem-shell {
    display: block;
  }

  .mem-main {
    padding: 0;
  }

  .mem-help {
    border: 0;
    box-shadow: none;
  }

  .mem-help[open] .mem-help__summary::after {
    display: none;
  }
}

/* =====================================================================
   THE SCREENS
   ---------------------------------------------------------------------
   Everything above dresses the shell. This dresses what the shell holds:
   the queue, one proposal and its decision, the memories, the policy.

   The register is the one the directive asks for — bold-and-thin
   typographic contrast, copy that explains rather than labels — and the
   restraint below is deliberate. This is a compliance console: a reviewer
   reads a claim, checks its evidence and makes a decision that cannot be
   edited afterwards. Every visual choice here is spent on making the
   CLAIM the thing your eye lands on, and on making the irreversible
   actions look different from the reversible one.

   Three rules the rest of this section follows:

   1. Emphasis is carried by TYPE and SPACE, not by borders. A card that
      needs a stripe to be found is a card competing with its neighbours.
   2. Semantic colour is reserved for state — pending, approved, forgotten,
      drift — and never used decoratively. The accent is for the one action
      a page wants you to take, and pages that want none use no accent.
   3. What is irreversible looks irreversible. `forget` is the only red
      surface in the console, and it is red on the page that performs it.
   ===================================================================== */

/* ---------- the queue: a list of claims ----------------------------- */

.mem-queue,
.mem-results,
.mem-trace {
  display: grid;
  gap: var(--mem-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-card {
  display: grid;
  gap: var(--mem-3);
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
  box-shadow: var(--mem-shadow-1);
  transition: box-shadow var(--mem-calm) var(--mem-ease),
              border-color var(--mem-calm) var(--mem-ease);
}

.mem-card:hover {
  border-color: var(--mem-line-strong);
  box-shadow: var(--mem-shadow-2);
}

/* The detail page holds ONE card, so it does not compete and does not lift. */
.mem-card--full,
.mem-card--full:hover {
  box-shadow: var(--mem-shadow-1);
  border-color: var(--mem-line);
}

.mem-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2) var(--mem-3);
  align-items: baseline;
  justify-content: space-between;
}

/* Thin, wide, quiet — the address of the claim, not the claim. */
.mem-card__scope {
  color: var(--mem-ink-faint);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  word-break: break-all;
}

/* The claim itself: the one thing on the card set at reading size. A grid item, so a token with
   no break point (a hash, a JSON record) would widen the card past its edge: it wraps instead. */
.mem-card__content {
  margin: 0;
  min-width: 0;
  /* A memory's own text never reorders the page around it (ADR 0068 P1). */
  unicode-bidi: isolate;
  color: var(--mem-ink);
  font-size: var(--mem-text-md);
  line-height: var(--mem-lh);
  letter-spacing: var(--mem-track-tight);
  overflow-wrap: anywhere;
}

.mem-card__content--full {
  font-size: var(--mem-text-lg);
  font-weight: 450;
}

/* A memory whose text was forgotten. It stays in the list and reads as
   absent rather than as missing: the row is the record, and the record is
   the point. */
.mem-card__redacted {
  display: flex;
  gap: var(--mem-2);
  align-items: flex-start;
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text);
  font-style: italic;
  line-height: var(--mem-lh);
}

.mem-card__redacted-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
}

.mem-card--forgotten {
  background: var(--mem-surface-2);
  box-shadow: none;
}

.mem-card--forgotten:hover {
  box-shadow: none;
  border-color: var(--mem-line);
}

.mem-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mem-3);
  border-top: 1px solid var(--mem-line);
}

.mem-card__id {
  color: var(--mem-ink-faint);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  word-break: break-all;
}

/* When the memory was recorded. `mem-card__id`'s treatment, because it is the
   same kind of fact: machine-written, secondary, never the thing being read. */
.mem-card__when {
  color: var(--mem-ink-faint);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
}

/* Whether the chain checks out. It carries an icon, so it is a row and not a
   paragraph. */
.mem-card__receipt {
  display: flex;
  gap: var(--mem-2);
  align-items: baseline;
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
}

/* The door to the receipt. The underline is on hover rather than always, so a
   list of cards does not read as a list of links. */
.mem-card__link {
  display: inline-flex;
  gap: var(--mem-2);
  align-items: center;
  color: var(--mem-accent);
  font-size: var(--mem-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.mem-card__link:hover,
.mem-card__link:focus-visible {
  text-decoration: underline;
}

/* The two icons the card carries. `css_check` cannot see either — they reach
   the page through `icon()`'s class argument and never through a `class="`
   attribute, which its docblock declares — so they are checked by eye here and
   by nothing else. */
.mem-card__link-icon,
.mem-card__receipt-icon {
  flex: none;
  width: 1em;
  height: 1em;
}

/* ---------- tags and the evidence line ------------------------------ */

.mem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-tag {
  padding: 0.1rem var(--mem-2);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-sm);
  background: var(--mem-surface-2);
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
}

.mem-meta {
  display: grid;
  gap: var(--mem-3) var(--mem-5);
  grid-template-columns: repeat(auto-fit, minmax(9rem, auto));
  margin: 0;
  justify-content: start;
}

.mem-meta__pair {
  display: grid;
  gap: 0.1rem;
}

.mem-meta dt {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 500;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-meta dd {
  margin: 0;
  color: var(--mem-ink);
  font-size: var(--mem-text-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- the empty state, and the drift notice ------------------- */

/* The revoked keys, folded away and not thrown away. A `details` element and no
   script: the console works without JavaScript, and a disclosure that needed a click
   handler would be the first place that stopped being true. */
/* Screen 1 grows a second column when a receipt is open. A grid and a media query
   and no script: the panel is a page the server drew, so it survives a reload, a
   back button and a browser with JavaScript switched off — and on a narrow screen
   the two columns become two blocks in the order a reader wants them. */
/* The searches this browser remembers. Chips rather than a list: they are re-run
   by clicking, so they must look like something to press, and they must not push
   the results below the fold — which is why the card is dense and capped. */
/* The chain's two buttons. A row that wraps rather than a bar that overflows: on a
   phone the two land one under the other, which is what a reader paging through a
   register wants anyway. */
.mem-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-3);
  margin-top: var(--mem-5);
}

.mem-recent {
  display: grid;
  gap: var(--mem-2);
  margin-bottom: var(--mem-4);
  padding: var(--mem-4) var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
}

.mem-recent__title {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-recent__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-recent__item {
  display: inline-block;
  max-width: 22rem;
  padding: var(--mem-1) var(--mem-3);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-pill);
  font-size: var(--mem-text-sm);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mem-recent__item--current {
  border-color: var(--mem-accent);
  color: var(--mem-accent);
}

.mem-split {
  display: grid;
  gap: var(--mem-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .mem-split--with-side {
    /* `minmax(0, …)` and not `minmax(20rem, …)`: a floor on a grid track is a
       promise the container may not be able to keep, and when it cannot the track
       does not shrink — it pushes the page sideways. Measured on the real console:
       the panel ran past the right edge. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  }
}

.mem-split__main {
  display: grid;
  gap: var(--mem-4);
  min-width: 0;
}

.mem-split__side {
  display: grid;
  gap: var(--mem-3);
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
  min-width: 0;
}

/* A CHAIN IS MADE OF UNBREAKABLE STRINGS, and a narrow column has to break them
   anyway. `sha256:` and a memory id carry no space, so in a 28rem column they set
   their own width and the grid obeys — which is the second half of why the panel
   left the page. The full receipt screen has room and needs none of this; the panel
   is where the same markup meets a third of the width. */
.mem-split__side .mem-card,
.mem-split__side .mem-card__content,
.mem-split__side .mem-card__receipt,
.mem-split__side code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mem-side__head {
  display: flex;
  gap: var(--mem-3);
  align-items: baseline;
  justify-content: space-between;
}

.mem-side__title {
  margin: 0;
  font-size: var(--mem-text-md);
}

.mem-side__close {
  display: inline-flex;
  gap: var(--mem-2);
  align-items: center;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
}

.mem-side__close-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.mem-side__note {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  overflow-wrap: anywhere;
}

.mem-revoked {
  margin-top: var(--mem-6);
  padding: var(--mem-4) var(--mem-5);
  border: 1px dashed var(--mem-line);
  border-radius: var(--mem-r-lg);
}

.mem-revoked__summary {
  cursor: pointer;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-revoked__note {
  margin: var(--mem-3) 0 var(--mem-4);
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  line-height: 1.5;
}

.mem-empty {
  display: grid;
  gap: var(--mem-3);
  justify-items: center;
  padding: var(--mem-8) var(--mem-5);
  border: 1px dashed var(--mem-line-strong);
  border-radius: var(--mem-r-lg);
  text-align: center;
}

.mem-empty__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mem-ink-faint);
}

.mem-empty__title {
  margin: 0;
  font-family: var(--mem-font-display);
  font-size: var(--mem-text-lg);
  font-weight: 450;
  letter-spacing: var(--mem-track-tight);
}

.mem-empty__text {
  margin: 0;
  max-width: 46ch;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-sm);
  line-height: var(--mem-lh);
}

/* Drift is a statement about THIS PAGE's trustworthiness, so it sits above
   the content it qualifies rather than in the flash rail. */
.mem-drift {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  margin: 0 0 var(--mem-5);
  padding: var(--mem-4);
  border: 1px solid var(--mem-warn);
  border-radius: var(--mem-r);
  background: var(--mem-warn-soft);
  color: var(--mem-warn);
}

.mem-drift__icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.1em;
}

.mem-drift__body {
  display: grid;
  gap: var(--mem-1);
}

.mem-drift__title {
  margin: 0;
  font-size: var(--mem-text-sm);
  font-weight: 650;
}

.mem-drift__text {
  margin: 0;
  font-size: var(--mem-text-sm);
  line-height: var(--mem-lh);
}

/* ---------- deciding --------------------------------------------------
   The form a reviewer commits through. It is the densest surface in the
   console and the one where a mis-click is least recoverable, so the
   choices are large targets with their consequence written under them —
   the "copy that explains rather than labels" the directive asks for,
   applied where it costs something to get wrong.
   -------------------------------------------------------------------- */

.mem-decide,
.mem-form {
  display: grid;
  gap: var(--mem-5);
  margin-top: var(--mem-6);
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
}

.mem-decide__choices {
  display: grid;
  gap: var(--mem-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.mem-decide__legend {
  padding: 0;
  margin-bottom: var(--mem-3);
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  font-weight: 500;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-choice {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  padding: var(--mem-3) var(--mem-4);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r);
  cursor: pointer;
  transition: border-color var(--mem-quick) var(--mem-ease),
              background var(--mem-quick) var(--mem-ease);
}

.mem-choice:hover {
  border-color: var(--mem-line-strong);
  background: var(--mem-surface-2);
}

.mem-choice:has(.mem-choice__input:checked) {
  border-color: var(--mem-accent);
  background: var(--mem-accent-soft);
}

.mem-choice:has(.mem-choice__input:focus-visible) {
  outline: 2px solid var(--mem-accent);
  outline-offset: 2px;
}

.mem-choice__input {
  flex: none;
  margin-top: 0.25em;
  accent-color: var(--mem-accent);
}

.mem-choice__body {
  display: grid;
  gap: 0.1rem;
}

.mem-choice__label {
  font-size: var(--mem-text);
  font-weight: 600;
  letter-spacing: var(--mem-track-tight);
}

/* The consequence, in the reviewer's own language, under the choice that
   causes it. */
.mem-choice__hint {
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-sm);
  line-height: 1.45;
}

/* ---------- search ---------------------------------------------------- */

/* A bar, not a panel: label, input and button on one line, wrapping to a column
   when the layout collapses. `mem-decide`'s box would read as a form to fill
   in, and this is a control a reviewer types into and leaves. */
.mem-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2) var(--mem-3);
  align-items: end;
  margin-bottom: var(--mem-5);
}

.mem-search .mem-field__input {
  flex: 1 1 22ch;
}

/* ---------- fields ---------------------------------------------------- */

.mem-field {
  display: grid;
  gap: var(--mem-2);
}

.mem-field__label {
  font-size: var(--mem-text-sm);
  font-weight: 600;
  letter-spacing: var(--mem-track-tight);
}

.mem-field__input {
  width: 100%;
  padding: var(--mem-2) var(--mem-3);
  border: 1px solid var(--mem-line-strong);
  border-radius: var(--mem-r);
  background: var(--mem-surface);
  color: var(--mem-ink);
  font: inherit;
  font-size: var(--mem-text);
  transition: border-color var(--mem-quick) var(--mem-ease),
              box-shadow var(--mem-quick) var(--mem-ease);
}

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

.mem-field__input--area {
  min-height: 5rem;
  line-height: var(--mem-lh);
  resize: vertical;
}

/* The policy is TOML and is read as code: monospaced, and wide enough that
   a table does not wrap into nonsense. */
.mem-field__input--code {
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;
}

.mem-field__hint,
.mem-note {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
  line-height: 1.45;
}

/* The corrections to held memories, counted above the queue (ADR 0068 P4). */
.mem-queue__filter {
  margin-block: var(--mem-3);
}

/* What the reviewer needs beside a proposal (ADR 0068 P2). */
.mem-context {
  display: grid;
  gap: var(--mem-3);
  margin-top: var(--mem-5);
}
.mem-context__title {
  margin: 0;
  font-size: var(--mem-text-md);
}
.mem-context__subtitle {
  margin: 0;
  font-size: var(--mem-text);
}
.mem-context__list {
  display: grid;
  gap: var(--mem-2);
  margin: 0;
  padding-inline-start: var(--mem-4);
}
.mem-context__list--warn {
  list-style: none;
  padding-inline-start: 0;
}
.mem-context__item {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mem-context__icon {
  margin-inline-end: var(--mem-2);
  vertical-align: middle;
}
.mem-context__hash {
  display: block;
  color: var(--mem-ink-faint);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
}
.mem-context__map {
  margin: 0;
}

/* ---------- the commit row -------------------------------------------- */

.mem-decide__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-3) var(--mem-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mem-4);
  border-top: 1px solid var(--mem-line);
}

.mem-decide__warning {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
}

.mem-decide__warning--danger {
  display: flex;
  gap: var(--mem-2);
  align-items: center;
  color: var(--mem-danger);
  font-weight: 550;
}

.mem-btn--primary {
  border-color: transparent;
  background: var(--mem-accent);
  color: var(--mem-accent-ink);
}

.mem-btn--primary:hover {
  border-color: transparent;
  background: var(--mem-accent-hover);
  color: var(--mem-accent-ink);
}

/* `forget` is the only irreversible action in the console, and it is the
   only red button. Reserving the colour is what makes it mean something
   when it appears. */
.mem-btn--danger {
  border-color: transparent;
  background: var(--mem-danger);
  color: #fff;
}

.mem-btn--danger:hover {
  filter: brightness(0.92);
}

.mem-btn--danger-quiet {
  border-color: var(--mem-line-strong);
  background: transparent;
  color: var(--mem-danger);
}

.mem-btn--danger-quiet:hover {
  border-color: var(--mem-danger);
  background: var(--mem-danger-soft);
}

.mem-btn__icon {
  width: 1em;
  height: 1em;
}

/* The page that performs the redaction says so before you read the memory. */
.mem-card--danger {
  border-color: var(--mem-danger);
  background: var(--mem-danger-soft);
}

.mem-card--danger:hover {
  border-color: var(--mem-danger);
}

.mem-back {
  margin: var(--mem-5) 0 0;
}

/* ---------- the policy hash line --------------------------------------- */

.mem-hashline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-2) var(--mem-3);
  align-items: baseline;
  margin-top: var(--mem-5);
  padding-top: var(--mem-4);
  border-top: 1px solid var(--mem-line);
}

.mem-hashline__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-hashline__value {
  color: var(--mem-ink-soft);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  word-break: break-all;
}

/* ---------- the page wrapper ------------------------------------------- */

.mem-page {
  display: grid;
  gap: var(--mem-5);
}

/* ---------- narrow screens ---------------------------------------------
   A reviewer on a phone still decides, so the decision surface stays
   usable rather than being hidden behind a breakpoint.
   ---------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .mem-card,
  .mem-decide {
    padding: var(--mem-4);
  }

  .mem-decide__foot,
  .mem-card__foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .mem-decide__foot .mem-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mem-card,
  .mem-choice,
  .mem-field__input {
    transition: none;
  }
}

/* ---------- the auth shell ------------------------------------------- */
/* One centred panel on the canvas: the brand, the page, the privacy line
   and the two switchers. No navigation — the sidebar presupposes an actor,
   and this shell exists for the visitor who is not one yet. */

.mem-auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--mem-6) var(--mem-4);
  background: var(--mem-paper);
}

.mem-auth__panel {
  display: grid;
  gap: var(--mem-5);
  justify-items: center;
  width: 100%;
  max-width: 30rem;
  padding: var(--mem-7) var(--mem-6) var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
  text-align: center;
}

.mem-auth__language {
  justify-self: end;
}

.mem-auth__brand {
  padding: 0;
}

/* Centred, the two-line text block would leave the ring floating at its
   vertical middle; pinned to the first line it sits beside the name, the way
   it does in the wordmark everywhere else. */
.mem-auth__brand .mem-brand__mark {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.mem-auth__title {
  margin: 0;
  font-family: var(--mem-font-display);
  font-size: var(--mem-display);
  font-weight: 380;
  letter-spacing: -0.01em;
  line-height: var(--mem-lh-tight);
}

.mem-auth__panel:has(.mem-steps--start) {
  max-width: 40rem;
}

.mem-auth__lede {
  margin: 0;
  max-width: 44ch;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-md);
  font-weight: 300;
  line-height: 1.5;
}

/* A SUBMIT BUTTON IS CENTRED ON AN AUTH PAGE AND NOWHERE ELSE.
   `.mem-auth__panel` and `.mem-auth__body` are centred grids, so everything in
   that column lines up under the title — except `.mem-btn`, which sets
   `justify-self: start` for the review console's forms, where a button belongs
   at the left edge of its field. The result was that the same class landed
   centred when it stood alone (`/start`) and hard left the moment a form was in
   the way (`/invite`, `/mfa`, the enrolment and signup steps), which the owner
   read as buttons that were simply off. Scoped to `.mem-auth` so the review
   console keeps the alignment it wants. */
.mem-auth .mem-form .mem-btn {
  justify-self: center;
}

.mem-auth__body {
  display: grid;
  gap: var(--mem-4);
  justify-items: center;
  width: 100%;
}

/* Inside the panel the sign-in card is the centrepiece, not an empty state:
   the dashed border that signals absence elsewhere would read as one here. */
.mem-auth .mem-empty {
  padding: 0;
  border: 0;
}

.mem-auth .mem-flash {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.mem-auth__foot {
  display: grid;
  gap: var(--mem-3);
  justify-items: center;
  width: 100%;
  padding-top: var(--mem-4);
  border-top: 1px solid var(--mem-line);
}

/* The two-mode sign-in (ADR 0019 decision 6). These selectors reach a page
   only when the deployment holds more than one issuer configuration: with one,
   the classic single door renders instead and none of this applies. */
.mem-auth__modes {
  display: grid;
  gap: var(--mem-4);
  width: 100%;
}

.mem-auth__mode {
  display: grid;
  gap: var(--mem-3);
  justify-items: center;
  padding: var(--mem-4) var(--mem-4) var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r);
  background: var(--mem-surface);
}

.mem-auth__mode-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--mem-2);
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
  font-weight: 500;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-auth__tag {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-pill);
  color: var(--mem-accent);
  font-size: 0.6875rem;
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* One ceremony or the other, never both: the separator says so and says
   nothing else, which is why the markup hides it from the accessibility
   tree — a reader hears two labelled doors, not furniture between them. */
.mem-auth__or {
  margin: 0;
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
  text-align: center;
}

/* At 320 px the panel is narrower than a door's or a label's natural width: they shrink and
   wrap instead of pushing the page sideways. */
.mem-auth__modes > *,
.mem-auth__mode > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 26rem) {
  .mem-auth {
    padding-inline: var(--mem-2);
  }

  .mem-auth__panel {
    padding-inline: var(--mem-4);
  }

  .mem-auth__mode {
    padding-inline: var(--mem-3);
  }

  .mem-auth__door {
    padding-right: var(--mem-3);
  }
}

.mem-auth__door {
  position: relative;
  width: 100%;
  justify-content: center;
  padding-left: 3rem;
  padding-right: 3rem;
}

/* The provider's own mark, at the start of its button; the button's text stays its name. */
.mem-auth__door-mark {
  position: absolute;
  left: var(--mem-4);
  top: 50%;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
}

.mem-auth__door-mark svg {
  width: 100%;
  height: 100%;
}

/* A decorative drawing above the title, in a warm disc: ink follows the theme, the stroke
   marked as highlighter keeps the site's orange. */
.mem-auth__art {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--mem-accent-soft);
  color: var(--mem-ink);
  animation: mem-auth-art-in 0.6s cubic-bezier(0.14, 0.875, 0.33, 0.915);
}

.mem-auth__art svg {
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mem-auth__art-mark {
  stroke: var(--mem-mark);
  stroke-width: 2.5;
}

@keyframes mem-auth-art-in {
  from { opacity: 0; transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .mem-auth__art { animation: none; }
}

/* The live offer on the trial's front door, as a ticket: the same dashed highlighter as the site's. */
.mem-auth__offer {
  padding: var(--mem-3) var(--mem-4);
  border: 2px dashed var(--mem-mark);
  border-radius: var(--mem-r);
  background: var(--mem-accent-soft);
  color: var(--mem-ink);
}

.mem-auth__ready {
  display: inline-flex;
  gap: var(--mem-2);
  align-items: center;
  color: var(--mem-ink);
}

.mem-auth__ready-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--mem-ok);
}

/* ---------- the skills grid (ADR 0022) ------------------------------- */

/* Skill tiles, not a queue: the menu is a set of peers a customer scans and
   compares, and a grid says that where a list says "work through me". Tiles
   share the card sheet; the grid only decides how they sit together. */
.mem-skillgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--mem-4);
  margin: var(--mem-5) 0 0;
  padding: 0;
  list-style: none;
}

/* Rows pinned so the toggle sits level across neighbouring tiles: head,
   summary, record stretch, form last. */
.mem-skillcard {
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
}

.mem-skillcard__title {
  display: flex;
  align-items: center;
  gap: var(--mem-3);
  min-width: 0;
}

/* The glyph tile is decorative recognition, not information: the name beside
   it is the accessible truth, so the icon inside is aria-hidden already. */
.mem-skillcard__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--mem-r);
  background: var(--mem-accent-soft);
  color: var(--mem-accent);
}

.mem-skillcard__icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* What a reader should know before touching a toggle, gathered in one quiet
   box instead of three orphan notes the eye skips past the fold. */
.mem-skillnotes {
  display: grid;
  gap: var(--mem-3);
  margin-top: var(--mem-6);
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
}

.mem-skillnotes__title {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-skillnotes__item {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  margin: 0;
}

.mem-skillnotes__icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  color: var(--mem-ink-faint);
}

/* ---------- the overview dashboard (ADR 0024) ------------------------- */

.mem-ovgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--mem-4);
  margin-top: var(--mem-5);
}

.mem-ovcard {
  align-content: start;
}

.mem-ovcard__title {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

/* The one number a card leads with — the plan's name, a count. */
.mem-ovcard__big {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
  text-transform: capitalize;
}

/* The one clock a billing state carries: days of trial or of grace left. */
.mem-ovcard__count {
  margin: 0;
  font-size: var(--mem-text-md);
  font-weight: 550;
  line-height: var(--mem-lh);
  color: var(--mem-ink);
}

/* A ceiling and its consumption. The bar renders ONLY when a constant
   refuses (ADR 0024 decision 2); "per contract" is prose, not a full bar. */
.mem-meter {
  display: grid;
  gap: var(--mem-1);
}

.mem-meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mem-3);
}

.mem-meter__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-sm);
}

.mem-meter__figure {
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
}

/* One bar, drawn once, worn everywhere: meters, charts, the stack. SVG
   attributes carry the proportion because the CSP admits no inline style;
   the ANIMATION is generic — every fill grows from zero to its declared
   width — so no per-row rule ever needs to exist. */
.mem-bar {
  width: 100%;
  height: 0.4rem;
  display: block;
}

.mem-bar--stack {
  height: 0.55rem;
}

.mem-bar__track {
  fill: var(--mem-accent-soft);
}

.mem-bar__fill {
  fill: var(--mem-accent);
  transform-origin: left;
  animation: mem-grow 700ms var(--mem-ease) both;
}

.mem-bar__fill--soft {
  fill: var(--mem-ink-faint);
  opacity: 0.45;
}

.mem-bar__fill--danger {
  fill: var(--mem-danger);
}

/* A labelled row of bars: the chart the telemetry can honestly draw. */
.mem-chart {
  display: grid;
  gap: var(--mem-3);
}

.mem-chart__row {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--mem-1) var(--mem-3);
  align-items: center;
}

.mem-chart__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mem-chart__figure {
  grid-column: 2;
  font-family: var(--mem-mono);
  font-size: var(--mem-text-xs);
  color: var(--mem-ink-soft);
}

.mem-chart__errors {
  color: var(--mem-ink-faint);
}

/* The cards rise in as a wave; motion bows out when the reader asked it to. */
.mem-rise {
  animation: mem-rise 420ms var(--mem-ease) both;
}

.mem-rise--2 {
  animation-delay: 90ms;
}

.mem-rise--3 {
  animation-delay: 180ms;
}

@keyframes mem-rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mem-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mem-rise,
  .mem-bar__fill {
    animation: none;
  }
}

/* Four quiet figures to a card. */
.mem-ovstats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mem-3) var(--mem-4);
}

.mem-ovstat {
  display: grid;
  gap: 0.1rem;
}

.mem-ovstat__figure {
  font-size: 1.35rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.mem-ovstat__label {
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
}

/* The page's honesty box: not an invoice, not one instant. Mirrors the
   skills screen's notes box; a later sweep may unify the two families. */
.mem-notesbox {
  display: grid;
  gap: var(--mem-3);
  margin-top: var(--mem-6);
  padding: var(--mem-5);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
}

.mem-notesbox__title {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-xs);
  letter-spacing: var(--mem-track-wide);
  text-transform: uppercase;
}

.mem-notesbox__item {
  display: flex;
  gap: var(--mem-3);
  align-items: flex-start;
  margin: 0;
}

.mem-notesbox__icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  color: var(--mem-ink-faint);
}

/* The trial's front door (ADR 0032): three steps, stated before any is taken. */
.mem-steps {
  display: grid;
  gap: var(--mem-4);
  margin: 0 0 var(--mem-6);
  padding: 0;
  list-style: none;
  counter-reset: none;
  text-align: left;
}

.mem-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--mem-3);
  align-items: start;
}

/* The thread from one step to the next. */
.mem-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: calc(-1 * var(--mem-4) + 0.25rem);
  left: calc(1rem - 1px);
  width: 2px;
  background: var(--mem-line-strong);
}

.mem-steps__n {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--mem-ink);
  color: var(--mem-surface);
  font-family: var(--mem-mono);
  font-size: var(--mem-text-sm);
  font-weight: 600;
}

.mem-steps__text {
  margin: 0;
  color: var(--mem-ink-soft);
  font-size: var(--mem-text);
  line-height: var(--mem-lh);
}

/* A sentence under a sign-in page's body: the trial's caveat, the card step's explanation. */
.mem-auth__note {
  margin: 0 0 var(--mem-5);
  color: var(--mem-ink-soft);
  font-size: var(--mem-text-sm);
  line-height: var(--mem-lh);
}

/* The terms as the seam resolved them: the bytes the act records, readable in place. */
.mem-terms {
  margin: var(--mem-5) 0 var(--mem-4);
  border: 1px solid var(--mem-line);
  border-radius: var(--mem-r-lg);
  background: var(--mem-surface);
}

.mem-terms__label {
  margin: 0;
  padding: var(--mem-3) var(--mem-4);
  border-bottom: 1px solid var(--mem-line);
  color: var(--mem-ink-faint);
  font-size: var(--mem-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mem-terms__text {
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  padding: var(--mem-4);
  white-space: pre-wrap;
  color: var(--mem-ink);
  font-family: var(--mem-font);
  font-size: var(--mem-text-sm);
  line-height: var(--mem-lh);
}

/* Signup gives the organisation fields and the published terms room to read. */
.mem-auth__panel:has(.mem-signup) {
  max-width: 60rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.mem-signup {
  width: 100%;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.mem-signup .mem-form {
  min-width: 0;
  margin-top: var(--mem-4);
  padding: 0;
  border: 0;
  background: transparent;
  gap: var(--mem-6);
}

.mem-signup__fields {
  display: grid;
  gap: var(--mem-5);
}

.mem-signup__field {
  display: grid;
  align-content: start;
  gap: var(--mem-2);
  min-width: 0;
}

.mem-signup .mem-field__label,
.mem-signup .mem-field__hint {
  margin: 0;
}

.mem-signup .mem-terms {
  min-width: 0;
  margin: 0;
}

.mem-signup .mem-terms__label {
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: normal;
  font-size: var(--mem-text-sm);
  line-height: 1.5;
}

.mem-signup .mem-terms__text {
  max-height: 32rem;
  padding: clamp(1rem, 3vw, 2rem);
  font-size: var(--mem-text);
  line-height: 1.7;
  white-space: normal;
  overflow-wrap: break-word;
}

.mem-signup .mem-terms__text :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--mem-6) 0 var(--mem-3);
  font-family: var(--mem-font);
  font-size: var(--mem-text-lg);
  font-weight: 600;
  line-height: 1.35;
}

.mem-signup .mem-terms__text > :first-child { margin-top: 0; }
.mem-signup .mem-terms__text > :last-child { margin-bottom: 0; }
.mem-signup .mem-terms__text :is(p, ul, ol) { margin-bottom: var(--mem-4); }
.mem-signup .mem-terms__text :is(ul, ol) { padding-left: var(--mem-5); }
.mem-signup .mem-terms__text li + li { margin-top: var(--mem-2); }
.mem-signup .mem-terms__text a { color: var(--mem-accent); text-underline-offset: 0.2em; }
.mem-signup .mem-terms__text table { width: 100%; margin-block: var(--mem-4); font-size: var(--mem-text-sm); }
.mem-signup .mem-terms__text :is(th, td) {
  border: 1px solid var(--mem-line);
  padding: var(--mem-2);
  vertical-align: top;
}
.mem-signup .mem-terms__text th {
  background: var(--mem-surface-2);
  font-weight: 600;
}

.mem-signup .mem-terms__text:focus-visible,
.mem-signup .mem-terms__text .table-responsive:focus-visible {
  outline: 2px solid var(--mem-accent);
  outline-offset: -2px;
}

.mem-signup .mem-btn {
  justify-self: center;
}

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

/* The map and its equivalent list share selection and recorded connections. */
.mem-main:has(#provenance-map) .mem-pagehead { margin-bottom: var(--mem-5); }
#provenance-map { min-width: 0; overflow-wrap: anywhere; }
#provenance-map a, #provenance-preview a:not(.mem-btn) { color: var(--mem-accent); text-underline-offset: 0.2em; }
#provenance-map a:hover, #provenance-preview a:not(.mem-btn):hover { color: var(--mem-accent-hover); }
#provenance-map .mem-btn { background: var(--mem-surface); border-color: var(--mem-line-strong); color: var(--mem-ink); }
#provenance-map .mem-btn:hover { border-color: var(--mem-accent); background: var(--mem-accent-soft); color: var(--mem-accent); }
#provenance-map .mem-btn--primary { background: var(--mem-accent); border-color: var(--mem-accent); color: var(--mem-accent-ink); }
#provenance-map .mem-btn--primary:hover { background: var(--mem-accent-hover); color: var(--mem-accent-ink); }
.mem-map-start { border: 1px solid var(--mem-line); background: var(--mem-surface); padding: var(--mem-5); margin-bottom: var(--mem-6); }
.mem-map-heading { display: flex; align-items: start; gap: var(--mem-3); margin-bottom: var(--mem-4); }
.mem-map-heading > div { min-width: 0; }
.mem-map-heading h2, .mem-map-list h2, .mem-map-activity h2 { font-size: var(--mem-text-lg); margin: 0 0 var(--mem-2); }
.mem-map-heading p { color: var(--mem-ink-soft); font-size: var(--mem-text-sm); margin: 0; max-width: 72ch; }
.mem-map-step { color: var(--mem-accent); font: 500 var(--mem-text-sm) var(--mem-mono); padding-top: var(--mem-1); }
.mem-map-filters { display: flex; flex-wrap: wrap; gap: var(--mem-3); align-items: end; padding-bottom: var(--mem-4); }
.mem-map-filters > div { flex: 1 1 130px; min-width: 0; }
.mem-map-filters > div:first-of-type { flex-grow: 2; }
.mem-map-filters > .mem-btn { align-self: flex-end; }
.mem-map-results { border-top: 1px solid var(--mem-line); padding-top: var(--mem-4); }
.mem-map-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mem-2); list-style: none; margin: 0 0 var(--mem-3); padding: var(--mem-1); max-height: 9rem; overflow: auto; }
.mem-map-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mem-1) var(--mem-3); width: 100%; height: 100%; padding: var(--mem-3); border: 1px solid var(--mem-line); background: var(--mem-surface); color: var(--mem-ink); text-align: left; font: inherit; border-radius: var(--mem-r); }
.mem-map-choice:hover, .mem-map-choice[aria-current="true"] { background: var(--mem-accent-soft); border-color: var(--mem-accent); }
.mem-map-choice__text { font-size: var(--mem-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-map-choice__meta { grid-column: 1; color: var(--mem-ink-soft); font-size: var(--mem-text-xs); }
.mem-map-choice__open { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--mem-accent); font-size: var(--mem-text-sm); }
.mem-map-jumps { display: flex; gap: var(--mem-4); flex-wrap: wrap; margin-left: auto; flex-shrink: 0; font-size: var(--mem-text-sm); }
.mem-map-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--mem-5); align-items: start; }
.mem-map-visual { min-width: 0; }
.mem-map-toolbar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mem-2); padding: var(--mem-2); border: 1px solid var(--mem-line); border-bottom: 0; background: var(--mem-surface); }
.mem-map-toolbar > span { margin-right: auto; color: var(--mem-ink-faint); font-size: var(--mem-text-xs); }
.mem-map-svg[data-interactive="true"] { touch-action: none; cursor: grab; min-width: 0; height: 430px; }
.mem-map-svg[data-interactive="true"] .mem-map-node { cursor: grab; }
.mem-map-svg[data-interactive="true"]:active { cursor: grabbing; }
.mem-map-canvas { overflow: auto; max-height: 640px; border: 1px solid var(--mem-line); background-color: var(--mem-surface-2); background-image: radial-gradient(var(--mem-line) 1px, transparent 1px); background-size: 20px 20px; }
.mem-map-svg { display: block; width: 100%; min-width: 640px; height: auto; }
.mem-map-node { cursor: pointer; }
.mem-map-node rect { fill: var(--mem-surface); stroke: var(--mem-line-strong); transition: fill 120ms ease; }
.mem-map-node text { fill: var(--mem-ink); font-size: 16px; pointer-events: none; }
.mem-map-node .mem-map-state { fill: var(--mem-ink-soft); font-size: 13px; }
.mem-map-node[data-selected="true"] rect, .mem-map-node:focus rect { stroke: var(--mem-accent); stroke-width: 2; fill: var(--mem-accent-soft); }
.mem-map-edge { stroke: var(--mem-ink-faint); stroke-width: 1; }
.mem-map-arrow { fill: var(--mem-ink-faint); }
.mem-map-legend { padding: var(--mem-3) 0; color: var(--mem-ink-soft); font-size: var(--mem-text-sm); }
.mem-map-legend summary { color: var(--mem-accent); cursor: pointer; }
.mem-map-legend dl { display: grid; grid-template-columns: minmax(100px, 1fr) 3fr; gap: var(--mem-2) var(--mem-3); margin-top: var(--mem-3); }
.mem-map-legend dd { margin: 0; }
.mem-map-detail { align-self: start; position: sticky; top: var(--mem-4); padding: var(--mem-5); gap: var(--mem-3); }
.mem-map-detail h2 { font-size: var(--mem-text-md); margin: 0; }
.mem-map-detail h3 { font-size: var(--mem-text); margin: var(--mem-2) 0 0; }
.mem-map-detail p, .mem-map-detail ul { margin: 0; }
.mem-map-detail__kind { display: flex; flex-wrap: wrap; gap: var(--mem-2); align-items: center; color: var(--mem-accent); font-size: var(--mem-text-xs); }
.mem-map-detail__kind span { border: 1px solid var(--mem-line); padding: var(--mem-1) var(--mem-2); border-radius: var(--mem-r-pill); color: var(--mem-ink-soft); }
.mem-map-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mem-2) var(--mem-3); font-size: var(--mem-text-sm); margin: 0; padding-block: var(--mem-3); border-block: 1px solid var(--mem-line); }
.mem-map-facts dt { font-weight: 500; color: var(--mem-ink-faint); }
.mem-map-facts dd { margin: 0; }
.mem-map-detail__actions { display: flex; flex-wrap: wrap; gap: var(--mem-2); }
.mem-map-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.mem-map-source { display: block; overflow-wrap: anywhere; font-size: var(--mem-text-xs); }
.mem-map-list { margin-block: var(--mem-6); }
.mem-map-rows { margin: var(--mem-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mem-line); }
.mem-map-rows > li { padding: var(--mem-4); border-bottom: 1px solid var(--mem-line); background: var(--mem-surface); }
.mem-map-row__kind { font-size: var(--mem-text-xs); color: var(--mem-ink-faint); margin: 0 0 var(--mem-2); }
.mem-map-select { color: var(--mem-accent); font: inherit; background: transparent; border: 0; padding: var(--mem-1) 0; text-align: left; text-decoration: underline; text-underline-offset: 0.2em; }
.mem-map-select:hover { color: var(--mem-accent-hover); }
.mem-map-select[aria-current="true"] { color: var(--mem-ink); font-weight: 600; }
.mem-map-connections { list-style: none; padding: 0 0 0 var(--mem-4); margin-top: var(--mem-3); border-left: 2px solid var(--mem-line); color: var(--mem-ink-soft); font-size: var(--mem-text-sm); }
.mem-map-connections > li + li { margin-top: var(--mem-3); }
.mem-map-activity { border-top: 1px solid var(--mem-line); padding-top: var(--mem-5); font-size: var(--mem-text-sm); }
.mem-map-activity > ul { padding-left: var(--mem-4); margin-block: var(--mem-4); }
.mem-map-activity li { padding-block: var(--mem-1); }
.mem-map-truth { border-top: 1px solid var(--mem-line); margin: var(--mem-5) 0 0; padding-top: var(--mem-4); color: var(--mem-ink-faint); font-size: var(--mem-text-xs); max-width: 100ch; }
@media (max-width: 900px) {
    .mem-map-workspace { grid-template-columns: 1fr; }
    .mem-map-detail { position: static; }
    .mem-map-canvas { max-height: 380px; }
    .mem-map-heading { flex-wrap: wrap; }
    .mem-map-jumps { margin-left: 0; }
}
@media (max-width: 600px) {
    .mem-map-start { padding: var(--mem-4); }
    .mem-map-choices { grid-template-columns: 1fr; }
    .mem-map-detail { padding: var(--mem-4); }
    .mem-map-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .mem-map-svg[data-interactive="true"] { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
    .mem-map-node rect { transition: none; }
}
.mem-map-preview { margin-top: var(--mem-6); }
.mem-map-preview > nav { display: flex; flex-wrap: wrap; gap: var(--mem-2); }
.mem-map-mini { display: block; width: 100%; height: auto; }

/* Scope discovery shares one editable control across the memory workflow. */
.mem-scope-field { position: relative; min-width: 0; width: 100%; }
.mem-scope-input { display: flex; align-items: stretch; position: relative; }
.mem-scope-input .mem-field__input { width: 100%; padding-right: 3rem; }
.mem-scope-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2.75rem; border: 0; background: transparent; color: var(--mem-accent-hover); font-size: var(--mem-text-lg); }
.mem-scope-toggle:hover { background: var(--mem-accent-soft); }
.mem-scope-toggle:focus-visible { outline: 2px solid var(--mem-accent); outline-offset: -3px; }
.mem-scope-menu { position: absolute; top: 4.4rem; left: 0; right: 0; z-index: 20; border: 1px solid var(--mem-line-strong); background: var(--mem-surface); box-shadow: 0 12px 28px rgb(0 0 0 / 12%); }
.mem-scope-menu__title { margin: 0; padding: var(--mem-3); color: var(--mem-ink-soft); font-size: var(--mem-text-xs); background: var(--mem-surface-2); }
.mem-scope-options { margin: 0; padding: var(--mem-1); list-style: none; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.mem-scope-options > li { padding: var(--mem-3); cursor: pointer; overflow-wrap: anywhere; color: var(--mem-ink); border-bottom: 1px solid var(--mem-line); font-size: var(--mem-text-sm); }
.mem-scope-options > li:last-child { border-bottom: 0; }
.mem-scope-options > li:hover, .mem-scope-options > li[aria-selected="true"] { background: var(--mem-accent-soft); color: var(--mem-accent); }
.mem-scope-status { margin: var(--mem-1) 0 0; color: var(--mem-ink-soft); font-size: var(--mem-text-xs); }
.mem-scope-status:empty { display: none; }
.mem-scope-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--mem-4); padding: var(--mem-4); margin: 0 0 var(--mem-5); background: var(--mem-surface); border: 1px solid var(--mem-line); border-left: 3px solid var(--mem-accent); }
.mem-scope-context > div { min-width: 0; }
.mem-scope-context strong, .mem-receipt-scope strong { display: block; font-size: var(--mem-text-md); overflow-wrap: anywhere; }
.mem-scope-context__label { display: block; color: var(--mem-ink-soft); font-size: var(--mem-text-xs); margin-bottom: var(--mem-1); }
.mem-scope-context__actions { display: flex; flex-wrap: wrap; gap: var(--mem-2); }
.mem-scope-context__actions .mem-btn { min-height: 2.25rem; padding: var(--mem-2) var(--mem-3); font-size: var(--mem-text-sm); }
.mem-history-filter { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--mem-3); margin-bottom: var(--mem-5); }
.mem-history-filter .mem-scope-field { flex: 1 1 18rem; max-width: 32rem; }
.mem-history-filter > .mem-btn { margin-top: 1.8rem; }
.mem-search--scoped { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
.mem-search--scoped > label, .mem-search--scoped > input { grid-column: 1 / -1; }
.mem-search--scoped > .mem-btn { margin-top: 1.8rem; }
.mem-receipt-scope { margin-block: var(--mem-4); padding: var(--mem-4); border: 1px solid var(--mem-line); background: var(--mem-surface-2); }
.mem-receipt-scope .mem-card__link { margin-top: var(--mem-3); }
.mem-form-section { margin: var(--mem-5) 0 var(--mem-2); font-size: var(--mem-text-lg); }
.mem-form-section:first-child { margin-top: 0; }
.mem-form-options { border-top: 1px solid var(--mem-line); padding-block: var(--mem-4); }
.mem-form-options summary { color: var(--mem-accent); cursor: pointer; margin-bottom: var(--mem-3); }
@media (max-width: 600px) {
  .mem-search--scoped { grid-template-columns: 1fr; }
  .mem-search--scoped > .mem-btn, .mem-history-filter > .mem-btn { margin-top: 0; }
  .mem-scope-menu { max-width: 100%; }
}

/* Skill exploration keeps every activation form available without scripting. */
.mem-skillexplorer__heading, .mem-skillexplorer__controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--mem-4); margin-block: var(--mem-5); }
.mem-skillexplorer__controls[hidden], .mem-skillcard[hidden] { display: none; }
.mem-skillexplorer__controls label { display: grid; gap: var(--mem-2); font-size: var(--mem-text-sm); }
.mem-skillexplorer__controls label:first-child { flex: 1 1 18rem; }
.mem-skillexplorer__controls input, .mem-skillexplorer__controls select { width: 100%; min-height: 2.75rem; }
.mem-skillgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.mem-skillexplorer { min-width: 0; }
.mem-skillcard { display: flex; flex-direction: column; border-radius: 16px; border-top: 3px solid var(--mem-line-strong); padding: var(--mem-5); }
.mem-skillcard[data-skill-state="on"] { border-top-color: var(--mem-ok); }
.mem-skillcard__summary { font-size: var(--mem-text-md); line-height: var(--mem-lh); }
.mem-skillcard__outcome { padding: var(--mem-4); background: var(--mem-surface-2); border-radius: 10px; color: var(--mem-ink-soft); }
.mem-skillcard__outcome strong { color: var(--mem-ink); font-size: var(--mem-text-sm); }
.mem-skillcard__example summary { cursor: pointer; color: var(--mem-accent); padding-block: var(--mem-2); }
.mem-skillcard__example blockquote { margin: var(--mem-3) 0; padding-inline-start: var(--mem-3); border-inline-start: 2px solid var(--mem-line-strong); }
.mem-skillcard .mem-meta { margin-block-start: auto; padding-block-start: var(--mem-4); }
.mem-skillcard .mem-btn { width: auto; min-width: 6rem; justify-content: center; text-align: center; }
.mem-skillcard .mem-form { align-items: start; width: 100%; padding: 0; border: 0; background: transparent; }

/* JEV: evidence, bounded suggestion and observable activity. */
.mem-jev { border:1px solid var(--mem-line); background:var(--mem-surface); }
.mem-jev__context { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:24px; background:var(--mem-surface-2); }
.mem-jev__controls { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.mem-jev__controls .mem-field__input { width:auto; max-width:240px; }
.mem-jev__status { padding:14px 24px; margin:0; border-block:1px solid var(--mem-line); font-family:var(--mem-mono); font-size:12px; }
.mem-jev__workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.8fr); }
.mem-jev__sources, .mem-jev__decision, .mem-jev__activity { min-width:0; padding:24px; }
.mem-jev__sources, .mem-jev__decision { border-right:1px solid var(--mem-line); }
.mem-jev__decision { background:var(--mem-accent-soft); border-top:var(--mem-1) solid var(--mem-accent); }
.mem-jev__workspace h2 { font-size:18px; margin:0 0 16px; }
.mem-jev__decision h2 { color:var(--mem-ink); font:500 clamp(25px,3vw,40px)/1.15 var(--mem-font-display); letter-spacing:-.7px; }
.mem-jev__decision .mem-note { color:var(--mem-ink-soft); }
.mem-jev__decision form { border-top:1px solid var(--mem-accent); padding-top:var(--mem-5); }
.mem-jev__decision .mem-field__input { border-color:var(--mem-ink-faint); }
.mem-jev__decision .mem-field__input:focus { border-color:var(--mem-accent); }
.mem-jev__decision .mem-btn { margin-block:var(--mem-3); border-color:var(--mem-accent); color:var(--mem-accent); }
.mem-jev__decision .mem-btn:hover { background:var(--mem-accent); color:var(--mem-accent-ink); }

/* ADR 0062: the JEV-MEM box beside a proposal. The info hue, not the accent and not a status
   colour: it is a note from JEV-MEM, not a warning and not the product's call to action. */
.mem-jev-box { margin:var(--mem-3) 0; padding:var(--mem-3) var(--mem-4); border:1px solid var(--mem-line); border-left:var(--mem-1) solid var(--mem-info); background:var(--mem-info-soft); color:var(--mem-ink); }
.mem-jev-box--preparing { display:flex; align-items:center; gap:var(--mem-2); color:var(--mem-ink-soft); font-size:var(--mem-text-sm); }
.mem-jev-box__icon { width:1em; height:1em; margin-right:var(--mem-2); vertical-align:-0.125em; color:var(--mem-info); }
.mem-jev-box__title { margin:0 0 var(--mem-2); font-size:var(--mem-text-xs); letter-spacing:var(--mem-track-wide); text-transform:uppercase; color:var(--mem-info); }
.mem-jev-box__sentence { margin:0 0 var(--mem-2); font-weight:600; }
.mem-jev-box__asker { margin:0 0 var(--mem-2); font-size:var(--mem-text-xs); color:var(--mem-ink-faint); }
.mem-jev-box__sources { margin:0 0 var(--mem-2); padding:0; list-style:none; }
.mem-jev-box__source { display:flex; flex-direction:column; gap:var(--mem-1); padding:var(--mem-2) 0; border-top:1px solid var(--mem-line); }
.mem-jev-box__quote { overflow-wrap:anywhere; }
.mem-jev-box__id { font-family:var(--mem-mono); font-size:var(--mem-text-xs); color:var(--mem-ink-faint); overflow-wrap:anywhere; }
.mem-jev-box__yours { margin:0 0 var(--mem-2); font-size:var(--mem-text-sm); color:var(--mem-ink-soft); }
.mem-jev-box__dismiss { margin:0; }
.mem-jev__eyebrow { color:var(--mem-accent-hover); font:600 11px var(--mem-mono); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:20px; }
.mem-jev__source { border:1px solid var(--mem-line); border-left:3px solid var(--mem-accent); padding:14px; margin-top:12px; overflow-wrap:anywhere; }
.mem-jev__source small { font:11px var(--mem-mono); color:var(--mem-ink-soft); }
.mem-jev__source p { white-space:pre-wrap; font-size:13px; margin:10px 0; }
.mem-jev__source a { font-size:12px; }
.mem-jev__alternatives { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; }
.mem-jev__alternatives span { font-size:var(--mem-text-xs); border:1px solid var(--mem-line-strong); border-radius:4px; padding:5px 8px; background:var(--mem-surface); color:var(--mem-ink); }
.mem-jev__activity ol { padding-left:18px; font:12px/1.8 var(--mem-mono); color:var(--mem-ink-soft); }
.mem-jev__stats { display:grid; grid-template-columns:repeat(4,1fr); margin:0; border-top:1px solid var(--mem-line); }
.mem-jev__stats div { padding:18px 24px; }
.mem-jev__stats dt { font:10px var(--mem-mono); color:var(--mem-ink-soft); text-transform:uppercase; }
.mem-jev__stats dd { margin:5px 0 0; font:22px var(--mem-font-display); }
.mem-jev__receipt { white-space:pre-wrap; overflow-wrap:anywhere; font:12px var(--mem-mono); padding:14px; border:1px solid var(--mem-line); }
.mem-jev__receipt a { color:var(--mem-accent-hover); }
/* ADR 0063: the decision trace on the JEV page and the verified decision card on review pages. */
.mem-jev__trace { border-top:1px solid var(--mem-accent); margin-top:var(--mem-5); padding-top:var(--mem-4); }
.mem-jev__trace h3 { font-size:15px; margin:0 0 6px; }
.mem-jev__trace h4 { font:600 12px var(--mem-mono); text-transform:uppercase; letter-spacing:1px; margin:16px 0 4px; }
.mem-jev__trace ul { margin:6px 0; padding-left:18px; }
.mem-jev-decision { border:1px solid var(--mem-line); border-left:3px solid var(--mem-accent); background:var(--mem-accent-soft); padding:14px 16px; margin-block:10px; overflow-wrap:anywhere; }
.mem-jev-decision__title { display:flex; align-items:center; gap:8px; font:600 12px var(--mem-mono); text-transform:uppercase; letter-spacing:1px; margin:0 0 8px; }
.mem-jev-decision__icon { width:16px; height:16px; flex:none; }
.mem-jev-decision__step { margin:0 0 10px; }
.mem-jev-decision__label { color:var(--mem-ink-soft); }
.mem-jev-decision__heading { font-size:14px; margin:14px 0 4px; }
.mem-jev-decision__sources, .mem-jev-decision__lines { margin:6px 0; padding-left:18px; }
.mem-jev-decision__source { margin-bottom:6px; }
.mem-jev-decision__quote { display:block; }
.mem-jev-decision__quote--gone { color:var(--mem-ink-soft); font-style:italic; }
.mem-jev-decision__receipt { font:11px var(--mem-mono); color:var(--mem-accent-hover); }
.mem-jev-decision__event { font:11px var(--mem-mono); color:var(--mem-ink-soft); margin-left:6px; }
.mem-jev-decision__line, .mem-jev-decision__unavailable { margin:8px 0; }
.mem-jev-decision__note { margin:6px 0; padding:8px 12px; border-left:3px solid var(--mem-ink-faint); background:var(--mem-surface); white-space:pre-wrap; }
.mem-jev-decision__advisory { margin-top:12px; }
/* A decisions/jev item without a card (ADR 0063 D5): a list folds its record in the card, the
   proposal's page shows it open, and wherever it shows it is small and wraps. */
.mem-jev-record { min-width:0; color:var(--mem-ink-soft); font-size:var(--mem-text-sm); }
.mem-jev-record__summary { cursor:pointer; }
.mem-jev-record__raw { font-family:var(--mem-mono); font-size:var(--mem-text-xs); color:var(--mem-ink-soft); white-space:pre-wrap; }
.mem-jev-plain { margin-top:4px; }
@media (max-width:1100px) { .mem-jev__workspace { grid-template-columns:1fr 1.3fr; } .mem-jev__activity { grid-column:1/-1; border-top:1px solid var(--mem-line); } .mem-jev__decision { border-right:0; } }
@media (max-width:700px) { .mem-jev__context, .mem-jev__workspace { grid-template-columns:1fr; } .mem-jev__sources { border-right:0; border-bottom:1px solid var(--mem-line); } .mem-jev__stats { grid-template-columns:1fr 1fr; } .mem-jev__controls .mem-field__input { max-width:100%; } }