/* Flaptown Design v5 — the shared sheet for flaptown.com.
   Standard: FlaptownDesign/v5/STANDARD.md. Materials match benchlight/css/v5.css; this adds the page layer
   (type scale, sections, cards, keys, the header and the footer). One light, top left: every bevel, carve and glint obeys it.
   Use the tokens and classes here; invent none. */
@font-face { font-family: "Syne Mono"; src: url("/SyneMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --onyx: #0e1010; --plate: #161818; --plate-hi: #1b1e1e; --pocket: #080909; --mocha: #412828;
  --clay: #a46f67; --rose: #b7958c; --oak: #c9bab0; --rose2: #b19a98; --mauve: #6a4f5c; --dusty: #937f6d;
  --dim: #737078; --indigo: #3e4158;
  --done: #9ea3c8; --working: #d4b07a; --failed: #e07a62;
  --ease: cubic-bezier(.45, .1, .25, 1);
  --carve: 0 -1px 1px #000000f2, -1px -1px 1px #000000a6, 0 1px 0 #c9bab052;
  --font: "Syne Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --page: 1200px; --measure: 680px; --gutter: 30px;
  /* old names, mapped, so section sheets written before v5 land on v5 colours */
  --bg: var(--onyx); --surface: var(--plate); --line: var(--mocha); --ink: var(--oak); --muted: var(--rose); --accent: var(--clay);
}

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--onyx); color: var(--oak); font: 400 15px/25px var(--font);
  text-shadow: var(--carve); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
body, body * { font-family: var(--font) !important; font-weight: 400 !important; }
::selection { background: var(--mauve); color: var(--oak); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--rose); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--clay) 60%, transparent); text-underline-offset: 4px; transition: color .14s ease; }
a:hover { color: var(--oak); }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
h1 { font-size: 32px; line-height: 40px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 18px; line-height: 26px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 400; color: var(--oak); }
em, i { font-style: normal; color: var(--rose); }
code, kbd, pre { font-family: var(--font); }
svg:not(.flat) { filter: drop-shadow(0 -1px 1px #000000f2) drop-shadow(-1px -1px 1px #000000a6) drop-shadow(0 1px 0 #c9bab052); }
hr { border: 0; height: 1px; background: var(--mocha); margin: 30px 0; }

.lbl { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.cap { font-size: 11px; line-height: 16px; letter-spacing: .04em; }
.small { font-size: 13px; line-height: 20px; }
.subtle { color: var(--dusty); }
.muted { color: var(--rose); }
.display { font-size: 48px; line-height: 56px; letter-spacing: .5em; text-transform: uppercase; }
.house { font-size: 11px; line-height: 16px; letter-spacing: .42em; text-transform: uppercase; color: var(--dim); }
.measure { max-width: var(--measure); }
.skip { position: fixed; top: -100px; left: 16px; z-index: 50; padding: 10px 15px; background: var(--plate); color: var(--oak); border-radius: 6px; }
.skip:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- materials ---------- */
/* plate: the milled body; grain runs the way it was milled */
.plate { background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px); }
.plate.v { background: var(--plate) repeating-linear-gradient(90deg, #c9bab003 0 1px, transparent 1px 3px); }
.panel { position: relative; background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px); border-radius: 12px; padding: 30px;
  box-shadow: inset 0 1px 0 #c9bab014, inset 1px 0 0 #c9bab00a, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 10px 24px #00000080; }
/* pocket: a recess cut into a plate */
.pocket { position: relative; background: var(--pocket); border-radius: 12px; padding: 6px;
  box-shadow: inset 0 4px 10px -3px #000000e6, inset 0 2px 0 #000, inset 4px 0 8px -5px #000000b3, inset -4px 0 8px -5px #000000b3, inset 0 -1px 0 var(--mocha); }
/* window: a display set into a pocket */
.window { position: relative; display: block; overflow: hidden; background: var(--onyx) linear-gradient(180deg, #c9bab012 0%, #c9bab005 40%, transparent 41%);
  border: 1px solid var(--mocha); border-radius: 8px; box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -2px 6px #00000099, 0 1px 2px #000; }
/* glass: the pane over a window */
.glass { position: absolute; inset: 2px; z-index: 2; border-radius: 7px; pointer-events: none;
  background: radial-gradient(130% 90% at 12% -10%, #c9bab017 0%, #c9bab006 40%, transparent 60%),
    linear-gradient(116deg, transparent 6%, #c9bab005 14%, #c9bab00c 20%, #c9bab012 26%, #c9bab00c 32%, #c9bab005 38%, transparent 46%),
    linear-gradient(116deg, transparent 50%, #c9bab004 56%, #c9bab008 62%, #c9bab004 68%, transparent 74%), linear-gradient(180deg, transparent 65%, #00000029 100%);
  border: 1px solid #c9bab01a;
  box-shadow: inset 0 1px 0 #c9bab040, inset 1px 0 0 #c9bab01c, inset -1px 0 0 #00000080, inset 0 -1px 0 #0000009e, inset 0 0 0 2px #c9bab007, inset 0 0 8px #c9bab00a; }
.glass::before { content: ""; position: absolute; top: 1px; left: 10%; right: 34%; height: 1px; background: linear-gradient(90deg, transparent, #e6d8cd59 35%, #e6d8cd33 70%, transparent); }
.glass::after { content: ""; position: absolute; top: 18%; bottom: 18%; left: 1px; width: 1px; background: linear-gradient(180deg, transparent, #e6d8cd26 40%, transparent); }
/* a picture behind glass: <span class="window shot"><img …><span class="glass"></span></span> */
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; filter: saturate(.85) brightness(.92); }
/* well: the deep floor */
.well { background: radial-gradient(120% 80% at 50% 0%, #121414 0%, #0a0b0b 60%, #060707 100%); border-radius: 12px;
  box-shadow: inset 0 10px 24px -8px #000000f2, inset 0 2px 0 #000, inset 0 -1px 0 var(--mocha); }
/* field: a place to type */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select, .field {
  font: inherit; color: var(--oak); caret-color: var(--rose); background: var(--pocket); border: 1px solid #000; border-bottom-color: var(--mocha);
  border-radius: 6px; min-height: 44px; padding: 9px 12px; text-shadow: none;
  box-shadow: inset 0 3px 6px -2px #000000e6, inset 0 1px 0 #000, 0 1px 0 #c9bab00f; }
textarea { min-height: 100px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--dusty); }
input[type=checkbox], input[type=radio] { accent-color: var(--clay); width: 18px; height: 18px; }

/* ---------- keys ---------- */
.btn, .key { --c: var(--dim); --f: #3e415833; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit;
  min-height: 44px; padding: 0 20px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; background: var(--f); border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--oak); text-shadow: var(--carve);
  box-shadow: 0 3px 0 #000, 0 6px 14px #00000099, inset 0 1px 0 #c9bab00f; white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, transform .08s ease, box-shadow .08s ease, opacity .2s; }
.btn:hover, .key:hover { color: var(--oak); border-color: var(--c); background: color-mix(in srgb, var(--f) 100%, #c9bab0 6%); }
.btn:active, .key:active, .btn.down { transform: translateY(2px); box-shadow: 0 1px 0 #000, inset 0 1px 0 #c9bab00a; }
.btn.primary, .key.primary { --c: var(--rose); --f: #b7958c26; }
.btn.hot, .key.hot { --c: var(--clay); --f: #a46f6740; }
.btn.secondary, .key.secondary { --c: var(--indigo); --f: #3e415866; }
.btn:disabled, .key[aria-disabled=true] { opacity: .38; cursor: default; transform: none; }
.btn.half, .key.half { min-height: 32px; padding: 0 12px; }
.keys { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
/* round key for icon actions */
.rb { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; color: var(--oak); background: #3e415833;
  border: 1.5px solid #737078b3; box-shadow: 0 3px 0 #000, 0 6px 14px #00000099, inset 0 1px 0 #c9bab00f; }
.rb:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

/* ---------- tiles, lists, lamps, cells, status ---------- */
.lp { position: relative; background: var(--pocket); border-radius: 6px; overflow: hidden; }
.lp > .sc { overflow-y: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: var(--mocha) transparent; }
.lp::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 12px 12px -8px #000000f2, inset 0 2px 0 #000, inset 6px 0 10px -6px #000000b3, inset -6px 0 10px -6px #000000b3, inset 0 -12px 12px -9px #000000e6, inset 0 -1px 0 var(--mocha); }
.it { font-family: inherit; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left;
  color: var(--oak); font-size: 13px; line-height: 20px; text-decoration: none; background: var(--plate); border: 0; border-radius: 3px; text-shadow: var(--carve);
  box-shadow: 0 1px 0 #000, 0 2px 4px #000000b3, inset 0 1px 0 #c9bab012; cursor: pointer; transition: background-color .12s ease, transform .08s ease, box-shadow .08s ease; }
.it:hover { background: var(--plate-hi); color: var(--oak); }
.it:active { transform: translateY(1px); box-shadow: 0 0 0 #000, inset 0 1px 0 #c9bab00a; }
.it .t { flex: 1; min-width: 0; }
.it .ts { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--dusty); }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 999px; flex: none; background: #0a0b0b; vertical-align: middle;
  box-shadow: 0 0 0 1.5px #050606, 0 1px 0 2px #c9bab012, inset 0 1px 2px #000; }
.led.on { background: radial-gradient(circle at 35% 35%, #f6c9b8 0%, #e07a62 55%, #a46f67 100%); box-shadow: 0 0 0 1.5px #050606, 0 1px 0 2px #c9bab012, 0 0 6px 1px #e07a6299; animation: led-on .28s var(--ease); }
.led.cool.on { background: radial-gradient(circle at 35% 35%, #e3e6f6 0%, #9ea3c8 55%, #3e4158 100%); box-shadow: 0 0 0 1.5px #050606, 0 1px 0 2px #c9bab012, 0 0 6px 1px #9ea3c899; }
@keyframes led-on { 0% { transform: scale(.2); opacity: 0; } 60% { opacity: 1; transform: scale(1.15); } }
.cells { display: inline-block; letter-spacing: 0 !important; white-space: pre; color: var(--oak);
  background-image: repeating-linear-gradient(90deg, #c9bab00c 0 calc(1ch - 1px), transparent calc(1ch - 1px) 1ch); background-size: 100% 78%; background-position: 0 55%; background-repeat: repeat-x;
  text-shadow: 0 0 1px currentColor, 0 0 6px color-mix(in srgb, currentColor 38%, transparent); }
.cur { display: inline-block; width: 1ch; height: .9em; margin-left: 2px; vertical-align: -.1em; background: var(--rose); box-shadow: 0 0 6px #b7958c99; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.live { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.st { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.st.done { color: var(--done); } .st.working { color: var(--working); } .st.failed { color: var(--failed); } .st.wait { color: var(--dusty); }
.trace { background: var(--pocket); border-radius: 6px; padding: 4px 0; box-shadow: inset 0 3px 8px -3px #000000e6, inset 0 1px 0 #000, inset 0 -1px 0 var(--mocha); }
.tr { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 6px 12px; font-size: 13px; line-height: 20px; }
.tr + .tr { border-top: 1px solid #1d1414; }

/* ---------- page layer ---------- */
.v5-main, main.v5 { display: block; width: min(var(--page), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 40px 0 60px; }
.sec { margin: 0 0 60px; }
.sec-head { display: flex; align-items: center; gap: 15px; margin: 0 0 20px; color: var(--rose); }
.sec-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--mocha), transparent); box-shadow: 0 1px 0 #000; }
.intro { display: grid; gap: 15px; max-width: var(--measure); margin: 20px 0 40px; }
.intro .status { display: flex; align-items: center; gap: 10px; color: var(--done); }
.intro p { color: var(--rose); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
/* a card: a plate part with an optional picture window */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 15px 15px 20px; color: var(--oak); text-decoration: none; border-radius: 12px;
  background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 #c9bab014, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 8px 20px #00000080; transition: transform .08s ease, box-shadow .08s ease; }
a.card:hover { color: var(--oak); box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 8px 20px #00000080, 0 0 0 1px #b7958c40; }
a.card:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #c9bab00f, 0 1px 0 #000, 0 4px 10px #00000080; }
.card .window { margin: 0 0 5px; }
.card .lbl { color: var(--rose); padding: 0 5px; }
.card h2, .card h3, .card strong { padding: 0 5px; }
.card p, .card .body { padding: 0 5px; color: var(--rose); font-size: 13px; line-height: 20px; }
.card .go { margin-top: auto; padding: 5px 5px 0; color: var(--oak); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.card .go::after { content: " →"; color: var(--clay); }
/* readouts: a row of windows (the startup board) */
.readouts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; }
.readouts > * { padding: 12px 18px; }
.readouts > * + * { border-left: 1px solid var(--mocha); }
.readouts .v { font-size: 24px; line-height: 32px; }
.readouts dd { margin: 0; }
/* prose for policies and long text */
.prose { max-width: var(--measure); }
.prose h2 { margin: 40px 0 10px; }
.prose h3 { margin: 30px 0 10px; color: var(--rose); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 15px; }
.prose li + li { margin-top: 5px; }
.prose li::marker { color: var(--clay); }
table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 20px; }
th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--mocha); vertical-align: top; }

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .panel { padding: 20px 15px; }
  .readouts > * + * { border-left: 0; border-top: 1px solid var(--mocha); }
  .v5-main, main.v5 { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }