/* Portal styles. RULES (enforced by tools/lint-ui.js): - every colour lives in the :root block below, nowhere else - every class starts with pp- - no ad / ads / banner / sponsor / promo in class names (ad blockers hide them) The final brand colours drop in by editing :root only. */ :root { color-scheme: dark; /* C - NIGHT GLASS. Apple's two-layer model: the bar floats on glass, the content sits underneath on opaque material. Gold is the app's colour and means you can act, green means done, violet means personal, orange means late, and red is kept for over the line and delete. (Nov 6 2026: the Sworn Record portal was red; Shadi, "Gold should be the main color".) */ --bg: #0A0B0D; --panel: #0F1114; --surface: #0F1114; --surface-2: #1B1E23; --surface-2-hi: #23272D; --surface-3: #2B3037; --line: #22262B; --line-2: #343A41; --card-line: #2B3037; --glass: rgba(21, 24, 29, 0.82); --glass-thin: rgba(21, 24, 29, 0.7); --glass-line: rgba(255, 255, 255, 0.09); --glass-edge: rgba(255, 255, 255, 0.14); /* the selection pill is tinted glass: a lens that brightens and saturates what is behind it, with a lit rim where the lens curves */ --g-lift: rgba(255, 255, 255, 0.20); --g-tint: rgba(212, 175, 55, 0.24); --g-tint-rim: rgba(230, 199, 102, 0.55); --g-spec: rgba(255, 255, 255, 0.50); --g-under: rgba(255, 255, 255, 0.11); --g-inner: rgba(255, 255, 255, 0.06); --g-cast: rgba(0, 0, 0, 0.45); /* liquid glass section bars, the Sworn Record site's recipe (Sep 28): mostly clear, a light blur, almost no tint, light caught on the edge nearest the sky */ --lg-tint: rgba(18, 18, 18, 0.2); --lg-hi: rgba(255, 255, 255, 0.16); --lg-mid: rgba(255, 255, 255, 0.03); --lg-clear: rgba(255, 255, 255, 0); --lg-low: rgba(255, 255, 255, 0.05); --lg-rim: rgba(255, 255, 255, 0.22); --lg-line: rgba(244, 242, 238, 0.16); --lg-cast: rgba(0, 0, 0, 0.6); --lg-ink: rgba(0, 0, 0, 0.55); --mask-on: rgba(0, 0, 0, 1); --mask-off: rgba(0, 0, 0, 0); --fade-top: rgba(10, 11, 13, 0.92); --fade-none: rgba(10, 11, 13, 0); --edge-hi: rgba(255, 255, 255, 0.06); --edge-hi-strong: rgba(255, 255, 255, 0.13); --inset-dark: rgba(0, 0, 0, 0.45); --shadow-ctl: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 5px 14px rgba(0, 0, 0, 0.32); --shadow-card-hi: 0 2px 5px rgba(0, 0, 0, 0.5), 0 14px 30px rgba(0, 0, 0, 0.45); --shadow-key: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(212, 175, 55, 0.26); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.55), 0 34px 74px rgba(0, 0, 0, 0.66); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --text: #E9EBEF; --text-dim: #A3A8B0; --text-faint: #888D95; /* gold = interactive. The Agents Lens colour (#D4AF37, the logo's): fills, the selection pill, focus, in progress. Gold is light, so what sits ON a gold fill is dark ink (--on-accent, 8.8:1), never white. --accent-hi is the lighter gold for text and icons. */ --accent: #D4AF37; --accent-hi: #E6C766; --accent-soft: rgba(212, 175, 55, 0.16); --accent-soft-2: rgba(212, 175, 55, 0.07); --accent-line: rgba(212, 175, 55, 0.5); --on-accent: #17130A; /* green = done, and only done */ --done: #46C494; --done-soft: rgba(70, 196, 148, 0.16); --done-ink: #07120D; /* blue = your move, so far only in Leads > Pipeline (Shadi accepted it, Oct 18 2026): a pick or a cut waiting on you, and the links to them. Red there means stopped and nothing else. 7.1:1 on --dk-card. Its soft tints are color-mix of this one, so it is one token. */ --act: #7EAEFF; /* the Pipeline's re-edit panel (Oct 19): the video's width over height (set per video once its first frame loads; 9:16 until then) and the tallest it may be, which the phone's full-height sheet sets again from the screen */ --pl-ar: .5625; --pl-h: 760px; /* Leads > Picks too since Oct 19 (direction A): Approve is the one blue FILL. --act-hi is its hover, --act-ink the text on it (8.2:1 on --act), --act-cast its shadow (the blue version of --shadow-key). */ --act-hi: #9CC1FF; --act-ink: #0B1424; --act-cast: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(126, 174, 255, 0.26); /* Picks' players (Oct 19): the three columns share one width so the table's rows line up under them. It follows the screen's height (a 9:16 player whose buttons stay above the fold: 1440x900 gives 272px) and the room beside the list (100cqi is the Picks view, a size container), never under 220px or over 330px. --pk-n is how many videos a lawyer has (set on the row). */ --pk-gap: 20px; --pk-n: 3; --pk-listw: 300px; --pk-colw: clamp(220px, min((100vh - 452px) * .5625 + 20px, (100cqi - var(--pk-listw) - 28px - 2 * var(--pk-gap)) / 3), 330px); --pk-cardw: 236px; /* over the line and delete (an edge and a chip on a card, never a fill you press) */ --red: #FF7468; --red-soft: rgba(255, 116, 104, 0.15); --red-line: rgba(255, 116, 104, 0.45); /* violet = personal: his own life, not the business. It was yellow, which sat too close to the gold accent once gold became the app's colour (Nov 6 2026). */ --personal: #C4A3FF; --personal-soft: rgba(196, 163, 255, 0.16); --personal-line: rgba(196, 163, 255, 0.5); /* a task on both lists (Sep 28): its own hue, clear of red (act, late), green (done) and yellow (personal) */ --both: #9DB8FF; --both-soft: rgba(157, 184, 255, 0.15); /* People are told in words, not hue, so these stay neutral. They exist only because the base rules reference them. Do not put green here: green is done. */ --person-0: #C9CDD4; --person-0-soft: rgba(201, 205, 212, 0.13); --person-1: #C9CDD4; --person-1-soft: rgba(201, 205, 212, 0.13); --from: #E0A277; --from-soft: rgba(224, 162, 119, 0.13); --dot: #E6C766; --scrim: rgba(3, 4, 6, 0.6); /* REDESIGN LAB (Oct 7): sidebar, Home widgets, late in orange. Late moves off red so red only ever means "you can act on this"; orange carries late everywhere in the lab. */ --late: #FF9450; --late-soft: rgba(255, 148, 80, 0.15); --late-line: rgba(255, 148, 80, 0.55); --side-bg: #0E1013; /* the phone bar (Nov 6 2026): solid, no glass; More is a light round button */ --pb-bg: #0B0C0F; --pb-more-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.25) inset; --w-bg: #131519; --w-card: #1D2026; --w-card-hi: #252930; --w-line: rgba(255, 255, 255, 0.07); --w-line-2: rgba(255, 255, 255, 0.14); --w-glow: rgba(212, 175, 55, 0.12); --w-glow-none: rgba(212, 175, 55, 0); --w-glow-done: rgba(70, 196, 148, 0.09); --w-glow-done-none: rgba(70, 196, 148, 0); --w-card-line: rgba(255, 255, 255, 0.05); /* projects (lab, Oct 8): neutral. Shadi: "stop making projects purple". A project is told by its icon and tag, not a hue. */ --proj: #C9CDD4; --proj-soft: rgba(255, 255, 255, 0.08); --proj-line: rgba(255, 255, 255, 0.2); --proj-card: #1D2026; --proj-card-hi: #252930; --proj-sheet-1: #1D2026; --proj-sheet-2: #1D2026; --proj-ink: #0A0B0D; --proj-gap: rgba(255, 255, 255, 0.05); --proj-gap-2: rgba(255, 255, 255, 0.015); --proj-wash: rgba(255, 255, 255, 0); --proj-wash-0: rgba(255, 255, 255, 0); --proj-line-soft: rgba(255, 255, 255, 0.12); --proj-seg: rgba(255, 255, 255, 0.12); --proj-next: rgba(0, 0, 0, 0.24); --proj-tile: #1D2026; --w-hatch: rgba(255, 255, 255, 0.025); --w-lift: 0 18px 40px rgba(0, 0, 0, 0.6); --w-ghost: rgba(28, 30, 35, 0.96); --pop-bg: #17191D; --both-ink: #0A0B0D; /* PROMPTER ONLY. The reading stage is true black, not the app's near-black: it is a light source held at arm's length behind a sheet of rig glass, and any lift in the background washes the text out and bounces off the glass. */ --pr-stage: #000000; --pr-hud: rgba(18, 19, 22, 0.72); --pr-hud-line: rgba(255, 255, 255, 0.16); --pr-track: rgba(255, 255, 255, 0.14); --pr-rail: rgba(255, 255, 255, 0.08); --pr-thumb-cast: rgba(0, 0, 0, 0.55); /* prompter remote (Oct 12): the glass the computer's header and controls sit on over the words */ --prr-shade: rgba(0, 0, 0, 0.9); --prr-shade-none: rgba(0, 0, 0, 0); --prr-live-glow: rgba(255, 116, 104, 0.35); /* FINANCES ONLY (Shadi, Sep 17: "add some colour", look B "Bold chips"). Money is the one section where colour tells blocks and expense types apart. Every light tone clears 4.5:1 as text on a card; icons sit on the deep-to-light gradient. */ --fin-green: #34D399; --fin-green-deep: #059669; --fin-rose: #FB7185; --fin-rose-deep: #E11D48; --fin-sky: #38BDF8; --fin-sky-deep: #0284C7; --fin-violet: #A78BFA; --fin-violet-deep: #7C3AED; --fin-amber: #FBBF24; --fin-amber-deep: #D97706; --fin-pink: #F472B6; --fin-pink-deep: #DB2777; --fin-teal: #2DD4BF; --fin-teal-deep: #0D9488; --fin-orange: #FB923C; --fin-orange-deep: #EA580C; --fin-chip-ink: #FFFFFF; --fin-chip-rim: rgba(255, 255, 255, 0.35); /* expense types, in the colours of the old finance sheet's type chips */ --fin-k1: #94A3B8; /* Business */ --fin-k2: #FB7185; /* Recurring */ --fin-k3: #C084FC; /* Fees */ --fin-k4: #FACC15; /* Employees */ --fin-k5: #FB923C; /* Job Expense */ --fin-k6: #4ADE80; /* Transportation */ --fin-k7: #38BDF8; /* Events */ --fin-k8: #60A5FA; /* Equipment */ --fin-k9: #10B981; /* Paid Ads */ /* TIME BOX ONLY (Shadi, Sep 28). The now line is white, not red: red means "you can act", and the line is a fact, not a button. The overrun is the one red FILL in the app, and it is striped so it reads as time that was not planned rather than a thing to press. */ --tb-now: #F2F4F7; --tb-now-ink: #0A0B0D; --tb-hour: rgba(255, 255, 255, 0.075); --tb-half: rgba(255, 255, 255, 0.032); --tb-past: rgba(0, 0, 0, 0.26); --tb-hatch-a: #1B1E23; --tb-hatch-b: #121418; --tb-over-a: rgba(255, 116, 104, 0.34); --tb-over-b: rgba(255, 116, 104, 0.12); --tb-over-ink: #FF8F85; --tb-early-a: rgba(255, 255, 255, 0.05); --tb-early-b: rgba(255, 255, 255, 0.015); --tb-lift: rgba(0, 0, 0, 0.55); --tb-handle: #FFFFFF; /* EDIT ROOM ONLY (Oct 1). A video sits on true black like any player, so letterboxing reads as the frame rather than as a grey box. */ --er-screen: #000000; /* Which business a video is for (Shadi, Oct 1: "brand colours"). The manager chat tags each editor and review; the portal only paints it, as an edge and a label, never a fill you press. Agents Lens keeps its own gold HERE ONLY (the one exception to the no-gold lint rule, which allows nothing but these --er-al tokens); Sworn Record is the portal's own red. */ --er-al: #D4AF37; --er-al-ink: #E6C766; --er-al-soft: rgba(212, 175, 55, 0.16); --er-al-line: rgba(212, 175, 55, 0.5); /* the client review page's Agents Lens look (Oct 14) */ --er-al-g1: #F6E39B; /* the metallic text gradient, sampled from the logo's own lettering (Oct 14) */ --er-al-g2: #E0C469; --er-al-g3: #C5A647; --er-al-g4: #DCBE60; --er-sr: #D62B22; --er-sr-ink: #FF6F63; --er-sr-soft: rgba(214, 43, 34, 0.18); --radius: 16px; --radius-card: 13px; --radius-sm: 11px; --tap: 44px; --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* The Docket (Leads > Docket, Oct 12): the lanes keep the local viewer's colours so a card reads the same in both places, except Tier 3, which is violet because the portal has no gold. Dots, edges and text only, never a filled control. */ --dk-t1: #E0352B; --dk-t2: #EE8A62; --dk-t3: #A98BDB; --dk-t4: #8A93A6; --dk-check: #7FA7D9; --dk-out: #5D5D64; /* Build 2 (Oct 15), the Dossier redesign (direction A). Tier 2 moved off amber to a soft coral: the amber read too close to gold. A lane's soft tint is its chip; --dk-t1-ink and --dk-out-ink are the chip text where the lane colour itself is too dark to read (4.5:1 at least on its own tint; fix round 1 raised Tier 3, Tier 4 and Out). --dk-faint-hi is the quiet text of a selected row (5.1:1 on --dk-card-hi). A card must stand off the page (#0A0B0D): --dk-card is 1.24:1 against it, --dk-card-hi 1.35:1 (the selected row), --dk-well sits sunk inside a card. --fa is a video frame's width over height, set per strip once it loads. */ --dk-t1-ink: #FF6F63; --dk-t3-ink: #B39BE0; --dk-t4-ink: #9CA3B4; --dk-faint-hi: #959AA2; --dk-t1-soft: rgba(224, 53, 43, 0.16); --dk-t2-soft: rgba(238, 138, 98, 0.15); --dk-t3-soft: rgba(169, 139, 219, 0.15); --dk-t4-soft: rgba(138, 147, 166, 0.15); --dk-check-soft: rgba(127, 167, 217, 0.15); --dk-out-ink: #9DA1A9; --dk-out-soft: rgba(138, 143, 151, 0.12); --dk-card: #1F2228; --dk-card-hi: #262A31; --dk-well: #15171B; --dk-rim: rgba(255, 255, 255, 0.075); --dk-rim-2: rgba(255, 255, 255, 0.13); --dk-shimmer: rgba(255, 255, 255, 0.06); --font-mono: ui-monospace, "SF Mono", "Menlo", monospace; --fa: .5625; /* Quran (Nov 6 2026, from the tracker). Its own green, the way Finances has its own colours. */ --q: #22B07D; --q-hi: #4FD39B; --q-deep: #0B4F34; --q-ink: #03150D; --q-line: rgba(79, 211, 155, 0.38); --q-late: #FFB86B; /* The reader's three themes. --qr-* is what the reader paints with; dark is the default and css/quran.css points it at the grey or light set. */ --qr-bg: transparent; --qr-bar: #0A0B0D; --qr-ink: #EAF3EE; --qr-dim: rgba(234, 243, 238, 0.6); --qr-line: rgba(255, 255, 255, 0.07); --qr-chip: rgba(255, 255, 255, 0.05); --qr-accent: #4FD39B; --qr-hl: rgba(34, 176, 125, 0.12); --qr-hl-ring: rgba(34, 176, 125, 0.32); --qr-mask: rgba(255, 255, 255, 0.09); --qr-scale: 1; --qr-grey-bg: #1B1F1D; --qr-grey-ink: #E6ECE8; --qr-grey-dim: rgba(230, 236, 232, 0.6); --qr-grey-line: rgba(255, 255, 255, 0.09); --qr-grey-chip: rgba(255, 255, 255, 0.06); --qr-light-bg: #F7F4EC; --qr-light-ink: #1B2420; --qr-light-dim: #5A6B62; --qr-light-line: rgba(20, 40, 30, 0.14); --qr-light-chip: rgba(20, 40, 30, 0.06); --qr-light-accent: #0B6E45; --qr-light-hl: rgba(14, 145, 89, 0.1); --qr-light-ring: rgba(14, 145, 89, 0.26); --qr-light-mask: rgba(20, 40, 30, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; overscroll-behavior-y: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } .pp-ic { flex: none; display: block; } .pp-boot { min-height: 100dvh; background: var(--bg); } /* ---------- buttons + inputs ---------- */ .pp-btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; } .pp-btn:disabled { opacity: .6; cursor: default; } .pp-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pp-btn-ghost { background: transparent; } .pp-btn-danger { background: transparent; color: var(--red); border-color: var(--red-line); } .pp-iconbtn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-dim); } .pp-chipbtn { min-height: var(--tap); padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 13.5px; color: var(--text-dim); } /* Edit / Done: a quiet text button that sits on a heading line. Boxes and delete buttons only show while it says Done, so a panel reads as a plain list the rest of the time. The negative margin keeps the 44px tap area without making the heading any taller. */ .pp-editbtn { flex: none; min-width: var(--tap); min-height: var(--tap); margin: -8px -10px -8px 0; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-hi); font-size: 13.5px; font-weight: 600; } .pp-editbtn.is-on { font-weight: 700; } @media (hover: hover) { .pp-editbtn:hover { background: var(--accent-soft); } } .pp-input, .pp-select { width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); font-size: 16px; outline: none; } /* Safari ignores min-height on native selects and date inputs unless appearance is reset. */ .pp-select { -webkit-appearance: none; appearance: none; padding-right: 34px; line-height: 1.3; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; } .pp-input::placeholder { color: var(--text-faint); } .pp-input:focus, .pp-select:focus { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-soft); } textarea.pp-input { resize: vertical; line-height: 1.45; } .pp-lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; } .pp-seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); } .pp-seg-btn { flex: 1; min-height: var(--tap); padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; } .pp-seg-btn.is-on { background: var(--accent); color: var(--on-accent); } .pp-newdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px var(--accent-soft); margin-right: 7px; vertical-align: middle; flex: none; } /* ---------- top bar ---------- */ .pp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: calc(var(--safe-top) + 8px) 24px 8px; min-height: 60px; background: var(--bg); border-bottom: 1px solid var(--line); } .pp-top-brand { display: flex; align-items: center; gap: 10px; } .pp-top-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; } /* The locked Sworn Record mark, shipped as its own file so the brand's colours never have to live in the token system. Resize it, never redraw it. It has no tile behind it (Shadi, Sep 21), so it runs a little larger than the old chip did to carry the same weight, and it is the reverse cut: on this near-black background the plain cut inverts into a wireframe, while the reverse keeps the solid card faces. */ .pp-brandmark { width: 52px; height: 52px; display: block; object-fit: contain; } .pp-brandmark-sm { width: 32px; height: 32px; } .pp-tabs { display: flex; gap: 4px; } .pp-tab { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-weight: 600; } .pp-tab.is-on { background: var(--surface-2); color: var(--text); } .pp-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .pp-syncnote { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--from); } .pp-update { min-height: 36px; font-size: 13px; } .pp-userchip { min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; } .pp-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hi); font-weight: 700; } /* ---------- focus timer (Shadi, Sep 21 2026) ---------- Two chips that must never be mistaken for one another. Yours is the filled red pill with the time in the open and the ring filling as it runs. Theirs is a quiet circle with their initial and a live dot, and no time at all until you ask: hovering shows it, clicking pins it open until you click again, which is also the only way in on a phone. Everything here is the app's existing red, grey and white; the difference is carried by fill against outline and by what is on show, not by a new colour. */ .pp-focus { display: flex; align-items: center; gap: 8px; } .pp-focus-start { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-dim); font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-ctl); transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .pp-focus-word { white-space: nowrap; } /* yours: filled, loud, and the whole pill is the stop button */ .pp-focus-mine { min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 9px 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 14.5px; font-weight: 700; box-shadow: var(--shadow-key); } .pp-focus-time { font-variant-numeric: tabular-nums; letter-spacing: .01em; } .pp-focus-ring { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--on-accent) var(--pp-focus-pct, 0%), var(--accent-hi) 0); } .pp-focus-ring-in { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); } .pp-focus-stop { display: inline-flex; opacity: .85; } .pp-focus-done { min-height: var(--tap); display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--done); background: var(--done-soft); color: var(--done); font-size: 14px; font-weight: 700; } /* theirs: quiet until asked. The time is a box that opens, so nothing jumps around it. */ .pp-focus-mate { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-dim); box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-ctl); transition: border-color .18s var(--ease), background .18s var(--ease); } .pp-focus-mate.is-pinned { border-color: var(--accent-line); background: var(--surface-2); color: var(--text); } .pp-focus-mate-face { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 700; } /* the dot is the whole signal that a session is running, so it sits proud of the circle */ .pp-focus-mate-live { position: absolute; right: -2px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 2px var(--surface); } .pp-focus-mate.is-pinned .pp-focus-mate-live { box-shadow: 0 0 0 2px var(--surface-2); } .pp-focus-mate-time { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: max-width .24s var(--ease), margin-left .24s var(--ease), opacity .18s var(--ease); } .pp-focus-mate.is-pinned .pp-focus-mate-time { max-width: 64px; margin-left: 7px; opacity: 1; } @media (hover: hover) and (pointer: fine) { .pp-focus-start:hover { color: var(--text); border-color: var(--accent-line); } .pp-focus-mate:hover { border-color: var(--accent-line); } .pp-focus-mate:hover .pp-focus-mate-time { max-width: 64px; margin-left: 7px; opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .pp-focus-mate-live { animation: pp-focus-live 2s var(--ease) infinite; } .pp-focus-mine, .pp-focus-done { animation: pp-fade .3s var(--ease) both; } } @keyframes pp-focus-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .55; } } /* The length picker: the dial (Shadi picked it Sep 22 out of three directions, and asked for the custom button on it). One number at headline size in the brand serif, quiet ticks to set it, one Start. The boldness is spent in exactly one place and everything else gets out of its way. Custom swaps the numeral itself for a field, so there is still only ever ONE number on screen: no second input competing with the one that matters. The old 4x2 grid of preset boxes is gone, along with the dead space inside each box and the disabled Start that read as broken rather than as not-yet. */ .pp-menu.pp-focus-pop { width: 316px; max-width: calc(100vw - 24px); min-width: 0; padding: 0 0 12px; } .pp-focus-head { display: flex; align-items: center; gap: 8px; padding: 10px 6px 0 16px; } .pp-focus-eyebrow { flex: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); } /* the quiet text button that sits on a heading line, same as Edit / Done elsewhere */ .pp-focus-swap { flex: none; min-width: var(--tap); min-height: var(--tap); margin: -10px 0; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-hi); font-size: 13.5px; font-weight: 600; } .pp-focus-swap[aria-pressed="true"] { font-weight: 700; } .pp-focus-dial { display: flex; align-items: baseline; gap: 9px; padding: 2px 16px 12px; } .pp-focus-dial-n, .pp-focus-dial-in { font-family: var(--font-display); font-size: 62px; font-weight: 600; line-height: .92; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; } /* the field has to BE the numeral, not sit next to it, so every bit of input chrome goes */ .pp-focus-dial-in { min-width: 0; padding: 0; border: 0; background: transparent; outline: none; -webkit-appearance: none; appearance: none; border-bottom: 2px solid var(--accent-line); border-radius: 0; } .pp-focus-dial-in::-webkit-outer-spin-button, .pp-focus-dial-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pp-focus-dial-in::placeholder { color: var(--text-faint); } .pp-focus-dial-in:focus { border-bottom-color: var(--accent-hi); } .pp-focus-dial-u { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .pp-focus-ticks { display: flex; gap: 4px; padding: 0 12px 12px; } .pp-focus-tick { flex: 1; min-width: 0; min-height: var(--tap); padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .14s var(--ease), color .14s var(--ease); } .pp-focus-tick.is-on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 var(--edge-hi); } .pp-focus-go { display: block; width: calc(100% - 24px); margin: 0 12px; min-height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700; box-shadow: var(--shadow-key); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); } /* Nothing typed yet is not an error: the button goes quiet rather than staying a dimmed red slab, which is what read as broken in the first version. */ .pp-focus-go:disabled { background: var(--surface-2); border-color: var(--line-2); color: var(--text-faint); box-shadow: inset 0 1px 0 var(--edge-hi); cursor: default; opacity: 1; } @media (hover: hover) and (pointer: fine) { .pp-focus-tick:hover { background: var(--surface-2); color: var(--text); } .pp-focus-swap:hover { background: var(--accent-soft); } } @media (prefers-reduced-motion: no-preference) { .pp-focus-tick:active, .pp-focus-go:not(:disabled):active { transform: scale(.97); } } @media (max-width: 760px) { /* 375px. One chip fits beside the name; two do not, by about 22px. So the title is what gives way, and only while BOTH sessions are on screen at once: at that moment the bar has two live things to carry and the word "Sworn Record" is the least load-bearing thing in it. It is back the second either timer stops. The ellipsis is the fallback for anything without :has(), and for the sync note turning up too. */ .pp-top:has(.pp-focus-mine):has(.pp-focus-mate) .pp-top-name { display: none; } .pp-top-brand { min-width: 0; } .pp-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-focus { gap: 6px; } .pp-focus-mine { padding: 0 10px; gap: 7px; } .pp-focus-stop { display: none; } .pp-menu.pp-focus-pop { width: min(316px, calc(100vw - 24px)); } } .pp-menu-scrim { position: fixed; inset: 0; z-index: 60; } .pp-menu { position: fixed; z-index: 61; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); } .pp-menu-who { padding: 10px 12px; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--line); margin-bottom: 4px; } .pp-menu-item { width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 15px; text-align: left; } /* ---------- preview toolbar (demo builds only) ---------- */ .pp-demo { display: flex; align-items: center; gap: 10px; padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .pp-demo::-webkit-scrollbar { display: none; } .pp-demo-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--from); padding: 4px 8px; border-radius: 6px; background: var(--from-soft); } .pp-seg-sm { flex: none; align-items: center; } .pp-seg-sm .pp-seg-btn { flex: none; font-size: 13px; min-height: var(--tap); } .pp-demo-lbl { font-size: 12px; color: var(--text-faint); padding: 0 6px 0 8px; white-space: nowrap; } .pp-demo-btn { flex: none; font-size: 13px; } /* ---------- page ---------- */ .pp-main { max-width: 1440px; margin: 0 auto; padding: 22px 24px calc(48px + var(--safe-bottom)); } .pp-page { animation: pp-fade .25s ease both; } @keyframes pp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .pp-page-head { margin-bottom: 16px; } .pp-h1 { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -.02em; } .pp-sub { margin: 4px 0 0; color: var(--text-dim); font-size: 14.5px; } .pp-sub b { color: var(--text); font-weight: 600; } .pp-views { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .pp-views::-webkit-scrollbar { display: none; } .pp-view { flex: none; min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-dim); font-weight: 600; font-size: 14.5px; } .pp-view.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pp-view .pp-newdot { margin: 0; } .pp-view-ct { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--surface-3); color: var(--text-dim); } .pp-view.is-on .pp-view-ct { background: var(--accent-hi); color: var(--on-accent); } .pp-qadd { display: grid; grid-template-columns: 1fr 150px 140px 150px auto auto; gap: 8px; margin-bottom: 18px; } .pp-select.is-empty { color: var(--text-faint); } .pp-select option { color: var(--text); } .pp-flash { position: fixed; left: 50%; bottom: calc(20px + var(--safe-bottom)); z-index: 70; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--accent-line); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 600; transition: opacity .2s, transform .2s; white-space: nowrap; } .pp-flash.is-on { opacity: 1; transform: translate(-50%, 0); } .pp-viewbody { animation: pp-fade .2s ease both; } /* ---------- sections ---------- */ .pp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .pp-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; transition: border-color .15s, background .15s; min-width: 0; } .pp-sec.is-drop { border-color: var(--accent-hi); background: var(--accent-soft-2); } .pp-sec-head { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 8px; } .pp-sec-toggle { width: 100%; min-height: var(--tap); border: 0; background: transparent; text-align: left; padding: 0 4px; } .pp-sec-mark { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-faint); flex: none; } .pp-sec-in_progress .pp-sec-mark { border-color: var(--accent-hi); background: linear-gradient(90deg, var(--accent-hi) 50%, transparent 50%); } .pp-sec-done .pp-sec-mark { border-color: var(--accent); background: var(--accent); } .pp-sec-label { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); } .pp-sec-ct { font-size: 12.5px; color: var(--text-faint); } .pp-sec-chev { margin-left: auto; color: var(--text-faint); transition: transform .2s; } .pp-sec-chev.is-open { transform: rotate(180deg); } .pp-sec-list { display: flex; flex-direction: column; gap: 7px; } .pp-cols .pp-sec-list, .pp-side .pp-sec-list { min-height: 72px; } .pp-empty { padding: 16px 10px; text-align: center; font-size: 13px; color: var(--text-faint); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); } .pp-older { width: 100%; font-size: 13px; color: var(--text-dim); } /* ---------- cards ---------- */ .pp-card { position: relative; display: flex; align-items: flex-start; gap: 2px; padding: 4px 10px 8px 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; outline: none; } .pp-card:focus-visible { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-soft); } .pp-card.is-late { border-left: 3px solid var(--red); } .pp-card.is-dim { opacity: .55; } .pp-card.is-dragging { opacity: .4; } .pp-card[draggable="true"] { cursor: grab; } .pp-status { width: var(--tap); height: var(--tap); flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; } .pp-status-ring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-faint); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); transition: border-color .15s, background .15s; } .pp-st-in_progress .pp-status-ring { border-color: var(--accent-hi); background: linear-gradient(90deg, var(--accent-hi) 50%, transparent 50%); } .pp-st-done .pp-status-ring { border-color: var(--accent); background: var(--accent); } .pp-card-main { flex: 1; min-width: 0; padding-top: 10px; } .pp-card-title { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .pp-st-done .pp-card-title { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-faint); } .pp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; } .pp-card-meta:empty { display: none; } .pp-due { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-weight: 600; white-space: nowrap; } .pp-due-late { color: var(--red); background: var(--red-soft); } .pp-due-now { color: var(--accent-hi); background: var(--accent-soft); } .pp-due-soon { color: var(--text); background: var(--surface-3); } .pp-due-far { color: var(--text-dim); background: var(--surface-3); } .pp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); white-space: nowrap; } .pp-tag-client { color: var(--text); } .pp-owner { padding: 2px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; } .pp-owner-u0 { color: var(--person-0); background: var(--person-0-soft); } .pp-owner-u1 { color: var(--person-1); background: var(--person-1-soft); } .pp-owner-pool { color: var(--text-dim); border: 1px dashed var(--line-2); } .pp-owner-both { color: var(--text); background: var(--surface-3); } .pp-from { padding: 2px 8px; border-radius: 999px; color: var(--from); background: var(--from-soft); font-weight: 600; white-space: nowrap; } .pp-taken { color: var(--text-dim); font-style: italic; } .pp-take { align-self: center; margin-left: 6px; min-height: 40px; padding: 0 12px; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hi); font-size: 13.5px; } /* ---------- subtasks: a checklist on the card ---------- The opener is meant to disappear until you look for it: no fill, no border, just the count and a chevron in the faint ink. It is a full tap target all the same, which is why the box is bigger than the mark inside it. */ .pp-subsbtn { flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: var(--tap); height: var(--tap); padding: 0 4px 0 6px; margin-right: -6px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-faint); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .pp-subsbtn.is-open { color: var(--text-dim); } .pp-subsbtn-chev { transition: transform .24s var(--ease); } .pp-subsbtn.is-open .pp-subsbtn-chev { transform: rotate(180deg); } .pp-subs-tag { font-variant-numeric: tabular-nums; font-weight: 700; } /* height is driven by PP_MOTION.expand, so it is 0 or auto and never anything in between once the animation has finished */ .pp-subs { overflow: hidden; height: 0; } .pp-subs-list { list-style: none; margin: 9px 0 1px; padding: 0 0 0 3px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 1px; } .pp-substep { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; text-align: left; padding: 5px 8px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13px; line-height: 1.32; } .pp-substep-box { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--text-faint); display: inline-flex; align-items: center; justify-content: center; color: var(--done-ink); transition: background .16s var(--ease), border-color .16s var(--ease), transform .3s var(--spring); } .pp-substep-box.is-done { border-color: var(--done); background: var(--done); } .pp-substep-title { min-width: 0; overflow-wrap: anywhere; } .pp-substep.is-done .pp-substep-title { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); } /* compact cards (phone side by side) */ .pp-card.is-compact { display: block; min-height: 52px; padding: 9px 10px; } .pp-card.is-compact .pp-card-title { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pp-card.is-compact .pp-card-meta { margin-top: 5px; font-size: 11.5px; } /* ---------- side by side ---------- */ .pp-side-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: stretch; } .pp-side-person { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; } .pp-side-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .pp-side-open { font-size: 13px; color: var(--text-faint); } .pp-addfor { margin-left: auto; font-size: 13.5px; } .pp-poolnote { color: var(--text-faint); font-size: 13px; margin: 4px 2px 0; } /* ---------- clients ---------- */ .pp-clients { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; } .pp-clients.is-stacked { display: block; } .pp-clist { min-width: 0; } .pp-ctools { display: flex; gap: 8px; margin-bottom: 10px; } .pp-csearch { -webkit-appearance: none; appearance: none; } .pp-cadd { flex: none; } .pp-cnew { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .pp-cnew .pp-input { flex: 1 1 100%; } .pp-cnew .pp-btn { flex: 1; } .pp-crows { display: flex; flex-direction: column; gap: 7px; } .pp-crow { width: 100%; min-height: 64px; display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; text-align: left; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; } .pp-crow.is-on { border-color: var(--accent-line); background: var(--accent-soft-2); } .pp-crow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pp-crow-name { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; } .pp-crow-biz { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; } .pp-crow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: 12px; color: var(--text-faint); } .pp-crow-price { color: var(--text); font-weight: 600; } .pp-cstate { padding: 2px 8px; border-radius: 999px; font-weight: 600; background: var(--surface-3); color: var(--text-dim); } .pp-cstate-cancelled { color: var(--red); background: var(--red-soft); } .pp-cempty { padding: 70px 20px; text-align: center; color: var(--text-faint); border: 1px dashed var(--line-2); border-radius: var(--radius); } .pp-cprofile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .pp-cback { align-self: flex-start; margin-left: -10px; padding: 0 12px 0 4px; border-color: transparent; color: var(--accent-hi); } .pp-chead { display: flex; flex-direction: column; gap: 8px; } .pp-chead .pp-seg { max-width: 430px; } .pp-cname { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .pp-h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); } .pp-cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .pp-cdate { width: 100%; } .pp-money { position: relative; } .pp-money-sign { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .pp-money .pp-input { padding-left: 26px; } .pp-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .pp-contact-row { display: flex; gap: 6px; } .pp-contact-go { flex: none; min-width: 70px; text-decoration: none; color: var(--accent-hi); border-color: var(--accent-line); background: var(--accent-soft); } .pp-cnotes { min-height: 140px; } .pp-ctask-add { display: flex; gap: 8px; margin-bottom: 12px; } .pp-ctasks { margin-bottom: 10px; } .pp-ctasks .pp-sec-head { position: static; padding: 0 2px 6px; background: none; } .pp-cfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } /* ---------- due date button + pop-up calendar ---------- */ .pp-duebtn { min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-faint); font-size: 15px; text-align: left; white-space: nowrap; } .pp-duebtn.is-set { color: var(--text); } .pp-duebtn .pp-ic { color: var(--accent-hi); } .pp-duebtn-text { overflow: hidden; text-overflow: ellipsis; } .pp-duebtn[aria-expanded="true"] { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-soft); } .pp-duebtn-lg { flex: 1; font-size: 16px; } .pp-cal-scrim { position: fixed; inset: 0; z-index: 94; } .pp-cal-scrim.is-sheet { background: var(--scrim); animation: pp-fadein .18s ease both; } .pp-cal { position: fixed; z-index: 95; width: 320px; padding: 10px 12px 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: pp-pop .16s ease both; transform-origin: top left; } .pp-cal.is-sheet { left: 0; right: 0; bottom: 0; width: auto; padding: 12px 16px calc(14px + var(--safe-bottom)); border-radius: 20px 20px 0 0; border-bottom: 0; animation: pp-sheet .24s cubic-bezier(.2, .8, .2, 1) both; } @keyframes pp-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes pp-sheet { from { transform: translateY(100%); } to { transform: none; } } @keyframes pp-fadein { from { opacity: 0; } to { opacity: 1; } } .pp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .pp-cal-month { font-size: 16px; font-weight: 700; } .pp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; } .pp-cal-wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 4px 0 6px; } .pp-cal-day { justify-self: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); } .pp-cal-day.is-past { color: var(--text-faint); } .pp-cal-day.is-today { color: var(--accent-hi); font-weight: 700; } .pp-cal-day.is-sel { background: var(--accent); color: var(--on-accent); font-weight: 700; } .pp-cal.is-sheet .pp-cal-day { width: 44px; height: 44px; font-size: 17px; } .pp-cal-foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .pp-cal-close { margin-left: auto; } /* ---------- drawer ---------- */ .pp-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s; } .pp-scrim.is-open { opacity: 1; pointer-events: auto; } /* Closed = off screen, fully transparent (after the slide finishes) and inert (set in JSX). Deliberately NOT visibility:hidden: WebKit kept the children hidden after opening. */ .pp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: 440px; max-width: 100%; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-2); transform: translateX(110%); opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity 0s linear .26s; } .pp-drawer.is-open { transform: none; opacity: 1; pointer-events: auto; box-shadow: var(--shadow-lg); transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity 0s; } .pp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 8px) 12px 8px 20px; border-bottom: 1px solid var(--line); } .pp-drawer-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .pp-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; -webkit-overflow-scrolling: touch; } .pp-drawer-title { font-size: 18px; font-weight: 600; min-height: 64px; } .pp-notes { min-height: 120px; } .pp-fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pp-due-row { display: flex; align-items: center; gap: 10px; } .pp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* the checklist in the drawer: tick, rename, delete, then one box to add the next */ .pp-lbl-ct { margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .pp-drsubs { display: flex; flex-direction: column; gap: 6px; } .pp-drsub { display: flex; align-items: center; gap: 4px; } .pp-subtick { flex: none; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; border-radius: var(--radius-sm); } .pp-subtick .pp-substep-box { width: 19px; height: 19px; border-radius: 6px; } .pp-drsub-title { flex: 1; min-width: 0; } .pp-drsub-title.is-done { color: var(--text-faint); text-decoration: line-through; } .pp-drsub-x { flex: none; color: var(--text-faint); } .pp-subadd { display: flex; align-items: center; gap: 4px; } .pp-subadd-ic { flex: none; width: var(--tap); display: inline-flex; justify-content: center; color: var(--text-faint); } .pp-subadd-in { flex: 1; min-width: 0; } .pp-subadd-go { flex: none; padding: 0 12px; font-size: 13.5px; } .pp-newclient { display: flex; flex-wrap: wrap; gap: 6px; } .pp-newclient .pp-input { flex: 1 1 100%; } .pp-newclient .pp-btn { flex: 1; } .pp-drawer-meta { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-faint); } .pp-drawer-foot { display: flex; gap: 10px; padding: 12px 20px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); } .pp-drawer-foot .pp-btn-primary { margin-left: auto; min-width: 120px; } .pp-seg-in_progress.is-on { background: var(--accent-hi); } /* ---------- login ---------- */ .pp-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 24px) 18px calc(var(--safe-bottom) + 24px); } .pp-login-card { width: 100%; max-width: 410px; padding: 30px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .pp-login-title { margin: 16px 0 6px; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.02em; } .pp-login-sub { margin: 0 0 20px; color: var(--text-dim); line-height: 1.45; } .pp-login-form { display: flex; flex-direction: column; } .pp-login-form .pp-lbl { margin-top: 12px; } .pp-passrow { display: flex; gap: 6px; } .pp-showpass { flex: none; min-width: 64px; } .pp-login-error { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--text); font-size: 14px; } .pp-login-go { margin-top: 18px; width: 100%; font-size: 15.5px; } .pp-login-go + .pp-login-go { margin-top: 8px; } /* ---------- pull to refresh (phone) ---------- */ .pp-ptr { position: fixed; left: 50%; top: calc(var(--safe-top) + 6px); z-index: 90; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--accent-line); color: var(--accent-hi); box-shadow: var(--shadow-sm); opacity: 0; transform: translate(-50%, -150%); pointer-events: none; } .pp-ptr.is-ready { border-color: var(--accent-hi); } .pp-ptr.is-spin svg { animation: pp-spin .7s linear infinite; } @keyframes pp-spin { to { transform: rotate(360deg); } } /* ---------- hover (mouse only, never sticky on touch) ---------- */ @media (hover: hover) and (pointer: fine) { .pp-btn:hover:not(:disabled) { border-color: var(--accent-line); } .pp-btn-primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); } .pp-view:hover:not(.is-on), .pp-chipbtn:hover { border-color: var(--accent-line); color: var(--text); } .pp-card:hover { border-color: var(--line-2); background: var(--surface-3); } .pp-card.is-late:hover { border-left-color: var(--red); } .pp-status:hover .pp-status-ring { border-color: var(--accent-hi); } .pp-menu-item:hover, .pp-iconbtn:hover { background: var(--surface-3); } .pp-seg-btn:hover:not(.is-on) { color: var(--text); } .pp-subsbtn:hover { color: var(--text); } .pp-substep:hover { background: var(--surface-3); color: var(--text); } .pp-substep:hover .pp-substep-box:not(.is-done) { border-color: var(--text-dim); } .pp-subtick:hover .pp-substep-box:not(.is-done) { border-color: var(--text-dim); } } /* ---------- phone ---------- */ @media (max-width: 760px) { .pp-top { padding: calc(var(--safe-top) + 6px) 12px 6px; gap: 8px; min-height: 56px; } .pp-tab { min-height: var(--tap); padding: 0 11px; font-size: 14.5px; } .pp-syncnote { font-size: 12px; } .pp-userchip-name { display: none; } .pp-userchip { padding: 0 5px; } .pp-demo { padding: 8px 14px; } .pp-main { padding: 16px 14px calc(40px + var(--safe-bottom)); } .pp-h1 { font-size: 27px; } .pp-sub { font-size: 14px; } .pp-views { margin: 0 -14px 12px; padding: 0 14px 2px; } /* A step reads as smaller through its type and the rail it hangs off, never through a tap target you have to aim at. The row stays a full 44 on a phone. */ .pp-substep { min-height: var(--tap); font-size: 13.5px; } /* Whose list, category and due date share one line (Shadi, Sep 21). Three controls across 375px is tight, so the arrow zone and the side padding come in and the labels are shortened rather than dropping the font under 16px, which is what stops iOS zooming the page the moment you tap a select. */ .pp-qadd { grid-template-columns: 1.09fr 1.09fr 0.82fr; gap: 7px; } .pp-qadd-title, .pp-qadd-go { grid-column: 1 / -1; } .pp-qadd .pp-select { padding-left: 9px; padding-right: 22px; background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%; } .pp-qadd .pp-select.pp-qadd-cat { padding-left: 6px; padding-right: 18px; background-position: calc(100% - 11px) 52%, calc(100% - 7px) 52%; } .pp-qadd-due { padding: 0 8px; gap: 4px; min-width: 0; } .pp-cols { grid-template-columns: 1fr; gap: 10px; } .pp-sec { padding: 8px; } .pp-sec-head { position: sticky; top: calc(var(--safe-top) + 56px); z-index: 5; background: var(--surface); border-radius: 8px; } .pp-cols .pp-sec-list, .pp-side .pp-sec-list { min-height: 0; } .pp-take { min-height: var(--tap); } .pp-side.is-compact .pp-side-row { gap: 8px; margin-bottom: 8px; } .pp-side.is-compact .pp-sec { padding: 6px; } .pp-side.is-compact .pp-sec-head { position: static; padding: 2px 2px 6px; min-height: 26px; flex-wrap: wrap; row-gap: 0; } .pp-side.is-compact .pp-sec-toggle { min-height: var(--tap); } .pp-side.is-compact .pp-sec-label { font-size: 11.5px; letter-spacing: .03em; } .pp-side.is-compact .pp-sec-ct { font-size: 11.5px; } .pp-side.is-compact .pp-sec-list { gap: 6px; } .pp-side.is-compact .pp-empty { padding: 10px 4px; font-size: 12px; } .pp-side.is-compact .pp-side-person { flex-wrap: wrap; gap: 2px 8px; } .pp-side.is-compact .pp-side-name { font-size: 19px; } .pp-side.is-compact .pp-addfor { margin-left: 0; width: 100%; } .pp-drawer { width: 100%; top: auto; height: 100dvh; border-left: 0; transform: translateY(104%); } .pp-drawer-body { padding: 16px; } .pp-drawer-foot { padding: 10px 16px calc(10px + var(--safe-bottom)); } .pp-fld-2 { grid-template-columns: 1fr; } .pp-flash { bottom: calc(16px + var(--safe-bottom)); } .pp-clients { display: block; } .pp-cprofile { padding: 0; border: 0; background: transparent; gap: 20px; } .pp-cgrid, .pp-contacts { grid-template-columns: 1fr; } .pp-cname { font-size: 21px; } .pp-ctools { flex-wrap: wrap; } .pp-csearch { flex: 1 1 100%; } .pp-cadd { flex: 1; } .pp-ctask-add { flex-wrap: wrap; } .pp-ctask-title { flex: 1 1 100%; } .pp-ctask-go { flex: 1; } } /* ===================================================================== DEPTH + MOTION (direction preview layer) One elevated surface, lit from above. Panels recede, cards advance. ===================================================================== */ html, body { background: var(--bg); } /* page + panels recede */ .pp-main { padding-top: 26px; overflow-x: clip; } .pp-h1 { font-size: 34px; letter-spacing: -.025em; } .pp-sub { font-size: 14px; color: var(--text-dim); } .pp-sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 10px; } .pp-sec-head { min-height: 38px; padding: 2px 6px 10px; } .pp-sec-head.pp-sec-toggle { min-height: var(--tap); } .pp-sec-label { font-size: 11.5px; letter-spacing: .07em; color: var(--text-dim); } .pp-sec-ct { margin-left: auto; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .pp-sec-chev { margin-left: 0; } .pp-sec-list { gap: 8px; } /* the one elevated surface */ .pp-card { background: var(--surface-2); border: 1px solid var(--card-line); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-card); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .16s var(--ease), border-color .16s var(--ease), opacity .2s var(--ease); } .pp-card-title { font-size: 15.5px; font-weight: 550; line-height: 1.34; letter-spacing: -.005em; } .pp-card-meta { margin-top: 7px; font-size: 12px; } .pp-card.is-late { border-left: 3px solid var(--red); } .pp-st-done { box-shadow: none; background: var(--panel); border-color: var(--line); opacity: .72; } /* chips sit on the card, so they step up again */ .pp-tag, .pp-due-soon, .pp-due-far, .pp-view-ct { background: var(--surface-3); } .pp-due { padding: 3px 9px 3px 7px; } .pp-tag { padding: 3px 9px; } /* controls: a lit top edge reads as a real key */ .pp-btn, .pp-input, .pp-select, .pp-duebtn, .pp-chipbtn, .pp-view, .pp-userchip, .pp-crow { box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-ctl); transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); } .pp-btn-ghost { box-shadow: none; } .pp-btn-primary { box-shadow: inset 0 1px 0 var(--edge-hi-strong), var(--shadow-key); } .pp-view.is-on { box-shadow: inset 0 1px 0 var(--edge-hi-strong), var(--shadow-key); } .pp-seg { box-shadow: inset 0 1px 2px var(--inset-dark); } .pp-seg-btn.is-on { box-shadow: inset 0 1px 0 var(--edge-hi-strong), var(--shadow-ctl); } /* floating layers get real depth, not a flat rectangle */ .pp-drawer, .pp-menu, .pp-cal { box-shadow: var(--shadow-lg); } .pp-drawer { border-left: 1px solid var(--line-2); } .pp-drawer-head, .pp-drawer-foot { background: var(--panel); } /* ---------- motion ---------- */ @media (prefers-reduced-motion: no-preference) { .pp-card:active { transform: scale(.988); box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-ctl); } .pp-btn:active:not(:disabled), .pp-view:active, .pp-chipbtn:active, .pp-seg-btn:active, .pp-userchip:active, .pp-crow:active { transform: scale(.97); } .pp-status:active .pp-status-ring { transform: scale(.88); } .pp-substep:active .pp-substep-box, .pp-subtick:active .pp-substep-box { transform: scale(.86); } .pp-status-ring { transition: border-color .2s var(--ease), background .2s var(--ease), transform .3s var(--spring); } .pp-page { animation: pp-fadein .28s var(--ease) both; } /* Switching view moves sideways, the same way the row of chips runs. The columns carry the motion, not fifteen separate cards. */ .pp-viewbody .pp-sec, .pp-viewbody .pp-side-row > * { animation: pp-in-fwd .42s var(--ease) both; } .pp-viewbody.is-back .pp-sec, .pp-viewbody.is-back .pp-side-row > * { animation-name: pp-in-back; } .pp-viewbody .pp-cols .pp-sec:nth-child(2) { animation-delay: .05s; } .pp-viewbody .pp-cols .pp-sec:nth-child(3) { animation-delay: .1s; } .pp-viewbody .pp-side-row:nth-child(2) > * { animation-delay: .05s; } .pp-viewbody .pp-side-row:nth-child(3) > * { animation-delay: .09s; } .pp-viewbody .pp-side-row:nth-child(4) > * { animation-delay: .13s; } .pp-viewbody .pp-side-row > *:nth-child(2) { animation-delay: .04s; } } @keyframes pp-in-fwd { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes pp-in-back { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { .pp-card:hover { background: var(--surface-2-hi); border-color: var(--line-2); box-shadow: inset 0 1px 0 var(--edge-hi-strong), var(--shadow-card-hi); transform: translateY(-1px); } .pp-btn:hover:not(:disabled), .pp-view:hover:not(.is-on) { box-shadow: inset 0 1px 0 var(--edge-hi-strong), var(--shadow-card); } } @media (max-width: 760px) { .pp-h1 { font-size: 29px; } .pp-sec { padding: 6px 6px 8px; } .pp-sec-head { background: var(--panel); } } /* ---------- ticking a task off ---------- */ .pp-status-ring .pp-ic path, .pp-substep-box .pp-ic path { stroke-dasharray: 24; stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .pp-card.is-justdone .pp-status-ring { animation: pp-ring-pop .5s var(--spring) both; } .pp-substep-box.is-done .pp-ic path { animation: pp-draw .26s var(--ease) both; } .pp-card.is-justdone .pp-status-ring .pp-ic path { animation: pp-draw .32s var(--ease) .06s both; } .pp-card.is-justdone { animation: pp-settle .5s var(--ease) both; } } @keyframes pp-ring-pop { 0% { transform: scale(.55); } 58% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes pp-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } @keyframes pp-settle { 0% { opacity: .35; } 100% { opacity: 1; } } /* C - NIGHT GLASS ------------------------------------------------------ */ /* functional layer: the only glass in the app */ .pp-top { background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border-bottom: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge); } .pp-demo { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--glass-line); } /* scroll edge effect: content fades where it meets the bar */ .pp-main::before { content: ""; position: fixed; left: 0; right: 0; height: 22px; z-index: 20; pointer-events: none; top: calc(var(--safe-top) + 60px); background: linear-gradient(var(--fade-top), var(--fade-none)); } .pp-drawer, .pp-menu, .pp-cal { background: var(--glass); -webkit-backdrop-filter: blur(34px) saturate(1.6); backdrop-filter: blur(34px) saturate(1.6); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); } .pp-drawer-head, .pp-drawer-foot { background: transparent; } /* content layer stays opaque: glass never touches a card */ .pp-card { -webkit-backdrop-filter: none; backdrop-filter: none; } /* green is reserved for done */ .pp-st-done .pp-status-ring { border-color: var(--done); background: var(--done); color: var(--done-ink); } .pp-sec-done .pp-sec-mark { border-color: var(--done); background: var(--done); } .pp-due-now { color: var(--accent-hi); background: var(--accent-soft); } /* reduce transparency and reduce motion both get an opaque fallback */ @media (prefers-reduced-transparency: reduce) { .pp-top, .pp-demo, .pp-drawer, .pp-menu, .pp-cal { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; } .pp-main::before { display: none; } } /* C reserves colour for four meanings only: act (gold), done (green), late (orange or red on an edge), personal (violet). People and due dates are told in words and weight, not hue. */ .pp-owner-u0, .pp-owner-u1 { color: var(--text); background: var(--surface-3); font-weight: 650; } .pp-owner-pool { color: var(--text-faint); background: transparent; } .pp-owner-both { color: var(--text); background: var(--surface-3); font-weight: 750; box-shadow: inset 0 0 0 1px var(--line-2); } .pp-due-now { color: var(--text); background: var(--surface-3); font-weight: 700; } .pp-due-soon, .pp-due-far { color: var(--text-dim); background: var(--surface-3); font-weight: 600; } .pp-newdot { background: var(--accent-hi); } /* ---------- personal tasks: violet (yellow until Nov 6 2026, too close to the gold) ---------- */ /* A personal task carries a violet edge and a violet chip. Late still wins the edge, because a deadline is the more urgent of the two, and the chip still says the rest. It only means this is his own life rather than the business. */ .pp-card.is-personal { border-left: 3px solid var(--personal); } .pp-card.is-personal.is-late { border-left-color: var(--red); } .pp-personal-tag { color: var(--personal); background: var(--personal-soft); font-weight: 650; } .pp-both-tag { color: var(--both); background: var(--both-soft); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; } /* Personal work in progress rings yellow, not red: the ring tells you whose work it is at the same moment it tells you the task is running (Shadi, Sep 21). Done still rings green, because done is done whoever it belongs to. */ .pp-card.is-personal.pp-st-in_progress .pp-status-ring { border-color: var(--personal); background: linear-gradient(90deg, var(--personal) 50%, transparent 50%); } /* Personal reads yellow wherever it is picked, including inside a