:root {
  color-scheme: dark;
  --ink: #f2ead9;
  --ink-strong: #fff8e9;
  --muted: #aaa596;
  --muted-2: #7e827a;
  --green: #9acb7b;
  --green-deep: #587b4b;
  --amber: #eca152;
  --amber-soft: #c47e3d;
  --red: #d96a63;
  --blue: #7fb0be;
  --bg: #111312;
  --bg-2: #171a18;
  --rail: #0e100f;
  --panel: #222622;
  --panel-2: #2a2f2a;
  --panel-3: #313731;
  --line: #4d554d;
  --line-soft: #363d36;
  --cream-paper: #d8c7a5;
  --shadow: 0 16px 38px rgba(0,0,0,.28);
  --rail-w: 270px;
  --topbar-h: 68px;
  --radius: 5px;
  --focus: 0 0 0 3px #111312, 0 0 0 5px var(--amber);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, Cambria, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 78% 10%, rgba(88,123,75,.10), transparent 28rem),
    var(--bg);
  background-size: 23px 23px, 23px 23px, auto, auto;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: repeating-linear-gradient(117deg, transparent 0 24px, rgba(255,255,255,.012) 25px, transparent 26px 62px);
  z-index: 1000;
}
img, video { max-width: 100%; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink-strong); }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--amber); color: #111; }
h1, h2, h3, h4 { color: var(--ink-strong); line-height: 1.12; margin: 0 0 .55rem; letter-spacing: -.025em; }
h1 { font-size: clamp(2.15rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.35rem, 2.3vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
small { color: var(--muted); }
code, pre { font-family: var(--mono); }
hr { border: 0; border-top: 1px solid var(--line); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.skip-link { position: fixed; left: 1rem; top: -8rem; z-index: 5000; padding: .75rem 1rem; background: var(--amber); color: #111; font-weight: 800; }
.skip-link:focus { top: 1rem; }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: grid; gap: 1rem; align-content: start; }
.wrap { flex-wrap: wrap; }
.full { width: 100%; }
.full-span { grid-column: 1 / -1; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--rail-w) minmax(0,1fr); }
.site-rail {
  position: sticky; top: 0; height: 100vh; z-index: 100;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--rail); border-right: 1px solid var(--line); box-shadow: 8px 0 25px rgba(0,0,0,.18);
}
.rail-head { display: flex; align-items: flex-start; gap: .5rem; padding: 1.2rem 1rem 1rem; border-bottom: 1px solid var(--line-soft); }
.brand { display: grid; flex: 1; color: var(--ink); text-decoration: none; position: relative; padding-left: 38px; }
.brand-name { font-family: var(--mono); font-weight: 900; font-size: 1.55rem; letter-spacing: .08em; line-height: 1; }
.brand-by { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .32rem; }
.brand-by b { color: var(--green); }
.brand-jacks { position: absolute; left: 0; top: 1px; display: grid; grid-template-columns: repeat(3,9px); gap: 3px; }
.brand-jacks i { width: 9px; height: 23px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 9px; position: relative; }
.brand-jacks i::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background: var(--amber); left:2px; bottom:3px; }
.icon-button { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); cursor: pointer; }
.icon-button:hover { border-color: var(--green); background: var(--panel-2); }
.rail-close { display: none; }
.maker-chip { margin: .85rem .85rem .4rem; padding: .65rem; display: flex; gap: .65rem; align-items: center; text-decoration: none; border: 1px dashed var(--line); background: var(--bg-2); color: var(--ink); }
.maker-chip img, .avatar-fallback, .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.avatar-fallback { display: grid; place-items: center; background: var(--green-deep); color: white; font-family: var(--mono); font-weight: 900; }
.maker-chip span { min-width:0; display:grid; }
.maker-chip strong, .maker-chip small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-nav { padding: .4rem .7rem; display: grid; gap: 2px; }
.rail-nav a { display: flex; min-height: 40px; gap: .75rem; align-items: center; padding: .55rem .65rem; color: var(--muted); text-decoration: none; border-left: 3px solid transparent; font-size: .9rem; }
.rail-nav a > span { width: 20px; text-align:center; font-family: var(--mono); color: var(--cream-paper); }
.rail-nav a:hover { background: var(--panel); color: var(--ink); }
.rail-nav a.active { color: var(--ink-strong); background: var(--panel); border-left-color: var(--green); }
.count-badge { margin-left:auto; min-width:1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:999px; background:var(--amber); color:#111; font-size:.7rem; }
.create-rail { margin: .55rem .85rem; }
.rail-group { margin: .25rem .85rem; border-top: 1px solid var(--line-soft); }
.rail-group summary { padding: .75rem .1rem .55rem; cursor:pointer; color:var(--muted); font: .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.rail-group a { display:block; color:var(--muted); text-decoration:none; padding:.35rem .2rem; font-size:.82rem; }
.rail-group a:hover { color:var(--green); }
.ecosystem { margin-top:auto; }
.rail-auth { padding: 1rem; display:grid; gap:.5rem; }
.rail-signout { padding:.5rem 1rem 1.2rem; }
.rail-scrim { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:90; }
.work-area { min-width:0; display:flex; min-height:100vh; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:80; height:var(--topbar-h); display:flex; align-items:center; gap:1rem; padding:0 clamp(1rem,3vw,2.2rem); background:#171a18; border-bottom:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.nav-open { display:none; }
.page-ident { min-width:0; display:grid; line-height:1.15; }
.page-ident strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eyebrow, .section-label, .panel-code { margin:0 0 .45rem; color:var(--amber); font:700 .69rem var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.network-state { display:flex; align-items:center; gap:.45rem; color:var(--muted); font: .7rem var(--mono); text-transform:uppercase; }
.network-state i, .signal-dot, .editor-state i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(154,203,123,.13); }
.network-state.offline i { background:var(--amber); }
.page-content { width:100%; max-width:1540px; margin:0 auto; padding:clamp(1rem,3vw,2.4rem); flex:1; }
.site-footer { display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; padding:1.25rem clamp(1rem,3vw,2.4rem); border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.site-footer strong { color:var(--green); }
.site-footer nav { display:flex; gap:1rem; }
.mobile-dock { display:none; }

.panel { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1rem,2vw,1.35rem); box-shadow:var(--shadow); }
.panel::after { content:""; position:absolute; inset:4px; pointer-events:none; border:1px solid rgba(255,255,255,.018); }
.panel.inset, .inset { background:var(--bg-2); box-shadow:none; }
.panel.taped::before { content:""; position:absolute; top:-8px; left:42%; width:76px; height:18px; background:#b4a77f; opacity:.58; transform:rotate(-2deg); box-shadow:0 2px 4px rgba(0,0,0,.25); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:42px; padding:.58rem .9rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); color:var(--ink); text-decoration:none; cursor:pointer; font-weight:720; line-height:1.1; }
.button:hover:not(:disabled) { border-color:var(--green); background:var(--panel-3); color:var(--ink-strong); }
.button.primary { background:var(--green); border-color:var(--green); color:#11150f; }
.button.primary:hover { background:#b0dd93; color:#0d110b; }
.button.danger { background:#5c2a28; border-color:#a6504b; color:#ffe9e7; }
.button.quiet { background:transparent; }
.button.compact { min-height:34px; padding:.4rem .65rem; font-size:.82rem; }
.button.large { min-height:50px; padding:.8rem 1.2rem; }
.button:disabled { opacity:.48; cursor:not-allowed; }
.button-row { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.text-button { appearance:none; border:0; background:transparent; padding:.25rem; color:var(--green); cursor:pointer; text-decoration:underline; text-underline-offset:.2em; }
.text-button.danger, .danger { color:#f18a82; }
.text-link { font-weight:750; }
.handle { color:var(--green); font-family:var(--mono); }

.page-heading, .page-title-row, .section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:1.35rem; }
.page-title-row > div:first-child, .page-heading > div:first-child { max-width:850px; }
.page-title-row h1, .page-heading h1 { margin-bottom:.45rem; }
.page-title-row p, .page-heading p { color:var(--muted); max-width:760px; }
.section-head { margin-top:2rem; border-bottom:1px solid var(--line); padding-bottom:.75rem; }
.section-head.compact { align-items:center; margin:0 0 1rem; }
.section-head h2 { margin-bottom:0; }
.narrow-page { max-width:900px; margin:0 auto; }
.narrow-form { max-width:800px; }
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); align-items:center; min-height:540px; gap:clamp(2rem,5vw,6rem); padding:clamp(2rem,4vw,4rem) 0; }
.hero h1 em { color:var(--green); font-style:normal; }
.hero .lede, .lede { font-size:clamp(1.05rem,2vw,1.3rem); color:var(--muted); max-width:720px; }
.fine-print { margin-top:1rem; color:var(--muted); font-size:.82rem; }
.compact-hero { grid-template-columns:1fr; min-height:0; padding:2rem; margin-bottom:2rem; border:1px solid var(--line); background:var(--panel); }
.patch-panel { min-height:390px; padding:1.1rem; border:1px solid var(--line); background:#161917; position:relative; box-shadow:var(--shadow); transform:rotate(.5deg); }
.patch-panel::before { content:"PATCH FIELD / PB-001"; display:block; color:var(--muted); font:700 .65rem var(--mono); letter-spacing:.12em; border-bottom:1px solid var(--line); padding-bottom:.65rem; }
.jack-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.jack-grid > div { min-height:125px; background:var(--panel); border:1px solid var(--line); padding:1rem; display:grid; align-content:start; }
.jack-grid i { width:24px; height:24px; border-radius:50%; border:5px solid var(--line); background:#0e100f; box-shadow:inset 0 0 0 2px #000; margin-bottom:.8rem; }
.jack-grid strong { font:700 .75rem var(--mono); color:var(--green); letter-spacing:.1em; }
.jack-grid small { margin-top:.35rem; }
.patch-cables span { position:absolute; width:45%; height:3px; background:var(--amber); border-radius:5px; transform-origin:left center; opacity:.85; }
.patch-cables span:nth-child(1){left:14%;top:42%;transform:rotate(25deg)}
.patch-cables span:nth-child(2){left:49%;top:67%;transform:rotate(-135deg);background:var(--green)}
.patch-cables span:nth-child(3){left:18%;top:83%;transform:rotate(-28deg);background:var(--blue)}

.feature-grid, .card-grid, .settings-card-grid, .metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.card-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card, .feature-grid .panel { display:flex; flex-direction:column; align-items:flex-start; }
.card p { color:var(--muted); }
.card > .text-link, .card > .button { margin-top:auto; }
.card-kicker { width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; justify-content:space-between; margin-bottom:.8rem; color:var(--muted); font-size:.77rem; }
.card-footer { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line-soft); }
.project-card { background:var(--bg-2); border:1px solid var(--line-soft); padding:1rem; min-width:0; }
.project-card p { color:var(--muted); }
.project-card h3 a { color:var(--ink-strong); }
.status-tag, .chip { display:inline-flex; align-items:center; min-height:24px; padding:.2rem .48rem; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:2px; font:700 .66rem var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.status-tag.on { border-color:var(--green-deep); color:var(--green); }
.status-tag.alert { border-color:#9b5d35; color:var(--amber); }
.chip { border-radius:999px; text-transform:none; letter-spacing:0; font-size:.75rem; }
.chip-row { display:flex; flex-wrap:wrap; gap:.35rem; margin:.55rem 0; }
.choice-row { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; padding:.75rem 0; }
.choice-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; }
.choice input, .theme-choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { display:block; padding:.55rem .65rem; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; font-size:.82rem; }
.choice input:checked + span { border-color:var(--green); color:var(--green); background:#1d2b1d; }
.choice input:focus-visible + span, .theme-choice input:focus-visible + span { box-shadow:var(--focus); }
.theme-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.theme-choice span { display:grid; gap:.45rem; min-height:88px; padding:.65rem; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; }
.theme-choice i { display:block; height:38px; border:1px solid var(--line); background:linear-gradient(135deg,var(--panel-3),var(--green-deep)); }
.theme-choice:nth-child(3n+2) i { background:linear-gradient(135deg,#55372a,#bb8144); }
.theme-choice:nth-child(3n) i { background:linear-gradient(135deg,#24333d,#6c8391); }
.theme-choice input:checked + span { border-color:var(--green); box-shadow:inset 0 0 0 2px var(--green); }

.form-layout { display:grid; gap:1rem; }
.form-layout > section { border-bottom:1px solid var(--line-soft); padding-bottom:1.2rem; }
.form-layout > section:last-child { border-bottom:0; }
label { display:grid; gap:.35rem; color:var(--ink); font-weight:650; }
label > span { font-size:.82rem; }
label small { font-weight:400; }
input, select, textarea { width:100%; min-height:43px; border:1px solid var(--line); border-radius:3px; padding:.62rem .7rem; background:#141715; color:var(--ink); }
textarea { resize:vertical; min-height:86px; }
input[type="color"] { padding:.2rem; height:46px; }
input[type="file"] { padding:.45rem; }
input:disabled, select:disabled { opacity:.55; }
input::placeholder, textarea::placeholder { color:#6f766f; }
.field-grid { display:grid; gap:1rem; }
.field-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.color-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; }
.input-prefix { display:grid; grid-template-columns:auto 1fr; align-items:stretch; }
.input-prefix > span { display:grid; place-items:center; min-width:42px; border:1px solid var(--line); border-right:0; background:var(--panel-3); color:var(--green); font-family:var(--mono); }
.input-prefix input { border-radius:0 3px 3px 0; }
.form-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.form-note, .notice { border-left:3px solid var(--green); padding:.75rem .85rem; background:var(--bg-2); color:var(--muted); }
.notice strong { color:var(--ink); }
.notice p { margin:.25rem 0 0; }
.notice.warning { border-left-color:var(--amber); }
.notice.error { border-left-color:var(--red); }
.check-row, .switch { display:flex; align-items:center; gap:.65rem; font-weight:500; }
.check-row input, .switch input { width:auto; min-height:0; flex:none; }
.switch > input { position:absolute; opacity:0; }
.switch > span:first-of-type { width:40px; height:22px; background:#101210; border:1px solid var(--line); border-radius:999px; position:relative; flex:none; }
.switch > span:first-of-type::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:.16s ease; }
.switch > input:checked + span:first-of-type { background:#263826; border-color:var(--green-deep); }
.switch > input:checked + span:first-of-type::after { left:21px; background:var(--green); }
.switch > input:focus-visible + span:first-of-type { box-shadow:var(--focus); }
.check-stack { display:grid; gap:.75rem; align-content:center; }
fieldset { border:1px solid var(--line); padding:1rem; }
legend { color:var(--amber); font:700 .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:0 .5rem; }
.toolbar { display:flex; align-items:end; gap:.65rem; margin-bottom:1rem; }
.toolbar label { min-width:180px; }
.toolbar .grow { min-width:240px; }
.inline-form { display:flex; align-items:center; gap:.45rem; }
.inline-form input, .inline-form select { min-width:110px; }
.popover { position:absolute; z-index:40; min-width:min(360px,calc(100vw - 2rem)); margin-top:.35rem; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.popover.right { right:0; }
.action-menu, details { position:relative; }
details > summary { list-style:none; }
details > summary::-webkit-details-marker { display:none; }
.add-panel > summary { width:max-content; margin-bottom:.8rem; }

.flash-stack { position:fixed; top:calc(var(--topbar-h) + 1rem); right:1rem; z-index:500; display:grid; gap:.5rem; width:min(430px,calc(100vw - 2rem)); }
.flash { display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; padding:.8rem 1rem; background:#253024; border:1px solid var(--green-deep); box-shadow:var(--shadow); }
.flash.error { background:#402524; border-color:#8c4843; }
.flash.notice { background:#382f22; border-color:#7d603e; }
.flash button { border:0; background:transparent; cursor:pointer; }
.error-list { border:1px solid #8c4843; background:#402524; padding:1rem 1.2rem; margin-bottom:1rem; }
.error-list ul { margin:.5rem 0 0; }
.empty-state { text-align:center; padding:2.2rem; color:var(--muted); }
.empty-state h2, .empty-state h3 { color:var(--ink); }

.content-with-aside { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,360px); gap:1rem; align-items:start; }
.content-with-aside.wide-aside { grid-template-columns:minmax(0,1fr) minmax(300px,420px); }
.sticky { position:sticky; top:calc(var(--topbar-h) + 1rem); }
.masonry-grid { columns:3 290px; column-gap:1rem; }
.masonry-grid > * { break-inside:avoid; margin-bottom:1rem; }
.scrap-card footer, .bulletin-note footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.8rem; border-top:1px solid var(--line-soft); }
.crew-avatar { width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--line); background:var(--green-deep); color:white; font:900 1.2rem var(--mono); transform:rotate(-2deg); }
.crew-avatar.large { width:92px; height:92px; font-size:1.8rem; }
.crew-hero { display:flex; align-items:center; gap:1.2rem; margin-bottom:1rem; }
.hero-actions { display:grid; justify-items:end; gap:.5rem; align-self:start; }
.stack-list { display:grid; gap:.65rem; }
.stack-list.compact { gap:.35rem; }
.list-row, .saved-item, .session-row { display:flex; align-items:center; gap:.8rem; justify-content:space-between; min-width:0; padding:.75rem; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--ink); text-decoration:none; }
.list-row p { margin:.25rem 0; color:var(--muted); }
.person-row { display:flex; align-items:center; gap:.65rem; min-width:0; color:var(--ink); text-decoration:none; }
.person-row .avatar, .comment .avatar { width:42px; height:42px; }
.avatar-wrap { display:inline-flex; flex:none; }
.note-card { border-left:3px solid var(--amber); padding:.8rem 1rem; background:var(--bg-2); }
.note-card header { display:flex; justify-content:space-between; gap:1rem; }
.link-list { display:grid; }
.link-list a { display:grid; padding:.65rem 0; border-bottom:1px solid var(--line-soft); text-decoration:none; }
.link-list a:last-child { border:0; }
.link-list small { margin-top:.2rem; }
.mini-spec { display:grid; gap:.55rem; margin:.8rem 0; }
.mini-spec > div { display:grid; grid-template-columns:minmax(90px,.35fr) 1fr; gap:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--line-soft); }
.mini-spec dt { color:var(--muted); font-size:.78rem; }
.mini-spec dd { margin:0; }
.private-note { border-left:2px solid var(--amber); padding-left:.6rem; color:var(--muted); }

.filter-tabs { display:flex; gap:.25rem; overflow-x:auto; margin-bottom:1rem; padding:.5rem; }
.filter-tabs a { flex:none; padding:.5rem .7rem; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; text-transform:capitalize; }
.filter-tabs a.active { color:var(--green); border-bottom-color:var(--green); }
.notification-list { padding:0; overflow:hidden; }
.notification-row { border-bottom:1px solid var(--line-soft); }
.notification-row:last-child { border:0; }
.notification-row button { width:100%; display:flex; align-items:center; gap:.8rem; text-align:left; border:0; background:transparent; padding:1rem; cursor:pointer; color:var(--ink); }
.notification-row.unread { background:#1e2a1e; }
.notification-row.read { opacity:.72; }
.notification-row .signal-dot { background:var(--line); }
.notification-row.unread .signal-dot { background:var(--green); }

.event-list { display:grid; gap:.8rem; }
.event-card { display:flex; gap:1rem; }
.event-card.cancelled { opacity:.65; }
.date-block { width:72px; min-height:88px; display:grid; place-items:center; align-content:center; flex:none; border:1px solid var(--line); background:var(--bg-2); font-family:var(--mono); }
.date-block strong { color:var(--amber); text-transform:uppercase; font-size:.75rem; }
.date-block b { font-size:2rem; line-height:1; }
.date-block small { font-size:.65rem; }

.comment-list { display:grid; gap:.65rem; }
.comment { display:flex; gap:.75rem; padding:.85rem; background:var(--bg-2); border:1px solid var(--line-soft); }
.comment.reply { margin-left:2.5rem; border-left:3px solid var(--line); }
.comment.helpful { border-left:3px solid var(--green); }
.comment > div:last-child { flex:1; min-width:0; }
.comment header { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.comment time { color:var(--muted); font-size:.75rem; }
.comment-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.comment-form { display:grid; gap:.7rem; margin:1rem 0; }
.prose { overflow-wrap:anywhere; }
.prose > *:first-child { margin-top:0; }
.prose > *:last-child { margin-bottom:0; }
.prose img { border:1px solid var(--line); }
.prose pre { overflow:auto; background:#0d0f0e; padding:1rem; border:1px solid var(--line); }
.prose blockquote { margin-left:0; border-left:3px solid var(--amber); padding-left:1rem; color:var(--muted); }
.safety-note { border-left:4px solid var(--amber); background:#332a20; }
.plain-pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#101210; border:1px solid var(--line-soft); padding:.75rem; color:var(--muted); }
.plain-pre.compact { max-width:360px; max-height:150px; overflow:auto; font-size:.72rem; }

.editor-heading { align-items:center; }
.editor-state { display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border:1px solid var(--line); background:var(--panel); color:var(--muted); font:.72rem var(--mono); text-transform:uppercase; }
.editor-state.unsaved i, .editor-state.unpublished i { background:var(--amber); }
.editor-state.sync_failed i, .editor-state.offline i { background:var(--red); }
.editor-layout, .settings-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:1rem; align-items:start; }
.editor-tabs, .settings-nav { position:sticky; top:calc(var(--topbar-h) + 1rem); display:grid; gap:.25rem; padding:.7rem; }
.editor-tabs a, .settings-nav a { padding:.55rem .6rem; text-decoration:none; color:var(--muted); border-left:2px solid transparent; }
.editor-tabs a:hover, .settings-nav a:hover { color:var(--green); border-left-color:var(--green); background:var(--bg-2); }
.editor-main { min-width:0; display:grid; gap:1rem; }
.editor-section { margin-top:1rem; }
.section-title { display:flex; gap:.8rem; align-items:center; margin-bottom:1rem; }
.section-title > span { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); background:var(--bg-2); color:var(--amber); font:700 .75rem var(--mono); }
.section-title h2 { margin:0; }
.color-grid label span { font-size:.7rem; }
.module-list { display:grid; gap:.6rem; }
.module-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.75rem; align-items:start; padding:.75rem; border:1px solid var(--line); background:var(--bg-2); }
.module-row.dragging { opacity:.55; border-color:var(--green); }
.drag-handle { cursor:grab; padding:.5rem; font-family:var(--mono); color:var(--muted); user-select:none; }
.module-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.module-delete { align-self:center; }
.media-editor-grid, .split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.media-preview { width:100%; max-height:220px; object-fit:cover; border:1px solid var(--line); }
.avatar-preview { width:100px; height:100px; border-radius:50%; }
.version-list { display:grid; gap:.5rem; margin-top:1rem; }
.version-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem; border:1px solid var(--line-soft); background:var(--bg-2); }
.version-row span { display:grid; }

/* Public Bench container: global shell remains usable while the personal space can be eccentric. */
.bench-page { --bench-primary:#9acb7b; --bench-secondary:#d8c7a5; --bench-accent:#eca152; --bench-bg:#171918; --bench-panel:#242824; --bench-text:#f2ead9; --bench-muted:#aaa596; --bench-link:#9acb7b; --bench-border:#4d554d; color:var(--bench-text); background:var(--bench-bg); border:1px solid var(--bench-border); padding:clamp(.7rem,2vw,1.4rem); }
.bench-page a { color:var(--bench-link); }
.bench-header { min-height:230px; display:flex; align-items:flex-end; gap:1rem; padding:1.3rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--bench-panel),var(--bench-bg)); border:1px solid var(--bench-border); }
.bench-header.has-image::before { content:""; position:absolute; inset:0; background:var(--bench-header-image) center/cover; opacity:.78; }
.bench-header::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.8)); }
.bench-header > * { position:relative; z-index:1; }
.bench-header .avatar, .bench-header .avatar-fallback { width:96px; height:96px; border:3px solid var(--bench-primary); }
.bench-grid { display:grid; gap:1rem; margin-top:1rem; }
.bench-grid.one-column { grid-template-columns:1fr; }
.bench-grid.two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bench-grid.asymmetrical { grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr); }
.bench-module { background:var(--bench-panel); border:1px solid var(--bench-border); padding:1rem; color:var(--bench-text); }
.bench-module.width-full, .bench-module.width-wide { grid-column:1/-1; }
.bench-module.width-narrow { max-width:520px; }
.bench-standard-action { position:sticky; top:calc(var(--topbar-h) + .5rem); z-index:30; display:flex; justify-content:flex-end; margin-bottom:.5rem; }
.soundtrack-player { display:grid; gap:.4rem; background:var(--bench-panel); border:1px solid var(--bench-border); padding:1rem; margin-top:1rem; }
.soundtrack-player audio { width:100%; }
.image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.image-grid img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--line); }
.file-list { display:grid; gap:.4rem; }
.file-list a { display:flex; gap:.7rem; align-items:center; padding:.65rem; background:var(--bg-2); border:1px solid var(--line-soft); text-decoration:none; }
.file-list a span { font-size:1.4rem; }
.file-list a strong { flex:1; }

.project-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1rem; align-items:start; }
.project-main, .project-aside { display:grid; gap:1rem; }
.project-header { overflow:hidden; padding:0; }
.project-cover { width:100%; max-height:420px; object-fit:cover; border-bottom:1px solid var(--line); }
.project-header-copy { padding:clamp(1rem,3vw,2rem); }
.project-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--muted); }
.project-updates { position:relative; }
.update-list { display:grid; gap:.8rem; }
.update { display:grid; grid-template-columns:130px minmax(0,1fr); gap:1rem; }
.update-marker { display:grid; align-content:start; justify-items:start; gap:.4rem; font-family:var(--mono); }
.update-marker i { width:18px; height:18px; border-radius:50%; background:var(--amber); border:4px solid var(--bg); box-shadow:0 0 0 1px var(--line); }
.update-details { display:grid; gap:.45rem; }
.update-details details { border-left:2px solid var(--line); padding-left:.75rem; }
.label-group { margin-bottom:1rem; }

.settings-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.settings-card { color:var(--ink); text-decoration:none; min-height:180px; }
.settings-card > span { color:var(--amber); font:700 .7rem var(--mono); }
.settings-card p { color:var(--muted); }
.settings-card:hover { border-color:var(--green); transform:translateY(-2px); }
.danger-zone { border-color:#74423e; }
.membership-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.membership-card.current { border-color:var(--green-deep); }
.price { color:var(--green); font:900 1.45rem var(--mono); }
.check-list { padding-left:1.2rem; color:var(--muted); }
.check-list li { margin:.35rem 0; }
.check-list li::marker { color:var(--green); }
.impact-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.55rem; margin-bottom:1rem; }
.impact-grid > div { display:grid; text-align:center; padding:.8rem; background:var(--bg-2); border:1px solid var(--line-soft); }
.impact-grid strong { font-size:1.7rem; color:var(--amber); }
.impact-grid span { color:var(--muted); font-size:.75rem; }
.session-row .signal-dot.current { background:var(--green); }

.metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:1rem; }
.metric { display:grid; min-height:120px; }
.metric span { color:var(--muted); text-transform:capitalize; }
.metric strong { color:var(--green); font:900 2rem var(--mono); align-self:end; }
.report-card header, .bulletin-note header { display:flex; justify-content:space-between; gap:1rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th, td { text-align:left; vertical-align:top; padding:.75rem; border-bottom:1px solid var(--line-soft); }
th { color:var(--amber); font:700 .69rem var(--mono); letter-spacing:.08em; text-transform:uppercase; background:var(--bg-2); position:sticky; top:0; }
td { color:var(--muted); }
td strong, td code { color:var(--ink); }
.preference-table { min-width:600px; }

@media (max-width: 1120px) {
  :root { --rail-w:240px; }
  .feature-grid, .card-grid, .settings-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .choice-grid, .theme-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project-layout { grid-template-columns:minmax(0,1fr) 280px; }
}

@media (max-width: 860px) {
  .app-shell { display:block; }
  .site-rail { position:fixed; left:0; top:0; transform:translateX(-105%); width:min(86vw,310px); transition:transform .2s ease; }
  body.nav-open .site-rail { transform:translateX(0); }
  body.nav-open { overflow:hidden; }
  .rail-close, .nav-open { display:inline-grid; }
  .topbar { padding:0 1rem; }
  .page-content { padding:1rem 1rem 6rem; }
  .mobile-dock { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:0; right:0; bottom:0; z-index:85; background:#151816; border-top:1px solid var(--line); padding:max(.35rem,env(safe-area-inset-bottom)) .3rem .35rem; }
  .mobile-dock a { position:relative; display:grid; place-items:center; gap:.15rem; color:var(--muted); text-decoration:none; font-size:.65rem; min-height:50px; }
  .mobile-dock a span { font-size:1.1rem; }
  .mobile-dock a.active { color:var(--green); }
  .mobile-dock .dock-create span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#111; margin-top:-17px; }
  .mobile-dock b { position:absolute; top:0; right:22%; background:var(--amber); color:#111; min-width:17px; height:17px; display:grid; place-items:center; border-radius:999px; }
  .site-footer { padding-bottom:5rem; }
  .hero { grid-template-columns:1fr; min-height:0; }
  .patch-panel { min-height:340px; }
  .content-with-aside, .content-with-aside.wide-aside, .project-layout { grid-template-columns:1fr; }
  .sticky { position:static; }
  .editor-layout, .settings-layout { grid-template-columns:1fr; }
  .editor-tabs, .settings-nav { position:static; display:flex; overflow-x:auto; }
  .editor-tabs a, .settings-nav a { flex:none; border-left:0; border-bottom:2px solid transparent; }
  .field-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .media-editor-grid, .split-grid { grid-template-columns:1fr; }
  .crew-hero { align-items:flex-start; flex-wrap:wrap; }
  .hero-actions { justify-items:start; }
  .bench-grid.two-column, .bench-grid.asymmetrical { grid-template-columns:1fr; }
  .bench-module.width-full, .bench-module.width-wide { grid-column:auto; }
  .project-aside { grid-row:2; }
  .settings-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .impact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  body { font-size:15px; }
  .topbar { height:60px; }
  :root { --topbar-h:60px; }
  .page-ident .eyebrow { display:none; }
  .top-actions .button { display:none; }
  .network-state span { display:none; }
  .page-heading, .page-title-row, .section-head { align-items:flex-start; flex-direction:column; gap:.7rem; }
  .page-title-row h1 { font-size:2.25rem; }
  .feature-grid, .card-grid, .card-grid.compact, .settings-card-grid, .metric-grid, .membership-grid { grid-template-columns:1fr; }
  .field-grid.two, .field-grid.three, .color-grid { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar { align-items:stretch; flex-direction:column; }
  .toolbar .grow, .toolbar label { min-width:0; width:100%; }
  .toolbar .button { width:100%; }
  .jack-grid { grid-template-columns:1fr; }
  .patch-panel { min-height:560px; }
  .masonry-grid { columns:1; }
  .module-row { grid-template-columns:auto minmax(0,1fr); }
  .module-delete { grid-column:2; }
  .update { grid-template-columns:1fr; }
  .update-marker { display:flex; align-items:center; }
  .comment.reply { margin-left:1rem; }
  .event-card { align-items:flex-start; }
  .date-block { width:58px; }
  .report-card header, .bulletin-note header { display:grid; }
  .inline-form { flex-wrap:wrap; }
  .inline-form input, .inline-form select { width:100%; }
  .impact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .crew-avatar.large { width:72px; height:72px; }
  .popover, .popover.right { position:fixed; left:1rem; right:1rem; bottom:calc(4.5rem + env(safe-area-inset-bottom)); top:auto; max-height:70vh; overflow:auto; }
  .site-footer { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

@media (prefers-contrast: more) {
  :root { --line:#8a928a; --muted:#d0cbbf; }
  .panel, input, select, textarea, .button { border-width:2px; }
}

@media print {
  .site-rail, .topbar, .mobile-dock, .site-footer, .button, button, form { display:none !important; }
  .app-shell, .work-area { display:block; }
  body { background:white; color:black; }
  .page-content { max-width:none; padding:0; }
  .panel { box-shadow:none; background:white; color:black; border:1px solid #777; break-inside:avoid; }
  h1,h2,h3,.prose,td { color:black; }
  a { color:black; text-decoration:underline; }
}