/* Wicket — design system. Dark only.
 *
 * One stylesheet for every Wicket web surface: the admin console, the
 * first-boot setup coach, the sign-in pages and the docs. Source of truth for
 * the look is design/foundation (the Foundation canvas); this file is the
 * product copy of design/_shared/wicket.css plus the parts the product needs
 * (side sheets, toasts, the jump palette, busy buttons, form controls, setup,
 * sign-in and docs layouts).
 *
 * Graphite ground with no hue, neon data colours that each mean one thing,
 * and a white interface (Chalk): the primary action, selection and the
 * current place are white, every colour on screen is data, and the logo mark
 * alone keeps Wicket's orange (`--mark`). Faces are Sofia Sans Semi
 * Condensed and JetBrains Mono, vendored beside this file (OFL). `e33758d183` is
 * replaced with the asset bundle version when the file is served.
 */

@font-face {
  font-family: "Sofia Sans Semi Condensed";
  src: url("fonts/SofiaSansSemiCondensed.woff2?v=e33758d183") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2?v=e33758d183") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Phosphor";
  src: url("icons/Phosphor.woff2?v=e33758d183") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph {
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* ------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  /* ground and ink — neutral graphite, no blue cast */
  --paper: #0d0d0e;          /* page ground */
  --sheet: #151517;          /* panels, tables, inputs */
  --rail: #0a0a0b;           /* left rail */
  --sunk: #111113;           /* wells, group rows, segmented tracks */
  --cover: #060607;          /* header band */
  --cover-ink: #ededee;
  --cover-ink-2: #9b9ea4;
  --cover-rule: rgba(255, 255, 255, 0.08);

  --ink: #ededee;
  --ink-2: #a8abb1;
  --ink-3: #8c9097;
  --rule: #232326;
  --rule-2: #2f2f33;
  --hover: rgba(255, 255, 255, 0.045);

  /* Chalk: the interface has no hue of its own. The one primary action,
   * selection and the current place are white; every colour on screen is
   * data. The only exception is the logo, which keeps its own orange. */
  --brand: #f1f1f2;
  --brand-hover: #ffffff;
  --brand-ink: #ffffff;       /* brand as text */
  --brand-wash: rgba(255, 255, 255, 0.10);
  --on-brand: #0b0b0c;
  --mark: #ea984f;            /* the logo's orange (logo.png), on the mark only */

  /* legend — neon on graphite; each colour has exactly one meaning */
  --ok: #2ff08b;             /* running, verified, passing */
  --ok-wash: rgba(47, 240, 139, 0.12);
  --warn: #ffcf33;           /* needs you, soon */
  --warn-fill: #ffc414;
  --warn-wash: rgba(255, 207, 51, 0.12);
  --bad: #ff4d6d;            /* failed, refused, broken */
  --bad-wash: rgba(255, 77, 109, 0.13);
  --info: #33cfff;           /* working now, informational */
  --info-wash: rgba(51, 207, 255, 0.12);

  /* data series (charts, usage bars, the map's lit path) */
  --data-1: var(--info);
  --data-2: #b388ff;
  --data-3: #ff8a3d;
  --data-4: #3dffd5;

  --sans: "Sofia Sans Semi Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --base: 15px;

  --r: 10px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -12px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.55), 0 22px 48px -14px rgba(0, 0, 0, 0.8);

  /* page gutters grow with the window; content uses the full width */
  --gutter: clamp(20px, 2.6vw, 56px);

}

/* -------------------------------------------------------------- base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--base)/1.5 var(--sans);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-ink); text-decoration-color: currentColor; }

code, .mono { font-family: var(--mono); font-size: 0.93em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 10px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

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

.app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr);
  min-height: 100vh;
}

.cover {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 16px;
  background: var(--cover);
  color: var(--cover-ink);
}

.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cover-ink); }
.mark svg { width: 22px; height: 22px; display: block; }
.mark b { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.cover-sep { width: 1px; height: 22px; background: var(--cover-rule); }

.install-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 8px;
  border-radius: 8px;
  color: var(--cover-ink);
  text-decoration: none;
  font-size: 14.5px;
}
.install-switch:hover { background: rgba(255, 255, 255, 0.06); color: var(--cover-ink); }
.install-switch .host { font-weight: 700; }
.install-switch .site { color: var(--cover-ink-2); font-family: var(--mono); font-size: 13.5px; }
.install-switch .ph { color: var(--cover-ink-2); font-size: 13px; }

.role-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--on-brand);
  background: var(--brand);
}
.role-tag.outpost { background: transparent; color: var(--cover-ink); box-shadow: inset 0 0 0 1px var(--cover-rule); }

.cmdk {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  padding: 6px 8px 6px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cover-ink-2);
  font-size: 14px;
}
.cmdk kbd {
  margin-left: auto;
  font: 600 12px var(--sans);
  color: var(--cover-ink-2);
  padding: 1px 6px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--cover-rule);
}

.who { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--cover-ink-2); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12px var(--sans);
  color: var(--cover);
  background: var(--cover-ink);
}

/* rail */

.rail {
  background: var(--rail);
  border-right: 1px solid var(--rule);
  padding: 14px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100vh - 52px);
  overflow-y: auto;
}

.rail-group { margin: 12px 0 2px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.rail-group:first-child { margin-top: 0; }

.rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
}
.rail a .ph { font-size: 18.5px; color: var(--ink-3); }
.rail a:hover { background: var(--hover); color: var(--ink); }
.rail a.on { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.3); }
.rail a.on .ph { color: var(--brand-ink); }
.rail a .count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail a .count.warn { color: var(--warn); }
.rail a .ext { margin-left: auto; font-size: 13px; }

.rail-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); display: grid; gap: 4px; }
.rail-foot .ver { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* main */

.main { padding: 28px var(--gutter) 80px; min-width: 0; }
.wrap { max-width: none; }

/* ------------------------------------------------------ page heading */

.ph-row { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.ph-row h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.022em; }
.ph-row .sub { margin-top: 5px; font-size: 15px; color: var(--ink-2); }
.ph-row .sub code { color: var(--ink); }
.ph-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.crumbs { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-3); margin-bottom: 8px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); }

/* Locator: where this section sits in the install's path. Names → front door
 * → services → data → backups. The current stop is inked; the rest stay
 * faint. Teaches the model without a diagram on every page. */
.locator { display: flex; align-items: center; gap: 0; margin-bottom: 14px; font-size: 13px; color: var(--ink-3); }
.locator span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.locator span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.locator i { width: 22px; height: 1px; background: var(--rule-2); margin: 0 7px; }
.locator .here { color: var(--ink); font-weight: 700; }
.locator .here::before { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* ------------------------------------------------------------ legend */

.sym { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; }
.sym.ok { border-radius: 50%; background: var(--ok); }
.sym.warn { background: var(--warn-fill); transform: rotate(45deg) scale(0.86); border-radius: 1.5px; }
.sym.bad { background: var(--bad); border-radius: 1.5px; }
.sym.idle { border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ink-3); }
.sym.off { border-radius: 50%; border: 1.5px dashed var(--ink-3); }
.sym.run { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--info-wash); border-top-color: var(--info); border-right-color: var(--info); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.state { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; white-space: nowrap; }
.state.ok { color: var(--ok); }
.state.warn { color: var(--warn); }
.state.bad { color: var(--bad); }
.state.run { color: var(--info); }
.state.idle, .state.off { color: var(--ink-2); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 5px;
  font-size: 13px; font-weight: 700;
  background: var(--sunk); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  white-space: nowrap;
}
.tag.ok { background: var(--ok-wash); color: var(--ok); box-shadow: none; }
.tag.warn { background: var(--warn-wash); color: var(--warn); box-shadow: none; }
.tag.bad { background: var(--bad-wash); color: var(--bad); box-shadow: none; }
.tag.info { background: var(--info-wash); color: var(--info); box-shadow: none; }
.tag.brand { background: var(--brand-wash); color: var(--brand-ink); box-shadow: none; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: 8px; border: 0;
  background: var(--sheet); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 1px 1px rgba(0, 0, 0, 0.25);
  font: 600 14.5px var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--sunk); color: var(--ink); }
.btn .ph { font-size: 16px; }
.btn.primary { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); font-weight: 700; }
.btn.primary:hover { background: var(--brand-hover); }
.btn.quiet { background: transparent; box-shadow: none; color: var(--ink-2); padding: 0 10px; }
.btn.quiet:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-wash); }
.btn.armed { background: var(--bad); color: #1f0c08; box-shadow: none; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13.5px; border-radius: 7px; }
.btn[disabled] { color: var(--ink-3); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); cursor: not-allowed; }

.icon-btn { width: 30px; height: 30px; padding: 0; }

/* ---------------------------------------------------------- surfaces */

/* flow-root: a panel contains its children's margins. Kept here, before
 * `.facts`, `.map` and friends, so a panel that is also a grid stays one. */
.panel { display: flow-root; background: var(--sheet); border-radius: var(--r); box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 16.5px; }
.panel-head .muted { font-size: 14px; }
.panel-head .end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 16px 18px; }

.section { margin-top: 30px; }
.section > h2 { font-size: 18.5px; margin-bottom: 4px; }
.section > .lede { color: var(--ink-2); margin: 0 0 14px; max-width: 70ch; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.grid-even { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ------------------------------------------------------------ tables */

table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.t th {
  text-align: left; font-weight: 700; font-size: 13px; color: var(--ink-3);
  padding: 9px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.t th.sort::after { content: " \2193"; color: var(--ink-2); }
.t td { padding: 0 12px; height: 44px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: var(--hover); }
.t td:first-child, .t th:first-child { padding-left: 18px; }
.t td:last-child, .t th:last-child { padding-right: 18px; }
.t .r { text-align: right; }
.t .name { font-weight: 700; color: var(--ink); text-decoration: none; }
.t .name:hover { color: var(--brand-ink); }
.t .sub { display: block; font-size: 13.5px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.t td.two { height: 56px; }
.t .row-act { opacity: 0; }
.t tr:hover .row-act { opacity: 1; }
.t tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* --------------------------------------------------------- key/value */

.kv { display: grid; grid-template-columns: max-content 1fr; column-gap: 0; font-size: 14.5px; }
.kv dt { color: var(--ink-2); padding: 8px 28px 8px 0; border-bottom: 1px solid var(--rule); }
.kv dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

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

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.tabs a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px 10px; margin-bottom: -1px;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.tabs a .count { font-size: 13px; color: var(--ink-3); font-weight: 700; }

.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.seg a { padding: 4px 11px; border-radius: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.seg a.on { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.3); }

/* ------------------------------------------------------------ forms */

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14.5px; font-weight: 700; }
.field .hint { font-size: 13.5px; color: var(--ink-3); }
.input {
  height: 36px; padding: 0 11px; border-radius: 8px; border: 0;
  background: var(--sheet); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  font: 400 15px var(--sans); width: 100%;
}
.input.mono { font-family: var(--mono); font-size: 14.5px; }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 3px var(--brand-wash); }
.input::placeholder { color: var(--ink-3); }
.input-affix { display: flex; align-items: stretch; }
.input-affix .input { border-radius: 8px 0 0 8px; }
.input-affix .affix { display: flex; align-items: center; padding: 0 11px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); border-radius: 0 8px 8px 0; margin-left: -1px; font-family: var(--mono); font-size: 14.5px; color: var(--ink-2); }

.search { position: relative; }
.search .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 16px; }
.search .input { padding-left: 33px; height: 34px; }

/* ----------------------------------------------------------- notices */

.notice {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start;
  padding: 13px 16px; border-radius: var(--r);
  background: var(--warn-wash); color: var(--ink);
}
.notice .ph { font-size: 18px; margin-top: 1px; color: var(--warn); }
.notice b { font-weight: 700; }
.notice p { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }
.notice.info { background: var(--info-wash); }
.notice.info .ph { color: var(--info); }
.notice.bad { background: var(--bad-wash); }
.notice.bad .ph { color: var(--bad); }
.notice.ok { background: var(--ok-wash); }
.notice.ok .ph { color: var(--ok); }

/* Running host job: one quiet strip, never a modal. */
.jobline {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), var(--shadow);
  font-size: 14.5px;
}
.jobline .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--info-wash); overflow: hidden; min-width: 64px; max-width: 220px; }
.jobline .bar i { display: block; height: 100%; width: 62%; background: var(--info); border-radius: 4px; }

/* ----------------------------------------------------- misc helpers */

.row { display: flex; align-items: center; gap: 10px; }
.stack { display: grid; gap: 10px; }
.spacer { flex: 1; }
.hr { height: 1px; background: var(--rule); margin: 18px 0; border: 0; }
.chip-host { font-family: var(--mono); font-size: 14px; }
.dots { color: var(--ink-3); }

/* ------------------------------------------------------- install map */
/* The signature: the install drawn as wiring, in the mark's own trace
 * geometry (flat, 45°, flat, ending on a ring pad). Same grammar at install
 * scale (Overview) and workload scale (workload page). */

.map { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 0 54px; padding: 6px 20px 22px; }
.map > .col-h { grid-row: 1; }
.map .cell { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; }
.map .ra { grid-row: 2; padding-bottom: 9px; }
.map .rb { grid-row: 3; padding-top: 9px; }
.map .rab { grid-row: 2 / 4; }
.map .c1 { grid-column: 1; } .map .c2 { grid-column: 2; } .map .c3 { grid-column: 3; } .map .c4 { grid-column: 4; } .map .c5 { grid-column: 5; }
.map svg.traces { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.map .col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; }
.map .col-h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 12px 0 8px; }
.map .col-h b { color: var(--ink); font-size: 14px; }
.map .heads { display: contents; }
.map .sub-h { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 -1px 2px; }

.trace { fill: none; stroke: var(--rule-2); stroke-width: 1.4; stroke-linejoin: round; }
.trace.warn { stroke: var(--warn-fill); stroke-dasharray: 4 3; }
.trace.run { stroke: var(--info); stroke-dasharray: 2 3; }
.trace.lit { stroke: var(--info); stroke-width: 2.2; }
.trace.dim { opacity: 0.55; }
.pad { fill: var(--sheet); stroke: var(--rule-2); stroke-width: 1.4; }
.pad.lit { stroke: var(--info); stroke-width: 2; }
.pad.warn { stroke: var(--warn-fill); }
.pad.run { stroke: var(--info); }

.node {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 5px 10px;
  border-radius: 7px; background: var(--sheet);
  box-shadow: 0 0 0 1px var(--rule-2);
  font-size: 14px; white-space: nowrap;
}
.node .nm { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.node .nm.mono { font-family: var(--mono); font-size: 13.5px; font-weight: 500; }
.node .meta { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-left: 6px; }
.node.tall { flex-direction: column; align-items: stretch; gap: 3px; padding: 10px 12px; white-space: normal; }
.node.tall .row1 { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.node.tall .row2 { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.node.lit { box-shadow: 0 0 0 2px var(--info), 0 3px 10px -4px rgba(0, 0, 0, 0.45); }
.node.dim { opacity: 0.62; }
.node.warn { box-shadow: 0 0 0 1px var(--warn-fill); background: var(--warn-wash); }

.map-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2);
  background: linear-gradient(var(--info-wash), var(--info-wash)) left / 3px 100% no-repeat;
}
.map-foot b { color: var(--ink); }
.map-foot .hop { display: inline-flex; align-items: center; gap: 6px; }
.map-foot .ph-arrow-right { color: var(--ink-3); font-size: 13px; }

.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------ needs-you list */

.todo { display: grid; grid-template-columns: 18px 1fr auto; gap: 4px 12px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.todo:last-child { border-bottom: 0; }
.todo .sym { margin-top: 6px; }
.todo h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.todo p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.todo .go { align-self: center; }

/* --------------------------------------------------------- ledger */

.ledger { list-style: none; margin: 0; padding: 4px 0; }
.ledger li { display: grid; grid-template-columns: 74px 18px 1fr; gap: 10px; align-items: baseline; padding: 8px 18px; font-size: 14.5px; }
.ledger time { color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ledger .sym { position: relative; top: -1px; }
.ledger .actor { color: var(--ink-2); }
.ledger .day { padding: 10px 18px 2px; font-size: 13px; font-weight: 700; color: var(--ink-3); display: block; }

/* --------------------------------------------------------- phone */

.menu-btn { display: none; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 52px auto; }
  .rail { display: none; }
  .cover { padding: 0 8px 0 14px; gap: 10px; }
  .cover .mark b, .cover-sep, .cmdk, .install-switch .site, .install-switch .ph { display: none; }
  .who { margin-left: auto; }
  .menu-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--cover-ink); font-size: 21.5px; }
  .main { padding: 20px 16px 48px; }
  .ph-row { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .ph-row h1 { font-size: 26px; }
  .ph-actions { margin-left: 0; }
  .top, .bottom, .grid-2, .grid-even { grid-template-columns: 1fr !important; }
  .todo { grid-template-columns: 18px 1fr; }
  .todo .go { grid-column: 2; justify-self: start; margin-top: 8px; }
  .panel-head { flex-wrap: wrap; }
  .panel-head .legend { display: none; }

  /* The map becomes a list by stage; tracing becomes a tap that filters. */
  .map { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 16px; }
  .map svg.traces { display: none; }
  .map .cell { padding: 0 0 0 14px; border-left: 2px solid var(--rule-2); }
  .map .col-h { padding: 14px 0 4px; }
  .map > .col-h:nth-child(2) { order: 10; } .map .c1 { order: 11; }
  .map > .col-h:nth-child(3) { order: 20; } .map .c2 { order: 21; }
  .map > .col-h:nth-child(4) { order: 30; } .map .c3 { order: 31; }
  .map > .col-h:nth-child(5) { order: 40; } .map .c4 { order: 41; }
  .map > .col-h:nth-child(6) { order: 50; } .map .c5 { order: 51; }
  .map .node.lit { box-shadow: 0 0 0 1.5px var(--info); }
  .map .cell:has(.lit) { border-left-color: var(--info); }
  .map-foot { display: none; }
  .ledger li { grid-template-columns: 54px 14px 1fr; padding: 8px 16px; }
}

/* ---------------------------------------------------- shared extras */

/* Usage: a measured bar, never decoration. Ink by default; sand past 80%. */
.use { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.use .track { flex: 1; height: 6px; border-radius: 6px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.use .track i { display: block; height: 100%; border-radius: 6px; background: var(--ink-2); }
.use .track i.warn { background: var(--warn-fill); }
.use .pct { width: 38px; text-align: right; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Machine output: logs and commands sit on the cover colour. */
.log, .code { margin: 0; font: 13.5px/1.65 var(--mono); background: var(--cover); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); padding: 12px 14px; overflow: auto; color: var(--ink-2); white-space: pre; }
.log .t { color: var(--ink-3); }
.log .lv { display: inline-block; width: 40px; }
.log .lv.i { color: var(--info); }
.log .lv.w { color: var(--warn); }
.log .lv.e { color: var(--bad); }
.log b { color: var(--ink); font-weight: 500; }
.code { color: var(--ink); font-size: 14px; }
.code .p { color: var(--ink-3); user-select: none; }
.code .c { color: var(--ink-3); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.switch i { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--rule-2); flex-shrink: 0; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform 160ms ease-out; }
.switch.on i { background: var(--brand); }
.switch.on i::after { transform: translateX(14px); background: var(--on-brand); }

details.more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
details.more > summary::before { content: "\203A"; display: inline-block; transition: transform 150ms ease-out; }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more > summary::-webkit-details-marker { display: none; }

.empty-state { padding: 34px 24px; text-align: center; color: var(--ink-2); font-size: 15px; }
.empty-state h3 { color: var(--ink); font-size: 17px; margin-bottom: 6px; }

/* --------------------------------------- standalone (IdP, CLI) pages */

body.solo { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.solo-top { display: flex; align-items: center; gap: 10px; padding: 22px 28px; }
.solo-top .mark { color: var(--ink); }
.solo-top .mark b { font-size: 16px; }
.solo-top .site { font-family: var(--mono); font-size: 14px; color: var(--ink-3); }
.solo-center { display: grid; place-items: center; padding: 20px 16px 60px; }
.solo-card { width: 100%; max-width: 440px; background: var(--sheet); border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), var(--shadow-pop); padding: 32px 34px 28px; }
.solo-card h1 { font-size: 26px; letter-spacing: -0.02em; }
.solo-card .lede { margin: 6px 0 22px; color: var(--ink-2); font-size: 15.5px; }
.solo-card .btn.block { width: 100%; height: 44px; font-size: 16px; border-radius: 10px; }
.solo-foot { padding: 18px 28px; display: flex; gap: 18px; font-size: 13.5px; color: var(--ink-3); }
.solo-foot span:last-child { margin-left: auto; }

/* =====================================================================
 * Product layer: everything below is the shipped UI's addition to the
 * Foundation boards. Same tokens, same grammar.
 * ===================================================================== */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 12px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 10px; }
#main:focus { outline: none; }
[hidden] { display: none !important; }
p { margin: 0 0 10px; }
.lede { color: var(--ink-2); max-width: 70ch; }
.ok-ink { color: var(--ok); } .warn-ink { color: var(--warn); } .bad-ink { color: var(--bad); } .info-ink { color: var(--info); }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.mt { margin-top: 18px; } .mt-s { margin-top: 10px; } .mb { margin-bottom: 18px; } .mb-s { margin-bottom: 10px; }

/* ------------------------------------------------------ cover extras */

button.cmdk { border: 0; font: 400 14px var(--sans); cursor: pointer; text-align: left; }
.cmdk:hover { background: rgba(255, 255, 255, 0.09); color: var(--cover-ink); }

.who { position: relative; }
.who-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.who-menu > summary::-webkit-details-marker { display: none; }
.who-menu > summary:hover .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.who-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--sheet); border-radius: 10px;
  box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-pop);
  color: var(--ink);
}
.who-pop .who-id { padding: 9px 11px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; display: grid; gap: 1px; }
.who-pop .who-id b { font-size: 14.5px; }
.who-pop .who-id span { font-size: 13.5px; color: var(--ink-3); font-family: var(--mono); }
.who-pop a, .who-pop button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 11px; border-radius: 7px; border: 0;
  background: transparent; color: var(--ink-2);
  font: 400 14.5px var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.who-pop a:hover, .who-pop button:hover { background: var(--hover); color: var(--ink); }
.who-pop .ph { color: var(--ink-3); font-size: 16px; }
.who-pop form { margin: 0; }

.install-switch.static { cursor: default; }
.install-switch.static:hover { background: transparent; }

/* rail: Docs sits apart; sign-in state at the foot */
.rail .rail-docs { margin-top: 10px; }
.rail-foot form { margin: 0; }

/* Phone: the rail opens as a drawer from the menu button. */
@media (max-width: 760px) {
  .app.rail-open .rail {
    display: flex; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 50;
    width: min(290px, 86vw); height: auto; overflow-y: auto;
    box-shadow: var(--shadow-pop);
    animation: rail-in 160ms var(--ease);
  }
  .app.rail-open::after { content: ""; position: fixed; inset: 52px 0 0 0; z-index: 40; background: rgba(0, 0, 0, 0.6); }
  .who-pop { right: -44px; }
}
@keyframes rail-in { from { transform: translateX(-12px); opacity: 0; } }

/* ------------------------------------------------------ progress + busy */

/* Navigation hairline: appears only when a page takes longer than a beat. */
.wk-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 0; opacity: 0; pointer-events: none;
  background: var(--brand); box-shadow: 0 0 8px var(--brand);
  transition: width 400ms var(--ease), opacity 200ms ease-out;
}
.wk-progress.on { opacity: 1; }

.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"] .ph { display: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent;
  opacity: 0.85; animation: spin 0.7s linear infinite;
}
form.is-pending { cursor: progress; }
form.is-pending .input, form.is-pending .btn:not([aria-busy]) { opacity: 0.7; }

/* One way to confirm: a destructive button arms in place. */
.btn.armed, .btn[data-armed] { background: var(--bad); color: #1f0c08; box-shadow: none; }
.btn.armed:hover, .btn[data-armed]:hover { background: #ff6b85; color: #1f0c08; }
.btn[data-armed] .ph { color: inherit; }
/* An icon-only button grows to fit its "Click again to …" words. */
.icon-btn[data-armed] { width: auto; padding: 0 11px; white-space: nowrap; }

/* Live regions update in place; a short wash marks what just changed. */
.just-changed { animation: just-changed 1.6s var(--ease); }
@keyframes just-changed { from { background-color: var(--brand-wash); } }

/* Placeholder while a slow panel loads beside a page that is already up. */
.skel { display: grid; gap: 10px; padding: 16px 18px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sunk) 0%, var(--rule) 40%, var(--sunk) 80%); background-size: 300% 100%; animation: skel 1.4s ease-in-out infinite; }
.skel i:nth-child(2) { width: 82%; } .skel i:nth-child(3) { width: 64%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.loading-line { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--ink-2); font-size: 14.5px; }

/* ---------------------------------------------------------- toasts */

.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 110;
  display: grid; gap: 8px; width: min(430px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start;
  padding: 12px 10px 12px 14px; border-radius: 10px;
  background: var(--sheet); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-pop);
  font-size: 14.5px; line-height: 1.45;
  animation: toast-in 220ms var(--ease);
}
.toast > .sym { margin-top: 5px; }
.toast .toast-body { min-width: 0; overflow-wrap: anywhere; }
.toast .toast-body b { font-weight: 700; }
.toast .toast-body a { margin-left: 4px; }
.toast .toast-x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 15px; }
.toast .toast-x:hover { background: var(--hover); color: var(--ink); }
.toast.bad { box-shadow: 0 0 0 1px rgba(255, 77, 109, 0.45), var(--shadow-pop); }
.toast.leaving { animation: toast-out 180ms ease-in forwards; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(6px); opacity: 0; } }
@media (max-width: 760px) { .toasts { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* Phone: tab strips scroll sideways instead of widening the page. */
@media (max-width: 760px) {
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex-shrink: 0; }
}

/* ------------------------------------------------------ jump palette */

.palette {
  position: fixed; inset: 0; z-index: 130;
  display: grid; justify-items: center; align-content: start;
  padding: 11vh 16px 16px;
  background: rgba(0, 0, 0, 0.62);
  animation: fade-in 120ms ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.palette-box {
  width: min(640px, 100%); overflow: hidden;
  background: var(--sheet); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-pop);
}
.palette-q { position: relative; border-bottom: 1px solid var(--rule); }
.palette-q .ph { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 18.5px; }
.palette-q input {
  width: 100%; height: 52px; padding: 0 16px 0 44px; border: 0; outline: 0;
  background: transparent; color: var(--ink); font: 400 17px var(--sans);
}
.palette-q input::placeholder { color: var(--ink-3); }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 460px); overflow: auto; }
.palette-list .pg { padding: 9px 10px 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.palette-list a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.palette-list a .ph { font-size: 17px; color: var(--ink-3); }
.palette-list a .hint { margin-left: auto; font-size: 13.5px; color: var(--ink-3); font-family: var(--mono); }
.palette-list a[aria-selected="true"] { background: var(--brand-wash); color: var(--ink); }
.palette-list a[aria-selected="true"] .ph { color: var(--brand-ink); }
.palette-empty { padding: 18px; color: var(--ink-3); font-size: 14.5px; }
.palette-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.palette-foot kbd { font: 600 12px var(--sans); padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); }

/* ----------------------------------------------------------- forms */

select.input {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px;
}
textarea.input { height: auto; min-height: 96px; padding: 10px 11px; resize: vertical; line-height: 1.5; font-size: 14.5px; }
textarea.input.mono { font-size: 14px; }
textarea.input.tall { min-height: 220px; }
.input[readonly] { background: var(--sunk); color: var(--ink-2); }
.input:disabled { background: var(--sunk); color: var(--ink-3); cursor: not-allowed; }
input[type="file"].input { height: auto; padding: 7px; font-size: 14px; }
input[type="file"].input::file-selector-button { margin-right: 10px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); font: 600 13.5px var(--sans); cursor: pointer; }
.input.sm { height: 30px; font-size: 14px; }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); }
.field .hint.bad { color: var(--bad); }
.field .opt { font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: 13.5px; }
.field.tight { margin-bottom: 10px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; flex: 1; min-width: 180px; }
.form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--rule); }
.form-foot .end, .acts .end { margin-left: auto; }
.acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }

.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; }
.check input {
  appearance: none; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 16px; height: 16px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--rule-2);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--brand); box-shadow: none; }
.check input[type="checkbox"]:checked::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-brand); }
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.check small { color: var(--ink-3); font-size: 13.5px; }

/* A pick list: radio rows with a title and a detail line. */
.choices { display: grid; gap: 6px; }
.choice { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.choice:hover { background: var(--hover); }
.choice input { margin-top: 3px; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--brand); background: var(--brand-wash); }
.choice b { font-size: 14.5px; }
.choice small { grid-column: 2; font-size: 13.5px; color: var(--ink-3); }
.choice .tag { grid-row: span 2; align-self: center; }
.choices.scroll { max-height: 300px; overflow: auto; padding: 2px; }

/* A checkbox drawn as the board's switch. */
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(14px); background: var(--on-brand); }
.switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Chips you can add to (paths that skip a password, …). */
.chips-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule-2); background: var(--sheet); }
.chips-input .tag { font-family: var(--mono); font-weight: 500; font-size: 13.5px; background: var(--sunk); }
.chips-input input { border: 0; outline: 0; flex: 1; min-width: 120px; font: 14px var(--mono); background: transparent; color: var(--ink); padding: 3px 4px; }

.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------- work area + side sheet */

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { width: 280px; }
.toolbar .note { font-size: 14px; color: var(--ink-3); }

/* Two columns, main on the left and a side panel or sheet on the right. */
.split { display: grid; grid-template-columns: var(--split, minmax(0, 1.6fr) minmax(0, 1fr)); gap: 18px; align-items: start; }
.split.even { --split: minmax(0, 1fr) minmax(0, 1fr); }
.split + .split, .split + .panel, .panel + .split, .panel + .panel, .notice + .panel, .panel + .notice, .notice + .split, .notice + .work, .panel + .work, .work + .panel, .tabs + .notice { margin-top: 18px; }
/* Grid cells line up on their own row; flow spacing never applies inside. */
.work > *, .split > *, .sets > *, .member-grid > *, .col > *, .facts > * { margin-top: 0 !important; }
.col { display: grid; gap: 18px; align-content: start; min-width: 0; }

/* Editing opens beside the table it edits. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) var(--sheet-w, 380px); gap: 18px; align-items: start; }
.work > :only-child { grid-column: 1 / -1; }
.sheet { position: sticky; top: 20px; animation: sheet-in 180ms var(--ease); }
.sheet .panel-body { padding-top: 18px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--rule); }
.sheet-foot .end { margin-left: auto; }
.sheet .sheet-meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); }
.sheet .log { border-radius: 0; box-shadow: none; max-height: 560px; padding: 14px 18px; white-space: pre-wrap; font-size: 13px; }
@keyframes sheet-in { from { transform: translateX(10px); opacity: 0; } }
tr.editing td, tr.viewing td { background: var(--brand-wash) !important; }
tr.editing td:first-child, tr.viewing td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 1100px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .sheet { position: static; order: -1; }
}

/* Tables: grouped rows, wrapping panels and a table that scrolls sideways. */
/* Positioned, so an `.sr-only` header inside cannot escape and widen the page. */
.t-scroll { position: relative; overflow-x: auto; }
.t tr.grp td { height: 34px; background: var(--sunk); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.t tr.grp td .faint { font-weight: 400; }
.t tr.grp:hover td { background: var(--sunk); }
.t td.tall { height: 64px; }
.t td.wrap { white-space: normal; }
.t td .acts { justify-content: flex-end; flex-wrap: nowrap; }
.t .empty-row td { height: auto; padding: 22px 18px; color: var(--ink-2); text-align: center; }
.t tfoot td { height: auto; padding: 12px 18px; font-size: 14px; color: var(--ink-2); }
.t.compact td { height: 36px; font-size: 14px; }
.t.res td.n { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); }
.t.res td.null { color: var(--ink-3); font-style: italic; }
.row-act:focus-visible, .row-act:focus-within { opacity: 1; }
@media (hover: none) { .t .row-act { opacity: 1; } }

.head-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head .count, .section .count { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.panel-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.panel-foot .end { margin-left: auto; }
.panel-note { padding: 12px 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.panel > .notice { margin: 14px 18px; }
.panel-body > .notice + *, .panel-body > * + .notice { margin-top: 12px; }

/* Facts strip: three or four short readings side by side. */
.facts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.facts > div { padding: 15px 18px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.facts > div + div { border-left: 1px solid var(--rule); }
.facts small { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.facts b { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.facts span { font-size: 14px; color: var(--ink-2); }
.facts > div.ic { grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; }
.facts > div.ic > .ph { grid-row: span 2; font-size: 21.5px; color: var(--ink-3); margin-top: 1px; }
.facts.attached { border-top: 1px solid var(--rule); }

/* Notices inside the flow get a little air from what follows. */
.notice + .notice { margin-top: 10px; }
.notice .acts { grid-column: 2 / -1; margin-top: 8px; }
.notice > .btn, .notice > form, .notice > a.btn { align-self: center; }
.notice code { color: var(--ink); }
.page-notices { display: grid; gap: 10px; margin-bottom: 18px; }
.page-notices:empty { display: none; }


/* A hint outside a field (under a lone control, in a form foot). */
.hint { font-size: 13.5px; color: var(--ink-3); }
.hint.bad { color: var(--bad); }

/* ------------------------------------------------- state + bars helpers */

.use.wide { min-width: 220px; }
.dots { color: var(--ink-3); }
.stat-line { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: 15px; }
.big-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- page patterns */

/* Workloads list: what each workload has. */
.has { display: flex; gap: 14px; color: var(--ink-2); font-size: 14px; flex-wrap: wrap; }
.has span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.has .ph { color: var(--ink-3); font-size: 15px; }
.has .z { color: var(--ink-3); }
.img { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); }
.legacy { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 14.5px; color: var(--ink-2); }
.legacy .ph { font-size: 18px; color: var(--ink-3); }
.legacy b { color: var(--ink); }
.legacy .btn { margin-left: auto; }

/* A public address with its path picked out. */
.route-addr { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.route-addr .p { color: var(--brand-ink); font-weight: 600; }

/* Workload data members (databases, filesets) as cards. */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin-bottom: 18px; }
.member { padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; }
.member .ic { grid-row: span 3; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); font-size: 18px; }
.member.on { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.member b { font-size: 16px; }
.member .m { font-size: 14px; color: var(--ink-2); }
.member .env { font: 13px var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.member .acts { grid-row: span 3; flex-wrap: nowrap; }
.browse { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.browse-list { border-right: 1px solid var(--rule); padding: 10px 8px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.browse-list a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 7px; font: 14px var(--mono); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.browse-list a span { color: var(--ink-3); font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.browse-list a.on { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); font-weight: 600; }
.browse-list a:hover { background: var(--hover); }
.browse-main { min-width: 0; }
.query { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.query textarea { width: 100%; height: 74px; resize: vertical; border: 0; border-radius: 8px; padding: 10px 12px; background: var(--cover); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); font: 14px/1.6 var(--mono); }
.query textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand); }

/* DNS: names grouped by zone; plan-then-apply lists. */
.fq { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.fq .lbl { color: var(--ink); font-weight: 600; }
.fq .zn { color: var(--ink-3); }
.serves { display: inline-flex; align-items: center; gap: 6px; }
.serves .ph { color: var(--ink-3); }
.rec-val { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; color: var(--ink-2); }
.plan { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.plan li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 10px; padding: 11px 0; font-size: 14px; border-top: 1px solid var(--rule); }
.plan li:first-child { border-top: 0; }
.plan .op { grid-row: span 2; align-self: start; font-size: 12.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 5px; }
.plan .op.add { background: var(--ok-wash); color: var(--ok); }
.plan .op.chg { background: var(--warn-wash); color: var(--warn); }
.plan .op.keep { background: var(--sunk); color: var(--ink-3); }
.plan .op.del { background: var(--bad-wash); color: var(--bad); }
.plan .rec { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.plan .was { font-family: var(--mono); font-size: 13px; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--bad); }
.plan .why { font-size: 13.5px; color: var(--ink-2); }
.panel-body > .plan { margin: 4px 0 14px; }

.steps { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; color: var(--ink-3); margin-bottom: 16px; }
.steps span { display: flex; align-items: center; gap: 6px; }
.steps span + span::before { content: ""; width: 18px; height: 1px; background: var(--rule-2); margin: 0 8px; }
.steps .done { color: var(--ink-2); }
.steps .done .ph { color: var(--ok); }
.steps .here { color: var(--ink); font-weight: 700; }
.ns { font-family: var(--mono); font-size: 13.5px; }

/* Activity: a feed of what happened, jobs beside it. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed .day { padding: 14px 18px 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); border-top: 1px solid var(--rule); }
.feed .day:first-child { border-top: 0; }
.ev { display: grid; grid-template-columns: 62px 18px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 18px; font-size: 14.5px; }
.ev time { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev .sym { position: relative; top: -1px; }
.ev .what { min-width: 0; overflow-wrap: anywhere; }
.ev .what b { font-weight: 700; }
.ev .by { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.ev .kind { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-right: 6px; }
.ev .detail { grid-column: 3 / -1; margin-top: 8px; min-width: 0; }
.ev .acts { grid-column: 3 / -1; margin-top: 10px; }
.ev.open { background: var(--sunk); }
.ev.fail { background: var(--bad-wash); }
.ev a.what-link { color: inherit; text-decoration: none; }
.ev a.what-link:hover b { color: var(--brand-ink); }
.diff { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font: 13.5px/1.6 var(--mono); padding: 10px 12px; border-radius: 8px; background: var(--cover); box-shadow: inset 0 0 0 1px var(--rule); }
.diff .k { color: var(--ink-3); }
.diff del { color: var(--bad); text-decoration-color: var(--bad); }
.diff ins { color: var(--ok); text-decoration: none; }
.jobs-now { list-style: none; margin: 0; padding: 4px 0; }
.jobs-now li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; padding: 10px 18px; font-size: 14.5px; }
.jobs-now li .sym { margin-top: 5px; }
.jobs-now small { grid-column: 2; font-size: 13.5px; color: var(--ink-3); }
.jobs-now .bar { grid-column: 2; height: 4px; border-radius: 4px; background: var(--info-wash); overflow: hidden; margin-top: 6px; }
.jobs-now .bar i { display: block; height: 100%; background: var(--info); }
.jobline .bar i.indef, .jobs-now .bar i.indef { width: 35%; animation: indef 1.4s ease-in-out infinite; }
@keyframes indef { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.jobline .msg { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobline + * { margin-top: 18px; }

/* Services: unit names under their roles. */
.unit { font-family: var(--mono); font-size: 13px; color: var(--ink-3); display: block; margin-top: 1px; }
.since { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: 15px; }

/* Backups: two sets, thirty nights. */
.sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.set .big { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 4px; }
.set .big b { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.set .big span { color: var(--ink-2); font-size: 14.5px; }
.set .kv { padding: 0 18px 4px; }
.set .set-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--rule); }
.nights { padding: 16px 18px 14px; overflow-x: auto; }
.nights .lane { display: grid; grid-template-columns: 92px repeat(30, minmax(6px, 1fr)); gap: 4px; align-items: center; height: 22px; min-width: 420px; }
.nights .lane > span:first-child { font-size: 13.5px; color: var(--ink-2); }
.nights i { display: block; height: 14px; border-radius: 3px; background: var(--ok); opacity: 0.85; }
.nights i.none { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); opacity: 1; }
.nights i.miss { background: var(--bad); opacity: 1; }
.nights i.now { background: transparent; box-shadow: inset 0 0 0 1.5px var(--info); }
/* Restore points: their own row, a diamond on each day Wicket pinned a
   snapshot pair before changing the platform; other days stay empty. */
.nights .points i { height: 8px; background: none; opacity: 1; }
.nights .points i.rp { justify-self: center; width: 8px; border-radius: 1.5px; background: var(--ink-2); transform: rotate(45deg); }
.nights .axis { display: grid; grid-template-columns: 92px repeat(30, minmax(6px, 1fr)); gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); min-width: 420px; }
.nights .axis span:nth-child(n+2) { text-align: center; white-space: nowrap; }
.nights-note { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 18px 14px; font-size: 13.5px; color: var(--ink-2); }
.nights-note span { display: inline-flex; align-items: center; gap: 6px; }
.nights-note i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.rec-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.rec-item:last-child { border-bottom: 0; }
.rec-item .sym { margin-top: 6px; }
.rec-item h3 { font-size: 15.5px; }
.rec-item p { margin: 2px 0 10px; font-size: 14.5px; color: var(--ink-2); }
.why { font-size: 14px; color: var(--ink-2); }

/* Storage: tiers and who uses the space. */
.t.tier td { height: 64px; }
.t.tier td.r { white-space: nowrap; }
.t.tier .what { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.code-tag { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-left: 6px; }
.surv { display: grid; gap: 2px; font-size: 14px; }
.surv span:last-child { color: var(--ink-3); font-size: 13.5px; }
.who-uses { list-style: none; margin: 0; padding: 8px 18px 14px; }
.who-uses li { display: grid; grid-template-columns: 130px 1fr 74px; gap: 12px; align-items: center; padding: 7px 0; font-size: 14.5px; }
.who-uses .bar { height: 10px; border-radius: 3px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.who-uses .bar i { display: block; height: 100%; background: var(--ink-2); }
.who-uses .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.who-uses .sub { display: block; font-size: 13px; color: var(--ink-3); }

/* Registry: images and their tags. */
.img-name { font-family: var(--mono); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tags .tag { font-family: var(--mono); font-weight: 500; }
.tags .tag.unused { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-3); }
.dg { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }

/* Mail: addresses. */
.addr { font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.addr .at { color: var(--ink-3); font-weight: 400; }
.subj { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.from { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); }

/* Releases: the channel line, versions, and the loud warning. */
.chan { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.chan .url { font-family: var(--mono); font-size: 14.5px; overflow-wrap: anywhere; }
.rver { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.rver small { font-weight: 400; color: var(--ink-3); }
.create { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.create .left { padding: 18px; border-right: 1px solid var(--rule); min-width: 0; }
.create .right { padding: 18px; background: var(--sunk); border-radius: 0 0 var(--r) 0; min-width: 0; }
.commits { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.commits li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.commits li:last-child { border-bottom: 0; }
.commits code { color: var(--ink-3); }
.loud { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 13px 15px; border-radius: 8px; background: var(--bad-wash); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--bad); }
.loud .ph { color: var(--bad); font-size: 21.5px; grid-row: span 2; }
.loud b { font-size: 15px; }
.loud p { margin: 0; font-size: 14px; color: var(--ink-2); }
.armed-wrap { display: inline-flex; align-items: center; gap: 8px; }
.armed-wrap .hint { font-size: 13px; color: var(--bad); }

/* People & access, Settings. */
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--sans); color: var(--paper); background: var(--ink-2); flex-shrink: 0; }
.person .av.o { background: var(--brand); color: var(--on-brand); }
.person b { display: block; }
.person span { font-size: 13.5px; color: var(--ink-3); }
.roles { list-style: none; margin: 0; padding: 6px 18px 12px; }
.roles li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
.roles li:last-child { border-bottom: 0; }
.roles b { color: var(--ink); display: block; font-size: 15px; }
.role-card { padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; }
.role-card .big-tag { grid-row: span 2; font: 700 14px var(--sans); padding: 6px 10px; border-radius: 7px; background: var(--brand); color: var(--on-brand); }
.role-card .big-tag.outpost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.role-card b { font-size: 16px; }
.role-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.t.gate td { height: 46px; }
.t.gate details.more { margin-top: 3px; }
.tech { font: 13px/1.5 var(--mono); color: var(--ink-3); margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.access-paths { display: grid; gap: 14px; padding: 16px 18px; }
.access-paths h3 { font-size: 15px; margin-bottom: 4px; }
.access-paths p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.access-paths .code { font-size: 13.5px; padding: 9px 12px; }
.invite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 160px auto; gap: 10px; align-items: end; padding: 16px 18px; }
.invite .field { margin: 0; }

/* Overview: needs-you, host disk. */
.host-kv { padding: 4px 18px 8px; }
.disk { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px 18px; font-size: 14.5px; border-top: 1px solid var(--rule); }
.disk .bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.disk .bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 6px; }
.disk .bar i.warn { background: var(--warn-fill); }
.todo.run { background: var(--info-wash); }
.todo.calm { grid-template-columns: 18px 1fr; }
.map { grid-template-columns: var(--map-cols, repeat(5, minmax(0, 1fr))); }
.map a.node { color: inherit; text-decoration: none; }
.map a.node:hover { box-shadow: 0 0 0 1px var(--ink-3); }
.map a.node.lit:hover { box-shadow: 0 0 0 2px var(--brand); }
.map .node.off { box-shadow: 0 0 0 1px var(--rule); }
.map .node.off .nm { color: var(--ink-2); font-weight: 500; }
.map-foot:empty { display: none; }

/* Code blocks you can copy from. */
.code-wrap { position: relative; }
.code-wrap .copy { position: absolute; top: 6px; right: 6px; }
pre.code, pre.log { white-space: pre-wrap; overflow-wrap: anywhere; }
.kv dd code, .kv dd .mono { overflow-wrap: anywhere; }
.kv.tight dt, .kv.tight dd { padding-top: 6px; padding-bottom: 6px; }

/* Empty states inside panels and tables. */
.empty-state .ph { font-size: 28px; color: var(--ink-3); display: block; margin: 0 auto 10px; }
.empty-state p { max-width: 52ch; margin: 0 auto 14px; }
.empty-state .acts { justify-content: center; }

/* Not found. */
.nf { max-width: 560px; margin: 70px auto 0; }
.nf .path { display: inline-block; font: 14px var(--mono); color: var(--ink-2); padding: 4px 10px; border-radius: 6px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); margin-bottom: 18px; overflow-wrap: anywhere; }
.nf h1 { font-size: 30px; letter-spacing: -0.02em; }
.nf p { color: var(--ink-2); font-size: 16px; margin: 10px 0 24px; }
.nf ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.nf li a { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 15.5px; }
.nf li a:hover { background: var(--hover); }
.nf li .ph { color: var(--ink-3); font-size: 18.5px; }
.nf li small { margin-left: auto; color: var(--ink-3); font-size: 13.5px; }

@media (max-width: 1100px) {
  .split, .split.even { grid-template-columns: minmax(0, 1fr); }
  .create { grid-template-columns: 1fr; }
  .create .left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .create .right { border-radius: 0 0 var(--r) var(--r); }
  .invite { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .fields.two, .member-grid { grid-template-columns: 1fr; }
  .browse { grid-template-columns: 1fr; }
  .browse-list { border-right: 0; border-bottom: 1px solid var(--rule); }
  .toolbar .search { width: 100%; }
  .invite { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 54px 14px minmax(0, 1fr); }
  .ev .by { grid-column: 3; }
  .t-scroll .t { min-width: 640px; }
  .who-uses li { grid-template-columns: 96px 1fr 64px; }
}

/* ============================================ first-boot setup coach */

.setup { display: grid; grid-template-rows: 52px 1fr; min-height: 100vh; }
.setup .cover { grid-column: auto; }
.tunnel { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cover-ink-2); }
.tunnel .ph { color: var(--ok); font-size: 16px; }
.setup-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); }

/* The route through setup, drawn as one trace with a pad per step. */
.setup-route { padding: 34px 26px 30px 30px; border-right: 1px solid var(--rule); background: var(--rail); }
.setup-route h2 { font-size: 14px; color: var(--ink-3); font-weight: 700; margin-bottom: 18px; }
.setup-route ol { list-style: none; margin: 0; padding: 0; }
.setup-route li { position: relative; }
.setup-route li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -4px; width: 2px; background: var(--rule-2); }
.setup-route li.done:not(:last-child)::before { background: var(--ok); }
.setup-route li > a, .setup-route li > span { display: grid; grid-template-columns: 16px 1fr; gap: 2px 14px; padding: 0 0 22px; color: inherit; text-decoration: none; }
.setup-route li > a:hover b { color: var(--brand-ink); }
.setup-route .pad { width: 16px; height: 16px; border-radius: 50%; background: var(--rail); box-shadow: inset 0 0 0 2px var(--rule-2); margin-top: 2px; position: relative; z-index: 1; }
.setup-route li.done .pad { background: var(--ok); box-shadow: none; }
.setup-route li.done .pad::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.setup-route li.here .pad { background: var(--sheet); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-wash); }
.setup-route li.here .pad::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand); }
.setup-route li.skipped .pad { box-shadow: inset 0 0 0 2px var(--ink-3); }
.setup-route b { font-size: 15.5px; }
.setup-route li:not(.done):not(.here) b { color: var(--ink-2); font-weight: 600; }
.setup-route small { grid-column: 2; font-size: 13.5px; color: var(--ink-3); }
.setup-route li.done small { color: var(--ink-2); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.setup-route .after { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.setup-route .after + .after { border-top: 0; padding-top: 0; }

.stage { padding: 40px 56px 60px; max-width: 920px; min-width: 0; }
.stage h1 { font-size: 32px; letter-spacing: -0.025em; line-height: 1.15; }
.stage > .lede { margin: 10px 0 26px; font-size: 16.5px; color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
.stage .acts { margin-top: 26px; gap: 10px; }
.stage .acts .btn.primary { height: 40px; padding: 0 18px; font-size: 15.5px; }
.stage .panel + .panel, .stage .panel + form, .stage form + .panel { margin-top: 18px; }
.names { list-style: none; margin: 0; padding: 0; }
.names li { display: grid; grid-template-columns: minmax(0, 1fr) 200px 120px; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.names li:first-child { border-top: 0; }
.names .n { font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.names .n .z { color: var(--ink-3); font-weight: 400; }
.names .for { color: var(--ink-2); }
.names .w { justify-self: end; }
.after-apply { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; }
.after-apply div { padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.after-apply div + div { border-left: 1px solid var(--rule); }
.after-apply b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }

@media (max-width: 900px) {
  /* The route folds above the stage; its own row scrolls, so it never sets
   * the column width, and the spare height goes to the stage. */
  .setup-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .setup-route { min-width: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px 16px 6px; }
  .setup-route ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; }
  .setup-route li::before { display: none; }
  .setup-route li > a, .setup-route li > span { grid-template-columns: 16px auto; padding: 6px 10px 6px 6px; white-space: nowrap; border-radius: 8px; }
  .setup-route li.here > a, .setup-route li.here > span { background: var(--sheet); }
  .setup-route small { display: none; }
  .setup-route .after { display: none; }
  .stage { padding: 24px 16px 48px; }
  .stage h1 { font-size: 26px; }
  .names li { grid-template-columns: 1fr auto; }
  .names .for { grid-column: 1; grid-row: 2; }
  .names .w { grid-row: 1 / span 2; grid-column: 2; }
  .after-apply { grid-template-columns: 1fr; }
  .after-apply div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .tunnel span { display: none; }
}

/* =========================================== sign-in and solo pages */

.solo-card .field { margin-bottom: 12px; }
.solo-card .input { height: 44px; border-radius: 10px; font-size: 16px; }
.solo-card .btn.block + .btn.block, .solo-card .btn.block + form, .solo-card form + .btn.block { margin-top: 10px; }
.solo-card .notice { margin-bottom: 18px; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font-size: 13.5px; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.fine { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.fine code { color: var(--ink-2); }
.icon-tile { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand-ink); font-size: 28px; margin-bottom: 18px; }
.icon-tile.ok { background: var(--ok-wash); color: var(--ok); }
.icon-tile.bad { background: var(--bad-wash); color: var(--bad); }
.addr-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); font-family: var(--mono); font-size: 15px; margin: 4px 0 18px; overflow-wrap: anywhere; }
.addr-line a { margin-left: auto; font-family: var(--sans); font-size: 14px; }

.solo-card.wide { max-width: 560px; padding: 0; }
.solo-card .sec { padding: 22px 30px; border-top: 1px solid var(--rule); }
.solo-card .sec:first-child { border-top: 0; padding-top: 30px; }
.solo-card .sec h2 { font-size: 17px; margin-bottom: 4px; }
.solo-card .sec > p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.who-row { display: flex; align-items: center; gap: 14px; margin: 16px 0 20px; }
.who-row .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 700 16px var(--sans); flex-shrink: 0; }
.who-row b { display: block; font-size: 17px; }
.who-row span { font-family: var(--mono); font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.secret { display: grid; gap: 8px; padding: 14px; border-radius: 10px; background: var(--warn-wash); margin-bottom: 14px; }
.secret .val { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--cover); font: 16px var(--mono); letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px var(--rule-2); overflow-wrap: anywhere; }
.secret small { font-size: 13.5px; color: var(--ink-2); }
.pw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.pw > span:nth-child(2) { color: var(--ink-3); font-size: 13.5px; }
.add-pw { display: flex; gap: 8px; margin-top: 12px; }
.add-pw .input { height: 36px; font-size: 15px; border-radius: 8px; }
.pair { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pair .tile { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 24px; color: var(--ink-2); }
.pair .tile svg { width: 26px; height: 26px; }
.pair .dots { letter-spacing: 3px; }
.app-origin { font-family: var(--mono); font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.gets { list-style: none; margin: 0 0 22px; padding: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.gets li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 12px 14px; font-size: 15px; border-top: 1px solid var(--rule); }
.gets li:first-child { border-top: 0; }
.gets .ph { color: var(--ink-2); font-size: 18.5px; margin-top: 1px; }
.gets small { grid-column: 2; font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); }
.solo-card .acts.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.solo-card .acts.two .btn { height: 44px; font-size: 16px; border-radius: 10px; width: 100%; }
@media (max-width: 520px) {
  .solo-card { padding: 26px 20px 22px; }
  .solo-card .sec { padding: 20px; }
  .solo-top, .solo-foot { padding-left: 18px; padding-right: 18px; }
  .solo-foot { flex-wrap: wrap; }
  .solo-foot span:last-child { margin-left: 0; }
}

/* ============================================================== docs */

.docs { display: grid; grid-template-columns: 236px minmax(0, 1fr) 240px; grid-template-rows: 52px 1fr; min-height: 100vh; }
.docs .cover { grid-column: 1 / -1; }
.cover .back { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cover-ink-2); text-decoration: none; }
.cover .back:hover { color: var(--cover-ink); }
.dnav { background: var(--rail); border-right: 1px solid var(--rule); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; }
.dnav a { padding: 6px 10px; border-radius: 7px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.dnav a:hover { background: var(--hover); color: var(--ink); }
.dnav a.on { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--rule); }
.dnav .g { margin: 14px 10px 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.dnav .g:first-child { margin-top: 0; }

.prose { padding: 44px 56px 80px; min-width: 0; }
.prose .crumbs { margin-bottom: 14px; }
.prose h1 { font-size: 36px; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 18px; }
.prose h1 + .lede, .prose .lede { font-size: 18.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 28px; max-width: 64ch; }
.prose h2 { font-size: 22.5px; margin: 40px 0 10px; letter-spacing: -0.02em; scroll-margin-top: 20px; }
.prose h3 { font-size: 18.5px; margin: 28px 0 8px; scroll-margin-top: 20px; }
.prose h4 { font-size: 16px; margin: 22px 0 6px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.7; color: var(--ink); max-width: 68ch; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; max-width: 68ch; }
.prose li { margin-bottom: 8px; padding-left: 4px; }
.prose li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prose b, .prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { color: var(--brand-ink); text-decoration-color: rgba(255, 255, 255, 0.35); }
.prose code { font-size: 0.88em; padding: 1px 5px; border-radius: 4px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.prose pre { margin: 6px 0 22px; max-width: 80ch; font: 14px/1.75 var(--mono); background: var(--cover); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); padding: 12px 14px; overflow: auto; color: var(--ink); }
.prose pre code { padding: 0; background: none; box-shadow: none; font-size: inherit; }
.prose blockquote { margin: 6px 0 22px; padding: 14px 16px; border-radius: 10px; background: var(--info-wash); max-width: 68ch; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { border-collapse: collapse; margin: 6px 0 22px; font-size: 15px; display: block; overflow-x: auto; max-width: 100%; }
.prose th { text-align: left; font-size: 13.5px; color: var(--ink-3); font-weight: 700; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.prose td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
.prose hr { border: 0; height: 1px; background: var(--rule); margin: 30px 0; }
.prose figure { margin: 10px 0 24px; }
.prose figure img, .prose figure svg { max-width: 100%; height: auto; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.prose figcaption { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.prose .wl { color: var(--brand-ink); text-decoration: none; border-bottom: 1px dashed var(--brand-ink); }
.prose .wl.broken { color: var(--ink-3); border-bottom-color: var(--ink-3); }
.prose .in-admin { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em; padding: 1px 8px; border-radius: 6px; background: var(--brand-wash); color: var(--brand-ink); text-decoration: none; font-weight: 700; }
.lightbox { position: fixed; inset: 0; z-index: 140; display: none; place-items: center; padding: 4vh 4vw; background: rgba(0, 0, 0, 0.88); }
.lightbox:target { display: grid; }
.lightbox img, .lightbox svg { max-width: 100%; max-height: 92vh; background: var(--sheet); border-radius: 10px; }

.toc { padding: 44px 24px 40px 0; }
.toc .box { position: sticky; top: 24px; display: grid; gap: 22px; }
.toc .toc-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; }
.toc li a:hover { color: var(--ink); }
.toc li a.on { color: var(--ink); border-left-color: var(--brand); font-weight: 700; }
.toc .links a { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.toc .links .ph { color: var(--ink-3); }

@media (max-width: 1180px) {
  .docs { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 760px) {
  .docs { grid-template-columns: 1fr; grid-template-rows: 52px auto 1fr; }
  .dnav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--rule); padding: 10px 12px; }
  .dnav .g { display: none; }
  .prose { padding: 26px 16px 56px; }
  .prose h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .sym.run, .btn[aria-busy="true"]::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* overview — page-specific rules (prefer the shared classes above). */

/* workloads — page-specific rules (prefer the shared classes above).
 * Covers /workloads, /apps (legacy containers), /profiles and the sign-in
 * page look under Settings (scoped by .look-*). */

/* List: attached tags sit in a row. */
.wl-attach { display: flex; gap: 6px; flex-wrap: wrap; }

/* The workload map sits in a panel; tabs keep some air below it. */
.wl-wiring + .tabs { margin-top: 26px; }
.wl-map { padding-bottom: 18px; }
.wl-map .node > .ph { color: var(--ink-3); font-size: 15px; flex-shrink: 0; }
.wl-map .node .meta .ph { font-size: 13px; vertical-align: -1px; }
.wl-map .node .nm code { font-size: 13.5px; }
.wl-map .node.tall .row2 code { color: var(--ink); }

/* "More" in the page head: rename and delete. */
.wl-more { position: relative; }
.wl-more > summary { list-style: none; }
.wl-more > summary::-webkit-details-marker { display: none; }
.wl-more[open] > summary { background: var(--hover); color: var(--ink); }
.wl-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: 300px; padding: 14px;
  background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-pop);
  display: grid; gap: 12px;
}
.wl-menu .field { margin: 0; }
.wl-menu .row .input { flex: 1; min-width: 0; }
.wl-menu-danger { display: grid; gap: 6px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--rule); }
.wl-menu-danger .hint { font-size: 13.5px; color: var(--ink-3); }

/* Routes: the lock and the user on one line. */
.wl-gap { gap: 6px; }
.wl-gap .ph { color: var(--ink-3); }

/* A tab's readings on top of its table (sign-in realm, mail, jobs). */
.wl-facts { border-bottom: 1px solid var(--rule); }
.wl-facts:last-child { border-bottom: 0; }
.wl-facts b { min-width: 0; overflow-wrap: anywhere; flex-wrap: wrap; }
.wl-facts b > * { min-width: 0; }
.wl-facts span { overflow-wrap: anywhere; }
.wl-facts b code { font-size: 14.5px; }
.wl-facts b form { display: contents; }
.wl-facts b .btn { font-weight: 600; }
.wl-facts + .notice, .wl-facts ~ .notice { margin: 14px 18px; }
.wl-link { color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.wl-link:hover { text-decoration: underline; text-decoration-color: var(--ink-3); }
/* Four readings fold to two by two when a sheet narrows the panel. */
#main[data-page="workloads"] .work > .panel:has(> .wl-facts.four) { container-type: inline-size; }
@container (max-width: 860px) {
  .wl-facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-facts.four > div:nth-child(odd) { border-left: 0; }
  .wl-facts.four > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
#main[data-page="workloads"] .work .panel-head h2 { flex-shrink: 0; }

/* Image picker inside the container sheet. */
.wl-pick .search .input { height: 34px; }
.wl-pick .choice b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.wl-pick .choice small { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.wl-pick details.more summary { margin-top: 2px; }

/* Data tab: browse results and the upload line. */
.wl-res td { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-small { font-size: 13.5px; }
.wl-none { padding: 6px 10px; font-size: 13.5px; }
.wl-upload { padding: 14px 18px; border-top: 1px solid var(--rule); }
.wl-upload .inline-form .field { min-width: 200px; }
.wl-upload .hint { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 760px) {
  .wl-menu { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); }
  .wl-hide-narrow { display: none; }
}

/* Hints outside a .field (mail, sign-in) read like field hints. */
#main[data-page="workloads"] p.hint, #main[data-page="workloads"] span.hint { font-size: 13.5px; color: var(--ink-3); }
#main[data-page="workloads"] .panel-body > p.hint { margin: 8px 0 0; }

/* Legacy strip: a footnote under the list; its links sit right, together. */
#main[data-page="workloads"] .legacy .btn + .btn { margin-left: 0; }

/* Data tab: members fill the row (two cards share it), one beside a sheet. */
#main[data-page="workloads"] .member-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
#main[data-page="workloads"] .col > .member-grid { margin-bottom: 0; }

/* Profiles: the sample sits folded inside the apply sheet. */
.pf-sample pre.code { max-height: 360px; overflow: auto; margin: 10px 0 0; }

/* Settings · sign-in page look: the specimen is the subject, the CSS
 * editor is the sheet beside it. */
.look-work .sheet textarea.tall { min-height: 360px; }


/* network — DNS and Mail page rules (prefer the shared classes above).
 * Scoped to #main[data-page="dns"|"mail"] or to class names only these
 * pages use. */

/* A field whose control is not an input (a segmented choice, a plain value). */
#main[data-page="dns"] .field > .label,
#main[data-page="mail"] .field > .label { font-size: 14.5px; font-weight: 700; }
#main[data-page="dns"] .field > .seg,
#main[data-page="mail"] .field > .seg { justify-self: start; flex-wrap: wrap; }

/* The quiet line at the end of a side sheet's body. */
#main[data-page="dns"] .sheet-note,
#main[data-page="mail"] .sheet-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#main[data-page="mail"] .sheet-note + .sheet-note { margin-top: 6px; }

/* A filter, a segmented choice and a count in one panel head. */
.names-tools, .zone-tools, .journal-tools { flex-wrap: wrap; padding: 10px 14px 10px 18px; gap: 10px 12px; }
.names-tools .search, .zone-tools .search, .journal-tools .search { width: 260px; max-width: 100%; }
.zone-tools .seg, .journal-tools .seg { flex-wrap: wrap; }

/* DNS names: what each reaches, and its record at the provider. */
.reaches { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#main[data-page="dns"] .t.names th:first-child { width: 34%; }
#main[data-page="dns"] .t tr.grp .grp-link { float: right; font-weight: 400; color: var(--ink-2); }
#main[data-page="dns"] .t tr.grp .grp-link:hover { color: var(--brand-ink); }
.rec-wait {
  display: inline-block; vertical-align: middle; width: 128px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--sunk) 0%, var(--rule) 40%, var(--sunk) 80%);
  background-size: 300% 100%; animation: skel 1.4s ease-in-out infinite;
}
.rec-warn { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px 12px; flex-wrap: wrap; }
.rec-warn a { font-size: 14px; color: var(--ink-2); }
.rec-warn a:hover { color: var(--brand-ink); }
.rec-via { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px 10px; flex-wrap: wrap; }
#main[data-page="dns"] .t tr.wait-row td { height: auto; padding: 0; }
#main[data-page="dns"] .t tr.note-row td { height: auto; padding: 12px 18px; font-size: 14px; }
#main[data-page="dns"] .kept { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; color: var(--ink-3); font-size: 15px; }

/* Point a name: the line above the plan. */
.plan-h { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; }
#main[data-page="dns"] .sheet .plan { margin-bottom: 14px; }

/* Mail: who a mailbox belongs to; the senders' "used for" line. */
#main[data-page="mail"] .owner { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
#main[data-page="mail"] .owner .ph { color: var(--ink-3); }
#main[data-page="mail"] .t td .sub .state { font-size: 13.5px; }

@media (max-width: 760px) {
  .names-tools .search, .zone-tools .search, .journal-tools .search { width: 100%; }
  .names-tools .end, .zone-tools .end, .journal-tools .end { margin-left: 0; }
  #main[data-page="dns"] .t tr.grp .grp-link { float: none; margin-left: 8px; }
}


/* Names on a phone: the name on its own line, what it reaches and its
 * record under it, instead of a table that scrolls sideways. */
@media (max-width: 760px) {
  #main[data-page="dns"] .t.names, #main[data-page="dns"] .t.names tbody { display: block; min-width: 0; }
  #main[data-page="dns"] .t.names thead { display: none; }
  #main[data-page="dns"] .t.names tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--rule); }
  #main[data-page="dns"] .t.names tr[hidden] { display: none; }
  #main[data-page="dns"] .t.names tbody tr:last-child { border-bottom: 0; }
  #main[data-page="dns"] .t.names td { height: auto; border-bottom: 0; padding: 0 16px 10px; }
  #main[data-page="dns"] .t.names td:first-child { grid-column: 1 / -1; padding-top: 10px; padding-bottom: 4px; }
  #main[data-page="dns"] .t.names tr.grp td { grid-column: 1 / -1; padding: 8px 16px; }
}



/* Mail addresses: one row per account (its address opens it), the address
 * field (name @ domain), and a forward's arrow. */
#main[data-page="mail"] .t.accounts th:first-child { width: 34%; }
#main[data-page="mail"] .t.addresses th:first-child { width: 55%; }
#main[data-page="mail"] a.acct { text-decoration: none; }
#main[data-page="mail"] a.acct:hover .addr { text-decoration: underline; text-underline-offset: 3px; }
#main[data-page="mail"] .addr-input { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 8px; }
#main[data-page="mail"] .addr-input .at { font-family: var(--mono); color: var(--ink-3); }
#main[data-page="mail"] .fwd { display: inline-flex; align-items: center; gap: 8px; }
#main[data-page="mail"] .fwd .ph { color: var(--ink-3); }

/* data — page-specific rules (prefer the shared classes above).
 * Storage, Backups, Registry, and the legacy Containers / Profiles pages. */

/* Backups: a gap under the thirty-day strip uses the strip's empty mark. */
.nights-note i.k-none { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
/* Today, before its first snapshot: an outline, not a gap. */
.nights i.soon { background: transparent; box-shadow: none; outline: 1px dashed var(--rule-2); outline-offset: -1px; opacity: 1; }
.set .panel-head .muted { min-width: 0; }
.set .big .faint { font-weight: 400; }
.set .set-foot .end { margin-left: auto; }
.rec-item form { display: inline-flex; }
.rec-item ol { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.rec-item ol li { margin-bottom: 4px; }

/* A loud warning that carries its own buttons under the text. */
.loud.with-acts > .acts { grid-column: 2; margin-top: 10px; }

/* Storage: the tiers, the disks, object storage. */
.t.tier td .surv .state { font-size: 14px; }
.t.tier td .surv a { color: inherit; }
.disks .dev { font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); }
.disks th.used { width: 34%; }
.panel-body.obj { display: grid; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.panel-body.obj p { margin: 0; max-width: 96ch; }
.panel-body.obj b { color: var(--ink); }

/* Registry: status, push commands and the image list. */
.reg-top { --split: minmax(0, 1fr) minmax(0, 480px); }
.reg-status .facts > div { padding-top: 16px; padding-bottom: 16px; }
.push .panel-body { display: grid; gap: 10px; }
.push .code { font-size: 13px; padding-right: 44px; }
.push .note { font-size: 13.5px; color: var(--ink-3); }
.reg-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--rule); }
.reg-tools .search { width: 240px; margin-left: 6px; }
.reg-tools .note { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.t .tag-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.t .in-use { font-size: 13.5px; }
@media (max-width: 760px) {
  .reg-tools .search { width: 100%; margin-left: 0; }
  .reg-tools .note { margin-left: 0; }
}

/* Profiles: the editor. */
textarea.input.profile-json { min-height: 320px; }

/* platform — page-specific rules (prefer the shared classes above).
 * Services, Releases, Settings and Jobs (plus a few older rules for
 * People & access and Activity). */

/* Releases · forge: what this forge runs, its newest update notes. */
.rel .create .lead { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.rel .create .lead code { color: var(--ink); }
.rel .commits.plain li { grid-template-columns: 1fr; }
.rel .all-notes { margin-top: 8px; }
.rel .all-notes > summary { color: var(--ink); }
.rel .all-notes[open] > summary { margin-bottom: 4px; }
.rel .create textarea.input { height: 132px; min-height: 0; font-size: 14px; }
.rel .create .row .faint { font-size: 13.5px; }
/* Recorded but not published: the one next step sits beside its reason. */
.rel .next-step { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }

/* Releases · outpost: channel on the left, auto-apply on the right. */
.rel .chan.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; gap: 0; padding: 0; }
.rel .chan.two > * { padding: 16px 18px; min-width: 0; }
.rel .chan.two > * + * { border-left: 1px solid var(--rule); }
.rel .chan.two p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.rel .chan.two .url { margin-top: 6px; }
.rel .chan.two .switch b { font-size: 15px; }
.rel .chan.two .inline-form .field { min-width: 220px; }

/* Releases · outpost: the newer release and its next step. */
.rel .next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; padding: 18px; align-items: start; }
.rel .next h3 { font-size: 18px; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rel .next h3 small { font: 400 14px var(--sans); color: var(--ink-3); }
.rel .next .notes { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 70ch; }
.rel .next .steps { margin: 10px 0 0; }
.rel .next .acts { display: grid; gap: 8px; justify-items: end; }
.rel .next .acts .faint { font-size: 13.5px; }

/* Settings · sign-in page look: the specimen frame. */
iframe.specimen { display: block; width: 100%; height: 560px; border: 0; background: var(--paper); }

/* People & access: the invite row sits above the table. */
.invite { border-bottom: 1px solid var(--rule); }

/* Activity: a switch that is a link (server-side toggle). */
.toolbar a.switch { text-decoration: none; color: var(--ink-2); }
.toolbar a.switch:hover { color: var(--ink); }
.ev .log.short { max-height: 120px; }

@media (max-width: 1100px) {
  .rel .chan.two { grid-template-columns: minmax(0, 1fr); }
  .rel .chan.two > * + * { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .rel .next { grid-template-columns: minmax(0, 1fr); }
  .rel .next .acts { justify-items: start; }
  iframe.specimen { height: 480px; }
}

/* Jobs: one line of failure text under the state, full text on hover. */
#jobs-table .sub.clip { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Releases: a version and its commit stay on one line in tables. */
.rel .t .rver { white-space: nowrap; }
/* Jobs: with the log open beside it, the table keeps only what fits. */
.work:has(> .sheet) #jobs-table .wide-only { display: none; }

/* Services: the role reads beside the name; the unit sits under it. */
.svc th.svc-name { width: 46%; }
.svc .role { color: var(--ink-2); font-size: 14px; }
.svc .showing { font-size: 13.5px; }

/* Service and job logs: lines filter in place (Everything / Warnings / Errors). */
.loglines .seg a .n { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.loglines .seg a.on .n { color: inherit; }
.loglines .panel-note { border-top: 0; }
/* One line per row; a wrapped line hangs under the words, past the time
 * (8ch + space) and level (5ch + space) columns. */
.loglines .log > span { display: block; padding-left: var(--hang, 0); text-indent: calc(-1 * var(--hang, 0)); }
.loglines .log.has-t > span { --hang: 9ch; }
.loglines .log.has-lv > span { --hang: 6ch; }
.loglines .log.has-t.has-lv > span { --hang: 15ch; }
.loglines .log .lv { width: 5ch; text-indent: 0; }

/* setup — page-specific rules (prefer the shared classes above). */

/* Route: the heading links back to the hub; the step setup stands on (when
 * you are looking at another) reads a shade stronger; a step that needs
 * doing again gets a sand ring. */
.setup-route h2 a { color: inherit; text-decoration: none; }
.setup-route h2 a:hover { color: var(--brand-ink); }
.setup-route li.up-next b { color: var(--ink); }
/* Looking back at a finished step: the trace stays green through it and its
 * value keeps the done style. */
.setup-route li.finished:not(:last-child)::before { background: var(--ok); }
.setup-route li.here.finished small { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.setup-route li.redo:not(.here) .pad { box-shadow: inset 0 0 0 2px var(--warn-fill); }
.setup-route li.redo small { color: var(--warn); }
.setup-route li.here small { color: var(--ink-2); }
.route-alert { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; font-size: 14px; color: var(--bad); text-decoration: none; }
.route-alert:hover { color: var(--ink); }

/* Stage flow: blocks sit 18px apart (the lede and the action row keep
 * their own, larger air). */
.stage > * + *, .stage > form > * + *, .stage > [data-lazy-done] > * + *, .stage > [data-lazy-done] > form > * + * { margin-top: 18px; }
.stage .acts, .stage form > .acts { margin-top: 26px; }
/* Keep a notice's margin inside the panel it closes. */
.stage section.panel { display: flow-root; }
.stage .panel > .notice { margin: 4px 18px 16px; }
.stage .panel-body > .field:last-child, .stage .panel-body > .fields:last-child .field { margin-bottom: 0; }
.stage .facts + .panel-body { border-top: 1px solid var(--rule); }
.stage .facts .state { font-size: 16px; }
.stage .facts b { min-width: 0; overflow-wrap: anywhere; }
.stage .notice time { color: var(--ink); }
/* Service names stay on one line; the note column takes the wrap. */
.stage .t td:first-child { white-space: nowrap; }


/* idp — sign-in, account and consent pages (wicket-idp, body.solo.idp).
 * The card, field, notice, .or/.fine/.icon-tile/.addr-line, account .sec,
 * .who-row/.secret/.pw/.add-pw and consent .pair/.gets/.acts.two rules are
 * shared above; this file only adds what those pages need beyond them. */

/* No script to copy with: one click selects the whole one-time password. */
body.idp .secret .val { user-select: all; -webkit-user-select: all; }
body.idp .secret > b { font-size: 14.5px; }

/* Accounts are email-only today, so the address is the name line. */
body.idp .who-row > div { min-width: 0; }
body.idp .who-row b { overflow-wrap: anywhere; }

/* Session line at the foot of the account card. */
body.idp .sec.row > .faint { font-size: 14px; }
body.idp .sec.row form { margin: 0; }

/* Consent buttons are a form; problem-page detail stays readable. */
body.idp form.acts.two { margin: 0; }
body.idp .fine code { overflow-wrap: anywhere; }

/* Sign in and "check your email" use the sign-in board's narrower card. */
body.idp .solo-card.narrow { max-width: 420px; padding-top: 34px; }
body.idp .solo-card.narrow .lede { margin-bottom: 26px; }
body.idp .solo-card.narrow .lede.sent { margin-bottom: 18px; }

/* "Not you?" in the consent footer is a sign-out form that reads as a link. */
body.idp .solo-foot form.inline { display: inline; margin: 0; }
body.idp .solo-foot .linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.idp .solo-foot .linkish:hover { color: var(--brand-ink); text-decoration-color: currentColor; }

/* docs — page-specific rules (prefer the shared classes above). */

/* Cover: where these pages come from. */
.docs .cover .docs-note { font-size: 14px; color: var(--cover-ink-2); }

/* The page list stays in view on long pages; the rail colour fills the column. */
.dnav-in { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
#doc:focus { outline: none; }

/* Section links appear beside a heading on hover or focus. */
.prose .hlink { margin-left: 8px; color: var(--ink-3); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 120ms ease-out; }
.prose h2:hover .hlink, .prose h3:hover .hlink, .prose h4:hover .hlink, .prose .hlink:focus-visible { opacity: 1; }
.prose .hlink:hover { color: var(--brand-ink); }
.prose :is(h2, h3, h4):target { color: var(--brand-ink); }

/* Blockquotes read as callouts. */
.prose blockquote.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.prose blockquote.callout > .ph { color: var(--info); font-size: 20px; margin-top: 3px; }
.prose blockquote.callout p { font-size: 16px; }

/* Code: at least the reading measure, wider when its lines need the room;
 * comments quieter than commands. */
.prose pre { width: fit-content; min-width: min(100%, 74ch); max-width: 100%; }
.prose pre .c { color: var(--ink-3); }

/* Table cells aligned by the Markdown delimiter row. */
.prose th.ar, .prose td.ar { text-align: right; padding-right: 14px; }
.prose th.ac, .prose td.ac { text-align: center; }
.prose td code { overflow-wrap: anywhere; }

/* Pictures: open larger in place, close back to the figure. */
.prose figure .zoom-pic { display: block; cursor: zoom-in; }
.prose figure svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.prose svg a:hover rect, .lightbox svg a:hover rect { stroke: var(--brand); }
.prose figcaption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.prose figcaption .zoom { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.prose figcaption .zoom:hover { color: var(--brand-ink); }
.lightbox .lb-shade { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox > img, .lightbox > svg { position: relative; display: block; width: min(92vw, 1500px); height: auto; max-height: 92vh; object-fit: contain; box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-pop); }
.lightbox .lb-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); text-decoration: none; font-size: 18px; }
.lightbox .lb-close:hover { color: var(--brand-ink); }

/* On this page: sub-sections sit one step in. */
.toc li.sub a { padding-left: 24px; font-size: 13.5px; }
.toc .links a:hover { color: var(--ink); }

/* Not found inside the docs layout. */
.prose .nf { margin: 30px 0 0; }
/* …with the not-found board's list, not the article's bullets. */
.prose .nf h1 { font-size: 30px; margin-bottom: 0; }
.prose .nf p { color: var(--ink-2); font-size: 16px; margin: 10px 0 24px; }
.prose .nf ul { padding-left: 0; max-width: none; }
.prose .nf li { margin: 0; padding: 0; max-width: none; }

@media (max-width: 1180px) {
  .docs .cover .docs-note { display: none; }
}
@media (max-width: 760px) {
  .dnav-in { position: static; flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .dnav-in .g { display: none; }
  .lightbox .lb-close { top: 10px; right: 10px; }
}

/* Generated by crates/wicket-ui/tools/icons.sh — do not edit. */
.ph.ph-app-window:before{content:"\e5da"}
.ph.ph-archive:before{content:"\e00c"}
.ph.ph-arrow-bend-up-left:before{content:"\e024"}
.ph.ph-arrow-bend-up-right:before{content:"\e026"}
.ph.ph-arrow-circle-right:before{content:"\e02e"}
.ph.ph-arrow-clockwise:before{content:"\e036"}
.ph.ph-arrow-counter-clockwise:before{content:"\e038"}
.ph.ph-arrow-left:before{content:"\e058"}
.ph.ph-arrow-right:before{content:"\e06c"}
.ph.ph-arrows-clockwise:before{content:"\e094"}
.ph.ph-arrows-out:before{content:"\e0a2"}
.ph.ph-arrow-square-out:before{content:"\e5de"}
.ph.ph-arrow-up-right:before{content:"\e092"}
.ph.ph-at:before{content:"\e0ac"}
.ph.ph-book-open-text:before{content:"\e8f2"}
.ph.ph-camera:before{content:"\e10e"}
.ph.ph-caret-right:before{content:"\e13a"}
.ph.ph-check:before{content:"\e182"}
.ph.ph-check-circle:before{content:"\e184"}
.ph.ph-circle:before{content:"\e18a"}
.ph.ph-circle-dashed:before{content:"\e602"}
.ph.ph-clock:before{content:"\e19a"}
.ph.ph-clock-counter-clockwise:before{content:"\e1a0"}
.ph.ph-cloud:before{content:"\e1aa"}
.ph.ph-cloud-arrow-up:before{content:"\e1ae"}
.ph.ph-cloud-check:before{content:"\e1b0"}
.ph.ph-compass:before{content:"\e1c8"}
.ph.ph-copy:before{content:"\e1ca"}
.ph.ph-cube:before{content:"\e1da"}
.ph.ph-database:before{content:"\e1de"}
.ph.ph-dots-three:before{content:"\e1fe"}
.ph.ph-download-simple:before{content:"\e20c"}
.ph.ph-envelope-simple:before{content:"\e218"}
.ph.ph-envelope-simple-open:before{content:"\e21a"}
.ph.ph-eye:before{content:"\e220"}
.ph.ph-flag:before{content:"\e244"}
.ph.ph-floppy-disk:before{content:"\e248"}
.ph.ph-folder-open:before{content:"\e256"}
.ph.ph-folder-simple:before{content:"\e25a"}
.ph.ph-gear-six:before{content:"\e272"}
.ph.ph-globe-hemisphere-west:before{content:"\e28c"}
.ph.ph-globe-simple:before{content:"\e28e"}
.ph.ph-hard-drives:before{content:"\e2a0"}
.ph.ph-heartbeat:before{content:"\e2ac"}
.ph.ph-house:before{content:"\e2c2"}
.ph.ph-identification-card:before{content:"\e2c8"}
.ph.ph-info:before{content:"\e2ce"}
.ph.ph-key:before{content:"\e2d6"}
.ph.ph-link:before{content:"\e2e2"}
.ph.ph-list:before{content:"\e2f0"}
.ph.ph-list-bullets:before{content:"\e2f2"}
.ph.ph-list-checks:before{content:"\eadc"}
.ph.ph-list-magnifying-glass:before{content:"\ebe0"}
.ph.ph-lock-key:before{content:"\e2fe"}
.ph.ph-lock-simple:before{content:"\e308"}
.ph.ph-lock-simple-open:before{content:"\e30a"}
.ph.ph-magnifying-glass:before{content:"\e30c"}
.ph.ph-map-pin:before{content:"\e316"}
.ph.ph-package:before{content:"\e390"}
.ph.ph-palette:before{content:"\e6c8"}
.ph.ph-paper-plane-right:before{content:"\e396"}
.ph.ph-paper-plane-tilt:before{content:"\e398"}
.ph.ph-path:before{content:"\e39c"}
.ph.ph-pencil-simple:before{content:"\e3b4"}
.ph.ph-play:before{content:"\e3d0"}
.ph.ph-plug:before{content:"\e946"}
.ph.ph-plugs-connected:before{content:"\eb5a"}
.ph.ph-plus:before{content:"\e3d4"}
.ph.ph-power:before{content:"\e3da"}
.ph.ph-prohibit:before{content:"\e3de"}
.ph.ph-pulse:before{content:"\e000"}
.ph.ph-rocket-launch:before{content:"\e3fe"}
.ph.ph-shield-check:before{content:"\e40c"}
.ph.ph-shipping-container:before{content:"\e78c"}
.ph.ph-sign-out:before{content:"\e42a"}
.ph.ph-signpost:before{content:"\e89c"}
.ph.ph-sparkle:before{content:"\e6a2"}
.ph.ph-squares-four:before{content:"\e464"}
.ph.ph-stack:before{content:"\e466"}
.ph.ph-stop:before{content:"\e46c"}
.ph.ph-trash:before{content:"\e4a6"}
.ph.ph-tray:before{content:"\e4aa"}
.ph.ph-tray-arrow-down:before{content:"\e010"}
.ph.ph-upload-simple:before{content:"\e4c0"}
.ph.ph-user:before{content:"\e4c2"}
.ph.ph-user-circle:before{content:"\e4c4"}
.ph.ph-users:before{content:"\e4d6"}
.ph.ph-warning:before{content:"\e4e0"}
.ph.ph-warning-circle:before{content:"\e4e2"}
.ph.ph-warning-octagon:before{content:"\e4e4"}
.ph.ph-x:before{content:"\e4f6"}