/* Hound Protocol · Joint Operations — site styles */
/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt) */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 200; font-display: block; src: url("../fonts/barlow-semi-condensed-extralight.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-extralight.woff") format("woff"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 300; font-display: block; src: url("../fonts/barlow-semi-condensed-light.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-light.woff") format("woff"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/barlow-semi-condensed-regular.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-regular.woff") format("woff"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/barlow-semi-condensed-medium.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-medium.woff") format("woff"); }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/share-tech-mono-regular.woff2") format("woff2"), url("../fonts/share-tech-mono-regular.woff") format("woff"); }

:root {
  color-scheme: dark;
  --bg: #0c0f10;
  --bg-2: #12171a;
  --fg: #e9edee;
  --fg-2: #c9d0d2;
  --dim: #8b9599;
  --line: #2c3538;
  --hot: #ffffff;
  --amb: #c9a24a;
  --ok: #7fbf8a;
  --bad: #d77a6e;
  --logo-opacity: .18;
  --ui: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --fs: 1;
  /* The page is laid out inside a 16:9 frame that fits any screen */
  --fw: min(100vw, calc(100vh * 16 / 9));
  --fh: min(100vh, calc(100vw * 9 / 16));
  --stage: max(min(1040px, 92vw), calc(var(--fw) - 112px));
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
@supports (height: 100dvh) { .stage { height: 100dvh; } }
.no-dvh .stage { height: calc(var(--vh, 1vh) * 100); }
body { background: var(--bg); color: var(--fg); font-family: var(--ui); overflow: hidden; font-size: calc(15px * var(--fs)); }
a { color: var(--fg); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--hot); outline-offset: 2px; }
::selection { background: rgba(255,255,255,.9); color: #0c0f10; text-shadow: none; }

/* ---------- Stage and background ---------- */
.stage { position: relative; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #222b2f 0%, #101517 55%, #06080a 100%); }
.stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 8; box-shadow: inset 0 0 170px 50px rgba(0,0,0,.8); }
.grid { position: absolute; top: -80px; right: -80px; bottom: -80px; left: -80px; opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 68%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 68%); animation: drift 24s linear infinite; }
.grid.fine { background-size: 16px 16px; opacity: .14; animation: none; }
.logo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; transition: opacity .4s; }
.logo span { font: 200 24vw/1 var(--ui); font: 200 clamp(110px, 24vw, 320px)/1 var(--ui); letter-spacing: .2em; padding-left: .2em; color: rgba(255,255,255,.055); text-transform: uppercase; animation: breathe 7s ease-in-out infinite; }
.logo img { max-width: 70vmin; max-width: min(70vmin, 640px); max-height: 70%; opacity: var(--logo-opacity); }
.logo .emblem { width: 78vmin; width: min(78vmin, 700px); max-width: none; max-height: none; opacity: .035; animation: emblem 7s ease-in-out infinite; }
.in-view .logo { opacity: .18; }
.ruler { position: absolute; top: 70px; bottom: 70px; width: 12px; z-index: 2; opacity: .55; animation: fade .6s .3s both; }
.ruler.l { left: 12px; background: repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 12px) left/6px 100% no-repeat, repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 60px) left/12px 100% no-repeat; }
.ruler.r { right: 12px; background: repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 12px) right/6px 100% no-repeat, repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 60px) right/12px 100% no-repeat; }
.corner { position: absolute; width: 30px; height: 30px; border: 1px solid var(--hot); opacity: .7; z-index: 2; animation: fade .4s .1s both; }
.c1 { left: 32px; top: 64px; border-right: 0; border-bottom: 0; }
.c2 { right: 32px; top: 64px; border-left: 0; border-bottom: 0; }
.c3 { left: 32px; bottom: 64px; border-right: 0; border-top: 0; }
.c4 { right: 32px; bottom: 64px; border-left: 0; border-top: 0; }

/* ---------- Top and bottom bars ---------- */
.bar { position: absolute; left: 0; right: 0; z-index: 9; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 28px; font: 400 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: rgba(8,10,11,.55); }
.bar.top { top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--line); }
.bar.bot { bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--line); min-height: 44px; }
.bar::after { content: ""; position: absolute; width: 90px; height: 1px; background: var(--hot); opacity: .7; }
.bar.top::after { left: 0; bottom: -1px; }
.bar.bot::after { right: 0; top: -1px; }
kbd { font: inherit; color: var(--fg); border: 1px solid var(--dim); padding: 2px 6px; margin: 0 6px 0 12px; }

/* LED text on a string */
.led { color: var(--amb); text-shadow: 0 0 7px rgba(201,162,74,.85); min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led.right { text-align: right; }
.led .ch { display: inline-block; animation: ledOn .16s both; }
.led .gap { display: inline-block; }
.no-led .led { text-shadow: none; }
.no-led .led .ch { animation: none; }

/* ---------- Center area ---------- */
.center { position: absolute; left: 0; right: 0; top: 48px; bottom: 48px; overflow-y: auto; scrollbar-gutter: stable both-edges; display: flex; z-index: 3; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.home { margin: 1vh auto auto; margin: max(1vh, 6px) auto auto; width: 100%; max-width: 100vw; max-width: var(--fw); display: grid; grid-template-columns: minmax(0, 1fr) 680px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) min(680px, 92vw) minmax(0, 1fr); align-items: center; gap: 28px; padding: 0 5vw; padding: 0 clamp(56px, 5vw, 96px); }
.home[hidden], [hidden] { display: none !important; }
.menu-wrap { position: relative; width: 100%; padding: 12px 0 14px; }
.side { max-width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 18px 0 18px 18px; border-left: 1px solid var(--line); position: relative; animation: fade .5s .45s both; }
.side.l { justify-self: end; grid-column: 1; grid-row: 1; }
.side.r { justify-self: start; grid-column: 3; grid-row: 1; }
.home > .menu-wrap { grid-column: 2; grid-row: 1; }
.side::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 36px; background: var(--hot); }
.side .s-label { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--amb); }
.side .s-label .mi { width: 15px; height: 15px; margin: 0; }
.side .s-title { margin: 0; font: 300 22px/1.15 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.side .s-text { margin: 0; font: 300 15px/1.55 var(--ui); color: var(--fg-2); }
.side .s-facts { margin: 4px 0 0; display: grid; gap: 6px; }
.side .s-facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.side .s-facts dt { font: 400 12.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.side .s-facts dd { margin: 0; font: 400 14px/1.4 var(--ui); color: var(--fg); text-align: right; }
.side .s-facts dd a { text-decoration: none; color: var(--fg); }
.side .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 7px; box-shadow: 0 0 8px var(--ok); animation: caret 1.6s steps(1) infinite; }
.side .s-link { align-self: flex-start; margin-top: 4px; font: 400 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--dim); padding-bottom: 4px; }
.side .s-link:hover, .side .s-link:focus-visible { color: var(--hot); border-color: var(--hot); }
.menu .mi { width: .82em; height: .82em; margin: 0 .5em -.08em 0; vertical-align: baseline; }
.mi { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu a .mi { opacity: .55; transition: opacity .26s; }
.menu a.on .mi { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); }
@media (max-width: 1240px) {
  .home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "menu menu" "l r"; width: 680px; width: min(680px, 92vw); padding: 0; gap: 18px 24px; }
  .home > .menu-wrap, .home .menu-wrap { grid-area: menu; }
  .side.l { grid-area: l; justify-self: stretch; }
  .side.r { grid-area: r; justify-self: stretch; }
  .side { max-width: none; margin-bottom: 18px; }
}
@media (max-width: 700px) {
  .home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menu" "l" "r"; }
  .side { margin-bottom: 4px; }
}
.menu-wrap::before, .menu-wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--dim), transparent); animation: draw .55s .15s both; }
.menu-wrap::before { top: 0; }
.menu-wrap::after { bottom: 0; }
.hd { text-align: center; margin-bottom: 10px; animation: fade .4s .05s both; }
.hd-a { font: 400 14px/1 var(--mono); letter-spacing: .5em; padding-left: .42em; text-transform: uppercase; color: var(--dim); }
.hd-b { margin: 6px 0 0; font: 200 calc(4.4vw + 4px)/1.05 var(--ui); font: 200 clamp(32px, 4.4vw + 4px, 58px)/1.05 var(--ui); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; background: linear-gradient(180deg, #fff 30%, #9aa4a8); -webkit-background-clip: text; background-clip: text; color: transparent; animation: reveal .7s .05s cubic-bezier(.2,.7,.2,1) both; }
.rule { position: relative; height: 1px; margin: 12px auto 6px; width: 70%; background: linear-gradient(90deg, transparent, var(--dim), transparent); animation: draw .6s .2s both; }
.rule::before { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3px; border: 1px solid var(--hot); transform: rotate(45deg); background: var(--bg); }
.rule.short { width: 55%; margin: 10px auto 14px; animation-delay: .5s; }
.rule.short::before { display: none; }

/* Menu */
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { position: relative; display: block; color: var(--dim); text-decoration: none; text-align: center; padding: 5px 0 4px; outline: 0; animation: up .28s calc(.28s + var(--i) * .03s) both; }
.menu a::before, .menu a::after { content: ""; position: absolute; top: 22px; height: 7px; width: 0; margin-top: -3px; background: var(--hot); box-shadow: 0 0 12px rgba(255,255,255,.7); transition: width .2s cubic-bezier(.2,.8,.2,1); }
.menu a::before { left: 0; }
.menu a::after { right: 0; }
.menu .hl { position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: -1; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09) 50%, transparent); transition: opacity .26s; }
.menu .t { display: block; font: 300 calc(2.2vh + 10px)/1.1 var(--ui); font: 300 clamp(20px, 2.2vh + 10px, 31px)/1.1 var(--ui); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; transition: color .26s, text-shadow .26s; }
.menu .win { position: relative; display: block; width: fit-content; max-width: 100%; height: 22px; margin: 2px auto 0; padding: 0 12px; border: 1px solid transparent; opacity: 0; transform: scaleX(.4); transition: opacity .26s, transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s; }
.menu .win::before, .menu .win::after { content: ""; position: absolute; top: -1px; bottom: -1px; width: 6px; border: 1px solid var(--hot); }
.menu .win::before { left: -1px; border-right: 0; }
.menu .win::after { right: -1px; border-left: 0; }
.menu .d { display: block; font: 400 13px/20px var(--mono); letter-spacing: .08em; white-space: nowrap; overflow: hidden; color: var(--fg); }
.menu .d .ch { animation: typeOn .1s both; }
.menu .win.long .d { font-size: 12.5px; letter-spacing: .02em; }
.menu .d .cur { display: inline-block; width: 7px; height: 12px; margin-left: 3px; vertical-align: -1px; background: var(--amb); animation: caret .8s steps(1) infinite; }
.menu a.on { color: var(--fg); }
.menu a.on .t { color: var(--hot); text-shadow: 0 0 18px rgba(255,255,255,.4); }
.menu a.on .hl { opacity: 1; }
.menu a.on .win { opacity: 1; transform: none; border-color: var(--line); background: rgba(8,10,11,.7); animation: winFlash .28s; }
.menu a.on::before, .menu a.on::after { width: 5vw; width: clamp(18px, 5vw, 34px); animation: blink .3s; }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; animation: up .3s .55s both; }
.disclaimer { margin: 14px 0 0; text-align: center; font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); opacity: .8; animation: fade .5s .65s both; }
.disclaimer a { color: var(--dim); }
.tagline { margin: 12px 0 0; font: 400 14px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); animation: fade .5s .3s both; }

/* ---------- Buttons and controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 400 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); background: rgba(255,255,255,.03); border: 1px solid var(--dim); padding: 9px 16px; cursor: pointer; text-decoration: none; transition: background .26s, border-color .26s, color .26s; }
.btn { position: relative; }
.btn::before, .btn::after { content: ""; position: absolute; top: 50%; width: 0; height: 4px; margin-top: -2px; background: var(--hot); box-shadow: 0 0 10px rgba(255,255,255,.7); transition: width .26s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.btn::before { right: 100%; margin-right: 3px; }
.btn::after { left: 100%; margin-left: 3px; }
.btn:hover, .btn:focus-visible { background: rgba(255,255,255,.12); border-color: var(--hot); outline: 0; text-shadow: 0 0 12px rgba(255,255,255,.45); }
.btn:hover::before, .btn:hover::after, .btn:focus-visible::before, .btn:focus-visible::after { width: 6px; }
.btn.off::before, .btn.off::after { display: none; }
.btn .ico { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.4; }
img.ico { object-fit: contain; }
.btn.off { opacity: .4; cursor: not-allowed; }
.btn.off:hover { background: rgba(255,255,255,.03); border-color: var(--dim); text-shadow: none; }
.btn.sel, .btn.primary { background: var(--hot); color: #0c0f10; border-color: var(--hot); }
.btn.primary:hover { background: #dfe5e7; }
.btn.small { padding: 6px 10px; font-size: 12.5px; }
.field { background: #0e1214; color: var(--fg); border: 1px solid var(--dim); padding: 8px 10px; font: 400 14px/1.2 var(--mono); min-width: 0; }
.field:focus { border-color: var(--hot); outline: 0; }
select.field { padding-right: 26px; }
.sw { width: 44px; height: 22px; flex: 0 0 auto; border: 1px solid var(--dim); background: none; position: relative; cursor: pointer; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--dim); transition: left .26s, background .26s; }
.sw[aria-checked="true"] { border-color: var(--hot); }
.sw[aria-checked="true"]::after { left: 25px; background: var(--hot); }

/* ---------- Views ---------- */
/* Layout stability rule (HP-GDE-012): every section uses the same frame width, 80% of the 16:9 frame, so nothing
   grows or shrinks when you switch sections or zones. Long text keeps its own reading width inside the frame. */
.view { margin: 0 auto; align-self: flex-start; width: 1040px; width: max(min(1040px, 92vw), min(calc(var(--fw) * .8), calc(100vw - 64px))); padding: 18px 0 30px; }
.view #vb { animation: viewIn .45s cubic-bezier(.2,.8,.2,1) both; }
.vh { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--dim); position: relative; }
.vh::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: var(--hot); }
.vh h2 { margin: 0; font: 300 3.2vw/1 var(--ui); font: 300 clamp(22px, 3.2vw, 32px)/1 var(--ui); letter-spacing: .26em; text-transform: uppercase; }
.vh .kicker { display: block; font: 400 12.5px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.toolbar .grow { flex: 1 1 200px; }
.sub { font: 400 14px/1.5 var(--mono); color: var(--dim); margin: 0 0 14px; letter-spacing: .03em; }
.label { font: 400 12.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--amb); margin: 22px 0 10px; }
.label:first-child { margin-top: 0; }
.panel { background: rgba(10,13,15,.72); border: 1px solid var(--line); padding: 20px; position: relative; }
.panel::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 1px solid var(--hot); border-top: 1px solid var(--hot); }
.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stack > * + * { margin-top: 14px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.4 var(--mono); color: var(--dim); }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 400; color: var(--fg); text-align: right; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 8px 0 8px 40px; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--ui); color: var(--fg-2); counter-increment: s; }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 8px; font: 400 13px/1.8 var(--mono); color: var(--amb); }
.pill { display: inline-block; font: 400 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); color: var(--dim); padding: 4px 8px; margin: 0 4px 4px 0; }
.pill.ok { color: var(--ok); border-color: rgba(127,191,138,.45); }
.pill.warn { color: var(--amb); border-color: rgba(201,162,74,.45); }
.pill.bad { color: var(--bad); border-color: rgba(215,122,110,.45); }
.pill.hot { color: var(--hot); border-color: var(--hot); }
.note { border-left: 2px solid var(--amb); padding: 10px 14px; background: rgba(201,162,74,.06); font: 400 14px/1.5 var(--mono); color: var(--fg-2); margin: 14px 0; }
.tw + .empty { border-top: 0; }
.empty { text-align: center; color: var(--dim); padding: 48px 12px; font: 400 14px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; border: 1px dashed var(--line); }
.empty small { display: block; margin-top: 10px; letter-spacing: .05em; text-transform: none; font-size: 13px; }
.source { font: 400 12.5px/1.4 var(--mono); color: var(--dim); letter-spacing: .06em; margin-top: 12px; }

/* Tables */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--mono); letter-spacing: .03em; }
th { text-align: left; color: var(--dim); text-transform: uppercase; font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--dim); white-space: nowrap; }
th button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: inherit; }
th button:hover { color: var(--fg); }
td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
tr:hover td { background: rgba(255,255,255,.03); }
td.num { text-align: right; white-space: nowrap; }
.ping-good { color: var(--ok); }
.ping-mid { color: var(--amb); }
.ping-bad { color: var(--bad); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px; cursor: pointer; font: 400 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--hot); border-bottom-color: var(--hot); }
.tabs .count { color: var(--amb); margin-left: 6px; }

/* Contract cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: rgba(10,13,15,.72); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color .26s, box-shadow .26s; }
.cards.anim .card { animation: fade .25s calc(var(--i, 0) * .015s) both; }
.card:hover, .card:focus-within { border-color: var(--hot); box-shadow: inset 2px 0 0 var(--hot), 0 0 24px rgba(255,255,255,.05); }
.card h3 { margin: 0; font: 400 16px/1.3 var(--ui); letter-spacing: .04em; }
.card .id { font: 400 12.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.card .meta { font: 400 13px/1.4 var(--mono); color: var(--dim); }
.card .blocked { color: var(--bad); }
.card .goal { margin: 0; font: 300 14px/1.45 var(--ui); color: var(--dim); }
.card .spec summary { cursor: pointer; font: 400 12.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.card .spec summary:hover, .card .spec[open] summary { color: var(--fg); }
.card .spec ul { margin: 8px 0 0; padding-left: 18px; font: 300 14px/1.5 var(--ui); }
.card .spec .meta { margin-top: 8px; }
.card .actions { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; padding: 0 9px; }
.status { font: 400 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.status.open { color: var(--ok); }
.status.planned { color: var(--fg-2); }
.status.claimed, .status.review { color: var(--amb); }
.status.done { color: var(--dim); }
.status.bad { color: var(--bad); }
.rec .vs .status.done { color: var(--ok); }
:root { --easy: #7fbf8a; --medium: #e3c45a; --hard: #d77a6e; }
.pill.diff.easy { color: var(--easy); border-color: rgba(127,191,138,.55); background: rgba(127,191,138,.08); }
.pill.diff.medium { color: var(--medium); border-color: rgba(227,196,90,.55); background: rgba(227,196,90,.08); }
.pill.diff.hard { color: var(--hard); border-color: rgba(215,122,110,.6); background: rgba(215,122,110,.08); }
.pill.diff.core { color: var(--fg); border-style: dashed; border-color: var(--fg-2); }
.tint { font-weight: 500; }
.tint.easy { color: var(--easy); } .tint.medium { color: var(--medium); } .tint.hard { color: var(--hard); } .tint.key { color: var(--amb); }
.card.d-easy { box-shadow: inset 3px 0 0 var(--easy); }
.card.d-medium { box-shadow: inset 3px 0 0 var(--medium); }
.card.d-hard { box-shadow: inset 3px 0 0 var(--hard); }
.card.d-easy:hover, .card.d-easy:focus-within { box-shadow: inset 3px 0 0 var(--easy), 0 0 24px rgba(127,191,138,.08); }
.card.d-medium:hover, .card.d-medium:focus-within { box-shadow: inset 3px 0 0 var(--medium), 0 0 24px rgba(227,196,90,.08); }
.card.d-hard:hover, .card.d-hard:focus-within { box-shadow: inset 3px 0 0 var(--hard), 0 0 24px rgba(215,122,110,.08); }
.diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 6px; }
.diffcard { --c: var(--fg); position: relative; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: rgba(10,13,15,.7); border: 1px solid var(--line); border-top: 3px solid var(--c); cursor: pointer; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.diffcard.easy { --c: var(--easy); } .diffcard.medium { --c: var(--medium); } .diffcard.hard { --c: var(--hard); }
.diffcard:hover, .diffcard:focus-visible, .diffcard.sel { background: rgba(255,255,255,.04); border-color: var(--c); }
.diffcard .dc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.diffcard .dc-h b { font: 400 20px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.diffcard .dc-h i { font: 400 12.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.diffcard .dc-who { font: 400 12.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.diffcard .dc-what { font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.diffnote { margin: 4px 0 2px; }
.stat b.easy { color: var(--easy); }
@media (max-width: 860px) { .diffs { grid-template-columns: 1fr; } }
.ranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
@media (max-width: 860px) { .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rank { border: 1px solid var(--line); background: rgba(10,13,15,.65); padding: 14px; display: flex; flex-direction: column; gap: 6px; animation: fade .25s calc(var(--i, 0) * .04s) both; }
.rank .r-grade { font: 200 34px/1 var(--ui); letter-spacing: .06em; color: var(--fg); }
.rank:nth-child(n+5) .r-grade { color: var(--amb); }
.rank:nth-child(n+8) .r-grade { color: #e8c46a; text-shadow: 0 0 12px rgba(232,196,106,.35); }
.rank.quiet .r-u { color: var(--dim); }
.notes { margin: 14px 0 6px; padding-left: 18px; display: grid; gap: 6px; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.notes b { color: var(--fg); font-weight: 400; }
.rank .r-n { font: 400 12.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rank .r-u { font: 300 14px/1.4 var(--ui); color: var(--fg-2); }
.card-lv { display: inline-block; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; padding: 4px 7px; border: 1px solid var(--line); color: var(--fg); }
.card-lv.lv7 { color: #0c0f10; background: var(--amb); border-color: var(--amb); }
.card-lv.lv6 { color: var(--amb); border-color: var(--amb); }
.card-lv.lv5 { color: var(--fg); border-color: var(--fg-2); }
tr.revoked td { opacity: .55; }
.vs .status.done, #sres .status.done { color: var(--ok); }
#sres .status { font-size: 13px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.op { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); background: rgba(10,13,15,.72); color: inherit; text-decoration: none; animation: fade .25s calc(var(--i, 0) * .02s) both; }
.op:hover, .op:focus-visible { border-color: var(--hot); }
.op .mono { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); font: 400 14px/1 var(--mono); letter-spacing: .1em; color: var(--amb); }
.op b { font: 400 15px/1.2 var(--ui); letter-spacing: .04em; }
.op small { font: 400 12.5px/1.4 var(--mono); color: var(--dim); letter-spacing: .06em; }
pre.code { background: #0a0d0f; border: 1px solid var(--line); padding: 12px; overflow-x: auto; font: 400 13px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
textarea.field { width: 100%; resize: vertical; font: 400 13px/1.5 var(--mono); box-sizing: border-box; }
.meter { height: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--hot); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { border: 1px solid var(--line); padding: 12px; background: rgba(10,13,15,.6); }
.stat b { display: block; font: 200 40px/1 var(--ui); color: var(--hot); }
.stat span { font: 400 12.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* Docs */
.doc { min-width: 0; border-left: 1px solid var(--line); padding-left: 24px; font: 400 16px/1.65 var(--ui); color: var(--fg-2); animation: fade .15s both; }
.doc h1, .doc h2, .doc h3, .doc h4 { color: var(--fg); font-family: var(--ui); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.doc h1 { font-weight: 300; font-size: 28px; margin: 0 0 16px; }
.doc h2 { font-weight: 400; font-size: 19px; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc h3 { font-weight: 400; font-size: 16px; margin: 20px 0 8px; }
.doc h4 { font-weight: 400; font-size: 15px; margin: 16px 0 6px; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin: 3px 0; }
.doc li.task { list-style: none; margin-left: -22px; }
.doc li.task::before { content: "☐ "; color: var(--dim); font-family: var(--mono); }
.doc li.task.done::before { content: "☑ "; color: var(--ok); }
.doc code { font: 400 14px/1.4 var(--mono); background: rgba(255,255,255,.06); padding: 1px 5px; color: var(--fg); }
.doc pre { background: #0a0d0f; border: 1px solid var(--line); padding: 12px; overflow-x: auto; }
.doc pre code { background: none; padding: 0; }
.doc table { margin: 0 0 14px; }
.doc a { color: var(--hot); text-decoration-color: var(--dim); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.doc blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--dim); color: var(--dim); }
.doc .meta-line { font: 400 13px/1.4 var(--mono); color: var(--dim); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Options */
.opt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.orow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.3 var(--mono); letter-spacing: .04em; }
.orow small { display: block; color: var(--dim); font: 300 14px/1.4 var(--ui); letter-spacing: 0; margin-top: 3px; }

/* Release */

.spin { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--dim); border-top-color: var(--hot); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px; }
.noscript { position: fixed; top: auto; right: 0; bottom: 0; left: 0; padding: 12px; text-align: center; background: #000; color: #fff; font-family: var(--mono); z-index: 20; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Element transitions (no full-screen effects) */
.stage.going .vh h2 { animation: wipe .32s cubic-bezier(.2,.8,.2,1) both; }
.stage.going .vh .kicker { animation: fade .3s .08s both; }
.stage.going .secbar a[aria-current="page"] { animation: tabIn .26s ease-out both; }

/* Background glitch: random, light, never touches content */
.gl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.gl i { position: absolute; left: 0; right: 0; height: var(--h, 6px); top: var(--y, 50%); opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 20%, rgba(160,220,255,.08) 50%, rgba(255,255,255,.05) 80%, transparent); mix-blend-mode: screen; }
.stage.glitch .gl i { animation: glBand var(--d, .22s) steps(3) both; }
.stage.glitch .grid { animation: glShift var(--d, .22s) steps(2) both; }
.stage.glitch .logo { animation: glSplit var(--d, .22s) steps(2) both; }
.no-glitch .gl { display: none; }

/* Section tab bar */
/* The section bar spans the screen width, independent of the view width, so every tab fits */
.secwrap { position: relative; left: 50%; width: calc(100vw - 72px); margin-left: calc((100vw - 72px) / -2); margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.secbar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.secbar a:first-child { margin-left: auto; } .secbar a:last-child { margin-right: auto; }
.secbar a .mi { width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; opacity: .6; transition: opacity .3s ease; }
.secbar a:hover .mi, .secbar a[aria-current="page"] .mi { opacity: 1; }
.secdesc { min-height: 1.4em; padding: 8px 0 10px; text-align: center; font: 300 15px/1.4 var(--ui); letter-spacing: .04em; color: var(--fg-2); transition: opacity .2s ease, transform .2s ease; }
.secdesc.out { opacity: 0; transform: translateY(-3px); }
.secbar::-webkit-scrollbar { display: none; }
.secbar a { flex: 0 0 auto; position: relative; padding: 13px 14px; font: 400 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-decoration: none; border: 1px solid transparent; transition: color .26s, border-color .26s, background .26s; }
.secbar a:hover { color: var(--fg); border-color: var(--line); }
.secbar a[aria-current="page"] { color: #0c0f10; background: linear-gradient(90deg, var(--hot) 50%, transparent 50%) 0 0 / 200% 100% no-repeat; border-color: var(--hot); }

/* Briefing presentation */
mark.key { background: none; color: var(--amb); }
.bf { display: flex; flex-direction: column; gap: 40px; }
.bf-sec { opacity: 0; transform: translateY(6px); }
.bf-sec.in { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }
.bf-head { margin: 0 0 14px; max-width: 22em; font: 300 3.2vw/1.2 var(--ui); font: 300 clamp(26px, 3.2vw, 42px)/1.2 var(--ui); letter-spacing: .03em; color: var(--hot); }
.bf-lead { margin: 0 0 20px; max-width: 46em; font: 400 18px/1.65 var(--ui); color: var(--fg-2); }
/* How-it-works diagram */
.ico-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--amb); stroke-width: 1.4; vertical-align: -3px; }
.ico-i .f { fill: var(--amb); stroke: none; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 12px; border: 1px solid var(--line); font: 400 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); opacity: 0; }
.bf-sec.in .chips li { opacity: 1; transition: opacity .3s; transition-delay: calc(var(--k) * 70ms + .2s); }
/* Roadmap */
.rm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-items li { position: relative; padding: 6px 0 6px 28px; font: 400 15px/1.45 var(--ui); color: var(--fg-2); }
.rm-items li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 12px; border: 1px solid var(--dim); }
.rm-items li.done { color: var(--dim); }
.rm-items li.done::before { border-color: var(--ok); background: linear-gradient(var(--ok), var(--ok)) center / 6px 6px no-repeat; }
.rm-items code { font: 400 14px var(--mono); }

/* Team */
.member { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; align-items: center; }
.portrait { position: relative; width: 168px; height: 168px; border: 1px solid var(--line); padding: 0; background: #000; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait .pc { position: absolute; width: 14px; height: 14px; border: 1px solid var(--hot); }
.portrait .tl { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.portrait .br { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.m-role { font: 400 13px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amb); }
.m-name { margin: 8px 0 10px; font: 200 4vw/1 var(--ui); font: 200 clamp(34px, 4vw, 52px)/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); }
.member p { margin: 0; max-width: 40em; font: 400 17px/1.6 var(--ui); color: var(--fg-2); }
.depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dept { border: 1px solid var(--line); background: rgba(10,13,15,.65); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dept .d-head { display: flex; align-items: baseline; gap: 12px; }
.dept .d-code { font: 400 12.5px/1 var(--mono); letter-spacing: .2em; color: var(--amb); border: 1px solid var(--line); padding: 5px 7px; }
.dept h3 { margin: 0; font: 300 20px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.dept p { margin: 0; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.dept .d-who { font: 400 13px/1.4 var(--mono); color: var(--fg); letter-spacing: .04em; }
.dept .pill { margin: 0; }
.chips.small li { font-size: 12.5px; padding: 4px 8px; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.seat { border: 1px solid var(--line); background: rgba(10,13,15,.65); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.s-name { font: 400 16px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.s-who { font: 400 14px/1.3 var(--mono); color: var(--dim); }
.seat .pill { margin: 0; }
@media (max-width: 700px) { .member { grid-template-columns: 1fr; justify-items: start; gap: 18px; } }

/* Sessions: radar while no sessions exist */
.scanbox { display: flex; align-items: center; gap: 28px; padding: 28px; border: 1px dashed var(--line); border-top: 0; }
.scanbox b { display: block; font: 400 16px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); }
.scanbox small { display: block; margin-top: 10px; font: 400 14px/1.5 var(--mono); color: var(--dim); max-width: 40em; }
.radar { position: relative; flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; border: 1px solid var(--dim); overflow: hidden;
  background: radial-gradient(circle, transparent 0 28%, var(--line) 28.5% 29%, transparent 29.5% 56%, var(--line) 56.5% 57%, transparent 57.5%), linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.radar .sweep { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.28), rgba(255,255,255,0) 22%, transparent); animation: spin 3.2s linear infinite; }
.radar .blip { position: absolute; left: 62%; top: 30%; width: 5px; height: 5px; border-radius: 50%; background: var(--amb); opacity: 0; animation: blipOn 3.2s linear infinite; }

/* Docs search results */

/* Dev log */

/* ---------- Option toggles applied to body ---------- */
.no-grid .grid { display: none; }
.no-emblem .logo { display: none; }
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
.hi-contrast { --dim: #b3bcbf; --line: #4a5558; --fg-2: #e9edee; }

/* ---------- Animations ---------- */
@keyframes drift { to { transform: translate(80px, 80px); } }
@keyframes breathe { 50% { color: rgba(255,255,255,.09); } }
@keyframes emblem { 50% { opacity: .055; } }
@keyframes up { from { opacity: 0; transform: translateY(4px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { transform: scaleX(0); opacity: 0; } }
@keyframes reveal { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes blink { 0% { opacity: .2; } 40% { opacity: 1; } 55% { opacity: .4; } 100% { opacity: 1; } }
@keyframes ledOn { from { opacity: 0; color: #fff; text-shadow: 0 0 12px #fff; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes typeOn { from { opacity: 0; color: var(--amb); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes winFlash { 0% { background: rgba(255,255,255,.25); border-color: var(--hot); } 100% { background: rgba(8,10,11,.7); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes tabIn { from { background-position: -100% 0; } to { background-position: 0 0; } }
@keyframes glBand { 0% { opacity: 0; transform: translateX(0); } 33% { opacity: 1; transform: translateX(-12px); } 66% { opacity: .6; transform: translateX(8px); } 100% { opacity: 0; transform: none; } }
@keyframes glShift { 50% { transform: translate(3px, -1px); } }
@keyframes glSplit { 0%, 100% { filter: none; transform: none; } 50% { filter: drop-shadow(2px 0 rgba(255,60,90,.35)) drop-shadow(-2px 0 rgba(60,200,255,.35)); transform: translateX(2px); } }
@keyframes blipOn { 0%, 8% { opacity: 0; } 10% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(201,162,74,.6); } 100% { box-shadow: 0 0 0 10px rgba(201,162,74,0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-height: 800px) and (min-width: 701px) {
  .menu a { padding: 2px 0; }
  .menu .t { font-size: calc(2.2vh + 6px); font-size: clamp(18px, 2.2vh + 6px, 24px); }
  .menu a::before, .menu a::after { top: 16px; }
  .menu .hl { height: 34px; }
  .menu .win { height: 20px; margin-top: 2px; }
  .menu .d { line-height: 18px; font-size: 12.5px; }
  .tagline { margin-top: 8px; }
  .rule.short { margin: 6px auto 10px; }
  .disclaimer { margin-top: 8px; }
}
@media (max-width: 860px) {
  .doc { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .opt { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ruler { display: none; }
  .bar { padding: 12px 16px; }
  .bar.top .keys { display: none; }
  .bar.bot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
  .led.right { text-align: left; }
  .led { white-space: normal; }
  .center { bottom: 64px; }
  .corner { display: none; }
  .opt > div + div .label:first-child { margin-top: 22px; }
  .vh { flex-direction: column; align-items: flex-start; }
}

/* ---------- Touch devices (phones and tablets) ---------- */
.is-touch a, .is-touch button { touch-action: manipulation; }
.is-touch .field, .is-touch select.field { font-size: 16px; }   /* stops iOS from zooming into inputs */
.is-touch .menu .win { opacity: 1; transform: none; border-color: transparent; background: none; animation: none; height: auto; }
.is-touch .menu .win::before, .is-touch .menu .win::after { display: none; }
.is-touch .menu a.on .win { background: none; border-color: transparent; animation: none; }
.is-touch .menu .d { color: var(--dim); white-space: normal; }
.is-touch .menu a.on .d { color: var(--fg); }
.is-touch .menu a { padding: 8px 0; }
.is-touch .btn { min-height: 44px; }
.is-touch .btn.small { min-height: 36px; }
.is-touch .secbar a { padding: 14px 18px; }
@media (hover: none) {
  .card:hover { border-color: var(--line); box-shadow: none; }
  .btn:hover::before, .btn:hover::after { width: 0; }
}

/* ---------- Phone version ---------- */
@media (max-width: 700px) {
  .bar.top { padding: 10px 16px 10px 16px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); font-size: 12.5px; }
  .bar.bot { flex-direction: row; min-height: 36px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) 16px; padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); }
  .bar.bot .led { white-space: nowrap; font-size: 12.5px; }
  .bar.bot #ledStatus { display: none; }
  .center { top: 40px; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .menu-wrap { width: calc(100% - 32px); margin-top: 8px; padding: 14px 0; }
  .hd-a { font-size: 12.5px; letter-spacing: .4em; }
  .hd-b { font-size: 9vw; font-size: clamp(28px, 9vw, 38px); letter-spacing: .12em; padding-left: .12em; }
  .tagline { font-size: 12.5px; letter-spacing: .08em; }
  .menu a::before, .menu a::after { display: none; }
  .menu a { text-align: left; padding: 10px 14px; border-left: 2px solid transparent; }
  .menu a.on { border-left-color: var(--hot); }
  .menu .hl { height: 100%; }
  .menu .t { font-size: 20px; letter-spacing: .18em; padding-left: 0; }
  .menu .win { margin: 4px 0 0; padding: 0; width: auto; height: auto; }
  .menu .win::before, .menu .win::after { display: none; }
  .menu .d { font-size: 13px; line-height: 1.4; white-space: normal; }
  .links { justify-content: flex-start; padding: 0 14px; }
  .disclaimer { text-align: left; padding: 0 14px; }
  .view, .view[data-v] { width: calc(100% - 32px); padding-top: 0; }
  .secwrap { position: sticky; top: 0; left: auto; z-index: 4; width: auto; margin: 0 -16px 16px; padding: 8px 16px 0; background: rgba(10,13,15,.94); }
  .secdesc { font-size: 14px; padding: 4px 0 8px; }
  .secbar a { padding: 12px 14px; font-size: 14px; }
  .vh h2 { font-size: 24px; letter-spacing: .18em; }
  .bf { gap: 30px; }
  .bf-head { font-size: 26px; }
  .bf-lead { font-size: 16px; }
  .toolbar .btn { flex: 1 1 auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .scanbox { flex-direction: column; text-align: center; }
  .doc-toggle { display: flex; width: 100%; justify-content: space-between; margin-bottom: 8px; }
  .doc { font-size: 16px; }
  .doc table { font-size: 13px; }
}
/* Phones in landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .hd-b { font-size: 26px; }
  .menu a { padding: 4px 14px; }
  .menu .d { display: none; }
}
/* Tablets: touch, 701px to 1180px */
@media (min-width: 701px) and (max-width: 1180px) {
  .view, .view[data-v] { width: calc(100% - 64px); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ---------------- Guides: handbook as A4 sheets ---------------- */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 12px 0 8px; }
.mini { aspect-ratio: 210 / 297; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; background: #eeece6; color: #1c2022; text-decoration: none; border: 1px solid #d6d3ca; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .26s, box-shadow .26s; animation: fade .25s calc(var(--i, 0) * .03s) both; overflow: hidden; }
.mini:hover, .mini:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.45); outline: none; }
.mini .m-top { display: flex; justify-content: space-between; border-bottom: 2px solid #1c2022; padding-bottom: 6px; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; }
.mini .m-top i { font-style: normal; color: #6b6f70; }
.mini .m-title { font: 400 17px/1.2 var(--ui); letter-spacing: .02em; }
.mini .m-sum { font: 300 14px/1.45 var(--ui); color: #43494b; }
.mini .m-foot { margin-top: auto; font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b6f70; border-top: 1px solid #cfccc3; padding-top: 6px; }
.sheet-bar { margin-bottom: 16px; }
/* Sheet bar: each action has its own colour code; Return to Handbook Library sits on the right, on a textured plate */
.sheet-bar .sb-pdf, .sheet-bar .sb-print, .sheet-bar .sb-gh { border-left: 3px solid var(--sb); color: var(--sb); }
.sheet-bar .sb-pdf { --sb: #f28c28; } .sheet-bar .sb-print { --sb: #6fb7c9; } .sheet-bar .sb-gh { --sb: #b8c2c5; }
.sheet-bar .sb-pdf:hover, .sheet-bar .sb-print:hover, .sheet-bar .sb-gh:hover, .sheet-bar .sb-pdf:focus-visible, .sheet-bar .sb-print:focus-visible, .sheet-bar .sb-gh:focus-visible { color: var(--fg); border-color: var(--sb); background: color-mix(in srgb, var(--sb) 16%, transparent); }
.sheet-bar .sb-back { margin-left: auto; color: #f3e3b8; border: 1px solid #c9a24a; border-left-width: 3px;
  background: repeating-linear-gradient(135deg, rgba(201,162,74,.10) 0 2px, transparent 2px 7px), linear-gradient(90deg, rgba(201,162,74,.22), rgba(201,162,74,.06)); }
.sheet-bar .sb-back span { font-size: 15px; line-height: 1; color: #e2b955; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.sheet-bar .sb-back:hover, .sheet-bar .sb-back:focus-visible { color: #fff; border-color: #e2b955;
  background: repeating-linear-gradient(135deg, rgba(226,185,85,.16) 0 2px, transparent 2px 7px), linear-gradient(90deg, rgba(226,185,85,.34), rgba(226,185,85,.10)); }
.sheet-bar .sb-back:hover span, .sheet-bar .sb-back:focus-visible span { transform: translateX(-3px); }
@media (max-width: 700px) { .sheet-bar .sb-back { margin-left: 0; flex: 1 1 100%; } }
.sheet { max-width: 794px; min-height: 1123px; margin: 0 auto 24px; padding: 56px 64px 40px; background: #f4f2ec; color: #1c2022; box-shadow: 0 20px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; font: 400 15px/1.6 var(--ui); animation: fade .2s both; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1c2022; padding-bottom: 12px; }
.sh-org { display: flex; gap: 10px; align-items: center; }
.sh-org img { filter: none; }
.sh-org span, .sh-code { display: flex; flex-direction: column; }
.sh-org b, .sh-code b { font: 400 14px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sh-org i, .sh-code i { font: 400 12.5px/1.3 var(--mono); font-style: normal; letter-spacing: .1em; color: #5b6062; text-transform: uppercase; }
.sh-code { text-align: right; }
.sh-title { font: 300 30px/1.15 var(--ui); letter-spacing: .03em; margin: 26px 0 14px; color: #111; text-transform: none; }
.sh-meta { display: grid; grid-template-columns: repeat(5, auto); gap: 0; margin: 0 0 22px; border: 1px solid #c9c6bd; }
.sh-meta div { padding: 7px 10px; border-right: 1px solid #c9c6bd; }
.sh-meta div:last-child { border-right: 0; }
.sh-meta dt { font: 400 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b6f70; }
.sh-meta dd { margin: 2px 0 0; font: 400 14px/1.3 var(--ui); }
.sh-body { flex: 1; color: #23282a; }
.sh-body h2 { font: 500 15px/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #111; margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #c9c6bd; }
.sh-body h3 { font: 500 14px/1.3 var(--ui); color: #111; margin: 18px 0 6px; }
.sh-body p, .sh-body li { color: #23282a; }
.sh-body a { color: #6e5418; }
.sh-body code { font: 400 13.5px/1.4 var(--mono); background: #e4e1d8; padding: 1px 5px; color: #1c2022; }
.sh-body pre { background: #e7e4dc; border: 1px solid #cfccc3; padding: 10px 12px; overflow-x: auto; }
.sh-body pre code { background: none; padding: 0; }
.sh-body blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid #a07c2c; background: #ebe7da; }
.sh-body table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 14px; }
.sh-body th { text-align: left; font: 500 12.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3d4244; background: #e4e1d8; }
.sh-body th, .sh-body td { border: 1px solid #cfccc3; padding: 6px 8px; vertical-align: top; color: #23282a; }
.sh-body .tw { overflow-x: auto; }
.sh-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 10px; border-top: 1px solid #c9c6bd; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: #6b6f70; }
/* Paper personalities: guides are field-manual graph paper, policies are formal linen with a seal,
   procedures are engineering pads with a dotted grid and a margin rule */
.mini.t-guide, .sheet.t-guide { --ink: #8a6a1e;
  background: linear-gradient(rgba(138,106,30,.10) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(138,106,30,.10) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(rgba(138,106,30,.16) 1px, transparent 1px) 0 0 / 70px 70px, #f1ebdc; }
.mini.t-policy, .sheet.t-policy { --ink: #8e2f26;
  background: radial-gradient(circle at 88% 10%, transparent 34px, rgba(142,47,38,.16) 35px, rgba(142,47,38,.16) 37px, transparent 38px, transparent 44px, rgba(142,47,38,.10) 45px, transparent 46px),
    repeating-linear-gradient(45deg, rgba(60,50,30,.035) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(60,50,30,.035) 0 1px, transparent 1px 4px), #f3eee2; }
.mini.t-procedure, .sheet.t-procedure { --ink: #275a6b;
  background: linear-gradient(90deg, transparent 22px, rgba(196,70,60,.45) 22px, rgba(196,70,60,.45) 23px, transparent 23px), radial-gradient(rgba(39,90,107,.28) 1px, transparent 1.4px) 0 0 / 12px 12px, #e9eef0; }
.sheet.t-procedure { background: linear-gradient(90deg, transparent 40px, rgba(196,70,60,.4) 40px, rgba(196,70,60,.4) 41px, transparent 41px), radial-gradient(rgba(39,90,107,.25) 1px, transparent 1.4px) 0 0 / 14px 14px, #e9eef0; }
.sheet.t-policy { background: radial-gradient(circle at 92% 7%, transparent 52px, rgba(142,47,38,.14) 53px, rgba(142,47,38,.14) 56px, transparent 57px, transparent 66px, rgba(142,47,38,.09) 67px, transparent 69px),
    repeating-linear-gradient(45deg, rgba(60,50,30,.03) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(60,50,30,.03) 0 1px, transparent 1px 4px), #f3eee2; }
.mini .m-top b, .sheet .sh-code b { color: var(--ink, #1c2022); }
.mini .m-top { border-bottom-color: var(--ink, #1c2022); }
.sheet .sh-head { border-bottom-color: var(--ink, #1c2022); }
.sheet .sh-code i { color: var(--ink, #5b6062); font-weight: 500; }
.sheet .sh-body h2 { border-bottom-color: color-mix(in srgb, var(--ink, #c9c6bd) 35%, transparent); }
.mini.t-policy .m-top b::after { content: " ◉"; color: var(--ink); }
.mini.t-procedure .m-top b::after { content: " ☰"; color: var(--ink); }
.mini.t-guide .m-top b::after { content: " ✦"; color: var(--ink); }
@media print { .sheet.t-guide, .sheet.t-policy, .sheet.t-procedure { background: #fff !important; } }
@media (max-width: 720px) {
  .sheets { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mini { padding: 12px; }
  .mini .m-sum { display: none; }
  .sheet { padding: 28px 20px; min-height: 0; }
  .sh-meta { grid-template-columns: repeat(2, 1fr); }
  .sh-meta div { border-bottom: 1px solid #c9c6bd; }
  .sh-foot { flex-direction: column; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  html, body, .stage, .center, #view, #vb { height: auto !important; min-height: 0 !important; overflow: visible !important; position: static !important; display: block !important; background: #fff !important; padding: 0 !important; margin: 0 !important; transform: none !important; }
  .fx, .gl, .logo, .ruler, .corner, .bar, .secwrap, .vh, .sheet-bar, #menuView, noscript, .stage::after { display: none !important; }
  .sh-org img { filter: none; }
  .sheet { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; background: #fff; animation: none; }
  .sh-body a { color: #1c2022; }
  .sh-body h2 { break-after: avoid; }
  .sh-body table, .sh-body pre { break-inside: avoid; }
}

/* ---------------- Docs: shared helpers ---------------- */
.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; }
.sr-only:focus-within { position: static !important; width: auto; height: auto; margin: 8px; clip: auto; white-space: normal; }


/* About: shared alert states */
.no-motion .al.detected b { animation: none; }
@media (max-width: 760px) { .alerts { grid-template-columns: 1fr; } }

/* ---------------- Contribute: field columns (kanban) ---------------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 30px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.kcol { --f: var(--amb); scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%), rgba(6,9,10,.6); border: 1px solid var(--line); border-top: 3px solid var(--f); }
.kcol.f-code { --f: #6fb7c9; } .kcol.f-re { --f: #d77a6e; } .kcol.f-qa { --f: #8fbf7f; } .kcol.f-design { --f: #a99be0; } .kcol.f-docs { --f: #c9a24a; }
.kcol-h { position: sticky; top: 0; z-index: 1; padding: 14px 14px 12px; background: rgba(9,12,14,.96); border-bottom: 1px solid var(--line); }
.kcol-t { display: flex; align-items: center; gap: 9px; }
.kcol-t .mi { width: 18px; height: 18px; color: var(--f); flex: none; }
.kcol-t b { font: 400 15px/1.1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.kcol-t i { margin-left: auto; min-width: 34px; text-align: center; font: 400 17px/1 var(--mono); font-style: normal; color: #0c0f10; background: var(--f); padding: 6px 9px; }
.kcol-h p { margin: 8px 0 10px; font: 300 14px/1.4 var(--ui); color: var(--fg-2); }
.kcol-m { height: 4px; background: rgba(255,255,255,.07); }
.kcol-m span { display: block; height: 100%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.kcol-h small { display: block; margin-top: 6px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kcol-b { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.kcol-e { font: 400 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: center; padding: 18px 0; }
.kc { --s: var(--fg-2); position: relative; display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 14px 16px; background: rgba(13,17,19,.92); border: 1px solid var(--line); border-left: 4px solid var(--dc, var(--line)); transition: transform .26s, border-color .26s, box-shadow .26s; }
.kanban.anim .kc { animation: riseIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * .05s) both; }
.kc.d-easy { --dc: var(--easy); } .kc.d-medium { --dc: var(--medium); } .kc.d-hard { --dc: var(--hard); }
.kc:hover, .kc:focus-within { transform: translateY(-2px); border-color: var(--fg-2); border-left-color: var(--dc); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.kc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kc-id { font: 400 12.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.kc-st { font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; border: 1px solid currentColor; color: var(--s); white-space: nowrap; }
.kc.st-open { --s: var(--ok); } .kc.st-open .kc-st { background: rgba(127,191,138,.12); }
.kc.st-planned { --s: var(--fg-2); } .kc.st-planned .kc-st { border-style: dashed; }
.kc.st-claimed, .kc.st-review { --s: var(--amb); } .kc.st-claimed .kc-st, .kc.st-review .kc-st { background: rgba(201,162,74,.12); }
.kc.st-blocked { --s: var(--bad); background: repeating-linear-gradient(135deg, rgba(215,122,110,.06) 0 8px, transparent 8px 16px), rgba(13,17,19,.92); }
.kc h3 { margin: 0; font: 400 16px/1.3 var(--ui); letter-spacing: .03em; color: var(--fg); }
.kc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kc-tags .pill { margin: 0; }
.kc-tags .pill.mod { color: var(--dim); }
.kc .goal { margin: 0; font: 300 14px/1.45 var(--ui); color: var(--fg-2); }
.kc .meta { font: 400 12.5px/1.4 var(--mono); color: var(--dim); }
.kc .meta.blocked { color: var(--bad); }
.kc .actions { margin-top: 2px; padding: 0; }
.kc.st-done { --s: var(--ok); --dc: var(--ok); background: linear-gradient(135deg, rgba(127,191,138,.09), rgba(13,17,19,.92) 55%); border-color: rgba(127,191,138,.35); }
.kc.st-done h3 { color: var(--fg-2); text-decoration: line-through; text-decoration-color: rgba(127,191,138,.6); text-decoration-thickness: 1px; }
.kc.st-done .kc-st { color: #0c0f10; background: var(--ok); border-color: var(--ok); }
.kc-stamp { align-self: flex-start; font: 400 12.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ok); border: 1px solid rgba(127,191,138,.6); padding: 6px 9px; transform: rotate(-2deg); box-shadow: 0 0 12px rgba(127,191,138,.15); }
.kc .spec summary { cursor: pointer; font: 400 12.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kc .spec summary:hover, .kc .spec[open] summary { color: var(--fg); }
.kc .spec ul { margin: 8px 0 0; padding-left: 18px; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.kc .spec .meta { margin-top: 8px; }
.kc-claims { display: flex; flex-wrap: wrap; gap: 5px; }
.tok { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; font: 400 12.5px/1 var(--mono); letter-spacing: .06em; color: #0c0f10; background: var(--amb); text-decoration: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tok i { font-style: normal; font-size: 11px; }
.tok:hover { background: var(--hot); }
.claimnote code { font: 400 13px/1 var(--mono); background: rgba(255,255,255,.08); padding: 1px 5px; color: var(--fg); }

/* Brand marks */
.bm { display: block; width: 100%; height: 100%; }
.hd-a { display: flex; align-items: center; justify-content: center; gap: .6em; }
.hd-mark { display: inline-block; width: 22px; height: 22px; color: var(--amb); }
.side .s-mark { width: 54px; height: 54px; color: var(--fg); margin-bottom: 2px; }
.side.l .s-mark { color: var(--amb); }
.team-brand { display: grid; grid-template-columns: 96px 1fr 72px; gap: 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(201,162,74,.08), transparent 60%); }
.team-brand .tb-mark { width: 96px; height: 96px; color: var(--fg); }
.team-brand .tb-mark.jo { width: 120px; height: 120px; justify-self: end; }
.team-brand .tb-mark.jo img { width: 100%; height: 100%; display: block; }
.team-brand .tb-name { font: 300 30px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--fg); }
.team-brand p { margin: 8px 0 0; font: 300 16px/1.5 var(--ui); color: var(--fg-2); }
@media (max-width: 700px) { .team-brand { grid-template-columns: 64px 1fr; } .team-brand .tb-mark { width: 64px; height: 64px; } .team-brand .tb-mark.jo { display: none; } .team-brand .tb-name { font-size: 22px; } }

/* ---------------- Team: chain of command ---------------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 22px; }
.principles div { padding: 12px 14px; border-top: 2px solid var(--amb); background: rgba(10,13,15,.55); }
.principles b { display: block; margin-bottom: 4px; font: 400 14px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.principles span { font: 300 14px/1.45 var(--ui); color: var(--fg-2); }
.chain { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.chain::before { content: ""; position: absolute; left: 31px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--amb), var(--line) 30%, var(--line)); }
.tier { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; animation: fade .4s calc(var(--k, 0) * .07s) both; }
.tier-lv { position: relative; z-index: 1; justify-self: center; margin-top: 14px; padding: 4px 6px; font: 400 13px/1 var(--mono); letter-spacing: .1em; color: #0c0f10; background: var(--fg-2); }
.tier:first-child .tier-lv { background: var(--amb); }
.tier-nodes { display: flex; flex-wrap: wrap; gap: 12px; }
.node { position: relative; flex: 1 1 280px; max-width: 560px; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--fg-2); background: rgba(10,13,15,.7); display: flex; flex-direction: column; gap: 8px; transition: border-color .3s ease, background .3s ease; }
.node::before { content: ""; position: absolute; left: -20px; top: 22px; width: 19px; height: 1px; background: var(--line); }
.node.plain { border-left-color: var(--line); }
.node:hover { border-color: var(--dim); background: rgba(14,18,20,.8); }
.node header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.node h3 { margin: 0; font: 400 19px/1.1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.node small { font: 400 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.node p { margin: 0; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.auth { display: flex; flex-wrap: wrap; gap: 6px; }
.au { display: inline-block; padding: 3px 7px; font: 400 12px/1.2 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; }
.au.social { color: #a99be0; } .au.technical { color: #6fb7c9; } .au.organizational { color: var(--amb); } .au.none { color: var(--dim); border-style: dashed; }
.auth-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font: 300 14px/1.5 var(--ui); color: var(--dim); }
.auth-key .au { margin-right: 8px; }
@media (max-width: 700px) {
  .principles { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .chain::before { left: 23px; }
  .node::before { left: -14px; width: 13px; }
}

/* About: how a session works, as numbered text steps */
.bf-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.bf-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bf-steps li:last-child { border-bottom: 0; }
.bf-steps .st-n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); color: var(--amb); }
.bf-steps .st-n svg { width: 20px; height: 20px; }
.bf-steps h4 { margin: 2px 0 6px; font: 400 17px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.bf-steps p { margin: 0; font: 300 16px/1.6 var(--ui); color: var(--fg-2); max-width: 62em; }

/* Session Browser: calm empty state */
.nolink { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 20px; border: 1px solid var(--line); background: rgba(10,13,15,.55); text-align: center; }
.nolink svg { width: 56px; height: 56px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; animation: softPulse 4s ease-in-out infinite; }
@keyframes softPulse { 50% { opacity: .5; } }
.no-motion .nolink svg { animation: none; }
.nolink svg circle { fill: var(--dim); stroke: none; }
.nolink svg .x { stroke: var(--bad); stroke-width: 2.4; }
.nolink b { font: 400 16px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.nolink small { max-width: 34em; font: 300 15px/1.5 var(--ui); color: var(--dim); }

/* Download */
.dl-hero { position: relative; padding: 28px 30px; border: 1px solid var(--line); border-left: 3px solid var(--amb); background: linear-gradient(110deg, rgba(201,162,74,.08), rgba(10,13,15,.7) 45%); margin-bottom: 14px; overflow: hidden; }
.dl-hero.ready { border-left-color: var(--ok); background: linear-gradient(110deg, rgba(127,191,138,.1), rgba(10,13,15,.7) 45%); }
.dl-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; background: url("../brand/joint-operations-mark-white.svg") center / contain no-repeat; opacity: .05; pointer-events: none; }
.dl-hero h3 { margin: 8px 0 8px; font: 300 3vw/1.15 var(--ui); font: 300 clamp(26px, 3vw, 38px)/1.15 var(--ui); letter-spacing: .06em; color: var(--hot); }
.dl-hero p { margin: 0 0 16px; max-width: 46em; font: 300 17px/1.55 var(--ui); color: var(--fg-2); }
.dl-status { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 18px; }
.dl-status span { display: block; font: 400 12.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.dl-status b { font: 400 17px/1.3 var(--ui); color: var(--fg); }
.dl-files { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dl-files small { margin-left: 8px; opacity: .7; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.tabs.small button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; }
.tabs.small svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.dl-req { margin: 0; display: grid; gap: 0; }
.dl-req div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.dl-req div:last-child { border-bottom: 0; }
.dl-req dt { font: 400 12.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.dl-req dd { margin: 0; font: 400 15px/1.45 var(--ui); color: var(--fg); }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } .dl-hero { padding: 22px 18px; } }

/* Mods */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.modc { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-top: 2px solid var(--ok); background: rgba(10,13,15,.65); animation: fade .3s calc(var(--k, 0) * .05s) both; transition: border-color .3s ease; }
.modc.warn { border-top-color: var(--amb); }
.modc:hover { border-color: var(--dim); }
.modc header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.modc h3 { margin: 0; font: 400 18px/1.2 var(--ui); letter-spacing: .06em; color: var(--fg); }
.modc dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.modc dt { font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.modc dd { margin: 0; font: 400 14px/1.3 var(--ui); color: var(--fg-2); }
.modc p { margin: 0; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.modc .btn { align-self: flex-start; margin-top: auto; }
.modflow { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: mf; }
.modflow li { position: relative; padding: 14px 14px 14px 52px; border: 1px solid var(--line); background: rgba(10,13,15,.5); counter-increment: mf; }
.modflow li::before { content: counter(mf); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--amb); color: var(--amb); font: 400 14px/1 var(--mono); }
.modflow b { display: block; margin-bottom: 4px; font: 400 14px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.modflow span { font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
@media (max-width: 760px) { .modflow { grid-template-columns: 1fr; } }

/* Dev log */

/* Options */
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.preset { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left; cursor: pointer; border: 1px solid var(--line); background: rgba(10,13,15,.6); color: var(--fg); transition: border-color .3s ease, background .3s ease; }
.preset b { font: 400 14px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.preset small { font: 300 14px/1.4 var(--ui); color: var(--dim); }
.preset:hover { border-color: var(--dim); }
.preset.on { border-color: var(--hot); background: rgba(255,255,255,.05); }
.opt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.ogroup .label:not(:first-child) { margin-top: 22px; }
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); }
.seg button { padding: 7px 11px; border: 0; background: none; cursor: pointer; font: 400 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); transition: color .25s ease, background .25s ease; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--fg); }
.seg button[aria-checked="true"] { color: #0c0f10; background: var(--fg); }
@media (max-width: 1100px) { .opt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .presets, .opt { grid-template-columns: 1fr; } }

/* Contribute: header bar, row separators, difficulty filter feedback, distinct buttons */
.conbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.conbar .tabs { border-bottom: 0; margin: 0; }
.howbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 10px; }
.howbtn { padding: 13px 38px; font-size: 15px; letter-spacing: .18em; border-color: var(--amb); color: var(--amb); }
.howbtn:hover, .howbtn.on { background: var(--amb); color: #0c0f10; }
.howbox small { font: 300 14px/1.3 var(--ui); color: var(--fg-2); }
.conupd { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.conupd .upd-k { font: 400 12.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.conupd b { font: 400 16px/1.2 var(--ui); color: var(--fg); }
.conupd small { font: 300 14px/1.3 var(--ui); color: var(--dim); }
.crow-sep { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; }
.crow-sep span { flex: none; font: 400 13px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amb); }
.crow-sep::before { content: ""; width: 18px; height: 1px; background: var(--amb); }
.crow-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.diffhint { margin: 0 0 4px; font: 300 16px/1.4 var(--ui); color: var(--fg); }
.linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--amb); text-decoration: underline; text-underline-offset: 3px; }
.diffcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--c); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.diffcard > * { position: relative; }
.diffcard:hover { transform: translateY(-2px); }
.diffcard.sel { border-color: var(--c); border-width: 1px 1px 1px 1px; border-top-width: 3px; box-shadow: 0 0 0 1px var(--c), 0 10px 30px rgba(0,0,0,.45); }
.diffcard.sel::before { opacity: .13; }
.diffs.picking .diffcard:not(.sel) { opacity: .42; }
.diffs.picking .diffcard:not(.sel):hover { opacity: .8; }
.dc-on { position: absolute; top: 12px; right: 14px; padding: 4px 8px; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #0c0f10; background: var(--c); opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.diffcard.sel .dc-on { opacity: 1; transform: none; }
.diffcard.sel .dc-h i { visibility: hidden; }
.issuebtn { border-color: var(--f, var(--amb)); color: var(--fg); }
.issuebtn:hover { background: var(--f, var(--amb)); border-color: var(--f, var(--amb)); color: #0c0f10; }
.kc .spec summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); list-style: none; color: var(--fg); transition: border-color .3s ease, background .3s ease; }
.kc .spec summary::-webkit-details-marker { display: none; }
.kc .spec summary::after { content: "▸"; color: var(--f, var(--amb)); transition: transform .3s ease; }
.kc .spec[open] summary::after { transform: rotate(90deg); }
.kc .spec summary i { margin-left: auto; font-style: normal; color: var(--dim); }
.kc .spec summary:hover, .kc .spec[open] summary { border-color: var(--f, var(--amb)); background: rgba(255,255,255,.06); }
@media (max-width: 860px) {
  .conbar { grid-template-columns: 1fr; justify-items: center; }
  .conupd { justify-self: center; text-align: center; padding-bottom: 10px; }
}

/* ---------------- Smooth interface ----------------
   One motion language everywhere: things rise in gently, state changes ease out,
   nothing snaps. Turned off by Options → Animations (.no-motion). */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
a, button, .field, summary { transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
#ctab > *, .modgrid, .dl-hero, .presets, .chain, .ranks { animation: viewIn .45s cubic-bezier(.2,.8,.2,1) both; }
.panel, .stat, .node, .modc, .preset, .rank, .dl-hist a, .kcol { transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.stat:hover, .rank:hover, .modc:hover, .node:hover, .preset:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.btn:active, .preset:active, .diffcard:active, .howbtn:active { transform: translateY(1px) scale(.99); }
.center { scroll-behavior: smooth; }
.no-motion .center { scroll-behavior: auto; }

/* Docs: classic switch, layout with the usage guide beside the web */

/* AI agent credit on records (ADR 0015) */
.pill.agent { color: #9fd3e0; border-color: rgba(111,183,201,.6); }

/* Download stands out in Joint Operations orange: in the main menu and the section bar */
:root { --jo: #f28c28; }
.menu a.mi-download .t { color: var(--jo); }
.menu a.mi-download .mi { opacity: 1; stroke: var(--jo); }
.menu a.mi-download.on .t { color: #ffb066; text-shadow: 0 0 20px rgba(242,140,40,.55); }
.menu a.mi-download.on::before, .menu a.mi-download.on::after { background: var(--jo); box-shadow: 0 0 12px rgba(242,140,40,.8); }
.menu a.mi-download .hl { background: linear-gradient(90deg, transparent, rgba(242,140,40,.14) 50%, transparent); }
.secbar a.tab-download { color: var(--jo); border-color: rgba(242,140,40,.45); }
.secbar a.tab-download .mi { opacity: 1; }
.secbar a.tab-download:hover { color: #ffb066; border-color: var(--jo); background: rgba(242,140,40,.1); }
.secbar a.tab-download[aria-current="page"] { color: #0c0f10; border-color: var(--jo); background: linear-gradient(90deg, var(--jo) 50%, transparent 50%) 0 0 / 200% 100% no-repeat; }
.dl-hero { border-left-color: var(--jo); background: linear-gradient(110deg, rgba(242,140,40,.1), rgba(10,13,15,.7) 45%); }
.dl-hero .btn.primary { background: var(--jo); border-color: var(--jo); color: #0c0f10; }
.dl-hero .btn.primary:hover { background: #ffa04a; }
.dl-hero .kicker { color: var(--jo); }
.dl-progress { margin: 4px 0 18px; max-width: 560px; }
.dl-progress .meter { height: 6px; }
.dl-progress .meter i { background: var(--jo); }
.dl-progress small { display: block; margin-top: 6px; font: 400 13px/1.3 var(--mono); letter-spacing: .08em; color: var(--fg-2); }

/* Background scene: saluting operatives and their commander, sitting on the bottom edge */
.logo .emblem.scene { position: absolute; left: 50%; bottom: 40px; width: 100vw; max-width: 1700px; height: auto; transform: translateX(-50%); opacity: .032; animation: none; }
.in-view .logo .emblem.scene { opacity: .022; }
@media (max-width: 700px) { .logo .emblem.scene { width: 160vw; } }

/* Click to copy: code and commands in documents, guides, steps and cards */
#view [data-copy] { cursor: copy; position: relative; transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
#view code[data-copy]:hover, #view code[data-copy]:focus-visible { background: rgba(242,140,40,.16); box-shadow: 0 0 0 1px rgba(242,140,40,.6); outline: 0; }
#view pre[data-copy]:hover, #view pre[data-copy]:focus-visible { box-shadow: inset 0 0 0 1px rgba(242,140,40,.6); outline: 0; }
#view pre[data-copy]::after { content: "Copy"; position: absolute; top: 8px; right: 8px; padding: 3px 8px; font: 400 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #0c0f10; background: var(--jo, #f28c28); opacity: 0; transition: opacity .25s ease; }
#view pre[data-copy]:hover::after, #view pre[data-copy]:focus-visible::after { opacity: 1; }
#view [data-copy].copied { background: rgba(127,191,138,.22) !important; box-shadow: 0 0 0 1px var(--ok) !important; }
#view pre[data-copy].copied::after { content: "Copied"; background: var(--ok); opacity: 1; }
.sheet [data-copy]:hover { background: rgba(242,140,40,.22); }
.copytip { position: fixed; z-index: 80; left: 0; top: 0; pointer-events: none; padding: 5px 10px; font: 400 12.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--jo, #f28c28); background: rgba(7,10,11,.94); border: 1px solid rgba(242,140,40,.6); box-shadow: 0 8px 20px rgba(0,0,0,.45); opacity: 0; transition: opacity .2s ease; }
.copytip.on { opacity: 1; }
.copytip.ok { color: var(--ok); border-color: var(--ok); }
.copytip.bad { color: var(--bad); border-color: var(--bad); }
.copytip .ch { display: inline-block; animation: typeOn .12s both; }
@media print { #view pre[data-copy]::after, .copytip { display: none !important; } }

/* Team: open positions grouped by department */
.posgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.posdept { border: 1px solid var(--line); background: rgba(10,13,15,.6); }
.posdept header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); border-top: 2px solid var(--amb); }
.posdept h3 { margin: 0; font: 400 17px/1.1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.posdept small { font: 400 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px dashed var(--line); transition: background-color .3s ease; }
.pos:last-child { border-bottom: 0; }
.pos:hover { background: rgba(255,255,255,.03); }
.pos-main b { display: block; font: 400 16px/1.25 var(--ui); color: var(--fg); }
.pos-main span { font: 300 14px/1.4 var(--ui); color: var(--fg-2); }
.pos-who { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font: 400 13px/1.2 var(--mono); color: var(--fg-2); text-align: right; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 10px; height: 10px; border: 1px solid var(--dim); transform: rotate(45deg); }
.pips i.on { background: var(--ok); border-color: var(--ok); }
.pos .pill { margin: 0; justify-self: end; }
.pos.k-later { opacity: .7; }
@media (max-width: 900px) { .posgrid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pos { grid-template-columns: minmax(0, 1fr) auto; } .pos-who { grid-column: 1; align-items: flex-start; text-align: left; } }

/* Main menu background: the Joint Operations badge, large and faint behind the menu */
.logo .emblem.badge { width: 62vmin; width: min(62vmin, 640px); max-width: none; max-height: none; height: auto; opacity: .09; animation: none; filter: saturate(.85); }
.in-view .logo .emblem.badge { opacity: .04; }

/* About: frequently asked questions */
.faq { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 4px; cursor: pointer; list-style: none; font: 400 18px/1.3 var(--ui); color: var(--fg); transition: color .3s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--ui); color: var(--amb); transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--hot); }
.faq p { margin: 0 4px 18px; max-width: 60em; font: 300 16px/1.6 var(--ui); color: var(--fg-2); animation: viewIn .35s ease both; }

/* Contribute: each field column gets its own space, divided by a line */
.kcol { position: relative; }
.kcol + .kcol::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--f), var(--line) 30%, var(--line) 80%, transparent); opacity: .8; }
/* Completed contracts are crossed out: diagonal line texture and a strike across the card */
.kc.st-done { overflow: hidden; }
.kc.st-done::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(127,191,138,.55) calc(50% - 1px), rgba(127,191,138,.55) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(127,191,138,.09) 9px 11px); }
.kc.st-done > * { position: relative; z-index: 1; }
.kc.st-done .actions { z-index: 2; }

/* Team: contractors active this week */
.active-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.as-k { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.as-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: softPulse 2.4s ease-in-out infinite; }
.as-b { padding: 4px 9px; font: 400 13px/1 var(--mono); letter-spacing: .06em; color: #0c0f10; background: var(--ok); text-decoration: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: transform .25s ease, filter .25s ease; }
.as-b:hover { transform: translateY(-1px); filter: brightness(1.1); }
.as-none { font: 300 14px/1.3 var(--ui); color: var(--dim); }

/* Guides: every sheet and card has a printed document frame in its type's color */
.sheet { position: relative; }
.sheet::before, .sheet::after { content: ""; position: absolute; pointer-events: none; }
.sheet::before { top: 18px; right: 18px; bottom: 18px; left: 18px; border: 2px solid var(--ink, #1c2022); opacity: .75; }
.sheet::after { top: 24px; right: 24px; bottom: 24px; left: 24px; border: 1px solid var(--ink, #1c2022); opacity: .35; }
.sheet > * { position: relative; }
.mini { position: relative; }
.mini::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border: 1px solid var(--ink, #1c2022); opacity: .5; pointer-events: none; }
.mini.t-guide, .sheet.t-guide { --ink: #9a7418; }
.mini.t-policy, .sheet.t-policy { --ink: #a3352b; }
.mini.t-procedure, .sheet.t-procedure { --ink: #24647a; }
@media print { .sheet::before { top: 0; right: 0; bottom: 0; left: 0; } .sheet::after { top: 5px; right: 5px; bottom: 5px; left: 5px; } }
@media (max-width: 720px) { .sheet::before { top: 8px; right: 8px; bottom: 8px; left: 8px; } .sheet::after { display: none; } }

/* Roadmap: the base under construction (site/src/js/11b-base.js). The stage is 80% of the 16:9 frame */
.mb-stage { position: relative; width: 100%; width: min(100%, calc((100vh - 300px) * 16 / 9)); min-width: 100%; min-width: min(100%, 760px); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); background: #05090b; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 120px rgba(0,0,0,.6); }
.mb-stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(255,255,255,.012) 3px 4px); }
.mb-svg { display: block; width: 100%; height: 100%; }
.mb-hudtl { position: absolute; left: 37.5%; top: 16px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; max-width: 46%; pointer-events: none; text-align: center; }
.mb-hudtl b { font: 200 40px/1 var(--ui); color: var(--jo); letter-spacing: .03em; text-shadow: 0 0 22px rgba(242,140,40,.35); }
.mb-hudtl small { font: 400 12.5px/1 var(--mono); color: var(--dim); letter-spacing: .1em; }
.mb-key { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 7px 16px; margin: 6px 0 0; padding: 0; font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.mb-key li { display: flex; align-items: center; gap: 8px; }
.mb-key li::before { content: ""; width: 12px; height: 12px; border: 1px solid; }
.mb-key .k-done::before { background: rgba(127,191,138,.45); border-color: var(--ok); }
.mb-key .k-now::before { background: rgba(201,162,74,.5); border-color: var(--amb); }
.mb-key .k-next::before { border: 1px dashed #4f7383; background: repeating-linear-gradient(45deg, rgba(111,147,163,.35) 0 1px, transparent 1px 4px); }
.mb-hint { position: absolute; left: 0; right: 31%; bottom: 12px; margin: 0; text-align: center; font: 400 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--dim); pointer-events: none; opacity: .85; }
.mb-panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: 29%; overflow: auto; padding: 18px 20px; border: 1px solid rgba(242,140,40,.35); border-top: 2px solid var(--jo);
  background: linear-gradient(180deg, rgba(14,19,21,.86), rgba(8,11,13,.8)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.mb-wave { stroke: #9fc4cf; stroke-width: 1.3; stroke-linecap: round; }
.mb-ring { fill: none; stroke: #9fc4cf; stroke-width: 1.2; }
.mb-ring.hot { stroke: var(--jo); stroke-width: 1.6; }
.mb-wake { fill: none; stroke: #cfe6ec; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .28; }
.mb-wake.big { stroke-width: 7; opacity: .12; }
.mb-hull { fill: #d8dfe1; stroke: #0a0f11; stroke-width: .8; }
.mb-ship .hull { fill: #3c4a50; stroke: #0a0f11; stroke-width: 1.2; }
.mb-ship .deck { fill: #2a353a; }
.mb-ship .bridge { fill: #d8dfe1; }
.mb-ship .cont { stroke: rgba(0,0,0,.45); stroke-width: .6; transition: opacity .25s ease; }
.mb-ship .lamp { fill: #ff5a4f; animation: mbBlink 1.2s steps(2, jump-none) infinite; }
.mb-gang { stroke: #8a989d; stroke-width: 3; stroke-dasharray: 2 2; }
.mb-carrier circle { fill: #ffd27a; }
.mb-carrier .crate, .mb-crate { fill: #c98a3a; stroke: #3b2a12; stroke-width: .8; }
.mb-bridge .b-edge { stroke: #3a474b; stroke-width: 17; }
.mb-bridge .b-deck { stroke: #1a2226; stroke-width: 12; }
.mb-bridge .b-lane { stroke: #2e3a3f; stroke-width: 1; stroke-dasharray: 10 8; }
.mb-bridge.plan .b-deck { stroke: #4f7383; stroke-width: 1.6; stroke-dasharray: 8 7; opacity: .75; animation: mbAnts 1.4s linear infinite; }
.mb-pier { fill: #263034; }
.mb-mod { cursor: pointer; outline: none; }
.mb-mod .mb-edge > * { fill: none; stroke: #5b6b71; stroke-width: 3.6; transition: stroke .2s ease; }
.mb-mod .mb-deck > * { fill: #141b1e; transition: fill .2s ease; }
.mb-mod.st-next .mb-edge > * { stroke: #4f7383; stroke-width: 1.8; stroke-dasharray: 7 6; animation: mbAnts 1.6s linear infinite; }
.mb-mod.st-next .mb-deck > * { fill: rgba(20,34,40,.6); }
.mb-hatch { opacity: .55; }
#mbHatch line { stroke: #6f93a3; stroke-width: 1.2; }
.mb-mod.st-now .mb-hatch { opacity: .4; }
.mb-mark > * { fill: none; stroke: #2c383c; stroke-width: 1.2; stroke-dasharray: 3 4; }
.mb-h { font: 400 17px var(--mono); fill: #56656a; text-anchor: middle; pointer-events: none; }
.mb-beacon { fill: #ff5a4f; animation: mbBlink 1.6s steps(2, jump-none) infinite; }
.mb-mod.st-done .mb-beacon { fill: var(--ok); }
.mb-mod.st-next .mb-beacon { display: none; }
.mb-fill { opacity: .55; }
.mb-lvl { fill: none; stroke-width: 2.4; }
.mb-mod.st-done .mb-fill { fill: var(--ok); } .mb-mod.st-done .mb-lvl { stroke: var(--ok); }
.mb-mod.st-now .mb-fill { fill: var(--amb); } .mb-mod.st-now .mb-lvl { stroke: #ffd98a; }
.mb-mod.st-next .mb-fill { fill: #6f93a3; } .mb-mod.st-next .mb-lvl { stroke: #9cc0cf; }
.mb-pct { font: 300 44px var(--ui); text-anchor: middle; fill: var(--fg); letter-spacing: .02em; transition: fill .2s ease; }
.mb-mod.st-done .mb-pct { fill: var(--ok); } .mb-mod.st-now .mb-pct { fill: var(--amb); } .mb-mod.st-next .mb-pct { fill: #6f8f9c; }
.mb-name { font: 400 17px var(--mono); text-anchor: middle; fill: var(--fg-2); letter-spacing: .16em; text-transform: uppercase; transition: fill .2s ease; }
.mb-mod:hover .mb-edge > *, .mb-mod:focus-visible .mb-edge > *, .mb-mod.sel .mb-edge > * { stroke: var(--jo); stroke-dasharray: none; stroke-width: 3.6; animation: none; }
.mb-mod:hover .mb-edge, .mb-mod:focus-visible .mb-edge, .mb-mod.sel .mb-edge { filter: url(#mbGlow); }
.mb-mod:hover .mb-deck > *, .mb-mod:focus-visible .mb-deck > * { fill: #241b11; }
.mb-mod:hover .mb-pct, .mb-mod:hover .mb-name, .mb-mod.sel .mb-name, .mb-mod:focus-visible .mb-name { fill: var(--jo); }
.mb-mod:hover .mb-pct { filter: url(#mbGlow); }
#mbSel circle { fill: none; stroke: var(--jo); }
#mbSel .r1 { stroke-width: 1.4; stroke-dasharray: 14 8 2 8; opacity: .8; }
#mbSel .r2 { stroke-width: 1; stroke-dasharray: 2 10; opacity: .5; }
.mb-man { fill: #e9edee; opacity: .9; pointer-events: none; }
.mb-man.st-now { fill: #ffd27a; }
.mb-man.st-next { fill: #8fb6c6; opacity: .7; }
.mb-spark { fill: #fff6d8; pointer-events: none; }
.mb-crane rect { fill: #f28c28; } .mb-crane line { stroke: #f2a24e; stroke-width: 3; stroke-linecap: round; } .mb-crane circle { fill: #ffd27a; }
.mb-fx, .mb-water, .mb-bridges, .mb-clouds, .mb-sea { pointer-events: none; }
.mb-heli ellipse, .mb-heli .hb line { fill: #dfe5e7; stroke: #dfe5e7; stroke-width: 1.6; }
.mb-heli .rotor { stroke: #dfe5e7; stroke-width: 1.2; opacity: .55; }
.mb-hsh { fill: #000; }
.mb-hud path, .mb-hud circle { fill: none; stroke: #3d4a4f; stroke-width: 1.6; }
.mb-hud g path { fill: var(--jo); stroke: none; }
.mb-hud text { font: 400 14px var(--mono); fill: var(--dim); text-anchor: middle; }
@keyframes mbAnts { to { stroke-dashoffset: -26; } }
@keyframes mbBlink { 50% { opacity: .15; } }
.no-motion .mb-bridge.plan .b-deck, .no-motion .mb-mod.st-next .mb-edge > *, .no-motion .mb-beacon, .no-motion .mb-ship .lamp { animation: none; }
.mb-p { animation: mbIn .35s ease-out both; }
@keyframes mbIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.no-motion .mb-p { animation: none; }
.mb-p h3 { margin: 6px 0 12px; font: 300 26px/1.15 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.mb-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mb-big b { font: 300 46px/1 var(--ui); color: var(--fg); }
.mb-p.st-now .mb-big b { color: var(--amb); } .mb-p.st-done .mb-big b { color: var(--ok); } .mb-p.st-next .mb-big b { color: #8fb0be; }
.mb-p.st-now .meter i { background: var(--amb); } .mb-p.st-next .meter i { background: #6f93a3; }
.mb-count { margin: 8px 0 12px; font: 400 13px/1.3 var(--mono); color: var(--dim); letter-spacing: .06em; }
.mb-stage.narrow { aspect-ratio: auto; width: 100%; margin-left: 0; overflow: visible; }
.mb-stage.narrow .mb-svg { height: auto; aspect-ratio: 1150 / 870; }
.mb-stage.narrow .mb-hudtl { position: static; transform: none; max-width: none; justify-content: flex-start; text-align: left; padding: 12px 14px 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.mb-stage.narrow .mb-hudtl b { font-size: 34px; }
.mb-stage.narrow .mb-key { justify-content: flex-start; margin: 0; }
.mb-stage.narrow .mb-hint { position: static; display: block; padding: 4px 14px; text-align: left; }
.mb-stage.narrow .mb-panel { position: static; width: auto; border-left: 0; border-right: 0; border-bottom: 0; }
.mb-stage.narrow .mb-pct { font-size: 60px; } .mb-stage.narrow .mb-name { font-size: 25px; }
/* Guides: stronger colour per document type, with a type stripe along the right edge.
   Guide = ochre, Policy = red, Procedure = blue. Background patterns are kept faint so the text stands out */
.mini.t-guide, .sheet.t-guide { --ink: #a86f00; --paper: #f6edd6; --tint: rgba(168,111,0,.06); }
.mini.t-policy, .sheet.t-policy { --ink: #b02a22; --paper: #f7e9e5; --tint: rgba(176,42,34,.05); }
.mini.t-procedure, .sheet.t-procedure { --ink: #1d6a8a; --paper: #e5eff3; --tint: rgba(29,106,138,.07); }
.mini.t-guide, .sheet.t-guide { background: linear-gradient(var(--tint) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--tint) 1px, transparent 1px) 0 0 / 14px 14px, var(--paper); }
.mini.t-policy, .sheet.t-policy { background: repeating-linear-gradient(45deg, var(--tint) 0 1px, transparent 1px 5px), var(--paper); }
.mini.t-procedure, .sheet.t-procedure { background: radial-gradient(var(--tint) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--paper); }
.mini[class*="t-"] { border-color: color-mix(in srgb, var(--ink) 45%, #d6d3ca); border-top: 4px solid var(--ink); }
.sheet[class*="t-"] { border-top: 6px solid var(--ink); }
.sheet[class*="t-"] .sh-head { border-bottom: 3px solid var(--ink); }
.sheet[class*="t-"] .sh-title { color: color-mix(in srgb, var(--ink) 35%, #111); }
.sheet[class*="t-"] .sh-body h2 { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.sheet[class*="t-"] .sh-meta, .sheet[class*="t-"] .sh-meta div { border-color: color-mix(in srgb, var(--ink) 30%, #c9c6bd); }
.sheet[class*="t-"] .sh-body blockquote { border-left-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.stripe { position: absolute; top: 0; bottom: 0; right: 0; width: 16px; z-index: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: center; overflow: hidden; background: var(--ink, #1c2022); pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.stripe b { writing-mode: vertical-rl; font: 400 10px/1 var(--mono); letter-spacing: .45em; text-transform: uppercase; color: var(--paper, #f4f2ec); white-space: nowrap; }
.mini .stripe { width: 11px; }
.mini .stripe b { font-size: 7.5px; letter-spacing: .3em; }
.sheet::before { right: 30px; } .sheet::after { right: 36px; }
.mini::before { right: 16px; }
.mini { padding-right: 22px; }
@media print { .sheet[class*="t-"] { background: #fff !important; } }
.mini .m-top { font-size: 11.5px; letter-spacing: .06em; gap: 6px; }
.mini .m-foot { font-size: 11px; letter-spacing: .06em; }
/* Print and PDF: light page, full width, and room inside the frame */
@media print {
  :root { color-scheme: light; }
  #view, #vb, .sheet { width: 100% !important; max-width: none !important; }
  .sheet { padding: 9mm 10mm !important; }
}
/* Keycards: staff cards drawn as security cards (site/src/js/19d-keycard.js). Original design, ID-1 card proportions */
.hks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 12px 0 18px; align-items: start; }
.hks .empty { margin: 0; }
.hk { --hk: #f28c28; position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; gap: 8px 12px; aspect-ratio: 85.6 / 54; padding: 14px 16px 12px; overflow: hidden; color: var(--fg); text-decoration: none;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hk) 55%, #2c3538);
  background: radial-gradient(circle at 18% 60%, rgba(255,255,255,.035) 0 1px, transparent 1.5px) 0 0 / 9px 9px, linear-gradient(135deg, #1a2124 0%, #0e1315 55%, #151b1e 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--hk); }
.hk::after { content: ""; position: absolute; right: -22px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%) rotate(45deg); background: var(--bg); border: 1px solid color-mix(in srgb, var(--hk) 55%, #2c3538); }
a.hk:hover, a.hk:focus-visible { transform: translateY(-3px); border-color: var(--hk); box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 1px var(--hk), 0 0 22px color-mix(in srgb, var(--hk) 35%, transparent); outline: none; }
.hk-band { grid-column: 1; display: flex; align-items: center; gap: 9px; padding-left: 6px; font: 400 12px/1.15 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.hk-band small { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--dim); }
.hk-lv { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-right: 18px; font: 200 64px/0.9 var(--ui); color: var(--hk); text-shadow: 0 0 18px color-mix(in srgb, var(--hk) 40%, transparent); }
.hk-lv small { font: 400 13px/1 var(--mono); letter-spacing: .2em; margin-right: 4px; vertical-align: top; color: var(--fg-2); }
.hk-who { grid-column: 1; grid-row: 2; align-self: end; padding-left: 52px; min-width: 0; }
.hk-who b { display: block; font: 400 21px/1.1 var(--ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-who small { font: 400 12px/1.4 var(--mono); color: var(--dim); }
.hk-meta { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 4px 14px; padding-left: 6px; font: 400 12px/1.25 var(--mono); }
.hk-meta span { display: flex; flex-direction: column; }
.hk-meta i { font-style: normal; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.hk-foot { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.hk-bars { width: 110px; height: 16px; fill: color-mix(in srgb, var(--hk) 60%, #e9edee); opacity: .7; }
.hk-foot .vs .status { font-size: 11px; }
.hk-key { margin-left: auto; margin-right: 22px; padding: 2px 6px; font: 400 10.5px/1.2 var(--mono); letter-spacing: .18em; color: var(--hk); border: 1px solid var(--hk); }
.hk.revoked { filter: grayscale(.85); opacity: .75; }
.hk-void { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 4px 18px; font: 400 34px/1 var(--mono); letter-spacing: .3em; color: #d77a6e; border: 3px solid #d77a6e; opacity: .85; pointer-events: none; }
.hk.specimen .hk-who b { color: var(--fg-2); }
.hk.specimen::before { background: repeating-linear-gradient(-45deg, var(--hk) 0 6px, transparent 6px 12px); }
.hk.big { max-width: 520px; padding: 20px 24px 16px; }
.hk.big .hk-lv { font-size: 96px; }
.hk.big .hk-who { padding-left: 66px; } .hk.big .hk-who b { font-size: 28px; }
.hk.big .hk-meta { font-size: 14px; gap: 6px 20px; }
.hk.big .hk-bars { width: 150px; }
.kc-profile { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 10px; }
.kc-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.kc-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kc-facts dt { font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kc-facts dd { margin: 0; font: 400 15px/1.4 var(--ui); overflow-wrap: anywhere; }
.kc-proof { border: 1px solid var(--line); background: rgba(10,13,15,.6); padding: 4px 18px 16px; margin-bottom: 18px; }
.kc-proof .kt > * { margin-top: 10px; }
.kc-proof textarea, .kc-proof input.grow { width: 100%; }
.kc-proof pre.code { min-height: 1.6em; white-space: pre-wrap; word-break: break-all; }
#kcRes .sub { overflow-wrap: anywhere; }
@media (max-width: 900px) { .kc-profile { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hks { grid-template-columns: 1fr; } .hk { padding: 12px 12px 10px; } .hk-lv { font-size: 52px; } .hk-who b { font-size: 18px; } .hk-meta { gap: 3px 10px; font-size: 11px; } }
.no-motion .hk { transition: none; }
.hk-wm { position: absolute; right: 70px; top: 50%; width: 46%; max-width: 230px; transform: translateY(-46%); opacity: .13; pointer-events: none; filter: grayscale(1) drop-shadow(0 0 1px rgba(255,255,255,.25)); }
.hk:not(.big) .k-since { display: none; }
.hk:not(.big) .hk-band { font-size: 11px; letter-spacing: .14em; }
.hk:not(.big) .hk-band small { font-size: 8.5px; }
.hk:not(.big) .hk-lv { font-size: 52px; }
.hk:not(.big) .hk-who { padding-left: 44px; }
.hk:not(.big) .hk-who b { font-size: 18px; }
.hk:not(.big) .hk-meta { font-size: 11.5px; gap: 3px 12px; }.hk-wm { position: absolute; right: 70px; top: 50%; width: 46%; max-width: 230px; transform: translateY(-46%); opacity: .13; pointer-events: none; filter: grayscale(1) drop-shadow(0 0 1px rgba(255,255,255,.25)); }
.hk:not(.big) .k-since { display: none; }
.hk:not(.big) .hk-band { font-size: 11px; letter-spacing: .14em; }
.hk:not(.big) .hk-band small { font-size: 8.5px; }
.hk:not(.big) .hk-lv { font-size: 52px; }
.hk:not(.big) .hk-who { padding-left: 44px; }
.hk:not(.big) .hk-who b { font-size: 18px; }
.hk:not(.big) .hk-meta { font-size: 11.5px; gap: 3px 12px; }
/* Mini sheets stay inside their A4 shape: no wrapping code line, summary clamped, footer on one line */
.mini { overflow: hidden; }
.mini .m-top { flex-wrap: nowrap; white-space: nowrap; align-items: baseline; }
.mini .m-top b { overflow: hidden; text-overflow: ellipsis; }
.mini .m-title { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.mini .m-sum { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; min-height: 0; }
.mini .m-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.mb-pct, .mb-name { paint-order: stroke; stroke: #05090b; stroke-width: 5px; stroke-linejoin: round; }
/* ---------------- Docs: dossier cabinet (site/src/js/17b-cabinet.js) ----------------
   Drawers of kraft case files; the open file is a typed page clipped into its folder. Guides are A4 handbook sheets,
   documents are case files: ruled paper, punch holes, a paper clip, the group colour on the tab and stamp. */
.cab { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.cab-side { position: sticky; top: 0; max-height: calc(100vh - 210px); overflow: auto; padding: 2px 6px 12px 2px; scrollbar-width: thin; }
.cab-q { display: flex; margin-bottom: 12px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); background: rgba(7,10,11,.8); transition: border-color .2s; }
.cab-q:focus-within { border-color: var(--jo); }
.cab-q span { color: var(--dim); }
.cab-q input { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0; outline: 0; color: var(--fg); font: 400 14px var(--mono); }
.cab-q kbd { font: 400 10.5px var(--mono); color: var(--dim); border: 1px solid var(--line); padding: 2px 5px; white-space: nowrap; }
.drawer { --g: #c9d0d2; margin-bottom: 9px; border: 1px solid var(--line); background: linear-gradient(180deg, #1c2326, #12181a); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #080b0c; transition: border-color .25s; }
.drawer.open { border-color: color-mix(in srgb, var(--g) 60%, #2c3538); }
.dr-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: none; border: 0; cursor: pointer; color: var(--fg); text-align: left; }
.dr-handle { flex: none; width: 44px; height: 10px; border: 1px solid #5b6b71; border-radius: 3px; background: linear-gradient(#0c0f10, #1a2124); box-shadow: 0 2px 0 rgba(0,0,0,.6); }
.dr-head b { padding: 3px 9px; background: #e9e3d2; color: #1c2022; border-left: 4px solid var(--g); font: 400 13px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.dr-head small { font: 400 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dr-head i { margin-left: auto; width: 10px; height: 10px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: rotate(-45deg); transition: transform .3s cubic-bezier(.22,.9,.3,1); }
.drawer.open .dr-head i { transform: rotate(45deg); }
.dr-head:hover .dr-handle, .dr-head:focus-visible .dr-handle { border-color: var(--jo); }
.dr-head:focus-visible { outline: 1px solid var(--jo); outline-offset: -1px; }
.dr-body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .46s cubic-bezier(.22,.9,.3,1); }
.drawer.open .dr-body { grid-template-rows: 1fr; }
.dr-files { min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 18px 8px; padding: 0 12px; background: linear-gradient(180deg, #080b0c, #0e1315); box-shadow: inset 0 8px 14px rgba(0,0,0,.5); transition: padding .46s cubic-bezier(.22,.9,.3,1); }
.drawer.open .dr-files { padding: 18px 12px 14px; }
.fold { position: relative; display: flex; min-height: 84px; padding: 12px 8px 8px; background: linear-gradient(170deg, #ddc591, #cbb07a); color: #2a2418; text-decoration: none; border-top: 3px solid var(--g); box-shadow: 0 6px 12px rgba(0,0,0,.45); transform: translate3d(0,0,0); transition: transform .38s cubic-bezier(.22,.9,.3,1), filter .38s ease; will-change: transform; backface-visibility: hidden; }
.fold .f-tab { position: absolute; top: -15px; left: calc(4px + var(--tx, 0px)); max-width: calc(100% - 8px); padding: 2px 6px 1px; background: #ddc591; border-top: 3px solid var(--g); border-radius: 3px 3px 0 0; font: 400 9.5px/1.2 var(--mono); letter-spacing: .04em; color: #3b2f17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold .f-t { font: 400 12.5px/1.25 var(--ui); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.fold::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 16px 26px rgba(0,0,0,.55); opacity: 0; transition: opacity .38s ease; pointer-events: none; }
.fold:hover, .fold:focus-visible { transform: translate3d(0,-5px,0); filter: brightness(1.05); outline: none; }
.fold:hover::after, .fold:focus-visible::after, .fold.on::after { opacity: 1; }
.fold.on { transform: translate3d(0,-7px,0); outline: 2px solid var(--jo); outline-offset: 0; }
.cab-drawers.first .drawer.open .fold, .drawer.opening .fold { animation: foldIn .42s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(120ms + var(--k) * 22ms); }
.cab.searching .fold { animation: none; }
@keyframes foldIn { from { opacity: 0; transform: translate3d(0,12px,0); } }
.dossier { --g: #c9d0d2; --gd: #4d5a60; position: relative; outline: none; min-height: 400px; }
.dossier.in .ds-folder, .dossier.in .ds-tab { animation: dsIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dsIn { from { opacity: 0; transform: translateY(18px); } }
.ds-tab { position: relative; display: inline-flex; gap: 12px; align-items: baseline; margin-left: 28px; padding: 9px 18px 7px; background: linear-gradient(#cdaa6c, #c4a163); color: #2a2010; border-top: 4px solid var(--g); border-radius: 7px 7px 0 0; font: 400 12.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.ds-tab b { color: var(--gd); letter-spacing: .1em; }
.ds-folder { position: relative; padding: 18px 18px 22px 32px; background: linear-gradient(135deg, #c9a86c, #b5945a); border-radius: 0 7px 7px 7px; box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.12); }
.ds-folder::before { content: ""; position: absolute; left: 40px; right: 26px; top: 26px; bottom: 18px; background: #ebe5d5; transform: translate(9px, 6px); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ds-page { position: relative; z-index: 1; min-height: 860px; padding: 44px 56px 28px 76px; color: #1c2022; font: 400 15px/1.6 var(--ui);
  background: linear-gradient(90deg, transparent 54px, rgba(176,42,34,.28) 54px, rgba(176,42,34,.28) 55px, transparent 55px), repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.07) 27px 28px), #f8f5ed;
  box-shadow: 3px 5px 0 rgba(0,0,0,.14); }
/* Punch holes repeat down the margin, however long the page is */
.ds-holes { position: absolute; left: 20px; top: 150px; bottom: 60px; width: 15px; background: radial-gradient(circle at 7.5px 7.5px, #8f7342 0 5px, #b8975c 6px 7px, transparent 7.5px) 0 0 / 15px 340px repeat-y; pointer-events: none; }
.ds-clip { position: absolute; z-index: 2; top: -18px; left: 24px; width: 20px; height: 66px; border: 3px solid #9aa6ab; border-radius: 10px; }
.ds-clip::after { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 44px; border: 3px solid #9aa6ab; border-radius: 6px; }
.ds-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--gd); font: 400 12.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ds-head span { display: inline-flex; align-items: center; gap: 8px; }
.ds-class { color: var(--gd); }
.ds-head { display: grid; grid-template-columns: 1fr auto 1fr; }
.ds-head .ds-class { justify-self: end; text-align: right; }
.ds-head > span:first-child, .ds-head .ds-class { white-space: nowrap; }
.ds-cls { --c: #2f7a45; display: flex !important; flex-direction: column; align-items: center; gap: 2px !important; padding: 4px 10px; border: 1.5px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); white-space: nowrap; }
.ds-cls b { font: 700 11.5px/1 var(--mono); letter-spacing: .2em; }
.ds-cls small { font: 400 9px/1 var(--mono); letter-spacing: .18em; opacity: .85; }
.ds-cls.c-low { --c: #a8650a; }
.ds-cls.c-high { --c: #a3241b; outline: 1.5px solid var(--c); outline-offset: 2px; font-weight: 700; }
.ds-warn { margin: 10px 0 0; padding: 7px 12px; border-left: 3px solid #a3241b; background: rgba(163,36,27,.07); color: #7d1d16; font: 400 13px/1.45 var(--ui); }
.ds-warn b { font-weight: 600; letter-spacing: .04em; }
@media (max-width: 520px) { .ds-head { grid-template-columns: 1fr auto; } .ds-cls { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 8px; } }
.ds-title { margin: 30px 0 10px; font: 300 34px/1.15 var(--ui); letter-spacing: .02em; color: #111; text-transform: none; }
.ds-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px dashed rgba(0,0,0,.22); font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6b6f70; }
.ds-meta a, .ds-meta .ds-link { color: var(--gd); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.dossier .ds-body { color: #23282a; }
.dossier .ds-body h2 { color: var(--gd); border-bottom-color: color-mix(in srgb, var(--gd) 35%, transparent); }
.dossier .ds-body a { color: var(--gd); }
.dossier .ds-body blockquote { border-left-color: var(--gd); background: color-mix(in srgb, var(--g) 12%, #f8f5ed); }
.ds-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.18); font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: #6b6f70; }
.no-motion .fold, .no-motion .drawer.open .fold, .no-motion .dossier.in .ds-folder, .no-motion .dossier.in .ds-tab { animation: none; transition: none; }
@media (max-width: 900px) {
  .cab { grid-template-columns: 1fr; }
  .cab-side { position: static; max-height: none; overflow: visible; }
  .ds-folder { padding: 10px 8px 12px 14px; }
  .ds-folder::before { display: none; }
  .ds-page { min-height: 0; padding: 26px 18px 18px 34px; background: linear-gradient(90deg, transparent 24px, rgba(176,42,34,.28) 24px, rgba(176,42,34,.28) 25px, transparent 25px), repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.07) 27px 28px), #f8f5ed; }
  .ds-holes { left: 6px; width: 11px; background-size: 11px 260px; background-image: radial-gradient(circle at 5.5px 5.5px, #8f7342 0 3.5px, #b8975c 4.5px 5px, transparent 5.5px); }
  .ds-clip { left: 8px; }
    .ds-title { font-size: 26px; max-width: none; margin-top: 34px; }
  .ds-tab { margin-left: 12px; }
}
@media print { .cab-side, .ds-tab, .ds-clip, .ds-holes { display: none !important; } .ds-folder, .ds-page { background: #fff !important; box-shadow: none; padding: 0; } .ds-folder::before { display: none; } }

.cab-keys { font-size: 10.5px; letter-spacing: .1em; color: var(--dim); text-transform: none; }
.ds-body mark.hl { background: rgba(242,140,40,.35); color: inherit; padding: 0 1px; box-shadow: 0 0 0 1px rgba(242,140,40,.5); }
/* Paper by class: each class of document has its own paper so it reads at a glance */
.dossier .ds-page { background-color: #f8f5ed; }
.dossier.k-policy .ds-page { background: repeating-linear-gradient(45deg, rgba(163,53,43,.045) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgba(163,53,43,.045) 0 1px, transparent 1px 6px), #f9f1ee; }
.dossier.k-procedure .ds-page { background: linear-gradient(90deg, transparent 54px, rgba(176,42,34,.3) 54px, rgba(176,42,34,.3) 55px, transparent 55px), radial-gradient(rgba(29,106,138,.28) 1px, transparent 1.4px) 0 0 / 14px 14px, #eef3f5; }
.dossier.k-guide .ds-page { background: linear-gradient(rgba(125,95,21,.07) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(125,95,21,.07) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(rgba(125,95,21,.12) 1px, transparent 1px) 0 0 / 70px 70px, #f7f0de; }
.dossier.k-decision .ds-page { background: linear-gradient(90deg, transparent 54px, rgba(176,42,34,.3) 54px, rgba(176,42,34,.3) 55px, transparent 55px), repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.09) 27px 28px), #f8f5ed; }
.dossier.k-research .ds-page { background: repeating-linear-gradient(60deg, rgba(29,106,138,.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(-60deg, rgba(29,106,138,.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(29,106,138,.07) 0 1px, transparent 1px 20.8px), #f1f6f7; }
.dossier.k-technical .ds-page { background: linear-gradient(rgba(168,86,15,.05) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, rgba(168,86,15,.05) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(rgba(168,86,15,.11) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(168,86,15,.11) 1px, transparent 1px) 0 0 / 30px 30px, #faf4ec; }
.dossier.k-community .ds-page { background: repeating-linear-gradient(transparent 0 28px, rgba(59,116,70,.07) 28px 56px), #f6f8f1; }
.dossier.k-project .ds-page { background: repeating-linear-gradient(135deg, rgba(77,90,96,.04) 0 1px, transparent 1px 7px), #f6f5f1; }
.dossier.k-legal .ds-page { background: linear-gradient(90deg, transparent 50px, rgba(176,42,34,.35) 50px, rgba(176,42,34,.35) 51px, transparent 51px, transparent 54px, rgba(176,42,34,.35) 54px, rgba(176,42,34,.35) 55px, transparent 55px), repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.13) 27px 28px), #fbf4c9; }
@media (max-width: 900px) {
  .dossier.k-procedure .ds-page { background: radial-gradient(rgba(29,106,138,.28) 1px, transparent 1.4px) 0 0 / 14px 14px, #eef3f5; }
  .dossier.k-decision .ds-page { background: repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.09) 27px 28px), #f8f5ed; }
  .dossier.k-legal .ds-page { background: linear-gradient(90deg, transparent 24px, rgba(176,42,34,.35) 24px, rgba(176,42,34,.35) 25px, transparent 25px), repeating-linear-gradient(transparent 0 27px, rgba(29,106,138,.13) 27px 28px), #fbf4c9; }
}
.no-motion .fold, .no-motion .fold::after, .no-motion .dr-head i { transition: none; }
.kc .spec summary { white-space: nowrap; letter-spacing: .1em; }
.kc-proof #kcWho { flex: 1; min-width: 220px; }

/* Documentation zones: Library and Handbook */
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
/* Each zone is a raised button with its own colour, texture and icon: steel drawers for the Library, bound cloth for the Handbook */
.zone { --zc: #8fb1c9; position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--zc) 45%, transparent); border-bottom-width: 3px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)), rgba(14,18,21,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.35); color: var(--fg-2); text-decoration: none; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease, box-shadow .2s ease; }
.zone.z-hb { --zc: #e0b25a; }
.zone:hover, .zone:focus-visible { border-color: var(--zc); color: var(--fg); outline: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--zc) 35%, transparent); }
.zone:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.zone.on { border-color: var(--zc); background: linear-gradient(110deg, color-mix(in srgb, var(--zc) 20%, transparent), rgba(10,13,15,.75) 65%); color: var(--hot); cursor: default; transform: none; }
.zone.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--zc); }
.zone b { position: relative; font: 400 17px/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.zone small { position: relative; grid-column: 2; font: 300 14px/1.35 var(--ui); color: var(--dim); }
.z-ico { position: relative; grid-row: 1 / span 2; width: 38px; height: 38px; color: var(--zc); }
.z-ico svg, .door-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.z-ico .zi-f, .door-ico .zi-f { fill: currentColor; fill-opacity: .35; }
.z-ico .zi-s, .door-ico .zi-s { stroke: #e0453f; stroke-width: 2.6; }
.z-go { position: relative; grid-row: 1 / span 2; grid-column: 3; font: 400 12px var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--zc); border: 1px solid color-mix(in srgb, var(--zc) 50%, transparent); padding: 6px 9px; white-space: nowrap; }
.zone.on .z-go { opacity: .55; border-style: dashed; }
/* Textures, drawn by CSS: brushed steel with drawer seams, and woven binding cloth */
.door-tex { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: .5; }
.z-lib .door-tex, .d-lib .door-tex { background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,0,0,.35) 22px 23px, rgba(255,255,255,.06) 23px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.z-hb .door-tex, .d-hb .door-tex { background: repeating-linear-gradient(45deg, rgba(224,178,90,.06) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 2px, transparent 2px 5px); }
@media (max-width: 700px) { .zones { grid-template-columns: 1fr; gap: 8px; } .zone { padding: 10px 14px; } .zone b { font-size: 15px; } .zone small { display: none; } .z-ico { width: 30px; height: 30px; grid-row: 1; } }
/* The first step of Docs: two large doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.door { --zc: #8fb1c9; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-height: 340px; padding: 26px 26px 22px; border: 1px solid color-mix(in srgb, var(--zc) 50%, transparent); border-bottom-width: 4px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.3)), rgba(14,18,21,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.4); color: var(--fg-2); text-decoration: none; transition: transform .25s cubic-bezier(.22,.9,.3,1), border-color .25s ease, box-shadow .25s ease; animation: up .45s ease backwards; }
.door.d-hb { --zc: #e0b25a; animation-delay: .08s; }
.door:hover, .door:focus-visible { outline: none; border-color: var(--zc); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 32px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 30px color-mix(in srgb, var(--zc) 18%, transparent); }
.door:active { transform: translateY(0); }
.door .door-tex { opacity: .8; }
.door-ico { position: relative; width: 84px; height: 84px; color: var(--zc); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--zc) 30%, transparent)); transition: transform .35s cubic-bezier(.22,.9,.3,1); }
.door:hover .door-ico { transform: translateY(-3px) rotate(-3deg); }
.door-t { position: relative; display: grid; align-content: start; gap: 6px; }
.door-t small { font: 400 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--zc); }
.door-t b { font: 400 32px/1.1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); }
.door-n { font: 400 13px var(--mono); letter-spacing: .12em; color: var(--dim); }
.door-t > span:last-child { font: 300 16px/1.5 var(--ui); max-width: 40ch; }
.door-go { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font: 400 14px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #0c0f10; background: var(--zc); }
.door-go i { font-style: normal; transition: transform .25s ease; }
.door:hover .door-go i { transform: translateX(5px); }
@media (max-width: 700px) { .doors { grid-template-columns: 1fr; gap: 12px; } .door { min-height: 0; padding: 18px; gap: 12px; } .door-ico { width: 56px; height: 56px; } .door-t b { font-size: 24px; } }
.no-motion .door, .no-motion .door-ico, .no-motion .door-go i { animation: none; transition: none; }
/* Docs on phones: nothing wider than the screen */
.cab > * { min-width: 0; }
@media (max-width: 700px) { .cab-q kbd { display: none; } }
/* Options: buttons stay on one line */
.orow .btn { white-space: nowrap; flex: none; }
/* Wide tables in documents scroll inside the page instead of pushing it wider */
.ds-body table, .sh-body table { display: block; max-width: 100%; overflow-x: auto; }
@media (min-width: 701px) { .ds-body table, .sh-body table { display: table; } }
/* The profile keycard on phones uses the compact card layout */
@media (max-width: 700px) {
  .hk.big { padding: 12px 12px 10px; }
  .hk.big .hk-lv { font-size: 52px; }
  .hk.big .hk-who { padding-left: 44px; }
  .hk.big .hk-who b { font-size: 18px; }
  .hk.big .hk-meta { font-size: 11.5px; gap: 3px 10px; }
  .hk.big .k-since { display: none; }
}
/* The roadmap HUD scales with the stage, so it never crowds the platforms on smaller screens */
.mb-stage:not(.narrow) { container-type: inline-size; }
.mb-stage:not(.narrow) .mb-hudtl b { font-size: 3cqw; }
.mb-stage:not(.narrow) .mb-hudtl small, .mb-stage:not(.narrow) .mb-hudtl .kicker { font-size: 10px; font-size: max(10px, .95cqw); }
.mb-stage:not(.narrow) .mb-key { font-size: 9.5px; font-size: max(9.5px, .85cqw); gap: 4px 1.2cqw; }
.mb-stage:not(.narrow) .mb-hudtl { top: 1.2cqw; }
/* ---------------- Ready, then reveal (20b-ready.js) ---------------- */
html.booting .center, html.booting .bar { opacity: 0; }
.center, .bar { transition: opacity .5s ease; }
#view #vb { transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
#view.vw-wait #vb { opacity: 0; transform: translate3d(0, 8px, 0); }
#view.vw-ready #vb { opacity: 1; transform: none; }
#view.vw-wait .vh { position: relative; }
#view.vw-wait .vh::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 30%; background: linear-gradient(90deg, transparent, var(--jo), transparent); animation: vwLoad 1.1s ease-in-out infinite; }
@keyframes vwLoad { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.no-motion #view #vb, .no-motion .center, .no-motion .bar { transition: none; }
.no-motion #view.vw-wait .vh::after { animation: none; width: 100%; opacity: .4; }
/* ---------------- Sign-in and profile (19e-signin.js) ---------------- */
.si-badge:hover, .si-badge:focus-visible { border-color: var(--jo); color: var(--hot); outline: none; }

.si-intro h3 { margin: 0 0 8px; font: 300 24px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.si-intro p { margin: 0 0 12px; color: var(--fg-2); }
.si-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.si-area { border: 1px solid var(--line); border-top: 3px solid var(--hk); background: rgba(10,13,15,.6); padding: 12px 14px; }
.si-area header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.si-area header b { font: 400 15px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.si-area header span { font: 400 12px var(--mono); color: var(--hk); letter-spacing: .1em; }
.si-area.locked { opacity: .55; border-top-style: dashed; }
.si-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.si-list button { width: 100%; text-align: left; padding: 7px 9px; background: none; border: 1px solid transparent; color: var(--fg); cursor: pointer; font: 400 15px/1.3 var(--ui); transition: border-color .2s ease, background .2s ease; }
.si-list button:hover, .si-list button:focus-visible { border-color: var(--hk); background: rgba(255,255,255,.03); outline: none; }
.si-list small { display: block; font: 400 11.5px var(--mono); color: var(--dim); }
.si-reader { margin-top: 10px; }
/* Keycard: the holder's picture beside the name (no chip); no notch on the edge */
.hk::after { display: none; }
.hk-photo { position: absolute; z-index: 1; left: 22px; top: 48px; width: 54px; height: 54px; padding: 2px; border: 1px solid var(--hk); background: #0c0f10; box-shadow: 0 0 14px color-mix(in srgb, var(--hk) 30%, transparent); }
.hk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.hk:not(.has-photo) .hk-who { padding-left: 0; }
.hk.has-photo .hk-who { padding-left: 74px; }
.hk.big .hk-photo { left: 30px; top: 62px; width: 84px; height: 84px; }
.hk.big.has-photo .hk-who { padding-left: 110px; }
@media (max-width: 700px) { .hk.big .hk-photo { left: 22px; top: 46px; width: 54px; height: 54px; } .hk.big.has-photo .hk-who { padding-left: 74px; } }
.mb-comms rect { fill: #3d4a4f; stroke: #9fc4cf; stroke-width: 1; } .mb-comms line { stroke: #9fc4cf; stroke-width: 2.4; stroke-linecap: round; } .mb-comms circle { fill: #cfe6ec; }
.mb-gull path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .mb-gull .gb { stroke: #eef3f4; stroke-width: 2; } .mb-gull .gs { stroke: rgba(0,0,0,.28); stroke-width: 1.4; }

/* ---- Library: drawers that slide, folders that lift, a search that filters the folders (v0.0.25) ---- */
.drawer { transition: border-color .25s, transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s; }
/* An open drawer keeps exactly the same frame as the closed ones (layout stability); its colour edge is drawn inside */
.drawer.open { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #080b0c, inset 4px 0 0 color-mix(in srgb, var(--g) 70%, transparent); }
.dr-head:hover .dr-handle { animation: drTug .5s cubic-bezier(.22,.9,.3,1); }
@keyframes drTug { 40% { transform: translateX(4px); } }
.cab-drawers.first .drawer { animation: drIn .5s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--d, 0) * 45ms); }
@keyframes drIn { from { opacity: 0; transform: translateX(-14px); } }
.fold { transition: transform .38s cubic-bezier(.22,.9,.3,1), filter .38s ease, box-shadow .38s ease; }
.fold .f-tab { transition: transform .32s cubic-bezier(.22,.9,.3,1), background-color .3s; }
.fold:hover, .fold:focus-visible { transform: translate3d(0,-6px,0) rotate(-1.2deg); }
.fold:hover .f-tab, .fold.on .f-tab { transform: translateY(-3px); }
.fold.on { background: linear-gradient(170deg, #ecd6a2, #d6bb84); }
.fold.on::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 2px; background: var(--g); animation: draw .4s cubic-bezier(.22,.9,.3,1); transform-origin: left; }
.fold mark, .cab-count mark { background: rgba(242,140,40,.38); color: inherit; padding: 0 1px; }
.fold .f-in { position: absolute; right: 5px; bottom: 4px; padding: 1px 4px; border: 1px solid rgba(60,40,10,.45); font: 400 8.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #5a4520; transform: rotate(-4deg); }
.cab.searching .fold.hit { animation: foldHit .42s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--k) * 28ms); }
@keyframes foldHit { from { opacity: 0; transform: translate3d(0,10px,0) scale(.94); filter: brightness(1.5); } }
.fold.sel { outline: 2px dashed var(--jo); outline-offset: 3px; transform: translate3d(0,-6px,0); }
.cab-q { position: relative; overflow: hidden; }
.cab-scan { position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--jo), transparent); opacity: 0; transform: translateX(-100%); }
.cab-q:focus-within .cab-scan { opacity: .55; animation: scan 2.4s ease-in-out infinite; }
.cab.indexing .cab-scan { opacity: 1; animation-duration: .9s; }
@keyframes scan { to { transform: translateX(260%); } }
.cab-count { min-height: 0; margin: -4px 0 10px; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); }
.cab-count:empty { display: none; }
.cab-count .n { color: var(--hot); animation: ledOn .35s ease; }
.cab-count .cab-keys { float: right; opacity: .75; }
.cab-wait { animation: softPulse 1.2s ease-in-out infinite; }
.cab-none { padding: 22px 18px; border: 1px dashed var(--line); color: var(--fg-2); font: 300 15px/1.45 var(--ui); animation: riseIn .4s cubic-bezier(.22,.9,.3,1); }
.cab-none b { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border: 2px solid #c0392b; color: #e0453f; font: 400 12px/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; transform: rotate(-3deg); animation: stampIn .35s cubic-bezier(.3,1.6,.5,1) .1s backwards; }
.cab-none b + * { display: block; }
.cab-none small { display: block; margin-top: 6px; color: var(--dim); font-size: 13px; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-3deg) scale(1.8); } }
/* The page slides out of its folder, then the text settles */
.dossier.in .ds-tab { animation: dsTab .4s cubic-bezier(.22,.9,.3,1) both; }
.dossier.in .ds-folder { animation: dsIn .45s cubic-bezier(.2,.8,.2,1) .05s both; }
.dossier.in .ds-page { animation: dsPage .6s cubic-bezier(.2,.8,.2,1) .15s both; }
.dossier.in .ds-clip { animation: dsClip .35s cubic-bezier(.3,1.5,.5,1) .55s both; }
.dossier.in .ds-body > * { animation: up .45s ease both; }
.dossier.in .ds-body > :nth-child(1) { animation-delay: .35s; } .dossier.in .ds-body > :nth-child(2) { animation-delay: .4s; } .dossier.in .ds-body > :nth-child(3) { animation-delay: .45s; } .dossier.in .ds-body > :nth-child(4) { animation-delay: .5s; } .dossier.in .ds-body > :nth-child(n+5) { animation-delay: .55s; }
@keyframes dsTab { from { opacity: 0; transform: translateY(10px); } }
@keyframes dsPage { from { opacity: 0; transform: translate(-22px, 26px) rotate(-1.4deg); } }
@keyframes dsClip { from { opacity: 0; transform: translateY(-14px) rotate(-12deg); } }
.ds-meta a, .ds-meta .ds-link { transition: color .2s, text-underline-offset .2s; }
.ds-meta a:hover, .ds-meta .ds-link:hover { text-underline-offset: 5px; color: #111; }
/* Zone cards: a light sweep on hover */
.zone { overflow: hidden; }
.zone::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.22,.9,.3,1); pointer-events: none; }
.zone:hover::before { left: 120%; }
.zone .z-ico { transition: transform .35s cubic-bezier(.22,.9,.3,1); }
.zone:not(.on):hover .z-ico { transform: translateY(-2px) rotate(-4deg); }
.no-motion .drawer, .no-motion .dr-body, .no-motion .dr-files, .no-motion .cab-drawers.first .drawer, .no-motion .drawer.opening .fold, .no-motion .cab.searching .fold.hit, .no-motion .dossier.in .ds-page, .no-motion .dossier.in .ds-clip, .no-motion .dossier.in .ds-body > *, .no-motion .cab-scan, .no-motion .cab-none, .no-motion .cab-none b, .no-motion .zone::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .dossier.in .ds-body > *, .dossier.in .ds-page, .cab-drawers.first .drawer, .cab.searching .fold.hit { animation: none; } }
/* Data on paper: the page keeps its size, wide tables scroll inside it with shadows at the cut edges */
.dossier, .ds-folder, .ds-page, .ds-body { min-width: 0; max-width: 100%; }
.dossier .ds-body .tw { position: relative; max-width: 100%; margin: 0 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  background: linear-gradient(90deg, #f8f5ed 30%, rgba(248,245,237,0)) left / 40px 100% no-repeat local, linear-gradient(270deg, #f8f5ed 30%, rgba(248,245,237,0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), transparent) right / 12px 100% no-repeat scroll; }
.dossier .ds-body .tw table { display: table; width: 100%; margin: 0; font-size: 13.5px; }
.dossier .ds-body td, .dossier .ds-body th { min-width: 4.5em; }
.dossier .ds-body td:first-child { white-space: nowrap; }
.dossier .ds-body p, .dossier .ds-body li { overflow-wrap: break-word; }
.dossier .ds-body img, .dossier .ds-body svg, .dossier .ds-body video { max-width: 100%; height: auto; }
.dossier .ds-body pre { max-width: 100%; overflow-x: auto; }
.mb-buoy .bb { stroke: rgba(0,0,0,.45); stroke-width: 1; } .mb-buoy.red .bb { fill: #c8473d; } .mb-buoy.grn .bb { fill: #3f9a5c; } .mb-buoy .bl { fill: #fff6d8; } .mb-buoy.red .bl { fill: #ffb3a6; } .mb-buoy.grn .bl { fill: #c9ffd8; } .mb-buoy .bw { fill: none; stroke: rgba(220,240,245,.6); stroke-width: 1; }
/* Handbook filter (v0.0.25) */
.hb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 12px; }
.hb-tools .cab-q { flex: 1 1 320px; max-width: 520px; margin: 0; }
.hb-tools .tabs { margin: 0; }
.hb-q.busy .cab-scan { opacity: 1; animation: scan .9s ease-in-out infinite; }
#hbList.filtering .mini { animation: foldHit .4s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.mini mark { background: rgba(242,140,40,.35); color: inherit; padding: 0 1px; }
.no-motion #hbList.filtering .mini, .no-motion .hb-q .cab-scan { animation: none !important; }
/* Profile: access granted and access restricted (v0.0.26) */
.ax { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 8px; align-items: start; }
.ax-col { border: 1px solid var(--line); background: rgba(10,13,15,.6); padding: 0 0 6px; }
.ax-head { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ax-head b { font: 400 16px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.ax-head small { grid-column: 2; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--dim); }
.ax-ico { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.ax-ok .ax-head { color: #7fbf8a; background: linear-gradient(90deg, rgba(127,191,138,.1), transparent 70%); }
.ax-no .ax-head { color: #e0453f; background: linear-gradient(90deg, rgba(224,69,63,.09), transparent 70%); }
.ax-head b, .ax-head small { color: inherit; } .ax-head small { color: var(--dim); }
.ax-ok .ax-ico::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ax-no .ax-ico::after { content: ""; position: absolute; left: 4px; right: 4px; top: 10px; height: 2px; background: currentColor; }
.ax-lv { padding: 10px 16px 6px; border-left: 3px solid var(--hk); margin: 10px 12px 0; background: rgba(255,255,255,.015); animation: up .4s ease backwards; animation-delay: calc(var(--n) * 60ms); }
.ax-lv header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.ax-lv header i { font: 400 12px var(--mono); font-style: normal; padding: 1px 6px; background: var(--hk); color: #0c0f10; letter-spacing: .08em; }
.ax-lv header b { font: 400 13px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hk); }
.ax-lv header small { margin-left: auto; font: 400 11px var(--mono); letter-spacing: .1em; color: var(--dim); }
.ax-lv > ul { list-style: none; margin: 0; padding: 0; }
.ax-lv > ul > li { position: relative; padding: 5px 0 5px 20px; font: 400 15px/1.35 var(--ui); color: var(--fg); }
.ax-ok .ax-lv > ul > li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 4px; height: 8px; border: solid #7fbf8a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ax-no .ax-lv { opacity: .62; border-left-style: dashed; }
.ax-no .ax-lv > ul > li { color: var(--fg-2); }
.ax-no .ax-lv > ul > li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 9px; height: 7px; border: 1.5px solid var(--dim); border-radius: 1px; }
.ax-no .ax-lv > ul > li::after { content: ""; position: absolute; left: 3px; top: 4px; width: 5px; height: 5px; border: 1.5px solid var(--dim); border-bottom: 0; border-radius: 4px 4px 0 0; }
.ax-s { margin-left: 8px; padding: 0 5px; border: 1px solid var(--line); font: 400 10.5px/1.6 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.ax-doc .ax-t { color: var(--hk); }
.ax-doc .si-list { margin: 6px 0 4px; }
.ax-how { margin: 12px 16px 8px; font: 300 14px/1.5 var(--ui); color: var(--fg-2); }
.ax-note { margin-top: 6px; }
@media (max-width: 860px) { .ax { grid-template-columns: 1fr; } }
/* Keycard: a slightly larger photo with frame corners, and a light sweep across the card */
.hk-photo { width: 62px; height: 62px; }
.hk.has-photo .hk-who { padding-left: 82px; }
.hk.big .hk-photo { width: 100px; height: 100px; top: 58px; }
.hk.big.has-photo .hk-who { padding-left: 124px; }
.hk-photo::before, .hk-photo::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--hk); pointer-events: none; }
.hk-photo::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.hk-photo::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.hk { overflow: hidden; }
.hk .hk-band::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07) 45%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.07) 55%, transparent); transform: skewX(-16deg); pointer-events: none; }
.hk.big .hk-band::after { animation: hkSheen 1.4s cubic-bezier(.22,.9,.3,1) .4s both; }
.hk:hover .hk-band::after { animation: hkSheen 1.1s cubic-bezier(.22,.9,.3,1) both; }
@keyframes hkSheen { from { left: -60%; } to { left: 140%; } }
.hk.big { box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--hk) 35%, transparent), inset 0 0 40px color-mix(in srgb, var(--hk) 6%, transparent); }
.no-motion .hk .hk-band::after, .no-motion .ax-lv { animation: none !important; }
@media (max-width: 700px) { .hk.big .hk-photo { width: 66px; height: 66px; top: 46px; left: 22px; } .hk.big.has-photo .hk-who { padding-left: 84px; } }
.ax-doc .si-list li { padding: 0; } .ax-doc .si-list button { padding: 5px 8px; font-size: 14px; border-left: 2px solid color-mix(in srgb, var(--hk) 40%, transparent); }
.mb-padl { fill: #ffd27a; filter: drop-shadow(0 0 3px rgba(255,190,90,.9)); transition: opacity .12s; }
@media (max-width: 700px) { .hk.big.has-photo .hk-who { padding-left: 98px; } }
/* Library clearances (v0.0.26): a clearance line above every document, locked drawers, access denied */
.clr { --hk: #8b9599; display: flex; align-items: center; gap: 12px; margin: 0 0 12px 28px; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 4px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); font: 400 12.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; width: max-content; max-width: calc(100% - 28px); animation: clrIn .45s cubic-bezier(.22,.9,.3,1) both; }
.clr.ok { --c: #7fbf8a; } .clr.no { --c: #e0453f; }
.clr b { color: var(--c); font-weight: 400; }
.clr span { color: var(--fg-2); letter-spacing: .14em; }
.clr i { width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 8px var(--c); animation: blink 1.6s ease-in-out 2; }
@keyframes clrIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.dossier.k-restricted .ds-page { background: linear-gradient(90deg, transparent 54px, rgba(176,42,34,.35) 54px, rgba(176,42,34,.35) 55px, transparent 55px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(176,42,34,.035) 22px 24px), #f6f1e7; }
.dossier.k-restricted .ds-head { border-bottom-color: #a3352b; } .dossier.k-restricted .ds-class { color: #a3352b; }
.drawer.rx .dr-head b { border-left-color: var(--g); }
.dr-lv { margin-left: 2px; padding: 1px 6px; border: 1px solid var(--g); color: var(--g); font: 400 11px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.drawer.rlock { opacity: .7; } .drawer.rlock .dr-handle { border-style: dashed; }
.fold.locked { filter: grayscale(1) brightness(.75); background: repeating-linear-gradient(-45deg, #c9c5ba 0 8px, #bdb8ac 8px 16px); }
.fold.locked .f-t::before { content: "\1F512\FE0E  "; font-size: 11px; }
.dossier.is-denied .ds-tab { background: linear-gradient(#a3a39e, #9a9a95); color: #3a3a38; border-top-color: #7a7a76; }
.dossier.is-denied .ds-folder { background: linear-gradient(135deg, #9b9b96, #85857f); }
.dossier.is-denied .ds-folder::before { background: #d3d3cf; }
.dossier.is-denied .ds-page { background: repeating-linear-gradient(transparent 0 27px, rgba(0,0,0,.05) 27px 28px), #e6e6e3; }
.dossier.is-denied .ds-head { filter: grayscale(1); opacity: .6; }
.dossier.is-denied .ds-clip, .dossier.is-denied .ds-holes { filter: grayscale(1); }
.dossier.is-denied .ds-page { min-height: 620px; overflow: hidden; }
.ad-draft { margin-top: 30px; filter: blur(2.5px); opacity: .55; user-select: none; }
.ad-draft b { display: block; width: 58%; height: 26px; margin-bottom: 26px; background: #9aa0a2; }
.ad-draft span { display: block; height: 10px; margin: 0 0 16px; background: #b4b8b9; }
.ad { position: absolute; top: 90px; right: 30px; bottom: 30px; left: 30px; display: grid; place-items: center; }
.ad-box { position: relative; width: 460px; width: min(460px, 100%); padding: 26px 28px 22px; text-align: center; background: rgba(8,10,11,.92); border: 2px solid #e0453f; box-shadow: 0 0 0 4px rgba(8,10,11,.92), 0 0 0 5px rgba(224,69,63,.5), 0 20px 60px rgba(0,0,0,.6); color: #f3d6d4; font: 400 13px/1.5 var(--mono); filter: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); animation: adIn .5s cubic-bezier(.22,.9,.3,1) .25s both; }
.ad-box small { display: block; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: #e0453f; }
.ad-box strong { display: block; margin: 6px 0 10px; font: 400 34px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ff5a4f; text-shadow: 0 0 14px rgba(255,70,60,.55); animation: glSplit 2.6s steps(2) 1s infinite; }
.ad-box em { display: block; font-style: normal; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ad-box p { margin: 8px 0 14px; color: #c9a9a6; letter-spacing: .06em; }
.ad-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@keyframes adIn { from { opacity: 0; transform: scale(1.06); filter: brightness(2); } }
.no-motion .clr, .no-motion .clr i, .no-motion .ad-box, .no-motion .ad-box strong { animation: none !important; }
@media (max-width: 700px) { .clr { margin-left: 12px; letter-spacing: .12em; font-size: 11px; } .ad { top: 70px; right: 10px; bottom: 20px; left: 10px; } .ad-box strong { font-size: 24px; } }
/* About, modernized (v0.0.26): hero with a live session diagram, stat strip, step cards, handbook links, FAQ grid */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .9fr); gap: 30px; align-items: center; padding: 6px 0 10px; }
.ab-kick { display: inline-block; margin-bottom: 14px; padding: 3px 10px; border: 1px solid var(--line); font: 400 11.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ab-hero .bf-head { max-width: none; }
.ab-vis { position: relative; }
.ab-vis::before { content: ""; position: absolute; top: 8%; right: 8%; bottom: 8%; left: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(242,140,40,.14), transparent 65%); filter: blur(10px); }
.ab-net { position: relative; display: block; width: 100%; max-width: 420px; margin: 0 auto; overflow: visible; }
.ab-ring { fill: none; stroke: rgba(255,255,255,.07); stroke-dasharray: 2 6; }
.ab-ring + .ab-ring { animation: abSpin 60s linear infinite; transform-origin: 180px 180px; }
.ab-link { stroke: rgba(242,140,40,.22); stroke-width: 1; stroke-dasharray: 3 5; animation: dash 1.6s linear infinite; animation-delay: calc(var(--k) * -110ms); }
.ab-pkt { fill: #ffd27a; filter: drop-shadow(0 0 4px rgba(255,190,90,.9)); animation: abPkt 2.4s cubic-bezier(.4,0,.6,1) infinite; animation-delay: calc(var(--k) * 160ms); }
@keyframes abPkt { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)); opacity: 0; } }
.ab-cl circle { fill: #11171a; stroke: #7fa8b8; stroke-width: 1.2; } .ab-cl .d { fill: #cfe6ec; stroke: none; }
.ab-cl { animation: abPop .5s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(.3s + var(--k) * 50ms); }
@keyframes abPop { from { opacity: 0; transform-box: fill-box; } }
.ab-host circle { fill: #1a1408; stroke: var(--jo); stroke-width: 2; }
.ab-host .p { fill: none; stroke: rgba(242,140,40,.45); stroke-width: 1; animation: abPulse 2.4s ease-out infinite; transform-origin: 0 0; }
.ab-host path { fill: var(--jo); }
.ab-host text { fill: var(--hot); font: 400 11px var(--mono); letter-spacing: .3em; text-anchor: middle; }
@keyframes abPulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes abSpin { to { transform: rotate(360deg); } }
.bf-sec.in .tri-b { animation: riseIn .5s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--k) * 90ms); }
.no-motion .ab-link, .no-motion .ab-pkt, .no-motion .ab-cl, .no-motion .ab-host .p, .no-motion .ab-ring, .no-motion .bf-sec.in .tri-b, .no-motion .tri-lines path { animation: none !important; }
.no-motion .ab-pkt { display: none; }
@media (max-width: 760px) { .ab-hero { grid-template-columns: 1fr; } .ab-vis { order: -1; max-width: 240px; margin: 0 auto; } }
.hb-clr { margin-left: 0; }
/* New version announcement: a slim strip that slides into the top bar, centered (v0.0.29) */
.up-note { position: fixed; z-index: 60; top: 11px; left: 50%; display: flex; align-items: center; gap: 12px; height: 32px; max-width: calc(100vw - 24px); padding: 0 4px 0 12px; transform: translateX(-50%); border: 1px solid rgba(242,140,40,.6); background: rgba(10,13,15,.96); box-shadow: 0 6px 18px rgba(0,0,0,.45); font: 400 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; animation: upIn .45s cubic-bezier(.22,.9,.3,1) both; }
.up-note.out { animation: upOut .3s ease both; }
.up-note .up-spin { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--jo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(242,140,40,.7)); animation: upSpin 2s linear infinite; }
@keyframes upSpin { to { transform: rotate(-360deg); } }
.up-note b { font-weight: 400; color: var(--hot); }
.up-note span { color: var(--fg-2); letter-spacing: .1em; }
.up-go { height: 24px; padding: 0 12px; border: 0; background: var(--jo); color: #120c04; font: inherit; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.up-go:hover, .up-go:focus-visible { background: var(--hot); outline: none; }
.up-x { width: 24px; height: 24px; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 12px; } .up-x:hover { color: var(--fg); }
@keyframes upIn { from { opacity: 0; transform: translate(-50%, -40px); } }
@keyframes upOut { to { opacity: 0; transform: translate(-50%, -40px); } }
.no-motion .up-note, .no-motion .up-note .up-spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .up-note .up-spin { animation: none; } }
@media (max-width: 700px) { .up-note { top: auto; bottom: 12px; } .up-note span { display: none; } }
/* Guest passes (v0.0.27) */
.gp { margin: 22px 0 0; border: 1px solid rgba(212,174,82,.45); background: linear-gradient(110deg, rgba(212,174,82,.08), rgba(10,13,15,.6) 55%); }
.gp header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.gp header > div { flex: 1 1 260px; }
.gp header b { display: block; font: 400 15px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #d4ae52; }
.gp header small { display: block; margin-top: 4px; font: 300 14px/1.4 var(--ui); color: var(--fg-2); }
.gp-ico { width: 34px; height: 24px; border: 2px solid #d4ae52; border-radius: 3px; position: relative; }
.gp-ico::after { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 3px; background: #d4ae52; box-shadow: 0 6px 0 rgba(212,174,82,.5); }
.gp #gpMsg { margin: 0 16px 8px; }
.gp-list { list-style: none; margin: 0; padding: 0 16px 12px; display: grid; gap: 6px; }
.gp-list:empty { display: none; }
.gp-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed rgba(212,174,82,.35); animation: up .35s ease both; }
.gp-list code { font: 400 13px var(--mono); color: #d4ae52; }
.gp-list span { flex: 1; font: 400 12.5px var(--mono); color: var(--dim); letter-spacing: .06em; }
.hk-guest { position: absolute; right: -40px; bottom: 30px; z-index: 2; width: 170px; padding: 3px 0; transform: rotate(-35deg); text-align: center; background: repeating-linear-gradient(-45deg, #d4ae52 0 10px, #b8923a 10px 20px); color: #1a1408; font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hk.big .hk-guest { right: -46px; bottom: 40px; width: 210px; font-size: 11px; }
.si-badge.guest { --hk: #d4ae52 !important; }
/* Top-bar access credential */
.si-badge { --hk: var(--jo); position: relative; display: inline-flex; align-items: center; gap: 9px; height: 34px; cursor: default; padding: 0 0 0 7px; color: var(--fg); text-decoration: none; border: 1px solid color-mix(in srgb, var(--hk) 45%, var(--line)); border-left: 3px solid var(--hk);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hk) 9%, transparent) 0 1px, transparent 1px 6px), linear-gradient(90deg, color-mix(in srgb, var(--hk) 16%, rgba(10,13,15,.9)), rgba(10,13,15,.9) 70%);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); transition: border-color .25s, box-shadow .25s, filter .25s; }
.si-badge .sb-pic { flex: none; width: 24px; height: 24px; border: 1px solid var(--hk); background: #0c0f10; overflow: hidden; display: grid; place-items: center; }
.si-badge .sb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.si-badge .sb-pic.id { width: auto; padding: 0 5px; font: 400 11px/1 var(--mono); letter-spacing: .12em; color: var(--jo); }
.si-badge .sb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-badge .sb-txt b { font: 400 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-badge .sb-txt small { font: 400 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--hk) 75%, #fff); white-space: nowrap; }
.si-badge .sb-lv { display: flex; align-items: baseline; gap: 2px; height: 100%; padding: 0 12px 0 10px; border-left: 1px solid color-mix(in srgb, var(--hk) 35%, transparent); background: color-mix(in srgb, var(--hk) 22%, transparent); font: 300 24px/32px var(--ui); color: var(--hk); text-shadow: 0 0 10px color-mix(in srgb, var(--hk) 60%, transparent); }
.si-badge .sb-lv small { font: 400 9px/1 var(--mono); letter-spacing: .12em; color: color-mix(in srgb, var(--hk) 70%, #fff); }
.si-badge:not(.in) { padding-right: 12px; }
@media (max-width: 700px) { .si-badge .sb-txt small { display: none; } .si-badge .sb-txt b { max-width: 80px; } }
.gp-bad { position: static; display: grid; place-items: center; padding: 40px 0; }
.mb-sock line { stroke: #9fb1b6; stroke-width: 1.4; } .mb-sock path { fill: #f28c28; stroke: #fff2e0; stroke-width: .6; }
/* Search by name or content (v0.0.27) */
.sm { display: flex; align-items: center; gap: 0; margin: -4px 0 12px; font: 400 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sm span { margin-right: 10px; color: var(--dim); }
.sm button { padding: 5px 12px; border: 1px solid var(--line); background: rgba(10,13,15,.6); color: var(--fg-2); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sm button + button { border-left: 0; }
.sm button[aria-pressed="true"] { background: var(--jo); border-color: var(--jo); color: #120c04; }
.sm button:hover:not([aria-pressed="true"]) { color: var(--fg); border-color: var(--dim); }
.hb-tools .sm { margin: 0; }
/* One keycard identity per clearance (v0.0.28) */
.hk { isolation: isolate; }
.hk-pat { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hk-n { font-weight: inherit; }
.hk-meta em { font-style: normal; }
.hk-v.scr { color: color-mix(in srgb, var(--hk) 70%, #fff); }
/* LV1 Visitor: plain grey day ticket with punched edges */
.hk.hk-l1 { background: linear-gradient(135deg, #22292c, #15191b); }
.hk-l1 .hk-pat { background: radial-gradient(circle at 100% 50%, var(--bg) 9px, transparent 10px); }
/* LV2 Member: brushed silver */
.hk.hk-l2 { background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(135deg, #2a3236, #14191b); }
.hk-l2 .hk-pat { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%); }
/* LV3 Contractor: green hex network */
.hk.hk-l3 { background: linear-gradient(135deg, #16241a, #0c130e); }
.hk-l3 .hk-pat { background: radial-gradient(circle, rgba(127,191,138,.22) 1.4px, transparent 1.6px) 0 0 / 18px 31px, radial-gradient(circle, rgba(127,191,138,.22) 1.4px, transparent 1.6px) 9px 15.5px / 18px 31px; }
/* LV4 Quality: blue inspection grid with a QA seal */
.hk.hk-l4 { background: linear-gradient(135deg, #13202a, #0a1218); }
.hk-l4 .hk-pat { background: linear-gradient(rgba(90,167,214,.1) 1px, transparent 1px) 0 0 / 100% 12px, linear-gradient(90deg, rgba(90,167,214,.1) 1px, transparent 1px) 0 0 / 12px 100%; }
.hk-seal { position: absolute; right: 20px; bottom: 34px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--hk); display: grid; place-items: center; font: 400 10px var(--mono); letter-spacing: .1em; color: var(--hk); transform: rotate(-12deg); opacity: .85; }
.hk.big .hk-seal { width: 54px; height: 54px; font-size: 12px; right: 28px; bottom: 46px; }
/* LV5 Development: orange circuit traces */
.hk.hk-l5 { background: linear-gradient(135deg, #24180c, #120c06); }
.hk-l5 .hk-pat { background: linear-gradient(90deg, transparent 49%, rgba(242,140,40,.16) 49% 51%, transparent 51%) 0 0 / 46px 46px, linear-gradient(transparent 49%, rgba(242,140,40,.11) 49% 51%, transparent 51%) 0 23px / 46px 46px, radial-gradient(circle, rgba(242,140,40,.32) 2px, transparent 2.5px) 23px 23px / 46px 46px; }
/* LV6 Administration: red, hazard edge, embossed frame */
.hk.hk-l6 { background: linear-gradient(135deg, #26100f, #130807); box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(224,69,63,.22), inset 0 0 0 4px rgba(0,0,0,.6); }
.hk.hk-l6::before { background: repeating-linear-gradient(-45deg, var(--hk) 0 6px, #2a0c0b 6px 12px); }
/* LV7 Owner: black and gold guilloche with a foil sheen */
.hk.hk-l7 { background: linear-gradient(135deg, #16130b, #070605); border-color: #8a7032; }
.hk-l7 .hk-pat { background: repeating-radial-gradient(circle at 80% 120%, transparent 0 7px, rgba(212,174,82,.09) 7px 8px), repeating-radial-gradient(circle at 10% -20%, transparent 0 9px, rgba(212,174,82,.07) 9px 10px); }
.hk-l7 .hk-pat::after { content: ""; position: absolute; top: -40%; right: -40%; bottom: -40%; left: -40%; background: linear-gradient(110deg, transparent 40%, rgba(255,230,160,.16) 50%, transparent 60%); animation: hkFoil 6s ease-in-out infinite; }
@keyframes hkFoil { 0%, 30% { transform: translateX(-60%); } 70%, 100% { transform: translateX(60%); } }
/* Sign-in reveal: the card rises and fades in from below while its credentials decrypt */
.hk.hk-reveal { animation: hkRise .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hkRise { from { opacity: 0; transform: translateY(46px); filter: brightness(1.6); } 60% { filter: none; } }
.no-motion .hk-l7 .hk-pat::after, .no-motion .hk.hk-reveal { animation: none; }
@media (prefers-reduced-motion: reduce) { .hk-l7 .hk-pat::after, .hk.hk-reveal { animation: none; } }
.ax-col > .sub { margin: 12px 16px; }
/* Long text keeps a comfortable reading width inside the shared frame */
#vb > p.sub, .bf-lead, .faq p { max-width: 78ch; }
/* Handbook folders (v0.0.29): one kraft folder per type; the open one lays its sheets out below */
.hb-pick { margin: 6px 0 28px; text-align: center; font: 400 12.5px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); animation: fade .4s .25s both; }
.no-motion .hb-pick { animation: none; }
.hb-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 26px; }
.hbf { --f: #c9a24a; position: relative; display: block; min-height: 118px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: #2a2418; animation: riseIn .45s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--k) * 70ms); }
.hbf.t-policy { --f: #c4463c; } .hbf.t-procedure { --f: #3f8fa8; }
.hbf-tab { position: absolute; left: 14px; top: 0; z-index: 3; padding: 5px 14px 4px; border-radius: 6px 6px 0 0; background: linear-gradient(#d9bf86, #cdb176); border-top: 4px solid var(--f); font: 400 12px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #3b2f17; }
.hbf-body { position: absolute; left: 0; right: 0; top: 24px; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 0 8px 8px 8px; background: linear-gradient(170deg, #d9bf86, #c3a66b); box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.1); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.22,.9,.3,1), box-shadow .3s; }
.hbf-body b { font: 200 44px/1 var(--ui); color: color-mix(in srgb, var(--f) 75%, #2a2418); }
.hbf-body small { font: 400 14px/1.35 var(--ui); color: #4a3e26; }
.hbf-papers { position: absolute; left: 18px; right: 18px; top: 18px; height: 40px; z-index: 1; }
.hbf-papers i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #f1ece0; border-top: 3px solid var(--f); box-shadow: 0 -1px 3px rgba(0,0,0,.2); transition: transform .45s cubic-bezier(.22,.9,.3,1); }
.hbf-papers i:nth-child(2) { left: 10px; right: 6px; } .hbf-papers i:nth-child(3) { left: 4px; right: 14px; }
.hbf:hover .hbf-body, .hbf:focus-visible .hbf-body { transform: translateY(3px); }
.hbf:hover .hbf-papers i:nth-child(1) { transform: translateY(-6px); }
.hbf:focus-visible { outline: 2px solid var(--f); outline-offset: 4px; }
.hbf.open .hbf-body { transform: perspective(500px) rotateX(-14deg); box-shadow: 0 18px 30px rgba(0,0,0,.5), 0 0 0 2px var(--f); }
.hbf.open .hbf-papers i:nth-child(1) { transform: translateY(-14px) rotate(-2deg); } .hbf.open .hbf-papers i:nth-child(2) { transform: translateY(-10px) rotate(2deg); } .hbf.open .hbf-papers i:nth-child(3) { transform: translateY(-6px); }
.hbf.open::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 0; height: 0; border: 9px solid transparent; border-top-color: var(--f); transform: translateX(-50%); }
.hbf.empty { opacity: .4; cursor: default; filter: grayscale(.6); }
#hbList .sheets { margin-top: 4px; }
.no-motion .hbf, .no-motion .hbf-body, .no-motion .hbf-papers i { animation: none; transition: none; }
@media (max-width: 700px) { .hb-folders { grid-template-columns: 1fr; gap: 12px; } .hbf { min-height: 96px; } .hbf-body b { font-size: 34px; } }
/* Modal window (v0.0.29): centered, in the site's design */
.hm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.hm-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(4,6,7,.72); backdrop-filter: blur(3px); animation: fade .25s ease both; }
.hm-win { position: relative; width: 520px; width: min(520px, 100%); border: 1px solid var(--jo); border-top-width: 3px; background: linear-gradient(180deg, #141a1d, #0b0f10); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: hmIn .35s cubic-bezier(.2,.8,.2,1) both;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #141a1d, #0b0f10); }
.hm-win.hm-danger { border-color: #e0453f; }
.hm.out .hm-win { animation: hmOut .2s ease both; } .hm.out .hm-back { animation: fade .2s ease reverse both; }
@keyframes hmIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes hmOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.hm-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font: 400 11.5px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--jo); }
.hm-danger .hm-bar { color: #e0453f; }
.hm-x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; padding: 2px 4px; } .hm-x:hover { color: var(--fg); }
.hm-body { padding: 20px 22px 6px; }
.hm-body h3 { margin: 0 0 12px; font: 300 24px/1.2 var(--ui); letter-spacing: .04em; color: var(--fg); }
.hm-content p { margin: 0 0 10px; font: 300 16px/1.5 var(--ui); color: var(--fg-2); }
.hm-note { font-size: 14px !important; color: var(--dim) !important; }
.hm-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.hm-steps li { position: relative; padding-left: 40px; font: 300 15.5px/1.45 var(--ui); color: var(--fg-2); counter-increment: s; animation: up .4s ease backwards; }
.hm-steps li:nth-child(2) { animation-delay: .08s; } .hm-steps li:nth-child(3) { animation-delay: .16s; }
.hm-steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 1px; font: 400 12px var(--mono); letter-spacing: .1em; color: var(--jo); border: 1px solid rgba(242,140,40,.5); padding: 2px 5px; }
.hm-steps b { color: var(--fg); font-weight: 400; }
.hm-wait, .hm-ok, .hm-err { display: grid; justify-items: center; gap: 8px; padding: 18px 0 10px; text-align: center; }
.hm-wait b, .hm-ok b, .hm-err b { font: 400 14px var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.hm-ok b { color: #7fbf8a; text-shadow: 0 0 12px rgba(127,191,138,.5); } .hm-err b { color: #e0453f; }
.hm-wait small, .hm-ok small, .hm-err small { font: 300 14px/1.45 var(--ui); color: var(--dim); max-width: 36ch; }
.hm-act { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; }
.hm-act:empty { display: none; }
.btn.danger { border-color: #e0453f; color: #ff8a80; } .btn.danger:hover, .btn.danger:focus-visible { background: #e0453f; color: #140605; }
.no-motion .hm-back, .no-motion .hm-win, .no-motion .hm-steps li { animation: none; }
@media (max-width: 520px) { .hm-act { flex-direction: column-reverse; } .hm-act .btn { width: 100%; } }
/* Profile: the facts column and a clear sign-out button at its foot */
.kc-side { display: flex; flex-direction: column; align-self: stretch; min-height: 100%; }
.si-out { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 14px 18px; border: 1px solid rgba(224,69,63,.55); background: linear-gradient(90deg, rgba(224,69,63,.1), rgba(10,13,15,.6)); color: var(--fg); cursor: pointer; text-align: left; transition: background .25s, border-color .25s, transform .25s; }
.si-out span { display: block; font: 400 15px/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.si-out small { display: block; margin-top: 4px; font: 300 13.5px/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--dim); }
.si-out i { flex: none; position: relative; width: 26px; height: 26px; border: 2px solid #e0453f; border-radius: 50%; }
.si-out i::after { content: ""; position: absolute; left: 50%; top: -5px; width: 2px; height: 13px; margin-left: -1px; background: #e0453f; box-shadow: 0 0 0 3px #0f1416; }
.si-out:hover, .si-out:focus-visible { background: linear-gradient(90deg, rgba(224,69,63,.22), rgba(10,13,15,.6)); border-color: #e0453f; outline: none; transform: translateY(-1px); }
@media (max-width: 900px) { .si-out { margin-top: 16px; } }
.gp-list li.rv { opacity: .55; } .gp-list li.rv code { text-decoration: line-through; } .gp-list li.none span { color: var(--dim); }
.hm-lv0 { display: grid; justify-items: center; gap: 8px; padding: 10px 0; text-align: center; }
.hm-lv0 span { padding: 6px 14px; border: 2px solid #e0453f; font: 400 28px/1 var(--mono); letter-spacing: .2em; color: #ff5a4f; text-shadow: 0 0 14px rgba(255,70,60,.5); animation: stampIn .35s cubic-bezier(.3,1.6,.5,1) both; }
.hm-lv0 b { font: 400 14px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #ff8a80; }
.hm-lv0 small { font: 300 14.5px/1.45 var(--ui); color: var(--fg-2); max-width: 40ch; }
/* Team: the public roster (v0.0.29) */
.roster .ro-lv { margin: 18px 0 8px; }
.roster h4 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 400 14px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--hk); }
.roster h4 i { font-style: normal; padding: 1px 7px; background: var(--hk); color: #0c0f10; letter-spacing: .1em; }
.roster h4 small { margin-left: auto; font-size: 11.5px; letter-spacing: .12em; color: var(--dim); }
/* About hero: centered text, no diagram (v0.0.29) */
.ab-hero { display: block; text-align: center; padding: 18px 0 6px; }
.ab-hero .ab-copy { max-width: 820px; margin: 0 auto; }
.ab-hero .bf-lead { margin-left: auto; margin-right: auto; }
.ab-hero .toolbar { justify-content: center; }
/* Handbook preview on buttons (v0.0.29) */
.hbp { --ink: #8a6a1e; position: fixed; z-index: 70; display: grid; gap: 4px; padding: 10px 12px 10px 14px; background: linear-gradient(170deg, #f3efe4, #e6e0d0); color: #1c2022; border-left: 4px solid var(--ink); box-shadow: 0 14px 30px rgba(0,0,0,.55); pointer-events: none; animation: hbpIn .18s ease-out both; }
.hbp.t-policy { --ink: #8e2f26; } .hbp.t-procedure { --ink: #275a6b; }
.hbp.up { transform: translateY(-100%); animation-name: hbpUp; }
.hbp.out { opacity: 0; transition: opacity .15s; }
.hbp-top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); font: 400 10.5px var(--mono); letter-spacing: .1em; }
.hbp-top b { color: var(--ink); font-weight: 400; } .hbp-top i { font-style: normal; color: #6b6f70; }
.hbp-t { font: 500 14.5px/1.25 var(--ui); }
.hbp-s { font: 400 12.5px/1.4 var(--ui); color: #4a4f50; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hbp-go { margin-top: 2px; font: 400 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
@keyframes hbpIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hbpUp { from { opacity: 0; transform: translateY(calc(-100% + 4px)); } to { transform: translateY(-100%); } }
.no-motion .hbp { animation: none; }
/* Contract cards: who completed it, or who is working on it (v0.0.29) */
.kc-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 7px 8px; border: 1px dashed var(--line); background: rgba(255,255,255,.02); }
.kc-people.wip { border-color: rgba(242,140,40,.45); }
.kc-people.done { border-color: rgba(127,191,138,.45); }
.kp-l { width: 100%; font: 400 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.kc-people.done .kp-l { color: #7fbf8a; } .kc-people.wip .kp-l { color: var(--jo); }
.kp-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--jo); box-shadow: 0 0 8px var(--jo); animation: blink 1.4s ease-in-out infinite; }
.kc-people .tok { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; font: 400 12px var(--mono); }
.kc-people .tok img { width: 20px; height: 20px; }
.kc-people .tok:hover { border-color: var(--jo); }
.no-motion .kp-dot { animation: none; }
.kc-people .tok { background: rgba(10,13,15,.6); clip-path: none; letter-spacing: .04em; }
/* Contract cards: expandable contributors (v0.0.29) */
.kc-contrib { margin: 8px 0 4px; border: 1px dashed var(--line); background: rgba(255,255,255,.02); }
.kc-contrib.wip { border-color: rgba(242,140,40,.45); } .kc-contrib.done { border-color: rgba(127,191,138,.45); }
.kc-contrib summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; cursor: pointer; list-style: none; }
.kc-contrib summary::-webkit-details-marker { display: none; }
.kc-contrib .kp-l { white-space: nowrap; } .kc-contrib .kp-n { font-style: normal; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; }
.kc-contrib.done .kp-l { color: #7fbf8a; } .kc-contrib.wip .kp-l { color: var(--jo); }
.kp-faces { display: flex; } .kp-faces img { width: 20px; height: 20px; margin-left: -5px; border: 1px solid #0c0f10; border-radius: 50%; background: #1a2124; }
.kc-contrib ul { list-style: none; margin: 0; padding: 0 9px 8px; display: grid; gap: 5px; }
.kc-contrib li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); animation: up .3s ease backwards; animation-delay: calc(var(--k) * 40ms); }
.kc-contrib li a { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); text-decoration: none; font: 400 12.5px var(--mono); }
.kc-contrib li a:hover { color: var(--hot); }
.kc-contrib li img { width: 20px; height: 20px; border-radius: 50%; }
.kc-contrib li small { font: 400 11px var(--mono); color: var(--dim); }
.kc-contrib li.new { background: rgba(242,140,40,.12); animation: claimIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes claimIn { 0% { opacity: 0; transform: translateX(-10px); background: rgba(242,140,40,.45); } 100% { background: rgba(242,140,40,.12); } }
.kp-agent { margin: 0; padding: 0 9px 8px; font: 400 11.5px var(--mono); color: #b7a6e8; }
.no-motion .kc-contrib li { animation: none; }
/* Signed out: all clearance cards lined up (v0.0.29) */
.si-levels { margin-top: 26px; }
.si-how { margin: 6px 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.si-how li { padding: 12px 14px; border: 1px solid var(--line); background: rgba(10,13,15,.6); font: 300 15px/1.45 var(--ui); color: var(--fg-2); }
.si-how b { color: var(--fg); font-weight: 400; }
.si-lvrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 12px; }
.si-lvrow figure { margin: 0; animation: riseIn .45s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--k) * 70ms); }
.si-lvrow figcaption { margin-top: 8px; font: 300 13.5px/1.4 var(--ui); color: var(--dim); }
.si-lvrow figcaption b { display: block; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.si-lvrow .hk { pointer-events: none; }
.si-lvrow .hk .vs { display: none; }
.no-motion .si-lvrow figure { animation: none; }
@media (max-width: 860px) { .si-how { grid-template-columns: 1fr; } }
/* Clearance colours, v0.0.29: LV0 grey and inactive, LV1 slate, LV2 silver, LV3 green, LV4 cyan, LV5 orange, LV6 violet, LV7 blood red */
.hk.hk-l0 { background: linear-gradient(135deg, #1b1e20, #111314); border-style: dashed; filter: grayscale(1) brightness(.75); opacity: .78; }
.hk-l0 .hk-pat { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px); }
.hk-l0 .hk-lv, .hk-l0 .hk-who b { color: #7b8286; text-shadow: none; }
.hk.hk-l1 { background: linear-gradient(135deg, #1b2229, #10151a); }
.hk-l1 .hk-pat { background: radial-gradient(circle at 100% 50%, var(--bg) 9px, transparent 10px), linear-gradient(90deg, rgba(125,147,166,.06) 1px, transparent 1px) 0 0 / 22px 100%; }
.hk.hk-l4 { background: linear-gradient(135deg, #0f2029, #081218); }
.hk-l4 .hk-pat { background: linear-gradient(rgba(79,179,217,.1) 1px, transparent 1px) 0 0 / 100% 12px, linear-gradient(90deg, rgba(79,179,217,.1) 1px, transparent 1px) 0 0 / 12px 100%; }
/* LV6 Administration: violet, embossed frame, banded edge */
.hk.hk-l6 { background: linear-gradient(135deg, #1d1428, #0e0a14); box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(167,125,224,.2), inset 0 0 0 4px rgba(0,0,0,.6); }
.hk.hk-l6::before { background: repeating-linear-gradient(-45deg, var(--hk) 0 6px, #1d1428 6px 12px); }
.hk-l6 .hk-pat { background: repeating-linear-gradient(60deg, transparent 0 18px, rgba(167,125,224,.06) 18px 19px), repeating-linear-gradient(-60deg, transparent 0 18px, rgba(167,125,224,.06) 18px 19px); }
/* LV7 Owner: black and blood red, fine guilloche, a dark red sheen */
.hk.hk-l7 { background: linear-gradient(135deg, #1a0507, #060203); border-color: #7a0d14; box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 26px rgba(192,20,31,.18); }
.hk-l7 .hk-pat { background: repeating-radial-gradient(circle at 80% 120%, transparent 0 7px, rgba(192,20,31,.12) 7px 8px), repeating-radial-gradient(circle at 10% -20%, transparent 0 9px, rgba(192,20,31,.09) 9px 10px); }
.hk-l7 .hk-pat::after { background: linear-gradient(110deg, transparent 40%, rgba(255,80,80,.14) 50%, transparent 60%); }
.hk-l7 .hk-lv { text-shadow: 0 0 22px rgba(192,20,31,.7); }
/* Signed-out row: compact specimen cards */
.si-lvrow { grid-template-columns: repeat(4, 1fr); }
.si-lvrow .hk-meta span:nth-child(4) { display: none; }
.si-lvrow .hk.specimen::before { background: var(--hk); }
.si-lvrow .hk.hk-l6::before { background: repeating-linear-gradient(-45deg, var(--hk) 0 6px, #1d1428 6px 12px); }
@media (max-width: 1000px) { .si-lvrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .si-lvrow { grid-template-columns: 1fr; } }
.mb-heli .nav-r { fill: #ff4d4d; stroke: none; } .mb-heli .nav-g { fill: #57e389; stroke: none; } .mb-heli .nav-w { fill: #fff; stroke: none; filter: drop-shadow(0 0 3px #fff); }
/* Guest pass list: active, expired and revoked (v0.0.30) */
.gp-list li.gp-h { border: 0; padding: 10px 2px 2px; animation: none; }
.gp-list li.gp-h b { font: 400 11.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #d4ae52; font-weight: 400; }
.gp-list li.gp-h span { flex: 1; }
.gp-st { flex: none !important; min-width: 72px; padding: 1px 6px; border: 1px solid currentColor; font: 400 10.5px var(--mono) !important; letter-spacing: .14em !important; text-transform: uppercase; text-align: center; }
.gp-list li.ok .gp-st { color: #7fbf8a; } .gp-list li.ex .gp-st { color: var(--dim); } .gp-list li.rv .gp-st { color: #e0453f; }
.gp-list li.ex { opacity: .7; } .gp-list li.rv { opacity: .6; }
/* Certificates of service (v0.0.31) */
.cert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cert-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--hk); background: linear-gradient(110deg, rgba(232,224,204,.06), rgba(10,13,15,.6) 60%); color: var(--fg); text-decoration: none; transition: transform .3s cubic-bezier(.22,.9,.3,1), border-color .3s; animation: riseIn .4s ease backwards; animation-delay: calc(var(--i) * 60ms); }
.cert-card:hover, .cert-card:focus-visible { transform: translateY(-3px); border-color: var(--hk); outline: none; }
.cert-card small { display: block; font: 400 11px var(--mono); letter-spacing: .14em; color: var(--dim); }
.cert-card b { display: block; margin: 4px 0; font: 400 18px/1.2 var(--ui); }
.cert-card span { font: 400 12.5px var(--mono); color: var(--fg-2); }
.cert-card.revoked { opacity: .55; }
.cert { --hk: #7fbf8a; position: relative; max-width: 860px; margin: 0 auto 24px; padding: 46px 56px 36px; overflow: hidden; color: #1c2022; font: 400 15px/1.55 var(--ui);
  background: radial-gradient(circle at 50% 120%, rgba(0,0,0,.05), transparent 60%), repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 6px), #f6f2e7;
  border: 1px solid #cfc7b0; box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 0 10px #f6f2e7, inset 0 0 0 11px #b9ad8c, inset 0 0 0 14px #f6f2e7, inset 0 0 0 15px #d8cfb6; animation: dsPage .6s cubic-bezier(.2,.8,.2,1) both; }
.cert-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #1c2022; }
.cert-head img { filter: invert(1) brightness(.2); }
.cert-head b { display: block; font: 400 15px var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.cert-head span { display: block; font: 300 30px/1.1 var(--ui); letter-spacing: .06em; }
.cert-id { margin-left: auto; text-align: right; font: 400 18px var(--mono); letter-spacing: .1em; }
.cert-id small { display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #6b6f70; }
.cert-lead { margin: 22px 0 4px; color: #4a4f50; }
.cert-name { margin: 2px 0 2px; font: 300 44px/1.1 var(--ui); letter-spacing: .02em; color: #111; text-transform: none; }
.cert-who { margin: 0; font: 400 13px var(--mono); color: #4a4f50; }
.cert-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 20px 0; background: #cfc7b0; border: 1px solid #cfc7b0; }
.cert-sum div { padding: 10px 14px; background: #f8f5ec; }
.cert-sum small { display: block; font: 400 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #6b6f70; }
.cert-sum b { font: 300 26px/1.2 var(--ui); color: #111; }
.cert-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.cert-t th { text-align: left; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3d4244; border-bottom: 1px solid #1c2022; padding: 6px 8px; }
.cert-t td { padding: 7px 8px; border-bottom: 1px solid #ddd5bf; vertical-align: top; }
.cert-t a { color: #1c2022; }
.cert-grades { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.cert-grades span { padding: 8px 12px; border: 1px solid #cfc7b0; background: #f8f5ec; }
.cert-grades small { display: block; font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b6f70; }
.cert-grades b { font: 400 22px var(--ui); margin-right: 8px; } .cert-grades i { font-style: normal; font: 400 11.5px var(--mono); color: #6b6f70; }
.cert-note { font-size: 13.5px; color: #4a4f50; }
.cert-q { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--hk); background: #efe9d9; font-style: italic; }
.cert-foot { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed #b9ad8c; font-size: 13.5px; }
.cert-foot code { font: 400 12.5px var(--mono); }
.cert-foot small { display: block; margin-top: 4px; font: 400 11.5px var(--mono); color: #6b6f70; overflow-wrap: anywhere; }
.cert-foot .vs { display: inline-block; margin-left: 8px; }
.cert-seal { flex: none; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--hk), color-mix(in srgb, var(--hk) 50%, #000)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.25); animation: stampIn .5s cubic-bezier(.3,1.6,.5,1) .5s both; }
.cert-seal img { width: 44px; height: 44px; }
.cert.revoked { filter: grayscale(.8); }
@media (max-width: 700px) { .cert { padding: 28px 20px 24px; } .cert-name { font-size: 32px; } .cert-sum { grid-template-columns: 1fr 1fr; } .cert-head span { font-size: 22px; } }
@media print {
  body.print-cert * { visibility: hidden !important; }
  body.print-cert #cert, body.print-cert #cert * { visibility: visible !important; }
  body.print-cert #cert { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; box-shadow: none; animation: none; }
}
.no-motion .cert, .no-motion .cert-seal, .no-motion .cert-card { animation: none; }
.cert-t td:first-child, .cert-t td:nth-child(4) { white-space: nowrap; }
.cert-sum b[style] { color: color-mix(in srgb, var(--hk) 65%, #000) !important; }
/* Comms mast beacon (v0.0.31): a red aircraft-warning light that blinks */
.mb-beacon { fill: #ff3b30; filter: drop-shadow(0 0 4px #ff3b30); animation: mbBlink 1.8s steps(1) infinite; }
.no-motion .mb-beacon { animation: none; }
/* Hotfix v0.0.32: the contract board fits the shared frame. Five fields side by side on wide screens,
   a horizontal scroll with snapping only where they cannot fit (layout stability, HP-GDE-012). */
.kanban { grid-auto-columns: minmax(0, 1fr); gap: 14px; overflow-x: visible; }
.kcol + .kcol::before { left: -8px; }
.kanban .kc { padding-left: 12px; padding-right: 12px; }
.kcol-t b { font-size: 14px; letter-spacing: .12em; }
.kcol-h { padding: 12px 12px 10px; }
.kcol-b { padding: 10px; }
@media (max-width: 1180px) { .kanban { grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; gap: 18px; } .kcol + .kcol::before { left: -10px; } }
.kanban .kc .spec summary { min-width: 0; letter-spacing: .1em; font-size: 11.5px; }
.kanban .kc .spec summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban .kc .spec summary i { flex: none; }
/* Column headers line up: the title, the description and the progress bar sit at the same height in every field */
.kcol-t { min-height: 34px; }
.kcol-h p { min-height: 2.8em; }
.mb-brl { fill: #ffe2a8; filter: drop-shadow(0 0 2px rgba(255,200,120,.9)); transition: opacity .15s; }
.mb-search path { fill: rgba(255,236,190,.10); stroke: none; }
.mb-drop .cn { fill: #d9dfe1; stroke: none; }
.mb-drop .ln { stroke: rgba(217,223,225,.7); stroke-width: .8; fill: none; }
.mb-drop .cr { fill: #c9a24a; stroke: #6b5524; stroke-width: .8; }
.no-motion .mb-drop { display: none; }
.mb-puff { fill: #dfe7ea; filter: blur(1px); }
.no-motion .mb-puff { display: none; }
.mb-tip { fill: #ff3b30; filter: drop-shadow(0 0 3px #ff3b30); animation: mbBlink 1.3s steps(1) infinite; }
.no-motion .mb-tip { animation: none; }
/* Radar on the comms mast (Site 1.0.0): a CSS animation, so it costs no script per frame */
.mb-radar .rd { fill: rgba(127,191,138,.08); stroke: rgba(127,191,138,.55); stroke-width: .8; }
.mb-rad-spin line { stroke: #9fe0aa; stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(127,191,138,.9)); }
.mb-rad-spin { animation: mbSpin 3.2s linear infinite; }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.no-motion .mb-rad-spin { animation: none; }
.mb-win { fill: #ffd98a; filter: drop-shadow(0 0 2px rgba(255,200,110,.85)); transition: opacity .6s; }
.mb-star { stroke: #fff6dc; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,240,200,.9)); }
.no-motion .mb-star { display: none; }
.mb-flag line { stroke: #b8c2c5; stroke-width: 1.4; }
.mb-flag path { fill: #f28c28; stroke: rgba(0,0,0,.3); stroke-width: .5; }
.no-motion .mb-search { display: none; }

/* ---- v0.0.39: top bar (messages · profile details · access credential) ---- */
.tb-id { --hk: var(--jo); display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 18px; }
.tb-wrap { position: relative; }
.tb-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--fg-2); text-decoration: none; cursor: pointer; border: 1px solid color-mix(in srgb, var(--hk) 45%, var(--line));
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hk) 9%, transparent) 0 1px, transparent 1px 6px), rgba(10,13,15,.9); transition: border-color .25s, color .25s, background-color .25s; }
.tb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.22,.9,.3,1); }
.tb-btn:hover, .tb-btn:focus-visible, .tb-btn[aria-expanded="true"] { outline: none; color: var(--fg); border-color: var(--hk); }
#tbGear:hover svg, #tbGear:focus-visible svg { transform: rotate(60deg); }
.tb-n { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--jo); color: #0c0f10; font: 700 10px/16px var(--mono); text-align: center; }
.tb-n:empty { display: none; }
.tb-btn.unread svg { animation: tbPing 2.4s ease-in-out infinite; }
@keyframes tbPing { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-2px); } 90% { transform: none; } }
.msg-menu { position: absolute; z-index: 80; top: 42px; right: -4px; width: 340px; max-width: calc(100vw - 24px); max-height: 430px; overflow: auto; border: 1px solid var(--line); border-top: 2px solid var(--hk); background: #0c1113; box-shadow: 0 18px 50px rgba(0,0,0,.6); animation: up .22s ease both; }
.mm-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #0c1113; border-bottom: 1px solid var(--line); }
.mm-head b { font: 400 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); }
.mm-head button { background: none; border: 0; color: var(--dim); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .mm-head button:hover { color: var(--fg); }
.msg-menu ul { list-style: none; margin: 0; padding: 0; }
.msg-menu li { --m: var(--jo); position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; padding: 11px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.msg-menu li i { width: 8px; height: 8px; margin-top: 5px; border: 1px solid var(--m); }
.msg-menu li.new i { background: var(--m); box-shadow: 0 0 8px var(--m); }
.msg-menu li b { display: block; font: 400 12.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.msg-menu li p { margin: 4px 0 4px; font: 300 14px/1.45 var(--ui); color: var(--fg-2); }
.msg-menu li small { font: 400 11px/1 var(--mono); color: var(--dim); letter-spacing: .08em; }
.mm-ok { --m: #7fbf8a !important; } .mm-bad { --m: #e0453f !important; } .mm-req { --m: #d4ae52 !important; } .mm-lv1 { --m: #7d93a6 !important; }
.mm-none { margin: 0; padding: 18px 14px; font: 300 14px var(--ui); color: var(--dim); }
@media (max-width: 700px) { .tb-id { margin-right: 0; gap: 6px; } .msg-menu { position: fixed; top: 52px; left: 12px; right: 12px; width: auto; } }

/* ---- v0.0.39: the LV1 gate (No access over a blurred section) and the welcome window ---- */
#view.gated { position: relative; }
#view.gated #vb { filter: blur(7px) grayscale(.5); opacity: .5; pointer-events: none; user-select: none; transition: filter .35s, opacity .35s; }
.gate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding: 36px 16px; }
.gate-win { position: sticky; top: 80px; width: 520px; width: min(520px, 100%); padding: 22px 24px 18px; text-align: center; border: 1px solid #7d93a6; border-top-width: 3px; background: linear-gradient(180deg, #141a1d, #0b0f10); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: hmIn .4s cubic-bezier(.2,.8,.2,1) both; }
.gate-top { display: flex; justify-content: center; align-items: center; gap: 10px; }
.gate-lv { padding: 3px 8px; background: #7d93a6; color: #0c0f10; font: 700 12px/1 var(--mono); letter-spacing: .12em; }
.gate-top small { font: 400 11.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #9fb3c4; }
.gate strong { display: block; margin: 14px 0 8px; font: 300 34px/1.1 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: #dfe5e7; }
.gate p { margin: 0 0 6px; font: 300 16px/1.5 var(--ui); color: var(--fg-2); }
.gate-wait { margin-top: 10px !important; padding: 8px 10px; border: 1px dashed rgba(212,174,82,.45); font-size: 14px !important; }
.gate-act { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.gate-note { font: 400 12px/1.6 var(--mono) !important; letter-spacing: .06em; color: var(--dim) !important; }
.gate-note a { color: var(--fg-2); }
.hm.hm-blur .hm-back { background: rgba(4,6,7,.5); backdrop-filter: blur(10px) saturate(.6); -webkit-backdrop-filter: blur(10px) saturate(.6); }
.hm-gate .hm-win { width: 620px; width: min(620px, 100%); border-color: #7d93a6; }
.hm-gate .hm-bar { color: #9fb3c4; }
.hm-gate .hm-act { display: grid; grid-template-columns: 1fr 1fr; }
/* Three ways out of a clearance window: the main one across the top, the two others side by side below it */
.hm-gate .hm-act .primary { grid-column: 1 / -1; order: -1; }
.hm-gate .hm-act .btn { justify-content: center; text-align: center; }
.gw-lv { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.gw-lv b { padding: 4px 12px; border: 1px solid #7d93a6; color: #9fb3c4; font: 300 36px/1 var(--ui); background: rgba(125,147,166,.1); }
.gw-lv span { display: flex; flex-direction: column; font: 400 14px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.gw-lv small { font-size: 11px; color: var(--dim); letter-spacing: .18em; }
.gw-ways { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; gap: 8px; }
.gw-ways li { display: grid; gap: 2px; padding: 9px 12px; border-left: 3px solid var(--jo); background: rgba(255,255,255,.03); }
.gw-ways b { font: 400 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.gw-ways span { font: 300 14.5px/1.4 var(--ui); color: var(--fg-2); }
.ga-f { display: grid; gap: 6px; margin: 12px 0 4px; }
.ga-f span { font: 400 11.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ga-f input { background: #0e1214; color: var(--fg); border: 1px solid var(--dim); padding: 10px 12px; font: 400 15px/1.2 var(--ui); }
.ga-f input:focus { outline: none; border-color: var(--jo); }
.ga-msg { min-height: 1.3em; margin: 6px 0 0 !important; font: 400 13px/1.4 var(--mono) !important; color: #e0a04f !important; }
.si-lv1 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 300 15px/1.4 var(--ui); color: var(--fg-2); }
.si-lv1 b { padding: 3px 8px; background: #7d93a6; color: #0c0f10; font: 700 12px/1 var(--mono); letter-spacing: .12em; }

/* ---- v0.0.39: guest passes, split into passes (left) and requests (right) ---- */
.gp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(212,174,82,.25); }
.gp-col + .gp-col { border-left: 1px solid rgba(212,174,82,.25); }
.gp-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; }
.gp-ch b { font: 400 12.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #d4ae52; }
.gp-ch small { font: 400 11.5px/1 var(--mono); letter-spacing: .08em; color: var(--dim); }
.gp-cols .gp-list:empty { display: grid; }
.gp-who { display: flex; flex-direction: column; gap: 3px; }
.gp-who b { font: 400 15px/1.2 var(--ui); color: var(--fg); letter-spacing: .02em; }
.gp-who small { font: 400 11.5px/1.2 var(--mono); color: var(--dim); }
.gp-lead { margin-bottom: 14px !important; }
.gp-link { display: flex; gap: 8px; margin: 0 0 12px; }
.gp-link { align-items: stretch; }
.gp-link textarea { flex: 1; min-width: 0; resize: none; word-break: break-all; overflow: hidden; background: #0e1214; color: #d4ae52; border: 1px solid rgba(212,174,82,.55); padding: 9px 10px; font: 400 13px/1.2 var(--mono); }
.gp-link textarea:focus { outline: none; border-color: #d4ae52; }
@media (max-width: 860px) { .gp-cols { grid-template-columns: 1fr; } .gp-col + .gp-col { border-left: 0; border-top: 1px solid rgba(212,174,82,.25); } }
.no-motion .gate-win, .no-motion .msg-menu, .no-motion .tb-btn.unread svg { animation: none; }

/* Sign out: a square on the left of the card's side panel */
.si-out { align-self: flex-start; flex-direction: column; justify-content: center; gap: 10px; width: 132px; height: 132px; aspect-ratio: 1; padding: 12px; text-align: center; }
.si-out span { font-size: 13.5px; letter-spacing: .2em; }
.si-out small { font-size: 12.5px; margin-top: 6px; }
.msg-menu { text-transform: none; letter-spacing: normal; font-family: var(--ui); white-space: normal; }
.hm-gate .hm-act .btn { letter-spacing: .12em; padding-left: 13px; padding-right: 13px; }

/* About · Start here: one big button on top, three beneath, joined like a triangle */
.ab-tri-sec { margin-top: 34px; }
.ab-tri { position: relative; display: grid; justify-items: center; }
.tri-b { --c: var(--jo); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; color: var(--fg); text-decoration: none; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-left: 3px solid var(--c);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, transparent) 0 1px, transparent 1px 7px), linear-gradient(100deg, color-mix(in srgb, var(--c) 14%, rgba(10,13,15,.9)), rgba(10,13,15,.85) 65%);
  transition: transform .35s cubic-bezier(.22,.9,.3,1), border-color .3s, box-shadow .35s; }
.tri-b::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.22,.9,.3,1); pointer-events: none; }
.tri-b:hover, .tri-b:focus-visible { outline: none; transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 0 24px color-mix(in srgb, var(--c) 18%, transparent); }
.tri-b:hover::after, .tri-b:focus-visible::after { left: 120%; }
.tri-ico { width: 30px; height: 30px; padding: 9px; box-sizing: content-box; fill: none; stroke: var(--c); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.tri-t small { display: block; font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.tri-t b { display: block; margin: 6px 0 4px; font: 400 19px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.tri-t span { display: block; font: 300 14.5px/1.45 var(--ui); color: var(--fg-2); }
.tri-go { width: 12px; height: 12px; border-top: 1.5px solid var(--c); border-right: 1.5px solid var(--c); transform: rotate(45deg); transition: transform .35s cubic-bezier(.22,.9,.3,1); }
.tri-b:hover .tri-go, .tri-b:focus-visible .tri-go { transform: translateX(4px) rotate(45deg); }
.tri-top { width: 56%; min-width: 0; padding: 24px 28px; }
.tri-top .tri-ico { width: 40px; height: 40px; padding: 12px; }
.tri-top .tri-t b { font-size: 30px; font-weight: 300; letter-spacing: .2em; }
.tri-lines { display: block; width: 66.6%; height: 48px; overflow: visible; }
.tri-lines path { fill: none; stroke: rgba(242,140,40,.45); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 5 6; animation: triFlow 1.6s linear infinite; }
@keyframes triFlow { to { stroke-dashoffset: -22; } }
.tri-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.tri-faq { margin: 22px 0 0; text-align: center; font: 300 15px/1.5 var(--ui); color: var(--dim); }
.tri-faq a { color: var(--fg-2); }
@media (max-width: 860px) { .tri-top { width: 100%; } .tri-lines { display: none; } .tri-row { grid-template-columns: 1fr; margin-top: 12px; } .tri-top .tri-t b { font-size: 24px; } }

/* Message timer: a thin bar under each message that runs out, then the message clears itself */
.mm-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: rgba(255,255,255,.06); }
.mm-bar em { display: block; height: 100%; width: calc(var(--f) * 100%); background: var(--m); box-shadow: 0 0 6px var(--m); animation: mmRun var(--t) linear forwards; }
@keyframes mmRun { to { width: 0; } }
.no-motion .mm-bar em { animation-timing-function: steps(10, end); }

/* Site 1.0.0: View Profile carries its words; on phones the top bar keeps only messages, the profile button and a compact credential */
.tb-btn.tb-prof { width: auto; grid-auto-flow: column; gap: 8px; padding: 0 12px 0 9px; font: 400 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.tb-btn.tb-prof span { white-space: nowrap; }
@media (max-width: 700px) {
  .bar.top #build { display: none; }
  .tb-id { margin-left: auto; margin-right: 0; }
  .tb-btn.tb-prof { padding: 0 8px; }
  .tb-btn.tb-prof span { display: none; }
  .si-badge { padding-left: 5px; gap: 6px; }
  .si-badge .sb-txt { display: none; }
  .si-badge .sb-lv { padding: 0 9px 0 8px; font-size: 21px; }
}

/* Site 1.0.0: small text in a clearance colour uses a lighter shade, so LV7 red and LV0 grey reach 4.5:1 on the dark page (WCAG AA) */
.hk-key, .ax-lv header b, .ax-doc .ax-t, .roster h4, .si-badge .sb-txt small { color: color-mix(in srgb, var(--hk) 70%, #fff); }
.vh h2:focus { outline: none; }
.gp-ch { min-height: 50px; box-sizing: border-box; }

/* Base detail (Site 1.1.0): an aircraft warning light on the windsock mast, blinking by CSS alone */
.mb-sockl { fill: #ff4a3d; filter: drop-shadow(0 0 3px #ff4a3d); animation: mbSockL 2.2s steps(1, end) infinite; }
@keyframes mbSockL { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.no-motion .mb-sockl { animation: none; }

/* Sign-in window: Keep me signed in on this device */
.hm-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); cursor: pointer; }
.hm-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--jo); }
.hm-check b { display: block; font: 400 13px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.hm-check small { display: block; margin-top: 4px; font: 300 14px/1.45 var(--ui); color: var(--dim); }
.hm-check:hover { border-color: var(--dim); }

/* Base detail (Site 1.2.0): a fishing boat's lantern bobbing on the horizon, CSS only */
.mb-lantern .ml-hull { fill: #2a3337; } .mb-lantern line { stroke: #4d5a60; stroke-width: 1; }
.mb-lantern .ml-light { fill: #ffd98a; filter: drop-shadow(0 0 5px rgba(255,210,120,.95)); animation: mlFlick 3.1s ease-in-out infinite; }
.mb-lantern .ml-bob { animation: mlBob 4.6s ease-in-out infinite; }
@keyframes mlBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(2px) rotate(2deg); } }
@keyframes mlFlick { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 60% { opacity: .95; } }
.no-motion .mb-lantern .ml-light, .no-motion .mb-lantern .ml-bob { animation: none; }

/* ---- Guest Pass 2.0 (Site 1.3.0) ---- */
.gc-lv { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--hk) 55%, var(--line)); border-left: 3px solid var(--hk);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hk) 8%, transparent) 0 1px, transparent 1px 7px), rgba(10,13,15,.6); }
.gc-lv b { font: 300 38px/1 var(--ui); color: var(--hk); text-shadow: 0 0 12px color-mix(in srgb, var(--hk) 50%, transparent); }
.gc-lv span { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.gc-lv small { font: 300 13.5px/1.35 var(--ui); letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.hm-win.hm-wide { width: 760px; width: min(760px, 100%); }
.gc-reveal { display: flex; justify-content: center; padding: 6px 0 10px; }
.gc-reveal .hk { width: 100%; max-width: 640px; }
.gc-done { margin: 4px 0 6px !important; text-align: center; font: 400 12.5px/1.4 var(--mono) !important; letter-spacing: .2em; text-transform: uppercase; color: #7fbf8a !important; }
.gp-await { display: grid; place-items: center; min-height: 260px; }
.gp-await-id { font: 300 40px/1 var(--mono); letter-spacing: .3em; color: rgba(255,255,255,.08); }
.gp-lv { display: inline-block; padding: 2px 6px; border: 1px solid var(--hk); color: var(--hk); font: 400 11px/1.2 var(--mono); letter-spacing: .1em; }
.gp-own { margin: 10px 0 0; }
.gp-sel { padding: 4px 6px; font-size: 12px; }
.gp-link input { flex: 1; min-width: 0; background: #0e1214; color: #d4ae52; border: 1px solid rgba(212,174,82,.55); padding: 9px 10px; font: 400 14px/1.2 var(--mono); }
.gp-link input:focus { outline: none; border-color: #d4ae52; }
.gl-pick { display: grid; gap: 8px; margin: 12px 0 6px; }
.gl-opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--hk); cursor: pointer; }
.gl-opt:hover, .gl-opt:has(input:checked) { border-color: var(--hk); background: color-mix(in srgb, var(--hk) 10%, transparent); }
.gl-opt input { accent-color: var(--hk); }
.gl-opt b { font: 300 24px/1 var(--ui); color: var(--hk); }
.gl-opt span { display: flex; flex-direction: column; gap: 2px; font: 400 12.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.gl-opt small { font: 300 13.5px/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--dim); }
.gp-hist { border-top: 1px solid rgba(212,174,82,.25); }
.gp-hist summary { padding: 12px 16px; cursor: pointer; font: 400 12.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #d4ae52; }
.gp-hist summary small { margin-left: 10px; letter-spacing: .08em; text-transform: none; color: var(--dim); }
.gp-hist-w { overflow-x: auto; padding: 0 16px 14px; }
.gp-ht { width: 100%; border-collapse: collapse; font: 300 14px/1.35 var(--ui); color: var(--fg-2); }
.gp-ht th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.gp-ht td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.gp-ht td small { display: block; color: var(--dim); font-size: 12px; }
.gp-ht code { color: #d4ae52; }
.gp-o-active { color: #7fbf8a; } .gp-o-revoked { color: #e0716b; } .gp-o-unclaimed { color: #d4ae52; }

/* Guest pass desk: the holder's details get the room; the buttons sit on their own line, to the right */
.gp-cols .gp-list li { flex-wrap: wrap; }
.gp-cols .gp-who { flex: 1 1 200px; min-width: 0; }
.gp-btns { display: flex; flex: 1 1 100%; justify-content: flex-end; gap: 8px; }

/* Base detail (Site 1.3.0): a cloud's shadow drifting across the sea, CSS only */
.mb-shade { fill: rgba(0,0,0,.16); filter: blur(18px); animation: mbShade 140s linear infinite; }
@keyframes mbShade { from { transform: translate(-260px, 640px); } to { transform: translate(1460px, 520px); } }
.no-motion .mb-shade { display: none; }

/* Base detail, Site 1.3.1: a channel buoy south-west of the command platform, its green light flashing every four seconds */
.mb-buoy .mby-body { fill: #2f6b3a; stroke: #1c3f23; stroke-width: .8; } .mb-buoy line { stroke: #4d5a60; stroke-width: 1; }
.mb-buoy .mby-light { fill: #6dff8a; opacity: .25; animation: mbyFlash 4s steps(1, end) infinite; }
.mb-buoy .mby-bob { animation: mlBob 5.3s ease-in-out infinite; }
@keyframes mbyFlash { 0% { opacity: 1; filter: drop-shadow(0 0 4px #6dff8a); } 12% { opacity: .25; filter: none; } }
.no-motion .mb-buoy .mby-light, .no-motion .mb-buoy .mby-bob { animation: none; }
@media (max-width: 520px) { .hm-gate .hm-act { grid-template-columns: 1fr; } }
/* Base detail, Site 1.4.0: two mooring bollards on the command platform's south dock, a rope slack between them */
.mb-bollards circle { fill: #1d2427; stroke: #7a878c; stroke-width: 1; }
.mb-bollards .mbb-rope { fill: none; stroke: #b59a6a; stroke-width: 1; stroke-dasharray: 2 1.4; opacity: .8; }
/* Position marker beside the right ruler (10e-scrollmark.js): the track runs between the corner brackets, left of the ruler's ticks */
.pos-mark { position: absolute; right: 27px; top: 104px; bottom: 104px; width: 44px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.pos-mark.on { opacity: 1; }
.pm-track { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(242,140,40,.18); }
.pm-fill { position: absolute; right: 0; top: 0; width: 2px; height: 0; background: var(--jo); box-shadow: 0 0 6px rgba(242,140,40,.7); transition: height .12s linear; }
.pm-k { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 3px; transform: translateY(-50%); transition: top .12s linear; }
.pm-k b { padding: 2px 3px; border: 1px solid rgba(242,140,40,.55); background: rgba(8,10,11,.85); font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--jo); text-shadow: 0 0 6px rgba(242,140,40,.6); }
.pm-chev { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--jo); filter: drop-shadow(0 0 4px rgba(242,140,40,.8)); }
.pos-mark.end .pm-chev { border-left-color: #7fbf8a; filter: drop-shadow(0 0 4px rgba(127,191,138,.8)); } .pos-mark.end .pm-k b { color: #7fbf8a; text-shadow: 0 0 6px rgba(127,191,138,.6); }
.no-motion .pm-k, .no-motion .pm-fill, .no-motion .pos-mark { transition: none; }
@media (max-width: 700px) { .pos-mark { display: none; } }
.pos-mark.slim { width: 14px; } .pos-mark.slim .pm-k b { display: none; }
@media print { .pos-mark { display: none !important; } }
/* Base detail, Site 1.5.0: a low fog bank drifting along the horizon */
.mb-fog { fill: rgba(200,215,220,.07); filter: blur(10px); animation: mbFog 180s linear infinite; }
@keyframes mbFog { from { transform: translate(-560px, 318px); } to { transform: translate(1640px, 306px); } }
.no-motion .mb-fog { display: none; }
/* "Join Discord" inside documents (04-markdown.js): about a third of the page wide, centred, in Discord's blurple */
.dc-wrap { display: flex; justify-content: center; margin: 18px 0 24px; }
.dc-join { --dc: #5865f2; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; width: 30%; min-width: 230px; padding: 12px 18px; border-radius: 8px; background: var(--dc); color: #fff !important; text-decoration: none !important; border: 0 !important; font: 600 17px/1 "gg sans", "Noto Sans", var(--ui); letter-spacing: .01em; box-shadow: 0 4px 0 #3c45a5, 0 8px 18px rgba(88,101,242,.35); transition: background .2s ease, transform .15s ease, box-shadow .15s ease; }
.dc-join::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: dcShine 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
.dc-join:hover, .dc-join:focus-visible { background: #4752c4; transform: translateY(-2px); box-shadow: 0 6px 0 #343c96, 0 12px 24px rgba(88,101,242,.45); outline: none; }
.dc-join:focus-visible { box-shadow: 0 6px 0 #343c96, 0 0 0 3px #fff, 0 0 0 5px var(--dc); }
.dc-join:active { transform: translateY(2px); box-shadow: 0 2px 0 #343c96, 0 4px 10px rgba(88,101,242,.3); }
.dc-ico { width: 30px; height: 30px; flex: none; }
.dc-ico svg { width: 100%; height: 100%; overflow: visible; }
.dci-b { fill: #fff; animation: dcBob 3s ease-in-out infinite; transform-origin: 20px 22px; }
.dci-d { fill: var(--dc); animation: dcType 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dci-d.d2 { animation-delay: .15s; } .dci-d.d3 { animation-delay: .3s; }
.dci-w { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: dcWave 1.8s ease-out infinite; }
.dci-w.w2 { animation-delay: .3s; }
.dc-go { font-style: normal; transition: transform .2s ease; }
.dc-join:hover .dc-go { transform: translateX(4px); }
.dc-print { display: none; }
@keyframes dcType { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-2.5px); opacity: 1; } }
@keyframes dcWave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dcBob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes dcShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.no-motion .dc-join::before, .no-motion .dci-b, .no-motion .dci-d, .no-motion .dci-w { animation: none; }
.no-motion .dci-d { opacity: 1; } .no-motion .dci-w { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .dc-join::before, .dci-b, .dci-d, .dci-w { animation: none; } .dci-w { opacity: .8; } }
@media (max-width: 700px) { .dc-join { width: 100%; min-width: 0; } }
@media print { .dc-join { display: none !important; } .dc-print { display: block; font: 600 11pt/1.3 var(--ui); color: #000; border: 1px solid #5865f2; padding: 6px 12px; border-radius: 6px; } }
/* Base detail, Site 1.6.0: the fading V of a patrol boat's wake off the east platform */
.mb-wake path { fill: none; stroke: rgba(220,235,240,.35); stroke-width: 1.2; stroke-dasharray: 3 3; animation: mbWake 2.4s linear infinite; }
@keyframes mbWake { to { stroke-dashoffset: -12; } }
.no-motion .mb-wake path { animation: none; }
/* Base detail, Site 1.7.0: a tanker crawling across the south sea, its stern light on */
.mb-tanker path, .mb-tanker rect { fill: #3a464b; stroke: #56656b; stroke-width: .6; } .mb-tanker line { stroke: #56656b; stroke-width: 1; } .mb-tanker circle { fill: #ffe7a8; filter: drop-shadow(0 0 3px #ffd98a); }
.mb-tanker { animation: mbTank 600s linear infinite alternate; }
@keyframes mbTank { from { transform: translate(520px, 760px); } to { transform: translate(690px, 760px); } }
.no-motion .mb-tanker { animation: none; }
/* Base detail, Site 1.7.1: a lifebuoy hung beside the bollards on the south dock */
.mb-ring { fill: none; stroke: #f28c28; stroke-width: 1.6; stroke-dasharray: 2.5 2.5; }