/* neutral.css — the shared "neutral system" (2026-08-31 rework, Phill's call). One warm-dark design plus a light expression, shared by every page people READ: /schedule, /schedule/board, and the whole admin panel. The kiosk pages keep the phosphor-CRT look and do NOT load this file — home.css is theirs alone and is untouched by this rework. Only tokens and shared chrome live here (header, panels, the theme toggle); schedule.css / board.css / admin.css load after this and lean on the variables. Dark is the default; flips the whole set (theme.js applies the stored per-device choice before first paint). The kinship is deliberate: this is the Film Club's register — warm near-black, paper ink, hairline rules, flat depth — wearing the Timeclock's own amber and green. Amber = the one action/attention color; green is reserved for you / good / money. DESIGN.md owns the rules. */ :root { --c: #171512; /* canvas — warm near-black, not gray */ --r: #211d17; /* raised surface: panels, cards, inputs */ --l: #38332a; /* hairlines + borders */ --l-soft: rgba(56, 51, 42, .55); --i: #ece7dc; /* primary ink — warm paper white */ --m: #a29a89; /* muted ink — secondary text + labels */ --a: #d9a55d; /* amber — action + attention */ --a-soft: rgba(217, 165, 93, .10); --g: #b3d188; /* green — you / good / money, sparingly */ --g-soft: rgba(179, 209, 136, .08); --del: #c97a4e; /* destructive actions */ --err: #e0796a; /* errors/validation only */ --ease-out: cubic-bezier(.23, 1, .32, 1); } html[data-theme="light"] { --c: #f6f4ee; --r: #fffdf8; --l: #ded8cc; --l-soft: rgba(222, 216, 204, .7); --i: #26241f; --m: #6b6558; --a: #7d5518; --a-soft: rgba(125, 85, 24, .08); --g: #4f6636; --g-soft: rgba(79, 102, 54, .08); --del: #93431f; --err: #b3402e; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { background: var(--c); color: var(--i); font-family: 'Libre Franklin', -apple-system, system-ui, 'Segoe UI', sans-serif; font-size: 15.5px; line-height: 1.55; } /* JetBrains Mono survives as the brand thread: the wordmark, times, PINs, and money — fixed-width digits keep every column aligned. */ .mono, .wordmark { font-family: 'JetBrains Mono', ui-monospace, monospace; } .hidden { display: none !important; } .dim { color: var(--m); } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .lobby { width: min(680px, 94vw); margin: 0 auto; padding: 22px 18px 60px; } /* Header — "PIERRE'S" + the page name left; actions right (theme toggle + nav chips on one compact row; the wordmark dropped "// TIMECLOCK" to pay for the toggle's space — Phill, 2026-08-31). */ .hdr { border-bottom: 1px solid var(--l); padding-bottom: 12px; margin-bottom: 20px; } .hdr-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .wordmark { font-weight: 700; letter-spacing: 2px; font-size: 15px; white-space: nowrap; } .subline { color: var(--m); font-size: 14px; margin-top: 7px; } .hdr-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .hchip { display: inline-block; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid var(--l); color: var(--m); padding: 8px 10px; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .hchip:active { background: var(--l); color: var(--i); } .hchip.acc { color: var(--a); border-color: var(--a); } .hchip.acc:active { background: var(--a-soft); } /* The dark/light toggle. The icon shows the mode a tap would GET. */ .theme-btn { width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--l); background: transparent; color: var(--m); -webkit-tap-highlight-color: transparent; } .theme-btn:active { background: var(--l); color: var(--i); } .theme-btn svg { width: 18px; height: 18px; } .theme-btn .ico-moon { display: none; } html[data-theme="light"] .theme-btn .ico-moon { display: block; } html[data-theme="light"] .theme-btn .ico-sun { display: none; } .panel { border: 1px solid var(--l); background: var(--r); padding: 16px 14px; } .panel-title { font-weight: 600; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--m); margin-bottom: 12px; } /* Inline line-art icons (star / ban / theme), themed via currentColor. */ .ph { width: 1.05em; height: 1.05em; vertical-align: -0.16em; display: inline-block; }