/* ═══════════════════════════════════════════════════════════════
Porchlight — Dusk Slate v2 · porchlight.css
Component layer. Requires tokens.css. Implements audit №1, №3–№8.
═══════════════════════════════════════════════════════════════ */
body {
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--font-text); line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a { color:var(--amber-deep); }
a:hover { color:var(--amber-bright); }
body.pl-ready { transition:background-color 2.5s ease, color 2.5s ease; } /* dusk ramp — gated so first paint doesn't fade in */
/* ── №8 · paper grain — put .pl-grain on . 2% noise: felt, not seen. */
.pl-grain { background-image:radial-gradient(rgba(38,40,52,.028) 1px, transparent 1px); background-size:5px 5px; }
[data-theme="night"] .pl-grain, [data-theme="dusk"] .pl-grain { background-image:radial-gradient(rgba(237,235,226,.03) 1px, transparent 1px); }
/* ── №1 · the wordmark: a lamp, not a sticker ─────────────────── */
.pl-wordmark { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; color:var(--ink); position:relative; display:inline-block; }
.pl-wordmark .lit { color:var(--amber); transition:color 1.2s ease, text-shadow 1.2s ease; }
/* lamp on (dusk/night): glow + slow breathe */
[data-theme="night"] .pl-wordmark .lit,
[data-theme="dusk"] .pl-wordmark .lit { text-shadow:var(--glow); animation:pl-breathe-text var(--t-breathe) ease-in-out infinite; }
/* №1 · the pool: light lands on the paper around the lamp */
.pl-pool { position:relative; }
.pl-pool::before { content:""; position:absolute; inset:-40% -20%; background:var(--pool); pointer-events:none; opacity:calc(.4 + .6 * var(--lamp)); }
.pl-pool > * { position:relative; }
.pl-pool .pl-warmed { color:var(--ink-warmed); } /* ink warms inside the pool */
/* №2 · the ignition — dusk.js adds .pl-ignite when the lamp comes on */
.pl-ignite .lit { animation:pl-flicker-once 2.2s ease-in-out 1, pl-breathe-text var(--t-breathe) ease-in-out 2.2s infinite; }
/* ── Buttons — pill, amber fill, hover blooms + breathes ──────── */
.pl-btn { background:var(--amber-bright); color:var(--on-amber); font-family:var(--font-text); font-weight:700; font-size:14px; padding:11px 22px; border-radius:var(--r-pill); border:0; cursor:pointer; transition:box-shadow var(--t-slow) var(--ease-arrive), transform var(--t-slow) var(--ease-arrive); }
.pl-btn:hover { box-shadow:0 0 1px rgba(244,155,22,.5), 0 0 10px rgba(255,178,64,.34), 0 0 24px rgba(255,169,40,.13); }
.pl-btn:active { transform:scale(.985); transition-duration:var(--t-press); }
.pl-btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--hairline-strong); }
.pl-btn.ghost:hover { background:var(--sand); box-shadow:none; }
/* ── №4 · cards rest on the table (slate shadow, day only) ────── */
.pl-card { background:var(--card); border-radius:var(--r-card); padding:var(--s4) 22px; box-shadow:var(--shadow-rest); border:1px solid var(--hairline); }
.pl-card.raised { box-shadow:var(--shadow-raised); }
.pl-panel { background:var(--sand); border-radius:var(--r-panel); padding:var(--s4) 22px; } /* recessed: hairline world, no shadow */
/* ── №5 · the lit sill — ceremony only, ONE per screen. A calm panel
with a hairline of lamplight laid across its top edge. ─────────── */
.pl-sill { position:relative; background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-sill); padding:var(--s6) var(--s5) var(--s4); box-shadow:var(--shadow-rest); text-align:center; }
.pl-sill::before { content:""; position:absolute; top:0; left:14%; right:14%; height:1px; pointer-events:none;
background:linear-gradient(90deg, transparent, var(--amber) 50%, transparent); opacity:.55; }
[data-theme="night"] .pl-sill::before, [data-theme="dusk"] .pl-sill::before {
opacity:.9; box-shadow:0 0 9px rgba(255,169,40,.34); }
/* ── №3 · the voice — wherever Porchlight itself is speaking ──── */
.pl-voice { font-family:var(--font-voice); line-height:1.45; color:var(--ink); }
.pl-kicker { font-family:var(--font-text); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-deep); }
.pl-kicker.leaning { transform:rotate(-.5deg); display:inline-block; } /* №8: one per screen */
/* ── №8 · the lamplight underline — no ink, a subtle pool of light
under the word. Usage: caring */
.pl-underline { position:relative; white-space:nowrap; }
.pl-underline::after { content:""; position:absolute; left:-2%; bottom:-.18em; width:104%; height:.26em;
background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(244,155,22,.32), rgba(255,178,64,.10) 60%, transparent 100%);
border-radius:50%; filter:blur(1px); pointer-events:none; }
[data-theme="night"] .pl-underline::after, [data-theme="dusk"] .pl-underline::after {
background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,169,40,.4), rgba(255,178,64,.14) 60%, transparent 100%); }
/* ── №6 · Pulse bands: the filament carries the band ──────────── */
.pl-band { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--hairline-strong); background:var(--card); border-radius:var(--r-pill); padding:7px 16px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.pl-band .filament { width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 40% 34%, var(--amber-core), var(--amber-bright) 70%); flex:none; }
.pl-band.bright .filament { box-shadow:0 0 9px 2.5px rgba(244,155,22,.75); }
.pl-band.steady .filament { box-shadow:0 0 5px 1px rgba(244,155,22,.45); }
.pl-band.flickering .filament { box-shadow:0 0 6px 1.5px rgba(244,155,22,.55); animation:pl-flicker 2.6s ease-in-out infinite; }
.pl-band.checkin { color:var(--muted); }
.pl-band.checkin .filament { background:#C9B99A; opacity:.7; box-shadow:none; } /* dimmed, never red */
/* ── Chips ─────────────────────────────────────────────────────── */
.pl-chip { border:1px solid var(--hairline-strong); background:var(--card); border-radius:var(--r-pill); padding:8px 16px; font-size:13px; font-weight:600; color:var(--ink-2); display:inline-block; }
.pl-chip.on { background:var(--amber-bright); border-color:var(--amber-bright); color:var(--on-amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
/* ── Forms — the field becomes a lit thing ────────────────────── */
.pl-input { font-size:15px; padding:11px 16px; border-radius:var(--r-pill); border:1px solid var(--hairline-strong); background:var(--card); color:var(--ink); font-family:var(--font-text); transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.pl-input:focus { border-color:var(--amber-bright); box-shadow:0 0 0 1px rgba(244,155,22,.35), 0 0 12px rgba(255,169,40,.18); outline:none; }
.pl-input.bad { border-color:var(--warning); } /* earth-tone, no shake, no red */
/* ── №7 · icons: single-weight ink line, amber only as the light.
Custom properties inherit through