/* OVERSIGHT — Claude Code usage tracker · shared stylesheet Theme: cold-war paper dossier. Fonts: Special Elite (display), Courier Prime (body). Dark mode: . All colors flow through the tokens below. */ /* Self-hosted fonts (Apache/OFL licensed) — no external origins, per CSP. */ @font-face{ font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/special-elite-400.woff2') format('woff2'); } @font-face{ font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/courier-prime-400.woff2') format('woff2'); } @font-face{ font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap; src:url('/fonts/courier-prime-700.woff2') format('woff2'); } :root{ --desk:#C9B98F; /* page background (the desk) */ --paper:#F0E8D4; /* main folder paper */ --paper2:#FAF5E8; /* inner cards / table paper */ --manila:#D9CBA8; /* folder tabs, photo frames */ --ink:#2b2417; --ink-soft:#6d5f3f; --line:#b3a276; --line-soft:#cbbd94; --red:#B02E20; --red-bg:#f7ded9; --green:#3f6b3f; --amber:#8a6d1a; --shadow:rgba(60,45,10,.3); --photo:#cbbd94; } [data-theme="dark"]{ --desk:#12100c; --paper:#221e15; --paper2:#2a2519; --manila:#332c1e; --ink:#e6dcc2; --ink-soft:#a3946e; --line:#55492f; --line-soft:#3f3624; --red:#e05a4a; --red-bg:#3a1812; --green:#8fbb8f; --amber:#d1a63c; --shadow:rgba(0,0,0,.5); --photo:#3f3624; } *{box-sizing:border-box} body{margin:0;background:var(--desk);color:var(--ink);font:14px/1.5 'Courier Prime',monospace} a{color:var(--ink);text-decoration:underline} a:hover{color:var(--red)} h1,h2,h3{font-family:'Special Elite',monospace;font-weight:400;margin:0} button{font:inherit;color:inherit;background:none;border:1px solid var(--ink);padding:4px 12px;cursor:pointer} button:hover{background:var(--ink);color:var(--paper)} input,select{font:inherit;color:var(--ink);background:var(--paper2);border:none;border-bottom:2px solid var(--ink);padding:6px 4px;outline:none} input:focus{border-bottom-color:var(--red)} /* ---------- layout ---------- */ .sheet{max-width:1240px;margin:24px auto 60px;padding:0 16px;display:flex;gap:0} .punch{width:26px;flex:none;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:60px 0} .punch span{width:13px;height:13px;border-radius:50%;background:var(--desk);box-shadow:inset 1px 1px 3px var(--shadow)} .folder{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);box-shadow:0 3px 14px var(--shadow);position:relative;padding:24px 28px 32px} .tape{position:absolute;width:90px;height:22px;background:color-mix(in srgb,var(--manila) 65%,transparent);border-left:1px dashed var(--shadow);border-right:1px dashed var(--shadow)} .coffee{position:absolute;width:88px;height:88px;border-radius:50%;border:9px solid color-mix(in srgb,var(--ink-soft) 14%,transparent);pointer-events:none} section{scroll-margin-top:20px} /* ---------- header ---------- */ .masthead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:14px;gap:16px;flex-wrap:wrap} .masthead .brand{display:flex;gap:14px;align-items:center} .masthead h1{font-size:22px;letter-spacing:4px} .masthead .sub{font-size:11px;color:var(--ink-soft)} .status-strip{display:flex;align-items:center;gap:14px;font-size:11px;flex-wrap:wrap} .tap-dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--red-bg);animation:morse 3s infinite} /* Special Elite renders high on its line box; pin the label to the dot */ .tap-label{font-family:'Special Elite',monospace;line-height:1;transform:translateY(1.5px)} /* ---------- stamps & alerts ---------- */ .stamp{display:inline-block;border:3px double var(--red);color:var(--red);font-family:'Special Elite',monospace;letter-spacing:3px;padding:2px 10px;transform:rotate(-8deg);opacity:.9} .stamp.slam{animation:stamp-in .45s cubic-bezier(.2,1.4,.4,1) both} .incident{border:2px solid var(--red);background:var(--red-bg);padding:12px 150px 12px 16px;margin-bottom:20px;display:flex;gap:14px;align-items:center;position:relative} .incident .tag{font-family:'Special Elite',monospace;color:var(--red);font-weight:700;font-size:13px;white-space:nowrap} .incident .stamp{position:absolute;right:18px;top:-10px;background:var(--red-bg);font-size:13px} /* ---------- section headings ---------- */ .exhibit{font-family:'Special Elite',monospace;font-size:15px;margin:22px 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .exhibit small{font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:1px;color:var(--ink-soft)} /* ---------- live / polaroids ---------- */ .live-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .acct{border:1px dashed var(--line);padding:12px} .acct-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:10px;font-family:'Special Elite',monospace} .acct-head .ok{color:var(--green);font-family:'Courier Prime',monospace} .acct-head .bad{color:var(--red);font-weight:700;font-family:'Courier Prime',monospace} .polaroids{display:flex;gap:12px;flex-wrap:wrap} .polaroid{background:#fff;padding:7px 7px 5px;box-shadow:2px 3px 6px var(--shadow);width:106px;position:relative;color:#2b2417;animation:paper-in .5s ease-out both} [data-theme="dark"] .polaroid,[data-theme="dark"] .mugshot{--ink-soft:#6d5f3f;--green:#3f6b3f;--red:#B02E20;--red-bg:#f7ded9;--photo:#cbbd94} [data-theme="dark"] .polaroid{background:#d8d0bc} /* the caption link must take the polaroid's own ink — the global link color is cream in dark mode, unreadable on the always-light polaroid paper */ .polaroid .cap a{color:inherit} .polaroid .ptape{height:12px;margin:-14px auto 2px;width:56px;background:color-mix(in srgb,var(--manila) 70%,transparent)} .polaroid .photo{height:66px;background:var(--photo);display:flex;align-items:center;justify-content:center;font-family:'Special Elite',monospace;font-size:22px;color:var(--ink-soft)} .polaroid .cap{font-size:9.5px;line-height:1.5;padding-top:4px} .polaroid .fresh{color:var(--green)} .polaroid.missing{color:var(--red)} .polaroid.missing .photo{background:var(--red-bg);color:var(--red)} .polaroid.missing .stamp{position:absolute;top:26px;left:2px;font-size:11px;padding:1px 6px;transform:rotate(-12deg);background:rgba(255,255,255,.7)} .polaroid:nth-child(odd){transform:rotate(-2deg)} .polaroid:nth-child(even){transform:rotate(1.5deg)} /* ---------- ration gauges ---------- */ .rations{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .ration{border:1px solid var(--line);background:var(--paper2);padding:12px 14px;display:flex;gap:16px;align-items:center;position:relative} .ration.depleted{border-color:var(--red)} .ration .txt{font-size:12px;line-height:1.7} .ration .txt .t{font-family:'Special Elite',monospace;font-size:13px} .ration .stamp{position:absolute;top:8px;right:12px;font-size:11px;padding:2px 8px;transform:rotate(6deg)} .needle{transform-origin:center 93%;animation:needle-wobble 2.6s ease-in-out infinite} .blocks{font-size:15px;letter-spacing:2px} /* ---------- ledgers (tables) ---------- */ .ledger{border:1px solid var(--line);background:var(--paper2);width:100%;border-collapse:collapse;font-size:12px} .ledger th{font-size:11px;text-align:left;padding:7px 12px;border-bottom:2px solid var(--ink);font-weight:700;letter-spacing:1px} .ledger td{padding:8px 12px;border-bottom:1px dotted var(--line-soft)} .ledger tr:last-child td{border-bottom:none} .ledger .num{font-variant-numeric:tabular-nums} .model-chip{font-size:10px;color:var(--ink-soft);border:1px solid var(--line-soft);padding:0 5px;white-space:nowrap} .flag{color:var(--red);font-weight:700} .ok-check{color:var(--green)} .fresh{color:var(--green)} .stale{color:var(--red);font-weight:700;animation:pulse 1.2s infinite} /* redacted $ — declassify on hover */ .redact{background:var(--ink);color:var(--ink);padding:0 5px;cursor:pointer;transition:.15s} .redact:hover,.declassified .redact{background:var(--red-bg);color:var(--red)} /* time-range switcher */ .range{font-size:11px;display:inline-flex;gap:0} .range button{border:1px solid var(--line);border-left:none;padding:3px 10px;color:var(--ink-soft)} .range button:first-child{border-left:1px solid var(--line)} .range button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* usage-by-account panels */ .acct-usage{display:grid;grid-template-columns:1fr 1fr;gap:16px} .acct-usage .panel{border:1px solid var(--line);background:var(--paper2)} .panel-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px dashed var(--line);font-family:'Special Elite',monospace;font-size:13px;gap:8px;flex-wrap:wrap} .mismatch{font-size:10px;font-family:'Courier Prime',monospace;color:var(--red);border:1px solid var(--red);padding:1px 7px;animation:pulse 1.4s infinite} /* ---------- admin drawer ---------- */ .backoffice{border:2px dashed var(--line);padding:16px;margin-top:26px} .backoffice summary{cursor:pointer;font-family:'Special Elite',monospace;font-size:14px;letter-spacing:2px;list-style:none} .backoffice summary::before{content:"▸ "} .backoffice[open] summary::before{content:"▾ "} .forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:14px} .form-card{border:1px solid var(--line);background:var(--paper2);padding:12px;font-size:12px} .form-card .t{font-family:'Special Elite',monospace;font-size:12px;margin-bottom:8px} .form-card label{display:block;font-size:10px;letter-spacing:1px;color:var(--ink-soft);margin:8px 0 2px} .form-card input,.form-card select{width:100%} .form-card button{margin-top:10px} .danger{border-color:var(--red);color:var(--red)} .danger:hover{background:var(--red);color:var(--paper2)} /* ---------- sweep fuse (polling indicator) ---------- An ash-trail fuse: the ink line is the time left in the 30s poll window, the charred dashes behind the spark are the time already burnt. The dashboard re-lights it (drop + re-add .lit) each time the poll lands. */ .fusebar{position:relative;width:150px;height:14px;flex:none} .fusebar::after{content:"";position:absolute;left:0;right:3px;top:calc(50% - 1px);height:2px;opacity:.35; background:repeating-linear-gradient(90deg,var(--ink-soft) 0 3px,transparent 3px 6px)} .fusebar::before{content:"";position:absolute;left:0;top:calc(50% - 1px);height:2px;width:144px;background:var(--ink);z-index:1} .fusebar i{position:absolute;top:calc(50% - 3px);left:144px;width:6px;height:6px;border-radius:50%;background:var(--red);z-index:2} .fusebar.lit::before{animation:fuse-line 30s linear infinite} .fusebar.lit i{animation:fuse-spark-move 30s linear infinite,fuse-spark .7s steps(2) infinite} @keyframes fuse-line{from{width:144px}to{width:0}} @keyframes fuse-spark-move{from{left:144px}to{left:0}} @keyframes fuse-spark{50%{background:var(--amber);box-shadow:0 0 6px 2px color-mix(in srgb,var(--amber) 60%,transparent)}} /* ---------- footer ---------- */ .foot{font-size:10px;color:var(--ink-soft);margin-top:26px;text-align:center;letter-spacing:2px} /* ---------- login ---------- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .login-wrap .login-card{z-index:1} /* The edge peeker: half a keyhole eye leaning in from the left, fading in after the splash. It follows the cursor only while the cursor is over the card (spying on the form); elsewhere it slowly looks away, acting natural. Hovering the passphrase field makes it squint to read your typing. */ .peeker{position:absolute;left:-160px;top:50%;translate:0 -50%;z-index:0;animation:fade-in .8s 3.2s both} .peeker .eye-lid-cover,.peeker .eye-lid-line{transition:d .6s cubic-bezier(.4,0,.2,1)} .peeker.squint .eye-lid-cover{animation:none;d:path("M18 45 q42 -36 84 0 q-42 -8 -84 0 z")} .peeker.squint .eye-lid-line{animation:none;d:path("M18 45 q42 -8 84 0")} @media (max-width:800px){.peeker{display:none}} .login-card{width:380px;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 18px var(--shadow);padding:44px 36px;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative} /* width must cover 9 glyphs PLUS the 6px letter-spacing each adds, or the type-in clips the tail of the wordmark */ .login-card h1{font-size:28px;letter-spacing:6px;overflow:hidden;white-space:nowrap;width:calc(9ch + 54px);animation:type-in 1.4s steps(9) 1.6s both} .login-card .sub{font-size:10px;letter-spacing:3px;color:var(--ink-soft);animation:fade-in .6s 2.6s both} .login-form{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:10px;animation:fade-in .6s 3s both} .login-form label{font-size:10px;letter-spacing:2px;color:var(--ink-soft)} .login-form button{align-self:center;padding:6px 26px;font-family:'Special Elite',monospace;letter-spacing:2px} .login-err{display:none;font-size:11px;color:var(--red)} .login-card.failed .login-err{display:block} .login-card.failed{animation:shake .4s} /* ---------- person page ---------- */ .subject-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap} .mugshot{background:#fff;padding:8px 8px 20px;box-shadow:2px 3px 8px var(--shadow);transform:rotate(-2deg);color:#2b2417} [data-theme="dark"] .mugshot{background:#d8d0bc} .mugshot .photo{width:84px;height:96px;background:var(--photo);display:flex;align-items:center;justify-content:center;font-family:'Special Elite',monospace;font-size:26px;color:var(--ink-soft)} .sharebar{height:10px;border:1px solid var(--line);background:var(--paper2)} .sharebar i{display:block;height:100%;background:var(--red)} .sharebar.ink i{background:var(--ink-soft)} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px} .chart-frame{border:1px solid var(--line);background:var(--paper2);padding:8px} /* ---------- eye (logo) ---------- */ .eye-lid-cover{animation:lid-cover-blink 5s infinite} .eye-lid-line{animation:lid-line-blink 5s infinite} .eye-scan{animation:eye-scan 3.2s ease-in-out infinite} /* ---------- keyframes ---------- */ @keyframes morse{0%,8%{opacity:1}10%,16%{opacity:.15}18%,30%{opacity:1}32%,36%{opacity:.15}38%,100%{opacity:1}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes stamp-in{0%{opacity:0;transform:rotate(-8deg) scale(2.6)}70%{opacity:.9;transform:rotate(-8deg) scale(.92)}100%{opacity:.9;transform:rotate(-8deg) scale(1)}} @keyframes paper-in{0%{opacity:0;translate:0 -7px}100%{opacity:1;translate:0 0}} @keyframes needle-wobble{0%,100%{rotate:-2deg}50%{rotate:2deg}} @keyframes type-in{0%{width:0}100%{width:calc(9ch + 54px)}} @keyframes fade-in{0%{opacity:0}100%{opacity:1}} @keyframes shake{0%,100%{translate:0}25%{translate:-7px}50%{translate:6px}75%{translate:-4px}} @keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes eye-scan{0%,100%{transform:translateX(0)}18%{transform:translateX(-16px)}38%{transform:translateX(-16px)}58%{transform:translateX(16px)}78%{transform:translateX(16px)}} @keyframes iris-alert{0%,100%{fill:var(--red)}50%{fill:#6e0e04}} @keyframes eye-dart{0%,42%,100%{transform:translateX(0)}48%{transform:translateX(-10px)}56%{transform:translateX(-10px)}62%{transform:translateX(9px)}70%{transform:translateX(9px)}78%{transform:translateX(0)}} /* realistic lids: an opaque paper-colored cover morphs down from the top lid; iris/whites are painted OVER, then the lid line + static bottom lid stroke on top */ @keyframes lid-cover-blink{0%,91%{d:path("M18 45 q42 -36 84 0 q-42 -32 -84 0 z")}94%{d:path("M18 45 q42 -36 84 0 q-42 32 -84 0 z")}97%,100%{d:path("M18 45 q42 -36 84 0 q-42 -32 -84 0 z")}} @keyframes lid-line-blink{0%,91%{d:path("M18 45 q42 -32 84 0")}94%{d:path("M18 45 q42 30 84 0")}97%,100%{d:path("M18 45 q42 -32 84 0")}} @keyframes lid-cover-open{0%,30%{d:path("M18 45 q42 -36 84 0 q-42 32 -84 0 z")}55%,100%{d:path("M18 45 q42 -36 84 0 q-42 -32 -84 0 z")}} @keyframes lid-line-open{0%,30%{d:path("M18 45 q42 30 84 0")}55%,100%{d:path("M18 45 q42 -32 84 0")}} @keyframes lid-cover-squint{0%,38%{d:path("M18 45 q42 -36 84 0 q-42 -32 -84 0 z")}46%,88%{d:path("M18 45 q42 -36 84 0 q-42 -8 -84 0 z")}96%,100%{d:path("M18 45 q42 -36 84 0 q-42 -32 -84 0 z")}} @keyframes lid-line-squint{0%,38%{d:path("M18 45 q42 -32 84 0")}46%,88%{d:path("M18 45 q42 -8 84 0")}96%,100%{d:path("M18 45 q42 -32 84 0")}} @keyframes dash-draw{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}} /* ---------- app additions (not in the mock) ---------- */ .muted{color:var(--ink-soft)} /* gauge + chart state styling lives here so the templates emit classes only */ .ration .arc{stroke:var(--ink-soft)} .ration.depleted .arc{stroke:var(--red)} .ration.depleted .needle{animation-duration:1.3s} .ration.depleted .txt .t{color:var(--red)} .chart-frame .bars-days{fill:var(--ink-soft)} .chart-frame .bars-days rect.peak{fill:var(--red)} .chart-frame .bars-sessions{fill:var(--line)} .chart-frame .bars-sessions rect.peak{fill:var(--ink-soft)} /* links dressed as buttons (BURN SESSION, range tabs are real navigations) */ a.btn{display:inline-block;text-decoration:none;border:1px solid var(--ink);padding:4px 12px;color:var(--ink)} a.btn:hover{background:var(--ink);color:var(--paper)} .range a{display:inline-block;text-decoration:none;border:1px solid var(--line);border-left:none;padding:3px 10px;color:var(--ink-soft)} .range a:first-child{border-left:1px solid var(--line)} .range a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)} .range a:hover{background:var(--manila);color:var(--ink)} /* dossier margin note: the active project filter */ .case-note{border:1px dashed var(--red);background:var(--red-bg);padding:8px 14px;margin:0 0 14px;font-size:12px} .case-note b{color:var(--red)} /* one-time enrollment code reveal */ code.big{font-family:'Special Elite',monospace;font-size:15px;letter-spacing:3px;border:3px double var(--red);color:var(--red);padding:2px 10px;display:inline-block;margin-top:6px} .form-result{font-size:11px;margin:6px 0 0;word-break:break-word} .inline{display:inline} /* tables can outgrow a laptop: scroll the ledger, not the page */ .ledger-wrap{overflow-x:auto} /* laptop width */ @media (max-width:1000px){ .live-grid,.rations,.acct-usage,.two-col{grid-template-columns:1fr} .folder{padding:18px} }