:root {
  --ink: #061018;
  --paper: #e7f3fa;
  --muted: rgba(231, 243, 250, 0.58);
  --line: rgba(94, 196, 230, 0.2);
  --brass: #4ec8ee;
  --stamp: #ef6b5a;
  --ok: #3dba8b;
  --foam: #f4fbff;
  --field: #0a1822;
  --panel: rgba(8, 22, 32, 0.78);
  --night: #05090e;
  --room: #4ec8ee;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.framed {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.framed .grain, body.framed .sky-glow { display: none; }
body {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background-color: var(--night);
  background-image:
    linear-gradient(rgba(78, 200, 238, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 200, 238, 0.035) 1px, transparent 1px),
    radial-gradient(920px 480px at 88% -8%, rgba(78, 200, 238, 0.16), transparent 56%),
    radial-gradient(640px 380px at 0% 110%, rgba(8, 70, 110, 0.4), transparent 52%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  color: var(--paper);
  min-height: 100vh;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ico, .chev {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-glow {
  pointer-events: none;
  position: fixed;
  width: 22rem;
  height: 12rem;
  top: -3rem;
  right: 8%;
  background: radial-gradient(ellipse at center, rgba(78, 200, 238, 0.18), transparent 70%);
  filter: blur(12px);
}
.grain { display: none; }
.mast {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 11, 16, 0.88);
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: visible;
}
.brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-width: 12rem;
}
.logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(78, 200, 238, 0.4));
}
.logo.sit { width: 4.6rem; height: 4.6rem; margin-bottom: 0.35rem; }
.mark { display: none; }
.kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--room);
  margin: 0 0 0.12rem;
}
h1, h2, h3 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.mast h1 { font-size: 1.02rem; font-weight: 500; }
.rail {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  flex-wrap: wrap;
}
.nav-link, .menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--paper);
  text-decoration: none;
  opacity: 0.55;
  padding: 0.42rem 0.62rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  font: 500 0.86rem/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.nav-link.on, .nav-link:hover, .menu.on > summary, .menu > summary:hover, .menu[open] > summary {
  opacity: 1;
  background: rgba(78, 200, 238, 0.1);
  color: var(--foam);
}
.menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.chev { width: 0.85rem; height: 0.85rem; opacity: 0.7; }
.menu[open] .chev { transform: rotate(180deg); }
.menu-pop {
  position: fixed;
  top: auto;
  left: auto;
  min-width: 13.2rem;
  padding: 0.35rem;
  background: #0b1a24;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: 80;
  display: grid;
  gap: 0.12rem;
}
.menu:not([open]) > .menu-pop { display: none; }
.menu.account { margin-left: auto; }
.menu.account .menu-pop { min-width: 11.5rem; }
.menu-pop a, .menu-pop button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  color: var(--paper);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  padding: 0.48rem 0.55rem;
  font: 500 0.86rem/1.2 "IBM Plex Sans", sans-serif;
  opacity: 0.85;
  cursor: pointer;
}
.menu-pop a:hover, .menu-pop a.on, .menu-pop button:hover {
  opacity: 1;
  background: rgba(78, 200, 238, 0.12);
}
.menu-meta {
  margin: 0.1rem 0.55rem 0.35rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.out { margin: 0; }
.out button, button, .ghost.fill {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  background: var(--room);
  color: #04202b;
  border: 0;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  border-radius: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.menu-pop .out button {
  background: transparent;
  color: var(--paper);
  justify-content: flex-start;
  border-radius: 0.45rem;
}
main.sheet { padding: 1.6rem 1.5rem 3rem; max-width: 1120px; }
main.canvas {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
  min-height: 0;
}
.frame-rail {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 0.45rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.frame-rail a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--brass); }
.n8n-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  min-height: 0;
  background: #071018;
}
.landing {
  position: relative;
  padding: 1.5rem 2rem 4rem;
  max-width: 52rem;
}
.mast.public { position: relative; }
.mast.public .rail, .mast.public nav { justify-content: flex-end; }
.mast.public nav a { opacity: 0.85; }
.hero.land {
  position: relative;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem);
  gap: 1.5rem 2rem;
  align-items: start;
}
.hero-copy { min-width: 0; }
.cloud {
  width: 100%;
  height: auto;
  display: block;
  margin: 0.2rem 0 0;
  filter: drop-shadow(0 12px 28px rgba(78, 200, 238, 0.32));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero.land h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  max-width: 22ch;
}
.lede { max-width: 38rem; }
.why {
  margin: 2.4rem 0 1.8rem;
  max-width: 38rem;
}
.why h3 {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
  color: var(--brass);
}
.why p { margin: 0 0 1rem; opacity: 0.88; }
.why p:last-child { margin-bottom: 0; }
.actions { margin-top: 1.4rem; display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }
.ghost.fill {
  background: var(--brass);
  color: #04202b;
  border-color: var(--brass);
}
.route {
  list-style: none;
  padding: 0;
  margin: 2.4rem 0 1.8rem;
  display: grid;
  gap: 0.75rem;
}
.route li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
}
.route span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--brass);
}
.depts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.65rem;
}
.depts li {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
}
.depts strong { display: block; color: var(--brass); font-size: 0.95rem; }
.footnote {
  margin-top: 2rem;
  opacity: 0.55;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
}
.login-card .hint { margin-top: 1.1rem; }
main.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.login-card {
  width: min(28rem, 100%);
  background: var(--panel);
  color: var(--paper);
  padding: 2rem 1.7rem 1.7rem;
  border: 1px solid var(--line);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  border-radius: 1rem;
  backdrop-filter: blur(16px);
}
.login-card .kicker { color: var(--brass); }
.login-card h1 { font-size: 2rem; line-height: 1.05; margin-bottom: 0.55rem; }
.lede { opacity: 0.8; max-width: 40rem; }
.login-card .lede { font-size: 0.98rem; }
.login-card .quiet { color: var(--brass); }
.stack { display: grid; gap: 0.85rem; margin-top: 1.4rem; }
label { display: grid; gap: 0.3rem; font-size: 0.92rem; }
input, select, textarea {
  font: 0.9rem/1.35 "IBM Plex Sans", sans-serif;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--paper);
  border-radius: 0.45rem;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%234ec8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  padding-right: 2rem;
}
textarea {
  min-height: 7rem;
  width: 100%;
  max-width: 44rem;
  resize: vertical;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
}
.login-card button { justify-self: start; margin-top: 0.35rem; }
.hero { margin-bottom: 1.35rem; }
.hero h2 { font-size: 2.05rem; }
.now {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem 1.25rem;
  padding: 1.05rem 1.2rem 1.1rem;
  margin: 0 0 1.5rem;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--room) 16%, transparent), rgba(8, 22, 32, 0.55));
  border: 1px solid color-mix(in srgb, var(--room) 42%, var(--line));
  border-left: 5px solid var(--room);
  border-radius: 0.85rem;
}
.now > div {
  flex: 1 1 16rem;
  min-width: 0;
}
.now .do {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--room);
  margin: 0 0 0.28rem;
}
.now h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.12;
  margin: 0 0 0.35rem;
}
.now p { margin: 0.35rem 0 0; max-width: 42rem; opacity: 0.82; }
.now .do + h2 + p { margin-top: 0; }
.now .recipe + .do { margin-top: 0.9rem; }
.recipe a { color: var(--brass); }
.now .actions { margin: 0.15rem 0 0; }
.now-go,
.now > .stamp,
.now > .actions {
  flex: 0 0 auto;
  margin-top: 1.15rem;
}
.recipe {
  list-style: none;
  padding: 0;
  margin: 0.55rem 0 0;
  display: grid;
  gap: 0.45rem;
  max-width: 40rem;
  counter-reset: recipe;
}
.recipe li {
  counter-increment: recipe;
  position: relative;
  display: block;
  padding-left: 1.85rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.recipe li::before {
  content: counter(recipe);
  position: absolute;
  left: 0;
  top: 0.12rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--night);
  background: var(--room);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.tab-panels > section > .recipe { margin: 0 0 1rem; }
.wall, .people, .tasks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.75rem;
}
.wall {
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.wall > li, .people > li, .tasks > li {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 0.85rem;
  padding: 0.95rem 1rem 1rem;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.wall > li.waiting {
  border-color: color-mix(in srgb, var(--room) 70%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room) 25%, transparent);
}
.run {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}
.run > li {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 0.85rem;
  padding: 0.95rem 1rem 1rem;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.run > li.waiting {
  border-color: color-mix(in srgb, var(--room) 70%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room) 25%, transparent);
}
.run > li.done { opacity: 0.72; }
.run h3 { font-size: 1.2rem; margin: 0; }
.run p { margin: 0; opacity: 0.82; }
.run .actions { margin-top: 0.35rem; }
.wall > li.dim, .people > li.dim { opacity: 0.48; }
.wall h3, .people h3, .tasks h3 {
  font-size: 1.2rem;
  margin: 0;
}
.wall h3 a, .people h3 a, .tasks h3 a { color: inherit; text-decoration: none; }
.wall h3 a:hover, .people h3 a:hover { border-bottom: 1px solid var(--room); }
.flag {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--room);
}
.week { margin: 0; font-size: 0.92rem; }
.people {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.people .meta { margin: 0; font-size: 0.82rem; opacity: 0.7; }
.tasks > li {
  grid-template-columns: 1fr auto;
  align-items: start;
  border-left: 4px solid var(--room);
}
.tasks > li.dim { opacity: 0.48; }
.tasks .who { margin: 0; opacity: 0.7; font-size: 0.85rem; }
.tasks .row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.more {
  margin: 1.2rem 0 0.4rem;
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
  padding: 0.4rem 0.9rem 0.85rem;
}
.more > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.55rem 0;
  color: var(--room);
}
.pulse {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.8rem;
  margin: 1.6rem 0 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  opacity: 0.75;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
}
.pulse strong { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 700; margin-right: 0.3rem; color: var(--paper); opacity: 1; }
.tabset { margin: 0 0 0.5rem; }
.tabs {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
  padding: 0.2rem;
  background: rgba(8, 22, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  width: fit-content;
  max-width: 100%;
}
.tabs [role="tab"] {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: var(--paper);
  opacity: 0.5;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.42rem 0.7rem;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tabs [role="tab"]:hover { opacity: 0.9; }
.tabs [role="tab"].on {
  opacity: 1;
  color: #04202b;
  background: var(--room);
}
.tabs [role="tab"].on .ico { stroke: #04202b; }
.tabs [role="tab"] .count {
  opacity: 0.7;
  margin-left: 0.15rem;
  font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
}
.tab-panels { min-height: 6rem; overflow: visible; }
.tabset:not(.is-on) .tab-panels > [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
.tab-panels > [role="tabpanel"][hidden] { display: none !important; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-bottom: 1.6rem; }
.stat {
  border: 1px solid var(--line);
  padding: 1rem 1.05rem 0.9rem;
  background: var(--panel);
  border-radius: 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.8rem;
  align-items: center;
}
.stat .ico {
  width: 1.4rem;
  height: 1.4rem;
  grid-row: 1 / span 2;
  color: var(--brass);
}
.num { font-size: 1.9rem; margin: 0; font-variant-numeric: tabular-nums; font-family: "Fraunces", Georgia, serif; }
.phones { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.phones li {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
}
.hint { opacity: 0.7; }
.hero.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.quiet {
  color: var(--room);
  text-decoration: none;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.86rem;
}
.quiet:hover { text-decoration: underline; }
a.ghost, .ghost {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.5rem 0.8rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.45rem;
  background: rgba(8, 22, 32, 0.4);
}
a.ghost:hover, .ghost:hover { border-color: var(--brass); }
.row-actions { white-space: nowrap; }
.row-actions .inline { display: inline; margin-left: 0; }
.inline button { background: none; border: 0; padding: 0; color: inherit; }
.menu.kebab { display: inline-flex; }
.menu.kebab > summary {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  opacity: 0.8;
}
.menu.kebab .menu-pop { min-width: 9.5rem; }
.danger {
  background: transparent;
  color: var(--stamp);
  border: 1px solid var(--stamp);
}
.danger-text { color: var(--stamp) !important; }
.person-delete { margin-top: 1rem; }
.ledger { overflow-x: auto; overflow-y: hidden; }
.roster {
  width: 100%;
  border-collapse: collapse;
}
.roster th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: left;
  font-weight: 500;
  padding: 0.45rem 0.7rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.roster td {
  padding: 0.85rem 0.7rem;
  border-bottom: 1px solid rgba(78, 200, 238, 0.08);
  vertical-align: middle;
}
.roster tr.dim td { opacity: 0.45; }
.roster td code { color: var(--paper); }
.caps { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pill {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  border: 1px solid var(--line);
  color: var(--brass);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}
.split { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 1.25rem; align-items: start; }
.person {
  border: 1px solid var(--line);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--panel);
  border-radius: 0.75rem;
}
.person.add { border-style: dashed; }
.person-head { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.8rem; }
.role {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--brass);
}
.roster .stamp { transform: none; display: inline-block; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
fieldset {
  border: 1px solid var(--line);
  margin: 0.8rem 0;
  border-radius: 0.6rem;
}
legend {
  color: var(--brass);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chk { display: flex; gap: 0.4rem; align-items: center; margin: 0.25rem 0; }
.settings { display: grid; gap: 0.75rem; max-width: 44rem; }
.settings fieldset { padding: 0.75rem 1rem 1rem; }
.settings label .hint { display: block; font-weight: 400; margin: 0.2rem 0 0.35rem; opacity: 0.75; }
.settings-block { margin: 1.4rem 0 1.8rem; }
.settings-block h3 { margin: 0 0 0.35rem; }
.tool {
  border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.15rem;
  margin: 0 0 1rem;
  background: var(--panel);
  max-width: 44rem;
  border-radius: 0.75rem;
}
.tool h3 { margin: 0; font-size: 1.45rem; }
.tool .path a { color: var(--brass); }
.flash { color: #8fd4a8; }
.err { color: #ff8a7a; }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.88em; }
.doc-split {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 42rem);
  gap: 2.5rem;
  align-items: start;
}
.doc-rail {
  position: sticky;
  top: 4.2rem;
  display: grid;
  gap: 0.2rem;
  padding-top: 0.2rem;
}
.doc-rail a {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.86rem;
  color: var(--paper);
  text-decoration: none;
  opacity: 0.5;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
}
.doc-rail a.on, .doc-rail a:hover { opacity: 1; background: rgba(78, 200, 238, 0.1); }
.rail-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.42;
  margin: 0.85rem 0 0.15rem;
  padding: 0 0.5rem;
}
.flow {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.4rem;
}
.flow li, .channel, .do, .dont {
  border: 1px solid var(--line);
  padding: 0.75rem 0.95rem;
  border-radius: 0.65rem;
  background: var(--panel);
}
.flow .who, .do .who, .dont .who {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin: 0 0 0.25rem;
}
.channels {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.6rem;
}
.channel {
  display: grid;
  grid-template-columns: 8.2rem 1fr;
  gap: 0.8rem;
  align-items: start;
}
.channel strong {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.92rem;
}
.channel p { margin: 0; opacity: 0.82; }
.do { border-color: rgba(61, 186, 139, 0.55); }
.dont {
  border-color: rgba(180, 35, 24, 0.45);
  background: rgba(180, 35, 24, 0.08);
  margin: 0 0 1.4rem;
}
.do { margin: 0 0 0.7rem; }
.playbook h3 { margin: 1.5rem 0 0.7rem; }
@media print {
  .grain, .sky-glow, .mast, .doc-rail, .pager { display: none !important; }
  .doc-split { display: block; }
  body { background: #fff; color: #1a1a1a; }
  .playbook h2, .playbook h3, .playbook a, .you-say { color: #1a1a1a; }
  .flow li, .channel, .do, .dont, .specimen, .later, .doc-card {
    background: #fff;
    border-color: #ccc;
    break-inside: avoid;
  }
}
.playbook { max-width: 42rem; }
.playbook h2 { font-size: 2.1rem; line-height: 1.05; }
.playbook h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.doc-head { margin-bottom: 1.6rem; }
.doc-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.stamp {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}
.stamp.ok { color: var(--ok); border-color: var(--ok); }
.stamp.brass { color: var(--brass); border-color: var(--brass); }
.stamp.dark { color: var(--stamp); border-color: var(--stamp); }
.path { margin: 0.45rem 0 0; opacity: 0.75; }
.prefixes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; }
.doc-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.doc-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.05rem 1.15rem 1rem;
  border-radius: 0.8rem;
}
.doc-card h3 a { color: var(--paper); text-decoration: none; }
.doc-card h3 a:hover { color: var(--room); }
.doc-card p { margin: 0.35rem 0 0; opacity: 0.82; }
.playbook .steps {
  margin: 0 0 1.6rem;
  padding-left: 1.2rem;
}
.playbook .steps li { margin: 0.45rem 0; }
.specimen {
  border-left: 3px solid var(--brass);
  padding: 0.85rem 0 0.9rem 1.05rem;
  margin: 0 0 1.5rem;
  background: linear-gradient(90deg, rgba(78, 200, 238, 0.08), transparent 70%);
  border-radius: 0 0.6rem 0.6rem 0;
}
.spec-no {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.45rem;
}
.you-say { margin: 0 0 0.65rem; font-size: 1.05rem; }
.you-say q { font-style: italic; }
.expect { margin: 0.65rem 0 0; opacity: 0.82; }
pre.json, pre.legal-body {
  margin: 0;
  padding: 0.85rem 0.9rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  background: #071018;
  color: #d7ecf5;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}
pre.legal-body {
  max-height: 22rem;
  overflow: auto;
  margin: 0.7rem 0 0.4rem;
}
.proposal {
  border: 1px dashed var(--brass);
  padding: 1rem 1.1rem 1.15rem;
  margin: 0 0 1.5rem;
  background: rgba(78, 200, 238, 0.07);
  max-width: 44rem;
  border-radius: 0.75rem;
}
.proposal h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.proposal .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 1rem; }
.thread { display: grid; gap: 0.75rem; margin: 0.8rem 0 1rem; }
.bubble {
  border: 1px solid var(--line);
  padding: 0.65rem 0.8rem;
  background: rgba(7, 16, 24, 0.55);
  border-radius: 0.65rem;
}
.bubble.handler { border-color: rgba(78, 200, 238, 0.5); }
.bubble.worker { border-color: rgba(61, 186, 139, 0.45); }
.bubble.system { opacity: 0.8; }
.bubble .legal-body { max-height: 12rem; margin: 0.35rem 0 0; }
.later {
  border: 1px dashed var(--stamp);
  padding: 0.95rem 1rem 0.85rem;
  margin: 0 0 1.4rem;
  background: rgba(180, 35, 24, 0.08);
  border-radius: 0.65rem;
}
.later p { margin: 0.5rem 0 0; }
.later .stamp { display: inline-block; margin: 0; }
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
}
.pager a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--brass); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.guide-dock {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: min(22.5rem, calc(100vw - 1.6rem));
}
body.framed .guide-dock,
body.gate .guide-dock { display: none; }
.guide-fab {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.guide-panel {
  width: 22.5rem;
  max-width: 100%;
  max-height: min(32rem, calc(100vh - 6.5rem));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  overflow: hidden;
}
.guide-panel[hidden] { display: none; }
.guide-panel header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.guide-panel header h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  margin: 0;
  flex: 1;
}
.guide-panel header .kicker { margin: 0; }
.guide-panel header .ghost { padding: 0.25rem 0.55rem; font-size: 0.78rem; }
.guide-log {
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  min-height: 8rem;
}
.guide-log .bubble { white-space: pre-wrap; font-size: 0.88rem; }
.guide-log .bubble a { color: var(--brass); }
.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  margin: 0.45rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
}
.guide-links a { color: var(--brass); }
#guide-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem 0.55rem;
  border-top: 1px solid var(--line);
  align-items: end;
}
#guide-form textarea {
  width: 100%;
  min-height: 2.6rem;
  resize: none;
  font: inherit;
  color: var(--paper);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.45rem 0.55rem;
}
.guide-foot {
  margin: 0;
  padding: 0 0.85rem 0.7rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.guide-chips .ghost {
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
}
.guide-draft {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.65rem 0.7rem 0.55rem;
  background: var(--field);
  display: grid;
  gap: 0.45rem;
}
.guide-draft .kicker { margin: 0; }
.guide-draft dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.65rem;
  font-size: 0.82rem;
}
.guide-draft dt { color: var(--muted); }
.guide-draft dd { margin: 0; }
.guide-draft .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
body.room::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--room);
  z-index: 40;
  pointer-events: none;
}
body.room .sky-glow {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--room) 32%, transparent), transparent 70%);
}
body[data-room="home"] { --room: #4ec8ee; }
body[data-room="projects"] { --room: #e8a84a; }
body[data-room="users"] { --room: #f0a07a; }
body[data-room="delivery"] { --room: #5dcc8a; }
body[data-room="legal"] { --room: #d4b483; }
body[data-room="files"] { --room: #b8a06a; }
body[data-room="seo"] { --room: #c478e8; }
body[data-room="community"] { --room: #7aa8ff; }
body[data-room="docs"] { --room: #e7d7b8; }
body[data-room="settings"] { --room: #8aa4b0; }
body[data-room="guide"] { --room: #4ec8ee; }
body[data-room="flows"] { --room: #4ec8ee; }
body[data-room^="desk"] { --room: #ff8a5b; }
body[data-room="legal"] .proposal,
body[data-room="legal"] .folio {
  background: #14110c;
  border-color: rgba(212, 180, 131, 0.45);
}
body[data-room="legal"] .legal-body {
  background: #1c1812;
  color: #f3ead8;
}
body[data-room="seo"] .proposal h3 { font-style: italic; }
body[data-room="docs"] .playbook {
  background: rgba(231, 215, 184, 0.04);
  padding: 0.4rem 0.2rem 1rem;
}
@media (max-width: 800px) {
  .mast { flex-wrap: wrap; }
  .brand { min-width: 0; }
  .menu.account { margin-left: 0; }
  .grid-3, .split, .fields, .doc-split, .channel { grid-template-columns: 1fr; }
  .hero h2, .playbook h2, .hero.land h2 { font-size: 1.7rem; }
  .hero.land { grid-template-columns: 1fr; }
  .cloud { width: 8rem; }
  .landing { padding: 1rem 1.2rem 3rem; }
  .doc-rail { position: static; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
  .tabs { width: 100%; }
  .guide-dock { right: 0.7rem; bottom: 0.7rem; left: 0.7rem; max-width: none; }
  .guide-panel { width: 100%; }
  .now-go,
  .now > .stamp,
  .now > .actions { margin-top: 0; }
}