/* Flaptown Design v5 — the materials. Values from the v5 boards (FlaptownDesign/v5/STANDARD.md).
   One light source, top-left; every bevel, carve and glint below obeys it. */
@font-face { font-family: "Syne Mono"; src: url("../fonts/SyneMono-Regular.ttf") format("truetype"); font-display: block; font-weight: 400; }

:root {
  --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;
}
html, body { margin: 0; height: 100%; background: var(--onyx); color: var(--oak); font: 400 15px/25px var(--font); font-synthesis: none; }
body { text-shadow: var(--carve); -webkit-font-smoothing: antialiased; }
svg { filter: drop-shadow(0 -1px 1px #000000f2) drop-shadow(-1px -1px 1px #000000a6) drop-shadow(0 1px 0 #c9bab052); }
::selection { background: var(--mauve); color: var(--oak); }
a { color: var(--rose); } a:hover { color: var(--oak); }
.lbl { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.cap { font-size: 11px; line-height: 16px; letter-spacing: .04em; }
.subtle { color: var(--dusty); }

/* plates: grain runs the way each plate 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); }
/* 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); }
/* a display set into a pocket */
.window { position: relative; 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; }
/* the pane over it */
.glass { position: absolute; inset: 2px; border-radius: 10px; 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, 0 1px 0 #c9bab00a, 0 2px 5px #000000b3; }
.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); }

/* keys: physical, they go down */
.btn { --c: var(--dim); --f: #3e415833; font-family: inherit; min-height: 44px; padding: 0 20px; border-radius: 6px; cursor: pointer; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  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;
  transition: background-color .14s ease, border-color .14s ease, transform .08s ease, box-shadow .08s ease, opacity .2s; }
.btn:hover { border-color: var(--c); background: color-mix(in srgb, var(--f) 100%, #c9bab0 6%); }
.btn:active, .btn.down { transform: translateY(2px); box-shadow: 0 1px 0 #000, inset 0 1px 0 #c9bab00a; }
.btn.primary { --c: var(--rose); --f: #b7958c26; }
.btn.hot { --c: var(--clay); --f: #a46f6740; }
.btn:disabled { opacity: .38; cursor: default; transform: none; }
.btn.half { min-height: 32px; padding: 0 12px; }
.btn kbd { font-family: inherit; color: var(--dusty); margin-left: 8px; font-size: 11px; }
.btn:focus-visible, .ib:focus-visible, [tabindex]:focus-visible, button:focus-visible { outline: 2px solid var(--oak); outline-offset: 2px; }

/* a list in a recess: rows slide under the lip */
.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); }
/* tiles resting on a pocket floor */
.it { font-family: inherit; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; box-sizing: border-box; text-align: left;
  color: var(--oak); font-size: 13px; line-height: 20px; 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; user-select: none; }
.it:hover { background: var(--plate-hi); }
button.it:active { transform: translateY(1px); box-shadow: 0 0 0 #000, inset 0 1px 0 #c9bab00a; }
.it .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .ts { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--dusty); }

/* a lamp in a drilled socket */
.led { display: inline-block; width: 7px; height: 7px; border-radius: 999px; flex: none; background: #0a0b0b;
  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); } }

/* character cells: letters glow from within; one glyph per cell */
.cells { display: inline-block; letter-spacing: 0 !important; white-space: pre;
  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; } }

/* status words, always with text */
.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); }

/* a numbered checklist behind glass (the startup readout) */
.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; }
.tr .arg { color: var(--dusty); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }