/* Minerva OS dashboard (proposal 016). After the user's reference, Steadman brand. Light, dark or the system's
   setting: light tokens on :root, dark ones for prefers-color-scheme (unless data-theme="light") and data-theme="dark".
   Both chart palettes were validated (dataviz validator: light on #ffffff, dark on #141416). */
:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --panel: rgba(255, 255, 255, 0.88);
  --line: #e3e6eb;
  --line2: #d3d7de;
  --strong: #b3b9c4;
  --ink: #16181d;
  --ink2: #3d424c;
  --muted: #666c78;
  --nav-h: #8a8f99;
  --fill1: #eef0f3;
  --fill2: #e3e6eb;
  --hover: rgba(16, 24, 40, 0.035);
  --search: #ffffff;
  --kbd: #e9ebef;
  --body-bg:
    radial-gradient(1200px 700px at 72% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #f7f8fa 0%, #eef0f3 70%);
  --side-bg: linear-gradient(180deg, #ffffff, #f7f8fa);
  --nav-on: linear-gradient(180deg, #ffffff, #f1f3f6);
  --top-line: rgba(16, 24, 40, 0.06);
  --add-bg: rgba(255, 255, 255, 0.6);
  --ring: #ffffff;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --s1: #3f63b8;
  --s2: #b8671a;
  --s3: #7a4bb0;
  --s4: #2f7d52;
  --hi: #d98a38;
  --surface: #ffffff;
  --grid: #e3e6eb;
  --grid-v: #f0f2f5;
  --callout: #ffffff;
  --track: #f0f2f5;
  --track-line: #e1e4e9;
  --bar: #a3a9b4;
  --ribbon: #9aa1ad;
  --node: #f4f5f7;
  --node-draft: #fbeedd;
  --node-owned: #e2f1e8;
  --node-checked: #e3e9f7;
  --node-rejected: #f8e3e3;
  --good: #1f7a45;
  --good-bg: #e3f3e9;
  --warn: #95560b;
  --warn-bg: #fdf0dc;
  --bad: #b42318;
  --bad-bg: #fde8e7;
  --info: #2f55a8;
  --info-bg: #e5ecfb;
  --l0: #eef0f3;
  --l1: #cfdaf3;
  --l2: #93aee6;
  --l3: #5577c9;
  --l4: #2c4a99;
  --wm: 0.07;
  --logo-dark: none;
  --logo-light: block;
  --brand: #eea352;
  --brand-ink: #1d1206;
  --blue: #5676b7;
  --purple: #662d91;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09090a;
    --panel: rgba(22, 22, 25, 0.82);
    --line: #2a2a30;
    --line2: #3a3a42;
    --strong: #55555f;
    --ink: #f4f4f6;
    --ink2: #c9c9d1;
    --muted: #8d8d98;
    --nav-h: #6e6e78;
    --fill1: #202025;
    --fill2: #2a2a2f;
    --hover: rgba(255, 255, 255, 0.03);
    --search: rgba(40, 40, 45, 0.8);
    --kbd: #35353b;
    --body-bg:
      radial-gradient(1200px 700px at 72% -10%, #2b2b30 0%, rgba(20, 20, 22, 0) 60%),
      linear-gradient(180deg, #121214 0%, #09090a 70%);
    --side-bg: linear-gradient(180deg, rgba(28, 28, 31, 0.92), rgba(12, 12, 13, 0.94));
    --nav-on: linear-gradient(180deg, #2a2a2f, #1f1f23);
    --top-line: rgba(255, 255, 255, 0.04);
    --add-bg: rgba(18, 18, 20, 0.55);
    --ring: #2d2d33;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 30px rgba(0, 0, 0, 0.25);
    --s1: #6a8ad4;
    --s2: #c8802f;
    --s3: #9466c6;
    --s4: #4c9d6e;
    --hi: #eea352;
    --surface: #141416;
    --grid: #2a2a30;
    --grid-v: #202025;
    --callout: #232328;
    --track: #1e1e22;
    --track-line: #2c2c32;
    --bar: #5b5b66;
    --ribbon: #6b6b76;
    --node: #232328;
    --node-draft: #3a2710;
    --node-owned: #15291d;
    --node-checked: #1b2440;
    --node-rejected: #2c1718;
    --good: #5fbf86;
    --good-bg: rgba(76, 157, 110, 0.16);
    --warn: #eeb062;
    --warn-bg: rgba(200, 128, 47, 0.16);
    --bad: #f07b7b;
    --bad-bg: rgba(229, 72, 77, 0.15);
    --info: #9fb4ea;
    --info-bg: rgba(106, 138, 212, 0.16);
    --l0: #1d1d21;
    --l1: #2a3558;
    --l2: #3b5192;
    --l3: #6a8ad4;
    --l4: #c3d1f4;
    --wm: 0.1;
    --logo-dark: block;
    --logo-light: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090a;
  --panel: rgba(22, 22, 25, 0.82);
  --line: #2a2a30;
  --line2: #3a3a42;
  --strong: #55555f;
  --ink: #f4f4f6;
  --ink2: #c9c9d1;
  --muted: #8d8d98;
  --nav-h: #6e6e78;
  --fill1: #202025;
  --fill2: #2a2a2f;
  --hover: rgba(255, 255, 255, 0.03);
  --search: rgba(40, 40, 45, 0.8);
  --kbd: #35353b;
  --body-bg:
    radial-gradient(1200px 700px at 72% -10%, #2b2b30 0%, rgba(20, 20, 22, 0) 60%),
    linear-gradient(180deg, #121214 0%, #09090a 70%);
  --side-bg: linear-gradient(180deg, rgba(28, 28, 31, 0.92), rgba(12, 12, 13, 0.94));
  --nav-on: linear-gradient(180deg, #2a2a2f, #1f1f23);
  --top-line: rgba(255, 255, 255, 0.04);
  --add-bg: rgba(18, 18, 20, 0.55);
  --ring: #2d2d33;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 30px rgba(0, 0, 0, 0.25);
  --s1: #6a8ad4;
  --s2: #c8802f;
  --s3: #9466c6;
  --s4: #4c9d6e;
  --hi: #eea352;
  --surface: #141416;
  --grid: #2a2a30;
  --grid-v: #202025;
  --callout: #232328;
  --track: #1e1e22;
  --track-line: #2c2c32;
  --bar: #5b5b66;
  --ribbon: #6b6b76;
  --node: #232328;
  --node-draft: #3a2710;
  --node-owned: #15291d;
  --node-checked: #1b2440;
  --node-rejected: #2c1718;
  --good: #5fbf86;
  --good-bg: rgba(76, 157, 110, 0.16);
  --warn: #eeb062;
  --warn-bg: rgba(200, 128, 47, 0.16);
  --bad: #f07b7b;
  --bad-bg: rgba(229, 72, 77, 0.15);
  --info: #9fb4ea;
  --info-bg: rgba(106, 138, 212, 0.16);
  --l0: #1d1d21;
  --l1: #2a3558;
  --l2: #3b5192;
  --l3: #6a8ad4;
  --l4: #c3d1f4;
  --wm: 0.1;
  --logo-dark: block;
  --logo-light: none;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  /* No rubber-band bounce at the ends of the page: it moved the sticky sidebar, so its bottom icons wiggled and
     settled whenever a scroll hit the bottom */
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font:
    14px/1.5 "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  background: var(--body-bg);
  background-attachment: fixed;
}
a {
  color: var(--info);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
code {
  font:
    12px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  background: var(--fill1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
}

/* the Steadman mark behind everything */
.watermark {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: min(62vw, 860px);
  aspect-ratio: 1;
  right: -6vw;
  bottom: -14vh;
  background: url(/static/mark.png) no-repeat center/contain;
  opacity: var(--wm);
  filter: saturate(1.1);
}
.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
}

/* sidebar */
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  background: var(--side-bg);
  border-right: 1px solid var(--line);
}
.brand {
  display: block;
  padding: 2px 6px;
}
.brand img {
  width: 100%;
  max-width: 196px;
  height: auto;
}
.brand .on-dark {
  display: var(--logo-dark);
}
.brand .on-light {
  display: var(--logo-light);
}
.os {
  margin: 8px 8px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-h {
  margin: 18px 10px 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-h);
}
.nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 10px;
  color: var(--ink2);
  border: 1px solid transparent;
}
.nav:hover {
  background: var(--hover);
  text-decoration: none;
}
.nav.on {
  color: var(--ink);
  background: var(--nav-on);
  border-color: var(--line2);
  box-shadow: var(--shadow);
}
.nav span:first-of-type {
  flex: 1;
}
.badge {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--fill2);
  color: var(--ink);
  font-size: 11.5px;
  line-height: 20px;
  text-align: center;
}
.nav.on .badge {
  background: var(--brand);
  color: var(--brand-ink);
}
.promise {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(86, 118, 183, 0.22), rgba(102, 45, 145, 0.2));
  border: 1px solid var(--line2);
}
.promise-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promise strong {
  font-size: 13px;
  white-space: nowrap;
}
.promise span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.promise .ic {
  flex: none;
  stroke: var(--brand);
}

/* icons */
.ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.ic.sm {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.ic.xl {
  width: 40px;
  height: 40px;
  stroke: var(--brand);
  stroke-width: 1.5;
}
.btn .ic,
.chip .ic {
  margin: -1px 0;
}

/* top bar */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--top-line);
}
.crumbs {
  color: var(--muted);
  white-space: nowrap;
}
.crumbs span {
  margin: 0 4px;
  opacity: 0.6;
}
.crumbs strong {
  color: var(--ink);
  font-weight: 500;
}
.search {
  flex: 0 1 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--search);
  border: 1px solid var(--line2);
  color: var(--muted);
}
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: inherit;
}
.search:focus-within {
  border-color: var(--s1);
}
.search kbd {
  font: 11px/1 inherit;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--kbd);
  color: var(--ink2);
}
.top-r {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line2);
  color: var(--ink2);
  font-size: 12px;
  white-space: nowrap;
}
.chip.link:hover {
  border-color: var(--s1);
  text-decoration: none;
}
/* Word and PDF downloads (proposal 040): a pair of chips in a row, buttons in a page head */
.dl {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}
.page-h .actions.dl {
  margin-top: 0;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border: 2px solid var(--ring);
}
.avatar.lg {
  width: 46px;
  height: 46px;
  flex: none;
  font-size: 15px;
}

.theme {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line2);
}
.theme button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.theme button:hover {
  color: var(--ink);
}
.theme button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.theme button:focus-visible,
.nav:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--s1);
  outline-offset: 2px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* body */
.body {
  padding: 24px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1500px;
  width: 100%;
}
h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 0;
}
h3 {
  font-size: 15px;
  margin: 4px 0 6px;
  font-weight: 600;
}
.lede {
  color: var(--muted);
  margin: 0;
  max-width: 78ch;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12.5px;
}
.nowrap {
  white-space: nowrap;
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.page-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.back {
  margin: 0;
}
.back .btn {
  color: var(--ink2);
}
.back .btn:hover {
  color: var(--ink);
}
.notice {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--line2);
  color: var(--warn);
  background: var(--warn-bg);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  min-width: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.card-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.card-k {
  color: var(--ink2);
  font-size: 12.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card-v {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.card-v small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

/* hero */
.hero-k {
  color: var(--ink2);
}
.hero-v {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 3px 8px;
  border-radius: 7px;
}
.delta.up {
  color: var(--good);
  background: var(--good-bg);
}
.hero-s {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink2);
  font-size: 12.5px;
  margin-top: 2px;
}
.hero-s span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line2);
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}
.btn:hover {
  text-decoration: none;
  border-color: var(--strong);
}
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.btn.primary:hover {
  background: #f3b36c;
}

/* KPI cards */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  min-height: 132px;
  position: relative;
  overflow: hidden;
}
.kpi:hover {
  text-decoration: none;
  border-color: var(--line2);
}
.kpi::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(24px);
}
.kpi.c1::after {
  background: var(--s1);
}
.kpi.c2::after {
  background: var(--s3);
}
.kpi.c3::after {
  background: var(--s4);
}
.kpi.c4::after {
  background: var(--s2);
}
@media (min-width: 1181px) {
  .cards.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.kpi-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.coin {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill1);
  border: 1px solid var(--line2);
  flex: none;
}
.coin.sm {
  width: 30px;
  height: 30px;
}
.kpi-v {
  font-size: 30px;
  font-weight: 600;
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.kpi-v small {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.kpi-f {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
}
.up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--good);
  background: var(--good-bg);
  padding: 1px 6px;
  border-radius: 6px;
}
.kpi.add {
  border: 1.5px dashed var(--line2);
  background: var(--add-bg);
  color: var(--muted);
  justify-content: flex-end;
}
.kpi.add:hover {
  color: var(--ink2);
  border-color: var(--strong);
}
.plus {
  position: absolute;
  top: 16px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill1);
  border: 1px solid var(--line2);
  color: var(--ink2);
}

.row2 {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 14px;
}
.row2.even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.row3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tile {
  color: var(--muted);
  font-size: 12.5px;
}
.tile b {
  display: block;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* charts */
.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart text {
  font:
    11px "Inter",
    system-ui,
    sans-serif;
  fill: var(--muted);
}
.chart .grid {
  stroke: var(--grid);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.chart .grid.v {
  stroke: var(--grid-v);
}
.chart .line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.chart .line.s1 {
  stroke: var(--s1);
}
.chart .line.s2 {
  stroke: var(--s2);
}
.chart .dot {
  stroke: var(--surface);
  stroke-width: 2;
}
.chart .dot.s1 {
  fill: var(--s1);
}
.chart .halo.s1 {
  fill: var(--s1);
  opacity: 0.22;
}
.chart .callout {
  fill: var(--callout);
  stroke: var(--line2);
}
.chart .callout-k {
  font-size: 10.5px;
}
.chart .callout-v {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.chart .hit {
  fill: transparent;
}
.chart .hit:hover {
  fill: var(--hover);
}
.chart .track {
  fill: var(--track);
  stroke: var(--track-line);
}
.chart .fill {
  fill: var(--bar);
}
.chart .fill.hi {
  fill: var(--hi);
}
.chart .bar-v {
  fill: var(--ink2);
  font-size: 11px;
}
.chart .tick.on {
  fill: var(--ink);
  font-weight: 600;
}
.chart .cell {
  stroke: var(--surface);
  stroke-width: 1;
}
.chart .cell.past {
  opacity: 0.35;
}
.chart .cell.today {
  stroke: var(--hi);
  stroke-width: 2;
}
.cell.l0 {
  fill: var(--l0);
  background: var(--l0);
}
.cell.l1 {
  fill: var(--l1);
  background: var(--l1);
}
.cell.l2 {
  fill: var(--l2);
  background: var(--l2);
}
.cell.l3 {
  fill: var(--l3);
  background: var(--l3);
}
.cell.l4 {
  fill: var(--l4);
  background: var(--l4);
}
.chart.cal {
  max-width: 340px;
  margin: 4px auto 0;
}
.scale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.scale i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.scale span {
  margin: 0 4px;
}
.chart .ribbon {
  fill: var(--ribbon);
  opacity: 0.28;
}
.chart .ribbon:hover {
  opacity: 0.5;
}
.chart .ribbon.s-draft {
  fill: var(--s2);
}
.chart .ribbon.s-owned {
  fill: var(--s4);
}
.chart .ribbon.s-checked {
  fill: var(--s1);
}
.chart .node {
  fill: var(--node);
  stroke: var(--line2);
}
.chart .node.dst.s-draft {
  fill: var(--node-draft);
  stroke: var(--s2);
}
.chart .node.dst.s-owned {
  fill: var(--node-owned);
  stroke: var(--s4);
}
.chart .node.dst.s-checked {
  fill: var(--node-checked);
  stroke: var(--s1);
}
.chart .node.dst.s-rejected {
  fill: var(--node-rejected);
  stroke: var(--bad);
}
.chart .ribbon.s-in_review {
  fill: var(--s1);
}
.chart .ribbon.s-set_aside {
  fill: var(--s3);
}
.chart .node.dst.s-in_review {
  stroke: var(--s1);
}
.chart .node.dst.s-set_aside {
  stroke: var(--s3);
}
.chart .node-k {
  fill: var(--ink2);
  font-size: 11px;
}
.chart .node-v {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink2);
}
.key {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-left: 8px;
}
.key.s1 {
  background: var(--s1);
}
.key.s2 {
  background: var(--s2);
}
.pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.card .pills.fit {
  flex-wrap: nowrap;
}
.pills.fit .pill {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 3px 0;
  overflow: hidden;
}
.pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.pill.on {
  background: var(--fill2);
  color: var(--ink);
  border-color: var(--strong);
}
a.pill:hover {
  text-decoration: none;
  color: var(--ink);
}
details.tv {
  margin-top: 10px;
}
details.tv summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
details.tv table {
  margin-top: 6px;
}

/* activity */
.acts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acts li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.acts li:first-child {
  border-top: 0;
}
.act-t {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.act-t a,
.act-t {
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-t > a,
.act-t > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  color: var(--ink);
}
.act-t span {
  color: var(--muted);
  font-size: 11.5px;
}

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover td {
  background: var(--hover);
}
/* a row whose first link opens it: the whole row is the link, as in Mail (no script: the link's ::after covers the row) */
tr.rl {
  position: relative;
  transform: scale(1);
  cursor: pointer;
}
tr.rl > td:first-child > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}
tr.rl > td:first-child > a:first-child:focus-visible {
  outline: none;
}
tr.rl:has(> td:first-child > a:first-child:focus-visible) {
  outline: 2px solid var(--s1);
  outline-offset: -2px;
}
tr.rl form,
tr.rl button,
tr.rl details,
tr.rl td:not(:first-child) a,
tr.rl .dl a,
tr.rl .fx-info {
  position: relative;
  z-index: 1;
}
tr.rl:has(details[open]) {
  z-index: 5;
} /* an open Reject drawer sits over the rows below */
.row-a {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}
.row-a .review-f {
  gap: 6px;
}
.st {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
  background: var(--fill1);
  color: var(--ink2);
}
.st-new,
.st-posted,
.st-scheduled {
  background: var(--info-bg);
  color: var(--info);
}
.st-draft,
.st-edited,
.st-forecasted,
.st-queued,
.st-running,
.st-partial {
  background: var(--warn-bg);
  color: var(--warn);
}
.st-owned,
.st-done,
.st-sent,
.st-checked,
.st-summarized {
  background: var(--good-bg);
  color: var(--good);
}
.st-failed,
.st-refused,
.st-rejected {
  background: var(--bad-bg);
  color: var(--bad);
}

/* item pages */
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.prose {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
  padding: 24px 28px;
}
.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  margin: 18px 0 6px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  margin: 0 0 12px;
  max-width: 80ch;
}
.prose ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.prose mark.ph {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  padding: 0 3px;
}
.prose .cite {
  color: var(--info);
  font-size: 0.85em;
}
.checks {
  position: sticky;
  top: 16px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 6px 0 12px;
}
.stats div {
  background: var(--fill1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11.5px;
}
.stats b {
  display: block;
  color: var(--ink);
  font-size: 18px;
}
.findings {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink2);
}
.findings li {
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.findings strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.findings .f-warning strong {
  color: var(--warn);
}
.findings .f-error strong {
  color: var(--bad);
}

/* policy, people, portal */
.change h3 a {
  color: var(--ink);
}
.change p {
  margin: 4px 0 0;
  color: var(--ink2);
}
ul.plain {
  margin: 0;
  padding-left: 18px;
}
ul.plain li {
  margin: 6px 0;
}
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.person {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.person h3 {
  margin: 0;
}
.tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line);
  color: var(--ink2);
}
.feature {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 760px;
}
.feature h3 {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .row3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .row3 > :last-child {
    grid-column: 1/-1;
  }
  .cards,
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .side {
    position: static;
    height: auto;
    flex-direction: column;
    padding: 14px 16px;
  }
  .side nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-h {
    width: 100%;
    margin: 8px 4px 2px;
  }
  .promise {
    display: none;
  }
  .row2,
  .row2.even,
  .row3,
  .doc-grid {
    grid-template-columns: 1fr;
  }
  .row3 > :last-child {
    grid-column: auto;
  }
  .top {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .search {
    order: 3;
    flex-basis: 100%;
  }
  .body {
    padding: 16px 16px 48px;
  }
  .checks {
    position: static;
  }
  table {
    display: block;
    overflow-x: auto;
  }
}
@media (max-width: 560px) {
  .cards,
  .tiles {
    grid-template-columns: 1fr;
  }
  .hero-v {
    font-size: 32px;
  }
}

/* Instant Draft (proposal 017): the form */
.instant {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-card {
  border: 1px solid var(--line);
  margin: 0;
  padding: 16px 18px;
}
.step-card legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  padding: 0 6px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
}
.opts {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.opts.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.opts.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.opt {
  position: relative;
  display: block;
  cursor: pointer;
}
.opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.opt-b {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line2);
  background: var(--fill1);
}
.opt-b span {
  color: var(--muted);
  font-size: 12.5px;
}
.opt:hover .opt-b {
  border-color: var(--strong);
}
.opt input:checked + .opt-b {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  box-shadow: var(--shadow);
}
.opt input:focus-visible + .opt-b {
  outline: 2px solid var(--s1);
  outline-offset: 2px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink2);
}
.field select,
.field textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 9px 11px;
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 70px;
}
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}
.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px;
}
.plans {
  margin-top: 12px;
}
.plan {
  display: none;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill1);
  border: 1px dashed var(--line2);
}
.plan ol {
  margin: 6px 0 0;
  padding-left: 20px;
}
.plan li {
  margin: 3px 0;
}
.btn.big {
  padding: 11px 20px;
  font-size: 14px;
}
/* The Extended reasoning switch (proposal 060), beside Start writing */
.actions:has(.switch) {
  align-items: center;
  column-gap: 16px;
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--fill1);
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--fill2);
  border: 1px solid var(--strong);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track {
  background: var(--brand);
  border-color: var(--brand);
}
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--s1);
  outline-offset: 2px;
}
.switch:hover {
  border-color: var(--strong);
}
.switch:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}
.switch-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.switch-l strong {
  font-size: 13px;
}
.switch-state::before {
  content: "Off";
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--fill2);
  color: var(--muted);
}
.switch:has(input:checked) .switch-state::before {
  content: "On";
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-track::after {
    transition: none;
  }
}
button.btn {
  font: inherit;
  cursor: pointer;
}

.instant:has(#t0:checked):has(#l-brief:checked) .plan.t0-brief {
  display: block;
}
.instant:has(#t0:checked):has(#l-draft:checked) .plan.t0-draft {
  display: block;
}
.instant:has(#t0:checked):has(#l-full:checked) .plan.t0-full {
  display: block;
}
.instant:has(#t1:checked):has(#l-brief:checked) .plan.t1-brief {
  display: block;
}
.instant:has(#t1:checked):has(#l-draft:checked) .plan.t1-draft {
  display: block;
}
.instant:has(#t1:checked):has(#l-full:checked) .plan.t1-full {
  display: block;
}
.instant:has(#t2:checked):has(#l-brief:checked) .plan.t2-brief {
  display: block;
}
.instant:has(#t2:checked):has(#l-draft:checked) .plan.t2-draft {
  display: block;
}
.instant:has(#t2:checked):has(#l-full:checked) .plan.t2-full {
  display: block;
}
.instant:has(#t3:checked):has(#l-brief:checked) .plan.t3-brief {
  display: block;
}
.instant:has(#t3:checked):has(#l-draft:checked) .plan.t3-draft {
  display: block;
}
.instant:has(#t3:checked):has(#l-full:checked) .plan.t3-full {
  display: block;
}
.instant:has(#t4:checked):has(#l-brief:checked) .plan.t4-brief {
  display: block;
}
.instant:has(#t4:checked):has(#l-draft:checked) .plan.t4-draft {
  display: block;
}
.instant:has(#t4:checked):has(#l-full:checked) .plan.t4-full {
  display: block;
}
.instant:has(#t5:checked):has(#l-brief:checked) .plan.t5-brief {
  display: block;
}
.instant:has(#t5:checked):has(#l-draft:checked) .plan.t5-draft {
  display: block;
}
.instant:has(#t5:checked):has(#l-full:checked) .plan.t5-full {
  display: block;
}

/* Instant Draft: the live run */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 12px;
  font-weight: 600;
}
.live-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  animation: pulse 1.4s ease-in-out infinite;
}
html:not(.directed) .run:has(#run-done) .live-dot,
html.directed .run:has(#run-done.shown) .live-dot {
  display: none;
}
.stepper {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.step {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 10px;
}
.step .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line2);
  background: var(--panel);
}
.step-t {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-s {
  grid-column: 2;
  font-size: 11px;
}
.step-s::after {
  content: "Waiting";
}
.stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-h h2 {
  margin: 0;
  font-size: 17px;
}
.stage {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill1);
  border: 1px solid var(--line);
}
.stage-k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 6px;
}
.srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.src {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--ink2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.src.ext {
  border-style: dashed;
}
.src b {
  color: var(--info);
}
.thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--s1);
  animation: pulse 1.2s ease-in-out infinite;
}
.live,
.revising {
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
  padding: 4px 2px;
}
html:not(.directed) .live::after,
html:not(.directed) .sec:not(:has(.edits)) > .revising::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--hi);
  animation: blink 1s steps(2) infinite;
}
.final {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
}
.final h2,
.final h3,
.final h4 {
  color: var(--ink);
  margin: 14px 0 6px;
}
.final p {
  margin: 0 0 10px;
}
.final mark.ph {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  padding: 0 3px;
}
.final .cite {
  color: var(--info);
  font-size: 0.85em;
}
.final mark.flag {
  background: var(--bad-bg);
  color: inherit;
  border-bottom: 2px solid var(--bad);
  border-radius: 3px;
  padding: 0 2px;
}
/* without the director: only a section's latest view of the document shows */
html:not(.directed) .sec > .doc-view:has(~ .doc-view),
html:not(.directed) .sec:has(.final) .live-k,
html:not(.directed) .sec:has(.edits ~ .final) .edit-k,
html:not(.directed) .sec:has(.live) .thinking:not(.editing),
html:not(.directed) .sec:has(.edits) .thinking.editing,
html:not(.directed) .sec:has(.revising) .thinking.editing,
html:not(.directed) .sec:has(.edits) .rev-k {
  display: none;
}
html:not(.directed) .revising:has(+ .restart-mark) {
  display: none;
}
html:not(.directed) .live:has(+ .restart-mark) {
  display: none;
}
html:not(.directed) .final mark.flag::after {
  content: " ✎";
  color: var(--bad);
  font-size: 0.8em;
}
.stats.row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 6px 0 8px;
}
.flag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.crit,
.viol,
.refs {
  margin: 4px 0 8px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink2);
}
.crit {
  list-style: none;
  padding-left: 0;
}
.crit li,
.viol li,
.refs li {
  margin: 5px 0;
}
.fix {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.st-c-met {
  background: var(--good-bg);
  color: var(--good);
}
.st-c-partial,
.st-c-unverified {
  background: var(--warn-bg);
  color: var(--warn);
}
.st-c-missing {
  background: var(--bad-bg);
  color: var(--bad);
}
/* a draft's fact-check risk (proposal 041); the label always says the band, so color is never the only signal */
.st-risk-low {
  background: var(--good-bg);
  color: var(--good);
}
.st-risk-medium {
  background: var(--warn-bg);
  color: var(--warn);
}
.st-risk-high {
  background: var(--bad-bg);
  color: var(--bad);
}
.good {
  color: var(--good);
}
.cited .btn {
  margin-top: 8px;
}
.sec-done {
  display: none;
}
.done-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.note-card p {
  margin: 0;
  color: var(--ink2);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live::after,
  .pulse,
  .live-dot::before {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .opts.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .opts.four,
  .opts.three,
  .two,
  .flag-grid {
    grid-template-columns: 1fr;
  }
  .stats.row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Instant Draft: tracked changes */
.edits {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
}
.edits h2,
.edits h3,
.edits h4 {
  color: var(--ink);
  margin: 14px 0 6px;
}
.edits p {
  margin: 0 0 10px;
}
del.ed {
  color: var(--bad);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background: var(--bad-bg);
  border-radius: 3px;
}
ins.ed {
  color: var(--good);
  text-decoration: none;
  background: var(--good-bg);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--good) 55%, transparent);
}
.stage.calm {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--good);
}
.thinking.editing .pulse {
  background: var(--s4);
}

/* Instant Draft: the director (static/director.js) paces what the engine streams */
html.directed .stream > :not(.shown),
html.directed .sec > :not(.shown),
html.directed .live > .chunk:not(.shown),
html.directed .revising > .chunk:not(.shown) {
  display: none;
}
html.directed .retired {
  display: none !important;
}
html.directed .sec-done {
  display: none !important;
}
html.directed .stream > .shown,
html.directed .sec > .shown:not(.doc-view) {
  animation: rise 0.45s ease both;
}
html.directed .final.arrive {
  animation: compile 1.1s ease both;
}
html.directed .final.arrive-soft {
  animation: rise 0.5s ease both;
}
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--hi);
  animation: blink 1s steps(2) infinite;
}
.meter {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
mark.flag.looking {
  outline: 2px solid var(--bad);
  outline-offset: 2px;
  animation: glow 1.2s ease-in-out infinite;
}
.note-pop {
  position: absolute;
  z-index: 40;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--bad);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: rise 0.3s ease both;
}
html.directed del.ed {
  text-decoration-color: transparent;
  transition:
    text-decoration-color 0.45s ease,
    opacity 0.45s ease;
}
html.directed del.ed.striking,
html.directed del.ed.struck {
  text-decoration-color: var(--bad);
}
html.directed del.ed.struck {
  opacity: 0.7;
}
html.directed del.ed.folded {
  display: none;
}
html.directed ins.ed:not(.typing):not(.typed) {
  display: none;
}
html.directed ins.ed.typing {
  outline: 2px solid var(--good);
  outline-offset: 1px;
}
.refs li.pop {
  animation: rise 0.35s ease both;
}
.director {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--ink2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.d-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  animation: pulse 1.4s ease-in-out infinite;
}
.director[data-mode="free"] .d-dot {
  background: var(--muted);
  animation: none;
}
.director[data-mode="replay"] .d-dot {
  background: var(--good);
  animation: none;
}
.d-btn {
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--fill1);
  color: var(--ink);
  cursor: pointer;
}
.d-btn:hover {
  border-color: var(--strong);
}
.d-btn:focus-visible {
  outline: 2px solid var(--s1);
  outline-offset: 2px;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes compile {
  0% {
    opacity: 0;
    filter: blur(3px);
  }
  40% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}
@keyframes glow {
  50% {
    box-shadow: 0 0 0 6px var(--bad-bg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.directed .stream > .shown,
  html.directed .sec > .shown,
  html.directed .final.arrive,
  .note-pop,
  mark.flag.looking,
  .caret {
    animation: none;
  }
}
html:not(.directed) .run:has(#s0) .step[data-i="0"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s0) .step[data-i="0"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s0) .step[data-i="0"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s0 .thinking) .step[data-i="0"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s0 .live) .step[data-i="0"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s0 .final) .step[data-i="0"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s0 .flags) .step[data-i="0"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s0 .revising) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s0 .edits) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s0 .cited) .step[data-i="0"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s0 > .sec-done) .step[data-i="0"] {
  background: none;
}
html:not(.directed) .run:has(#s0 > .sec-done) .step[data-i="0"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s0 > .sec-done) .step[data-i="0"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s0 #s0-failed) .step[data-i="0"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s0 #s0-failed) .step[data-i="0"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s0.shown) .step[data-i="0"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s0.shown) .step[data-i="0"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s0.shown) .step[data-i="0"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s0 .thinking.shown) .step[data-i="0"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s0 .live.shown) .step[data-i="0"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s0 .final.shown) .step[data-i="0"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s0 .flags.shown) .step[data-i="0"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s0 .revising.shown) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s0 .edits.shown) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s0 .cited.shown) .step[data-i="0"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s0 > .sec-done.shown) .step[data-i="0"] {
  background: none;
}
html.directed .run:has(#s0 > .sec-done.shown) .step[data-i="0"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s0 > .sec-done.shown) .step[data-i="0"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s0 #s0-failed.shown) .step[data-i="0"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s0 #s0-failed.shown) .step[data-i="0"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s1) .step[data-i="1"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s1) .step[data-i="1"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s1) .step[data-i="1"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s1 .thinking) .step[data-i="1"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s1 .live) .step[data-i="1"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s1 .final) .step[data-i="1"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s1 .flags) .step[data-i="1"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s1 .revising) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s1 .edits) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s1 .cited) .step[data-i="1"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s1 > .sec-done) .step[data-i="1"] {
  background: none;
}
html:not(.directed) .run:has(#s1 > .sec-done) .step[data-i="1"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s1 > .sec-done) .step[data-i="1"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s1 #s1-failed) .step[data-i="1"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s1 #s1-failed) .step[data-i="1"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s1.shown) .step[data-i="1"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s1.shown) .step[data-i="1"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s1.shown) .step[data-i="1"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s1 .thinking.shown) .step[data-i="1"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s1 .live.shown) .step[data-i="1"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s1 .final.shown) .step[data-i="1"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s1 .flags.shown) .step[data-i="1"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s1 .revising.shown) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s1 .edits.shown) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s1 .cited.shown) .step[data-i="1"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s1 > .sec-done.shown) .step[data-i="1"] {
  background: none;
}
html.directed .run:has(#s1 > .sec-done.shown) .step[data-i="1"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s1 > .sec-done.shown) .step[data-i="1"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s1 #s1-failed.shown) .step[data-i="1"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s1 #s1-failed.shown) .step[data-i="1"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s2) .step[data-i="2"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s2) .step[data-i="2"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s2) .step[data-i="2"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s2 .thinking) .step[data-i="2"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s2 .live) .step[data-i="2"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s2 .final) .step[data-i="2"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s2 .flags) .step[data-i="2"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s2 .revising) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s2 .edits) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s2 .cited) .step[data-i="2"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s2 > .sec-done) .step[data-i="2"] {
  background: none;
}
html:not(.directed) .run:has(#s2 > .sec-done) .step[data-i="2"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s2 > .sec-done) .step[data-i="2"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s2 #s2-failed) .step[data-i="2"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s2 #s2-failed) .step[data-i="2"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s2.shown) .step[data-i="2"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s2.shown) .step[data-i="2"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s2.shown) .step[data-i="2"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s2 .thinking.shown) .step[data-i="2"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s2 .live.shown) .step[data-i="2"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s2 .final.shown) .step[data-i="2"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s2 .flags.shown) .step[data-i="2"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s2 .revising.shown) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s2 .edits.shown) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s2 .cited.shown) .step[data-i="2"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s2 > .sec-done.shown) .step[data-i="2"] {
  background: none;
}
html.directed .run:has(#s2 > .sec-done.shown) .step[data-i="2"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s2 > .sec-done.shown) .step[data-i="2"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s2 #s2-failed.shown) .step[data-i="2"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s2 #s2-failed.shown) .step[data-i="2"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s3) .step[data-i="3"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s3) .step[data-i="3"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s3) .step[data-i="3"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s3 .thinking) .step[data-i="3"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s3 .live) .step[data-i="3"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s3 .final) .step[data-i="3"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s3 .flags) .step[data-i="3"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s3 .revising) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s3 .edits) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s3 .cited) .step[data-i="3"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s3 > .sec-done) .step[data-i="3"] {
  background: none;
}
html:not(.directed) .run:has(#s3 > .sec-done) .step[data-i="3"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s3 > .sec-done) .step[data-i="3"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s3 #s3-failed) .step[data-i="3"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s3 #s3-failed) .step[data-i="3"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s3.shown) .step[data-i="3"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s3.shown) .step[data-i="3"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s3.shown) .step[data-i="3"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s3 .thinking.shown) .step[data-i="3"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s3 .live.shown) .step[data-i="3"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s3 .final.shown) .step[data-i="3"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s3 .flags.shown) .step[data-i="3"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s3 .revising.shown) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s3 .edits.shown) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s3 .cited.shown) .step[data-i="3"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s3 > .sec-done.shown) .step[data-i="3"] {
  background: none;
}
html.directed .run:has(#s3 > .sec-done.shown) .step[data-i="3"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s3 > .sec-done.shown) .step[data-i="3"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s3 #s3-failed.shown) .step[data-i="3"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s3 #s3-failed.shown) .step[data-i="3"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s4) .step[data-i="4"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s4) .step[data-i="4"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s4) .step[data-i="4"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s4 .thinking) .step[data-i="4"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s4 .live) .step[data-i="4"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s4 .final) .step[data-i="4"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s4 .flags) .step[data-i="4"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s4 .revising) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s4 .edits) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s4 .cited) .step[data-i="4"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s4 > .sec-done) .step[data-i="4"] {
  background: none;
}
html:not(.directed) .run:has(#s4 > .sec-done) .step[data-i="4"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s4 > .sec-done) .step[data-i="4"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s4 #s4-failed) .step[data-i="4"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s4 #s4-failed) .step[data-i="4"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s4.shown) .step[data-i="4"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s4.shown) .step[data-i="4"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s4.shown) .step[data-i="4"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s4 .thinking.shown) .step[data-i="4"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s4 .live.shown) .step[data-i="4"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s4 .final.shown) .step[data-i="4"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s4 .flags.shown) .step[data-i="4"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s4 .revising.shown) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s4 .edits.shown) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s4 .cited.shown) .step[data-i="4"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s4 > .sec-done.shown) .step[data-i="4"] {
  background: none;
}
html.directed .run:has(#s4 > .sec-done.shown) .step[data-i="4"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s4 > .sec-done.shown) .step[data-i="4"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s4 #s4-failed.shown) .step[data-i="4"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s4 #s4-failed.shown) .step[data-i="4"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s5) .step[data-i="5"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s5) .step[data-i="5"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s5) .step[data-i="5"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s5 .thinking) .step[data-i="5"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s5 .live) .step[data-i="5"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s5 .final) .step[data-i="5"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s5 .flags) .step[data-i="5"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s5 .revising) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s5 .edits) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s5 .cited) .step[data-i="5"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s5 > .sec-done) .step[data-i="5"] {
  background: none;
}
html:not(.directed) .run:has(#s5 > .sec-done) .step[data-i="5"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s5 > .sec-done) .step[data-i="5"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s5 #s5-failed) .step[data-i="5"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s5 #s5-failed) .step[data-i="5"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s5.shown) .step[data-i="5"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s5.shown) .step[data-i="5"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s5.shown) .step[data-i="5"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s5 .thinking.shown) .step[data-i="5"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s5 .live.shown) .step[data-i="5"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s5 .final.shown) .step[data-i="5"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s5 .flags.shown) .step[data-i="5"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s5 .revising.shown) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s5 .edits.shown) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s5 .cited.shown) .step[data-i="5"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s5 > .sec-done.shown) .step[data-i="5"] {
  background: none;
}
html.directed .run:has(#s5 > .sec-done.shown) .step[data-i="5"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s5 > .sec-done.shown) .step[data-i="5"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s5 #s5-failed.shown) .step[data-i="5"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s5 #s5-failed.shown) .step[data-i="5"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s6) .step[data-i="6"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s6) .step[data-i="6"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s6) .step[data-i="6"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s6 .thinking) .step[data-i="6"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s6 .live) .step[data-i="6"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s6 .final) .step[data-i="6"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s6 .flags) .step[data-i="6"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s6 .revising) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s6 .edits) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s6 .cited) .step[data-i="6"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s6 > .sec-done) .step[data-i="6"] {
  background: none;
}
html:not(.directed) .run:has(#s6 > .sec-done) .step[data-i="6"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s6 > .sec-done) .step[data-i="6"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s6 #s6-failed) .step[data-i="6"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s6 #s6-failed) .step[data-i="6"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s6.shown) .step[data-i="6"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s6.shown) .step[data-i="6"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s6.shown) .step[data-i="6"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s6 .thinking.shown) .step[data-i="6"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s6 .live.shown) .step[data-i="6"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s6 .final.shown) .step[data-i="6"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s6 .flags.shown) .step[data-i="6"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s6 .revising.shown) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s6 .edits.shown) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s6 .cited.shown) .step[data-i="6"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s6 > .sec-done.shown) .step[data-i="6"] {
  background: none;
}
html.directed .run:has(#s6 > .sec-done.shown) .step[data-i="6"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s6 > .sec-done.shown) .step[data-i="6"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s6 #s6-failed.shown) .step[data-i="6"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s6 #s6-failed.shown) .step[data-i="6"] .step-s::after {
  content: "Failed";
}
html:not(.directed) .run:has(#s7) .step[data-i="7"] {
  color: var(--ink);
  background: var(--fill1);
}
html:not(.directed) .run:has(#s7) .step[data-i="7"] .dot {
  border-color: var(--hi);
}
html:not(.directed) .run:has(#s7) .step[data-i="7"] .step-s::after {
  content: "Gathering sources";
}
html:not(.directed) .run:has(#s7 .thinking) .step[data-i="7"] .step-s::after {
  content: "Planning";
}
html:not(.directed) .run:has(#s7 .live) .step[data-i="7"] .step-s::after {
  content: "Writing";
}
html:not(.directed) .run:has(#s7 .final) .step[data-i="7"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s7 .flags) .step[data-i="7"] .step-s::after {
  content: "Reviewing";
}
html:not(.directed) .run:has(#s7 .revising) .step[data-i="7"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s7 .edits) .step[data-i="7"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s7 .cited) .step[data-i="7"] .step-s::after {
  content: "Citing";
}
html:not(.directed) .run:has(#s7 > .sec-done) .step[data-i="7"] {
  background: none;
}
html:not(.directed) .run:has(#s7 > .sec-done) .step[data-i="7"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html:not(.directed) .run:has(#s7 > .sec-done) .step[data-i="7"] .step-s::after {
  content: "Done";
}
html:not(.directed) .run:has(#s7 #s7-failed) .step[data-i="7"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html:not(.directed) .run:has(#s7 #s7-failed) .step[data-i="7"] .step-s::after {
  content: "Failed";
}
html.directed .run:has(#s7.shown) .step[data-i="7"] {
  color: var(--ink);
  background: var(--fill1);
}
html.directed .run:has(#s7.shown) .step[data-i="7"] .dot {
  border-color: var(--hi);
}
html.directed .run:has(#s7.shown) .step[data-i="7"] .step-s::after {
  content: "Gathering sources";
}
html.directed .run:has(#s7 .thinking.shown) .step[data-i="7"] .step-s::after {
  content: "Planning";
}
html.directed .run:has(#s7 .live.shown) .step[data-i="7"] .step-s::after {
  content: "Writing";
}
html.directed .run:has(#s7 .final.shown) .step[data-i="7"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s7 .flags.shown) .step[data-i="7"] .step-s::after {
  content: "Reviewing";
}
html.directed .run:has(#s7 .revising.shown) .step[data-i="7"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s7 .edits.shown) .step[data-i="7"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s7 .cited.shown) .step[data-i="7"] .step-s::after {
  content: "Citing";
}
html.directed .run:has(#s7 > .sec-done.shown) .step[data-i="7"] {
  background: none;
}
html.directed .run:has(#s7 > .sec-done.shown) .step[data-i="7"] .dot {
  background: var(--good);
  border-color: var(--good);
}
html.directed .run:has(#s7 > .sec-done.shown) .step[data-i="7"] .step-s::after {
  content: "Done";
}
html.directed .run:has(#s7 #s7-failed.shown) .step[data-i="7"] .dot {
  background: var(--bad);
  border-color: var(--bad);
}
html.directed .run:has(#s7 #s7-failed.shown) .step[data-i="7"] .step-s::after {
  content: "Failed";
}
/* the editor at work, before its tracked changes arrive */
html.directed .run:has(#s0 .thinking.editing.shown:not(.retired)) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s0 .thinking.editing):not(:has(#s0 .cited)) .step[data-i="0"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s1 .thinking.editing.shown:not(.retired)) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s1 .thinking.editing):not(:has(#s1 .cited)) .step[data-i="1"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s2 .thinking.editing.shown:not(.retired)) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s2 .thinking.editing):not(:has(#s2 .cited)) .step[data-i="2"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s3 .thinking.editing.shown:not(.retired)) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s3 .thinking.editing):not(:has(#s3 .cited)) .step[data-i="3"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s4 .thinking.editing.shown:not(.retired)) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s4 .thinking.editing):not(:has(#s4 .cited)) .step[data-i="4"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s5 .thinking.editing.shown:not(.retired)) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s5 .thinking.editing):not(:has(#s5 .cited)) .step[data-i="5"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s6 .thinking.editing.shown:not(.retired)) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s6 .thinking.editing):not(:has(#s6 .cited)) .step[data-i="6"] .step-s::after {
  content: "Editing";
}
html.directed .run:has(#s7 .thinking.editing.shown:not(.retired)) .step[data-i="7"] .step-s::after {
  content: "Editing";
}
html:not(.directed) .run:has(#s7 .thinking.editing):not(:has(#s7 .cited)) .step[data-i="7"] .step-s::after {
  content: "Editing";
}

/* Instant Draft, amendment 2: cancel, the streamed revision, the speed control */
.run-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.run-ctl .cancel,
.cancel {
  margin: 0;
}
html:not(.directed) .run:has(#run-done) .run-ctl .cancel,
html.directed .run:has(#run-done.shown) .run-ctl .cancel,
.run:has(.cancelling) .run-ctl .cancel {
  display: none;
}
.btn.sm {
  padding: 5px 11px;
  font-size: 12px;
}
.btn.danger {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line2));
}
.btn.danger:hover {
  background: var(--bad-bg);
  border-color: var(--bad);
}
.st-cancelled {
  background: var(--fill2);
  color: var(--muted);
}
.st-in_review {
  background: var(--info-bg);
  color: var(--info);
}
.st-set_aside {
  background: var(--fill2);
  color: var(--ink2);
}
.done-card.cancelled h2 {
  color: var(--muted);
}
.notice.cancelling {
  color: var(--ink2);
}
.revising {
  border-left: 3px solid var(--s4);
  padding-left: 12px;
  border-radius: 2px;
}
.rev-k .ic {
  color: var(--s4);
}
html.directed ins.ed.lit {
  animation: lit 1s ease both;
}
@keyframes lit {
  0% {
    box-shadow:
      0 0 0 0 var(--good-bg),
      inset 0 -2px 0 var(--good);
  }
  50% {
    box-shadow:
      0 0 0 5px var(--good-bg),
      inset 0 -2px 0 var(--good);
  }
}
.d-speed {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--fill1);
  border: 1px solid var(--line2);
}
.d-speed button {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.d-speed button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.d-speed button:focus-visible {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}
@media (max-width: 560px) {
  .director {
    left: 12px;
    right: 12px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
  }
}

/* Mail (proposal 019): a Gmail-like inbox, no script */
.mail-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.mail-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 12px;
}
.m-compose {
  justify-content: center;
  margin-bottom: 10px;
}
.m-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink2);
  font-size: 13.5px;
}
.m-folder:hover {
  background: var(--hover);
  text-decoration: none;
}
.m-folder.on {
  background: color-mix(in srgb, var(--brand) 16%, var(--panel));
  color: var(--ink);
  font-weight: 600;
}
.m-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
}
.m-account {
  margin-top: 12px;
  padding: 0 12px;
  font-size: 11.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.mail-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.m-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--search);
  border: 1px solid var(--line2);
}
.m-search input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  outline: none;
}
.m-search:focus-within {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}
.m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.m-head h1 {
  margin: 0;
  font-size: 20px;
}
.m-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-foot {
  display: flex;
  justify-content: flex-end;
}
.m-box {
  padding: 0;
  overflow: hidden;
}
.m-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.m-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--fill1);
}
.m-row.unread {
  background: var(--panel);
}
.m-row:hover {
  box-shadow:
    inset 0 -1px 0 var(--line2),
    0 1px 3px rgba(16, 24, 40, 0.12);
  position: relative;
  z-index: 1;
}
.m-check {
  display: flex;
  align-items: center;
  padding: 0 4px 0 14px;
  cursor: pointer;
}
.m-check input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.m-star {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--line2);
}
.m-star.on {
  color: var(--brand);
}
.m-star.on svg {
  fill: currentColor;
}
.m-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 20px 84px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 4px;
  color: var(--ink2);
  cursor: pointer;
}
.m-link:hover {
  text-decoration: none;
}
.m-link:focus-visible {
  outline: 2px solid var(--s1);
  outline-offset: -2px;
}
.m-from,
.m-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-snip {
  color: var(--muted);
}
.m-date {
  text-align: right;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.m-clip {
  color: var(--muted);
}
.m-row.unread .m-from,
.m-row.unread .m-subj,
.m-row.unread .m-date {
  color: var(--ink);
  font-weight: 700;
}
.m-empty {
  padding: 28px 18px;
  margin: 0;
}
.m-thread-tools .m-toolbar {
  padding: 0;
  border: 0;
}
.m-subject {
  margin: 4px 0 0;
  font-size: 22px;
}
.m-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-msg {
  padding: 0;
}
.m-msg summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.m-msg summary::-webkit-details-marker {
  display: none;
}
.m-msg summary .m-from {
  font-weight: 700;
  color: var(--ink);
}
.m-msg[open] summary .m-snip {
  visibility: hidden;
}
.m-msg > :not(summary) {
  margin: 0 18px 14px;
}
.m-heads {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.m-h {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  color: var(--ink2);
}
.m-h span:first-child {
  color: var(--muted);
}
.m-h span:last-child {
  overflow-wrap: anywhere;
}
.m-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: inherit;
}
.m-atts ul {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-att {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  font-size: 13px;
  background: var(--fill1);
}
.m-reply {
  margin-top: 4px;
}
.compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compose h1 {
  margin: 0 0 4px;
  font-size: 20px;
}
.m-field {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.m-field input {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 8px 11px;
  width: 100%;
}
.m-field input:focus {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}
.m-from-v {
  color: var(--ink2);
}
.compose textarea {
  min-height: 300px;
  font-size: 14px;
  line-height: 1.55;
}
.m-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink2);
}
.m-fwds {
  border: 1px dashed var(--line2);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-fwd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
@media (max-width: 900px) {
  .mail-shell {
    grid-template-columns: 1fr;
  }
  .mail-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .m-compose {
    margin: 0 8px 0 0;
  }
  .m-link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "from date" "line line";
  }
  .m-link .m-from {
    grid-area: from;
  }
  .m-link .m-date {
    grid-area: date;
  }
  .m-link .m-line {
    grid-area: line;
  }
  .m-link .m-clip {
    display: none;
  }
}
.notice.good {
  color: var(--good);
  background: var(--good-bg);
  border-style: solid;
}
.notice.bad {
  color: var(--bad);
  background: var(--bad-bg);
  border-style: solid;
}
/* a section a cancel cut off says so (placed after the stepper rules, and more specific, so it wins) */
html:not(.directed) .run:has(#run-done.cancelled):has(#s0):not(:has(#s0 > .sec-done)) .step[data-i="0"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s0.shown):not(:has(#s0 > .sec-done.shown))
  .step[data-i="0"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s1):not(:has(#s1 > .sec-done)) .step[data-i="1"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s1.shown):not(:has(#s1 > .sec-done.shown))
  .step[data-i="1"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s2):not(:has(#s2 > .sec-done)) .step[data-i="2"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s2.shown):not(:has(#s2 > .sec-done.shown))
  .step[data-i="2"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s3):not(:has(#s3 > .sec-done)) .step[data-i="3"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s3.shown):not(:has(#s3 > .sec-done.shown))
  .step[data-i="3"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s4):not(:has(#s4 > .sec-done)) .step[data-i="4"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s4.shown):not(:has(#s4 > .sec-done.shown))
  .step[data-i="4"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s5):not(:has(#s5 > .sec-done)) .step[data-i="5"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s5.shown):not(:has(#s5 > .sec-done.shown))
  .step[data-i="5"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s6):not(:has(#s6 > .sec-done)) .step[data-i="6"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s6.shown):not(:has(#s6 > .sec-done.shown))
  .step[data-i="6"]
  .step-s::after {
  content: "Stopped";
}
html:not(.directed) .run:has(#run-done.cancelled):has(#s7):not(:has(#s7 > .sec-done)) .step[data-i="7"] .step-s::after,
html.directed
  .run:has(#run-done.cancelled.shown):has(#s7.shown):not(:has(#s7 > .sec-done.shown))
  .step[data-i="7"]
  .step-s::after {
  content: "Stopped";
}

/* review bar over a draft (proposal 016, amendment 1): stage and hint on the left, actions on the right */
.review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 12px 16px;
  position: relative;
  z-index: 6;
} /* the Reject drawer opens over the draft below */
.review-s {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.review-s .card-k {
  margin: 0;
}
.review-a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.review-f {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.review .notice {
  flex-basis: 100%;
  padding: 10px 14px;
}
button.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.reject {
  position: relative;
}
.reject > summary {
  list-style: none;
  cursor: pointer;
}
.reject > summary::-webkit-details-marker {
  display: none;
}
.reject[open] > summary {
  background: var(--bad-bg);
  border-color: var(--bad);
}
.reject-f {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--ink2);
}
.reject-f textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 9px 11px;
  width: 100%;
  resize: vertical;
  min-height: 64px;
}
.reject-f textarea:focus {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}
.reject-f .actions {
  margin: 0;
}
.reject-f p {
  margin: 0;
}
@media (max-width: 640px) {
  .review {
    flex-direction: column;
    align-items: stretch;
  }
  .reject-f {
    left: 0;
    right: auto;
  }
}

/* --- Minerva Evaluate, once the Oklahoma Project Demo (proposals 015 and 068) --------------------------------------------
   The framework choice, the drop zone, and the review page's layout from okdemo/static/style.css, scoped under .okd in
   the dashboard's tokens. */
.okd-drop {
  display: grid;
  gap: 12px;
}
.okd-fws {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.okd-fws legend {
  margin-bottom: 6px;
  font-weight: 600;
}
.okd-fw {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.okd-fw:has(input:checked) {
  border-color: var(--s1);
  background: var(--fill1);
}
.okd-fw > span {
  display: grid;
  gap: 2px;
}
.okd-fw input {
  margin-top: 4px;
}
.okd-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 200px;
  padding: 24px;
  border: 2px dashed var(--line2);
  border-radius: 14px;
  background: var(--fill1);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.okd-zone:hover,
.okd-zone.over,
.okd-zone:focus-within {
  border-color: var(--s1);
  background: color-mix(in srgb, var(--s1) 7%, var(--fill1));
}
.okd-zone .ic {
  width: 28px;
  height: 28px;
  color: var(--s1);
}
.okd-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.okd-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.okd-go {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.okd-drop.sending .okd-zone {
  opacity: 0.6;
  pointer-events: none;
}
.okd-st {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--fill2);
  color: var(--ink2);
}
.okd-st.good,
.okd .badge.done {
  background: var(--good-bg);
  color: var(--good);
}
.okd-st.warn,
.okd .badge.running,
.okd .badge.queued {
  background: var(--warn-bg);
  color: var(--warn);
}
.okd-st.bad,
.okd .badge.failed,
.okd .badge.refused {
  background: var(--bad-bg);
  color: var(--bad);
}
.okd h1 {
  margin: 0 0 4px;
}
.okd .crumbs {
  margin: 0 0 10px;
}
.okd .crumbs a {
  text-decoration: none;
  color: var(--s1);
}
.okd .muted {
  color: var(--muted);
}
.okd .badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: 1px;
}
.okd .title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.okd .button {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--s1);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.okd .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.okd .card.bad {
  border-color: var(--bad);
  background: var(--bad-bg);
}
.okd .card.note {
  background: var(--warn-bg);
}
.okd .waiting {
  display: flex;
  gap: 14px;
  align-items: center;
}
.okd .spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line2);
  border-top-color: var(--s1);
  border-radius: 50%;
  animation: okd-spin 1s linear infinite;
  flex: none;
}
@keyframes okd-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .okd .spinner {
    animation: none;
  }
}
.okd .objective h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.okd .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .okd .grid {
    grid-template-columns: 1fr;
  }
}
.okd .field {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
}
.okd .field.ok {
  border-left-color: var(--good);
}
.okd .field.edit {
  border-left-color: var(--warn);
}
.okd .dimension .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .okd .dimension .grid {
    grid-template-columns: 1fr;
  }
}
.okd .field.plain {
  border-left-color: var(--line);
}
.okd .field.ref {
  background: var(--fill1);
  border-left-color: var(--muted);
}
.okd .field h3 {
  font-size: 0.95rem;
  margin: 0 0 6px;
}
.okd .pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}
.okd .ok .pill {
  background: var(--good-bg);
  color: var(--good);
}
.okd .edit .pill {
  background: var(--warn-bg);
  color: var(--warn);
}
.okd .cell {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  color: var(--ink);
}
.okd .checks {
  list-style: none;
  padding: 8px 0 0;
  margin: 8px 0 0;
  border-top: 1px dashed var(--line2);
  font-size: 0.82rem;
}
.okd .checks .pass {
  color: var(--good);
}
.okd .checks .miss {
  color: var(--warn);
}
.okd .flags {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warn-bg);
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.okd details.steadman {
  margin-top: 12px;
}
.okd details.steadman summary {
  cursor: pointer;
  color: var(--s1);
  font-weight: 600;
  padding: 4px 0;
}
.okd details.steadman .grid {
  margin-top: 10px;
}

/* --- Chat (proposal 022) ------------------------------------------------------------------------------------------ */
.c-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .c-cols {
    grid-template-columns: 1fr;
  }
}
.c-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.c-row + .c-row {
  border-top: 1px solid var(--line);
}
.c-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  color: var(--ink2);
  text-decoration: none;
}
.c-link:hover {
  background: var(--hover);
}
.c-kind {
  color: var(--muted);
  display: inline-flex;
}
.c-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-row.unread .c-title {
  font-weight: 700;
  color: var(--ink);
}
.c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s1);
}
.c-date {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.c-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.c-msg {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--fill1);
  max-width: 82%;
}
.c-msg.mine {
  justify-self: end;
  background: color-mix(in srgb, var(--s1) 12%, var(--surface));
}
.c-msg.current {
  outline: 2px solid var(--s1);
  outline-offset: 2px;
}
.c-h {
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.c-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.c-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--s1);
  text-decoration: none;
}
.c-compose {
  display: grid;
  gap: 10px;
}
.c-compose textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.c-steps li + li {
  margin-top: 10px;
}

/* Sign-in (proposal 024): the Minerva image across the screen, a glass card on it. Always dark. */
body.login {
  min-height: 100vh;
  min-height: 100dvh;
  background: #09090a;
}
.login-art {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.login-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 16%;
  filter: saturate(0.9) contrast(1.03);
  animation: login-in 1.6s ease-out both;
}
@keyframes login-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.login-scrim {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 9, 10, 0.1) 0%, rgba(9, 9, 10, 0.2) 42%, rgba(9, 9, 10, 0.74) 70%, rgba(9, 9, 10, 0.9) 100%),
    linear-gradient(0deg, rgba(9, 9, 10, 0.7) 0%, rgba(9, 9, 10, 0) 30%);
}
.login-caption {
  position: fixed;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(24px, 5vh, 48px);
  z-index: 2;
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.login-caption .login-os {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.34em;
}
.login-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 40px clamp(24px, 7vw, 120px);
}
.login-card {
  width: min(400px, 100%);
  padding: 34px 34px 24px;
  border-radius: 20px;
  background: rgba(18, 18, 21, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink);
  animation: login-card 0.7s 0.2s ease-out both;
}
@keyframes login-card {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.login-logo {
  display: block;
  width: 188px;
  height: auto;
}
.login-rule {
  width: 44px;
  height: 2px;
  margin: 18px 0 20px;
  border-radius: 2px;
  background: var(--brand);
}
.login-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.login-sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13.5px;
}
.login-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.login-field span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.login-field input {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(9, 9, 10, 0.55);
  border: 1px solid var(--line2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.login-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(238, 163, 82, 0.22);
}
.btn.login-go {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn.login-go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.login-err {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bad-bg);
  border: 1px solid rgba(240, 123, 123, 0.35);
  color: var(--bad);
  font-size: 13px;
}
.login-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 12.5px;
}
.login-foot .ic {
  stroke: var(--brand);
}
.login-local {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  font-size: 11.5px;
}
@media (max-width: 760px) {
  .login-wrap {
    justify-content: center;
    padding: 24px 16px;
  }
  .login-scrim {
    background: rgba(9, 9, 10, 0.55);
  }
  .login-caption {
    display: none;
  }
  .login-card {
    padding: 28px 22px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-art img,
  .login-card {
    animation: none;
  }
}
.signout {
  margin: 0;
}
.signout .btn {
  cursor: pointer;
}

/* Live pages (proposal 025): a number that just changed glows once; a bar when the session has ended. */
.live-bump {
  animation: live-bump 1.4s ease-out;
  border-radius: 6px;
}
@keyframes live-bump {
  0% {
    background-color: color-mix(in srgb, var(--brand) 38%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 38%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}
.live-out {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  color: var(--ink2);
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .live-bump {
    animation: none;
  }
}

/* State and public-sector portals on Funding (proposal 026) */
@media (min-width: 1181px) {
  .tiles.tiles5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .tiles.tiles6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .tiles.tiles7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
.portal-notes li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.portal-notes li:last-child {
  border-bottom: 0;
}
.portal-notes p {
  margin: 4px 0 0;
  color: var(--ink2);
}

/* Instant Draft guidance (proposal 032): a choice that doesn't fit, explained, with one-click fixes */
dialog.guide {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: min(560px, calc(100% - 32px));
  margin: auto;
  height: fit-content;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 0 100vmax rgba(9, 9, 10, 0.55);
}
.guide-card {
  padding: 22px 24px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
}
.guide-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18px;
}
.guide-card p {
  margin: 0 0 16px;
  color: var(--ink2);
}
.guide-fixes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guide-fixes form {
  margin: 0;
}
.guide-fixes .btn {
  cursor: pointer;
}
.guide-hint {
  color: var(--info);
}

/* --- Instant Editor (proposal 033) --------------------------------------------------------------- */
.opts.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ed-q textarea,
.card textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.ed-actions,
.ed-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
form.inline {
  display: inline-flex;
  gap: 6px;
  margin: 0;
}
.notice.warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-style: solid;
  margin-bottom: 12px;
}
.pill.bad {
  color: var(--bad);
  background: var(--bad-bg);
}
.ed-hide td:first-child {
  width: 3em;
}
.ed-inc,
.ed-src,
.ed-queries,
.ed-log {
  margin: 6px 0;
  padding-left: 18px;
  font-size: 13.5px;
}
.ed-queries {
  list-style: none;
  padding: 0;
}
.ed-queries li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.ph {
  display: inline-block;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 0.86em;
  font-weight: 600;
  color: var(--info);
  background: var(--info-bg);
}
.ed-preview {
  max-height: 60vh;
  overflow: auto;
  line-height: 1.6;
}
.ed-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.ed-steps li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line2);
  color: var(--muted);
  font-size: 12.5px;
}
.ed-steps li strong {
  color: var(--ink);
  font-size: 14px;
}
.ed-steps li.done {
  border-color: var(--good);
}
.ed-steps li.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
}
.ed-part {
  font-weight: 600;
  margin: 6px 0;
}
.ed-doc {
  padding: 8px 18px;
}
.ed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 34%);
  gap: 18px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.ed-row:last-child {
  border-bottom: 0;
}
.ed-para {
  line-height: 1.65;
}
.ed-para p,
.ed-para h2,
.ed-para h3,
.ed-para h4 {
  margin: 4px 0;
}
.ed-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-mark {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  padding: 0 1px;
  background: color-mix(in srgb, var(--hi) 22%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--hi) 70%, transparent);
}
.ed-mark.k-question {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--info);
}
.ed-mark.k-citation {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  box-shadow: inset 0 -2px 0 var(--good);
}
.ed-mark.k-accepted {
  background: none;
  box-shadow: inset 0 -1px 0 var(--good);
}
.ed-mark del {
  color: var(--bad);
  text-decoration: line-through;
}
.ed-mark ins {
  color: var(--good);
  text-decoration: underline;
}
.ed-mark.lit,
.ed-mark:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.ed-note {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  border-left: 4px solid var(--hi);
  background: var(--surface);
  font-size: 13px;
  box-shadow: var(--shadow);
  scroll-margin-top: 90px;
}
.ed-note p {
  margin: 4px 0;
}
.ed-note:target,
.ed-note.lit {
  outline: 2px solid var(--brand);
}
.ed-note.s-accepted,
.ed-note.s-rejected,
.ed-note.s-answered {
  opacity: 0.72;
  box-shadow: none;
}
.ed-k {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.ed-kind {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ed-id {
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.ed-kind.k-question {
  color: var(--info);
}
.ed-kind.k-citation {
  color: var(--good);
}
.ed-rep {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--good-bg);
}
.ed-ref {
  font-size: 12.5px;
}
.ed-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.ed-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.ed-done {
  font-weight: 600;
  color: var(--muted);
}
.ed-drop.sending .okd-zone {
  opacity: 0.6;
}
@media (max-width: 900px) {
  .ed-row {
    grid-template-columns: 1fr;
  }
  .ed-steps,
  .opts.two {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .ed-steps,
  .opts.two {
    grid-template-columns: 1fr;
  }
}

/* The assistant (proposal 046): push-to-talk, the read-back, and each task's receipts. Phone-first: one column. */
.ask textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line, #8884);
  background: var(--panel, transparent);
  color: inherit;
  resize: vertical;
}
.ask-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0.2rem;
}
.ask-row #heard {
  flex: 1 1 8rem;
}
.btn.talk {
  min-height: 3rem;
  min-width: 9rem;
  touch-action: none;
  user-select: none;
}
.btn.talk[aria-pressed="true"] {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.tasks {
  display: grid;
  gap: 0.8rem;
}
.task-h {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
.task .said,
.task .readback,
.task .question {
  margin: 0.4rem 0;
}
.task .decide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
}
.task .decide form,
form.inline {
  display: inline;
  margin: 0;
}
.task .decide .btn {
  min-height: 2.6rem;
}
.receipts {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}
.receipts li {
  margin: 0.15rem 0;
}
.receipts .rc-check,
.receipts .rc-failed {
  color: #c62828;
}
.feedback pre {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  margin: 0.3rem 0 0;
}
.feedback {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.8rem;
  border-left: 3px solid var(--line, #8886);
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.st-waiting {
  background: #f9a825;
  color: #111;
}

/* Minerva's presence on the assistant page (proposal 046): the nebula is always slowly swirling, and becomes more
   animated while she listens, speaks or works. Two copies of the image turn steadily in opposite directions (the top
   one blended); a third, faster layer fades in only while she is active, so the change of pace never jumps. */
.orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.25rem 0 1rem;
}
.orb {
  position: relative;
  width: clamp(150px, 52vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #05030f;
  box-shadow: 0 0 22px 3px rgba(118, 84, 255, 0.35);
  transition: box-shadow 0.6s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.orb img {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  object-fit: cover;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    filter 0.8s ease;
}
.orb .orb-a {
  animation: orb-cw 60s linear infinite;
}
.orb .orb-b {
  mix-blend-mode: screen;
  opacity: 0.45;
  animation: orb-ccw 44s linear infinite;
}
.orb .orb-c {
  mix-blend-mode: screen;
  opacity: 0;
  animation: orb-cw 7s linear infinite;
  animation-play-state: paused;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(5, 3, 15, 0.9) 72%);
  pointer-events: none;
}
.orb[data-mode="idle"] {
  animation: orb-breathe 6s ease-in-out infinite;
}
.orb:not([data-mode="idle"]) .orb-c {
  opacity: 0.5;
  animation-play-state: running;
}
.orb:not([data-mode="idle"]) img {
  filter: saturate(1.25) brightness(1.08);
}
.orb[data-mode="listening"] {
  box-shadow: 0 0 40px 12px rgba(255, 64, 170, 0.55);
}
.orb[data-mode="speaking"] {
  box-shadow: 0 0 40px 12px rgba(150, 110, 255, 0.6);
  animation: orb-pulse 1.4s ease-in-out infinite;
}
.orb[data-mode="working"] {
  box-shadow: 0 0 30px 8px rgba(118, 84, 255, 0.5);
}
.orb-say {
  margin: 0.5rem 0 0;
  min-height: 1.3em;
}
@keyframes orb-cw {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orb-ccw {
  from {
    transform: scale(1.12) rotate(180deg);
  }
  to {
    transform: scale(1.12) rotate(-180deg);
  }
}
@keyframes orb-pulse {
  50% {
    transform: scale(1.035);
  }
}
@keyframes orb-breathe {
  50% {
    box-shadow: 0 0 30px 6px rgba(118, 84, 255, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb img {
    animation: none !important;
  }
}
.btn.talk[hidden] {
  display: none;
}
/* On a phone the assistant and the file explorer come first; the sidebar follows them (those pages only) */
@media (max-width: 900px) {
  .shell:has(#orb) > .side,
  .shell:has(.fx) > .side {
    order: 2;
  }
}

/* Files and Documents (proposal 046): a file explorer in the style of Windows 11's. Rounded panes, a light command
   bar, Fluent-like folder and file icons, Details or Tiles, a details pane. Phone: the panes stack. */
.fx {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
}
.fx-top {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface, var(--panel));
}
.fx-up {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 16px;
}
.fx-up:hover,
.fx-cmdbtn:hover,
.fx-nav:hover,
.fx-tile:hover,
.fx-table tbody tr:hover {
  background: var(--hover);
}
.fx-address {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  overflow-x: auto;
  white-space: nowrap;
}
.fx-address a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.fx-address a:hover {
  background: var(--hover);
}
.fx-sep {
  color: var(--muted);
}
.fx-search {
  position: relative;
  flex: 0 1 260px;
}
.fx-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}
.fx-search .ic {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.6;
}
.fx-cmd {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}
.fx-cmdgroup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fx-cmdbtn {
  padding: 4px 10px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}
.fx-cmdbtn.on {
  background: var(--nav-on, var(--hover));
  font-weight: 600;
}
.fx-main {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 270px;
  min-height: 460px;
}
.fx-pane {
  border-right: 1px solid var(--line);
  padding: 8px 6px;
  overflow-y: auto;
  max-height: 70vh;
}
.fx-nav-h {
  margin: 12px 8px 4px;
  font-size: 12px;
  color: var(--muted);
}
.fx-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  position: relative;
}
.fx-nav span:not(.fx-count) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-nav.on {
  background: var(--nav-on, var(--hover));
}
.fx-nav.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 3px;
  background: #0f6cbd;
}
.fx-nav .ic {
  width: 18px;
  height: 18px;
}
.fx-count {
  font-size: 11px;
  color: var(--muted);
}
.fx-none {
  margin: 4px 8px;
}
.fx-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #0f6cbd;
  color: #fff;
}
.fx-intro {
  margin: 2px 0 14px;
  max-width: 72ch;
}
.fx-opp {
  margin: 0 0 10px;
}
.fx-opp .fx-h {
  margin-bottom: 2px;
}
.fx-content {
  padding: 10px 14px;
  overflow: auto;
  min-width: 0;
}
.fx-h {
  font-size: 14px;
  font-weight: 600;
  margin: 6px 0 10px;
}
.fx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.fx-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}
.fx-tile.sel,
.fx-table tr.sel {
  background: var(--nav-on, var(--hover));
  border-color: #0f6cbd55;
}
.fx-tname {
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fx-table th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
}
.fx-table td {
  padding: 6px 8px;
  vertical-align: top;
}
.fx-name a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.fx-fname {
  margin-left: 28px;
}
.fx-size {
  text-align: right;
}
.fx-details {
  border-left: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.fx-details h3 {
  margin: 4px 0;
  font-size: 15px;
}
.fx-prop {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  width: 100%;
  word-break: break-word;
}
.fx-dls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fx-dl {
  font-size: 12px;
}
.fx-empty {
  margin: 40px auto;
  text-align: center;
}
.fx-status {
  display: flex;
  gap: 18px;
  padding: 4px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .fx-main {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .fx-details {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .fx-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
    gap: 4px;
  }
  .fx-nav-h,
  .fx-none {
    display: none;
  }
  .fx-nav {
    flex: 0 0 auto;
  }
  .fx-nav span:not(.fx-count) {
    max-width: 160px;
  }
  .fx-top {
    flex-wrap: wrap;
  }
  .fx-search {
    flex: 1 1 100%;
  }
  .fx-table th:nth-child(2),
  .fx-table td:nth-child(2),
  .fx-table th:nth-child(3),
  .fx-table td:nth-child(3) {
    display: none;
  }
  .fx,
  .fx-main,
  .fx-pane,
  .fx-content,
  .fx-details {
    min-width: 0;
    max-width: 100%;
  }
}
.notice-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.notice-list li {
  margin: 0.25rem 0;
}
.notice-list li.unseen {
  font-weight: 600;
}
.fx-upload,
.fx-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fx-upload input[type="file"] {
  max-width: 220px;
}
.fx-upload input[type="text"] {
  flex: 1 1 220px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}
.fx-upload select,
.fx-tag select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}

/* Document preview (proposal 047): pages on a grey desk, scrolled like Word's print layout; read-only. */
.wv-wrap {
  display: grid;
  gap: 10px;
}
.wv-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.wv-name {
  font-weight: 600;
}
.wv-dls {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* the pages keep their size and the viewer scrolls, like Word's print layout; --wv-w is the page width (zoom, 048) */
.wv {
  --wv-w: min(816px, 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: safe center;
  gap: 18px;
  padding: 22px 12px;
  border-radius: 12px;
  background: #e8e8ec;
  height: calc(100vh - 210px);
  min-height: 420px;
  overflow: auto;
}
:root[data-theme="dark"] .wv {
  background: #2b2b30;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wv {
    background: #2b2b30;
  }
}
.wv-page {
  position: relative;
  flex: none; /* never squeezed to fit the viewer */
  width: var(--wv-w);
  aspect-ratio: 8.5 / 11; /* a Letter page; a page with more text grows instead of cutting it off */
  container-type: inline-size;
  background: #fff;
  color: #1b1b1b;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.12);
}
.wv-sheet {
  padding: 9.5cqw 11.8cqw;
  font-family: Aptos, Calibri, "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 1.78cqw; /* 11 pt at 100%: the text zooms with the page */
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.wv-page.wv-img {
  aspect-ratio: auto; /* the image's own size (its width and height), whatever the PDF's page size */
}
.wv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82em;
  margin-bottom: 1em;
}
.wv-table th,
.wv-table td {
  border: 1px solid #d0d0d6;
  padding: 0.25em 0.45em;
  text-align: left;
  vertical-align: top;
}
.wv-table th {
  background: #eef1f5;
  font-weight: 600;
}
.wv-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.wv-tools[hidden] {
  display: none;
}
.wv-tools .btn {
  min-width: 36px;
  justify-content: center;
}
.wv-zoom {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wv-at {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: center;
}
.wv-sheet h1,
.wv-sheet h2,
.wv-sheet h3,
.wv-sheet h4 {
  color: #0f4761;
  margin: 0.9em 0 0.4em;
  line-height: 1.25;
}
.wv-sheet .wv-title {
  font-size: 1.9em;
  margin-top: 0;
}
.wv-sheet h2 {
  font-size: 1.4em;
}
.wv-sheet h3 {
  font-size: 1.18em;
}
.wv-sheet p {
  margin: 0 0 0.7em;
}
.wv-sheet .wv-status {
  color: #595959;
  font-style: italic;
  font-size: 0.85em;
}
.wv-sheet .wv-bullet {
  padding-left: 1.4em;
  text-indent: -1em;
}
.wv-sheet mark {
  background: #fff3a3;
}
.wv-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9em;
}
.wv-img img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.wv-num {
  position: absolute;
  bottom: 1.6cqw;
  right: 3cqw;
  font-size: max(9px, 1.35cqw);
  color: #8a8a8a;
}

/* the assistant shows the current exchange; its history is under Sessions (proposal 048) */
.task .reply {
  margin: 8px 0;
}
.task .reply p {
  margin: 0 0 6px;
}
.task .reply .rc-answer {
  font-size: 1.06em;
  font-weight: 500;
}
.task .reply .rc-sources {
  font-size: 0.85em;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.choices {
  margin: 6px 0 8px;
  padding-left: 1.6em;
}
.choices li {
  margin: 4px 0;
}
.choices .ch-t {
  font-weight: 500;
}
.task .latest {
  margin: 6px 0 0;
}
/* the Sessions panel (proposals 049, 050): fixed at the screen's right edge, it slides out by its handle and stays
   put while the page scrolls; its list scrolls inside it */
.as-pop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 16px 10px 10px;
  border-left: 1px solid var(--line);
  background: var(--side-bg);
  transform: translateX(100%);
}
:root[data-pop="open"] .as-pop {
  transform: none;
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.18);
}
:root:not([data-pop="open"]) .as-pop > :not(.pop-handle) {
  visibility: hidden;
}
:root.pop-ready .as-pop {
  transition: transform 0.28s ease;
}
:root.pop-ready .as-pop > :not(.pop-handle) {
  transition: visibility 0.28s;
}
@media (min-width: 1180px) {
  /* a wide screen: the page moves over, so the panel covers nothing */
  :root[data-pop="open"] .main {
    padding-right: 300px;
  }
  :root.pop-ready .main {
    transition: padding-right 0.28s ease;
  }
}
/* the handle, on the panel's outer edge: at the screen's right edge while the panel is in */
.pop-handle {
  position: absolute;
  top: 132px;
  left: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 30px;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--side-bg);
  color: var(--ink2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: -4px 2px 10px rgba(0, 0, 0, 0.1);
}
.pop-handle:hover {
  color: var(--ink);
}
.pop-handle-l {
  writing-mode: vertical-rl;
}
.pop-chev {
  font-size: 15px;
  line-height: 1;
}
:root.pop-ready .pop-chev {
  transition: transform 0.28s ease;
}
:root[data-pop="open"] .pop-chev {
  transform: rotate(180deg);
}
.pop-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 8px;
}
.pop-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}
.pop-x:hover {
  background: var(--hover);
  color: inherit;
}
.pop-x[hidden] {
  display: none;
}
.pop-new {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.pop-new:hover {
  background: var(--hover);
}
.pop-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 6px 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.pop-day {
  margin: 10px 10px 4px;
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pop-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
}
.pop-item:hover {
  background: var(--hover);
}
.pop-item.on {
  background: var(--hover);
  font-weight: 600;
}
.pop-t {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pop-time {
  font-size: 11.5px;
  color: var(--muted);
}
.pop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.pop-dot.st-done {
  background: #3fb27f;
}
.pop-dot.st-running,
.pop-dot.st-queued {
  background: #4c8dff;
}
.pop-dot.st-waiting {
  background: #e8a23a;
}
.pop-dot.st-failed {
  background: #e05a5a;
}
.pop-notices {
  border-top: 1px solid var(--line);
  padding: 8px 6px 2px;
  max-height: 45%;
  overflow-y: auto;
}
.pop-notices > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 2px 4px;
}
.pop-notices .notices {
  margin: 8px 0 0;
  padding: 10px;
  box-shadow: none;
}
.pop-foot {
  padding: 8px 10px 2px;
  text-decoration: none;
}
@media (max-width: 900px) {
  /* a narrow screen: the panel slides in over the page */
  .as-pop {
    z-index: 40;
    width: min(320px, 86vw);
  }
  .pop-handle {
    left: -26px;
    width: 26px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root.pop-ready .as-pop,
  :root.pop-ready .main,
  :root.pop-ready .pop-chev {
    transition: none;
  }
}
.session {
  padding: 12px 16px;
  margin-bottom: 12px;
}
.sess-h {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.sess-task {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.sess-task > summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.task-full {
  padding: 8px 0 4px 14px;
}
.fx-info {
  margin-left: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.fx-open {
  margin: 4px 0 6px;
}

/* A collapsible sidebar (proposal 047): « collapses it to an icon rail, » brings it back; the choice is a cookie, so
   pages render collapsed with no script. On a phone, collapsed hides the menu behind one button. */
.side-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  margin: -4px -4px 4px 0;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.side-toggle:hover {
  background: var(--hover);
  color: inherit;
}
.side-toggle-l {
  font-size: 12px;
}
@media (min-width: 901px) {
  :root[data-side="collapsed"] .shell {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  :root[data-side="collapsed"] .side {
    padding: 14px 8px;
    align-items: center;
  }
  :root[data-side="collapsed"] .side-toggle {
    align-self: center;
    margin: 0 0 8px;
  }
  :root[data-side="collapsed"] .side-toggle-l,
  :root[data-side="collapsed"] .brand,
  :root[data-side="collapsed"] .os,
  :root[data-side="collapsed"] .nav-h,
  :root[data-side="collapsed"] .promise,
  :root[data-side="collapsed"] .side .nav span:not(.badge) {
    display: none;
  }
  :root[data-side="collapsed"] .side nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  :root[data-side="collapsed"] .side .nav {
    position: relative;
    justify-content: center;
    width: 44px;
    padding: 9px 0;
  }
  :root[data-side="collapsed"] .side .nav .badge {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 10px;
    padding: 0 4px;
  }
}
@media (max-width: 900px) {
  .side-toggle {
    align-self: flex-start;
    margin: 0 0 6px;
  }
  :root[data-side="collapsed"] .side nav,
  :root[data-side="collapsed"] .side .os {
    display: none;
  }
}
.receipts .rc-answer {
  font-size: 1.06em;
  font-weight: 500;
}
.receipts .rc-inbox,
.receipts .rc-calendar {
  white-space: normal;
}
/* Files and Documents in a window of its own (proposal 050): the explorer fills the window, no side panel or top bar */
.in-window .shell {
  grid-template-columns: minmax(0, 1fr);
}
.in-window .side,
.in-window .top,
.in-window .watermark {
  display: none;
}
.in-window .body {
  padding: 12px 14px 16px;
}

/* Minerva Stats (proposal 063): a rail of analyses beside the chat; results as SPSS-style tables. The root is
   .stats-app, not .stats: Instant Draft's checks panel owns .stats (and boxes every div inside it) */
.stats-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.stats-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 120px);
}
.stats-new {
  justify-content: center;
}
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding-right: 2px;
}
.stats-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink2);
  text-decoration: none;
  border: 1px solid transparent;
}
.stats-item span {
  font-size: 13.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.stats-item small,
.stats-empty {
  color: var(--muted);
  font-size: 12px;
}
.stats-item:hover {
  background: var(--hover);
}
.stats-item.on {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.stats-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 1040px;
  min-height: calc(100vh - 120px);
}
.stats-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
}
.stats-msg {
  max-width: 760px;
  min-width: 0;
}
.stats-msg.wide {
  max-width: none;
}
.stats-msg.me {
  align-self: flex-end;
  background: var(--info-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
}
.stats-msg.me p {
  margin: 0;
  white-space: pre-wrap;
}
.stats-attach {
  display: inline-block;
  font-size: 12px;
  color: var(--info);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 6px;
}
.stats-text {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.stats-text p,
.stats-msg .notice p {
  margin: 0;
}
.stats-card {
  border-radius: 4px var(--r) var(--r) var(--r);
}
.stats-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 15px;
}
.stats-why,
.stats-note {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 8px;
}
.stats-summary {
  border-left: 3px solid var(--s1);
  padding: 4px 0 4px 14px;
  margin: 10px 0 14px;
}
.stats-summary p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
}
.stats-app .pill.good {
  color: var(--good);
  background: var(--good-bg);
}
.stats-app .pill.warn {
  color: var(--warn);
  background: var(--warn-bg);
}
.stats-working {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
}
.stats-working span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s1);
  animation: stats-pulse 1.2s ease-in-out infinite;
}
.stats-working span:nth-child(2) {
  animation-delay: 0.15s;
}
.stats-working span:nth-child(3) {
  animation-delay: 0.3s;
  margin-right: 4px;
}
@keyframes stats-pulse {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stats-working span {
    animation: none;
    opacity: 0.7;
  }
}
.stats-composer {
  position: sticky;
  bottom: 12px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
}
.stats-composer textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  min-height: 48px;
  max-height: 320px;
  outline: none;
}
.stats-composer:focus-within {
  border-color: var(--s1);
}
/* Stats file input, manual procedures and spreadsheet editor. */
.stats-composer:has(.stats-editor[open]) {
  position: static;
}
.stats-main.stats-dragging {
  outline: 3px dashed var(--s1);
  outline-offset: 6px;
}
.stats-upload,
.stats-grid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.stats-upload input[type="file"] {
  max-width: 100%;
}
.stats-upload button[hidden] {
  display: none;
}
.stats-upload > label {
  display: none;
}
.stats-file-name,
.stats-note {
  color: var(--muted);
}
.stats-editor {
  margin: 12px 0;
}
.stats-editor summary,
.stats-analysis summary {
  cursor: pointer;
  font-weight: 600;
}
.stats-editor fieldset,
.stats-test-form > fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}
.stats-scroll {
  max-height: 320px;
  overflow: auto;
  margin: 12px 0;
}
.stats-grid {
  border-collapse: collapse;
}
.stats-grid th,
.stats-grid td {
  padding: 2px;
  border: 1px solid var(--line2);
}
.stats-grid input {
  width: 130px;
  padding: 8px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
}
.stats-grid input:focus {
  outline: 2px solid var(--s1);
}
.stats-grid thead {
  position: sticky;
  top: 0;
  background: var(--panel);
}
.stats-grid th input {
  font-weight: 600;
}
.stats-analysis {
  margin: 16px 0;
}
/* Stats file preview, Data view and chart picker (proposal 065). */
.stats-preview[hidden],
.stats-preview [hidden] {
  display: none;
}
.stats-preview {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line2);
  border-radius: 8px;
}
.stats-preview-h,
.stats-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.stats-data,
.stats-charts {
  margin: 16px 0;
}
.stats-data summary,
.stats-charts summary {
  cursor: pointer;
  font-weight: 600;
}
.stats-sheet {
  border-collapse: collapse;
  font-size: 14px;
}
.stats-sheet th,
.stats-sheet td {
  padding: 6px 10px;
  border: 1px solid var(--line2);
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-sheet thead {
  position: sticky;
  top: 0;
  background: var(--panel);
}
.stats-sheet tbody th {
  color: var(--muted);
  font-weight: 400;
}
.stats-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line2);
}
.stats-pick-t {
  min-width: 160px;
  font-weight: 600;
}
.stats-pick-f {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.stats-pick:not(:has(input:checked)) .stats-pick-f {
  opacity: 0.6;
}
.stats-charts form > label {
  display: inline-block;
  margin: 12px 12px 0 0;
}
.stats-test-form {
  margin-top: 12px;
}
.stats-test-args {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.stats-test-args fieldset {
  border: 1px solid var(--line2);
  border-radius: 8px;
  max-height: 220px;
  overflow: auto;
}
.stats-test-args label {
  display: block;
  margin: 6px 0;
}
.stats-test-form select,
.stats-test-form input[type="number"] {
  max-width: 100%;
  padding: 8px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: 6px;
}
.stats-input-error {
  color: var(--red, #c44848);
}
.stats-input-error:empty {
  display: none;
}
.stats-result-graph {
  margin-top: 12px;
}
.stats-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stats-send small {
  color: var(--muted);
}
.stats-hero {
  margin-bottom: 14px;
}
.stats-hero h1 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.stats-hero p {
  color: var(--ink2);
  max-width: 64ch;
}
.stats-examples {
  margin: 10px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats-examples li {
  font-size: 13px;
  color: var(--ink2);
  background: var(--fill1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.stats-promise {
  font-size: 13px;
  color: var(--good) !important;
}
.stats-app .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.stats-vars summary {
  cursor: pointer;
  color: var(--s1);
  font-size: 13.5px;
  margin: 4px 0 8px;
}
.stats-vars .btn {
  margin-top: 10px;
}
.stats-in,
.stats-vars select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px 7px;
  min-width: 0;
  width: 100%;
}
.stats-inc {
  display: block;
  font-size: 12px;
  color: var(--warn);
  margin-top: 4px;
}
/* the tables: thin rules, tabular figures, grouped headers centred, as a statistics report prints them */
.stats-tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stats-table {
  margin: 0;
}
.stats-table figcaption {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 6px;
  color: var(--ink);
}
.stats-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.stats-scroll table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stats-scroll th,
.stats-scroll td {
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
  padding: 6px 10px;
  border-bottom: 1px solid var(--grid-v);
  white-space: nowrap;
}
.stats-scroll thead th {
  background: var(--fill1);
  color: var(--ink2);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--grid-v);
}
.stats-scroll tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink2);
  position: sticky;
  left: 0;
  background: var(--surface);
}
.stats-scroll td {
  text-align: right;
  color: var(--ink);
}
.stats-scroll tbody tr:last-child th,
.stats-scroll tbody tr:last-child td {
  border-bottom: 0;
}
.stats-scroll tbody tr:hover td,
.stats-scroll tbody tr:hover th {
  background: var(--hover);
}
@media (max-width: 900px) {
  .stats-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-rail {
    position: static;
    max-height: none;
  }
  .stats-list {
    flex-direction: row;
    overflow-x: auto;
  }
  .stats-item {
    min-width: 180px;
  }
  .stats-main {
    min-height: 0;
  }
}
/* Minerva Stats dashboards in Minerva (the grid, slicers and charts are viz.css, shared with exports) */
.stats-rail-h {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 10px 4px 2px;
}
.dash-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-titleform,
.dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-actions form {
  margin: 0;
}
.dash-title {
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: -8px;
  min-width: 0;
  width: min(560px, 60vw);
}
.dash-title:hover,
.dash-title:focus {
  border-color: var(--line2);
  background: var(--search);
  outline: none;
}
.dash-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-tabs form {
  margin: 0;
}
.dash-tab {
  font: inherit;
  font-size: 13px;
  color: var(--ink2);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 13px;
  cursor: pointer;
}
.dash-tab.on {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.dash-tab.add {
  border-style: dashed;
  color: var(--muted);
}
.stats-app .tile-surface {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.dash-menu {
  position: relative;
}
.dash-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: 1px 8px;
}
.dash-menu summary::-webkit-details-marker {
  display: none;
}
.dash-menu form {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px;
  font-size: 12.5px;
  color: var(--ink2);
}
.dash-menu label,
.dash-add label,
.dash-pageform label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}
.dash-menu select,
.dash-add select,
.dash-add input,
.dash-pageform input,
.stats-build input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--search);
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 6px 9px;
}
.dash-builder summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.dash-add {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.dash-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 10px;
}
.dash-check {
  font-size: 13px;
  color: var(--ink2);
}
.dash-pageform {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dash-empty {
  grid-column: span 12;
  padding: 24px 4px;
}
.stats-build {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.stats-build input {
  flex: 1;
  min-width: 220px;
}

/* Delete and the Trash (proposal 066): a row's Delete, the right-click menu, Empty Trash. */
.trash-f {
  display: inline-flex;
  margin: 0;
}
.trash-f[hidden] {
  display: none;
}
.icon-btn {
  padding: 6px 8px;
  color: var(--muted);
}
.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--bad, #c0392b);
}
.task-h .trash-f {
  margin-left: auto;
}
.pop-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pop-day .icon-btn,
.stats-row .icon-btn {
  padding: 2px 6px;
}
.session > .trash-f {
  float: right;
}
.stats-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stats-row > .stats-item {
  flex: 1;
  min-width: 0;
}
.stats-row > .trash-f {
  opacity: 0;
}
.stats-row:hover > .trash-f,
.stats-row:focus-within > .trash-f {
  opacity: 1;
}
.row-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.row-menu-i {
  padding: 8px 12px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row-menu-i:hover,
.row-menu-i:focus {
  background: var(--line2);
  outline: none;
}
.row-menu-i.danger {
  color: var(--bad, #c0392b);
}
.trash-empty form {
  margin-top: 8px;
}