/* BOS shared stylesheet.

   BOS is the switchboard between Google Workspace and the applications and agents that work
   through it. The interface is set in IBM Plex: Sans for what people read, Mono for what a
   machine also reads (URLs, ids, keys), and the two share one skeleton so a URL sits inside a
   sentence without a change of voice. Colour is mineral paper and pine ink; viridian marks
   actions and the live state, brass marks secrets. Structure carries information rather than
   decoration: a rule under the current page in the nav, a coloured edge on a banner and on a
   one-time key, a dot on a status badge. */

:root {
  --paper: #f1f4f2;
  --surface: #ffffff;
  --well: #e9eeeb;
  --ink: #14211f;
  --ink-soft: #55635f;
  --ink-faint: #8a9691;
  --line: #d5ddd9;
  --line-strong: #b9c4bf;
  --signal: #0e6e5c;
  --signal-ink: #0a5546;
  --signal-tint: #e1f0eb;
  --brass: #8f621a;
  --brass-tint: #fbf4e3;
  --brass-line: #e7d3a3;
  --danger: #a63d2f;
  --danger-tint: #fbeae6;
  --danger-line: #f0c7bf;
  --ok: #1f7a4d;
  --ok-tint: #e2f3e9;
  --ok-line: #b9e1c9;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 6px;
  --radius-lg: 10px;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
a { color: var(--signal-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* --- Chrome ------------------------------------------------------------------------------ */
header.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
header.top .brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 1rem/1 var(--mono); letter-spacing: .06em;
  color: var(--ink); text-decoration: none;
}
header.top .brand::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 2px;
  background: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint);
}
header.top nav { display: flex; align-self: stretch; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
header.top nav a {
  display: inline-flex; align-items: center; padding: 0 .6rem;
  font-size: .9rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
header.top nav a:hover { color: var(--ink); }
header.top nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
header.top .who { margin-left: auto; display: flex; align-items: center; gap: .65rem; font-size: .875rem; white-space: nowrap; }
header.top .who .org { padding: .1rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
header.top .who .org a { margin-left: .3rem; }
header.top .who button { padding: .3rem .7rem; font-size: .82rem; }

main { max-width: 1080px; margin: 2rem auto 3rem; padding: 0 1.5rem; }
footer { max-width: 1080px; margin: 0 auto 2rem; padding: 0 1.5rem; font-size: .8rem; color: var(--ink-faint); }

/* --- Type -------------------------------------------------------------------------------- */
h1 { font-size: 1.65rem; line-height: 1.2; font-weight: 600; letter-spacing: -.012em; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; line-height: 1.3; font-weight: 600; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .35rem; }
h4 { font-size: .9rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.card > h1:first-child, .card > h2:first-child, .card > h3:first-child, section > h2:first-child { margin-top: 0; }
h1 .badge, h2 .badge { vertical-align: middle; margin-left: .35rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
h1 + p.muted { max-width: var(--measure); margin-bottom: 1.5rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
ul, ol { padding-left: 1.25rem; }
blockquote { margin: .5rem 0; padding: .25rem 0 .25rem .9rem; border-left: 2px solid var(--line-strong); }

code, pre, .token { font-family: var(--mono); }
code { font-size: .86em; padding: .08em .35em; border-radius: 4px; background: var(--well); color: var(--ink); overflow-wrap: anywhere; }
pre { background: var(--ink); color: #e6ece9; padding: .9rem 1rem; border-radius: var(--radius); overflow: auto; font-size: .83rem; line-height: 1.55; }
pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.token {
  display: block; margin: .5rem 0; padding: .65rem .85rem;
  font-size: .9rem; word-break: break-all;
  background: var(--brass-tint); border: 1px solid var(--brass-line); border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}

/* --- Surfaces ---------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.card.empty { text-align: center; padding: 2.5rem 1.5rem; border-style: dashed; }
.card.empty p { margin: 0 0 1rem; }
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 1.5rem; }
.grid > .card { margin-bottom: 0; }
form .grid { gap: .75rem 1.25rem; margin-bottom: .5rem; }

table { width: 100%; border-collapse: collapse; font-size: .925rem; }
th, td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
tr:last-child td { border-bottom: 0; }
main > table {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 1.5rem;
}
main > table th { background: var(--paper); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .05rem .55rem; border-radius: 999px; border: 1px solid transparent;
  font-size: .78rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--well); color: var(--ink-soft);
}
.badge.ok { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }
.badge.overdue, .badge.unreachable { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.badge.pending { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.badge.ok::before, .badge.overdue::before, .badge.unreachable::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

.timeline { padding: 0; margin: 0; }
.timeline li { list-style: none; position: relative; padding: .6rem 0 .6rem 1.1rem; border-left: 2px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--signal); }
.timeline li p { display: inline; }
.kv dt { color: var(--ink-soft); font-size: .8rem; margin-top: .65rem; }
.kv dd { margin: 0; }
details summary { cursor: pointer; color: var(--signal-ink); margin-top: .75rem; font-weight: 500; }

/* --- Controls ---------------------------------------------------------------------------- */
label { font-size: .85rem; color: var(--ink-soft); }
form.stack label { display: block; margin: .75rem 0 .25rem; }
form.stack > label:first-child, form.stack > h3 + label, form.stack > p + label { margin-top: 0; }
form.stack + form.stack, form.stack + h2 { margin-top: 1.5rem; }
form.inline { display: inline; }
input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  width: 100%; padding: .5rem .65rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint); }
input[type="checkbox"], input[type="radio"] { width: auto; }
textarea { min-height: 6rem; resize: vertical; }
button {
  font: inherit; font-size: .9rem; font-weight: 500;
  padding: .5rem .95rem; border-radius: var(--radius);
  border: 1px solid var(--signal); background: var(--signal); color: #fff; cursor: pointer;
}
button:hover { background: var(--signal-ink); border-color: var(--signal-ink); }
button.quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.quiet:hover { background: var(--paper); border-color: var(--ink-faint); }
button.small { padding: .25rem .6rem; font-size: .8rem; }
button.danger { color: var(--danger); border-color: var(--danger-line); }
button.danger:hover { background: var(--danger-tint); border-color: var(--danger); }
a > button { text-decoration: none; }

/* --- Page head and banners --------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { margin: 0; max-width: var(--measure); }
.page-head > button { flex: none; margin-top: .25rem; }
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; margin-bottom: 1.5rem;
  background: var(--surface); border: 1px solid; border-left-width: 3px; border-radius: var(--radius);
}
.flash.ok { border-color: var(--ok-line); border-left-color: var(--ok); color: var(--ok); }
.flash.error { border-color: var(--danger-line); border-left-color: var(--danger); color: var(--danger); }
.flash .dismiss { flex: none; background: transparent; border: 0; color: inherit; font-size: 1.15rem; padding: 0 .25rem; line-height: 1; }
.flash .dismiss:hover { background: transparent; }

/* --- Developers: the values ledger ------------------------------------------------------- */
.card.minted { border-color: var(--brass-line); background: var(--brass-tint); }
.card.minted .token { background: var(--surface); }
dl.values { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0; margin: .5rem 0 0; }
dl.values .value { display: contents; }
dl.values dt { color: var(--ink-soft); font-size: .875rem; padding: .9rem 1.5rem .9rem 0; border-top: 1px solid var(--line); }
dl.values dd { margin: 0; min-width: 0; padding: .75rem 0; border-top: 1px solid var(--line); }
dl.values .value:first-child dt, dl.values .value:first-child dd { border-top: 0; }
.copyable { display: inline-flex; max-width: 100%; align-items: stretch; vertical-align: middle; }
.copyable code {
  flex: 1 1 auto; min-width: 0; word-break: break-all;
  font-size: .875rem; line-height: 1.5; padding: .3rem .65rem;
  background: var(--paper); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
.copyable button { flex: none; border-radius: 0 var(--radius) var(--radius) 0; padding: .3rem .65rem; font-size: .8rem; }
.help { margin: .45rem 0 0; font-size: .85rem; color: var(--ink-soft); max-width: var(--measure); }
.help p { margin: 0; }

/* --- Developers: registrations ----------------------------------------------------------- */
.integration-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.integration-head h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 0 0 .2rem; font-size: 1.1rem; }
.integration-head h3 code { font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.integration-head p { margin: 0; font-size: .85rem; }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.kv.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2rem; margin: 1.25rem 0 0; }
.kv.two-col dt { margin: 0 0 .3rem; }
.kv.two-col dd code { display: inline-block; margin: .1rem 0; }
.integration h4 { margin: 1.5rem 0 .4rem; }
table.keys { font-size: .9rem; }
table.keys td.actions { text-align: right; white-space: nowrap; }
table.keys tr.revoked td { color: var(--ink-soft); }
.hint { font-size: .85rem; margin: .6rem 0 0; }
.integration-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.integration-actions .muted { margin-left: auto; }

/* --- Dialogs ----------------------------------------------------------------------------- */
dialog.modal {
  width: min(34rem, calc(100vw - 2rem)); padding: 0; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(20, 33, 31, .25);
}
dialog.modal::backdrop { background: rgba(20, 33, 31, .5); }
dialog.modal[open] { animation: rise .16s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
dialog.modal form { padding: 1.5rem 1.75rem; margin: 0; }
dialog.modal h3 { margin: 0 0 1rem; font-size: 1.2rem; }
dialog.modal label .muted { font-weight: 400; margin-left: .35rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }

/* --- Long-form (the integration guide) --------------------------------------------------- */
.card.prose { max-width: 80ch; margin-left: auto; margin-right: auto; padding: 2rem 2.25rem; }
.prose h1 { font-size: 1.85rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.prose h3 { margin-top: 1.5rem; }
.prose p, .prose li { line-height: 1.6; }
.prose li { margin-bottom: .25rem; }
.prose table { margin: 1rem 0; font-size: .9rem; }
.prose td, .prose th { vertical-align: top; }
.prose pre { margin: 1rem 0; }

/* --- Small screens ----------------------------------------------------------------------- */
@media (max-width: 720px) {
  header.top { position: static; flex-wrap: wrap; gap: .75rem 1rem; padding: .6rem 1rem; }
  header.top nav { order: 3; width: 100%; margin: 0 -1rem; padding: 0 1rem; border-top: 1px solid var(--line); }
  header.top nav a { padding: .55rem .5rem; }
  header.top .who { margin-left: auto; }
  main { margin-top: 1.25rem; padding: 0 1rem; }
  .card { padding: 1rem; }
  .card.prose { padding: 1.25rem 1rem; }
  .page-head, .integration-head, .badges { flex-direction: column; align-items: stretch; }
  .badges { flex-direction: row; }
  dl.values { grid-template-columns: 1fr; gap: 0; }
  dl.values dt { padding-bottom: 0; }
  dl.values dd { border-top: 0; padding-top: .35rem; }
  .kv.two-col { grid-template-columns: 1fr; }
  table.keys { display: block; overflow-x: auto; }
}
/* --- Landing: the front door ------------------------------------------------------------- */
/* Two columns: what BOS does and the one button on the left; on the right the argument for
   trusting it, a ledger of recorded actions in the product's own vocabulary, set on ink so it
   is the single dark thing on the page. Nothing else is boxed. The ledger rows arrive one after
   another on load, the page's only motion; a person who prefers none gets them at once. */
.landing {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 3rem 4rem;
  align-items: center; min-height: calc(100vh - 12rem); padding: 1.5rem 0 2rem;
}
.landing .flash { margin-bottom: 1.75rem; max-width: 34rem; }
.landing h1 {
  font-size: clamp(2rem, 4.2vw, 2.85rem); line-height: 1.08; letter-spacing: -.022em;
  max-width: 14ch; margin: 0 0 1.25rem;
}
.landing .lede { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0 0 2rem; }
.landing .lede strong { color: var(--ink); font-weight: 500; }
.landing form.signin { margin: 0; }
.landing .google {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .7rem 1.15rem .7rem .9rem; font-size: 1rem; font-weight: 500;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(20, 33, 31, .06);
}
.landing .google:hover { background: var(--surface); border-color: var(--ink-faint); box-shadow: 0 2px 6px rgba(20, 33, 31, .1); }
.landing .google svg { flex: none; }
.landing .note { margin: 1rem 0 0; font-size: .9rem; color: var(--ink-soft); max-width: 42ch; }

.ledger {
  min-width: 0; background: var(--ink); color: #dfe7e3; border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem 1.15rem; font-size: .9rem;
}
.ledger h2 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 500; color: #a8b6b0; }
.ledger .entries { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: .75rem; row-gap: .1rem;
  padding: .65rem 0; border-bottom: 1px solid rgba(223, 231, 227, .14);
}
.ledger li:last-child { border-bottom: 0; }
.ledger .when { grid-row: 1 / span 2; font-variant-numeric: tabular-nums; color: #a8b6b0; }
.ledger .what {
  font-family: var(--mono); font-size: .84rem; line-height: 1.5; color: #dfe7e3;
  background: transparent; padding: 0; border-radius: 0; overflow-wrap: anywhere;
}
.ledger .what::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; margin: 0 .55rem .1rem 0; background: #5fc4a8; }
.ledger .detail { grid-column: 2; font-size: .875rem; color: #a8b6b0; }
.ledger li.revoked .what { font-family: var(--sans); font-size: inherit; color: #e2bf7d; }
.ledger li.revoked .what::before { background: #e2bf7d; border-radius: 1px; }
.ledger li.revoked .detail { color: #cfae74; }
.ledger .foot { margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.5; color: #a8b6b0; max-width: 44ch; }
.ledger li { animation: ledger-in .45s ease-out both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes ledger-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  .landing { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; min-height: 0; padding-top: .5rem; align-items: start; }
  .landing h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] { animation: none; }
  .ledger li { animation: none; }
}

/* --- Lists of things an admin manages: one card, rows inside ----------------------------- */
/* A row reads left to right: what it is (name, one line of description, a fold for detail),
   then what you can do to it, right-aligned on the name's baseline so every row's actions
   line up down the page. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.rows > li:first-child { border-top: 0; padding-top: .25rem; }
.rows > li:last-child { padding-bottom: .25rem; }
.row-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 600; }
.row-title .muted { font-weight: 400; font-size: .85rem; }
.row-main p { margin: .2rem 0 0; max-width: var(--measure); }
.row-main details summary { margin-top: .4rem; font-size: .875rem; }
.row-main details dl { margin: .5rem 0 0; max-width: var(--measure); }
.row-main details dt { font-size: .8rem; color: var(--ink-soft); margin-top: .6rem; }
.row-main details dd { margin: .1rem 0 0; font-size: .9rem; }
.row-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.row-actions form { display: inline; margin: 0; }
.row-actions button, .row-actions .button-link { padding: .3rem .7rem; font-size: .85rem; }
.card > .section-head + .rows { margin-top: .25rem; }
.card .empty-note { max-width: none; }
.empty-note { margin: 0; padding: 1.5rem 0; text-align: center; color: var(--ink-soft); }
.empty-note strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: .2rem; }
.card p, .card :not(.rows) > li { max-width: var(--measure); }
#people td { vertical-align: middle; }

/* --- Section heads inside a card: title left, its action right ---------------------------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.section-head h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.section-head h2 .muted { font-size: .85rem; font-weight: 400; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
td.person { line-height: 1.35; }
td.person > .muted:last-child { display: block; font-size: .85rem; }

/* --- Tables inside cards ------------------------------------------------------------------- */
.card table { margin: 0; }
td.when { white-space: nowrap; color: var(--ink-soft); font-size: .875rem; }
td.actions, th.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline; }
td.actions button, td select, td .control button { padding: .3rem .7rem; font-size: .85rem; }
td select { width: auto; padding-top: .3rem; padding-bottom: .3rem; }
.control { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }

/* --- Members tab: policies held as chips, and the panel they are dragged from -------------- */
.pill {
  display: inline-block; padding: .1rem .55rem; border: 1px solid transparent;
  border-radius: 999px; background: var(--signal-tint); color: var(--signal-ink);
  font-size: .82rem; white-space: nowrap;
}
.pill[draggable="true"] { cursor: grab; }
.pill.off { background: var(--well); color: var(--ink-soft); }
form.chip { display: inline-flex; align-items: center; gap: .1rem; margin: 0 .35rem .35rem 0; }
form.chip button { padding: 0 .35rem; line-height: 1.5; border-color: transparent; background: transparent; color: var(--ink-soft); }
form.chip button:hover { color: var(--danger); background: transparent; }
#people td.held { min-width: 16rem; }
#people td.held .drop-hint { font-size: .85rem; }
#people tr.drop-hover td { background: var(--signal-tint); }
#people tr.drop-hover td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
.side-panel {
  position: fixed; top: 4.25rem; right: 1rem; bottom: 1rem; width: 19rem; z-index: 4;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: 0 8px 28px rgba(20, 33, 31, .12);
}
.side-panel .section-head { margin-bottom: .5rem; }
.side-panel > p { font-size: .875rem; }
.side-panel.drop-hover { border-color: var(--danger); background: var(--danger-tint); }
.policy-card {
  display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; margin-bottom: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  cursor: grab; font-size: .9rem;
}
.policy-card:hover { border-color: var(--signal); }
.policy-card:active { cursor: grabbing; }
.policy-card .muted { font-size: .8rem; }
/* The open panel takes its width from the page, not from the content column, so the column
   stays centred in what is left and the footer moves with it. */
body.with-side-panel main, body.with-side-panel footer {
  margin-right: 20.5rem; margin-left: max(0px, calc((100vw - 20.5rem - 1080px) / 2));
}
@media (max-width: 900px) {
  .side-panel { left: 1rem; top: auto; height: 50vh; width: auto; }
  body.with-side-panel main, body.with-side-panel footer { margin-left: auto; margin-right: auto; }
  body.with-side-panel { padding-bottom: 52vh; }
}
@media (max-width: 720px) {
  .rows > li { grid-template-columns: 1fr; }
  .row-actions { justify-content: flex-start; }
  .card { overflow-x: auto; }
}

/* --- Home: what your agents can use --------------------------------------------------------- */
.tool-group { border-top: 1px solid var(--line); padding: .25rem 0; }
.tool-group summary { display: flex; align-items: baseline; gap: .75rem; margin: 0; padding: .6rem 0; color: var(--ink); font-weight: 500; }
.tool-group-title { font-weight: 600; }
.tool-group-actions { display: flex; gap: .4rem; margin: 0 0 .5rem; }
.tool-group-actions form { margin: 0; }
.tool-group-actions button { padding: .25rem .65rem; font-size: .8rem; }
.tool-group-actions button[disabled] { opacity: .45; cursor: default; }
.tool-list > li { padding: .6rem 0; }
.tool-list .row-title code { font-size: .85rem; }
.tool-list .row-main p { font-size: .85rem; }
form.switch { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
form.switch label { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-size: .875rem; cursor: pointer; }
a.button-link { display: inline-flex; align-items: center; flex: none; padding: .5rem .95rem; border-radius: var(--radius); font-size: .9rem; font-weight: 500; text-decoration: none; }
a.button-link.quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
a.button-link.quiet:hover { background: var(--paper); border-color: var(--ink-faint); }

/* --- Switches: a checkbox drawn as an on/off toggle (still a checkbox to keyboards and screen
   readers, with role="switch"). ----------------------------------------------------------- */
input.toggle {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer;
  width: 2.25rem; height: 1.3rem; margin: 0; padding: 0; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--well); transition: background .15s, border-color .15s;
}
input.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px);
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 33, 31, .25); transition: transform .15s;
}
input.toggle:checked { background: var(--signal); border-color: var(--signal); }
input.toggle:checked::after { transform: translateX(.95rem); }
input.toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; box-shadow: none; }
input.toggle:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { input.toggle, input.toggle::after { transition: none; } }

/* Policy dialogs: the tool switches */
fieldset.tool-switches { border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0 0; padding: .5rem .9rem .75rem; max-height: 22rem; overflow-y: auto; }
fieldset.tool-switches legend { font-size: .85rem; color: var(--ink); padding: 0 .3rem; }
fieldset.tool-switches legend .muted { display: block; font-size: .78rem; }
.tool-switch-group { padding: .5rem 0; border-top: 1px solid var(--line); }
.tool-switch-group:first-of-type { border-top: 0; }
.tool-switch-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.tool-switch-head strong { margin-right: auto; font-size: .9rem; }
.tool-switch-head button { padding: .15rem .55rem; font-size: .75rem; }
form.stack label.switch-row { display: flex; align-items: center; gap: .55rem; margin: .3rem 0; color: var(--ink); font-size: .85rem; cursor: pointer; }
label.switch-row code { font-size: .8rem; }
.suggest-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; font-size: .8rem; }
.suggest-tools button { padding: .25rem .65rem; font-size: .8rem; }
td.actions dialog { text-align: left; white-space: normal; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex: none; margin-top: .25rem; }
.page-actions form { margin: 0; }
td.person .directory-title { display: block; font-size: .8rem; }
.pill .auto { margin-left: .35rem; padding: 0 .3rem; border-radius: 4px; font-size: .7rem; background: var(--surface); color: var(--ink-soft); }
.audit-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem .75rem; align-items: end; margin-bottom: .75rem; }
.audit-filters label { display: grid; gap: .2rem; font-size: .8rem; color: var(--ink-soft); min-width: 0; }
.audit-filters label.wide { grid-column: span 2; }
.audit-filters input, .audit-filters select { width: 100%; min-width: 0; }
.audit-filters .actions { display: flex; align-items: center; gap: .6rem; }
.more-filters { grid-column: 1 / -1; }
.more-filters > summary { cursor: pointer; font-size: .8rem; color: var(--ink-soft); }
.more-filters .audit-filters { margin: .5rem 0 0; }
.audit-list td { padding-top: .45rem; padding-bottom: .45rem; white-space: nowrap; }
.audit-list td.when a { color: inherit; text-decoration: none; }
.audit-row:hover { background: var(--well); }
.table-scroll { overflow-x: auto; }
.pager { display: flex; justify-content: space-between; margin-top: .75rem; }
@media (max-width: 30rem) { .audit-filters label.wide { grid-column: auto; } }

/* Audit detail: the row's facts and the trail behind it. */
.audit-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.audit-facts dt { color: var(--ink-soft); font-size: .85rem; }
.audit-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
pre.json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.trail { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.trail-step { position: relative; padding: .4rem 0 .8rem .75rem; }
.trail-step::before { content: ""; position: absolute; left: -1.4rem; top: .7rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink-soft); }
.trail-step.current::before { background: var(--signal); }
.trail-step.current .trail-head strong { text-decoration: underline; }
.trail-head { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.trail-runs, .trail-outcomes { margin: .25rem 0 0; padding-left: 1rem; }