/* ============================================================ Proga Portal — application stylesheet ------------------------------------------------------------ Token-driven rebuild of the Proga Portal design. A lean set of design tokens lives in :root so the whole portal can be restyled from one place; every component below references those tokens. Adjust a token to restyle globally; adjust a class to restyle one element type. ============================================================ */ /* ---- Font ------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); /* ---- Design tokens (minimal set) -------------------------- */ :root { /* ============================================================ Proga Design System tokens Source: Brand files/Design System/tokens/*.css Brand is ONE flat blue (#0f8bb1, sampled from the logo). The old teal/blue split is retired; the --teal- and --blue- names survive below as deprecated aliases so existing rules keep resolving. Portal-local deviations from the DS are marked [portal]. ============================================================ */ /* ---- Brand: Proga Blue (H194) ---- */ --brand-900:#043c4e; --brand-800:#07566e; --brand-700:#0b708e; --brand-600:#0f8bb1; /* core */ --brand-500:#16a0ca; --brand-400:#2ab5df; --brand-300:#6acae7; --brand-200:#a6e0f2; --brand-100:#d2f0f9; --brand-50:#edf9fd; /* ---- Complement: Coral (H14). Emphasis, "needs attention", chart contrast. Keep to ~10% of any composition. ---- */ --coral-700:#af3f1d; --coral-600:#d54a20; --coral-500:#e66037; --coral-300:#f1997e; --coral-100:#fcded5; --coral-50:#fdf0ec; /* ---- Support: Gold (H38) — lift / positive momentum ---- */ --gold-600:#d48d11; --gold-500:#f0a119; --gold-100:#fceccf; /* ---- Support: Indigo (H224) — cool depth for data viz ---- */ --indigo-700:#264087; --indigo-600:#2f52b1; --indigo-500:#3b62ce; --indigo-100:#dce4f9; /* ---- Neutrals (blue-tinted ink, H196) ---- */ --ink-900:#182125; --ink-800:#2b373b; --ink-700:#425157; --ink-600:#5a6c72; --ink-500:#788a91; --ink-400:#a0acb1; --ink-300:#c0cace; --ink-200:#dce2e5; --ink-100:#f0f3f4; --ink-50:#f9fafb; --white:#ffffff; /* ---- Status ---- */ --success-800:#0f5c34; --success-700:#197f46; --success-600:#1f9d57; --success-200:#bfe4cd; --success-100:#e0f3e8; /* readable text + hairline border on the gold-100 ground */ --gold-800:#6f4d10; /* [portal] 50-steps the DS ramp stops short of. Needed so every nav section's active ground sits at the same lightness as --brand-50 / --coral-50. */ --indigo-50:#eef2fc; --gold-50:#fdf6e6; /* Sequence numbers — step 1/2/3, phases, ordered assets. Indigo keeps them distinct from the coral sidebar and the blue page titles, so a number always reads as "this is an order", never as a link or a status. */ --seq-tint:var(--indigo-100); --seq-ink:var(--indigo-700); /* --gold-650: the icon-stroke step. --gold-600 is only 2.8:1 on white (under the 3:1 non-text minimum) and --gold-700 has gone brown. This holds the amber and clears 3:1 at 3.34. */ --gold-650:#c07f10; --gold-700:#8a5c11; --gold-200:#fadeae; --warning-800:var(--gold-800); --warning-700:var(--gold-700); --warning-600:#d48d11; --warning-200:var(--gold-200); --warning-100:#fceccf; --danger-600:#d54a20; --danger-100:#fcded5; --info-600:#0f8bb1; --info-100:#d2f0f9; /* ---- Dark grounds: blue-black, never flat black ---- */ --abyss-900:#050e12; --abyss-800:#08161c; --abyss-700:#0b1f28; --abyss-600:#102a35; --abyss-500:#163846; --marine-900:#0a2836; --marine-800:#0e3446; --marine-700:#124257; --marine-600:#165169; --marine-500:#1b627d; /* ---- Light grounds: warm paper ---- */ --paper-50:#fdfcf9; --paper-100:#faf7f1; --paper-200:#f3eee4; /* ---- Gradients ---- */ --gradient-brand:linear-gradient(135deg,var(--brand-600) 0%,var(--brand-400) 100%); --gradient-deep:linear-gradient(135deg,var(--brand-800) 0%,var(--brand-600) 100%); /* 1 · deepest — maximum-contrast statements */ --gradient-dark:linear-gradient(145deg,var(--abyss-900) 0%,var(--abyss-700) 55%,var(--abyss-500) 100%); /* 2 · spotlight — the DEFAULT dark band (brand glow from top-right) */ --gradient-dark-spotlight: radial-gradient(120% 100% at 88% -10%, rgba(42,181,223,.30) 0%, rgba(42,181,223,.08) 45%, rgba(42,181,223,0) 72%), linear-gradient(145deg,var(--marine-900) 0%,var(--marine-700) 100%); /* 3 · brand-forward — bands that should feel brand-owned */ --gradient-dark-brand:linear-gradient(145deg,var(--marine-800) 0%,var(--marine-600) 55%,var(--brand-800) 100%); /* 4 · vertical — tall panels and sidebars */ --gradient-dark-vertical:linear-gradient(180deg,var(--marine-700) 0%,var(--marine-900) 100%); /* panel — near-invisible lift for cards sitting ON a dark surface */ --gradient-dark-panel:linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 100%); --gradient-light-warm:linear-gradient(160deg,var(--paper-50) 0%,var(--paper-100) 55%,var(--paper-200) 100%); --gradient-light-warm-glow: radial-gradient(110% 90% at 90% -10%, rgba(15,139,177,.10) 0%, rgba(15,139,177,0) 62%), linear-gradient(160deg,var(--paper-50) 0%,var(--paper-200) 100%); /* ---- Semantic aliases ---- */ --brand:var(--brand-600); --brand-strong:var(--brand-700); --brand-soft:var(--brand-100); --accent:var(--brand-400); --accent-contrast:var(--coral-500); --text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-muted:var(--ink-500); --text-tertiary:var(--ink-500); --text-on-brand:var(--white); --text-link:var(--brand-600); --ink:var(--ink-900); --surface-page:var(--ink-50); --surface-card:var(--white); --surface-sunken:var(--ink-100); --surface-2:var(--ink-100); --surface-raised:var(--white); --surface-brand:var(--brand-600); --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400); --border-focus:var(--brand-500); --border:var(--ink-200); /* status shorthands used by chat/budget widgets */ --danger:var(--danger-600); --danger-soft:var(--coral-50); --danger-border:#f5bfaf; --danger-text:var(--coral-700); --warn:var(--warning-600); /* ---- Type. Family/weights/tracking are DS; the SCALE is [portal] — deliberately one step larger than the DS site scale because app chrome reads better at 17px base. Don't "fix" this to match the DS without re-checking every dense screen. ---- */ --font-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-display:"Poppins",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1.0625rem; --text-md:1.1875rem; --text-lg:1.5rem; --text-xl:1.875rem; --text-2xl:2.375rem; --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tight:-.02em; --tracking-snug:-.01em; --tracking-normal:0; --tracking-wide:.04em; /* ---- Space + shape (DS) ---- */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(15,27,29,.06),0 1px 3px rgba(15,27,29,.08); --shadow-md:0 4px 12px rgba(15,27,29,.08),0 2px 4px rgba(15,27,29,.06); --shadow-lg:0 12px 32px rgba(15,27,29,.12),0 4px 8px rgba(15,27,29,.06); --shadow-brand:0 8px 24px rgba(15,139,177,.25); /* ---- Layout [portal] ---- */ --portal-sidebar-w:248px; --portal-topbar-h:68px; /* ---- Deprecated aliases: the retired teal/blue split. Every one now resolves to the brand ramp. Do not use in new rules. ---- */ --teal-900:var(--brand-900); --teal-800:var(--brand-800); --teal-700:var(--brand-700); --teal-600:var(--brand-600); --teal-500:var(--brand-500); --teal-400:var(--brand-400); --teal-300:var(--brand-300); --teal-200:var(--brand-200); --teal-100:var(--brand-100); --teal-50:var(--brand-50); --blue-700:var(--brand-700); --blue-600:var(--brand-600); --blue-500:var(--brand-500); --blue-400:var(--brand-400); --blue-300:var(--brand-300); --blue-200:var(--brand-200); --blue-100:var(--brand-100); --teal-7001:rgba(11,112,142,.7); /* was rgba(11,112,142,.7) */ --teal-5001:rgba(22,160,202,.8); /* was rgba(22,160,202,.8) */ --gradient-teal:var(--gradient-deep); --gradient-teal-light:linear-gradient(135deg,var(--teal-7001) 0%,var(--teal-5001) 100%); } /* ---- Base ------------------------------------------------- */ *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0;background:var(--surface-page);color:var(--text-primary); font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;font-weight:var(--fw-semibold);letter-spacing:var(--tracking-snug);} a{color:inherit;} button{font-family:inherit;} .muted{color:var(--text-muted);} /* ============================================================ LOGIN ============================================================ */ .login-wrap{max-width:400px;margin:11vh auto 0;padding:0 24px;} .login-card{ background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:36px 32px;box-shadow:var(--shadow-md); } .login-logo{height:30px;margin-bottom:20px;} .login-card h1{font-size:var(--text-xl);margin-bottom:4px;} .login-card p.sub{margin:0 0 24px;color:var(--text-muted);font-size:var(--text-sm);} .field{margin-bottom:16px;} .field label{ display:block;font-size:var(--text-xs);color:var(--text-muted); margin-bottom:6px;text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--fw-medium); } .field input{ width:100%;padding:11px 13px;border:1px solid var(--border-default); border-radius:var(--radius-md);font-size:var(--text-base);background:var(--white); } .field input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} .login-error{color:var(--danger-600);font-size:var(--text-sm);min-height:18px;margin-top:10px;} /* Forgot-password flow (H1, 2026-07-28) */ .login-btn-full{width:100%;} .login-link{display:block;width:100%;margin-top:14px;background:none;border:none;padding:0; color:var(--brand);font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;text-align:center;} .login-link:hover{text-decoration:underline;} .login-hint{color:var(--text-muted);font-size:var(--text-xs);margin:-6px 0 14px;} .login-note{color:var(--success-700);font-size:var(--text-sm);min-height:18px;margin-top:10px;} /* Two-step verification enrollment (Account screen) */ .mfa-toggle-row{padding:4px 2px;} .mfa-enroll{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);max-width:440px;} .mfa-step{font-size:14px;color:var(--ink-700);margin:0 0 8px;} .mfa-secret{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px; letter-spacing:1px;background:var(--ink-100);border:1px solid var(--border); border-radius:8px;padding:8px 12px;margin:0 0 14px;word-break:break-all;user-select:all;} .mfa-code-field{max-width:180px;margin-bottom:12px;} .mfa-enroll-actions{display:flex;gap:10px;flex-wrap:wrap;} /* ============================================================ APP SHELL ============================================================ */ .portal{display:flex;min-height:100vh;} /* ---- Sidebar --------------------------------------------- */ .sidebar{ width:var(--portal-sidebar-w);flex:0 0 var(--portal-sidebar-w); background:var(--white);border-right:1px solid var(--border-subtle); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 22px 14px;} /* Reads as a control, not a stray glyph: a real bordered button carrying the conventional panel-collapse icon — the panel with its side rail drawn, and a chevron saying which way it goes. A bare chevron on no background was being read as decoration. */ .nav-collapse{ margin-left:auto;flex:0 0 auto;width:30px;height:30px;padding:0;display:inline-flex; align-items:center;justify-content:center;border:1px solid var(--border-subtle); border-radius:var(--radius-sm);background:var(--white);color:var(--text-muted); cursor:pointer;transition:.12s; } .nav-collapse:hover{background:var(--ink-50);color:var(--brand-strong);border-color:var(--border-default);} .nav-collapse:focus-visible{outline:2px solid var(--border-focus);outline-offset:1px;} .nav-collapse .nc-open{display:none;} /* The mark, shown only in rail mode (see the rail block). */ .sidebar-mark{display:none;height:21px;width:auto;} .sidebar-logo{height:24px;width:auto;display:block;} .brand-name{font-weight:var(--fw-extrabold);font-size:var(--text-md);letter-spacing:var(--tracking-tight);} .mode-switch{ display:flex;gap:4px;margin:0 18px 14px;padding:4px; background:var(--surface-sunken);border-radius:var(--radius-pill); } .mode-switch button{ flex:1;border:none;background:transparent;color:var(--text-muted); padding:7px 0;border-radius:var(--radius-pill);font-size:var(--text-xs); font-weight:var(--fw-semibold);cursor:pointer;transition:.15s; } .mode-switch button.active{background:var(--white);color:var(--brand-strong);box-shadow:var(--shadow-sm);} .nav-group{padding:8px 12px 2px;} .nav-label{ font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide); color:var(--text-muted);font-weight:var(--fw-semibold);padding:6px 10px 4px; } .nav-item{ display:flex;align-items:center;gap:11px;width:100%; border:none;background:transparent;cursor:pointer;text-align:left; padding:9px 10px;border-radius:var(--radius-md);color:var(--text-secondary); font-size:var(--text-sm);font-weight:var(--fw-medium);transition:.12s;margin-bottom:1px; } .nav-item:hover{background:var(--ink-50);color:var(--text-primary);} .nav-item.active{ background:var(--nav-tint,var(--brand-soft)); /* The active LABEL is text, so it needs 4.5:1 — one step darker than the icon, which is a non-text graphic and only owes 3:1. Same split the stage system makes between --stg-rail and --stg-ink. */ color:var(--nav-text,var(--brand-strong)); font-weight:var(--fw-semibold); } .nav-icon{ width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center; flex:0 0 18px; /* The ICON carries the section colour; the label stays ink. That is what keeps nine coloured items from reading as a toybox. */ color:var(--nav-ink,var(--text-secondary)); } .nav-item.active .nav-icon{color:var(--nav-ink,var(--brand-strong));} /* ============================================================ NAV ACCENT — one colour (2026-09-03) ------------------------------------------------------------ Every nav icon is coral. Three zones, each with one job: sidebar coral #d54a20 nav icons content blue #0b708e page titles, links sequence numbers indigo #264087 step 1/2/3, phases, ordered assets That reads as a system rather than decoration — a number never looks like a link, a nav icon never looks like a heading. The icon is a non-text graphic and owes 3:1; --coral-600 is 4.9:1 on white. The active row's LABEL is text and owes 4.5:1, so it deepens to --coral-700 (5.3:1 on the --coral-50 ground) while the icon stays coral. HISTORY — do not retry one-hue-per-item. It was built and measured: --brand-800 vs --indigo-600 lands at ΔE 11.8 for normal vision (floor 15), i.e. indistinguishable, and --brand-400 fails contrast outright. The DS has four usable hues; anything needing more must group, facet, or drop colour. ============================================================ */ .nav-item{ --nav-ink:var(--coral-600); --nav-text:var(--coral-700); --nav-tint:var(--coral-50); } .nav-chevron{margin-left:auto;width:14px;opacity:.4;} .ask-proga{ margin:10px 16px;display:flex;align-items:center;justify-content:center;gap:8px; border:none;cursor:pointer;padding:11px;border-radius:var(--radius-md); background:var(--gradient-brand);color:var(--text-on-brand); font-weight:var(--fw-semibold);font-size:var(--text-sm);box-shadow:var(--shadow-brand); } .ask-proga:hover{filter:brightness(1.04);} .sidebar-account{ margin-top:auto;display:flex;align-items:center;gap:11px; padding:16px 20px;border-top:1px solid var(--border-subtle); } .avatar{ width:34px;height:34px;border-radius:var(--radius-pill);flex:0 0 34px; background:var(--gradient-teal);color:var(--white); display:inline-flex;align-items:center;justify-content:center; font-size:var(--text-xs);font-weight:var(--fw-bold); } .acct-name{font-size:var(--text-sm);font-weight:var(--fw-semibold);} .acct-plan{font-size:var(--text-xs);color:var(--text-muted);} /* ---- Main + topbar --------------------------------------- */ .main{flex:1;min-width:0;display:flex;flex-direction:column;} .topbar{ height:var(--portal-topbar-h);flex:0 0 var(--portal-topbar-h); display:flex;align-items:center;justify-content:space-between; padding:0 28px;border-bottom:1px solid var(--border-subtle); background:rgba(255,255,255,.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5; } .topbar-title{display:flex;align-items:center;gap:6px;font-weight:var(--fw-semibold);font-size:var(--text-md);} .crumb{color:var(--text-muted);font-weight:var(--fw-regular);} .topbar-actions{display:flex;align-items:center;gap:12px;} .icon-btn{ width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border-subtle); background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; color:var(--text-secondary); } .icon-btn:hover{background:var(--ink-50);} /* ===== Rail mode — the sidebar collapsed to icons (2026-09-03) ============= One class on drives it; the width is the same custom property the layout already reads, so nothing else needs to know. Everything that carries words either hides or becomes its icon — a half-collapsed sidebar with a clipped label is worse than either state. The hover label is built from the item's own text (JS copies it into aria-label + title on collapse), so there is no second copy to drift. ====== */ body.nav-rail{--portal-sidebar-w:66px;} /* Stacked, not side by side: 66px can hold the mark OR a 30px button on a row, not both without crowding. The mark keeps the brand present; the button sits under it. */ body.nav-rail .sidebar-brand{flex-direction:column;gap:11px;padding:18px 0 14px;justify-content:center;} body.nav-rail .sidebar-logo{display:none;} body.nav-rail .sidebar-mark{display:block;} body.nav-rail .nav-collapse{margin-left:0;} body.nav-rail .nav-collapse .nc-close{display:none;} body.nav-rail .nav-collapse .nc-open{display:inline-flex;} body.nav-rail .mode-switch{display:none;} body.nav-rail .nav-group{padding:8px 9px 2px;} body.nav-rail .nav-label{display:none;} body.nav-rail .nav-setup{margin-top:8px;padding-top:8px;} body.nav-rail .nav-item{justify-content:center;padding:11px 0;gap:0;} body.nav-rail .nav-txt{display:none;} body.nav-rail .ask-proga{margin:10px 9px;padding:11px 0;font-size:0;gap:0;} body.nav-rail .sidebar-account{justify-content:center;padding:16px 0;} body.nav-rail .sidebar-account > div{display:none;} /* The nav is the only thing that collapses — the page keeps its own width. */ body.nav-rail .scroll{padding-left:28px;} /* Mobile menu button — hidden on desktop, shown on small screens (see responsive block). */ .nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;margin-right:6px; border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--white); color:var(--text-secondary);cursor:pointer;flex:0 0 auto;} .nav-toggle:hover{background:var(--ink-50);} /* Scrim behind the slide-out sidebar on mobile. */ .nav-scrim{display:none;position:fixed;inset:0;background:rgba(15,27,29,.4);z-index:29;opacity:0; transition:opacity .2s;pointer-events:none;} .scroll{flex:1;overflow-y:auto;padding:28px 32px 64px;} .scroll.flush{padding:0;} .screen{max-width:1080px;margin:0 auto;display:none;} .screen.screen-full{max-width:none;margin:0;} .screen.active{display:block;} .page-head{margin-bottom:22px;} /* Page titles carry the brand blue. At --text-xl/800 this is large text, so --brand-700 clears AA comfortably and gives the screen a colour anchor instead of another block of near-black. */ .page-head h1{font-size:var(--text-xl);font-weight:800;color:var(--brand-700);} .page-head p{margin:4px 0 0;color:var(--text-muted);} .eyebrow{ font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide); color:var(--brand);font-weight:var(--fw-semibold);margin:0 0 10px; } .section{margin-bottom:26px;} .section-rule{border:none;border-top:1px solid var(--border-subtle);margin:26px 0;} .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .head-left{display:flex;align-items:center;gap:9px;} .head-icon{ width:32px;height:32px;border-radius:var(--radius-md);background:var(--brand-soft);color:var(--brand-strong); display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px; } .section-head h2,.section-head h3{font-size:var(--text-md);font-weight:var(--fw-bold);letter-spacing:var(--tracking-snug);} .link{color:var(--text-link);font-weight:var(--fw-medium);font-size:var(--text-sm);text-decoration:none;cursor:pointer;} .link:hover{text-decoration:underline;} /* ============================================================ PRIMITIVES ============================================================ */ .card{ background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);box-shadow:var(--shadow-sm); } .card.pad{padding:20px;} .card.accent{border-color:var(--brand);box-shadow:var(--shadow-brand);} .card.sunken{background:var(--surface-sunken);box-shadow:none;} .card.interactive,.list-row.interactive{cursor:pointer;transition:.14s;} .card.interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);} .grid{display:grid;gap:18px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-ov{grid-template-columns:1.5fr 1fr;} .grid-stat{grid-template-columns:repeat(4,1fr);} .stack{display:flex;flex-direction:column;gap:18px;} .row{display:flex;align-items:center;gap:12px;} .span-2{grid-column:span 2;} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer; font-weight:var(--fw-semibold);font-size:var(--text-sm);padding:9px 15px;transition:.14s; } .btn-sm{padding:6px 12px;font-size:var(--text-xs);} .btn-md{padding:10px 18px;} .btn-primary{background:var(--brand);color:var(--white);} .btn-primary:hover{background:var(--brand-strong);} .btn-gradient{background:var(--gradient-brand);color:var(--white);box-shadow:var(--shadow-brand);} .btn-gradient:hover{filter:brightness(1.05);} .btn-secondary{background:var(--white);color:var(--text-primary);border-color:var(--border-default);} .btn-secondary:hover{background:var(--ink-50);} .btn-ghost{background:transparent;color:var(--text-secondary);} .btn-ghost:hover{background:var(--ink-50);} .btn-danger{background:transparent;color:var(--danger-600);border-color:var(--danger-100);} .btn-danger:hover{background:var(--danger-100);} .link-danger{color:var(--danger-600);} .row-select{font:inherit;font-size:var(--text-sm);padding:5px 26px 5px 9px;border:1px solid var(--border-default);border-radius:8px;background:var(--white);color:var(--text-primary);max-width:190px;cursor:pointer;} .row-select:focus{outline:none;border-color:var(--teal-600);} /* ---- Row actions menu (kebab popover) ---------------------------------- Collapses per-row actions (user / submission / account tables) into a single "⋯" button + popover, so action columns stay uncluttered as options grow. */ .row-menu{position:relative;display:inline-flex;} .row-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border-default);border-radius:8px;background:var(--white);color:var(--text-secondary);cursor:pointer;} .row-menu-btn:hover{background:var(--ink-50);color:var(--text-primary);} .row-menu-btn[aria-expanded="true"]{background:var(--ink-50);color:var(--text-primary);border-color:var(--border-focus);} /* Fixed positioning (JS sets top/left) so the menu escapes the table's overflow:hidden clip. */ .row-menu-list{position:fixed;z-index:60;min-width:200px;padding:var(--space-1);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1px;} .row-menu-list[hidden]{display:none;} .row-menu-list button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;} .row-menu-list button:hover{background:var(--ink-50);} .row-menu-list .row-menu-danger{color:var(--danger-600);} .row-menu-list .row-menu-danger:hover{background:var(--danger-100);} .row-menu-list .row-menu-sep{height:1px;margin:var(--space-1) 4px;background:var(--border-subtle);} .setpw-check{display:flex;align-items:center;gap:8px;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;} .setpw-check input{width:auto;margin:0;} /* badges */ .badge{ display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs); font-weight:var(--fw-semibold);padding:3px 9px;border-radius:var(--radius-pill);line-height:1.4; } .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .badge-brand{background:var(--brand-soft);color:var(--brand-strong);} .badge-neutral{background:var(--ink-100);color:var(--ink-700);} .badge-success{background:var(--success-100);color:var(--success-600);} .badge-warning{background:var(--warning-100);color:var(--warning-600);} .badge-danger{background:var(--danger-100);color:var(--danger-600);} .badge-info{background:var(--info-100);color:var(--info-600);} /* on/off switch (account AI access) */ .switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;width:46px;height:26px;border-radius:999px;background:var(--ink-200);border:none;cursor:pointer;padding:0;transition:background .16s;} .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-sm);transition:transform .16s;} .switch.on{background:var(--success-600);} .switch.on::after{transform:translateX(20px);} .switch:disabled{opacity:.55;cursor:default;} .switch-row{display:flex;align-items:center;gap:14px;} /* Admin account switch rows — replaces the per-row inline padding/margin. */ .pg-switch-row{padding:4px 2px;margin-top:8px;} .switch-row .switch-meta{min-width:0;} .switch-row .switch-meta strong{display:block;font-size:15px;color:var(--ink-900);} .switch-row .switch-meta span{display:block;font-size:13.5px;color:var(--ink-500);margin-top:2px;} /* ============================================================ STAT TILES ============================================================ */ .stat-tile{padding:18px 20px;display:flex;flex-direction:column;gap:10px;} .stat-top{display:flex;align-items:center;justify-content:space-between;} .stat-chip{ width:32px;height:32px;border-radius:var(--radius-sm);background:var(--brand-soft); color:var(--brand-strong);display:inline-flex;align-items:center;justify-content:center; } .stat-delta{font-size:var(--text-xs);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:3px;} .stat-delta.up{color:var(--success-600);} .stat-delta.down{color:var(--danger-600);} .stat-val{font-size:var(--text-2xl);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);line-height:1;} .stat-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);} /* ============================================================ LIST ROWS (priority items, briefs, etc.) ============================================================ */ .list-row{display:flex;align-items:flex-start;gap:13px;padding:14px 18px;border-bottom:1px solid var(--border-subtle);} .list-row:last-child{border-bottom:none;} .list-row.interactive:hover{background:var(--ink-50);} /* Featured rows (2026-07-20): was a full teal background fill, which read as one solid block once 2-3 featured rows stacked — especially with several near-duplicate briefs in it. Switched to the same subtle accent the Assets grid already uses for its featured cards (a colored edge, not a color fill) so the divider line between rows stays the thing doing the separating, matching every other list in the portal. The "Featured" tag still carries the actual meaning. */ .list-row.is-featured{background:transparent;border-left:3px solid var(--brand);padding-left:15px;} /* Slightly roomier than the shared .list-row default (2026-07-20) — brief rows carry more (stage label, tags, asset chips, Pin/Completed/Delete) and felt cramped at 14px/18px. Scoped to non-slim rows only; the compact "earlier reports" tier keeps its own padding. */ .list-row.wb-row{padding:18px 22px;} /* Done brief (Project 6): dim the title so a done row visually recedes without disappearing — it's still evidence of work completed, just no longer the thing to act on. */ .list-row.is-done .lb-title{color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--border-subtle);} /* Completed sits with Pin/Delete at the row's right edge (2026-07-20) — margin-left:auto so it clusters there even when Pin isn't rendered (a non-admin customer never sees Pin/Delete, but should still see Completed pushed right rather than stranded alone on the left). */ .brief-done-ctrl{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);cursor:pointer;user-select:none;margin-left:auto;} .brief-done-ctrl input{cursor:pointer;} /* Best-of / long-tail split (Work briefs, Assets — Project 1/4). Plain section divider, not a full heading: keeps the "featured vs everything else" grouping legible without adding another layer of chrome. */ .section-label{font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:14px 18px 4px;} .pin-ctrl{margin-left:auto;color:var(--text-muted);} .pin-ctrl:hover{color:var(--brand-strong);} /* PORTAL-WIDE SOURCE STANDARD (2026-08-15) ------------------------------------ Citations used to render as a line of filename under every finding — on a screen with six findings that's six lines doing nothing but taking vertical space. Now every cited element gets a small ⓘ inline at the end of its text, and the sources live in a popover (hover reveals, click pins — click is the only one that exists on touch). Should read as punctuation, never as a control competing for attention. Rendered by srcInfoHtml(); one delegated handler in wireSrcInfo() serves them all. */ .src-info{ position:relative;top:-1px;display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;margin-left:5px;padding:0;border-radius:50%;vertical-align:middle; border:1px solid var(--border-default);background:transparent;color:var(--text-muted); font-size:10px;font-weight:var(--fw-bold);font-style:normal;line-height:1;cursor:pointer; transition:border-color .12s,color .12s,background .12s;flex:0 0 auto; } .src-info:hover,.src-info.open{border-color:var(--brand);color:var(--brand);background:var(--teal-50);} .src-info:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft);} /* On the dark takeaway banner the neutral border disappears — lift it to match the text. */ .takeaway .src-info,.report-hero .takeaway .src-info{border-color:rgba(243,247,247,.55);color:rgba(243,247,247,.85);} .takeaway .src-info:hover,.takeaway .src-info.open{border-color:#fff;color:#fff;background:rgba(255,255,255,.14);} .src-pop{ position:absolute;z-index:1200;max-width:300px;padding:9px 12px;border-radius:var(--radius-md); background:var(--ink-900);color:var(--ink-100);font-size:var(--text-xs);line-height:1.45; box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(3px); transition:opacity .12s,transform .12s;word-break:break-word; } .src-pop.show{opacity:1;transform:none;pointer-events:auto;} .src-pop .sp-label{ display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-400);margin-bottom:3px;font-weight:var(--fw-semibold); } .src-pop a{color:var(--teal-300);} /* Legacy: markdown bodies still inline raw [Source: …] spans (openAssetDetail/openMd), which aren't parsed into the ⓘ path. Keep them quiet rather than restyling them. */ .src-cite{font-size:.75rem;color:var(--text-muted);line-height:1.4;word-break:break-word;} /* Stage KPI figures + inline editors (Project 3) — now rendered inside the Journey stages detail panel (2026-07-07 rebuild) rather than per-stage cards. Same in-place disclosure: "Edit target" swaps the figures row for a small form; stage notes work the same way. */ .stage-kpi-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 10px;} .stage-kpi-figures>div{display:flex;flex-direction:column;gap:5px;} /* figure order is Baseline · Target · Current — the target reads as the goal (green) */ .stage-kpi-figures>div:nth-child(2) .skf-val{color:var(--success-600);} .skf-label{font-size:var(--text-xs);color:var(--text-muted);} .skf-val{font-size:var(--text-lg);font-weight:var(--fw-extrabold);letter-spacing:var(--tracking-tight);} .stage-kpi-edit-form .field{margin-bottom:8px;} .stage-kpi-edit-form .field label{font-size:var(--text-xs);color:var(--text-muted);display:block;margin-bottom:3px;} .stage-kpi-edit-actions{display:flex;gap:10px;align-items:center;margin-top:4px;} .stage-notes-toggle{margin-top:8px;} .stage-notes-form{margin-top:8px;} .stage-notes-form textarea{margin-bottom:8px;} .list-icon{ width:34px;height:34px;border-radius:var(--radius-sm);flex:0 0 34px; display:inline-flex;align-items:center;justify-content:center; } .list-icon.warning{background:var(--warning-100);color:var(--warning-600);} .list-icon.danger{background:var(--danger-100);color:var(--danger-600);} .list-icon.info{background:var(--info-100);color:var(--info-600);} .list-icon.success{background:var(--success-100);color:var(--success-600);} .list-body{flex:1;min-width:0;} .lb-title{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .lb-sub{color:var(--text-muted);font-size:var(--text-xs);margin-top:2px;} .list-meta{margin-left:auto;text-align:right;flex:0 0 auto;} /* confidence bars */ .confidence{margin-top:10px;} .conf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} .conf-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);} .conf-val{font-size:var(--text-xs);font-weight:var(--fw-semibold);} .conf-track{height:6px;border-radius:var(--radius-pill);background:var(--ink-100);overflow:hidden;} .conf-fill{height:100%;border-radius:var(--radius-pill);background:var(--brand);} .conf-high .conf-fill{background:var(--success-600);} .conf-high .conf-val{color:var(--success-600);} .conf-med .conf-fill{background:var(--warning-600);} .conf-med .conf-val{color:var(--warning-600);} .conf-low .conf-fill{background:var(--danger-600);} .conf-low .conf-val{color:var(--danger-600);} /* ============================================================ RING GAUGE (profile / coverage) ============================================================ */ .ai-panel{display:flex;align-items:stretch;gap:24px;padding:24px;} .ai-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .ai-col.center{flex:0 0 auto;align-items:center;justify-content:center;text-align:center;} .ai-divider{width:1px;background:var(--border-subtle);} .col-label,.field-label{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .col-sub{color:var(--text-muted);font-size:var(--text-xs);} .ring{ --val:62;--size:118px;width:var(--size);height:var(--size);border-radius:50%; display:grid;place-items:center; background:conic-gradient(var(--brand) calc(var(--val)*1%),var(--ink-100) 0); position:relative; } .ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--white);} .ring-val{position:relative;font-size:var(--text-xl);font-weight:var(--fw-bold);color:var(--text-primary);} .ring-caption{font-size:var(--text-xs);color:var(--text-muted);} .accent-text{color:var(--brand-strong);font-weight:var(--fw-semibold);} .answer-box{ width:100%;min-height:74px;resize:vertical;border:1px solid var(--border-default); border-radius:var(--radius-md);padding:10px 12px;font-family:inherit;font-size:var(--text-sm); } .answer-box:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} .answer-row{display:flex;justify-content:flex-end;margin-top:8px;} .upload-tile{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; border:1.5px dashed var(--border-default);border-radius:var(--radius-md);padding:20px; } .up-icon{ width:38px;height:38px;border-radius:var(--radius-md);background:var(--brand-soft);color:var(--brand-strong); display:inline-flex;align-items:center;justify-content:center; } .up-text{font-size:var(--text-xs);color:var(--text-muted);} /* ============================================================ JOURNEY STAGES (rebuilt 2026-07-07: focus callout + clickable stage strip + ONE detail panel — replaces stepper/KPI-grid/friction zones) ============================================================ */ /* focus hero (2026-07-13): the Overview takeaway component reused as a button — one hero pattern portal-wide. Replaces the old red .focus-callout strap. */ .focus-hero{width:100%;text-align:left;cursor:pointer;font-family:inherit;appearance:none;} .focus-hero .tk-body{display:block;min-width:0;} .focus-hero .tk-text b{color:#fff;} .stage-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;} /* Stage cards (2026-07-23 redesign): neutral tinted tiles, status shown as a coloured dot+label only (no full-card fill); the selected card carries the teal identity — teal border, light-teal fill, a soft focus ring, and a filled number chip. */ .stage-chip{ display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 20px; border:2px solid transparent;border-radius:var(--radius-lg);background:var(--ink-100); cursor:pointer;text-align:left;font-family:inherit;transition:.14s; } .stage-chip:hover{background:var(--ink-200);} .stage-chip.is-selected,.stage-chip.is-selected:hover{background:var(--blue-100);border-color:var(--brand);box-shadow:0 0 0 4px rgba(15,139,177,.12);} .stage-chip .stage-top{width:100%;justify-content:space-between;margin-bottom:12px;} .stage-top{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .stage-num{ width:30px;height:30px;border-radius:var(--radius-pill);background:var(--seq-tint); color:var(--seq-ink);display:inline-flex;align-items:center;justify-content:center; font-size:var(--text-sm);font-weight:var(--fw-bold); } .stage-chip.is-selected .stage-num{background:var(--brand);color:var(--white);} .stage-flag{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--warning-600);} .stage-flag .dot{width:7px;height:7px;border-radius:50%;background:currentColor;} .stage-name{font-weight:var(--fw-bold);font-size:var(--text-base);letter-spacing:var(--tracking-snug);} .chip-kpi{font-size:var(--text-xs);color:var(--text-secondary);} .chip-kpi b{font-weight:var(--fw-semibold);color:var(--text-primary);} /* ============================================================ [DS] Journey stage identity — 2026-09-03 ------------------------------------------------------------ The five stages are the product's central idea and every one of them rendered in --ink-400 grey, so the portal read as one colour. This walks the DS hues COOL -> WARM along the journey — early stages blue, the decision indigo, keeping-them gold, advocacy coral — so the ramp reads as PROGRESS, not a rainbow. Nothing invented: these are the DS's own four hues (brand / indigo / gold / coral). One block sets three vars per stage and every component below just consumes them, so giving a new surface its stage colour is one line. Keyed on the CANONICAL stage key (Awareness…Advocacy) via data-stage / data-stage-chip, never the visible label — so the nonprofit lens inherits this for free, and a report that emits an off-contract stage simply matches nothing and falls back to the old grey. --stg-rail the 3px identity rail / border (mid step) --stg-tint tinted ground for discs and chips (100 step) --stg-ink text and icons ON that tint (700/800 step, AA-safe) ============================================================ */ [data-stage="awareness" i], [data-stage-chip="awareness" i]{ --stg-rail:var(--brand-400); --stg-tint:var(--brand-50); --stg-ink:var(--brand-700); } [data-stage="consideration" i],[data-stage-chip="consideration" i]{ --stg-rail:var(--brand-700); --stg-tint:var(--brand-100); --stg-ink:var(--brand-800); } [data-stage="purchase" i], [data-stage-chip="purchase" i]{ --stg-rail:var(--indigo-600);--stg-tint:var(--indigo-100);--stg-ink:var(--indigo-700); } [data-stage="retention" i], [data-stage-chip="retention" i]{ --stg-rail:var(--gold-600); --stg-tint:var(--gold-100); --stg-ink:var(--gold-800); } [data-stage="advocacy" i], [data-stage-chip="advocacy" i]{ --stg-rail:var(--coral-500); --stg-tint:var(--coral-100); --stg-ink:var(--coral-700); } /* ---- Journey strip: the rail carries the identity, the disc carries the number. Unselected chips stay on the neutral ground so the strip is still calm; only the 3px rail and the disc are coloured. ---- */ .stage-chip{border-top:3px solid var(--stg-rail,transparent);} .stage-chip .stage-num{ background:var(--stg-tint,rgba(15,27,29,.06)); color:var(--stg-ink,var(--text-secondary)); } /* Selected: the chip adopts its own stage rather than a generic brand blue. */ .stage-chip.is-selected,.stage-chip.is-selected:hover{ background:var(--stg-tint,var(--brand-100)); border-color:var(--stg-rail,var(--brand)); box-shadow:0 0 0 4px rgba(15,139,177,.10); } .stage-chip.is-selected .stage-num{ background:var(--stg-ink,var(--brand));color:var(--white); } /* ---- The same accent wherever a stage is NAMED, so the colour is a thing you learn to read rather than decoration on one screen. ---- */ .mv-stage[data-stage], .num-stage-l[data-stage], .lb-eyebrow[data-stage]{color:var(--stg-ink,var(--ink-400));} /* A stage name in running text gets a dot instead of recolouring the line. */ .stage-tick{ display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--stg-rail,var(--ink-300));margin-right:7px;vertical-align:middle; } /* Stage panel + focus hero: a left rail rather than a wash. */ .stage-panel-head[data-stage]{ border-left:3px solid var(--stg-rail,transparent); padding-left:14px;margin-left:-14px; } .stage-panel-head[data-stage] .stage-panel-title{color:var(--stg-ink,var(--text-primary));} .chip-kpi i{font-style:normal;color:var(--text-muted);margin:0 3px;} .chip-kpi u{text-decoration:none;color:var(--text-muted);} .chip-kpi.is-unset{color:var(--text-muted);} .stage-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;} .stage-panel-title{margin:6px 0 0;font-size:var(--text-xl);font-weight:var(--fw-extrabold);letter-spacing:var(--tracking-tight);} .stage-panel-qa{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-sunken);margin-bottom:16px;} .stage-panel-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start;} .stage-panel-col{display:flex;flex-direction:column;gap:4px;min-width:0;} .stage-panel-col[data-stage-kpi]{border-left:1px solid var(--border-subtle);padding-left:22px;} /* problem → solution rows: the latest report's brief(s) for the selected stage, with their asset chips; earlier reports' briefs sit collapsed behind a disclosure */ .stage-brief{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;margin-top:8px; border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-sunken);} .stage-brief.is-earlier{background:var(--white);} .stage-brief-main{flex:1;min-width:0;} /* "More on this stage" — everything past the glance layer (confidence, opportunity, buyer Q&A, earlier briefs, cross-links) starts closed (simplicity pass 2026-07-13) */ .stage-more{margin-top:16px;border-top:1px solid var(--border-subtle);padding-top:10px;} .stage-more summary{cursor:pointer;list-style:none;font-size:var(--text-xs);font-weight:var(--fw-semibold); letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);user-select:none;} .stage-more summary:hover{color:var(--text-link);} .stage-more summary::-webkit-details-marker{display:none;} .stage-more summary::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s ease;} .stage-more[open] summary::before{transform:rotate(90deg);} .stage-more-body{padding-top:10px;} /* brief highlight pulse when the focus callout jumps the user down to the panel */ .stage-panel.flash{animation:panel-flash 1.1s ease-out 1;} @keyframes panel-flash{0%{box-shadow:0 0 0 3px var(--brand-soft);}100%{box-shadow:var(--shadow-sm);}} @media (max-width:900px){ .stage-strip{grid-template-columns:repeat(2,1fr);} .stage-panel-grid{grid-template-columns:1fr;} .stage-panel-col[data-stage-kpi]{border-left:none;padding-left:0;} } /* ============================================================ TABLES ============================================================ */ .table{width:100%;border-collapse:separate;border-spacing:0; background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;} .table th,.table td{text-align:left;padding:13px 16px;font-size:var(--text-sm);border-bottom:1px solid var(--border-subtle);vertical-align:middle;} .table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);font-weight:var(--fw-semibold);background:var(--ink-50);} .table tr:last-child td{border-bottom:none;} .table tbody tr:hover{background:var(--ink-50);} .cell-strong{font-weight:var(--fw-semibold);} .cell-muted{color:var(--text-muted);} /* ============================================================ ASSET GRID ============================================================ */ .asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .asset{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:.14s;} .asset:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);} .asset{display:flex;flex-direction:column;cursor:default;} .asset-preview{aspect-ratio:16/6;background:var(--gradient-teal);display:flex;align-items:center;justify-content:center;color:var(--white);cursor:pointer;} .asset-meta{padding:11px 13px;display:flex;flex-direction:column;flex:1;} .asset-name{font-weight:var(--fw-semibold);font-size:var(--text-sm);cursor:pointer;} .asset-sub{color:var(--text-muted);font-size:var(--text-xs);margin-top:2px;} /* asset CTA row */ .asset-cta{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:10px;} .asset-cta .btn{padding:4px 9px;font-size:var(--text-xs);} .asset-cta .btn svg{margin-right:4px;} /* per-brief asset links + brief one-liner */ .lb-summary{color:var(--text-secondary);font-size:var(--text-sm);margin-top:3px;line-height:1.45;} /* per-row "why" disclosure (simplicity pass 2026-07-13): rationale + meta start closed */ .row-why{margin-top:4px;} .row-why summary{cursor:pointer;list-style:none;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);user-select:none;} .row-why summary:hover{color:var(--text-link);} .row-why summary::-webkit-details-marker{display:none;} .row-why summary::before{content:"▸";display:inline-block;margin-right:5px;transition:transform .15s ease;} .row-why[open] summary::before{transform:rotate(90deg);} .row-why[open]{padding-bottom:2px;} .brief-assets{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;} .asset-link{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-default);background:var(--white); color:var(--text-secondary);border-radius:var(--radius-pill);padding:3px 10px;font-size:var(--text-xs); font-weight:var(--fw-medium);cursor:pointer;transition:.12s;} .asset-link:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-soft);} .asset-link svg{opacity:.7;} /* feedback control (inline on briefs + assets) */ .fb-ctrl{display:inline-flex;align-items:center;gap:7px;margin-top:9px;} .fb-ask{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--border-default);background:transparent; color:var(--text-secondary);border-radius:var(--radius-pill);padding:3px 11px;font-size:var(--text-xs); font-weight:var(--fw-medium);cursor:pointer;transition:.12s;} .fb-ask:hover{border-color:var(--brand);color:var(--brand-strong);border-style:solid;} .fb-state{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold); padding:3px 11px;border-radius:var(--radius-pill);cursor:pointer;} .fb-state.use-yes{background:var(--brand-soft);color:var(--brand-strong);} .fb-state.use-no{background:var(--ink-100);color:var(--text-secondary);} .fb-state .fb-edit{font-weight:var(--fw-medium);color:var(--text-muted);text-decoration:underline;} /* feedback modal */ .fb-modal{max-width:460px;} .fb-q{margin:14px 0;} .fb-label{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);margin-bottom:8px;} .fb-hint{font-weight:var(--fw-regular);color:var(--text-muted);} .fb-choice{display:flex;gap:8px;} .fb-opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-default);background:var(--white); color:var(--text-secondary);border-radius:var(--radius-md);padding:8px 14px;font-size:var(--text-sm); font-weight:var(--fw-medium);cursor:pointer;transition:.12s;} .fb-opt:hover{border-color:var(--brand);} .fb-opt.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong);} .fb-saved{color:var(--brand-strong);font-size:var(--text-sm);font-weight:var(--fw-semibold);margin-right:auto;} /* focus-area buttons (Run a report / Request a report / self-serve focus box) */ .focus-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px;} .focus-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left; border:1px solid var(--border-default);background:var(--white);color:var(--text-secondary); border-radius:var(--radius-md);padding:7px 12px;font-size:var(--text-sm);font-weight:var(--fw-medium); cursor:pointer;transition:.12s;} .focus-chip:hover{border-color:var(--brand);} .focus-chip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong);} .focus-chip .fc-hint{font-size:11px;font-weight:var(--fw-regular);color:var(--text-tertiary,var(--text-secondary));opacity:.85;} .focus-chip[aria-pressed="true"] .fc-hint{color:var(--brand-strong);opacity:.8;} .focus-detail{margin-top:10px;} .focus-detail label{display:block;font-size:12px;font-weight:var(--fw-semibold);color:var(--text-secondary);margin:0 0 4px;} .focus-detail textarea{width:100%;min-height:60px;padding:8px 10px;border:1px solid var(--border-default); border-radius:var(--radius-md);font-size:var(--text-sm);font-family:inherit;resize:vertical;box-sizing:border-box;} .focus-field{margin:2px 0 4px;} .focus-q{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-secondary);margin:0 0 8px;} .focus-opt{font-weight:var(--fw-regular);color:var(--text-tertiary,var(--text-secondary));} .focus-note{margin-top:10px;font-size:12px;} /* admin-only "skip web research this run" toggle in the Run-a-report modal */ .run-skip-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--text-secondary);cursor:pointer;} .run-skip-row[hidden]{display:none;} .run-skip-row input{margin:0;} /* admin-only per-run spend line under a report history row (web searches · token cost) */ .run-admin-meta{margin-top:2px;font-size:11px;color:var(--text-tertiary,var(--text-secondary));} /* asset tabs (Recommended | Uploads) */ .asset-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle);} .asset-tab{appearance:none;border:none;background:transparent;cursor:pointer;padding:9px 14px;font-size:var(--text-sm); font-weight:var(--fw-semibold);color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s;} .asset-tab:hover{color:var(--text-primary);} .asset-tab.active{color:var(--brand-strong);border-bottom-color:var(--brand);} .acct-tab{appearance:none;border:none;background:transparent;cursor:pointer;padding:9px 14px;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px;} .acct-tab:hover{color:var(--text-primary);} .acct-tab.active{color:var(--brand-strong);border-bottom-color:var(--brand);} .tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-strong);font-size:12px;font-weight:var(--fw-bold);} /* admin "viewing as company" banner */ /* admin impersonation context — shown under the account name in the sidebar (the old top "Viewing … as admin" banner was removed 2026-07-23). A teal dot + company name signals you're acting inside a tenant's packet without eating a full-width strip. */ .acct-plan.is-impersonating{display:flex;align-items:center;gap:7px;color:var(--brand-strong);font-weight:var(--fw-semibold);line-height:1.3;} .acct-plan.is-impersonating .imp-copy{min-width:0;} .acct-plan.is-impersonating strong{color:var(--text-primary);font-weight:var(--fw-bold);} .acct-plan .imp-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--teal-400);box-shadow:0 0 0 3px rgba(42,181,223,.18);} /* "Recommended" badge w/ chevron on generated asset cards */ .reco-badge{display:inline-flex;align-items:center;gap:3px;color:var(--brand-strong);font-weight:var(--fw-semibold);} .reco-badge svg{opacity:.85;} /* per-upload type select */ .asset-type-select{font-size:var(--text-xs);border:1px solid var(--border-default);border-radius:var(--radius-sm); padding:3px 6px;color:var(--text-secondary);background:var(--white);max-width:130px;} /* admin Tags screen */ .tag-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;} .tag-row{display:flex;align-items:center;gap:8px;} .tag-row input{flex:1;} .tag-row .x{cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;border:none;background:none;padding:2px 6px;border-radius:var(--radius-sm);} .tag-row .x:hover{color:var(--danger);background:var(--ink-50);} .tag-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:30px;} .tag-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-default);background:var(--white); color:var(--text-secondary);border-radius:var(--radius-pill);padding:5px 8px 5px 12px;font-size:var(--text-xs);font-weight:var(--fw-medium);} .tag-chip .x{cursor:pointer;color:var(--text-muted);font-size:15px;line-height:1;border:none;background:none;padding:0 2px;} .tag-chip .x:hover{color:var(--danger);} .tag-add{display:flex;gap:8px;} .tag-add input{flex:1;} /* Reports hero (2026-07-13): dark takeaway + one quiet action row, inset in the card */ .report-hero{padding:14px 14px 0;} .report-hero .takeaway{cursor:pointer;} .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 6px 14px;} /* latest-report takeaway banner — the portal's ONE hero pattern (Overview hero, Journey focus-hero, Reports hero all reuse it). Deep-teal surface (2026-07-23 pitch-deck redesign) replaces the old near-black; a soft raised shadow lifts it off the page. Change --tk-surface to restyle every hero portal-wide. */ :root{--tk-surface:var(--marine-800);--tk-ground:var(--gradient-dark-spotlight);--tk-accent:var(--brand-300);} .takeaway{display:flex;align-items:center;gap:24px;background:var(--tk-ground);border:1px solid var(--marine-700);font-weight:600; border-radius:18px;padding:26px 30px;margin-bottom:18px;cursor:pointer;transition:.14s; box-shadow:0 18px 40px rgba(15,27,29,.16);} .takeaway:hover{box-shadow:0 22px 48px rgba(15,27,29,.22);} .takeaway .tk-icon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:rgba(42,181,223,.14);color:var(--tk-accent);display:inline-flex;align-items:center;justify-content:center;} .takeaway .tk-body{flex:1;min-width:0;} .takeaway .tk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--tk-accent);text-transform:uppercase;letter-spacing:.1em;} .takeaway .tk-text{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink-300);line-height:1.45;margin-top:10px;letter-spacing:var(--tracking-snug);text-wrap:pretty;} .takeaway .tk-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;color:var(--tk-accent);font-weight:var(--fw-semibold);font-size:var(--text-sm);white-space:nowrap;} .takeaway .tk-source{font-size:var(--text-xs);font-weight:var(--fw-regular);color:rgba(243,247,247,.5);line-height:1.4;margin-top:6px;word-break:break-word;} /* Overview hero extras: action row (gradient Open-report pill + focus line) and the account-health donut ring. Ring % is set inline via --ring on .tk-ring. */ .takeaway .tk-actions{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;} .takeaway .tk-open{display:inline-flex;align-items:center;gap:8px;background:var(--gradient-brand);color:#fff;border:none;border-radius:var(--radius-pill);padding:11px 22px;font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;box-shadow:var(--shadow-brand);} .takeaway .tk-open:hover{filter:brightness(1.05);} .takeaway .tk-focus{font-size:var(--text-sm);color:rgba(255,255,255,.6);} .takeaway .tk-ring{flex:0 0 auto;width:132px;height:132px;border-radius:50%; background:conic-gradient(var(--ring-color,var(--warning-600)) 0 calc(var(--ring,61) * 1%),rgba(255,255,255,.12) 0 100%); display:flex;align-items:center;justify-content:center;} .takeaway .tk-ring > span{width:100px;height:100px;border-radius:50%;background:var(--tk-surface); display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ring-color,var(--warning-600));} .takeaway .tk-ring b{font-size:2.25rem;font-weight:var(--fw-extrabold);line-height:1;letter-spacing:var(--tracking-tight);} .takeaway .tk-ring i{font-style:normal;font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;text-align:center;line-height:1.25;} /* what's new since last visit (light, dismissible — Project 2/6 return-hook strip) */ .whatsnew{display:flex;align-items:center;gap:14px;background:var(--brand-soft);border:1px solid var(--brand); border-radius:var(--radius-md);padding:12px 16px;margin-bottom:18px;} .whatsnew .wn-icon{flex:0 0 auto;color:var(--brand-strong);display:inline-flex;} .whatsnew .wn-text{flex:1;min-width:0;font-size:var(--text-sm);color:var(--text-primary);} .whatsnew .wn-text b{color:var(--brand-strong);} .whatsnew .wn-dismiss{flex:0 0 auto;background:none;border:none;color:var(--brand-strong);font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;padding:2px 4px;} /* inline "More/Less" toggle on summarized copy */ .sm-t{font-size:var(--text-xs);padding:0;margin-left:3px;vertical-align:baseline;white-space:nowrap;} /* KPI strip (key items) */ .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;} .kpi-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px; box-shadow:var(--shadow-sm);padding:18px 18px 16px;} .kpi-card .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .kpi-card .kpi-label{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-secondary);line-height:1.3;} .kpi-card .kpi-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ink-300);} .kpi-card .kpi-figure{margin-top:10px;display:flex;align-items:baseline;gap:7px;} .kpi-card .kpi-value{font-size:1.75rem;font-weight:var(--fw-extrabold);letter-spacing:var(--tracking-tight);color:var(--text-primary);} .kpi-card .kpi-delta{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);} .kpi-card .kpi-bar{margin-top:8px;height:5px;border-radius:var(--radius-pill);background:var(--ink-100);overflow:hidden;} .kpi-card .kpi-bar > i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--ink-300);} .kpi-card.is-success .kpi-dot,.kpi-card.is-success .kpi-bar > i{background:var(--success-600);} .kpi-card.is-success .kpi-delta{color:var(--success-600);} .kpi-card.is-warning .kpi-dot,.kpi-card.is-warning .kpi-bar > i{background:var(--warning-600);} .kpi-card.is-warning .kpi-delta{color:var(--warning-600);} .kpi-card.is-danger .kpi-dot,.kpi-card.is-danger .kpi-bar > i{background:var(--danger-600);} .kpi-card.is-danger .kpi-delta{color:var(--danger-600);} .kpi-card.is-info .kpi-dot,.kpi-card.is-info .kpi-bar > i{background:var(--info-600);} .kpi-card.is-info .kpi-delta{color:var(--info-600);} /* conversion-trend rows (Monitoring & reports — 2026-07-23 redesign): one row per stage pair, direction shown as a weak/steady/strong pill, evidence note beneath. */ .trend-row{padding:16px 24px;border-bottom:1px solid var(--border-subtle);} .trend-row:last-child{border-bottom:none;} .trend-top{display:flex;align-items:center;justify-content:space-between;gap:16px;} .trend-pair{font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--text-primary);} .trend-note{margin-top:8px;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;max-width:900px;} /* priority-row eyebrow + tag pill (overview) */ .lb-eyebrow{font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);} .lb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .lb-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold);border-radius:var(--radius-pill);padding:3px 10px;} .lb-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;} #ov-priority .lb-title{font-size:var(--text-base);margin-top:4px;} #ov-priority .list-row{padding:16px 20px;} /* ---- Content page (merged with Grow your AI) ---- */ .count{font-size:.78rem;font-weight:var(--fw-semibold);color:var(--ink-400);} .link-btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-link);background:none;border:none;cursor:pointer;padding:0;} .link-btn:hover{text-decoration:underline;} /* completeness card */ #content-completeness{display:flex;align-items:center;gap:22px;} .complete-main{flex:1;min-width:0;} .complete-head{display:flex;align-items:baseline;gap:10px;} .complete-title{font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text-primary);} .complete-pct{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--brand-strong);} .complete-sub{margin:5px 0 0;font-size:var(--text-sm);color:var(--text-muted);} .complete-bar{margin-top:12px;height:7px;border-radius:var(--radius-pill);background:var(--ink-100);overflow:hidden;} .complete-bar > i{display:block;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--teal-700),var(--teal-500));transition:width .4s ease;} .complete-note{flex:0 0 auto;max-width:280px;display:flex;align-items:flex-start;gap:9px;font-size:var(--text-sm);line-height:1.45;color:var(--text-muted);} .complete-note svg{flex:0 0 auto;margin-top:2px;color:var(--brand-strong);} @media (max-width:720px){#content-completeness{flex-direction:column;align-items:flex-start;gap:14px;}.complete-note{max-width:none;}} /* Go deeper — hero card (upleveled, one question at a time) */ .deeper-hero{background:linear-gradient(135deg,var(--teal-50),var(--surface-card));border:1px solid var(--teal-200,var(--border-default));} .dh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;} .dh-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong);} .dh-eyebrow svg{color:var(--brand-strong);} .dh-progress{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);} .dh-bar{margin-top:12px;height:6px;} .dh-lead{margin-top:14px;font-size:var(--text-sm);color:var(--text-muted);} .dh-q{margin:6px 0 0;font-size:var(--text-lg);font-weight:var(--fw-bold);line-height:1.3;color:var(--text-primary);text-wrap:pretty;} .dh-hint{margin:8px 0 0;font-size:var(--text-sm);color:var(--text-secondary);} .dh-input{margin-top:14px;width:100%;} .dh-actions{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap;} .dh-left{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto;} .deeper-hero.is-done{background:linear-gradient(135deg,var(--teal-50),var(--surface-card));} .deeper-hero.is-done .dh-q{color:var(--brand-strong);} .dh-reset{margin-left:10px;font-size:var(--text-xs);font-weight:var(--fw-semibold);} /* Go-deeper REVIEW module — collapsible theme groups, distinct from the structured % cards. Each theme header is a full-width row; opening it reveals the questions (answered = editable, unanswered = jump-to-answer). */ .godeep-theme{border:1px solid var(--border-default);border-radius:var(--radius-md,10px);margin-bottom:10px;background:var(--surface-card);overflow:hidden;} .godeep-theme.is-open{border-color:var(--teal-300,var(--teal-200,var(--border-default)));} .godeep-theme-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;cursor:pointer;background:none;border:none;padding:13px 15px;} .godeep-theme-head:hover{background:var(--surface-2,var(--brand-soft));} .godeep-theme-name{font-size:var(--text-md);font-weight:var(--fw-semibold);color:var(--text-primary);} .godeep-theme-count{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);margin-left:2px;} .godeep-mini{flex:1;max-width:160px;height:5px;margin-left:auto;} .godeep-caret{font-size:.7rem;color:var(--text-muted);width:14px;text-align:center;} .godeep-theme-body{padding:2px 15px 14px;} .godeep-item{padding:12px 0;border-top:1px solid var(--border-subtle);} .godeep-item:first-child{border-top:none;} .godeep-item-head{display:flex;align-items:flex-start;gap:12px;} .godeep-q{flex:1;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink-700);line-height:1.4;text-wrap:pretty;} .godeep-q.is-empty{font-weight:var(--fw-medium,500);color:var(--ink-400);} .godeep-a{margin-top:6px;font-size:var(--text-sm);line-height:1.5;color:var(--ink-700);text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-wrap;} .godeep-hint{margin-top:4px;font-size:var(--text-xs);color:var(--text-muted);} .godeep-input{margin-top:8px;width:100%;} /* Admin · Go-deeper question editor */ /* Go-deeper admin: lens tabs (business | nonprofit). Most questions are shared between the two lenses but keep separate wording, so the editor works one lens at a time. */ .deepq-lens{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;} .deepq-lens-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--border-subtle);border-radius:999px;background:transparent;color:var(--ink-400);font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;} .deepq-lens-tab:hover{border-color:var(--border-strong,var(--border-subtle));color:var(--ink);} .deepq-lens-tab.on{border-color:var(--brand);background:var(--brand-50);color:var(--ink);} .deepq-lens-tab .count{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-400);} .deepq-lens-note{flex:1 1 260px;margin:0;font-size:var(--text-xs);color:var(--ink-400);line-height:1.5;} .deepq-only{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-400);border:1px solid var(--border-subtle);border-radius:999px;padding:1px 8px;text-transform:capitalize;} .deepq-blurb{font-size:var(--text-xs);margin:-4px 0 14px;} .deepq-rows{display:flex;flex-direction:column;gap:16px;} .deepq-row{display:flex;flex-direction:column;gap:7px;padding-top:14px;border-top:1px solid var(--border-subtle);} .deepq-row:first-child{padding-top:0;border-top:none;} .deepq-row-head{display:flex;align-items:center;gap:10px;} .deepq-key{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-400);font-family:var(--font-mono);} .deepq-reset{margin-left:auto;font-size:var(--text-xs);} .deepq-hint{font-size:var(--text-xs);} /* collapsed content section cards (% + summary, content hidden until opened) */ .sec-pct{flex:0 0 auto;font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--brand-strong);background:var(--brand-soft);padding:2px 9px;border-radius:var(--radius-pill);} .sec-pct.is-done{color:var(--teal-700);background:var(--teal-50);} .sec-blurb{margin:8px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);text-wrap:pretty;} .sec-bar{margin-top:14px;height:6px;} .sec-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;} .sec-count{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);} .sec-open{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--brand-strong);} button.sec-collapsed{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;border:1px solid var(--border-default);transition:border-color .14s ease,box-shadow .14s ease,transform .05s ease;} button.sec-collapsed:hover{border-color:var(--teal-500);box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));} button.sec-collapsed:hover .sec-open{text-decoration:underline;} button.sec-collapsed.is-done{border-color:var(--teal-200,var(--border-default));} .sec-card.sec-expanded .sec-collapse{margin-left:auto;} /* structured section cards */ .sec-card .sec-head{display:flex;align-items:center;gap:11px;margin-bottom:6px;} .sec-card .sec-head h3{flex:1;font-size:var(--text-md);} .kv-lines{display:flex;flex-direction:column;} .kv-line{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--border-subtle);} .kv-line:first-child{border-top:none;} .kv-label{flex:0 0 130px;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-400);line-height:1.45;} .kv-value{flex:1;min-width:0;font-size:var(--text-sm);line-height:1.45;color:var(--ink-700);text-wrap:pretty;overflow-wrap:anywhere;} .kv-value.empty{color:var(--ink-400);} /* narrative rows */ .nar-row{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-top:1px solid var(--border-subtle);cursor:pointer;transition:background .14s ease;} .nar-row:first-child{border-top:none;} .nar-row:hover{background:var(--ink-50);} .nar-body{flex:1;min-width:0;} .nar-label{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);} .nar-value{margin-top:4px;font-size:var(--text-base);font-weight:var(--fw-medium);line-height:1.5;color:var(--ink-700);text-wrap:pretty;} .nar-value.empty{color:var(--ink-400);font-weight:var(--fw-regular);} .nar-action{flex:0 0 auto;margin-top:2px;} /* reviewable / inline-editable field rows (Content page) */ .frows{display:flex;flex-direction:column;} .frow{padding:11px 0;border-top:1px solid var(--border-subtle);} .frow:first-child{border-top:none;} .frow-head{display:flex;align-items:center;gap:8px;} .frow-label{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-500);flex:1;min-width:0;} .frow-q-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;border-radius:6px;background:var(--ink-100);color:var(--ink-500);cursor:pointer;transition:.14s;} .frow-q-toggle:hover{background:var(--brand-soft);color:var(--brand-strong);} .frow-edit{flex:0 0 auto;} .frow-q{margin:6px 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--ink-500);background:var(--ink-50);border-left:2px solid var(--brand);border-radius:0 6px 6px 0;padding:7px 10px;text-wrap:pretty;} .frow-q.open{margin-top:8px;} .frow-value{margin-top:4px;font-size:var(--text-sm);line-height:1.5;color:var(--ink-700);text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-wrap;} .frow-value.empty{color:var(--ink-400);font-style:italic;} .frow-input{margin-top:8px;} .frow-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px;} /* competitors + add tile */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;} .comp-card .comp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;} .comp-name{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-primary);} .comp-note{margin:8px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);text-wrap:pretty;} .add-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-secondary);background:var(--surface-card);border:1.5px dashed var(--border-default);border-radius:14px;cursor:pointer;transition:.14s ease;} .add-tile:hover{border-color:var(--teal-500);background:var(--teal-50);color:var(--brand-strong);} /* connected-sources card */ .sources-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;} .sources-empty{display:flex;align-items:center;gap:14px;} .sources-text{flex:1;min-width:0;} /* competitor editor modal */ .comp-editor{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto;padding-right:2px;} .comp-edit-row{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px;background:var(--ink-50);display:flex;flex-direction:column;gap:10px;} .comp-edit-head{display:flex;align-items:center;justify-content:space-between;gap:8px;} .comp-edit-num{font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);} .comp-edit-row .field{margin:0;} .comp-edit-row .field label{display:block;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--ink-600);margin-bottom:5px;} /* connect-source tip line */ .connect-tip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-secondary); background:var(--ink-50);border-radius:var(--radius-sm);padding:9px 12px;margin:4px 0 4px;} .connect-tip svg{color:var(--brand-strong);flex:0 0 auto;} /* sentiment pill */ .sentiment{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold);} .sentiment .dot{width:8px;height:8px;border-radius:50%;} .sentiment.pos .dot{background:var(--success-600);} .sentiment.pos{color:var(--success-600);} .sentiment.neu .dot{background:var(--text-muted);} .sentiment.neu{color:var(--text-secondary);} .sentiment.neg .dot{background:var(--danger-600);} .sentiment.neg{color:var(--danger-600);} /* focus highlight when jumping to a specific intake field */ .field-focus{outline:none;border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-soft)!important;} /* overview columns: keep tops aligned, even heights across sizes */ .grid-ov{align-items:start;} .stack{display:flex;flex-direction:column;gap:14px;} /* concise competitor/market summaries */ .mini-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;} .mini-row{display:flex;flex-direction:column;gap:1px;} .mini-title{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .mini-sub{color:var(--text-secondary);font-size:var(--text-xs);line-height:1.4;} .signal{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px;} .signal-row{display:flex;gap:8px;align-items:flex-start;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.45;} .signal-row svg{color:var(--brand-strong);flex:0 0 auto;margin-top:3px;} /* small, clickable source labels */ .src-mini{font-size:var(--text-xs);color:var(--text-link,var(--brand-strong));text-decoration:none;} a.src-mini:hover{text-decoration:underline;} .src-mini-row{font-size:var(--text-xs);color:var(--text-muted);margin-top:8px;line-height:1.6;} .src-mini-row .src-mini{margin:0 1px;} /* chips / filters */ .chips{display:flex;flex-wrap:wrap;gap:8px;} .chip{ border:1px solid var(--border-default);background:var(--white);color:var(--text-secondary); padding:6px 13px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--fw-medium);cursor:pointer; display:inline-flex;align-items:center;gap:6px; } .chip:hover{background:var(--ink-50);} .chip.active{background:var(--brand);color:var(--white);border-color:var(--brand);} .tag-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);} /* find bar: search + sort, sitting above the filter rows (2026-07-22). One row on desktop, stacked on mobile. Kept visually quiet — these are navigation aids, not the content, so they must not compete with the list underneath. */ .find-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .search-wrap{position:relative;flex:1 1 280px;min-width:0;} .search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;} .search-input{ width:100%;box-sizing:border-box;padding:9px 12px 9px 33px; border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--white); font-size:var(--text-sm);color:var(--text-primary);font-family:inherit; } .search-input::placeholder{color:var(--text-muted);} .search-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);} /* Clear the UA's default search decorations so the pill doesn't get a second, misaligned X. */ .search-input::-webkit-search-decoration,.search-input::-webkit-search-results-button{display:none;} .sort-wrap{ display:inline-flex;align-items:center;gap:7px;flex:0 0 auto; font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--fw-medium); } .sort-select{ border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--white); padding:8px 11px;font-size:var(--text-xs);color:var(--text-secondary);font-family:inherit;cursor:pointer; } .sort-select:focus{outline:none;border-color:var(--brand);} /* one labelled chip row per filter axis */ .filter-rows{display:flex;flex-direction:column;gap:9px;} .filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .filter-label{ font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--fw-semibold); text-transform:uppercase;letter-spacing:.04em;flex:0 0 46px; } @media (max-width:640px){ .find-bar{flex-direction:column;align-items:stretch;} .sort-wrap{justify-content:space-between;} .filter-row{align-items:flex-start;} .filter-label{flex-basis:100%;} } /* a completed asset reads as done at a glance, same as a completed brief row */ .asset.is-done{opacity:.72;} .asset.is-done .asset-name{text-decoration:line-through;text-decoration-color:var(--text-muted);} /* bar chart */ .bars{display:flex;align-items:flex-end;gap:14px;height:140px;padding-top:8px;} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;justify-content:flex-end;height:100%;} .bar{width:100%;max-width:38px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--gradient-brand);min-height:4px;} .bar.muted{background:var(--ink-200);} .bar-label{font-size:var(--text-xs);color:var(--text-muted);} /* key-value */ .kv{display:flex;flex-direction:column;gap:0;} .kv-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-subtle);} .kv-row:last-child{border-bottom:none;} .kv-k{color:var(--text-muted);font-size:var(--text-sm);} .kv-v{font-weight:var(--fw-semibold);font-size:var(--text-sm);} /* source rows */ .source-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-subtle);} .source-row:last-child{border-bottom:none;} .source-logo{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface-sunken);display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;color:var(--text-secondary);} .src-name{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .src-sub{color:var(--text-muted);font-size:var(--text-xs);} /* ============================================================ ASK PROGA DRAWER ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(15,27,29,.4);opacity:0;visibility:hidden;transition:.2s;z-index:40;} .scrim.open{opacity:1;visibility:visible;} .drawer{ position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw; background:var(--white);border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-lg); transform:translateX(100%);transition:transform .24s ease;z-index:50;display:flex;flex-direction:column; } .drawer.open{transform:translateX(0);} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-subtle);} .drawer-head h3{font-size:var(--text-md);display:flex;align-items:center;gap:9px;} .drawer-head .x{border:none;background:transparent;cursor:pointer;color:var(--text-muted);font-size:20px;line-height:1;} .drawer-body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px;} .chat-q{align-self:flex-end;background:var(--brand);color:var(--white);padding:10px 14px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);font-size:var(--text-sm);max-width:85%;} .chat-a{align-self:flex-start;background:var(--surface-sunken);padding:12px 14px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);font-size:var(--text-sm);max-width:90%;} .chat-a strong{color:var(--brand-strong);} /* Run history under a report row. Slim, indented, quiet — it's reference, not the main event. */ .run-history{margin:8px 0 4px;border-left:2px solid var(--border-subtle);padding-left:12px;} .run-history .run-row{padding:8px 0;} .run-history .lb-sub{font-size:12px;color:var(--text-tertiary);} /* Monthly AI budget control — sits with the Ask Proga toggle in Admin → Account. */ .budget-row{display:flex;align-items:center;gap:14px;padding:4px 2px;} .budget-input{display:flex;align-items:center;gap:6px;} .budget-currency{color:var(--text-tertiary);font-size:var(--text-sm);} .budget-input input{width:96px;padding:7px 9px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:var(--text-sm);text-align:right;} .budget-input input:focus{outline:none;border-color:var(--brand);} .budget-input input:disabled{background:var(--surface-sunken);color:var(--text-tertiary);} .budget-meter{margin-top:10px;padding:0 2px;} .budget-bar{height:6px;border-radius:999px;background:var(--surface-sunken);overflow:hidden;} .budget-bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);transition:width .3s ease;} .budget-bar span.near{background:var(--warn);} .budget-bar span.over{background:var(--danger);} .budget-legend{display:block;margin-top:6px;font-size:12px;color:var(--text-tertiary);} /* Ask Proga live answers. Markdown comes back from the model, so the bubble needs real block-element styling rather than the single-line treatment the demo copy assumed. */ .chat-a p{margin:0 0 8px;} .chat-a p:last-child{margin-bottom:0;} .chat-a ul,.chat-a ol{margin:6px 0 8px;padding-left:18px;} .chat-a li{margin:3px 0;} .chat-a h1,.chat-a h2,.chat-a h3{font-size:var(--text-sm);font-weight:650;color:var(--brand-strong);margin:10px 0 5px;} .chat-a h1:first-child,.chat-a h2:first-child,.chat-a h3:first-child{margin-top:0;} .chat-a code{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:1px 5px;font-size:.92em;} .chat-a table{border-collapse:collapse;margin:8px 0;font-size:.94em;} .chat-a th,.chat-a td{border:1px solid var(--border-subtle);padding:5px 9px;text-align:left;} /* Which tier answered. Shown only for the expensive path, so the badge means something. */ .ask-tier{display:inline-block;float:right;margin:0 0 4px 8px;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-raised,#fff);border:1px solid var(--border-subtle);color:var(--text-tertiary);} .ask-tier-deep{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-strong);} .chat-err{border:1px solid var(--danger-border);background:var(--danger-soft);color:var(--danger-text);} .ask-detail{display:inline-block;margin-top:4px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.7;} /* Thinking indicator. A Haiku answer is fast; an Opus escalation is not, so the drawer must show it's alive rather than looking frozen. */ .chat-thinking{padding:14px 16px;} .dots{display:inline-flex;gap:4px;align-items:center;} .dots i{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);display:block;animation:askblink 1.25s infinite ease-in-out;} .dots i:nth-child(2){animation-delay:.18s;} .dots i:nth-child(3){animation-delay:.36s;} @keyframes askblink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-2px);}} @media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6;}} .suggest{display:flex;flex-direction:column;gap:8px;margin-top:6px;} .suggest button{text-align:left;border:1px solid var(--border-subtle);background:var(--white);border-radius:var(--radius-md);padding:10px 13px;font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;} .suggest button:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-soft);} .drawer-foot{padding:16px 22px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;} .drawer-foot input{flex:1;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 13px;font-size:var(--text-sm);} .drawer-foot input:focus{outline:none;border-color:var(--border-focus);} .divider{border:none;border-top:1px solid var(--border-subtle);margin:4px 0;} /* ============================================================ DESIGN-PROMPT MODAL ============================================================ */ .prompt-modal{ position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98); width:560px;max-width:92vw;background:var(--white);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:60; padding:22px;opacity:0;visibility:hidden;transition:.18s; } .prompt-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);} .prompt-head{display:flex;align-items:center;justify-content:space-between;} .prompt-head h3{font-size:var(--text-md);display:flex;align-items:center;gap:9px;} .prompt-head .x{border:none;background:transparent;cursor:pointer;color:var(--text-muted);font-size:20px;line-height:1;} .prompt-sub{color:var(--text-muted);font-size:var(--text-sm);margin:6px 0 12px;} .prompt-text{ width:100%;height:230px;resize:vertical;border:1px solid var(--border-default); border-radius:var(--radius-md);padding:12px 14px;font-family:var(--font-mono); font-size:var(--text-xs);line-height:1.55;background:var(--surface-sunken);color:var(--text-primary); } .prompt-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;} /* asset detail modal (Project 5 — the modal IS the asset). Sits UNDER the fb + design- prompt modals (z 55 vs 60) so those stack on top when opened from its action bar. */ .adetail-scrim{z-index:39;} .adetail-modal{width:760px;z-index:55;display:flex;flex-direction:column;max-height:86vh;} .adetail-actions{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);} .adetail-actions .btn svg{margin-right:5px;} .adetail-body{flex:1;overflow-y:auto;padding:14px 2px;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);} .adetail-body h1{font-size:var(--text-lg);margin:4px 0 10px;color:var(--text-primary);} .adetail-body h2{font-size:var(--text-md);margin:16px 0 8px;color:var(--text-primary);} .adetail-body h3,.adetail-body h4{font-size:var(--text-sm);margin:14px 0 6px;color:var(--text-primary);} .adetail-body p{margin:0 0 10px;} .adetail-body ul,.adetail-body ol{margin:0 0 10px;padding-left:20px;} .adetail-body li{margin-bottom:4px;} .adetail-body code{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:1px 5px;font-size:var(--text-xs);} .adetail-body pre{background:var(--surface-sunken);border-radius:var(--radius-md);padding:12px 14px;overflow-x:auto;font-size:var(--text-xs);margin:0 0 10px;} .adetail-body blockquote{border-left:3px solid var(--brand);margin:0 0 10px;padding:2px 0 2px 12px;color:var(--text-muted);} .adetail-body hr{border:none;border-top:1px solid var(--border-subtle);margin:14px 0;} .adetail-body table{border-collapse:collapse;margin:0 0 10px;font-size:var(--text-xs);} .adetail-body th,.adetail-body td{border:1px solid var(--border-subtle);padding:5px 9px;text-align:left;} .adetail-foot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--border-subtle);} /* collapsed earlier-report groups (Work briefs tiers + Assets grid, Project 4/5) */ .report-toggle{display:flex;align-items:center;gap:6px;width:100%;text-align:left;appearance:none;border:none; background:transparent;cursor:pointer;padding:12px 18px;font-size:var(--text-sm);font-weight:var(--fw-medium); color:var(--text-secondary);border-top:1px solid var(--border-subtle);} .report-toggle:hover{color:var(--brand-strong);background:var(--ink-50);} .report-toggle .rt-caret{color:var(--text-muted);font-size:var(--text-xs);} #assets-grid .report-toggle{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--white);} #assets-grid .report-toggle:hover{background:var(--ink-50);} .report-group .list-row{background:var(--surface-sunken);} .list-row.is-slim{padding:10px 18px;} .lb-tags{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;} .asset.is-featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-soft);} /* intake editor (wider, scrollable, stepped) */ .intake-modal{width:680px;} .intake-body{max-height:60vh;overflow-y:auto;margin-top:4px;padding-right:4px;} .intake-step{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:14px;} .intake-step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .intake-step-head h4{flex:1;font-size:var(--text-sm);} .intake-step-head .step-num{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--fw-bold);flex:0 0 24px;} .intake-input{width:100%;padding:9px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:inherit;} .intake-input:focus,.intake-step .answer-box:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} /* toast */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink-900);color:var(--white);padding:11px 18px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--fw-medium);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:.2s;z-index:80;} .toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} /* upload progress — stays visible for the whole transfer so a slow upload never looks stalled */ .upload-progress{position:fixed;right:24px;bottom:24px;width:320px;max-width:calc(100vw - 32px);background:var(--surface-card);border:1px solid var(--teal-200,var(--border-default));border-radius:var(--radius-md,10px);box-shadow:var(--shadow-lg);padding:14px 16px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:90;} .upload-progress.show{opacity:1;visibility:visible;transform:translateY(0);} .up-head{display:flex;align-items:center;justify-content:space-between;gap:12px;} .up-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);} .up-pct{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--brand-strong);} .up-name{margin-top:3px;font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .up-bar{margin-top:10px;height:6px;border-radius:99px;background:var(--ink-200);overflow:hidden;} .up-bar>i{display:block;height:100%;border-radius:99px;background:var(--teal-500,var(--brand-strong));transition:width .15s linear;} .up-note{margin-top:8px;font-size:var(--text-xs);color:var(--text-muted);} .asset-del{margin-left:auto;font-size:var(--text-xs);color:var(--danger-600,var(--text-muted));} .asset-del:hover{color:var(--danger-600,var(--ink-700));text-decoration:underline;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1000px){ .grid-ov,.grid-2{grid-template-columns:1fr;} .grid-3,.grid-stat,.kpi-strip,.cards-3{grid-template-columns:repeat(2,1fr);} .asset-grid{grid-template-columns:repeat(2,1fr);} .takeaway{flex-wrap:wrap;} } @media (max-width:720px){ /* Sidebar becomes an off-canvas drawer, toggled by the topbar hamburger. */ .nav-toggle{display:inline-flex;} .sidebar{ position:fixed;top:0;left:0;height:100vh;z-index:30; transform:translateX(-100%);transition:transform .22s ease; box-shadow:var(--shadow-lg); } body.nav-open .sidebar{transform:translateX(0);} /* Rail mode is a desktop affordance. On mobile the sidebar is already a slide-out that is fully hidden, so collapsing it to icons would just be a second, worse hidden state. */ body.nav-rail{--portal-sidebar-w:248px;} body.nav-rail .sidebar-brand{flex-direction:row;padding:20px 22px 14px;} body.nav-rail .sidebar-logo,body.nav-rail .nav-txt{display:revert;} body.nav-rail .sidebar-mark{display:none;} body.nav-rail .mode-switch{display:flex;} body.nav-rail .nav-label{display:block;} body.nav-rail .nav-item{justify-content:flex-start;padding:9px 10px;gap:11px;} body.nav-rail .ask-proga{font-size:var(--text-sm);gap:8px;padding:11px;} body.nav-rail .sidebar-account > div{display:block;} .nav-collapse{display:none;} .nav-scrim{display:block;} body.nav-open .nav-scrim{opacity:1;pointer-events:auto;} .grid-3,.grid-stat,.asset-grid,.kpi-strip,.cards-3{grid-template-columns:1fr;} .scroll{padding:20px 16px 48px;} } /* ===== Your AI — Private AI control surface ============================== */ .ai-intro{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px; background:var(--brand-soft);border:1px solid var(--teal-100);} .ai-intro .head-icon{color:var(--brand-strong);flex:0 0 auto;} .ai-intro div{font-size:var(--text-sm);color:var(--text-secondary);} .dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;} .dir-full{grid-column:1 / -1;} .answer-box.sm{min-height:58px;} .dir-input{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md); padding:9px 12px;font-family:inherit;font-size:var(--text-sm);background:var(--white);margin-top:4px;} .dir-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} .dir-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;} .dir-checks label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm); color:var(--text-secondary);cursor:pointer;} .dir-save-row{justify-content:flex-start;gap:14px;align-items:center;margin-top:16px;} .dir-status{font-size:var(--text-sm);color:var(--text-muted);} .dir-status.ok{color:var(--success-600);} .dir-status.err{color:var(--danger-600);} .tune-list{display:flex;flex-direction:column;gap:10px;} .tune-stage{font-weight:var(--fw-semibold);font-size:var(--text-xs);text-transform:uppercase; letter-spacing:var(--tracking-wide);color:var(--text-muted);margin:14px 0 2px;} .tune-card{display:flex;align-items:center;gap:12px;justify-content:space-between; background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md); padding:11px 14px;} .tune-card .tc-main{min-width:0;} .tune-card .tc-title{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .tune-card .tc-sub{color:var(--text-muted);font-size:var(--text-xs);margin-top:1px;} .tune-state{font-size:var(--text-xs);font-weight:var(--fw-semibold);padding:2px 9px;border-radius:var(--radius-pill); flex:0 0 auto;} .tune-state.default{background:var(--ink-100);color:var(--text-muted);} .tune-state.emphasize{background:var(--success-100);color:var(--success-600);} .tune-state.deemphasize{background:var(--warning-100);color:var(--warning-600);} .tune-state.off{background:var(--danger-100);color:var(--danger-600);} .tune-acts{display:flex;gap:4px;flex:0 0 auto;} .tune-btn{border:1px solid var(--border-default);background:var(--white);border-radius:var(--radius-sm); padding:5px 9px;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--text-secondary);cursor:pointer;} .tune-btn:hover{background:var(--ink-50);} .tune-btn.active{background:var(--brand);color:var(--white);border-color:var(--brand);} .tune-btn.reset{color:var(--text-muted);} .ai-sum-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px;} .ai-sum-row:last-child{margin-bottom:0;} .ai-sum-label{font-weight:var(--fw-semibold);font-size:var(--text-sm);min-width:140px;flex:0 0 auto;} .ai-pill{font-size:var(--text-xs);padding:2px 9px;border-radius:var(--radius-pill);background:var(--ink-100);color:var(--text-secondary);} .ai-pill.good{background:var(--success-100);color:var(--success-600);} .ai-pill.warn{background:var(--warning-100);color:var(--warning-600);} .ai-pill.off{background:var(--danger-100);color:var(--danger-600);} @media(max-width:720px){.dir-grid{grid-template-columns:1fr;}.tune-card{flex-wrap:wrap;}} /* ===== Collapsible sections (Tune the library, Other answers) ============= */ .collapse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md); padding:14px 16px;cursor:pointer;text-align:left;} .collapse-head:hover{background:var(--ink-50);} .collapse-title{display:flex;flex-direction:column;gap:2px;min-width:0;} .collapse-title .eyebrow{color:var(--brand-strong);} .collapse-hint{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);} .collapse-caret{flex:0 0 auto;color:var(--text-muted);font-size:13px;} .collapse-inline{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer; padding:0;color:var(--brand-strong);font-size:var(--text-sm);font-weight:var(--fw-semibold);} .collapse-inline .collapse-caret{color:var(--brand-strong);} /* ===== Content sections: Links (left) / everything else (right) =========== */ .content-col{display:flex;flex-direction:column;gap:18px;min-width:0;} .asset-desc-input{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md); padding:7px 10px;font-family:inherit;font-size:var(--text-xs);background:var(--white);color:var(--text-secondary);} .asset-desc-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} /* ===== Billing card (Account screen) ====================================== */ .billing-rows{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px;} .billing-row{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:10px 0;border-bottom:1px solid var(--border-subtle);} .billing-row:last-child{border-bottom:none;} .billing-k{color:var(--text-secondary);font-size:var(--text-sm);} .billing-v{color:var(--text-primary);font-weight:var(--fw-semibold);font-size:var(--text-sm);} .billing-note{color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;margin:10px 0 14px;} .billing-actions{display:flex;gap:10px;flex-wrap:wrap;} /* AI usage meter — customer sees a % of their monthly allowance, never raw model $ */ .usage-block{margin:14px 0 2px;} .usage-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;} .usage-label{color:var(--text-secondary);font-size:var(--text-sm);} .usage-pct{color:var(--brand-strong);font-weight:var(--fw-bold);font-size:var(--text-md,15px);} .usage-bar{height:10px;border-radius:999px;background:var(--brand-soft);overflow:hidden;} .usage-fill{height:100%;border-radius:999px;background:var(--brand);transition:width .4s ease;} .usage-caption{color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;margin:8px 0 0;} .usage-block.warn .usage-pct{color:var(--warning-600);} .usage-block.warn .usage-fill{background:var(--warning-600);} .usage-block.over .usage-pct{color:var(--danger-600);} .usage-block.over .usage-fill{background:var(--danger-600);} /* ===== Admin: billing access level control =============================== */ .acct-level-row{display:flex;align-items:center;gap:12px;padding:4px 2px;margin-top:12px;} .acct-level-select{border:1px solid var(--border-default);border-radius:var(--radius-md); padding:7px 10px;font-family:inherit;font-size:var(--text-sm);background:var(--white); color:var(--text-primary);cursor:pointer;} .acct-level-select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} .acct-level-select:disabled{opacity:.55;cursor:not-allowed;} /* Overview "Dive deeper" inline question box (2026-08-03) */ .ov-deep .ov-deep-q { font-weight: 650; font-size: var(--text-md, 15px); color: var(--text-primary); margin-bottom: 4px; } .ov-deep .ov-deep-sub { font-size: var(--text-xs); margin-bottom: 12px; } .ov-deep-answer { width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 9px 11px; font-family: inherit; font-size: var(--text-sm); color: var(--text-primary); background: var(--white); } .ov-deep-answer:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-soft); } .ov-deep-answer:disabled { opacity: .55; cursor: not-allowed; } .ov-deep-actions { margin-top: 10px; } /* Free-report spend-cap input (admin Signup & reports screen, 2026-08-03) */ .signup-budget-input-wrap{display:inline-flex;align-items:center;gap:4px;} .signup-budget-prefix{color:var(--text-secondary);font-size:var(--text-sm);font-weight:600;} .signup-budget-input{width:84px;cursor:text;} /* ===== Checkout wall (unpaid overlay) ===================================== */ .checkout-wall{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; padding:24px;background:var(--gradient-teal-light);} .checkout-wall[hidden]{display:none;} body.billing-walled{overflow:hidden;} .checkout-wall-card{background:var(--surface-card);border-radius:var(--radius-xl); box-shadow:var(--shadow-md);max-width:440px;width:100%;padding:40px 36px;text-align:center;} .checkout-wall-logo{margin-bottom:18px;} .checkout-wall-logo img{height:34px;} .checkout-wall-card h2{margin:0 0 12px;color:var(--text-primary);font-size:var(--text-2xl,1.5rem);} .checkout-wall-card p{margin:0 0 22px;color:var(--text-secondary);font-size:var(--text-base);line-height:1.55;} .checkout-wall-card .btn{width:100%;} .checkout-wall-fine{margin:18px 0 0;color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;} .checkout-wall-fine a{color:var(--text-link);} /* ── Connections: per-connector configuration + service-account grant panel ────────── Added 2026-08-15 with the Search Console connector. Shared classes rather than inline styles, per the standing styling rule. */ .pg-conn-config{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle); display:flex;flex-direction:column;gap:14px;} .pg-conn-config[hidden]{display:none;} .pg-conn-field{display:flex;flex-direction:column;gap:6px;} .pg-conn-label{color:var(--text-secondary);font-size:var(--text-sm);font-weight:600;} .pg-conn-hint{color:var(--text-muted);font-size:var(--text-xs,0.75rem);line-height:1.5;} .pg-conn-select,.pg-conn-input{width:100%;padding:9px 11px;border:1px solid var(--border-default); border-radius:var(--radius-md,8px);background:var(--surface-card,#fff);color:var(--text-primary); font-size:var(--text-sm);font-family:inherit;} .pg-conn-select:focus,.pg-conn-input:focus{outline:none;border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100);} .pg-conn-save{align-self:flex-start;} .pg-sa-panel{margin-top:20px;} .pg-sa-panel[hidden]{display:none;} .pg-sa-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;} .pg-sa-email{flex:1 1 320px;padding:9px 11px;border:1px solid var(--border-default); border-radius:var(--radius-md,8px);background:var(--surface-2);color:var(--text-primary); font-size:var(--text-sm);word-break:break-all;} .pg-sa-steps{margin:16px 0 0;padding-left:20px;color:var(--text-secondary); font-size:var(--text-sm);line-height:1.7;} .pg-sa-steps li+li{margin-top:4px;} .pg-sa-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;} /* ── Connect flow, 2026-08-19 ──────────────────────────────────────────────── The grant moved INSIDE the card, polling replaced the come-back-and-click-again step, and a connected card now shows a live sample instead of just a green badge. */ /* Inline grant panel — expands in place when Connect is clicked. */ .pg-conn-grant{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle);} .pg-conn-grant[hidden]{display:none;} .pg-conn-grant-lead{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;} .pg-conn-grant-steps{margin:14px 0 10px;padding-left:20px;color:var(--text-secondary); font-size:var(--text-sm);line-height:1.7;} .pg-conn-grant-steps li+li{margin-top:2px;} /* Persistent per-card status. A toast is wrong here: the customer is usually looking at the Google tab when the message that matters arrives. */ .pg-conn-notice{margin-top:14px;padding:11px 13px;border-radius:var(--radius-md,8px); font-size:var(--text-sm);line-height:1.55;} .pg-conn-notice[hidden]{display:none;} .pg-conn-notice.is-waiting{background:var(--surface-2);color:var(--text-secondary); border:1px solid var(--border-subtle);} .pg-conn-notice.is-error{background:var(--warning-100);color:var(--warning-600); border:1px solid var(--warning-200);} /* Connect-time payoff. */ .pg-conn-preview{margin-top:14px;padding:13px 15px;border-radius:var(--radius-md,8px); background:var(--teal-100);border:1px solid var(--teal-200); font-size:var(--text-sm);line-height:1.55;color:var(--teal-700);} .pg-conn-preview[hidden]{display:none;} .pg-conn-preview.is-loading,.pg-conn-preview.is-muted{background:var(--surface-2); border-color:var(--border-subtle);color:var(--text-muted);} .pg-conn-preview-lead{margin:0;} .pg-conn-preview-sub{margin:6px 0 0;font-size:var(--text-xs,0.75rem);opacity:.85;} /* Confirm-your-brand-terms prompt, shown once, right after connecting. */ .pg-brand-ask{padding:11px 13px;border-radius:var(--radius-md,8px); background:var(--surface-2);border:1px solid var(--border-subtle); color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;} .pg-brand-ask[hidden]{display:none;} /* ============================================================ NAV + the 2026-08-15 screens ------------------------------------------------------------ ONE fixed information architecture (2026-08-27). The Focus / Deep Dive density switch is gone — it hid five nav items, which made it a parallel nav, not a density. Depth is now an in-page tab row. Nothing appears or disappears under the customer. ============================================================ */ /* A display:flex rule beats the [hidden] attribute, which silently un-hides every element we toggle with .hidden = true (the stale banner, the moved notice, the context strip). Make the attribute win everywhere. */ [hidden]{display:none !important;} /* ---- nav: hero items + the SETUP group ---------------------- */ /* Sub-lines removed 2026-09-03. With no second line the NAME carries the item and the icon is the only other signal — which is why both were re-picked per item. `.nav-txt` exists so rail mode has something to hide; the label is a text node otherwise. */ .nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Connections and Settings are things you touch twice a year. A rule and a label say so, without ever making them unreachable — which is exactly what the old density switch did. */ .nav-setup{border-top:1px solid var(--border-subtle);margin-top:10px;padding-top:10px;} /* ============================================================ NEXT MOVES ============================================================ */ .moves-moved{ display:flex;align-items:center;gap:12px;padding:11px 16px;margin-bottom:20px; border-radius:var(--radius-md);background:var(--blue-100);border:1px solid var(--brand-200); color:var(--brand-800);font-size:var(--text-xs); } .moves-moved svg{flex:0 0 auto;} .moves-moved button{ margin-left:auto;border:0;background:none;color:var(--brand-800);font-weight:var(--fw-semibold); font-size:13px;cursor:pointer;text-decoration:underline;flex:0 0 auto;font-family:inherit; } /* Context strip: the report is EVIDENCE, not the headline. Quiet on purpose. */ .moves-ctx{ display:flex;align-items:center;gap:10px;padding:9px 14px;margin:18px 0 24px; border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card); font-size:13px;color:var(--text-muted);cursor:pointer;width:fit-content;font-family:inherit; transition:border-color .12s,box-shadow .12s; } .moves-ctx:hover{border-color:var(--teal-300);box-shadow:var(--shadow-sm);} .mv-ctx-score{display:inline-flex;align-items:center;gap:7px;font-weight:var(--fw-semibold);color:var(--text-primary);} .mv-ctx-score i{ width:22px;height:22px;border-radius:50%;display:inline-block;position:relative; background:conic-gradient(var(--info-600) calc(var(--ring)*1%),var(--ink-100) 0); } .mv-ctx-score.is-success i{background:conic-gradient(var(--success-600) calc(var(--ring)*1%),var(--ink-100) 0);} .mv-ctx-score.is-warning i{background:conic-gradient(var(--warning-600) calc(var(--ring)*1%),var(--ink-100) 0);} .mv-ctx-score.is-danger i{background:conic-gradient(var(--danger-600) calc(var(--ring)*1%),var(--ink-100) 0);} .mv-ctx-score i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface-card);} .mv-ctx-sep{color:var(--border-default);} .mv-ctx-go{color:var(--brand);font-weight:var(--fw-semibold);} .mv-hero{ background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:28px 30px;box-shadow:var(--shadow-md);position:relative;overflow:hidden; } .mv-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--gradient-teal);} .mv-eyebrow{ display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:var(--fw-bold); letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin-bottom:12px; } .mv-stage{color:var(--ink-400);font-weight:var(--fw-semibold);} .mv-title{font-size:var(--text-lg);line-height:1.28;letter-spacing:var(--tracking-tight);margin-bottom:10px;} .mv-why{color:var(--text-secondary);font-size:var(--text-base);line-height:1.55;margin:0 0 24px;max-width:62ch;} .mv-how,.mv-then{ font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.11em;text-transform:uppercase; color:var(--ink-400);margin-bottom:12px; } .mv-then{margin:34px 0 12px;} .mv-steps{list-style:none;margin:0 0 22px;padding:0;counter-reset:mvs;} .mv-steps>li{ counter-increment:mvs;display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--ink-100); } .mv-steps>li:first-child{border-top:0;padding-top:0;} .mv-steps>li::before{ content:counter(mvs);flex:0 0 auto;width:23px;height:23px;border-radius:50%; background:var(--seq-tint);color:var(--seq-ink);font-size:12px;font-weight:var(--fw-bold); display:inline-flex;align-items:center;justify-content:center;margin-top:1px; } .mv-step-body{flex:1;min-width:0;} .mv-step-text{font-size:var(--text-sm);line-height:1.5;color:var(--ink-700);} .mv-step-detail{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px;line-height:1.5;} .mv-step-none{display:block;font-size:12.5px;color:var(--ink-400);margin-top:5px;font-style:italic;} /* No-steps fallback. Some briefs will always lack a step-by-step — one carried forward from a run whose file was lost, one too thin to compress honestly. This is styled as a live card with two working doors, not as a greyed-out apology, because Next Moves is the landing screen and must never read as a dead end. */ .mv-nosteps{ font-size:var(--text-xs);color:var(--text-muted);margin-bottom:18px;line-height:1.55; display:flex;flex-direction:column;gap:5px; padding:13px 15px;border:1px solid var(--border-subtle);border-radius:var(--radius-md); background:var(--surface-sunken); } .mv-nosteps strong{color:var(--ink-700);font-size:var(--text-sm);font-weight:var(--fw-semibold);} .mv-nosteps-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;} .mv-row-panel .mv-nosteps{margin-bottom:12px;} /* Step → its asset. The whole point: you never have to open the full brief to act. */ .mv-asset{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px;padding:9px 11px; border-radius:var(--radius-md);background:var(--ink-50);border:1px solid var(--ink-100); } .mv-asset-name{ display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:var(--fw-semibold); color:var(--ink-700);min-width:0;flex:1; } .mv-asset-name svg{flex:0 0 auto;color:var(--blue-600);} .mv-btn{ border:1px solid var(--border-default);background:var(--surface-card);color:var(--ink-700); border-radius:var(--radius-sm);padding:5px 11px;font-size:12.5px;font-weight:var(--fw-semibold); cursor:pointer;white-space:nowrap;flex:0 0 auto;font-family:inherit; } .mv-btn:hover{background:var(--ink-50);border-color:var(--teal-300);color:var(--brand-strong);} .mv-btn.primary{background:var(--brand-soft);border-color:var(--teal-300);color:var(--brand-strong);} .mv-btn.primary:hover{background:var(--teal-50);} /* Copied-prompt panel. Copy first, then say where to paste — no URL pre-fill, because every AI tool truncates long query strings and these prompts run to thousands of chars. */ .mv-prompt{display:none;margin-top:9px;border-radius:var(--radius-md);overflow:hidden; border:1px solid var(--teal-300);background:var(--teal-50);} .mv-prompt.show{display:block;} .mv-prompt-head{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 14px 10px; font-size:13.5px;font-weight:var(--fw-semibold);color:var(--teal-800); } .mv-tick{ width:19px;height:19px;border-radius:50%;background:var(--success-600);color:#fff; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; } .mv-prompt-mode{ margin-left:auto;font-size:12px;color:var(--teal-700);background:none;border:0;cursor:pointer; text-decoration:underline;flex:0 0 auto;font-family:inherit; } .mv-prompt-tools{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px;} .mv-tool{ display:inline-flex;align-items:center;gap:6px;border:1px solid var(--teal-300); background:var(--surface-card);color:var(--teal-800);border-radius:var(--radius-pill); padding:7px 14px;font-size:12.5px;font-weight:var(--fw-semibold);text-decoration:none; } .mv-tool:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);} .mv-prompt-note{padding:0 14px 12px;margin:0;font-size:12.5px;color:var(--teal-800);opacity:.85;line-height:1.5;} .mv-prompt-toggle{ background:none;border:0;color:var(--teal-700);font-size:12.5px;font-weight:var(--fw-semibold); cursor:pointer;padding:0 14px 12px;text-decoration:underline;font-family:inherit; } .mv-prompt-text{ display:none;margin:0 14px 14px;padding:12px 13px;border-radius:var(--radius-sm); background:var(--surface-card);border:1px solid var(--teal-300); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6; color:var(--ink-700);white-space:pre-wrap;max-height:230px;overflow:auto; } .mv-prompt-text.show{display:block;} .mv-lift{ display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--radius-md); background:var(--success-100);color:var(--success-700);font-size:13.5px;margin-bottom:22px; } .mv-lift svg{flex:0 0 auto;} .mv-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .mv-foot-right{margin-left:auto;} .mv-done{ display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-subtle); background:var(--surface-card);color:var(--text-muted);border-radius:var(--radius-sm); padding:6px 12px;font-size:12.5px;font-weight:var(--fw-semibold);cursor:pointer;font-family:inherit; } .mv-done:hover{color:var(--success-600);border-color:var(--success-600);background:var(--success-100);} .mv-row{ background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden; } .mv-row-head{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;} .mv-row-head:hover{background:var(--ink-50);} .mv-row-n{ flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--ink-100);color:var(--text-muted); font-size:12px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center; } .mv-row-body{flex:1;min-width:0;} .mv-row-title{font-weight:var(--fw-semibold);font-size:var(--text-sm);} .mv-row-sub{font-size:13px;color:var(--text-muted);margin-top:2px;} .mv-row-how{ flex:0 0 auto;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--brand); display:flex;align-items:center;gap:4px; } .mv-row-how svg{transition:transform .18s;} .mv-row.open .mv-row-how svg{transform:rotate(180deg);} .mv-row-panel{display:none;padding:4px 18px 18px 56px;border-top:1px solid var(--ink-100);} .mv-row.open .mv-row-panel{display:block;} .mv-seeall{ display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--brand); font-size:13.5px;font-weight:var(--fw-semibold);background:none;border:0;cursor:pointer; padding:4px 0;font-family:inherit; } .mv-seeall:hover{color:var(--brand-strong);} .mv-empty{ background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:34px 30px;text-align:center; } .mv-empty h2{font-size:var(--text-md);margin-bottom:8px;} .mv-empty p{color:var(--text-muted);font-size:var(--text-xs);max-width:52ch;margin:0 auto 18px;line-height:1.6;} /* Ask Proga docked where the question actually comes up. */ .ask-dock{ margin-top:38px;padding:22px 24px;border-radius:var(--radius-lg); /* [DS] --gradient-dark-brand, not the spotlight: this band is Proga speaking in its own voice, so it should read as the most brand-owned surface on the page. The three dark bands now use three different DS gradients instead of one repeated everywhere. */ background:var(--gradient-dark-brand);color:var(--ink-100);box-shadow:var(--shadow-lg); } .ask-dock h3{color:#fff;font-size:var(--text-base);margin-bottom:4px;} .ask-dock-sub{font-size:13px;color:var(--ink-400);margin:0 0 16px;} .ask-dock-form{display:flex;gap:9px;margin-bottom:14px;} .ask-dock-form input{ flex:1;padding:11px 15px;border-radius:var(--radius-md);border:1px solid var(--marine-700); background:var(--marine-900);color:#fff;font-family:inherit;font-size:var(--text-sm); } .ask-dock-form input::placeholder{color:var(--ink-500);} .ask-dock-form input:focus{outline:none;border-color:var(--teal-500);} .ask-dock-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .ask-dock-l{ font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500); font-weight:var(--fw-semibold);margin-right:2px; } .ask-dock-chip{ border:1px solid var(--marine-700);background:var(--marine-900);color:var(--ink-300);border-radius:var(--radius-pill); padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s; } .ask-dock-chip:hover{border-color:var(--teal-500);color:#fff;} /* ============================================================ YOUR BUSINESS ============================================================ */ .yb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;} .yb-ring-wrap{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;} .ring-sm{ width:58px;height:58px;border-radius:50%;position:relative;flex:0 0 auto; background:conic-gradient(var(--brand) calc(var(--val)*1%),var(--ink-100) 0);transition:background .4s; } .ring-sm::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface-page);} .ring-sm span{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:var(--fw-bold);color:var(--brand-strong);z-index:1; } .yb-ring-cap{font-size:11px;color:var(--ink-400);margin-top:5px;} .yb-card{ background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:22px 24px;margin-bottom:14px;box-shadow:var(--shadow-sm); } .yb-card:first-of-type{margin-top:24px;} .yb-card.lead{box-shadow:var(--shadow-md);border-color:var(--teal-300);} .yb-num{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .yb-n{ width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong); font-size:11.5px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; } .yb-k{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400);} /* "Why this one" — the ranking has always been real; it was just never said out loud. */ .yb-why{ display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--radius-pill); background:var(--teal-50);border:1px solid var(--teal-100);color:var(--teal-800); font-size:11.5px;font-weight:var(--fw-semibold);margin-bottom:11px; } .yb-why-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;} .yb-card h3{font-size:var(--text-md);line-height:1.35;margin-bottom:7px;} .yb-sub{color:var(--text-muted);font-size:13.5px;margin:0 0 16px;line-height:1.55;max-width:60ch;} .yb-foot{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap;} .yb-queued{margin-left:auto;font-size:12.5px;color:var(--ink-400);} .yb-drop{ display:flex;align-items:center;gap:13px;width:100%;padding:15px 17px;border-radius:var(--radius-md); border:1.5px dashed var(--border-default);background:var(--ink-50);cursor:pointer;text-align:left;font-family:inherit; } .yb-drop:hover{border-color:var(--teal-300);background:var(--teal-50);} .yb-drop-i{ width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface-card);color:var(--blue-600); display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid var(--border-subtle); } .yb-drop-t{flex:1;min-width:0;} .yb-drop-t strong{display:block;font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text-primary);} .yb-drop-t span{display:block;font-size:12.5px;color:var(--ink-400);margin-top:1px;} .yb-last{font-size:12.5px;color:var(--ink-400);margin:10px 0 0;} .yb-link-row{display:flex;gap:8px;flex-wrap:wrap;} .yb-link-row input{flex:1;min-width:180px;} .yb-link-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;} .yb-tag{ display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;border-radius:var(--radius-pill); background:var(--ink-100);color:var(--ink-700);font-size:12.5px; } .yb-tag b{font-weight:var(--fw-semibold);color:var(--brand-strong);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;} .yb-tag button{border:0;background:none;color:var(--ink-400);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;font-family:inherit;} .yb-tag button:hover{color:var(--danger-600);} .yb-past{ display:block;margin:22px auto 0;background:none;border:0;color:var(--brand); font-size:13.5px;font-weight:var(--fw-semibold);cursor:pointer;padding:6px;font-family:inherit; } .yb-past:hover{color:var(--brand-strong);} .yb-done{ display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:var(--radius-md); background:var(--success-100);color:var(--success-700);font-size:13.5px;margin-bottom:14px; } .yb-done-i{ width:34px;height:34px;border-radius:50%;background:var(--success-600);color:#fff; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; } /* ============================================================ YOUR NUMBERS ============================================================ */ .ritual{ display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:var(--radius-lg); /* [DS] --gradient-dark is the deepest step, reserved for maximum-contrast statements. The ritual strip is a standing commitment, so it gets it; .takeaway keeps the spotlight as the default hero band. */ background:var(--gradient-dark);color:var(--ink-100);margin:24px 0 8px;flex-wrap:wrap; } .ritual-l{flex:1;min-width:220px;} .ritual-e{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400);margin-bottom:5px;} .ritual-t{color:#fff;font-size:var(--text-base);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-snug);} .ritual-s{font-size:12.5px;color:var(--ink-400);margin-top:4px;line-height:1.5;} .ritual-a{display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto;} .ritual-b{ border:1px solid var(--marine-700);background:var(--marine-900);color:var(--ink-200);border-radius:var(--radius-md); padding:9px 15px;font-size:13px;font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;font-family:inherit; } .ritual-b:hover{border-color:var(--teal-500);color:#fff;} .ritual-b.go{background:var(--gradient-teal);border-color:transparent;color:#fff;} .num-stale{ display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:var(--radius-md); background:var(--warning-100);border:1px solid var(--gold-200);color:var(--gold-700);font-size:13px;margin:16px 0; } .num-stale svg{flex:0 0 auto;} .num-row{ background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md); margin-bottom:10px;overflow:hidden; } .num-main{display:flex;align-items:center;gap:16px;padding:15px 18px;flex-wrap:wrap;} .num-stage{flex:0 0 168px;min-width:130px;} .num-stage-l{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);} .num-kpi{font-size:var(--text-sm);font-weight:var(--fw-semibold);margin-top:2px;line-height:1.3;} /* Locked during the monthly check-in: entering a number and choosing WHAT to track are different jobs, and a stray click shouldn't be able to redefine a trend. */ .num-lock{ display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:2px 8px;border-radius:var(--radius-pill); background:var(--ink-100);color:var(--text-muted);font-size:10.5px;font-weight:var(--fw-semibold); border:0;cursor:pointer;white-space:nowrap;font-family:inherit; } .num-lock:hover{background:var(--brand-soft);color:var(--brand-strong);} .num-input{display:flex;align-items:center;gap:7px;flex:0 0 auto;} .num-input input{ width:104px;padding:9px 12px;border-radius:var(--radius-md);border:1px solid var(--border-default); font-family:inherit;font-size:1rem;font-weight:var(--fw-semibold);color:var(--text-primary);text-align:right; } .num-input input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-soft);} .num-unit{font-size:12.5px;color:var(--ink-400);min-width:52px;} .num-meta{flex:1;min-width:150px;font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .num-spark{display:flex;align-items:flex-end;gap:3px;height:26px;flex:0 0 auto;} .num-spark i{width:7px;background:var(--teal-300);border-radius:2px;display:block;} .num-spark i:last-child{background:var(--brand);} /* A percentage KPI moves in POINTS, never percent-of-a-percent — see numDelta(). */ .num-delta{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:var(--fw-semibold);} .num-delta.is-up{background:var(--success-100);color:var(--success-800);} .num-delta.is-down{background:var(--danger-100);color:var(--coral-700);} .num-delta.is-flat{background:var(--ink-100);color:var(--text-muted);} .num-target{font-size:12px;color:var(--ink-400);white-space:nowrap;} .num-target b{color:var(--text-secondary);font-weight:var(--fw-semibold);} .num-warn{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill); background:var(--warning-100);color:var(--gold-700);font-size:11.5px;font-weight:var(--fw-semibold); } .num-cfg{display:none;padding:16px 18px;border-top:1px solid var(--ink-100);background:var(--ink-50);} .num-cfg.show{display:block;} .num-cfg-warn{ display:flex;gap:10px;padding:11px 13px;border-radius:var(--radius-md);background:var(--warning-100); border:1px solid var(--gold-200);color:var(--gold-700);font-size:12.5px;line-height:1.5;margin-bottom:14px; } .num-cfg-warn svg{flex:0 0 auto;} .num-cfg-grid{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;} .num-cfg-f{display:flex;flex-direction:column;gap:5px;} .num-cfg-f label{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);} .num-cfg-f.wide{flex:1;min-width:230px;} .num-cfg-f.wide select{width:100%;} .num-cfg-f.narrow input{width:96px;} .num-cfg-actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;} .num-cfg-note{font-size:12px;margin-left:auto;} .num-how-toggle{ background:none;border:0;color:var(--brand);font-size:12.5px;font-weight:var(--fw-semibold); cursor:pointer;padding:0 18px 13px;text-align:left;font-family:inherit; } .num-how-toggle:hover{color:var(--brand-strong);} .num-how{display:none;padding:0 18px 16px;border-top:1px solid var(--ink-100);} .num-how.show{display:block;} .num-how-l{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);margin:13px 0 6px;} .num-how-note{margin:0 0 8px;font-size:13px;color:var(--ink-700);line-height:1.55;} /* Three-rung ladder: type it / upload the NAMED report / connect the tool. */ .num-ladder{margin-top:6px;} .num-rung{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--ink-100);} .num-rung:first-child{border-top:0;} .num-rn{ flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ink-100);color:var(--text-muted); font-size:11px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;margin-top:1px; } .num-rung.active .num-rn{background:var(--brand-soft);color:var(--brand-strong);} .num-rung.best .num-rn{background:var(--success-100);color:var(--success-600);} .num-rb{flex:1;min-width:0;} .num-rh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .num-rt{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text-primary);} .num-rm{font-size:11.5px;color:var(--ink-400);} .num-rd{font-size:12.5px;color:var(--text-secondary);margin-top:4px;line-height:1.55;} .num-rd code,.num-rsteps code{ background:var(--surface-card);border:1px solid var(--border-subtle);padding:2px 7px; border-radius:4px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .num-rsteps{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--text-secondary);line-height:1.7;} .num-ra{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;} .num-pro{ display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-pill); background:var(--blue-100);color:var(--blue-600);font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.04em; } .num-src-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:9px;flex-wrap:wrap;} /* Proof loop: numbers joined to moves marked done. Correlation, stated as such. */ .proof{margin-top:26px;padding:20px 22px;border-radius:var(--radius-lg);background:var(--success-100);border:1px solid var(--success-200);} .proof h3{font-size:var(--text-base);color:var(--success-800);margin-bottom:12px;} .proof-row{ display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--success-200); font-size:13.5px;color:var(--success-700);flex-wrap:wrap; } .proof-row:first-of-type{border-top:0;} .proof-m{flex:1;min-width:200px;} .proof-n{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;} .proof-note{margin:12px 0 0;font-size:11.5px;color:var(--ink-600);} .num-history{margin-top:26px;} .num-hist-h{font-size:var(--text-base);margin-bottom:4px;} .num-hist-sub{font-size:13px;margin:0 0 6px;} .num-hist .num-r{text-align:right;font-variant-numeric:tabular-nums;} .num-foot{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap;} .num-foot-note{font-size:12.5px;margin-left:auto;} /* ============================================================ TAB SHELL — depth inside a screen ------------------------------------------------------------ Generalised from the Library tabs (2026-08-19). A tab row is the replacement for the old hidden .nav-deep items: it says out loud that there is more here, which a hidden nav item can never do. Used by Library, Your Business and Settings. ============================================================ */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle);margin:22px 0 0;} .tabs .tab{ border:0;background:none;padding:11px 16px;font-size:var(--text-sm);font-weight:var(--fw-medium); color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; font-family:inherit;white-space:nowrap;flex:0 0 auto; } .tabs .tab:hover{color:var(--text-primary);} .tabs .tab.active{color:var(--brand-strong);font-weight:var(--fw-semibold);border-bottom-color:var(--brand);} .tab-panel{display:none;padding-top:18px;} .tab-panel.active{display:block;} .lib-cnt{font-size:11.5px;color:var(--ink-400);margin-left:5px;} /* Narrow screens: the row SCROLLS, it never wraps or collapses. Wrapping hides the fact that the tabs are one row; a "more" menu hides the tabs themselves — and hiding depth behind a control you have to know about is the exact mistake this batch removes. */ @media (max-width:760px){ .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} .tabs .tab{padding:11px 13px;} } /* A panel's own one-line lede + optional right-aligned action. The screen H1 names the place; the lede names what this tab is for. */ .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;} .panel-head .panel-lede{margin:0;} .panel-head .btn{flex:0 0 auto;} .panel-lede{margin:0 0 20px;color:var(--text-muted);font-size:var(--text-sm);max-width:62ch;} .sec-gap{margin-top:30px;} .sec-gap-sm{margin-top:16px;} .file-filters{margin:0 0 14px;} .head-icon-warn{background:var(--warning-100);color:var(--warning-600);} /* ============================================================ ANSWERS — search first ------------------------------------------------------------ Eight stacked sections became one search box and a short list of collapsed groups. Typing, or any chip, FLATTENS the whole thing into a plain list of hits — you never open a group to find an answer. Same rule that fixed asset findability. ============================================================ */ .ans-bar{margin:0 0 12px;} .ans-chips{margin:0 0 10px;} .ans-count{margin:0 0 16px;font-size:var(--text-xs);} .ans-group{border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:10px;background:var(--white);} .ans-group.is-open{box-shadow:var(--shadow-sm);} .ans-group-head{ display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px; border:0;background:none;cursor:pointer;font-family:inherit;text-align:left; } .ans-group-name{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);flex:1 1 auto;min-width:0;} .ans-group-count{font-size:12px;color:var(--text-muted);white-space:nowrap;} .ans-mini{width:64px;flex:0 0 auto;} .ans-caret{color:var(--ink-400);font-size:12px;width:12px;flex:0 0 auto;} .ans-group-body{padding:0 16px 6px;} .ans-row{padding:12px 0;border-top:1px solid var(--border-subtle);} .ans-group-body .ans-row:first-child{border-top:0;} .ans-row-head{display:flex;align-items:baseline;gap:10px;} .ans-q{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-primary);flex:1 1 auto;min-width:0;} .ans-row.is-empty .ans-q{color:var(--text-muted);} .ans-tag{font-size:11px;color:var(--ink-400);white-space:nowrap;} .ans-a{margin-top:5px;font-size:var(--text-sm);color:var(--text-secondary);white-space:pre-wrap;} .ans-row.is-empty .ans-a{color:var(--ink-400);font-style:italic;} .ans-row.is-edit{padding:14px 0;} .ans-hint{margin:4px 0 8px;font-size:var(--text-xs);color:var(--text-muted);} .ans-a mark,.ans-q mark{background:var(--warning-100);color:inherit;border-radius:2px;padding:0 1px;} /* Flat view — one hit per row, each labelled with the group it came from, so a result still tells you where it lives without opening anything. */ .ans-flat{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--white);padding:0 16px;} .ans-hit{border-top:1px solid var(--border-subtle);} .ans-hit:first-child{border-top:0;} .ans-hit-group{display:block;padding-top:12px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);} .ans-hit .ans-row{border-top:0;padding-top:4px;} .ans-none{padding:22px 2px;} @media(max-width:900px){ .mv-hero{padding:22px 20px;} .mv-title{font-size:var(--text-md);} .mv-why{font-size:var(--text-sm);} .mv-row-panel{padding-left:20px;} .ask-dock{padding:20px 18px;} .ask-dock-form{flex-direction:column;} .num-stage{flex:1 1 100%;} .num-meta{flex:1 1 100%;} .num-foot-note,.num-cfg-note{margin-left:0;} .yb-head{flex-direction:column-reverse;align-items:flex-start;} } /* ===== Brand kit — the Brand tab on Your Business ========================== Set-once visual identity for the customer's OWN outputs. Promoted from a collapsed accordion at the bottom of Your Business to its own tab (2026-08-27): a set-once thing belongs on a surface, not behind a caret. */ /* Summary strip in the panel head: two swatches + the font names, or a nudge when unset. */ .brand-sum{ display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0; font-size:12.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .brand-sum-dot{ width:15px;height:15px;border-radius:50%;flex:0 0 auto; border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); } .brand-sum-unset{color:var(--ink-400);font-style:italic;} .brand-detect{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 14px;margin:4px 0 18px;border-radius:var(--radius-md); background:var(--ink-50);border:1px solid var(--border-subtle); } .brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;} .brand-field{min-width:0;} .brand-field-wide{grid-column:1 / -1;} .brand-logo-row{display:flex;align-items:center;gap:12px;} .brand-logo-row .dir-input{flex:1 1 auto;} .brand-logo-prev{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:76px;height:38px;padding:4px 6px;border-radius:var(--radius-sm); background:#fff;border:1px solid var(--border-subtle); } .brand-logo-prev img{max-width:100%;max-height:100%;object-fit:contain;} .brand-color{display:flex;align-items:center;gap:9px;} .brand-color .dir-input{flex:1 1 auto;font-variant-ligatures:none;} /* Native colour input, restyled to read as a swatch rather than an OS control. */ .brand-swatch-in{ flex:0 0 auto;width:38px;height:38px;padding:0;cursor:pointer; border:1px solid var(--border-default);border-radius:var(--radius-sm);background:none; } .brand-swatch-in::-webkit-color-swatch-wrapper{padding:3px;} .brand-swatch-in::-webkit-color-swatch{border:none;border-radius:4px;} .brand-swatch-in::-moz-color-swatch{border:none;border-radius:4px;} @media (max-width:720px){ .brand-grid{grid-template-columns:1fr;} .brand-sum{display:none;} /* the fields themselves are the answer here */ } /* ---- carry-forward + archive (2026-08-27) --------------------------------- A brief that survives several reports has to arrive looking like current advice, not like a backlog item nagging from the pile. `.lb-why-now` carries the freshly-written reason it still matters; `.lb-stale` is the engine SUGGESTING an archive, never applying one. */ .lb-why-now{font-size:12.5px;color:var(--teal-700);margin-top:6px;padding-left:9px;border-left:2px solid var(--teal-100)} .lb-why-now b{font-weight:700} .lb-stale{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary);margin-top:6px;padding:7px 10px;background:var(--surface-sunken);border-radius:8px} .lb-carried{font-size:11.5px;color:var(--text-secondary);margin-top:4px} .lb-foot-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .list-row.is-archived{opacity:.72} .list-row.is-archived .lb-title{text-decoration:line-through;text-decoration-color:var(--ink-300)} .field-opt{font-weight:400;color:var(--text-secondary)} /* ============================================================ CAMPAIGNS 2026-08-31 the box · 2026-09-03 (am) its own screen · 2026-09-03 (pm) build/list split, kind tiles, and the page. ============================================================ */ /* --- the on-ramp box, still docked under Next Moves --------- Quiet by design — it must not compete with the moves above it, which are the actual diagnosis. */ .cmp-box{ border:1px dashed var(--border-default);border-radius:var(--radius-lg); background:var(--surface-card);padding:18px 20px;margin-top:22px; } .cmp-box h3{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmp-box-sub{font-size:var(--text-xs);color:var(--text-muted);margin:3px 0 0;} .cmp-box-form{display:flex;gap:9px;margin-top:12px;} .cmp-box-form input{ flex:1;min-width:0;border:1px solid var(--border-default);border-radius:var(--radius-pill); padding:10px 15px;font-family:inherit;font-size:var(--text-sm);color:var(--text-primary);background:var(--white); } .cmp-box-form input::placeholder{color:var(--text-muted);} .cmp-box-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);} /* --- BUILD, on the Campaigns screen ------------------------ Solid and first, where the on-ramp under Next Moves is dashed and last: the same control doing a different job on a different screen should not look identical in both. */ .cmp-build{ border:1px solid var(--border-default);border-radius:var(--radius-lg); background:var(--surface-card);box-shadow:var(--shadow-sm); padding:22px 24px;margin-bottom:26px; } .cmp-build-head h2{font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmp-build-head p{font-size:var(--text-xs);color:var(--text-muted);margin:4px 0 0;max-width:62ch;} .cmp-kinds{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px; } .cmp-kind{ display:flex;align-items:flex-start;gap:10px;text-align:left;cursor:pointer; padding:13px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md); background:var(--white);font-family:inherit; transition:border-color .12s,box-shadow .12s,transform .12s; } .cmp-kind:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px);} .cmp-kind:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;} .cmp-kind-i{flex:0 0 auto;display:inline-flex;color:var(--brand-strong);margin-top:1px;} .cmp-kind-t{min-width:0;display:block;} .cmp-kind-t b{display:block;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmp-kind-t span{display:block;font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.45;} /* "or just say it" — a real divider, because the free-text line is an ALTERNATIVE to the tiles above it, not a further step after them. A plain gap would read as the latter. */ .cmp-or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;} .cmp-or::before,.cmp-or::after{content:"";flex:1;height:1px;background:var(--border-subtle);} .cmp-or span{ font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--text-muted);font-weight:var(--fw-semibold); } .cmp-build .cmp-box-form{margin-top:0;} /* --- THE LIST --------------------------------------------- */ .cmp-listbox{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg); background:var(--surface-card);padding:18px 20px 8px; } .cmp-listbox-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;} .cmp-listbox-head h2{font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmp-count{font-size:var(--text-xs);color:var(--text-muted);} .cmp-listbox .filter-rows{margin-bottom:12px;} .cmp-listbox .filter-rows[hidden]{display:none;} .cmp-none{ padding:22px 4px 26px;text-align:center;font-size:var(--text-xs);color:var(--text-muted); } .cmp-none .link-btn{font-size:var(--text-xs);} .cmp-item{ display:flex;align-items:center;gap:12px;padding:11px 13px; border:1px solid var(--border-subtle);border-radius:var(--radius-md); background:var(--surface-sunken);margin-bottom:8px; } .cmp-item-t{flex:1;min-width:0;} .cmp-item-t b{display:block;font-size:var(--text-xs);font-weight:var(--fw-semibold);} .cmp-item-t span{font-size:11px;color:var(--text-muted);} /* Pending reads as in-progress, not as a result. */ .cmp-item-pending{background:var(--blue-100);border-color:var(--brand-200);} .cmp-item-pending .cmp-item-t b{color:var(--brand-800);} .cmp-item-stale{background:var(--warning-100);border-color:var(--gold-200);} .cmp-item-stale .cmp-item-t b{color:var(--gold-700);} /* The whole row is the target, not just the button — a 90px button inside a 600px row is a needlessly small hit area for the control that proves the feature worked. */ .cmp-item-click{cursor:pointer;transition:border-color .12s,box-shadow .12s;} .cmp-item-click:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);} .cmp-item-click:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;} /* The kind, as a quiet tag rather than a badge — a badge here would compete with the "From your report" / "You asked for this" badge, which carries more meaning. */ .cmp-kindtag{ flex:0 0 auto;font-size:10.5px;font-weight:var(--fw-semibold); padding:3px 9px;border-radius:var(--radius-pill); background:var(--ink-50);color:var(--text-secondary);border:1px solid var(--border-subtle); white-space:nowrap; } /* --- the empty state -------------------------------------- Shipped unstyled on 2026-09-03 (am) — the markup existed, the rules never did, so the one screen whose whole job is to not be a dead end rendered as unstyled body text. Also serves the campaign page's "that id isn't loaded" state. */ .cmp-empty{ background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:34px 30px;text-align:center; } .cmp-empty[hidden]{display:none;} .cmp-empty-i{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;margin-bottom:12px; background:var(--brand-soft);color:var(--brand-strong); } .cmp-empty h3{font-size:var(--text-md);font-weight:var(--fw-semibold);color:var(--text-primary);margin-bottom:8px;} .cmp-empty p{color:var(--text-muted);font-size:var(--text-xs);max-width:52ch;margin:0 auto 18px;line-height:1.6;} /* --- the build modal (step 2: hone it) --------------------- */ .cmp-modal{max-width:610px;} .cmp-body{padding:4px 22px 18px;} /* The chosen kind, restated. Without it the modal is a second step that has forgotten the first, which is how a two-step flow starts feeling like a form. */ .cmp-kindbar{ display:flex;align-items:flex-start;gap:10px;margin:8px 0 2px; padding:11px 13px;border-radius:var(--radius-md); background:var(--brand-soft);border:1px solid var(--brand-200); } .cmp-kindbar-i{flex:0 0 auto;display:inline-flex;color:var(--brand-strong);margin-top:1px;} .cmp-kindbar-t{flex:1;min-width:0;} .cmp-kindbar-t b{display:block;font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--brand-800);} .cmp-kindbar-t span{display:block;font-size:11px;color:var(--ink-700);margin-top:2px;} .cmp-kindbar .link-btn{flex:0 0 auto;font-size:var(--text-xs);} .cmp-intent2{ width:100%;box-sizing:border-box;border:1px solid var(--border-default);border-radius:var(--radius-md); padding:10px 13px;font-family:inherit;font-size:var(--text-sm);color:var(--text-primary);background:var(--white); } .cmp-intent2::placeholder{color:var(--text-muted);} .cmp-intent2:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);} /* The match block is the point of the modal: it ties the customer's words back to their own report. Never render it empty — hidden is better than a blank panel. */ .cmp-match{ background:var(--teal-50);border:1px solid var(--teal-300);border-radius:var(--radius-md); padding:13px 15px;margin:12px 0 4px; } .cmp-match .cmp-match-lbl{ font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--brand-strong);font-weight:var(--fw-semibold); } .cmp-match p{font-size:var(--text-xs);color:var(--ink-700);margin:6px 0 0;} .cmp-match b{color:var(--text-primary);} .cmp-lbl{ font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted); font-weight:var(--fw-semibold);margin:16px 0 7px; } .cmp-lbl[hidden]{display:none;} .cmp-lbl .cmp-opt{text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);} .cmp-hint{font-size:11px;color:var(--text-muted);margin:8px 0 0;} .cmp-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;} .cmp-note{font-size:11.5px;color:var(--text-muted);} /* --- the strip inside a move card -------------------------- A pointer, not the plan. This used to render the whole campaign inside the move card, which put a second full document above the move's own impact line. */ .mv-cmpstrip{ display:flex;align-items:center;gap:14px;margin:18px 0 4px; padding:13px 16px;border-radius:0 var(--radius-md) var(--radius-md) 0; border:1px solid var(--border-subtle);border-left:3px solid var(--brand); background:var(--surface-sunken); } .mv-cmpstrip-t{flex:1;min-width:0;} .mv-cmpstrip-t b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);margin-top:3px;} .mv-cmpstrip-t span{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;} .cmp-eyebrow{ font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--brand-strong);font-weight:var(--fw-semibold); } /* ============================================================ ONE CAMPAIGN, AS A PAGE Was a 70vh modal until 2026-09-03. Four questions, four sections: what are we doing and why · what shape is it over time · what do I actually do · how do I produce this piece. ============================================================ */ .cmpp-back{ display:inline-flex;align-items:center;gap:6px;margin-bottom:16px; background:none;border:none;cursor:pointer;padding:0;font-family:inherit; font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted); } .cmpp-back::before{content:"\2190";font-size:14px;line-height:1;} .cmpp-back:hover{color:var(--brand-strong);} .cmpp-head{margin-bottom:20px;} .cmpp-head h1{font-size:var(--text-xl);font-weight:800;color:var(--brand-700);margin-top:5px;line-height:1.25;} .cmpp-goal{font-size:var(--text-base);color:var(--text-secondary);margin:9px 0 0;max-width:70ch;line-height:1.55;} .cmpp-badges{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;} .cmpp-meta{font-size:11.5px;color:var(--text-muted);} .cmpp-intent{font-size:11.5px;color:var(--text-muted);margin:10px 0 0;font-style:italic;} .cmpp-tension{ padding:13px 16px;border-radius:var(--radius-md);margin-bottom:20px; background:var(--warning-100);border:1px solid var(--gold-200); } .cmpp-tension b{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-700);} .cmpp-tension p{font-size:var(--text-xs);color:var(--ink-700);margin:6px 0 0;} /* Strategy and shape sit side by side: they are the two halves of one answer ("why this, and in what order"), and stacking them puts a scroll between them. */ .cmpp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px;} /* With no phases there is no second card — the strategy takes the full width rather than sitting beside an empty panel. */ .cmpp-grid.is-single{grid-template-columns:1fr;} .cmpp-nophase{ margin:10px 0 0;font-size:var(--text-xs);color:var(--text-muted);font-style:italic; } .cmpp-card{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg); background:var(--surface-card);padding:18px 20px; } .cmpp-lbl{ font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--brand-strong);font-weight:var(--fw-semibold);margin-bottom:10px; } .cmpp-strategy{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.65;margin:0;} .cmpp-thin{font-size:var(--text-xs);color:var(--text-muted);margin:0;} .cmpp-kv{margin-top:12px;padding-top:11px;border-top:1px solid var(--border-subtle);} .cmpp-kv b{ display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-muted);font-weight:var(--fw-semibold); } .cmpp-kv span{display:block;font-size:11.5px;color:var(--text-secondary);margin-top:4px;line-height:1.55;} .cmpp-phases{list-style:none;margin:0;padding:0;} .cmpp-phases li{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--border-subtle);} .cmpp-phases li:first-child{border-top:0;padding-top:0;} .cmpp-ph-n{ flex:0 0 auto;width:21px;height:21px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--seq-tint);color:var(--seq-ink); font-size:11px;font-weight:var(--fw-semibold); } .cmpp-ph-b{min-width:0;} .cmpp-ph-b b{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmpp-ph-b em{font-style:normal;font-size:11px;color:var(--text-muted);margin-left:6px;} .cmpp-ph-b p{font-size:11.5px;color:var(--text-secondary);margin:3px 0 0;line-height:1.5;} .cmpp-prereq ul{margin:0;padding-left:18px;} .cmpp-prereq li{font-size:11.5px;color:var(--text-secondary);margin:4px 0;line-height:1.5;} /* --- the work ---------------------------------------------- */ .cmpp-work{margin-top:26px;} .cmpp-work-head{margin-bottom:14px;} .cmpp-sub{font-size:var(--text-xs);color:var(--text-muted);margin:0;max-width:72ch;} .cmpp-asset{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg); background:var(--surface-card);padding:16px 18px;margin-bottom:12px; } .cmpp-asset-head{display:flex;align-items:flex-start;gap:11px;} .cmpp-asset-n{ flex:0 0 auto;width:23px;height:23px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--seq-tint);color:var(--seq-ink); font-size:11px;font-weight:var(--fw-semibold); } .cmpp-asset-t{flex:1;min-width:0;} .cmpp-asset-t b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);} .cmpp-asset-t span{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;} .cmpp-why{font-size:var(--text-xs);color:var(--text-secondary);margin:11px 0 0;line-height:1.6;} .cmpp-how{ margin-top:12px;padding:12px 14px;border-radius:var(--radius-md); background:var(--surface-sunken);border:1px solid var(--border-subtle); } .cmpp-how-lbl{ font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--text-muted);font-weight:var(--fw-semibold);margin-bottom:6px; } .cmpp-how ol{margin:0;padding-left:18px;} .cmpp-how li{font-size:11.5px;color:var(--text-secondary);margin:5px 0;line-height:1.55;} .cmpp-first{font-size:11.5px;color:var(--text-secondary);margin-top:10px;} .cmpp-first b{ color:var(--brand-strong);font-weight:var(--fw-semibold); font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-right:6px; } .cmpp-asset-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .cmpp-declined{margin-top:16px;} .cmpp-declined p{font-size:11.5px;color:var(--text-secondary);margin:5px 0;line-height:1.55;} .cmpp-declined p b{color:var(--text-primary);} .cmpp-declined .cmpp-thin{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-subtle);} @media (max-width:900px){ .cmp-kinds{grid-template-columns:repeat(2,minmax(0,1fr));} .cmpp-grid{grid-template-columns:1fr;} } @media (max-width:600px){ .cmp-kinds{grid-template-columns:1fr;} .cmp-box-form{flex-direction:column;} .cmp-foot{flex-direction:column;align-items:stretch;} .mv-cmpstrip{flex-direction:column;align-items:stretch;gap:10px;} .cmp-item{flex-wrap:wrap;} } /* Brand examples — flagged uploads that show what the brand looks like. */ .brand-detect-i{flex:0 0 auto;display:inline-flex;color:var(--brand-strong);} .brand-rescan{flex:0 0 auto;margin-left:auto;font-size:12.5px;} .brand-ex{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;} .brand-ex-chip{ display:inline-flex;align-items:center;gap:7px;max-width:100%; padding:5px 7px 5px 11px;border-radius:var(--radius-pill); background:var(--teal-50);border:1px solid var(--teal-100);color:var(--teal-800); font-size:12.5px;font-weight:var(--fw-semibold); } .brand-ex-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;} .brand-ex-x{ border:none;background:none;cursor:pointer;padding:0 2px;line-height:1; color:inherit;opacity:.55;font-size:15px;font-family:inherit; } .brand-ex-x:hover{opacity:1;} .brand-ex-add{flex:0 0 auto;} /* The flag itself, on every upload card in the Library. */ .asset-brandex{ margin-top:8px;display:inline-flex;align-items:center;gap:6px;cursor:pointer; padding:4px 10px;border-radius:var(--radius-pill);font-family:inherit;font-size:11.5px; font-weight:var(--fw-semibold);background:none;color:var(--text-muted); border:1px solid var(--border-default); } .asset-brandex:hover{border-color:var(--teal-300);color:var(--teal-800);} .asset-brandex.on{background:var(--teal-50);border-color:var(--teal-100);color:var(--teal-800);}