/* ══════════════════════════════════════════════════════════════════════════════════════════════ PN/OS — the diegetic comms layer · pnos.css (v11 — CEO restyle, 2026-07-18) ------------------------------------------------------------------------------------------------ CANON (CEO, live-testing): APPLE owns the OS CHROME (Finder windows, dock, traffic-lights); GOOGLE-WORKSPACE idiom owns the app CONTENT inside those windows (Gmail/GCal-grade clarity — rails, list rows, category chips, event blocks). ONE token set across all of it: the pn-glass ladder (.lg-*, .lg-s0..3) + Inter/JetBrains. Zero bespoke pastels. HARD RULES honoured: · THE DOCK is DARK ALWAYS + BRAND-FIXED — never theme-flips, never inherits a worn --accent. It reads against porcelain, noir AND Miami backdrops alike (CEO: "needs to be dark to be seen"). · SEMANTIC COLOURS ARE BRAND-FIXED — calendar event types + mail categories carry their own fixed hues; they NEVER read the live/worn --accent (kills the Miami-pink leak the CEO flagged). · AA in BOTH themes (§1) · Finder chrome on every window (§10) · motion-on-all + reduced-motion (§4/§11) · no emoji (§13) · nothing touches the iPad bezel (§3) · overlays fully occlude (§2). All PN/OS z-indices sit below the folio frame (9998) so the tablet bezel frames the whole OS. ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root{ --pnos-orange:#f97316; /* the brand spine — FIXED, never worn */ --pnos-ink-slab:#0b1c30; /* SEMANTIC categories/event types — brand-fixed, never accent-tinted (CEO: kill the pink leak) */ --pnos-c-brief:#f97316; /* Briefs — brand orange */ --pnos-c-client:#3d9be0; /* Clients — cool blue */ --pnos-c-marlowe:#e0483d; /* Marlowe/backer— red */ --pnos-c-cfo:#2fa46a; /* The CFO/money — green */ --pnos-c-talent:#f0b429; /* Talent/poach — amber-gold */ --pnos-c-pitch:#5b7fb0; /* pitch slot — navy-steel */ --pnos-c-dinner:#c9673a; /* dinner — warm terracotta*/ --pnos-c-finale:#ba1a1a; /* the WahWahs — red */ } /* scoped, theme-aware ink for WINDOWS/PHONE/RUN only — dark default, .lg-light repaints porcelain. --pn-acc is FIXED brand orange everywhere in PN/OS (never the worn --accent). */ .pnos-win, .pnos-run, .pnos-phone{ --pn-ink:#eef3fb; --pn-dim:#9cadc4; --pn-faint:#6f7f95; --pn-hair:rgba(255,255,255,.12); --pn-hair-2:rgba(255,255,255,.07); --pn-sub:rgba(255,255,255,.05); --pn-slab:#0b1c30; --pn-mono:'JetBrains Mono',ui-monospace,'Roboto Mono',Menlo,monospace; --pn-font:'Inter','Segoe UI',Roboto,Arial,sans-serif; --pn-acc:#f97316; } .pnos-win.lg-light, .pnos-run.lg-light, .pnos-phone.lg-light{ --pn-ink:#241f1b; --pn-dim:#6b6157; /* AA 2026-07-31: --pn-faint was #8a7a68 — 3.05–3.31:1 as the call sheet's day index, KEY label, NOTE tag and CLEAR state on the bone stock. Deepened to 4.9–5.1:1 across those grounds. */ --pn-faint:#665849; --pn-hair:rgba(20,14,8,.15); --pn-hair-2:rgba(20,14,8,.08); --pn-sub:rgba(20,14,8,.04); /* the brand orange is a FILL colour; as 10px mono TEXT on bone it measures 2.23:1, so the light window's eyebrow ink deepens to the SST burnt-orange spine (4.9:1). Fills are untouched. */ --pn-acc-ink:#a8420a; } .pnos-win.lg-light .pnos-eyebrow, .pnos-run.lg-light .pnos-eyebrow, .pnos-phone.lg-light .pnos-eyebrow{ color:var(--pn-acc-ink); } /* the Finder title-bar label measured 3.10:1 on the light window chrome */ .pnos-win.lg-light .lg-tb-title{ color:#6b5f4d; } /* ══ THE DOCK — DARK ALWAYS · BRAND-FIXED · MACHINED ══════════════════════════════════════════════ Ink-navy glass slab with a solid tint floor (so it reads even where backdrop-filter is weak), machined corner furniture, fixed-height, in the safe area. NEVER theme-flips, NEVER worn-accent. Deliberately asymmetric (human-craft): a machined PN/OS mark bookends three clipped app tiles (INBOX = hero), the WK·S clock closes the right. Presence dots fold INTO the Teams tile. */ /* CEO 2026-07-20 (FIX A): the dock is FLUSH to the SCREEN'S BOTTOM EDGE — a full-width bottom bar seated on the bottom (no floating gap, no side margins that wasted space). It anchors to the device SCREEN via the shell's transform (the containing block), so left/right:0 + bottom:0 hug the screen's bottom edge; the screen's own rounded-corner clip trims the bar's bottom corners cleanly. */ .pnos-dock{ position:fixed; left:0; right:0; bottom:0; z-index:300; width:100%; pointer-events:none; } .pnos-dock[hidden]{ display:none; } .pnos-stamp-lb{ display:block; font:700 7px/1 var(--pn-mono); font-style:normal; letter-spacing:.3em; color:var(--pn-faint); margin-top:4px; text-transform:uppercase; } .pnos-dock-inner{ --pn-ink:#eef3fb; --pn-dim:#aeb9cb; --pn-faint:#7d8ba1; --pn-hair:rgba(255,255,255,.13); --pn-hair-2:rgba(255,255,255,.07); --pn-sub:rgba(255,255,255,.055); --pn-slab:#0b1c30; --pn-acc:#f97316; /* THE LENS — one token set for the glass app lenses (CEO 2026-08-01, third ask: "rich, gradient glass ... but simple"). ALTERNATION LAW §5f: the dock is brand-fixed DARK chrome, so the glass is deep and the marks are LIGHT in it. If the dock is ever rendered on a light shell, `.is-light` below inverts the same object — the inverse is defined here, not re-invented at the call site. --lens-r is the ONLY silhouette control: one number softens every app in the dock at once (the CEO's "all too square"). */ --lens-r:46%; /* the four stops of the glass, crown → base. One ramp, set per lighting family below. */ --lens-1:#86b0e8; --lens-2:#3a63a0; --lens-3:#16294c; --lens-4:#060c1a; --tile-ink:#f2f7ff; --tile-acc:#f97316; --lens-glow:rgba(126,176,240,.42); --lens-cast:rgba(96,150,220,.26); --pn-mono:'JetBrains Mono',ui-monospace,'Roboto Mono',Menlo,monospace; --pn-font:'Inter','Segoe UI',Roboto,Arial,sans-serif; pointer-events:auto; position:relative; isolation:isolate; /* full-width flush bar — seated on the screen bottom, content inset with generous side gutters. align-items:center seats the app-slot row on the bar's optical midline (macOS-dock idiom). */ display:flex; align-items:center; gap:clamp(6px,1vw,14px); height:76px; padding:0 clamp(16px,3.4vw,32px); border-radius:0; color:var(--pn-ink); /* ink-navy machined glass + a SOLID tint floor under the blur so it never washes out on any backdrop */ background: linear-gradient(180deg, rgba(19,29,47,.95), rgba(7,12,20,.99)), linear-gradient(0deg, #0a1120, #0a1120); /* attached, not floating: a machined double top seam (bright hairline over a dark shadow line) + an upward-cast shadow that reads as one seated, milled bar — not a stuck-on panel */ border:0; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 2px 0 rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.5), 0 -14px 38px rgba(0,0,0,.46), 0 -1px 0 rgba(0,0,0,.55); -webkit-backdrop-filter:blur(28px) saturate(155%); backdrop-filter:blur(28px) saturate(155%); } /* CEO 2026-07-18 (ABSOLUTELY FINAL): dock corner furniture DEAD too — no bracket, no pip. */ .pnos-dock-inner::after{ content:none; } /* the machined PN/OS mark — a bespoke bookend, brand type, mono sub */ /* FIX 8 (CEO 2026-07-25) — the bookend is a CONTROL now, not a logo: it opens the phone. It keeps its machined-mark look (it must not become a fifth app plate — the dock's app row is the app row), but it takes real affordance: pointer, focus ring, a hover lift on the mono sub, and the dock's own running pip while its surface is up. */ .pnos-os-stamp{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 clamp(12px,1.6vw,20px) 0 2px; flex:none; align-self:stretch; appearance:none; background:none; border:0; border-right:1px solid var(--pn-hair-2); text-align:left; cursor:pointer; transition:opacity .16s ease; } .pnos-os-stamp b{ font:900 15px/.86 var(--pn-font); letter-spacing:-.02em; color:var(--pn-ink); text-shadow:0 1px 0 rgba(0,0,0,.5); } .pnos-os-stamp span{ font:700 8px/1 var(--pn-mono); letter-spacing:.28em; color:var(--pn-acc); transition:letter-spacing .18s cubic-bezier(.2,.7,.3,1); } .pnos-os-stamp:hover span{ letter-spacing:.42em; } .pnos-os-stamp:focus-visible{ outline:2px solid var(--pn-acc); outline-offset:3px; border-radius:3px; } .pnos-os-stamp.is-running::after{ content:""; position:absolute; left:calc(50% - 6px); bottom:14px; width:4px; height:4px; border-radius:50%; background:var(--pn-acc); box-shadow:0 0 6px rgba(249,115,22,.9), 0 0 0 1px rgba(4,9,17,.7); } @media (prefers-reduced-motion:reduce){ .pnos-os-stamp span{ transition:none; } .pnos-os-stamp:hover span{ letter-spacing:.28em; } } /* ══ APP SLOTS — the crafted dock (PitchNoir geometry, NOT the macOS icon idiom) ═══════════════════ Each app is a STAMPED TOOL TAG: a flat milled plate carrying THE CLIP twice (top-right + bottom-left), a hairline that traces the cut, a lit seam at the top and a dark seam at the foot, under a hand-authored equipment mark and over a tidy mono label. The plates sit ON the dark bar (dark bar shows between them = elegant app separation), and the 4-app cluster is optically centred between the PN/OS bookend and the WK clock. Icon is the identity; orange is spent only on the ONE lit app + the counters (dock is a brand-fixed seam). */ .pnos-tile{ position:relative; isolation:isolate; appearance:none; cursor:pointer; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:0 clamp(3px,.7vw,9px); border:0; background:none; color:var(--pn-ink); transition:transform .2s cubic-bezier(.2,.7,.3,1); } /* CEO 2026-07-31: "dock isnt centred" — auto-margins centred the cluster in the LEFTOVER space (bookend and clock zones differ), so it sat visibly left. The row is now absolutely centred on the screen's true midline; bookend and clock keep their corners. */ .pnos-tilerow{ position:absolute; left:50%; top:-12px; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:clamp(6px,1vw,14px); } /* THE SEAM — the macOS dock separator between the two app families (work | break). One hairline, faded at both ends so it reads as a seam in the bar rather than a drawn line. Sits above the labels' baseline so it can never look like an orphaned fragment (UX_RULES §3). */ .pnos-dock-seam{ flex:none; width:1px; height:30px; margin:0 clamp(0px,.2vw,3px); align-self:center; transform:translateY(-8px); border-radius:1px; background:linear-gradient(180deg, transparent 0%, rgba(214,230,250,.26) 42%, rgba(214,230,250,.16) 66%, transparent 100%); } .pnos-dock-inner.is-light .pnos-dock-seam{ background:linear-gradient(180deg, transparent 0%, rgba(11,28,48,.26) 42%, rgba(11,28,48,.16) 66%, transparent 100%); } .pnos-tile:focus-visible{ outline:none; } .pnos-tile:focus-visible .pnos-tile-ic{ outline:2px solid var(--tile-acc); outline-offset:3px; } /* ══ THE LENS — deep gradient glass, one light source (CEO 2026-08-01, THIRD ask: "these dock icons still look terrible — they need to have better rich, gradient glass like but simple design — the icons are all too square and complex"). ═══════════════════════════════════════ THE SILHOUETTE stops being square: the double-chamfered tool tag retires and the app becomes a round-shouldered LENS (--lens-r), so nothing in the dock has a corner to read as boxy. THE MATERIAL is the house glass language (pn-glass .lg-btn recipe — rim / body / specular / depth), not a flat milled slate and NOT the iOS gloss-crown tile that was rejection #1. It is built as three layers and exactly three: · the ELEMENT = the RIM — a single gradient running bright at the top edge to dark at the foot, so one light lives above the dock and every lens obeys it. · ::before = the BODY — a deep vertical gradient with a BACKLIT bloom rising through the glass from below. That bloom is the only colour in the object. · ::after = the LIGHT — a soft, edgeless top sheen (no hard terminator, no dome, no specular crown) plus a faint bounce off the floor of the lens. THE COLOUR is a PAIR, never four: the two WORK apps are lit COLD (steel daylight — email, calendar) and the two BREAK apps are lit GREEN (baize — the fairway and the felt are the same cloth). So the dock reads at a glance as "the job / the escape" and never as an app-store rainbow. Identity is carried by the MARK; the glass only carries light. The one saturated accent in the dock stays what it always was: the counter badge and the running pip. ═════════ */ .pnos-tile-ic{ position:relative; display:grid; place-items:center; isolation:isolate; /* CEO 2026-08-01 (v3 accepted, one sizing note: "make the bottom black border thinner or dock icons bigger so there's an overlap") — the lens grows and the row rides up (.pnos-tilerow top:-12px) so the glass crowns BREACH the bar's top seam, macOS-style. The bar keeps its 76px; the lens now owns it instead of floating in it. */ width:clamp(54px,5.6vw,66px); height:clamp(54px,5.6vw,66px); color:var(--tile-ink); border-radius:var(--lens-r); transform-origin:bottom center; /* magnify grows the lens UP off the bar (macOS idiom) */ /* THE RIM — top-lit to foot-dark. 1px of it shows around the body; it is the whole bevel. */ background:linear-gradient(180deg, rgba(238,247,255,.92) 0%, rgba(176,201,235,.34) 18%, rgba(6,11,20,.42) 66%, rgba(2,5,10,.78) 100%); /* DEPTH — the lens sits on the bar and emits a little of its own light into it */ box-shadow: 0 5px 12px rgba(2,5,11,.58), 0 1px 2px rgba(2,5,11,.7), 0 6px 20px -6px var(--lens-cast, transparent); transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease; } .pnos-tile-ic::before, .pnos-tile-ic::after{ content:""; position:absolute; inset:1px; z-index:0; border-radius:calc(var(--lens-r) - .5px); pointer-events:none; transition:background .2s ease, opacity .2s ease; } /* THE BODY — deep glass with the backlight blooming up through it from the floor of the lens. The inset shadows are what make it read as MATERIAL and not a painted circle: a lit inner lip at the crown, a pooled shadow in the base, and a hairline of internal reflection all round. */ .pnos-tile-ic::before{ background: radial-gradient(66% 54% at 50% 104%, var(--lens-glow) 0%, transparent 76%), linear-gradient(166deg, var(--lens-1) 0%, var(--lens-2) 27%, var(--lens-3) 63%, var(--lens-4) 100%); box-shadow: inset 0 1.6px 0 rgba(255,255,255,.55), /* the lit lip at the crown */ inset 0 -2.2px 2px -1px rgba(150,192,246,.34), /* light bouncing back off the bar */ inset 0 -18px 22px -14px rgba(0,0,0,.92), /* the shadow pooled in the base */ inset 0 0 0 .5px rgba(200,224,255,.14); } /* THE LIGHT — one soft specular in the upper third that never closes into a dome (no gloss crown, no hard terminator: that was rejection #1) */ .pnos-tile-ic::after{ z-index:2; background:radial-gradient(64% 44% at 50% 3%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 56%, transparent 78%); } .pnos-tile-ic svg{ position:relative; z-index:1; width:clamp(22px,2.2vw,25px); height:clamp(22px,2.2vw,25px); display:block; overflow:visible; opacity:.86; filter:drop-shadow(0 1px 1.5px rgba(2,6,14,.7)); transition:opacity .2s ease; } /* the SOLID MASS in every mark — one value brighter than its outline, lit by the same top light. (Outline .86 / mass 1.0 is the ONLY weight contrast in the set; it replaces the two-stroke-weight drafting of the milled marks, which read as complication.) */ .pnos-tile-ic svg .ms{ fill:currentColor; stroke:none; opacity:1; } /* the two lighting families — the job is lit cold, the break is lit green (fairway + felt) */ .pnos-tile[data-app="inbox"] .pnos-tile-ic, .pnos-tile[data-app="calendar"] .pnos-tile-ic{ --lens-1:#8ab6ec; --lens-2:#39639f; --lens-3:#152747; --lens-4:#050a16; --lens-glow:rgba(122,178,255,.60); --lens-cast:rgba(96,150,220,.34); } .pnos-tile[data-app="golf"] .pnos-tile-ic, .pnos-tile[data-app="pool"] .pnos-tile-ic{ --lens-1:#6ed4ac; --lens-2:#23806a; --lens-3:#0c3230; --lens-4:#040f10; --lens-glow:rgba(58,214,150,.54); --lens-cast:rgba(46,168,120,.32); } /* ══ MAGNIFICATION MODE — JS owns the transforms; kill the CSS hover-lift + transform transition so the rAF lerp isn't double-smoothed. Plate scale (JS) rises the icon; the tile translateX reflows. Only added on hover-capable, motion-OK devices; touch/reduced-motion keep the static hover below. */ .pnos-mag .pnos-tile{ transition:none; will-change:transform; } .pnos-mag .pnos-tile-ic{ will-change:transform; } .pnos-mag .pnos-tile:hover{ transform:translateX(0); } /* magnify replaces the lift */ /* OPEN-APP INDICATOR — a crisp seated orange pip under the app whose window is open (macOS running dot). The lens answers by BURNING WARM: the backlight swaps to the brand orange and rises through the glass, and the rim takes a little of that heat. Same object, more light — never a second material and never a coloured plate. */ .pnos-tile.is-running::after{ content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--pn-acc); box-shadow:0 0 6px rgba(249,115,22,.9), 0 0 0 1px rgba(4,9,17,.7); } .pnos-tile.is-running:not(.is-hero) .pnos-tile-ic{ --lens-glow:rgba(255,150,56,.82); --lens-cast:rgba(249,115,22,.50); background:linear-gradient(180deg, rgba(255,232,206,.95) 0%, rgba(246,175,108,.42) 20%, rgba(20,10,4,.44) 66%, rgba(10,5,2,.80) 100%); } .pnos-tile.is-running:not(.is-hero) .pnos-tile-ic svg{ opacity:1; } /* LAUNCH BOUNCE — a short, clean macOS hop on click (transform-only; reduced-motion skips it in JS) */ .pnos-tile-ic.pnos-bounce{ animation:pnos-dockhop .52s cubic-bezier(.28,.84,.42,1); } @keyframes pnos-dockhop{ 0%{ transform:scale(1) translateY(0); } 28%{ transform:scale(1.16) translateY(-8px); } 55%{ transform:scale(.98) translateY(1px); } 78%{ transform:scale(1.03) translateY(-2px); } 100%{ transform:scale(1) translateY(0); } } /* HOVER — the light comes UP. The lens's own backlight brightens, the rim catches more of the top light, the mark clears to full white, and the tile rises 4px. No orange wash, no glaze, no scale pop (magnification owns scale). (The tile BUTTON re-pins background:none so play.html's global button:hover can never plate the label — the "white pill behind GOLF" kill.) */ .pnos-tile:hover{ transform:translateY(-4px); background:none; border-color:transparent; color:var(--pn-ink); } .pnos-tile:hover .pnos-tile-ic{ background:linear-gradient(180deg, rgba(244,250,255,.86) 0%, rgba(198,218,246,.30) 26%, rgba(6,11,20,.28) 72%, rgba(4,8,15,.60) 100%); box-shadow:0 8px 18px rgba(2,5,11,.62), 0 1px 2px rgba(2,5,11,.7), 0 10px 28px -6px var(--lens-cast, transparent); } .pnos-tile:hover .pnos-tile-ic::before{ filter:brightness(1.16) saturate(1.1); } .pnos-tile:hover .pnos-tile-ic svg{ opacity:1; } .pnos-tile:hover .pnos-tile-lb{ color:#eef3fb; background:none; } /* fixed soft-white on the dark bar — labels NEVER get plates, in either theme */ /* THE LIT APP — the same lens, backlit by the brand orange itself and cleared to a warm rim. (Unused at present — all four apps ship equal — but kept correct so a hero app can be declared without inventing a second material.) */ .pnos-tile.is-hero .pnos-tile-ic{ color:#fff6ec; --lens-1:#ffc48a; --lens-2:#ef7f28; --lens-3:#7d3006; --lens-4:#230c02; --lens-glow:rgba(255,158,74,.62); --lens-cast:rgba(249,115,22,.5); background:linear-gradient(180deg, rgba(255,226,196,.80) 0%, rgba(244,168,98,.30) 26%, rgba(28,10,2,.34) 72%, rgba(18,6,1,.66) 100%); } .pnos-tile.is-hero .pnos-tile-ic svg{ opacity:1; } /* the running/active indicator — a crisp seated orange pip below the lit plate (macOS dock idiom) */ .pnos-tile.is-hero .pnos-tile-lb{ position:relative; color:#fbe3cf; } .pnos-tile.is-hero .pnos-tile-lb::before{ content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--pn-acc); box-shadow:0 0 6px rgba(249,115,22,.85); } /* ══ THE INVERSE (ALTERNATION LAW §5f) — if the dock is ever rendered as LIGHT chrome, the same LENS flips whole: pale glass, near-black marks, the top light kept above it, and the accent deepens to the light-theme burnt-orange (#b4380d) so the one accent moment keeps its weight against dark ink. Labels take navy. Add `is-light` to .pnos-dock-inner; nothing else changes. */ .pnos-dock-inner.is-light{ --pn-ink:#0b1c30; --pn-dim:#3c4b60; --pn-faint:#5b6b81; --pn-hair:rgba(11,28,48,.16); --pn-hair-2:rgba(11,28,48,.09); --lens-1:#ffffff; --lens-2:#eef4fc; --lens-3:#d2dded; --lens-4:#aabbd2; --tile-ink:#0b1c30; --tile-acc:#b4380d; --lens-glow:rgba(120,164,224,.34); --lens-cast:rgba(70,110,170,.26); background:linear-gradient(180deg,#e3e9f2,#d3dbe7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(11,28,48,.22), 0 -14px 38px rgba(11,28,48,.22); } .pnos-dock-inner.is-light .pnos-tile-lb, .pnos-dock-inner.is-light .pnos-tile:hover .pnos-tile-lb{ color:#243449; } /* 8.9:1 on the pale rail */ /* the pale lens keeps ONE light source too — bright rim above, shadowed foot below */ .pnos-dock-inner.is-light .pnos-tile-ic{ background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.42) 26%, rgba(11,28,48,.20) 72%, rgba(11,28,48,.40) 100%); box-shadow:0 4px 10px rgba(11,28,48,.22), 0 1px 2px rgba(11,28,48,.24), 0 6px 20px -6px var(--lens-cast, transparent); } /* the pale glass keeps the same three layers — only the values invert (no black pooled in a white lens; the shadow is a cool ink at low alpha, the crown lip a full white) */ .pnos-dock-inner.is-light .pnos-tile-ic::before{ box-shadow: inset 0 1.6px 0 rgba(255,255,255,.95), inset 0 -2.2px 2px -1px rgba(255,255,255,.6), inset 0 -18px 22px -14px rgba(11,28,48,.42), inset 0 0 0 .5px rgba(11,28,48,.10); } .pnos-dock-inner.is-light .pnos-tile-ic::after{ background: radial-gradient(64% 44% at 50% 3%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 56%, transparent 78%); } .pnos-dock-inner.is-light .pnos-tile-ic svg{ opacity:.94; filter:none; } /* THE LABEL — tidy mono, tracked, AA on the dark bar; brightens on the lit/hover app */ /* CEO 2026-07-25 ("crappy dock experience"): label ink lifted to a fixed bright steel — AA ≥7:1 on the brand-fixed dark bar in BOTH rooms (the old var(--pn-dim) read washed in the light room's glare). */ .pnos-tile-lb{ font:600 9px/1 var(--pn-mono); letter-spacing:.17em; text-transform:uppercase; color:#c8d4e4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:11ch; } /* UNREAD COUNTER — a STAMPED counter chip, not a glossy pill (CEO 2026-07-31: the gradient + glow badge was the same app-store tell as the old plates). Flat accent, near-black mono digits (7.3:1), the house chamfer taken once, seated on the bar with a dark hairline. Fixed #f97316 — never the worn --accent (the pink-badge leak stays dead). */ .pnos-badge{ position:absolute; top:-2px; right:-3px; z-index:3; min-width:16px; height:15px; padding:0 3.5px; display:flex; align-items:center; justify-content:center; border-radius:1px; clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); font:700 9.5px/1 var(--pn-mono); letter-spacing:.02em; font-feature-settings:'tnum' 1; background:#f97316; color:#0b1c30; box-shadow:0 0 0 1.5px #0b1626; } .pnos-badge.is-hot{ animation:pnos-pulse 3.2s steps(1,end) infinite; } @keyframes pnos-pulse{ 0%,84%{ background:#f97316; } 88%,96%{ background:#ffa257; } 100%{ background:#f97316; } } .pnos-dock-inner.is-light .pnos-badge{ background:#b4380d; color:#fff; box-shadow:0 0 0 1.5px #e8eef7; } /* PRESENCE — a tidy status cluster seated under the Teams slot; ringed so each dot reads on the bar */ .pnos-pres{ display:flex; gap:4px; align-self:center; margin-top:-1px; } .pd{ width:5px; height:5px; border-radius:50%; flex:none; display:block; box-shadow:0 0 0 1px rgba(4,9,17,.85); } .pd-active{ background:#2fd24a; box-shadow:0 0 0 1px rgba(4,9,17,.85), 0 0 5px rgba(47,210,74,.7); } .pd-idle{ background:#febc2e; } .pd-busy{ background:#ff5f57; } .pd-off{ background:#5b6b7a; } /* the week clock chip — the right bookend, machined off a hairline */ /* CEO 2026-07-31: "the dock has moved to the left". The bar had no centring — the four app tiles clustered against the PN/OS bookend leaving a dead middle. The bookend pushes right-auto and the clock left-auto, so the tile group rides the TRUE centre of the bar at any width. */ .pnos-os-stamp{ margin-right:auto; } .pnos-dock-clock{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:3px; align-self:stretch; justify-content:center; padding:0 10px 0 clamp(12px,1.6vw,20px); flex:none; border-left:1px solid var(--pn-hair-2); margin-left:auto; appearance:none; background:none; border-top:0; border-right:0; border-bottom:0; cursor:pointer; transition:background .14s ease; } .pnos-dock-clock:hover{ background:rgba(255,255,255,.06); } .pnos-dock-clock:hover b{ color:var(--pn-acc); } .pnos-dock-clock b{ font:800 12.5px/1 var(--pn-mono); letter-spacing:.04em; color:var(--pn-ink); font-feature-settings:'tnum' 1; text-shadow:0 1px 0 rgba(0,0,0,.5); } .pnos-dock-clock span{ font:700 8px/1 var(--pn-mono); letter-spacing:.2em; color:var(--pn-faint); } /* keep dashboard content clear of the fixed dock */ body.pnos-dock-on #app{ padding-bottom:108px; } /* ══ WINDOW SHELL ══════════════════════════════════════════════════════════════════════════════ */ #pnos-layer{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; } #pnos-layer:empty{ pointer-events:none; } .pnos-scrim{ position:absolute; inset:0; background:rgba(5,7,12,.68); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } .pnos-out .pnos-scrim, .pnos-out .pnos-win{ opacity:0; transition:opacity .16s ease; } /* centered by the flex layer (NOT transform) so the entrance translate/scale can't fight positioning */ .pnos-win{ position:relative; z-index:901; width:min(960px, calc(100vw - 44px)); max-height:min(680px, calc(100vh - 52px)); display:flex; flex-direction:column; overflow:hidden; } .pnos-win .lg-titlebar{ flex:none; } .pnos-win-body{ flex:1; min-height:0; display:flex; overflow:hidden; } /* two-pane (Teams) */ .pnos-two{ display:grid; grid-template-columns:288px 1fr; width:100%; min-height:0; } /* three-pane (Gmail-vibe Mail): rail · list · reading */ .pnos-three{ display:grid; grid-template-columns:158px 274px 1fr; width:100%; min-height:0; } .pnos-list{ min-height:0; overflow-y:auto; border-right:1px solid var(--pn-hair); background:var(--pn-hair-2); } .pnos-list-head{ position:sticky; top:0; z-index:2; display:flex; align-items:baseline; justify-content:space-between; padding:12px 16px 10px; background:color-mix(in srgb, var(--pn-slab) 34%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--pn-hair-2); } .lg-light .pnos-list-head{ background:rgba(250,247,242,.72); } .pnos-eyebrow{ font:800 10px/1 var(--pn-mono); letter-spacing:.28em; color:var(--pn-acc); text-transform:uppercase; } .pnos-count{ font:700 10px/1 var(--pn-mono); letter-spacing:.1em; color:var(--pn-faint); } .pnos-pane{ min-height:0; overflow-y:auto; padding:0; } /* ══ MAIL — the LEFT RAIL (Gmail-vibe categories with counts) ═════════════════════════════════════ */ .pnos-rail{ min-height:0; overflow-y:auto; border-right:1px solid var(--pn-hair); background:color-mix(in srgb, var(--pn-slab) 22%, transparent); padding:6px 0 10px; } .lg-light .pnos-rail{ background:rgba(20,14,8,.03); } .pnos-rail-head{ padding:13px 16px 9px; } .pnos-rail-head .pnos-eyebrow{ display:block; } .pnos-cat{ position:relative; width:100%; appearance:none; cursor:pointer; text-align:left; border:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:9px 14px; background:transparent; color:var(--pn-ink); transition:background .13s ease; } .pnos-cat:hover{ background:var(--pn-sub); color:var(--pn-ink); } .pnos-cat.is-on{ background:color-mix(in srgb, var(--pn-acc) 12%, transparent); box-shadow:inset 3px 0 0 var(--pn-acc); } .pnos-cat-dot{ width:8px; height:8px; border-radius:2px; flex:none; background:var(--cat, var(--pn-acc)); } .pnos-cat-lb{ font:700 11.5px/1.2 var(--pn-font); letter-spacing:.01em; color:var(--pn-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pnos-cat.is-on .pnos-cat-lb{ font-weight:800; } .pnos-cat-n{ font:800 10px/1 var(--pn-mono); letter-spacing:.04em; color:#0b1c30; background:var(--cat, var(--pn-acc)); min-width:16px; height:16px; padding:0 5px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-feature-settings:'tnum' 1; } /* QA 2026-07-31 (defect #13): a wall of explicit "0" badges beside "1 threads" read as a broken counter. The counts were always correct (they are UNREAD counts, Gmail-style) — the fix is the Gmail behaviour too: a zero badge doesn't render. The rail foot still carries totals. */ .pnos-cat-n.is-zero{ display:none; } .pnos-rail-foot{ margin:14px 14px 0; padding-top:12px; border-top:1px solid var(--pn-hair-2); font:600 9.5px/1.5 var(--pn-mono); letter-spacing:.06em; color:var(--pn-faint); } /* ══ MAIL — list rows (Gmail-vibe: monogram · sender+subject · snippet · time · unread dot+bold) ══ */ .pnos-mail{ position:relative; width:100%; appearance:none; cursor:pointer; text-align:left; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:11px; padding:12px 14px; background:transparent; border:0; border-bottom:1px solid var(--pn-hair-2); color:var(--pn-ink); transition:background .14s ease; } .pnos-mail:hover{ background:var(--pn-sub); color:var(--pn-ink); } .pnos-mail.is-active{ background:color-mix(in srgb, var(--pn-acc) 12%, transparent); box-shadow:inset 3px 0 0 var(--pn-acc); } .pnos-mail.is-urgent{ box-shadow:inset 3px 0 0 var(--cat, var(--pnos-c-marlowe)); } .pnos-mail.is-urgent.is-active{ box-shadow:inset 3px 0 0 var(--pn-acc); } /* monogram carries the CATEGORY colour (a fixed hue, never worn accent) */ .pnos-mark{ width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; font:900 12px/1 var(--pn-font); font-style:italic; letter-spacing:-.02em; color:#0b1c30; background:var(--cat, var(--pn-acc)); border:1px solid rgba(255,255,255,.14); clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } .pnos-mail-b{ min-width:0; display:flex; flex-direction:column; gap:2px; } .pnos-mail-top{ display:flex; align-items:center; gap:7px; } .pnos-from{ font:700 12.5px/1.2 var(--pn-font); color:var(--pn-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .pnos-mail.is-unread .pnos-from{ font-weight:800; } .pnos-chip{ font:700 7.5px/1 var(--pn-mono); letter-spacing:.1em; text-transform:uppercase; padding:3px 5px; border-radius:2px; color:var(--cat, var(--pn-acc)); background:color-mix(in srgb, var(--cat, var(--pn-acc)) 16%, transparent); border:1px solid color-mix(in srgb, var(--cat, var(--pn-acc)) 42%, transparent); flex:none; } .lg-light .pnos-chip{ color:color-mix(in srgb, var(--cat, var(--pn-acc)) 72%, #000); } .pnos-subj{ font:600 11.5px/1.35 var(--pn-font); color:var(--pn-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pnos-mail.is-unread .pnos-subj{ font-weight:700; } .pnos-prev{ font:400 10.5px/1.4 var(--pn-font); color:var(--pn-dim); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .pnos-mail-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; } .pnos-time{ font:600 9.5px/1 var(--pn-mono); letter-spacing:.02em; color:var(--pn-faint); font-feature-settings:'tnum' 1; white-space:nowrap; } .pnos-mail.is-unread .pnos-time{ color:var(--pn-acc); } .pnos-dot{ width:8px; height:8px; border-radius:50%; background:var(--pn-acc); flex:none; box-shadow:0 0 6px color-mix(in srgb, var(--pn-acc) 60%, transparent); } .pnos-list-empty{ padding:40px 24px; text-align:center; } .pnos-list-empty .pnos-eyebrow{ display:block; margin-bottom:8px; } .pnos-list-empty p{ font:400 12px/1.6 var(--pn-font); color:var(--pn-dim); margin:0; } /* ══ MAIL — reading pane (clean · on the LADDER: .lg-s2 content card on the .lg-s1 pane shell) ═══ */ .pnos-read-pane{ padding:0; } .pnos-read{ display:flex; flex-direction:column; min-height:100%; } .pnos-read.lg-s1{ border:0; border-radius:0; } /* pane shell — edge-to-edge s1 */ .pnos-read-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 16px; flex:none; border-bottom:1px solid var(--pn-hair); background:color-mix(in srgb, var(--pn-slab) 20%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .lg-light .pnos-read-toolbar{ background:rgba(250,247,242,.6); } .pnos-tool{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font:700 9.5px/1 var(--pn-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pn-dim); padding:8px 11px; border-radius:3px; background:var(--pn-sub); border:1px solid var(--pn-hair); clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); transition:.14s ease; } .pnos-tool:hover{ color:var(--pn-ink); background:color-mix(in srgb, var(--pn-acc) 14%, transparent); border-color:var(--pn-acc); } .pnos-tool svg{ width:14px; height:14px; } .pnos-tool-sp{ flex:1; } .pnos-tool-cat{ font:700 8px/1 var(--pn-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cat, var(--pn-acc)); padding:5px 8px; border-radius:2px; background:color-mix(in srgb, var(--cat, var(--pn-acc)) 14%, transparent); border:1px solid color-mix(in srgb, var(--cat, var(--pn-acc)) 40%, transparent); } .lg-light .pnos-tool-cat{ color:color-mix(in srgb, var(--cat, var(--pn-acc)) 72%, #000); } .pnos-read-scroll{ flex:1; min-height:0; overflow-y:auto; padding:16px; } .pnos-read-card{ overflow:hidden; } /* .lg-s2 — the elevated reading card */ .pnos-hero{ height:130px; background-size:cover; background-position:center; position:relative; } .pnos-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,14,.05), rgba(5,8,14,.74)); mix-blend-mode:multiply; } .pnos-hero-tag{ position:absolute; left:15px; bottom:11px; z-index:2; font:800 9px/1 var(--pn-mono); letter-spacing:.24em; text-transform:uppercase; color:#fff; padding:5px 8px; background:rgba(11,28,48,.72); border:1px solid rgba(255,255,255,.22); border-radius:2px; } .pnos-read-head{ padding:16px 20px 12px; border-bottom:1px solid var(--pn-hair-2); } .pnos-read-from{ display:flex; align-items:center; gap:9px; margin-bottom:9px; } .pnos-read-from .pnos-mark{ width:38px; height:38px; font-size:14px; } .pnos-read-from-t{ display:flex; flex-direction:column; gap:2px; min-width:0; } .pnos-read-sender{ font:800 12.5px/1.1 var(--pn-font); color:var(--pn-ink); } .pnos-read-when{ font:600 9px/1 var(--pn-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pn-faint); } .pnos-read-subj{ display:block; font:800 20px/1.16 var(--pn-font); letter-spacing:-.01em; color:var(--pn-ink); text-wrap:balance; } .pnos-read-body{ padding:15px 20px 6px; color:var(--pn-ink); font:400 13px/1.62 var(--pn-font); } .pnos-read-body p{ margin:0 0 12px; color:var(--pn-ink); } .pnos-read-body b{ color:var(--pn-ink); font-weight:700; } .pnos-lede{ font:600 11.5px/1.5 var(--pn-font); color:var(--pn-dim) !important; } .pnos-neg{ color:#ff6a55 !important; } .lg-light .pnos-neg{ color:#c22a12 !important; } .pnos-pos{ color:#3ecf8e !important; } .lg-light .pnos-pos{ color:#1a8a54 !important; } .pnos-flag{ margin-top:6px; padding:10px 12px; border-radius:3px; font-size:12px !important; color:var(--pn-ink) !important; background:color-mix(in srgb, #ff6a55 12%, transparent); border:1px solid rgba(255,106,85,.4); border-left:3px solid #ff6a55; } .pnos-ledger{ margin:6px 0 14px; border:1px solid var(--pn-hair); border-radius:3px; overflow:hidden; } .pnos-lrow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 13px; border-bottom:1px solid var(--pn-hair-2); } .pnos-lrow:last-child{ border-bottom:0; } .pnos-lk{ font:700 10px/1 var(--pn-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pn-faint); } .pnos-lv{ font:700 13px/1 var(--pn-mono); color:var(--pn-ink); font-feature-settings:'tnum' 1; text-align:right; } .pnos-attach{ margin:2px 20px 20px; width:calc(100% - 40px); } /* CEO 2026-07-31: the brief's attachment IS the next move — as a ghost chip it was "lost on background". The CTA variant is the one loud primary in the read pane: accent slab, punched corner, the fee on its face. */ .pnos-attach--cta{ background:var(--pn-acc) !important; color:#0b1c30 !important; border:0 !important; font:800 11px/1.5 var(--pn-mono) !important; letter-spacing:.1em; padding:16px 18px !important; justify-content:center; /* CEO 2026-08-01: the label CLIPPED mid-word ("£13,506 ON DELIVE"). The shared .lg-card--action base sets white-space:nowrap, so a long label cannot wrap — it just runs off the cut corner. A CTA that truncates its own fee is worse than a plain one. Let it wrap, centred. */ white-space:normal !important; text-align:center; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); box-shadow:0 6px 22px -6px color-mix(in srgb,var(--pn-acc) 65%,transparent); } .pnos-attach--cta .pnos-attach-ic{ color:#0b1c30; } .pnos-attach--cta:hover{ filter:brightness(1.08); } .pnos-attach-ic{ width:18px; height:18px; color:var(--pn-acc); display:inline-flex; } .pnos-attach-ic svg{ width:18px; height:18px; } .pnos-reply-btn{ appearance:none; cursor:pointer; margin:4px 0 14px; padding:11px 16px; border-radius:3px; font:700 11px/1 var(--pn-mono); letter-spacing:.08em; color:var(--pn-ink); background:var(--pn-sub); border:1px solid var(--pn-hair); clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); transition:.16s ease; } .pnos-reply-btn:hover{ background:color-mix(in srgb, var(--pn-acc) 14%, transparent); border-color:var(--pn-acc); color:var(--pn-ink); } .pnos-replied{ margin:2px 0 14px; padding:10px 13px; border-radius:3px; font:600 11.5px/1.4 var(--pn-font); color:var(--pn-dim); background:color-mix(in srgb, #3ecf8e 10%, transparent); border-left:3px solid #3ecf8e; } .pnos-read-empty{ flex:1; display:flex; align-items:center; justify-content:center; } /* ══ TEAMS (token-aligned only — CEO: "not bad") ═════════════════════════════════════════════════ */ .pnos-th{ position:relative; width:100%; appearance:none; cursor:pointer; text-align:left; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:12px 15px; background:transparent; border:0; border-bottom:1px solid var(--pn-hair-2); color:var(--pn-ink); transition:background .14s ease; } .pnos-th:hover{ background:var(--pn-sub); color:var(--pn-ink); } .pnos-th.is-active{ background:color-mix(in srgb, var(--pn-acc) 12%, transparent); box-shadow:inset 3px 0 0 var(--pn-acc); } .pnos-av{ position:relative; width:38px; height:38px; flex:none; border-radius:50%; background:var(--pn-slab) center/cover no-repeat; border:1px solid var(--pn-hair); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } .pnos-av .pd{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border:2px solid var(--pn-slab); } .lg-light .pnos-av .pd{ border-color:#efe9df; } .pnos-th-b{ min-width:0; display:flex; flex-direction:column; gap:2px; } .pnos-th-name{ font:800 12.5px/1.2 var(--pn-font); color:var(--pn-ink); } .pnos-th-role{ font:700 9px/1 var(--pn-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pn-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pnos-th-prev{ font:400 11px/1.4 var(--pn-font); color:var(--pn-dim); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .pnos-th-time{ font:600 9px/1 var(--pn-mono); color:var(--pn-faint); font-feature-settings:'tnum' 1; align-self:flex-start; } #pnos-dm{ display:flex; flex-direction:column; position:relative; } #pnos-dm::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background:radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--pn-acc) 8%, transparent), transparent 60%), radial-gradient(var(--pn-hair-2) 1px, transparent 1px); background-size:100% 100%, 16px 16px; } .pnos-dm-head{ position:relative; z-index:1; display:flex; align-items:center; gap:11px; padding:14px 20px; border-bottom:1px solid var(--pn-hair); background:color-mix(in srgb, var(--pn-slab) 24%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .lg-light .pnos-dm-head{ background:rgba(250,247,242,.6); } .pnos-dm-id{ display:flex; flex-direction:column; gap:2px; } .pnos-dm-id b{ font:800 14px/1 var(--pn-font); color:var(--pn-ink); } .pnos-dm-id span{ font:700 9px/1 var(--pn-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pn-faint); } .pnos-bubbles{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; gap:10px; padding:18px 20px; } .pnos-plate{ position:relative; max-width:78%; padding:10px 13px 7px; border-radius:12px; display:flex; flex-direction:column; gap:4px; } .pnos-plate-txt{ font:500 13px/1.45 var(--pn-font); } .pnos-plate-t{ font:700 8.5px/1 var(--pn-mono); letter-spacing:.08em; opacity:.7; align-self:flex-end; font-feature-settings:'tnum' 1; } .pnos-plate--in{ align-self:flex-start; border-bottom-left-radius:3px; color:var(--pn-ink); background:var(--pn-sub); border:1px solid var(--pn-hair); } .pnos-plate--out{ align-self:flex-end; border-bottom-right-radius:3px; color:#fff; background:linear-gradient(178deg, color-mix(in srgb, var(--pn-acc) 88%, #fff 12%), color-mix(in srgb, var(--pn-acc) 82%, #000 18%)); border:1px solid color-mix(in srgb, var(--pn-acc) 60%, #fff); text-shadow:0 1px 1px rgba(74,26,0,.5); } .pnos-plate--out .pnos-plate-t{ color:#fff; } .pnos-effect{ align-self:center; font:800 9px/1 var(--pn-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--pn-acc); padding:5px 10px; border:1px dashed color-mix(in srgb, var(--pn-acc) 50%, transparent); border-radius:999px; } .pnos-replies{ position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; padding:12px 20px 18px; border-top:1px solid var(--pn-hair); } .pnos-rep{ justify-content:flex-start !important; text-align:left; font-size:12px !important; padding:11px 14px !important; } .pnos-rep-ic{ width:15px; height:15px; flex:none; color:var(--pn-acc); display:inline-flex; } .pnos-rep-ic svg{ width:15px; height:15px; } .pnos-dm-empty{ display:flex; align-items:center; justify-content:center; } .pnos-empty{ text-align:center; max-width:280px; padding:24px; } .pnos-empty .pnos-eyebrow{ display:block; margin-bottom:10px; } .pnos-empty p{ font:400 13px/1.6 var(--pn-font); color:var(--pn-dim); margin:0; } .pnos-roster .pnos-th{ cursor:default; } /* ══ CALENDAR — THE CALL SHEET (CEO 2026-07-31: "calendar looks like ai slop") ═══════ Was a Google-Calendar clone: pastel rounded chips with dots, a legend of rounded swatches, a default-sans "Week 2 · Season 1" line and a black countdown slab bolted under the grid. Rebuilt in the SST dossier/editorial canon — a RULED CALL SHEET: · masthead: mono eyebrow + a display WEEK 02 lock-up (italic, ultra-tight, §2 type rules) · a ruled 5-column grid with a slab day header; TODAY is an INK slab + accent spine, not a tint · entries are hard-edged plates with a semantic LEFT SPINE and a mono TYPE TAG over the line · real WEIGHT between types (see pnos.js CAL_TAG note): brief > pitch > interview/dinner > note · the finale countdown is FUSED into the sheet's command bar with the CTA, one hard-edged rail Radius is 0–2px throughout (SST §2: near-square, brutalist). No dots, no pastel chips. ══ */ .pnos-win-body:has(.pnos-cal){ display:block; overflow-y:auto; } .pnos-cal{ padding:20px 22px 22px; } /* — masthead — */ .pnos-cal-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; padding-bottom:13px; border-bottom:2px solid var(--pn-ink); } .pnos-cal-id{ min-width:0; } .pnos-cal-h{ display:flex; align-items:baseline; gap:9px; margin-top:6px; color:var(--pn-ink); } .pnos-cal-h em{ font:800 11px/1 var(--pn-mono); font-style:normal; letter-spacing:.28em; text-transform:uppercase; color:var(--pn-dim); } .pnos-cal-h b{ font:900 italic 40px/.82 var(--pn-font); letter-spacing:-.05em; color:var(--pn-ink); font-feature-settings:'tnum' 1; } .pnos-cal-h i{ font:700 10px/1 var(--pn-mono); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--pn-dim); } /* the KEY — hard 12x3 bars, a mono index, never rounded swatches */ .pnos-cal-legend{ display:flex; flex-wrap:wrap; gap:7px 12px; align-items:center; justify-content:flex-end; max-width:400px; padding-bottom:3px; } .pnos-cal-key{ font:800 8.5px/1 var(--pn-mono); letter-spacing:.22em; color:var(--pn-faint); } .pnos-leg{ display:inline-flex; align-items:center; gap:6px; font:700 8.5px/1 var(--pn-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pn-dim); } .pnos-leg i{ width:12px; height:3px; border-radius:0; background:var(--c); flex:none; } .pnos-leg.is-finale i{ background:var(--pnos-c-finale); } /* — the ruled grid: hairlines between columns, not gaps between rounded cards — */ .pnos-cal-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; border:1px solid var(--pn-hair); border-top:0; } .pnos-cal-col{ display:flex; flex-direction:column; min-width:0; border-radius:0; border-left:1px solid var(--pn-hair); } .pnos-cal-col:first-child{ border-left:0; } .pnos-cal-col.is-today{ background:color-mix(in srgb, var(--pn-acc) 6%, transparent); box-shadow:inset 3px 0 0 var(--pn-acc); } /* the day header is a SLAB — mono day code + an index numeral */ .pnos-cal-day{ display:flex; align-items:baseline; gap:7px; padding:9px 11px; font:800 10px/1 var(--pn-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--pn-dim); background:var(--pn-sub); border-bottom:1px solid var(--pn-hair); } .pnos-cal-day b{ font:inherit; color:var(--pn-ink); } .pnos-cal-day i{ font:700 8.5px/1 var(--pn-mono); font-style:normal; letter-spacing:.1em; color:var(--pn-faint); margin-right:auto; } .pnos-cal-col.is-today .pnos-cal-day{ background:var(--pn-slab); border-bottom-color:var(--pn-acc); } .pnos-cal-col.is-today .pnos-cal-day b{ color:#fff; } .pnos-cal-col.is-today .pnos-cal-day i{ color:rgba(255,255,255,.66); } .pnos-today-pip{ font:800 7px/1 var(--pn-mono); letter-spacing:.14em; color:#0b1c30; background:var(--pn-acc); padding:3px 5px; border-radius:0; } .pnos-cal-slots{ display:flex; flex-direction:column; gap:6px; min-height:132px; padding:8px; } /* — the entry plate: a semantic SPINE + a mono type tag over the line. No dots. — */ .pnos-cal-ev{ position:relative; display:block; padding:8px 10px 9px 11px; border-radius:0; color:var(--pn-ink); border:1px solid var(--pn-hair-2); border-left:3px solid var(--c, var(--pn-acc)); background:var(--pn-sub); transition:background .14s ease, transform .14s ease; } .pnos-cal-ev-tag{ display:flex; align-items:center; gap:5px; font:800 7.5px/1 var(--pn-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--c, var(--pn-acc)); margin-bottom:5px; } .pnos-cal-ev-t{ display:block; font:700 11px/1.32 var(--pn-font); color:var(--pn-ink); } .pnos-cal-ev-go{ position:absolute; right:9px; bottom:7px; font:800 13px/1 var(--pn-font); color:var(--c, var(--pn-acc)); opacity:.8; } /* WEIGHT — the actionable brief is the only filled plate on the sheet */ .pnos-cal-ev--brief{ --c:var(--pnos-c-brief); } .pnos-cal-ev.is-actionable{ cursor:pointer; padding-right:22px; background:color-mix(in srgb, var(--c, var(--pn-acc)) 15%, var(--pn-sub)); border-color:color-mix(in srgb, var(--c, var(--pn-acc)) 32%, transparent); } .lg-light .pnos-cal-ev.is-actionable{ background:color-mix(in srgb, var(--c, var(--pn-acc)) 13%, #fff); } .pnos-cal-ev.is-actionable:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--c, var(--pn-acc)) 24%, var(--pn-sub)); } .lg-light .pnos-cal-ev.is-actionable:hover{ background:color-mix(in srgb, var(--c, var(--pn-acc)) 21%, #fff); } .pnos-cal-ev.is-actionable:focus-visible{ outline:2px solid var(--pn-acc); outline-offset:2px; } .pnos-cal-ev--pitch{ --c:var(--pnos-c-pitch); } /* interview + dinner are a RULE and a tag — present, quieter, no plate fill */ .pnos-cal-ev--interview,.pnos-cal-ev--dinner{ background:transparent; border-color:transparent; border-bottom:1px solid var(--pn-hair-2); padding-left:10px; } .pnos-cal-ev--interview{ --c:var(--pnos-c-talent); } .pnos-cal-ev--dinner{ --c:var(--pnos-c-dinner); } /* a NOTE is not an appointment — a bare mono line, no plate at all */ .pnos-cal-ev--note{ --c:transparent; background:transparent; border:0; padding:2px 0 2px 1px; } .pnos-cal-ev--note .pnos-cal-ev-tag{ color:var(--pn-faint); } .pnos-cal-ev--note .pnos-cal-ev-t{ font-weight:600; color:var(--pn-dim); } /* THE STAMP — the one loud red on the sheet */ .pnos-cal-ev--finale{ --c:var(--pnos-c-finale); background:transparent; border:2px solid var(--pnos-c-finale); border-left-width:4px; } .pnos-cal-ev--finale .pnos-cal-ev-t{ font-weight:900; letter-spacing:-.01em; } /* TAG INK — the semantic colours are chosen as GRAPHIC spines; as 7.5px mono TEXT they have to be re-inked per ground or they fail Law 1 (measured on both windows, worst case). The spine keeps the full-chroma brand value; only the tag's ink moves. */ .pnos-cal-ev--brief > .pnos-cal-ev-tag{ color:#ff9d5c; } .pnos-cal-ev--pitch > .pnos-cal-ev-tag{ color:#86a8d6; } /* 7.1:1 on the dark window */ .pnos-cal-ev--interview > .pnos-cal-ev-tag{ color:#f0b429; } .pnos-cal-ev--dinner > .pnos-cal-ev-tag{ color:#e08a5c; } .pnos-cal-ev--finale > .pnos-cal-ev-tag{ color:#ff6a55; } /* #ba1a1a is 2.7:1 on dark */ .lg-light .pnos-cal-ev--brief > .pnos-cal-ev-tag{ color:#a8420a; } .lg-light .pnos-cal-ev--pitch > .pnos-cal-ev-tag{ color:#2f5581; } .lg-light .pnos-cal-ev--interview > .pnos-cal-ev-tag{ color:#8a5a06; } .lg-light .pnos-cal-ev--dinner > .pnos-cal-ev-tag{ color:#91401a; } .lg-light .pnos-cal-ev--finale > .pnos-cal-ev-tag{ color:#ba1a1a; } /* 5.4:1 on the cream stock */ .lg-light .pnos-cal-ev-go{ color:#a8420a; } .pnos-cal-late{ display:inline-flex; align-items:center; gap:3px; color:var(--pnos-c-finale); font:800 7.5px/1 var(--pn-mono); letter-spacing:.16em; margin-left:auto; } .pnos-cal-late svg{ width:11px; height:11px; } .pnos-cal-empty{ font:700 8.5px/1 var(--pn-mono); letter-spacing:.24em; color:var(--pn-faint); padding:10px 1px; opacity:.75; } /* — the command bar: the finale countdown FUSED to the CTA on one hard-edged rail — */ .pnos-cal-foot{ display:grid; grid-template-columns:1fr auto; align-items:stretch; gap:0; margin-top:16px; border:1px solid var(--pn-hair); border-left:3px solid var(--pnos-c-finale); } .pnos-wahwahs{ position:relative; display:flex; align-items:center; gap:16px; padding:13px 18px; border-radius:0; background:var(--pn-slab); color:#fff; border:0; clip-path:none; box-shadow:none; overflow:hidden; } .pnos-wahwahs::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; background:radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--pnos-c-finale) 34%, transparent), transparent 62%); } .pnos-wahwahs > *{ position:relative; z-index:1; } .pnos-wahwahs-n{ font:900 italic 34px/.82 var(--pn-font); letter-spacing:-.04em; color:#fff; font-feature-settings:'tnum' 1; flex:none; } .pnos-wahwahs-n small{ font:700 8.5px/1 var(--pn-mono); letter-spacing:.2em; font-style:normal; color:#ffcf8f; display:block; margin-top:6px; } .pnos-wahwahs-t b{ display:block; font:800 13px/1.1 var(--pn-font); color:#fff; } .pnos-wahwahs-t span{ font:600 10.5px/1.45 var(--pn-font); color:rgba(255,255,255,.82); } .pnos-wahwahs.is-now{ box-shadow:inset 0 0 0 2px var(--pnos-c-finale); } .pnos-play{ align-self:stretch; min-width:212px; border-radius:0; } .pnos-play svg{ width:18px; height:18px; flex:none; } /* ⛔ THE CONTROL EXPLAINS ITSELF (CEO 2026-08-04: "does it auto play, at what cost, you need to explain what this does more clearly"). The button used to be a bare "Play the week", which read as though it would run the call sheet FOR you — the exact opposite of what it does. The block now carries the verb, the standing consequence, and the two live costs: the wages that land every time, and the work you are about to leave undone. Stakes at the point of choice. */ .pnos-playwrap{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:246px; padding:12px 16px; background:var(--pn-slab); } .pnos-playnote{ margin:0; font:600 11px/1.45 var(--pn-font); color:rgba(255,255,255,.72); max-width:34ch; } .pnos-playnote b{ color:#fff; font-weight:800; } .pnos-playcost{ margin:0; font:700 11.5px/1.4 var(--pn-font); color:rgba(255,255,255,.86); max-width:34ch; } .pnos-playcost.is-warn{ color:#ffb86b; } .pnos-playcost b{ color:inherit; font-weight:800; } .pnos-playwrap .pnos-play{ min-width:0; width:100%; min-height:48px; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; } .pnos-play-sub{ flex:1 1 100%; font:700 11px/1 var(--pn-mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; opacity:.85; text-align:center; } .lg-light .pnos-playnote{ color:rgba(20,16,12,.72); } .lg-light .pnos-playnote b{ color:#141008; } .lg-light .pnos-playcost{ color:rgba(20,16,12,.86); } .lg-light .pnos-playcost.is-warn{ color:#a3480d; } /* ══ RUN-THROUGH (play the week) ════════════════════════════════════════════════════════════════ */ .pnos-run{ position:fixed; inset:0; z-index:9400; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 100% at 50% 30%, #0e1626, #05060a 76%); overflow:hidden; } .pnos-run.lg-light{ background:radial-gradient(120% 100% at 50% 30%, #f4efe7, #d9d0c4 80%); } .pnos-run.pnos-run-out{ opacity:0; transition:opacity .24s ease; } .pnos-run-inner{ text-align:center; padding:24px; max-width:960px; width:100%; } .pnos-run-eye{ font:800 11px/1 var(--pn-mono); letter-spacing:.42em; color:var(--pn-acc); } .pnos-run-week{ font:900 clamp(40px,8vw,80px)/0.92 var(--pn-font); font-style:italic; letter-spacing:-.03em; color:var(--pn-ink); margin:8px 0 26px; text-shadow:0 8px 40px rgba(0,0,0,.5); } .pnos-run-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .pnos-run-day{ opacity:.32; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease; } .pnos-run-day.on{ opacity:1; transform:none; } .pnos-run-dl{ font:800 11px/1 var(--pn-mono); letter-spacing:.2em; color:var(--pn-faint); padding-bottom:9px; margin-bottom:10px; border-bottom:2px solid var(--pn-hair); } .pnos-run-day.on .pnos-run-dl{ color:var(--pn-acc); border-color:var(--pn-acc); } .pnos-run-evs{ display:flex; flex-direction:column; gap:7px; } .pnos-run-ev{ font:700 10px/1.3 var(--pn-font); color:var(--pn-ink); padding:8px 9px; border-radius:3px; background:color-mix(in srgb, var(--c, var(--pn-acc)) 18%, var(--pn-sub)); border:1px solid color-mix(in srgb, var(--c, var(--pn-acc)) 30%, transparent); border-left:3px solid var(--c, var(--pn-acc)); } .pnos-run-ev--brief{ --c:var(--pnos-c-brief); } .pnos-run-ev--pitch{ --c:var(--pnos-c-pitch); } .pnos-run-ev--interview{ --c:var(--pnos-c-talent); } .pnos-run-ev--dinner{ --c:var(--pnos-c-dinner); } .pnos-run-ev--finale{ --c:var(--pnos-c-finale); color:#fff; background:linear-gradient(160deg,#1a1210,#2a1206); } .pnos-run-ev--note{ --c:transparent; color:var(--pn-faint); background:var(--pn-sub); border-color:var(--pn-hair-2); border-left-color:var(--pn-hair); font-weight:600; } .pnos-run-ev--q{ color:var(--pn-faint); opacity:.55; font-style:italic; background:var(--pn-sub); border-color:var(--pn-hair-2); border-left-color:var(--pn-hair-2); } .pnos-run-skip{ position:absolute; bottom:26px; right:26px; appearance:none; cursor:pointer; font:700 11px/1 var(--pn-mono); letter-spacing:.1em; color:var(--pn-ink); padding:9px 15px; border-radius:999px; background:var(--pn-sub); border:1px solid var(--pn-hair); } .pnos-run-skip:hover{ background:color-mix(in srgb, var(--pn-acc) 16%, transparent); border-color:var(--pn-acc); color:var(--pn-ink); } /* ══ PHONE interstitial (9:16 lock-screen) — DARK-GLASS AA notif cards (CEO legibility fix) ═══════ */ .pnos-phone{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; background:rgba(3,5,10,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .pnos-phone.pnos-out{ opacity:0; transition:opacity .22s ease; } .pnos-phone-frame{ position:relative; width:min(324px, 84vw); aspect-ratio:9/16; max-height:90vh; border-radius:38px; overflow:hidden; border:2px solid #17191d; box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.05); } .pnos-phone-wall{ position:absolute; inset:0; cursor:pointer; background: radial-gradient(120% 80% at 50% 12%, #16243e 0%, #0b1526 46%, #05070d 100%), radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:100% 100%, 5px 5px; } .pnos-phone-notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:3; width:96px; height:24px; border-radius:14px; background:#000; } /* FIX 7 (CEO 2026-07-25: "unclear what this is — it needs more point") — the screen now says what it is. Identity block: the time, then MONDAY MORNING · WEEK N, then a one-line thesis. The phone is a pinned-dark seam in BOTH themes by design (a phone at 7am is a dark object): every value below is an explicit light ink on the navy plate, never inherited from the theme. */ .pnos-phone-clock{ position:absolute; top:11%; left:0; right:0; z-index:2; text-align:center; pointer-events:none; padding:0 18px; } .pnos-phone-time{ font:200 60px/1 var(--pn-font); color:#fff; letter-spacing:-.02em; text-shadow:0 4px 24px rgba(0,0,0,.5); } .pnos-phone-date{ font:800 10.5px/1 var(--pn-mono); letter-spacing:.2em; text-transform:uppercase; color:#ffb98a; margin-top:9px; } /* 8.9:1 on the wallpaper */ .pnos-phone-thesis{ font:400 12px/1.45 var(--pn-font); color:rgba(255,255,255,.9); margin-top:7px; } /* 13.1:1 */ .pnos-phone-notifs{ position:absolute; left:14px; right:14px; bottom:118px; z-index:2; display:flex; flex-direction:column; gap:9px; /* CEO 2026-07-31: on short screens the bottom-anchored stack climbed into the clock and "NOTIFICATIONS" overprinted "MONDAY MORNING". Hard ceiling below the clock block + scroll. */ max-height:calc(100% - 34% - 130px); overflow-y:auto; justify-content:flex-end; scrollbar-width:none; } /* a real notification-centre header — states the count, so 3 cards read as "the week", not "some cards" */ .pnos-phone-nhd{ display:flex; align-items:center; gap:8px; padding:0 4px 3px; } .pnos-phone-nhd span{ font:800 8px/1 var(--pn-mono); letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.72); } /* 8.3:1 */ .pnos-phone-nhd i{ font:800 8px/1 var(--pn-mono); font-style:normal; color:#0b1c30; background:#ffb98a; border-radius:999px; padding:3px 6px; letter-spacing:.06em; } /* 10.4:1 */ .pnos-phone-nhd::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.16); } /* AA fix: a much darker, more OPAQUE glass floor so white title + light-grey body both clear AA over the navy wallpaper (was a grey-on-grey wash). iOS vibe kept (blur + radius), contrast solved. */ /* the phone is a DECLARED pinned-dark seam in both themes — the paint is !important because the view-scoped office/pitch