/* =========================================================================
   EDGELEAD — SHARED STYLESHEET
   -------------------------------------------------------------------------
   Every rule below was previously copy-pasted into three or more pages. It
   now lives here once.

   Load order matters and is already handled: each page links this file
   BEFORE its own <style> block, so a page can still override anything here
   without touching this file. Page-specific rules stayed on their page.

   If you change a colour, a button or a table, change it here and all nine
   pages follow. That is the whole point.
   ========================================================================= */

:root {
    /* A sentinel header.js probes for, to tell "app.css is missing" apart from
       "app.css is here". It must be a value no media query ever changes —
       the previous probe read .el-header's position, which the old mobile
       rule flips to static, so on a phone it concluded the stylesheet was
       absent and injected a second copy of the whole file. */
    --el-stylesheet: 1;

    /* ---- surface ramp ---------------------------------------------------
       Four real steps rather than one translucent grey reused everywhere.
       Depth is what stops a dark interface reading as flat, and it only
       works if the steps are actually different. */
    /* Taken from the EdgeLead site redesign: true black with two neutral
       panel steps, white hairlines, blue for action and lime for the one
       thing on a screen that should be noticed. The app and the company
       look like the same company. */
    --bg-color: #000000;
    --surface-1: #0f0f10;
    --surface-2: #181818;
    --card-bg: rgba(15, 15, 16, 0.92);
    --card-border: rgba(255, 255, 255, 0.12);
    /* A one-pixel highlight along the top edge of a raised surface. */
    --card-edge: rgba(255, 255, 255, 0.10);

    /* ---- accent ---------------------------------------------------------
       Blue carries action (#186aff, white text on it, 4.9:1). Lime is the
       highlight: a live figure, a "new", the active rail item's mark. The old
       jade names stay so every page that reads them keeps working; they now
       hold the lime. */
    --accent-glow: linear-gradient(180deg, #2f7bff 0%, #186aff 100%);
    --accent-solid: #186aff;
    --accent-dim: rgba(24, 106, 255, 0.16);
    --on-accent: #ffffff;
    --jade: #b5ff3b;
    --jade-deep: #186aff;
    --lime: #b5ff3b;
    --purple: #5b3fd1;

    /* The site's two faces: Space Grotesk, uppercase, for anything that
       names a screen or a section; Inter for everything you read. */
    --font-display: 'Space Grotesk', 'Inter', 'Anek Bangla', system-ui, sans-serif;
    --font-body: 'Inter', 'Anek Bangla', system-ui, sans-serif;

    --text-primary: #ffffff;
    --text-secondary: #d4d4d8;
    --text-muted: #a3a3a8;

    --input-bg: #0a0a0b;
    --terminal-bg: #050505;
    --success: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --enrich-glow: linear-gradient(180deg, #c8ff6b 0%, #8fd61f 100%);

    /* ---- elevation ------------------------------------------------------
       Long, soft, low-opacity. A dark theme shows a harsh shadow as a
       grey smear, so the shadow does the lifting and the edge highlight
       does the definition. */
    --lift-1: 0 1px 2px rgba(0,0,0,.28);
    --lift-2: 0 4px 16px rgba(0,0,0,.30);
    --lift-3: 0 18px 44px rgba(0,0,0,.42);

    /* ---- rhythm ---------------------------------------------------------
       One scale, so spacing is chosen rather than guessed. */
    --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
    --s-1: 6px; --s-2: 10px; --s-3: 16px; --s-4: 24px; --s-5: 34px; --s-6: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
body { background: var(--bg-color); color: var(--text-primary); padding: 110px 20px 60px; max-width: 1500px;
        margin: 0 auto; min-height: 100vh;
        /* Two light sources rather than one centred glow. A single symmetric
           gradient reads as a default; offsetting them and letting one fall
           off the edge makes the page feel lit rather than tinted. */
        background-image:
            radial-gradient(900px 560px at 18% -8%, rgba(24,106,255,0.16) 0%, transparent 62%),
            radial-gradient(760px 480px at 88% 2%, rgba(184,145,63,0.09) 0%, transparent 60%);
        background-attachment: fixed; }
.segment-bar { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 1px solid var(--card-border); padding-bottom: 10px; flex-wrap: wrap; }
.segment-btn { background: transparent; border: none; color: var(--text-muted); padding: 12px 22px; font-weight: 700; font-size: 0.88rem; cursor: pointer; border-radius: 8px; }
.segment-btn.active { background: var(--accent-glow); color: var(--on-accent); }
.card { position: relative; background: var(--card-bg); backdrop-filter: blur(16px);
        padding: var(--s-5); border-radius: var(--r-lg); margin-bottom: 25px;
        border: 1px solid var(--card-border); box-shadow: var(--lift-2); }
/* The lit top edge. One pixel, and it is most of the difference between a
   surface that looks raised and a rectangle with a border. */
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        background: linear-gradient(90deg, transparent, var(--card-edge) 22%, var(--card-edge) 78%, transparent);
        pointer-events: none; }
.card-title { font-size: 1.32rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px;
        letter-spacing: -0.021em; line-height: 1.25; }
.card-subtitle { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 22px; line-height: 1.6; }
h3.block-title { color: var(--text-primary); font-size: 1.05rem; font-weight: 800; margin: 30px 0 12px; }
label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--accent-solid); margin: 22px 0 8px; }
input:focus, select:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(24,106,255,0.25); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 600; margin-top: 14px; cursor: pointer; }
.check input { width: auto; }
.btn-primary { width: 100%; padding: 16px; background: var(--accent-glow); color: var(--on-accent); border: none; border-radius: 10px; font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: 26px; }
.btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: rgba(255,255,255,0.05); color: var(--text-primary); border: 1px solid var(--card-border); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.83rem; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.83rem; }
.hidden { display: none !important; }
/* The hidden attribute must win over any class that sets display, or a
   panel marked hidden shows anyway (phase 33: the inbox's onboarding form). */
[hidden] { display: none !important; }
.estimate { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 24px; padding: 18px 20px; background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 12px; }
.estimate div span { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.estimate div strong { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.rv { display: flex; align-items: center; gap: 8px; width: 110px; }
.rv-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; }
/* Solid, not the gradient. These meters sit one per table row, so a gradient
   across each bar paints a short bar blue and a long one purple — double-
   encoding length as hue, and burning the one free channel on information the
   length already carries. The single job-progress bar keeps its gradient:
   there is only ever one on screen, so nothing is being compared. */
.rv-bar > div { height: 100%; background: var(--accent-solid); border-radius: 999px; }
.rv strong { font-size: 0.85rem; font-weight: 800; width: 24px; text-align: right; }
.report-paper { background: #0f0f10; border: 1px solid var(--card-border); border-radius: 16px; padding: 34px; margin-top: 22px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 15px; margin: 22px 0; }
.kpi-box { background: rgba(15,15,16,0.8); border: 1px solid var(--card-border); border-radius: 12px; padding: 17px; }
.kpi-box span { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.kpi-num { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-top: 4px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; margin-top: 14px; }
th { padding: 11px 10px; color: var(--text-muted); border-bottom: 1px solid var(--card-border); font-weight: 700; font-size: 0.75rem; white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--card-border); vertical-align: top; }
tr.is-top td { background: rgba(24,106,255,0.09); }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; }
.b-ok { background: rgba(16,185,129,0.16); color: var(--success); }
.b-warn { background: rgba(245,158,11,0.16); color: var(--warn); }
.b-bad { background: rgba(239,68,68,0.16); color: #fca5a5; }
.b-mute { background: rgba(148,163,184,0.14); color: var(--text-muted); }
.idx { font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.idx.hot { color: var(--success); }
.idx.cold { color: #fca5a5; }
.job-panel { background: var(--terminal-bg); border: 1px solid var(--accent-solid); border-radius: 14px; padding: 24px; margin-bottom: 25px; }
.job-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bar { height: 8px; background: rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--accent-glow); transition: width .4s ease; }
.job-logs { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #186aff; line-height: 1.7; height: 170px; overflow-y: auto; margin-top: 16px; }
.row-card { background: var(--input-bg); border: 1px solid var(--card-border); padding: 18px; border-radius: 12px;
        margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.row-card strong { color: #fff; font-size: 1rem; }
.row-card .meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 5px; }
.ai-panel { margin-top: 34px; background: rgba(15,15,16,0.9); border: 1px solid var(--accent-solid); border-radius: 12px; padding: 24px; }
.ai-panel h4 { color: var(--accent-solid); font-size: 0.95rem; font-weight: 800; margin: 20px 0 8px; }
.ai-panel h4:first-of-type { margin-top: 0; }
.ai-panel p, .ai-panel li { font-size: 0.86rem; line-height: 1.65; }
.ai-panel ul { padding-left: 20px; }
.warnbox { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 14px 16px; margin-top: 16px; font-size: 0.8rem; color: #fcd34d; line-height: 1.6; }
.empty { color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; }
.explainer { background: var(--card-bg); backdrop-filter: blur(16px); border: 1px solid var(--card-border);
        border-radius: 16px; margin-bottom: 25px; overflow: hidden; }
.explainer > summary { list-style: none; cursor: pointer; padding: 20px 28px; display: flex;
        align-items: center; gap: 12px; font-weight: 800; color: #fff; font-size: 1.02rem; }
.explainer > summary::-webkit-details-marker { display: none; }
.explainer > summary::after { content: 'Hide'; margin-left: auto; font-size: 0.72rem; font-weight: 800;
        color: var(--text-muted); border: 1px solid var(--card-border); padding: 6px 13px; border-radius: 8px;
        white-space: nowrap; }
.explainer:not([open]) > summary::after { content: 'Show'; }
.explainer > summary:hover::after { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.explainer > summary:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; }
.ex-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-glow); flex: 0 0 auto; }
.ex-body { padding: 24px 28px 30px; border-top: 1px solid var(--card-border); }
.ex-lead { font-size: 0.92rem; color: var(--text-primary); line-height: 1.7; font-weight: 500; margin-bottom: 6px; }
.ex-body p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 12px; }
.ex-body p strong, .ex-body li strong { color: var(--text-primary); font-weight: 700; }
.ex-body h3 { color: #fff; font-size: 1.02rem; font-weight: 800; margin: 26px 0 12px; }
.ex-body h4 { color: var(--accent-solid); font-size: 0.78rem; font-weight: 800; margin: 20px 0 10px;
        letter-spacing: 0.04em; text-transform: uppercase; }
.ex-body ul, .ex-body ol { margin: 0 0 12px 20px; }
.ex-body li { font-size: 0.87rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 8px; }
.ex-body ol li { padding-left: 4px; }
.ex-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #a5b4fc;
        background: rgba(99,102,241,0.12); padding: 2px 6px; border-radius: 5px; }
.ex-hr { height: 1px; background: var(--card-border); border: none; margin: 26px 0; }
.ex-steps { counter-reset: exstep; list-style: none; margin: 0 0 12px; }
.ex-body .ex-steps > li, .ex-steps > li { counter-increment: exstep; position: relative; padding-left: 40px; margin-bottom: 12px;
        font-size: 0.88rem; color: var(--text-primary); line-height: 1.7; font-weight: 500; }
.ex-steps > li::before { content: counter(exstep); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
        border-radius: 8px; background: var(--accent-glow); color: #000000; font-size: 0.78rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.ex-tile { background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 15px 17px; }
.ex-tile > b { display: block; color: #fff; font-size: 0.86rem; font-weight: 800; margin-bottom: 5px; }
.ex-tile span { display: block; color: var(--text-muted); font-size: 0.8rem; line-height: 1.65; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 6px 0 14px; }
.ex-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-weight: 800;
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
        border-bottom: 1px solid var(--card-border); }
.ex-table td { padding: 10px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-primary);
        vertical-align: top; line-height: 1.6; }
.ex-table td:first-child { font-weight: 700; white-space: nowrap; }
.ex-scroll { overflow-x: auto; }
.ex-note { border-radius: 10px; padding: 14px 17px; font-size: 0.83rem; line-height: 1.7; margin: 14px 0; }
.ex-note.info { background: rgba(24,106,255,0.08); border: 1px solid rgba(24,106,255,0.3); color: #ffffff; }
.ex-note.warn { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }
.ex-note.good { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); color: #a7f3d0; }
.ex-note.bad  { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.3);  color: #fecaca; }
.ex-note b { color: #fff; font-weight: 800; }
.ex-flow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 16px; }
.ex-chip { background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 8px;
        padding: 7px 13px; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.ex-arrow { color: var(--text-muted); font-size: 0.85rem; font-weight: 800; }
@media (max-width: 640px) {
        .explainer > summary { padding: 17px 18px; font-size: 0.94rem; }
        .ex-body { padding: 20px 18px 24px; }
    }
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.segment-btn:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }

/* =========================================================================
   HEADER SHELL  (moved out of header.js in phase 18)
   -------------------------------------------------------------------------
   These rules used to be a template string that header.js appended to
   <head> at runtime. That meant every page painted its content once
   unstyled and then again with the header — a flash on every single
   navigation, on every page, for the life of the product.

   They are plain CSS with no reason to be in JavaScript, so they live here
   and arrive with the stylesheet. header.js still owns the markup.
   ========================================================================= */

    .el-header { position: fixed; top: 0; left: 0; width: 100%; height: 75px; z-index: 9999;
        display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 0 28px;
        background: rgba(6, 9, 19, 0.85); backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
    .el-client-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
    .el-client-picker label { font-size: .8rem; color: #a3a3a8; font-weight: 600; }
    .el-client-picker select { background: #0f172a; color: #ececef; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 10px; font-size: .9rem; min-width: 220px; }
    .el-client-picker .el-client-manage { font-size: .8rem; color: #186aff; text-decoration: none; }
    .el-ai-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .el-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
        background: var(--accent-glow);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .el-nav { display: flex; gap: 4px; max-width: 100%; background: rgba(15,15,16,0.9); padding: 6px; border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08); overflow-x: auto; }
    .el-tab { padding: 9px 13px; color: #a3a3a8; font-weight: 700; font-size: 0.82rem; text-decoration: none;
        border-radius: 8px; white-space: nowrap; transition: color .2s, background .2s; }
    .el-tab:hover { color: #ececef; }
    .el-tab.is-active { background: var(--accent-glow); color: #fff;
        box-shadow: 0 4px 15px rgba(24,106,255,0.3); }
    .el-right { display: flex; align-items: center; gap: 10px; }
    .el-pill { display: flex; align-items: center; gap: 10px; background: rgba(15,15,16,0.9);
        border: 1px solid rgba(255,255,255,0.08); padding: 7px 14px; border-radius: 30px; font-size: 0.8rem;
        color: #a3a3a8; white-space: nowrap; }
    .el-node { width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
    .el-node.is-live { background: #10b981; box-shadow: 0 0 10px #10b981; animation: el-pulse 1.4s infinite; }
    .el-node.is-dead { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
    @keyframes el-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
    .el-btn { background: rgba(255,255,255,0.05); color: #f8fafc; border: 1px solid rgba(255,255,255,0.08);
        padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.82rem;
        font-family: inherit; }
    .el-btn:hover { background: rgba(255,255,255,0.1); }
    .el-btn:focus-visible, .el-tab:focus-visible { outline: 2px solid #186aff; outline-offset: 2px; }
    .el-btn.el-btn-go { background: var(--accent-glow); border: none; font-weight: 800; }
    .el-mini { padding: 4px 10px; font-size: 0.74rem; }

    .el-scrim { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center;
        justify-content: center; padding: 20px; background: rgba(3,7,18,0.9); backdrop-filter: blur(12px);
        font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
    .el-modal { width: 460px; max-width: 100%; background: #0f0f10; border: 1px solid #186aff;
        border-radius: 16px; padding: 26px; color: #f8fafc; }
    .el-modal h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
    .el-modal p { font-size: 0.84rem; color: #a3a3a8; margin: 0 0 18px; line-height: 1.5; }
    .el-modal label { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.08em; color: #186aff; margin: 16px 0 7px; }
    .el-modal input, .el-modal select { width: 100%; padding: 13px 15px; background: #060913; color: #fff;
        border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; outline: none; font-size: 0.92rem;
        font-family: inherit; }
    .el-modal input:focus, .el-modal select:focus { border-color: #186aff; box-shadow: 0 0 0 3px rgba(24,106,255,0.25); }
    .el-modal-actions { display: flex; gap: 10px; margin-top: 22px; }
    .el-modal-actions .el-btn { flex: 1; padding: 12px; }
    .el-note { font-size: 0.78rem; margin-top: 14px; min-height: 1.1em; }

    .el-blocked { max-width: 520px; margin: 140px auto 0; background: rgba(15,15,16,0.75);
        border: 1px solid rgba(239,68,68,0.4); border-radius: 16px; padding: 32px; color: #f8fafc;
        font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
    .el-blocked h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; }
    .el-blocked p { color: #a3a3a8; font-size: 0.9rem; line-height: 1.6; margin: 0 0 18px; }

    @media (max-width: 1100px) {
        .el-header { height: auto; padding: 12px 16px; flex-wrap: wrap; position: static; }
        /* Superseded by the sidebar layout: body.el-has-sidebar sets the
           offset now. This !important was beating it and sliding the
           content under the fixed top bar on a phone. */
        body.el-has-header:not(.el-has-sidebar) { padding-top: 24px; }
    }

    .el-header .el-client { display:flex; align-items:center; gap:6px; background: rgba(15,15,16,0.9);
        border: 1px solid rgba(255,255,255,0.08); padding: 5px 8px 5px 12px; border-radius: 30px; font-size: .78rem; color:#a3a3a8; }
    .el-header .el-client select { background: transparent; color:#ececef; border: none; font-size:.8rem; font-family: inherit;
        max-width: 190px; cursor: pointer; outline: none; }
    .el-header .el-client select option { background:#0f172a; }
    .el-share-bar { position: fixed; top:0; left:0; width:100%; z-index: 9999; display:flex; justify-content:space-between;
        align-items:center; gap: 14px; padding: 0 28px; height: 64px; background: rgba(6,9,19,0.92); backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255,255,255,0.08); font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; color:#a3a3a8; font-size:.85rem; }
    .el-share-bar b { color:#ececef; }
    body.el-share .el-owner-only { display: none !important; }
    body.el-share.el-has-header { padding-top: 84px; }
    /* Embedded in another page's report viewer (?embed=1): the content alone. */
    body.el-embed { padding: 18px 18px 48px; max-width: none; }
    .el-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin: 10px 0 14px; font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
    .el-actions .el-note { margin:0; font-size:.78rem; }
    .el-share-list { font-size:.78rem; color:#a3a3a8; width:100%; }
    .el-share-list div { display:flex; gap:8px; align-items:center; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
    .el-share-list code { color:#ececef; word-break: break-all; font-size:.74rem; }
    .el-modal .el-grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 1100px) { .el-share-bar { position: static; height:auto; padding: 12px 16px; flex-wrap: wrap; } }


/* =========================================================================
   SYSTEM LAYER  (phase 18)
   -------------------------------------------------------------------------
   Base rules that every page assumed but only some of them defined. Page
   <style> blocks load after this file, so anything a page already sets
   still wins — this only fills the gaps.
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- form controls ------------------------------------------------------
   These were copy-pasted into some pages and missing from others, so an
   input looked different depending on which screen you were on. */
input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], select, textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: #64748b; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
    border-color: rgba(255,255,255,0.16);
}
textarea:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(24,106,255,0.25); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* ---- interaction --------------------------------------------------------
   One focus ring for everything keyboard-reachable, and buttons that
   acknowledge a press. */
:where(a, button, [role="button"], summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn-primary, .btn-secondary, .btn-danger {
    transition: transform .12s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover:not([disabled]) { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(24,106,255,0.28); }
.btn-primary:active:not([disabled]),
.btn-secondary:active, .btn-danger:active { transform: translateY(1px); }
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.card { transition: border-color .15s ease; }

/* ---- skeletons ----------------------------------------------------------
   A grey block the size of the thing that is coming reads as loading. A
   spinner reads as waiting, and an empty panel reads as broken. */
.sk { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
      background-size: 400% 100%; animation: sk-shimmer 1.3s ease-in-out infinite;
      border-radius: 8px; }
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; }
.sk-card { height: 96px; border-radius: 12px; margin-bottom: 12px; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- first-load notice --------------------------------------------------
   Shown when the backend is cold. Names the cause rather than spinning,
   because an unexplained thirty-second wait gets reloaded — and a reload
   starts the cold start again. */
.el-boot { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
    background: rgba(6,9,19,0.82); backdrop-filter: blur(6px);
    font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
.el-boot-card { max-width: 380px; margin: 0 24px; padding: 30px 32px; text-align: center;
    background: #0f172a; border: 1px solid var(--card-border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.el-boot-card h3 { color: #fff; font-size: 1.08rem; font-weight: 800; margin-bottom: 9px; }
.el-boot-card p { color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; }
.el-boot-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08);
    overflow: hidden; margin-bottom: 20px; }
.el-boot-bar i { display: block; height: 100%; width: 38%; border-radius: 999px;
    background: var(--accent-glow); animation: el-boot-slide 1.4s ease-in-out infinite; }
@keyframes el-boot-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ---- motion -------------------------------------------------------------
   Everything above animates. Anyone who has asked their system not to
   gets the same interface without the movement. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- job banner (moved out of header.js, phase 18) ---- */

        .el-job-budget:empty{display:none}
        .el-job-budget{margin:8px 0 2px;font-size:13px;font-weight:700;color:#fbbf24}
        .el-cancel-row{display:flex;align-items:center;gap:10px;margin:0 0 12px}
        .el-cancel-note{font-size:12px;color:#a3a3a8}
        .el-run-cost{display:inline-flex;align-items:center;gap:6px;font-size:12px;
            font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
            background:rgba(15,15,16,.7);color:#a3a3a8}
        .el-run-cost.is-tight{color:#fbbf24;border-color:rgba(245,158,11,.4)}
        .el-run-cost.is-over{color:#ef4444;border-color:rgba(239,68,68,.4)}
        .el-job-banner{background:#1e1b16;border:1px solid #b45309;border-radius:10px;
            padding:14px 16px;margin:0 0 16px;color:#fde68a;font-size:14px}
        .el-job-banner strong{display:block;color:#fbbf24;margin-bottom:6px;font-size:15px}
        .el-job-banner p{margin:4px 0;color:#ececef;line-height:1.5}
        .el-job-banner .el-job-detail{color:#a3a3a8;font-size:13px}
        .el-job-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
        .el-job-note{margin-top:8px;font-size:13px;min-height:16px}

/* ---- trial / plan strip (moved out of header.js, phase 18) ---- */

            .el-plan{position:fixed;top:75px;left:0;width:100%;z-index:9998;display:flex;
                align-items:center;gap:14px;flex-wrap:wrap;padding:8px 28px;
                font-family:'Inter', 'Anek Bangla',system-ui,sans-serif;font-size:.82rem;
                background:rgba(15,15,16,.92);backdrop-filter:blur(12px);
                border-bottom:1px solid rgba(255,255,255,.07);color:#d4d4d8}
            .el-plan.is-urgent{background:rgba(69,26,3,.92);border-bottom-color:rgba(251,146,60,.35)}
            .el-plan-tag{font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem;
                padding:3px 8px;border-radius:999px;background:rgba(24,106,255,0.18);color:#b5ff3b}
            .el-plan.is-urgent .el-plan-tag{background:rgba(251,146,60,.2);color:#fdba74}
            .el-plan-meters{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
            .el-plan-meter{display:flex;align-items:center;gap:6px;color:#a3a3a8}
            .el-plan-meter b{color:#ececef;font-weight:700}
            .el-plan-bar{width:52px;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
            .el-plan-bar i{display:block;height:100%;background:#186aff}
            .el-plan-bar.is-full i{background:#f97316}
            body.el-has-plan{padding-top:36px}
            @media (max-width:720px){.el-plan{padding:8px 16px;font-size:.76rem}
                .el-plan-meters{margin-left:0;width:100%}}


/* =========================================================================
   REFINEMENT LAYER  (phase 18)
   -------------------------------------------------------------------------
   Craft pass over the shared components. Everything above still defines the
   structure; this tunes how it reads. Page <style> blocks load after this
   file, so a page that has already made a decision keeps it.
   ========================================================================= */

/* ---- typography ---------------------------------------------------------
   Optical tracking: large type set at default spacing looks loose, small
   type set tight looks cramped. Tightening as size increases is the single
   clearest signal between typography that was set and typography that was
   left alone. */
h1, .h1 { letter-spacing: -0.028em; line-height: 1.14; font-weight: 800; }
h2, .h2 { letter-spacing: -0.022em; line-height: 1.22; font-weight: 800; }
h3, h4  { letter-spacing: -0.014em; line-height: 1.32; }
p { line-height: 1.68; }

/* Tabular figures only where numbers stack vertically and want to line up —
   table rows, index columns, meter values. NOT on hero or stat-tile numbers:
   equal-width digits make a large figure look loose and gappy, so those keep
   the proportional figures the typeface was drawn with. */
.idx, td, th, .rv strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.kpi-num, .estimate div strong, .hero-num, .score-dial .val {
    font-variant-numeric: proportional-nums;
}

::selection { background: rgba(106,168,255,0.28); color: #fff; }

/* ---- surfaces -----------------------------------------------------------
   The same lit-edge treatment the card gets, for the panels that sit at the
   same level as one. */
.report-paper, .job-panel, .ai-panel, .explainer {
    position: relative;
    box-shadow: var(--lift-2);
}
.report-paper { background: var(--surface-1); border-radius: var(--r-lg); }
.kpi-box, .row-card, .ex-tile {
    background: var(--surface-1);
    border-radius: var(--r-md);
    transition: border-color .15s ease, background .15s ease;
}
.kpi-box:hover, .row-card:hover, .ex-tile:hover { border-color: rgba(255,255,255,0.14); }

/* ---- buttons ------------------------------------------------------------
   The primary keeps the gradient because it is the primary. It gains a
   hairline of its own colour along the top so it reads as a lit object
   rather than a painted shape. */
.btn-primary {
    position: relative;
    border-radius: var(--r-md);
    letter-spacing: -0.006em;
    box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-secondary, .btn-danger { border-radius: var(--r-sm); letter-spacing: -0.004em; }
.btn-secondary { background: rgba(255,255,255,0.045); }
.btn-secondary:hover { border-color: rgba(255,255,255,0.18); }

/* ---- segmented control --------------------------------------------------
   Was a row of loose buttons over a rule. A recessed track with one lifted
   selection reads as a single control instead of several. */
.segment-bar {
    gap: 4px; padding: 5px; border-bottom: none; border-radius: var(--r-md);
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--card-border);
    width: fit-content; max-width: 100%;
}
.segment-btn { padding: 10px 18px; border-radius: var(--r-sm); font-size: 0.85rem;
    transition: color .15s ease, background .15s ease; }
.segment-btn:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.segment-btn.active { box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,0.18); }

/* ---- tables -------------------------------------------------------------
   Hairline rules, an uppercase header that reads as a label rather than a
   row, and a hover that makes a long table scannable. */
th { text-transform: uppercase; letter-spacing: 0.055em; font-size: 0.68rem;
     border-bottom-color: rgba(255,255,255,0.1); }
td { border-bottom-color: rgba(255,255,255,0.045); }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: rgba(255,255,255,0.028); }
tbody tr:last-child td { border-bottom: none; }
.table-wrap { border-radius: var(--r-md); }

/* ---- badges -------------------------------------------------------------
   A ring instead of a fill block: it holds its shape against any surface
   and stops the row looking like a set of highlighter marks. */
.badge { padding: 3px 10px; border-radius: 999px; letter-spacing: 0.035em;
    text-transform: uppercase; font-size: 0.66rem; border: 1px solid transparent; }
.b-ok   { border-color: rgba(52,211,153,0.28); }
.b-warn { border-color: rgba(251,191,36,0.28); }
.b-bad  { border-color: rgba(248,113,113,0.28); }
.b-mute { border-color: rgba(148,163,184,0.22); }

/* ---- progress -----------------------------------------------------------
   A moving sheen on the filled portion, so a long job reads as running
   rather than stuck at a number. */
.bar { border-radius: 999px; }
.bar > div { position: relative; overflow: hidden; border-radius: 999px; }
.bar > div::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    animation: bar-sheen 1.6s ease-in-out infinite; }
@keyframes bar-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- scrollbars ---------------------------------------------------------
   A default light scrollbar on a dark panel is the loudest thing on screen. */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: content-box; }


/* =========================================================================
   SIDEBAR SHELL  (phase 18)
   -------------------------------------------------------------------------
   Supersedes the top-bar layout above. Twelve destinations in a horizontal
   strip either wrap onto a second line or scroll sideways, and both bury the
   tail of the list — which is where Admin and Schedules sit. Stacked in a
   rail the whole set is visible at once, the labels get room to be words,
   and adding a thirteenth costs nothing.

   The rules above that this replaces (.el-header, .el-right, the horizontal
   .el-nav) are left in place: header.js no longer emits that markup, so they
   match nothing, and a page that still carries a hand-rolled .el-header keeps
   working.
   ========================================================================= */

:root { --rail: 248px; }

.el-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 9999;
    display: flex; flex-direction: column;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(18px);
    border-right: 1px solid var(--card-border);
    box-shadow: 1px 0 0 rgba(255,255,255,0.02), var(--lift-3);
    font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif;
}
.el-side-top { padding: 22px 20px 16px; }
.el-sidebar .el-logo { font-size: 1.22rem; }

/* The nav is the only part that scrolls, so the logo stays put at the top and
   the account controls stay put at the bottom however long the list gets. */
.el-sidebar .el-nav {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 4px 12px 12px; margin: 0;
    background: none; border: none; border-radius: 0; max-width: none;
}
.el-sidebar .el-tab {
    display: block; padding: 10px 12px; border-radius: var(--r-sm);
    font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .13s ease, background .13s ease;
}
.el-sidebar .el-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.045); }
/* The active item is marked with a solid fill and a bar on the leading edge.
   The gradient is the primary-action colour and does not belong on a
   navigation state. */
.el-sidebar .el-tab.is-active {
    background: var(--accent-dim); color: #dbe9ff; font-weight: 700;
    box-shadow: inset 2px 0 0 var(--accent-solid); text-shadow: none;
}

.el-side-foot { padding: 14px 14px 16px; border-top: 1px solid var(--card-border);
    display: flex; flex-direction: column; gap: 9px; }
.el-side-foot .el-client { display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: var(--r-sm); padding: 7px 10px; font-size: 0.76rem; color: var(--text-muted); }
.el-side-foot .el-client select { background: transparent; color: var(--text-primary);
    border: none; font-size: 0.78rem; font-family: inherit; width: 100%; padding: 0; min-width: 0; }
/* Manage / Retry sit at the right of the picker. `flex-shrink: 0` because the
   select takes width:100% and would otherwise squeeze them to nothing. */
.el-side-foot .el-client .el-client-manage,
.el-side-foot .el-client .el-client-retry { flex-shrink: 0; font-size: 0.72rem; color: var(--accent-solid);
    text-decoration: none; background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; letter-spacing: 0.01em; }
.el-side-foot .el-client .el-client-manage:hover,
.el-side-foot .el-client .el-client-retry:hover { color: #b5ff3b; text-decoration: underline; }
.el-side-foot .el-pill { display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: var(--r-sm); padding: 8px 10px; font-size: 0.75rem; color: var(--text-muted); }
.el-side-actions { display: flex; gap: 6px; }
.el-side-actions .el-btn { white-space: nowrap; }
.el-side-actions .el-btn { flex: 1; justify-content: center; text-align: center; }
.el-signout { width: 100%; text-align: center; }

/* ---- what is waiting for an admin ----
   A count on the Admin entry, so a client who asked to continue is seen
   without anyone opening the admin page to look. */
.el-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 8px; border-radius: 999px;
    font-size: 0.66rem; font-weight: 800; text-align: center; line-height: 1.5;
    background: var(--accent-glow); color: var(--on-accent); }

/* ---- the how-to-continue slot ----
   One renderer, four places: the trial banner, the expired screen, the
   request confirmation, the legal pages' contact line. */
.el-contact-slot { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 0.85rem;
    color: var(--text-secondary); text-align: left; }
.el-contact-slot .el-btn { align-self: flex-start; }
.el-pay ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.el-pay li { padding: 7px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border); line-height: 1.5; }
.el-pay li b { color: var(--text-primary); }
.el-pay a { color: var(--accent-solid); font-weight: 700; text-decoration: none; }
.el-plan .el-contact-slot { flex-basis: 100%; margin-top: 8px; }

/* ---- the trial banner's one action ----
   The moment the business model turns on. Quiet until the last two days,
   when the banner itself goes urgent and the button goes with it. */
.el-plan-cta { margin-left: auto; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em;
    background: rgba(255,255,255,0.08); color: var(--text-primary); border: 1px solid var(--card-border); }
.el-plan.is-urgent .el-plan-cta { background: var(--accent-glow); color: var(--on-accent); border-color: transparent; }
.el-plan-cta[disabled] { opacity: .75; cursor: default; }
@media (max-width: 640px) { .el-plan-cta { margin-left: 0; } }

/* ---- the work-for bar ----
   Top of every page where somebody presses Run. Jade when a client is chosen,
   gold when one is not — the empty state is the one that needs the eye. */
.el-workfor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r-md);
    background: rgba(24,106,255,0.10); border: 1px solid rgba(181,255,59,0.26);
    font-size: 0.88rem; color: var(--text-secondary); }
.el-workfor.is-empty { background: rgba(24,106,255,0.10); border-color: rgba(24,106,255,0.35); }
.el-workfor b { color: var(--text-primary); font-weight: 800; }
.el-workfor .el-wf-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px; background: rgba(181,255,59,0.18); color: var(--jade); }
.el-workfor.is-empty .el-wf-tag { background: rgba(24,106,255,0.2); color: var(--accent-solid); }
.el-workfor select { width: auto; min-width: 220px; margin-left: auto; padding: 8px 10px; font-size: 0.86rem; }
.el-workfor a { color: var(--accent-solid); font-weight: 700; text-decoration: none; }
.el-workfor a:hover { text-decoration: underline; }
/* After a refusal, the picker pulses three times and stops. Enough to be
   found, not enough to become the page. */
.el-workfor.is-nudge, .el-side-foot .el-client.is-nudge { animation: el-nudge .5s ease 0s 3; }
@keyframes el-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(24,106,255,0); } 50% { box-shadow: 0 0 0 4px rgba(24,106,255,0.45); } }
@media (max-width: 640px) { .el-workfor select { margin-left: 0; width: 100%; } }

/* ---- the page beside it ----
   A class selector, so it beats the bare `body { padding: ... }` a page may
   still carry regardless of which file loads first. */
body.el-has-sidebar {
    padding: 30px 30px 70px calc(var(--rail) + 30px);
    max-width: 1720px;
}

/* ---- mobile: the rail becomes a drawer ---- */
.el-topbar { display: none; }
/* The phone menu's overlay is #el-scrim. Modals (keys, share) are .el-scrim too, so these rules
   name the id: as a class they hid every modal on every screen. */
#el-scrim { display: none; }

@media (max-width: 900px) {
    .el-topbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 9998;
        padding: 0 16px; background: rgba(0,0,0,0.94); backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--card-border);
        font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif;
    }
    .el-topbar .el-logo { font-size: 1.05rem; }
    .el-burger { width: 38px; height: 34px; display: grid; align-content: center; gap: 5px;
        padding: 0 8px; background: none; border: none; cursor: pointer; }
    .el-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text-primary); }

    .el-sidebar { transform: translateX(-100%); transition: transform .22s ease; width: 272px; }
    body.el-nav-open .el-sidebar { transform: none; }

    #el-scrim { display: block; position: fixed; inset: 0; z-index: 9998;
        background: rgba(2,4,10,.6); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    body.el-nav-open #el-scrim { opacity: 1; pointer-events: auto; }

    body.el-has-sidebar { padding: 76px 16px 60px; max-width: none; }
    /* The trial strip sits under the top bar rather than under a 75px header. */
    .el-plan { top: 58px; }
}

/* On the rail layout the plan strip spans only the content column. */
@media (min-width: 901px) {
    .el-plan { top: 0; left: var(--rail); width: auto; right: 0; }
    body.el-has-plan { padding-top: 66px; }
}

/* ---- rail: grouping and alignment ----
   Icons sit in a fixed column so every label starts on the same line. Emoji
   have wildly different advance widths; inlined into the label string they
   left the list ragged down its left edge. */
.el-group {
    padding: 16px 12px 6px; font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase; color: #5f6b80;
}
.el-nav > .el-group:first-child { padding-top: 4px; }
.el-sidebar .el-tab {
    display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px;
}
.el-ico { font-size: 0.94rem; line-height: 1; text-align: center; opacity: .9; }
.el-lab { overflow: hidden; text-overflow: ellipsis; }
.el-sidebar .el-tab.is-active .el-ico { opacity: 1; }

/* The rail's own scrollbar is a full-height line against a dark edge — the
   loudest thing in the panel. It appears on hover, when it is wanted. */
.el-sidebar .el-nav { scrollbar-width: none; }
.el-sidebar .el-nav::-webkit-scrollbar { width: 6px; }
.el-sidebar .el-nav::-webkit-scrollbar-thumb { background: transparent; }
.el-sidebar:hover .el-nav { scrollbar-width: thin; }
.el-sidebar:hover .el-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* ---- installable client surface (phase 30) ------------------------------
   One card at the top of a client's page. Sits in the flow, never fixed:
   the trial strip already owns the top of the viewport on a phone. */
.el-install { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
    padding: 14px 16px; border-radius: var(--r-md, 12px); background: var(--card-bg);
    border: 1px solid var(--card-border); }
.el-install-ico { font-size: 1.4rem; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 10px; background: rgba(24,106,255,0.14); flex: none; }
.el-install-txt { flex: 1 1 260px; display: grid; gap: 2px; }
.el-install-txt b { font-size: 0.92rem; color: var(--text-primary); }
.el-install-txt span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.el-install-act { display: flex; gap: 8px; flex-wrap: wrap; }
.el-install-go { border-color: var(--accent-solid) !important; color: var(--accent-solid) !important; }
.el-install-steps { margin: 0 0 6px; padding-left: 22px; color: #d4d4d8; font-size: 0.88rem; line-height: 1.7; }
.el-install-steps li { margin-bottom: 6px; }
.el-install-steps b { color: #fff; }

/* =========================================================================
   PHASE 33 — THE CLIENT-FIRST SHELL AND WORKSPACE
   The rail gains the two things done from anywhere (start work, find a
   client) and loses the tool list; the tools live under New work. The
   `ws-` rules are the parts the workspace pages share: page heads, cards,
   rows, chips, tiles, tabs and the task board. Everything takes its colour
   from the tokens at the top of this file.
   ========================================================================= */
.el-svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.el-ico .el-svg { width: 18px; height: 18px; margin: 0 auto; }
.el-sidebar a.el-logo { text-decoration: none; display: inline-block; }
.el-side-top { display: flex; flex-direction: column; gap: 12px; }

.el-newwork { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: var(--r-sm); cursor: pointer;
    background: var(--accent-glow); color: var(--on-accent); font: inherit; font-weight: 800; font-size: 0.88rem; }
.el-newwork:hover { filter: brightness(1.06); }
.el-newwork:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.el-newwork .el-svg { width: 16px; height: 16px; stroke-width: 2.2; }
.el-newwork-top { width: 38px; height: 34px; padding: 0; margin-left: auto; }

.el-find { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: var(--r-sm);
    color: var(--text-muted); }
.el-find .el-svg { width: 15px; height: 15px; }
.el-find input { border: 0 !important; background: transparent !important; padding: 8px 0 !important; margin: 0 !important;
    font-size: 0.84rem; color: var(--text-primary); width: 100%; min-width: 0; box-shadow: none !important; }
.el-find input:focus { outline: none; }
.el-find:focus-within { border-color: var(--accent-solid); }
.el-find-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 3; max-height: 320px; overflow-y: auto;
    background: var(--surface-2); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-sm); box-shadow: var(--lift-3); padding: 4px; }
.el-find-row { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.el-find-row b { display: block; color: var(--text-primary); font-size: 0.86rem; }
.el-find-row small { color: var(--text-muted); font-size: 0.75rem; }
.el-find-row:hover, .el-find-row.is-first { background: var(--accent-dim); }
.el-find-none { padding: 10px; font-size: 0.8rem; color: var(--text-muted); }
.el-find-none a { color: var(--accent-solid); font-weight: 700; text-decoration: none; }

.el-sidebar .el-tab { grid-template-columns: 22px 1fr auto; }
.el-count { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.el-count:empty { display: none; }
.el-count.is-hot { color: var(--on-accent); background: var(--accent-solid); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.el-dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; background: var(--text-muted); opacity: .7; }
.el-dot.is-on { background: var(--jade); opacity: 1; }
.el-sidebar .el-tab.el-recent { font-size: 0.82rem; padding-top: 7px; padding-bottom: 7px; }

.el-user { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; min-width: 0; }
.el-user-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.el-user-txt b { color: var(--text-primary); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-user-txt small { color: var(--text-muted); font-size: 0.72rem; }
.el-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: 0.72rem; font-weight: 800; background: var(--surface-2); color: #b5ff3b; border: 1px solid rgba(255,255,255,0.2); }

/* ---- phase 62: the rail never squeezes its own links ----------------------
   The nav is a column flex box that scrolls. Its links had the default
   flex-shrink: 1 and overflow: hidden, so when the foot grew the browser
   shrank every link below its own height instead of scrolling, and labels
   were cut in half. Links keep their height; the list scrolls. */
.el-sidebar .el-nav > * { flex-shrink: 0; }
.el-side-foot { gap: 8px; padding: 12px 12px 14px; }

/* The account row is one button; its menu opens upward, over the nav. */
.el-acct { position: relative; }
.el-acct .el-user { width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-sm);
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.el-acct .el-user:hover, .el-acct .el-user[aria-expanded="true"] { background: rgba(255,255,255,0.045); border-color: var(--card-border); }
.el-acct .el-user:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.el-acct .el-user-txt { flex: 1; }
.el-acct-caret { color: var(--text-muted); transition: transform .15s ease; }
.el-acct-caret .el-svg { width: 16px; height: 16px; }
.el-acct .el-user[aria-expanded="false"] .el-acct-caret { transform: rotate(180deg); }
.el-acct .el-user.el-needs { position: relative; }
.el-acct .el-user.el-needs::after { content: ''; position: absolute; top: 6px; left: 30px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent-solid); box-shadow: 0 0 0 2px var(--surface-1); }
.el-acct-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 4; display: grid; gap: 2px; padding: 6px;
    background: var(--surface-2); border: 1px solid var(--card-border); border-radius: var(--r-sm); box-shadow: var(--lift-3); }
.el-acct-menu[hidden] { display: none; }
.el-acct-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--text-primary); font: inherit; font-size: 0.84rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.el-acct-item:hover, .el-acct-item:focus-visible { background: var(--accent-dim); outline: none; }
.el-acct-item.el-needs::after { content: 'Add'; font-size: 0.68rem; font-weight: 800; color: var(--on-accent); background: var(--accent-solid);
    border-radius: 999px; padding: 1px 8px; }
.el-acct-out { color: var(--danger); border-top: 1px solid var(--card-border); border-radius: 0 0 8px 8px; margin-top: 2px; }

/* ---- drawer ---- */
.el-drawer-wrap { position: fixed; inset: 0; z-index: 100010; }
.el-drawer-scrim { position: absolute; inset: 0; background: rgba(2,8,6,0.62); }
.el-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column;
    background: var(--surface-1); border-left: 1px solid rgba(255,255,255,0.18); box-shadow: var(--lift-3);
    font-family: 'Inter', 'Anek Bangla', system-ui, sans-serif; }
.el-drawer.is-wide { width: min(720px, 100vw); }
.el-drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px;
    border-bottom: 1px solid var(--card-border); }
.el-drawer-t { flex: 1; min-width: 0; }
.el-drawer-t h2 { font-size: 1.08rem; font-weight: 800; color: var(--text-primary); margin: 0; overflow-wrap: anywhere; }
.el-drawer-t p { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.el-drawer-b { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.el-drawer-f { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--card-border); }
.el-iconbtn { width: 36px; height: 36px; display: grid; place-items: center; flex: none; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255,255,255,0.04); color: var(--text-secondary); }
.el-iconbtn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.3); }
body.el-drawer-open { overflow: hidden; }

.el-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.el-muted { color: var(--text-muted); font-size: 0.86rem; }
.el-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
    font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.18); }
.el-chip.is-jade { background: rgba(181,255,59,0.14); color: var(--jade); border-color: transparent; }
.el-chip.is-gold { background: var(--accent-dim); color: #b5ff3b; border-color: transparent; }
.el-chip.is-warn { background: rgba(251,191,36,0.12); color: var(--warn); border-color: transparent; }
.el-chip.is-bad { background: rgba(248,113,113,0.12); color: var(--danger); border-color: transparent; }
.el-work-g { display: flex; flex-direction: column; gap: 8px; }
/* phase 70: what each kind of work is for, and the kinds folded away for a client on Meta */
.el-work-note { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.el-work-fold > summary { cursor: pointer; list-style: revert; }
.el-work-fold > summary span { color: var(--text-muted); font-weight: 500; }
.el-work-fold[open] { gap: 8px; }
.el-work, .el-pick-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255,255,255,0.025); font: inherit; color: inherit; }
.el-work:hover, .el-pick-row:hover { border-color: var(--accent-solid); }
.el-work-t, .el-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.el-work-t b, .el-pick-t b { color: var(--text-primary); font-size: 0.92rem; }
.el-work-t small, .el-pick-t small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.el-pick { display: flex; flex-direction: column; gap: 8px; }
.el-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.el-add .el-svg { width: 15px; height: 15px; }
.el-field input { width: 100%; }

/* ---- toast ---- */
.el-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    z-index: 100020; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
    padding: 10px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid rgba(255,255,255,0.22);
    color: var(--text-primary); font-size: 0.9rem; box-shadow: var(--lift-3); }
.el-toast .el-svg { color: var(--jade); }
.el-toast.is-bad .el-svg { color: var(--danger); }

/* ---- workspace pages ---- */
.ws-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.ws-head h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--text-primary); margin: 0; text-wrap: balance; }
.ws-head .ws-sub { color: var(--text-muted); margin-top: 6px; max-width: 70ch; font-size: 0.92rem; line-height: 1.55; }
.ws-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ws-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); color: var(--text-primary);
    font: inherit; font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.ws-btn:hover { border-color: var(--accent-solid); }
.ws-btn.is-gold { background: var(--accent-glow); color: var(--on-accent); border-color: transparent; }
.ws-btn.is-gold:hover { filter: brightness(1.06); }
.ws-btn.is-quiet { background: transparent; border-color: transparent; color: var(--text-secondary); }
.ws-btn.is-quiet:hover { background: rgba(255,255,255,0.05); }
.ws-btn.is-sm { padding: 5px 10px; font-size: 0.8rem; border-radius: 8px; }
.ws-btn.is-danger { color: var(--danger); border-color: rgba(248,113,113,0.35); }
.ws-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ws-btn .el-svg { width: 15px; height: 15px; }
.ws-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.ws-grid.g2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ws-grid.g2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ws-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ws-grid.g2, .ws-grid.g2e, .ws-grid.g3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ws-grid.g4 { grid-template-columns: minmax(0, 1fr); } .ws-head h1 { font-size: 1.4rem; } }
.ws-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 18px; min-width: 0;
    display: flex; flex-direction: column; gap: 14px; }
.ws-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ws-card-h h2, .ws-card h2 { font-size: 1.02rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.ws-card-h .el-muted { font-size: 0.82rem; }
.ws-rows { display: flex; flex-direction: column; }
.ws-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--card-border); min-width: 0; }
.ws-row:first-child { border-top: 0; padding-top: 0; }
.ws-row:last-child { padding-bottom: 0; }
.ws-row .ws-grow { flex: 1; min-width: 0; }
.ws-row .ws-t { font-weight: 700; color: var(--text-primary); font-size: 0.92rem; overflow-wrap: anywhere; }
.ws-row .ws-m { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
.ws-row.is-link { cursor: pointer; text-decoration: none; color: inherit; }
.ws-row.is-link:hover .ws-t { color: #b5ff3b; }
.ws-sev { width: 4px; align-self: stretch; border-radius: 4px; background: rgba(255,255,255,0.14); flex: none; }
.ws-sev.is-warn { background: var(--warn); } .ws-sev.is-bad { background: var(--danger); }
.ws-sev.is-gold { background: var(--accent-solid); } .ws-sev.is-jade { background: var(--jade); }
.ws-kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px; min-width: 0;
    display: flex; flex-direction: column; gap: 5px; }
.ws-kpi .l { color: var(--text-secondary); font-size: 0.84rem; }
.ws-kpi .v { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ws-kpi .d { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.ws-kpi .d.up { color: var(--jade); } .ws-kpi .d.down { color: var(--danger); }
.ws-kpi .el-chip { align-self: flex-start; }
.ws-empty { border: 1px dashed rgba(255,255,255,0.2); border-radius: var(--r-md); padding: 26px 20px; text-align: center;
    display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--text-secondary); }
.ws-empty p { max-width: 56ch; font-size: 0.9rem; line-height: 1.55; margin: 0; }
.ws-empty h3 { color: var(--text-primary); font-size: 1rem; margin: 0; }
.ws-note { font-size: 0.84rem; color: var(--text-muted); min-height: 1.2em; }
.ws-note.is-bad { color: var(--danger); } .ws-note.is-good { color: var(--jade); }
.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--card-border); overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.ws-tabs::-webkit-scrollbar { display: none; }
/* Phase 57: on a phone the last tabs fade out at the edge, so it is clear the row scrolls. */
@media (max-width: 760px) { .ws-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 28px; } }
.ws-tabs a { color: var(--text-secondary); padding: 10px 12px; border-bottom: 2px solid transparent; white-space: nowrap;
    font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.ws-tabs a:hover { color: var(--text-primary); }
.ws-tabs a[aria-selected="true"] { color: #b5ff3b; border-bottom-color: var(--accent-solid); font-weight: 800; }
.ws-tabs .n { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ws-table-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--r-md); background: var(--card-bg); }
.ws-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ws-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
    font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--card-border); white-space: nowrap; background: none; }
.ws-table td { padding: 12px 14px; border-bottom: 1px solid var(--card-border); vertical-align: middle; color: var(--text-secondary); }
.ws-table tr:last-child td { border-bottom: 0; }
.ws-table tbody tr.is-link { cursor: pointer; }
.ws-table tbody tr.is-link:hover td { background: rgba(255,255,255,0.025); }
.ws-table .t { font-weight: 700; color: var(--text-primary); }
.ws-table .s { color: var(--text-muted); font-size: 0.8rem; }
.ws-num { font-variant-numeric: tabular-nums; }
.ws-nowrap { white-space: nowrap; }
.ws-avatars { display: inline-flex; }
.ws-avatars .el-avatar { width: 26px; height: 26px; font-size: 0.64rem; margin-left: -6px; border-color: var(--surface-1); }
.ws-avatars .el-avatar:first-child { margin-left: 0; }
.ws-form { display: grid; gap: 14px; }
.ws-form.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ws-form.two { grid-template-columns: minmax(0, 1fr); } }
.ws-form label { margin: 0 0 6px; }
.ws-form .ws-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }
.ws-option { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); border-radius: 12px; padding: 12px 14px; }
.ws-option[aria-pressed="true"] { border-color: var(--accent-solid); background: var(--accent-dim); }
.ws-option .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); flex: none; margin-top: 2px; }
.ws-option[aria-pressed="true"] .radio { border: 5px solid var(--accent-solid); }
.ws-option b { display: block; color: var(--text-primary); }
.ws-option span { color: var(--text-muted); font-size: 0.85rem; }
.ws-stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-stepper span { font-size: 0.76rem; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); color: var(--text-muted); }
.ws-stepper span.is-on { background: var(--accent-dim); color: #b5ff3b; border-color: transparent; font-weight: 700; }
.ws-stepper span.is-done { color: var(--jade); background: rgba(181,255,59,0.12); border-color: transparent; }
.ws-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ws-filters button { border: 1px solid rgba(255,255,255,0.18); background: transparent; color: var(--text-secondary); cursor: pointer;
    border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.84rem; }
.ws-filters button[aria-pressed="true"] { background: var(--accent-dim); border-color: transparent; color: #b5ff3b; font-weight: 700; }
.ws-crumb { display: flex; gap: 8px; align-items: center; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px; }
.ws-crumb a { color: var(--text-muted); text-decoration: none; }
.ws-crumb a:hover { color: var(--text-primary); }
.ws-setup { border: 1px solid rgba(255,255,255,0.2); background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ws-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ws-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ws-steps { grid-template-columns: minmax(0, 1fr); } }
.ws-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg-color);
    border: 1px solid var(--card-border); min-width: 0; }
.ws-step .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); display: grid; place-items: center; flex: none; color: var(--on-accent); }
.ws-step .tick .el-svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ws-step.is-done .tick { background: var(--jade); border-color: var(--jade); }
.ws-step.is-done .ws-t { color: var(--text-muted); text-decoration: line-through; }
.ws-step a { color: var(--accent-solid); font-weight: 700; font-size: 0.82rem; text-decoration: none; }
.ws-link { color: var(--accent-solid); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-size: 0.86rem;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.ws-link:hover { text-decoration: underline; }
.ws-link .el-svg { width: 14px; height: 14px; }

/* ---- the task board ---- */
.ws-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.ws-col { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 10px;
    display: flex; flex-direction: column; gap: 8px; min-height: 220px; min-width: 0; }
.ws-col.is-over { border-color: var(--accent-solid); background: rgba(24,106,255,0.06); }
.ws-col-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; font-weight: 800; color: var(--text-primary); font-size: 0.9rem; }
.ws-col-h .n { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.ws-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ws-card-k { background: var(--bg-color); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; cursor: grab;
    display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
.ws-card-k:hover { border-color: rgba(255,255,255,0.25); }
.ws-card-k:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.ws-card-k.is-dragging { opacity: 0.45; }
.ws-card-k .kt { font-weight: 700; font-size: 0.9rem; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.ws-card-k.is-done .kt { color: var(--text-muted); text-decoration: line-through; }
.ws-card-k .kf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.76rem; color: var(--text-muted); }
.ws-card-k .kf .el-avatar { width: 24px; height: 24px; font-size: 0.6rem; }
.ws-card-k .ksrc { font-size: 0.74rem; color: var(--text-muted); display: flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ws-card-k .ksrc .el-svg { width: 13px; height: 13px; }
.ws-due { font-variant-numeric: tabular-nums; }
.ws-due.is-late { color: var(--danger); font-weight: 700; }
.ws-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 1px 8px; }
.ws-lbl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--text-muted)); }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-addcard { border: 1px dashed rgba(255,255,255,0.22); background: transparent; color: var(--text-secondary); border-radius: 10px;
    padding: 8px; display: flex; gap: 6px; align-items: center; justify-content: center; font: inherit; font-size: 0.84rem; cursor: pointer; }
.ws-addcard:hover { border-color: var(--accent-solid); color: #b5ff3b; }
.ws-addcard .el-svg { width: 14px; height: 14px; }
.ws-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; text-align: left; width: 100%;
    cursor: pointer; font: inherit; color: var(--text-secondary); }
.ws-check .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,0.3); display: grid; place-items: center; flex: none; color: var(--on-accent); }
.ws-check .box .el-svg { width: 12px; height: 12px; stroke-width: 2.8; }
.ws-check[aria-checked="true"] .box { background: var(--jade); border-color: var(--jade); }
.ws-check[aria-checked="true"] span:last-child { color: var(--text-muted); text-decoration: line-through; }
.ws-comment { display: flex; gap: 10px; align-items: flex-start; }
.ws-comment .el-avatar { width: 28px; height: 28px; font-size: 0.64rem; }
.ws-comment .body { background: var(--bg-color); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px;
    font-size: 0.88rem; min-width: 0; flex: 1; color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; }
.ws-comment .body .meta { color: var(--text-muted); font-size: 0.74rem; margin-bottom: 2px; white-space: normal; }
.ws-toggle { width: 40px; height: 22px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.12); position: relative; flex: none; cursor: pointer; }
.ws-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s ease; }
.ws-toggle[aria-checked="true"] { background: var(--jade); }
.ws-toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.ws-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .ws-toggle::after { transition: none; } }

/* =========================================================================
   PHASE 34 — THE REPORT A CLIENT READS
   One document in four places: the staff page, the owner's portal, a share
   link and paper. Numbered sections, words beside every number. report-view.js
   writes the markup; these are its only styles (rule 17).
   ========================================================================= */
.rp { max-width: 1040px; display: flex; flex-direction: column; gap: 30px; }
.rp-cover { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.rp-cover h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin: 0;
    color: var(--text-primary); text-wrap: balance; overflow-wrap: anywhere; }
.rp-by { color: var(--text-secondary); font-size: 0.92rem; margin: 0; line-height: 1.55; }
.rp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.rp-toolbar .el-actions { margin: 0; }
.rp-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-sec h2 { display: flex; align-items: baseline; gap: 10px; font-size: 1.22rem; font-weight: 800; margin: 0; color: var(--text-primary); }
.rp-n { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 600; color: var(--accent-solid); }
.rp-lead { margin: -6px 0 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; max-width: 80ch; }
.rp-h3 { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); margin: 4px 0 0; }
.rp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rp-cards { grid-template-columns: minmax(0, 1fr); } }
.rp-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px;
    display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-big { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.01em; }
.rp-card.is-good .rp-big { color: var(--jade); }
.rp-card.is-watch .rp-big { color: var(--warn); }
.rp-card p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.rp-verdict { font-size: 1.12rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); margin: 0; max-width: 72ch; }
.rp-prose { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; max-width: 80ch; }
.rp-prose p { margin: 0 0 10px; }
.rp-prose p:last-child { margin: 0; }
.rp-note { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0; max-width: 80ch; }
.rp-src { color: var(--text-muted); font-size: 0.8rem; line-height: 1.55; margin: 0; }
.rp-flag { margin: 0; padding: 12px 16px; border-radius: var(--r-md); font-size: 0.9rem; line-height: 1.55;
    background: rgba(251,191,36,0.09); border: 1px solid rgba(251,191,36,0.26); color: var(--warn); }
.rp-table td.now { font-weight: 800; color: var(--text-primary); }
.rp-table td.num, .rp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table tr.rp-group th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-solid);
    padding: 14px 14px 6px; border-bottom: 1px solid var(--card-border); background: none; }
.rp-table .s a { color: var(--accent-solid); text-decoration: none; font-weight: 700; }
.rp-posts .t { font-weight: 600; max-width: 52ch; }
.rp-recs td { vertical-align: top; line-height: 1.5; }
.rp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .rp-two { grid-template-columns: minmax(0, 1fr); } }
.rp-col { background: var(--card-bg); border: 1px solid var(--card-border); border-top: 3px solid var(--card-border); border-radius: var(--r-md);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-col.is-good { border-top-color: var(--jade); }
.rp-col.is-watch { border-top-color: var(--warn); }
.rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-list li { position: relative; padding-left: 18px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.rp-list li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); }
.rp-list.is-good li::before { background: var(--jade); }
.rp-list.is-watch li::before { background: var(--warn); }
.rp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-points li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 3px solid var(--card-border); }
.rp-points li.is-good { border-left-color: var(--jade); }
.rp-points li.is-watch { border-left-color: var(--warn); }
.rp-points b { color: var(--text-primary); font-size: 0.9rem; line-height: 1.45; }
.rp-points span { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.rp-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 24px; }
.rp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 0.86rem; margin-top: 8px; }
.rp-bar .lab { color: var(--text-secondary); overflow-wrap: anywhere; }
.rp-bar .pc { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-bar .track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.rp-bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--jade); }
.rp-standing { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px; }
.rp-standing p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }
.rp-standing .rp-verdict { color: var(--text-primary); }
.rp-ranks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-ranks li { flex: 1 1 110px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; min-width: 0;
    border: 1px solid var(--card-border); background: var(--bg-color); }
.rp-ranks li span { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.rp-ranks li b { font-size: 0.88rem; color: var(--text-primary); overflow-wrap: anywhere; }
.rp-ranks li.is-you { border-color: var(--jade); background: rgba(181,255,59,0.12); }
.rp-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(181,255,59,0.12); color: var(--jade); }
.rp-ic .el-svg { width: 15px; height: 15px; }
.rp-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.rp-steps li { color: var(--text-secondary); line-height: 1.55; padding-left: 4px; }
.rp-steps li .t { color: var(--text-primary); font-weight: 600; margin-right: 10px; }
.rp-about { display: flex; flex-direction: column; gap: 8px; color: var(--text-muted); font-size: 0.86rem; line-height: 1.6;
    border-top: 1px solid var(--card-border); padding-top: 12px; }
.rp-about p { margin: 0; }
.rp-about b { color: var(--text-secondary); }
.rp-missing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-missing li { font-size: 0.84rem; padding: 6px 11px; border-radius: 8px; background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.22); color: var(--danger); }
.rp-ideas { display: flex; flex-direction: column; gap: 12px; }
.rp-idea { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px 18px; }
.rp-idea-top { display: flex; gap: 12px; align-items: flex-start; }
.rp-idea-top b { color: var(--text-primary); font-size: 0.98rem; line-height: 1.35; }
.rp-idea-n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800;
    background: var(--accent-glow); color: var(--on-accent); }
.rp-hook { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent-solid); background: rgba(24,106,255,0.08);
    border-radius: 0 10px 10px 0; color: var(--text-primary); line-height: 1.55; }
.rp-script { margin: 8px 0 8px 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }
.rp-meta { margin: 6px 0 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; }
.rp-meta b { color: var(--text-primary); }

/* ---- paper ----
   Until phase 34 nothing here had print rules, so "Save as PDF" on any page
   printed pale text on white with the menu down the side. On paper the
   palette turns light and the app around the content goes; a page that
   reads on screen reads on paper without its own rules. */
@page { margin: 14mm 12mm; }
@media print {
    :root {
        --bg-color: #fff; --card-bg: #fff; --surface-1: #fff; --surface-2: #fff; --input-bg: #fff; --terminal-bg: #fff;
        --card-border: #d8d2c3; --card-edge: #d8d2c3;
        --text-primary: #10201a; --text-secondary: #2c3b34; --text-muted: #56675f;
        --accent-solid: #8a6a1f; --accent-dim: #f4ecda; --jade: #186aff; --success: #186aff; --warn: #955f00; --danger: #b42318;
    }
    html, body { background: #fff !important; }
    body, body.el-has-sidebar, body.el-has-header, body.el-share.el-has-header, body.el-embed, body.el-has-plan {
        padding: 0 !important; margin: 0 !important; max-width: none !important; background-image: none !important; }
    .el-sidebar, .el-topbar, .el-scrim, .el-share-bar, .el-plan, .el-toast, .el-drawer-wrap, .el-workfor,
    .el-actions, .no-print, #report-actions { display: none !important; }
    .rp { max-width: none; gap: 22px; }
    .rp-cover { background: none; border: 0; border-bottom: 2px solid var(--text-primary); border-radius: 0; padding: 0 0 16px; }
    .rp-card, .rp-col, .rp-standing, .rp-idea, .ws-table-wrap, .card, .ws-card { box-shadow: none; }
    .ws-table-wrap { overflow: visible; }
    .rp-sec h2, .rp-h3 { break-after: avoid; page-break-after: avoid; }
    .rp-card, .rp-col, .rp-standing, .rp-ranks li, .rp-bar, .rp-idea, .ws-row, .ws-table tr { break-inside: avoid; page-break-inside: avoid; }
    .el-chip { border-color: var(--card-border) !important; }
    .el-chip.is-gold { color: var(--accent-solid); }
    .rp-bar .track { background: #ebe6d9; }
    .rp-bar .track, .rp-bar .track i, .rp-idea-n, .rp-list li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Paper is narrower than the screen breakpoints, and a report reads
       better with its cards side by side than stacked down the first page. */
    .rp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   PHASE 35 — ASK AI ABOUT ONE CLIENT
   The Overview's launcher (.is-compact) and the Ask AI tab's thread.
   ========================================================================= */
.ws-ask h2 { display: flex; align-items: center; gap: 8px; }
.ws-ask h2 .el-svg { width: 17px; height: 17px; color: var(--accent-solid); }
.ws-ask-lead { margin: -4px 0 0; line-height: 1.55; }
.ws-ask-form { display: flex; gap: 8px; align-items: flex-end; }
.ws-ask-form input, .ws-ask-form textarea { flex: 1; min-width: 0; resize: vertical; font: inherit; }
.ws-ask-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-ask-sugg:empty { display: none; }
.ws-chipbtn { border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); color: var(--text-secondary); cursor: pointer;
    border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.83rem; text-align: left; }
.ws-chipbtn:hover { border-color: var(--accent-solid); color: var(--text-primary); }
.ws-ask-thread { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.ws-ask-thread:empty { display: none; }
.ws-ask-q { align-self: flex-end; max-width: 80%; background: var(--accent-dim); color: var(--text-primary); border-radius: 12px 12px 4px 12px;
    padding: 9px 13px; font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.ws-ask-a { align-self: flex-start; max-width: 92%; background: var(--bg-color); border: 1px solid var(--card-border); border-radius: 12px 12px 12px 4px;
    padding: 11px 14px; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.ws-ask-a p { margin: 0 0 8px; } .ws-ask-a p:last-child { margin: 0; }
.ws-ask-a ul, .ws-ask-a ol { margin: 0 0 8px 20px; display: flex; flex-direction: column; gap: 4px; }
.ws-ask-a b { color: var(--text-primary); }
.ws-ask-status { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.86rem; }
.ws-ask.is-compact { gap: 12px; }
@media (max-width: 560px) { .ws-ask-form { flex-direction: column; align-items: stretch; } .ws-ask-q, .ws-ask-a { max-width: 100%; } }

/* =========================================================================
   PHASE 36 — REPORT DOCUMENTS
   The blocks report-view.js draws for a server-built document (Instagram
   audit, competitor intel, and the reports that follow). rp-* from phase 34
   supplies the page, cover and section frame.
   ========================================================================= */
.rd-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.rd-src { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--card-border); color: var(--text-muted); }
.rd-src::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rd-src.rd-pub { color: #8fb4dd; } .rd-src.rd-meta { color: var(--jade); } .rd-src.rd-ours { color: #c3a6e6; } .rd-src.rd-ai { color: var(--accent-solid); }
.rd-receipt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); margin-top: 8px; }
.rd-receipt div { padding: 12px 10px 12px 0; min-width: 0; }
.rd-receipt b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rd-receipt small { color: var(--text-muted); font-size: 0.76rem; }
@media (max-width: 640px) { .rd-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rd-kpi .l { font-size: 0.8rem; color: var(--text-muted); }
.rd-kpi .v { font-size: 1.45rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.rd-kpi .s { font-size: 0.78rem; color: var(--text-secondary); }
.rd-kpi.is-good .v { color: var(--jade); } .rd-kpi.is-bad .v { color: var(--danger); } .rd-kpi.is-watch .v { color: var(--warn); }
.rd-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-row { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 860px) { .rd-row { grid-template-columns: minmax(0, 1fr); } }
.rd-cell { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-bars { display: flex; flex-direction: column; gap: 8px; }
.rd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 0.86rem; }
.rd-bar .lab { color: var(--text-secondary); overflow-wrap: anywhere; }
.rd-bar .val { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rd-bar .track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.rd-bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--jade); }
.rd-bar.is-gold .track i { background: var(--accent-solid); } .rd-bar.is-watch .track i { background: var(--warn); } .rd-bar.is-muted .track i { background: var(--text-muted); } .rd-bar.is-bad .track i { background: var(--danger); }
.rp-table tr.rd-you td { background: rgba(181,255,59,0.12); color: var(--text-primary); font-weight: 700; }
.rp-table .is-good { color: var(--jade); font-weight: 700; } .rp-table .is-bad { color: var(--danger); font-weight: 700; }
.rd-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.rd-post { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-img { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #186aff, #186aff); display: flex; align-items: flex-end; }
.rd-img[data-kind="Photo"] { background: linear-gradient(160deg, #3a4a43, #b8913f); }
.rd-img[data-kind="Carousel"] { background: linear-gradient(160deg, #294d3f, #7fb89e); }
.rd-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-img span { position: relative; margin: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(4,16,11,0.72); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.rd-post figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; }
.rd-post figcaption b { color: var(--text-primary); line-height: 1.35; }
.rd-post .m { color: var(--text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.rd-post .el-chip { align-self: flex-start; }
.rd-post.is-weak .rd-img { filter: grayscale(0.7); }
.rd-link { color: var(--accent-solid); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.rd-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.rd-points li { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.rd-points li b { color: var(--text-primary); }
.rd-points li span::before { content: ' '; }
.rd-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .rd-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rd-weeks { grid-template-columns: minmax(0, 1fr); } }
.rd-week { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.rd-week .w { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--accent-solid); letter-spacing: 0.05em; text-transform: uppercase; }
.rd-week ul { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--text-secondary); }
.rd-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 0.86rem; }
.rd-checks li { color: var(--text-secondary); }
.rd-checks li::before { font-weight: 800; margin-right: 6px; }
.rd-checks li.ok::before { content: '✓'; color: var(--jade); }
.rd-checks li.no { color: var(--danger); }
.rd-checks li.no::before { content: '✗'; }
.rd-heat { display: grid; grid-template-columns: 36px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: 0.68rem; color: var(--text-muted); }
.rd-heat .h { text-align: center; }
.rd-heat i { aspect-ratio: 1.8; border-radius: 3px; background: rgba(63,191,143,var(--a, 0.05)); }
.rd-line .g { stroke: var(--card-border); } .rd-line .t { fill: var(--text-muted); font-size: 10px; }
.rd-line polyline { stroke-width: 2.5; } .rd-line .rd-s1 { stroke: var(--jade); } .rd-line .rd-s2 { stroke: #8fb4dd; } .rd-line .rd-s3 { stroke: var(--accent-solid); }
.rd-line circle.rd-s1 { fill: var(--jade); } .rd-line circle.rd-s2 { fill: #8fb4dd; } .rd-line circle.rd-s3 { fill: var(--accent-solid); }
.rd-key { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; background: var(--jade); }
.rd-key.rd-s2 { background: #8fb4dd; } .rd-key.rd-s3 { background: var(--accent-solid); }
.rd-missing { border: 1px dashed var(--accent-solid); background: var(--accent-dim); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--text-secondary); }
.rd-missing b { color: var(--text-primary); }
@media print {
    .rd-src.rd-pub { color: #2f5d8a; } .rd-src.rd-ours { color: #6a4a91; }
    .rd-kpi, .rd-box, .rd-post, .rd-week, .rd-row { break-inside: avoid; page-break-inside: avoid; }
    .rd-bar .track { background: #ebe6d9; }
    .rd-bar .track, .rd-bar .track i, .rd-heat i, .rd-img, .rd-img span, .rd-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rd-heat i { background: rgba(12,120,86,var(--a, 0.05)); }
    .rd-line .rd-s2, .rd-key.rd-s2 { stroke: #2f5d8a; }
    .rd-weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rd-kpis { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
    .rd-row { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
}
/* phase 37: a Facebook post quoted word for word */
.rd-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rd-quote { margin: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-quote .el-chip { align-self: flex-start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rd-quote blockquote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent-solid); background: rgba(24,106,255,0.07); border-radius: 0 8px 8px 0; color: var(--text-primary); font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.rd-quote figcaption { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media print { .rd-quote { break-inside: avoid; page-break-inside: avoid; } }

/* ===================================================================
   PHASE 40 — who a lead is, and the pipeline (leads.html, pipeline.html,
   leads-ui.js). ld-* is the lead drawer and chips; pl-* the board.
   =================================================================== */
.ld-kind { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,0.05); color: var(--text-muted); }
.ld-kind.is-influencer { background: rgba(236,72,153,0.14); color: #f9a8d4; }
.ld-kind.is-business { background: rgba(59,130,246,0.14); color: #93c5fd; }
.ld-kind.is-personal { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.ld-kind.is-unsure { background: rgba(251,191,36,0.12); color: var(--warn); }
.ld-fit { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 0.74rem; font-weight: 800;
    font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.ld-fit.is-good { background: rgba(181,255,59,0.16); color: var(--jade); }
.ld-fit.is-mid { background: var(--accent-dim); color: #b5ff3b; }
.ld-sec { display: flex; flex-direction: column; gap: 8px; }
.ld-h { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.ld-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-stage { font-size: 0.8rem; color: var(--text-muted); }
.ld-ask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-secondary); }
.ld-ask > span { margin-right: 4px; font-weight: 700; }
.ld-pick { font: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); color: var(--text-secondary); }
.ld-pick:hover { border-color: var(--accent-solid); color: var(--text-primary); }
.ld-pick.is-on { background: rgba(181,255,59,0.18); border-color: var(--jade); color: var(--text-primary); }
.ld-pick.is-quiet { background: none; border-color: transparent; color: var(--text-muted); text-decoration: underline; }
.ld-pick:focus-visible, .ld-st:focus-visible, .ld-pipe:focus-visible, .pl-card:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.ld-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.86rem; color: var(--text-secondary); }
.ld-reasons li { display: flex; gap: 8px; line-height: 1.45; }
.ld-reasons .mk { flex: none; width: 16px; text-align: center; font-weight: 800; color: var(--text-muted); }
.ld-reasons li.is-plus .mk { color: var(--jade); }
.ld-reasons li.is-minus .mk { color: var(--danger); }
.ld-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ld-facts > div { padding: 10px 12px; border-radius: var(--r-md); background: rgba(255,255,255,0.035); border: 1px solid var(--card-border); min-width: 0; }
.ld-facts b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ld-facts small { display: block; font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere; }
.ld-line { margin: 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.ld-line a, .ld-contact a { color: var(--accent-solid); }
.ld-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent-solid); background: rgba(24,106,255,0.07); border-radius: 0 8px 8px 0;
    font-size: 0.86rem; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.ld-contact { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.ld-pipes { display: flex; flex-direction: column; gap: 6px; }
.ld-pipe { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--r-md);
    background: rgba(255,255,255,0.035); border: 1px solid var(--card-border); color: var(--text-secondary); font-size: 0.82rem; }
.ld-pipe b { color: var(--text-primary); font-size: 0.88rem; }
.ld-pipe:hover { border-color: var(--accent-solid); }
.ld-add { margin-top: 4px; }
.ld-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ld-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-st { font: inherit; font-size: 0.8rem; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); color: var(--text-secondary); }
.ld-st.is-on { background: var(--accent-dim); border-color: var(--accent-solid); color: var(--text-primary); }
.ld-msg { width: 100%; font: inherit; font-size: 0.9rem; line-height: 1.5; }
.ld-nform { display: flex; gap: 8px; }
.ld-nform input { flex: 1; min-width: 0; }
.ld-notes { display: flex; flex-direction: column; gap: 8px; }
.ld-n { padding: 8px 12px; border-radius: var(--r-md); background: rgba(255,255,255,0.035); border: 1px solid var(--card-border);
    font-size: 0.86rem; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.ld-n.is-auto { background: none; border-style: dashed; color: var(--text-muted); }
.ld-n .meta { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 2px; }

/* the lead list (leads.html) */
.ll-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ll-kind { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.035); border: 1px solid var(--card-border); color: var(--text-secondary); display: inline-flex; gap: 8px; align-items: center; }
.ll-kind b { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 800; }
.ll-kind.is-on { background: var(--accent-dim); border-color: var(--accent-solid); color: var(--text-primary); }
.ll-kind.is-on b { color: #b5ff3b; }
.ll-kind:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.ll-why { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; max-width: 260px; }
.ll-open { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-primary); font-weight: 700; text-align: left; }
.ll-open:hover { color: var(--accent-solid); text-decoration: underline; }
.ll-pipe { display: flex; flex-direction: column; gap: 3px; font-size: 0.76rem; color: var(--text-secondary); }
.ll-pipe span { white-space: nowrap; }
.ll-sel { width: 18px; height: 18px; accent-color: var(--jade); cursor: pointer; }
.ll-bulk { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid rgba(255,255,255,0.22); box-shadow: var(--lift-3); margin-top: 14px; }
.ll-bulk b { color: var(--text-primary); }
.ll-bulk select { width: auto; min-width: 0; max-width: 100%; }
.ll-bulk .grow { flex: 1; }

/* the pipeline board (pipeline.html) */
.pl-top { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pl-top > div { min-width: 0; }
.pl-top select { width: auto; max-width: 100%; }
.pl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pl-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-md); background: rgba(255,255,255,0.02); border: 1px solid var(--card-border); }
.pl-col h3 { display: flex; justify-content: space-between; margin: 0 0 2px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.pl-col h3 b { font-variant-numeric: tabular-nums; }
.pl-card { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px;
    background: var(--surface-1); border: 1px solid var(--card-border); color: var(--text-secondary); font-size: 0.8rem; min-width: 0; }
.pl-card:hover { border-color: rgba(255,255,255,0.35); }
.pl-card .t { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.pl-card .t b { color: var(--text-primary); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card .m { color: var(--text-muted); overflow-wrap: anywhere; }
.pl-card .n { color: var(--text-secondary); font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-due { font-weight: 800; }
.pl-due.is-overdue { color: var(--danger); }
.pl-due.is-today { color: var(--warn); }
.pl-next { font: inherit; font-size: 0.74rem; font-weight: 700; align-self: flex-start; padding: 4px 9px; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); color: var(--text-secondary); }
.pl-next:hover { color: var(--text-primary); border-color: var(--accent-solid); }
.pl-empty { padding: 30px 16px; text-align: center; color: var(--text-muted); line-height: 1.7; }
.pl-empty a { color: var(--accent-solid); }
.ll-scroll { overflow-x: auto; }
.ll-pipe span { white-space: normal; }
.ld-sec .ws-hint, .ld-actions .ws-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
/* The toggles pipeline.html shares with leads.html (whose copy is page-local). */
.pl-top .ll-toggles { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-end; }
.pl-top .ll-tog { font-size: 0.79rem; padding: 8px 13px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); color: var(--text-secondary); font-family: inherit; font-weight: 600; }
.pl-top .ll-tog.is-on { background: rgba(24,106,255,0.18); border-color: var(--jade); color: var(--text-primary); }
.pl-note { font-size: 0.84rem; color: var(--warn); margin: 12px 0 0; min-height: 1em; }
.el-drawer-t p a { color: var(--accent-solid); }

/* ===================================================================
   PHASE 41 — the review tracker (reviews.html)
   =================================================================== */
.rv-form { margin-top: 12px; }
.rv-go { margin-top: 16px; }
.rv-link { color: var(--accent-solid); }

/* ===================================================================
   PHASE 42 — the content calendar (content-calendar.js) and the owner's
   approval list (client.html). cp-*.
   =================================================================== */
.cp-own { margin-bottom: 18px; }
.cp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cp-card { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--surface-1); border: 1px solid var(--card-border); color: var(--text-secondary); font-size: 0.84rem; min-width: 0; }
.cp-card.is-staff { cursor: pointer; }
.cp-card.is-staff:hover { border-color: rgba(255,255,255,0.35); }
.cp-card.is-staff:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.cp-card.is-idea { border-left: 3px solid var(--warn); }
.cp-card.is-changes { border-left: 3px solid var(--danger); }
.cp-card.is-approved, .cp-card.is-made { border-left: 3px solid var(--accent-solid); }
.cp-card.is-posted { border-left: 3px solid var(--jade); }
.cp-card.is-skipped { opacity: 0.6; }
.cp-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.74rem; }
.cp-date { font-weight: 800; color: var(--text-primary); }
.cp-fmt { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--text-muted); }
.cp-st { margin-left: auto; color: var(--text-muted); }
.cp-hook { margin: 0; font-size: 0.94rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; overflow-wrap: anywhere; }
.cp-line { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.cp-cap summary { cursor: pointer; color: var(--accent-solid); font-size: 0.8rem; }
.cp-cap p { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.5; color: var(--text-primary); }
.cp-link { color: var(--accent-solid); font-size: 0.8rem; }
.cp-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cp-change { display: flex; flex-direction: column; gap: 6px; }
.cp-change textarea { width: 100%; font: inherit; }
.cp-empty p { line-height: 1.6; color: var(--text-secondary); max-width: 70ch; }
.cp-inl { margin: 0; }
.cp-sum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-muted); margin: 12px 0; }
.cp-sum b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cp-week { margin-top: 14px; }
.cp-week h4 { margin: 0 0 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.cp-script { margin: 0; padding-left: 20px; font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }
.rv-step { display: flex; align-items: center; gap: 10px; }
.rv-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-dim); color: #b5ff3b; font-weight: 800; font-size: 0.86rem; flex: none; }
.rv-h { margin: 0; font-size: 1.05rem; }
.rv-src { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--card-border); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 10px; }
.rv-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; }
.rv-toggle input { width: 18px; height: 18px; accent-color: var(--jade); }
.rv-toggle .el-muted { font-size: 0.8rem; }
.rv-wide { grid-column: 1 / -1; }
.rv-mini { gap: 10px; }
.rv-table td { vertical-align: middle; }
.rv-meta { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.rv-table .rv-handle { width: 100%; min-width: 130px; }
.rv-add { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.rv-add input { flex: 1; min-width: 0; }
.rv-opts { margin-top: 16px; }
.rv-src .ws-hint, #rv-list-box .ws-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }
.rv-src label { margin-top: 0; }

/* ---- content plan the agency way (phase 43): cs-* ------------------------------- */
.cs-modes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.cs-empty { padding: 14px 16px; border: 1px dashed var(--card-border); border-radius: var(--r-md); color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; }
.cs-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cs-inl { display: inline-block; margin: 0 8px 0 0; font-size: 0.74rem; font-weight: 700; color: var(--accent-solid); }
.cs-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.cs-counts b { color: var(--text-primary); font-size: 0.95rem; margin-right: 3px; }
.cs-step { border-top: 1px solid var(--card-border); padding: 20px 0 6px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-step > header { display: flex; gap: 12px; align-items: flex-start; }
.cs-step > header h3 { margin: 0; font-size: 1.02rem; color: var(--text-primary); }
.cs-step > header p { margin: 3px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.cs-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
    background: var(--accent-dim); color: var(--accent-solid); border: 1px solid rgba(24,106,255,0.35); }
.cs-sub { margin: 10px 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cs-audit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.cs-audit label { margin: 0 0 6px; }
@media (max-width: 640px) { .cs-audit { grid-template-columns: minmax(0, 1fr); } }
.cs-banner { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); color: var(--warn); padding: 10px 14px; border-radius: var(--r-md);
    font-size: 0.84rem; line-height: 1.5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs-biz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .cs-biz { grid-template-columns: minmax(0, 1fr); } }
.cs-biz-main, .cs-offers { background: var(--surface-1); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 14px 16px; min-width: 0; }
.cs-sum { margin: 0 0 10px; color: var(--text-primary); line-height: 1.55; }
.cs-biz dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 0.84rem; }
.cs-biz dt { color: var(--text-muted); font-weight: 700; }
.cs-biz dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.cs-offers h4 { margin: 0 0 8px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cs-offers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-offers li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--text-primary); }
.cs-offers li small { display: block; color: var(--text-muted); font-size: 0.76rem; }
.cs-offers li b { color: var(--accent-solid); white-space: nowrap; }
.cs-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cs-cat { background: var(--surface-1); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-cat h4 { margin: 0 0 4px; font-size: 0.86rem; color: var(--text-primary); display: flex; justify-content: space-between; }
.cs-cat h4 span { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; }
.cs-topic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: start; padding: 8px; border-radius: var(--r-sm); border: 1px solid transparent; }
.cs-topic.is-on { background: var(--accent-dim); border-color: rgba(24,106,255,0.25); }
.cs-topic input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent-solid); }
.cs-topic-body { display: flex; flex-direction: column; gap: 2px; font-size: 0.84rem; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.cs-topic-body small { color: var(--text-secondary); font-size: 0.76rem; line-height: 1.4; }
.cs-topic-body .cs-why { color: var(--text-muted); font-style: italic; }
.cs-src { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cs-pri { font: inherit; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--card-border); background: transparent; color: var(--text-muted); }
.cs-pri.is-high { color: var(--on-accent); background: var(--accent-solid); border-color: transparent; }
.cs-pri.is-low { opacity: 0.7; }
.cs-x { font: inherit; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.cs-x:hover { color: var(--danger); }
.cs-addtopic { display: flex; gap: 6px; margin-top: 4px; }
.cs-addtopic input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 0.82rem; }
.cs-ideas-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.cs-ideas-topic { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text-primary); }
.cs-catname { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-solid); }
.cs-ideas, .cs-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cs-idea, .cs-card { background: var(--surface-1); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); min-width: 0; }
.cs-idea .ws-btn { align-self: flex-start; margin-top: 4px; }
.cs-idea-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cs-type { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-secondary); }
.cs-type.is-video { color: #b5ff3b; } .cs-type.is-carousel { color: var(--jade); } .cs-type.is-story { color: #c4b5fd; } .cs-type.is-static { color: var(--text-secondary); }
.cs-hook { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; overflow-wrap: anywhere; }
.cs-seen { margin: 0; color: var(--text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.cs-seen a, .cs-line a { color: var(--accent-solid); }
.cs-line { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.cs-line b { color: var(--text-primary); font-weight: 700; }
.cs-adapt { color: var(--text-primary); }
.cs-muted { color: var(--text-muted); }
.cs-link { font: inherit; font-size: 0.78rem; background: none; border: 0; padding: 0; color: var(--accent-solid); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cs-scroll { overflow-x: auto; max-width: 100%; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 560px; }
.cs-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
.cs-table td { padding: 9px 10px; border-bottom: 1px solid var(--card-border); color: var(--text-secondary); vertical-align: top; }
.cs-table td b { color: var(--text-primary); }
.cs-table td small { display: block; color: var(--text-muted); font-size: 0.74rem; }
.cs-table tr[data-openpick] { cursor: pointer; }
.cs-table tr[data-openpick]:hover td, .cs-table tr[data-openpick]:focus td { background: rgba(255,255,255,0.03); }
.cs-sched { margin-top: 6px; }
.cs-grow { flex: 1; }
.cs-lib-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cs-lib-head .ws-hint { margin: 0; max-width: 620px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.cs-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.cs-filter input[type=search] { flex: 1; min-width: 200px; max-width: 360px; }
.cs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-tags { margin: 10px 0 4px; }
.cs-tag { font: inherit; font-size: 0.76rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--card-border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.cs-tag span { color: var(--text-muted); }
.cs-tag.is-on { background: var(--accent-dim); border-color: var(--accent-solid); color: var(--text-primary); }
.cs-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; font-size: 0.76rem; }
.cs-step > .ws-hint, .cs-step > .ld-actions .ws-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.cs-step > p.cs-line { font-size: 0.86rem; color: var(--text-secondary); }
.cs-sched input[type=date], .cs-bar input[type=month] { width: auto; }
.cs-sched .cs-inl, .cs-bar .cs-inl { display: inline-block; margin: 0 8px 0 0; }

/* ---- creator posts (phase 46): cr-* --------------------------------------------- */
.cr-for { color: var(--text-muted); font-weight: 600; }
.cr-add { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.cr-add label { margin: 0 0 6px; }
@media (max-width: 720px) { .cr-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cr-add-link { grid-column: 1 / -1; } }
.cr-meta { margin: 10px 0 14px; font-size: 0.8rem; color: var(--text-muted); }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cr-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--card-border); min-width: 0; }
.cr-thumb { width: 88px; height: 110px; object-fit: cover; border-radius: var(--r-sm); display: block; max-width: 100%; }
.cr-thumb.is-empty { background: var(--surface-2); }
.cr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.82rem; color: var(--text-secondary); }
.cr-who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cr-who b { color: var(--text-primary); font-size: 0.9rem; }
.cr-who span { color: var(--text-muted); font-size: 0.76rem; }
.cr-cap { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.cr-nums { display: flex; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cr-nums b { color: var(--text-primary); }
.cr-line { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.cr-muted { color: var(--text-muted); }
.el-modal { max-height: calc(100vh - 40px); overflow-y: auto; }
.el-guide { margin: 0 0 6px; padding: 10px 14px; border: 1px solid rgba(24,106,255,0.3); border-radius: 10px; background: rgba(24,106,255,0.06); }
.el-guide summary { cursor: pointer; font-size: 0.82rem; font-weight: 800; color: #186aff; }
.el-guide ol { margin: 8px 0 2px; padding-left: 18px; font-size: 0.8rem; line-height: 1.55; color: #d4d4d8; }
.el-guide li { margin: 4px 0; }
.el-guide code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.76rem; color: #b5ff3b; }

/* ---- reminder for staff to add their own keys ---------------------------------- */
.el-keynudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
    border-radius: var(--r-md); border: 1px solid rgba(24,106,255,0.45); background: var(--accent-dim); color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.el-keynudge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 10px var(--accent-solid); flex: none; }
.el-keynudge-txt { flex: 1 1 280px; min-width: 0; }
.el-keynudge-txt b { color: var(--text-primary); }
.el-keynudge-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.el-btn.el-needs { position: relative; border-color: rgba(24,106,255,0.6); }
.el-btn.el-needs::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 8px var(--accent-solid); }
@media (prefers-reduced-motion: no-preference) { .el-keynudge-dot { animation: el-pulse 1.6s infinite; } }

/* ---- the Edge mark beside the wordmark ------------------------------------------ */
/* As on edgeleadweb.netlify.app: the gold mark straight on the dark jade, and "EdgeLead" in bold cream. */
.el-logo, .su-logo, .wl-logo { display: inline-flex; align-items: center; gap: 10px;
    background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); letter-spacing: -0.01em; font-weight: 800; }
.el-sidebar a.el-logo { display: inline-flex; }
.el-logo-mark { width: auto; height: 34px; flex: none; }
.el-sidebar .el-logo-mark { height: 36px; }
.el-sidebar .el-logo { font-size: 1.42rem; gap: 12px; }
.el-logo-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
/* "Workspace" under the wordmark, on the team's rail only; owners see EdgeLead alone. */
.el-logo-sub { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-solid); margin-top: 3px; -webkit-text-fill-color: currentColor; }
.el-topbar .el-logo-mark { height: 28px; }
.el-topbar .el-logo { font-size: 1.2rem; }
.el-install-ico img { width: auto; height: 26px; display: block; }

/* ---- phase 48: the task, opened — a Jira-style issue ---------------------------- */
.el-drawer.is-xl { width: min(1080px, 100vw); }
.tk-issue { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }
@media (max-width: 860px) { .tk-issue { grid-template-columns: minmax(0, 1fr); } .tk-side { position: static; } }
.tk-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.tk-title-in { font-size: 1.3rem !important; font-weight: 800; padding: 8px 10px !important; background: transparent !important; border-color: transparent !important; }
.tk-title-in:hover:not(:disabled), .tk-title-in:focus { border-color: var(--card-border) !important; background: var(--input-bg) !important; }
.tk-sec h3 { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.tk-editor { min-height: 120px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--input-bg);
    color: var(--text-primary); font-size: 0.92rem; line-height: 1.65; outline: none; overflow-wrap: anywhere; white-space: pre-wrap; }
.tk-editor.is-small { min-height: 64px; }
.tk-editor:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(24,106,255,0.18); }
.tk-editor.is-drop { border-style: dashed; border-color: var(--accent-solid); background: rgba(24,106,255,0.06); }
.tk-editor.is-ro { background: transparent; border-color: transparent; padding-left: 0; min-height: 0; }
.tk-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.tk-editor a, .tk-rich a { color: var(--accent-solid); }
.tk-img { display: block; max-width: 100%; max-height: 420px; width: auto; margin: 8px 0; border-radius: 8px; border: 1px solid var(--card-border); cursor: zoom-in; }
.tk-rich { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.tk-rich .tk-img { max-height: 280px; }
.tk-img-missing { display: inline-block; margin: 6px 0; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--card-border); color: var(--text-muted); font-size: 0.8rem; }
.tk-img-missing.is-loading { animation: oa-breathe 1.2s ease-in-out infinite; }
.tk-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tk-tools .ws-hint { margin: 0; }
.tk-attach { cursor: pointer; }
/* Documents on a task (phase 62) */
.tk-files { display: grid; gap: 6px; margin-bottom: 8px; }
.tk-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--surface-1); }
.tk-file.is-busy { opacity: .6; }
.tk-file .ws-grow { flex: 1; min-width: 0; }
.tk-file .ws-m { color: var(--text-muted); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
.tk-file-name { display: block; color: var(--text-primary); font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.tk-file-name:hover { text-decoration: underline; }
.tk-file-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; font: 700 .62rem/1 var(--font-display, inherit); letter-spacing: .04em; color: #fff; background: #5b3fd1; }
.tk-file-ic.is-pdf { background: #e5484d; }
.tk-file-ic.is-doc { background: #186aff; }
.tk-file-ic.is-sheet { background: #1f9d55; }
.tk-sec.is-drop { outline: 2px dashed var(--accent-solid); outline-offset: 4px; border-radius: 8px; }
.tk-addrow { display: flex; gap: 8px; margin-top: 8px; }
.tk-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 8px; }
.tk-bar i { display: block; height: 100%; width: 0; background: var(--jade, #b5ff3b); transition: width .2s; }
.tk-step { display: flex; align-items: center; gap: 6px; }
.tk-step .ws-check { flex: 1; }
.tk-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.tk-x:hover { color: var(--danger); background: rgba(248,113,113,0.1); }
.tk-comments { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.tk-compose .tk-tools { justify-content: space-between; }
.tk-side { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255,255,255,0.02); position: sticky; top: 0; }
.tk-field label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.tk-field select, .tk-field input { width: 100%; }
.tk-prio-wrap { display: flex; align-items: center; gap: 8px; }
.tk-prio { flex: none; vertical-align: middle; }
.tk-status { font-weight: 700; }
.tk-status.is-doing { color: var(--accent-solid); } .tk-status.is-waiting { color: var(--warn); } .tk-status.is-done { color: var(--jade, #b5ff3b); }
.tk-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tk-labels .ws-lbl { display: inline-flex; align-items: center; gap: 2px; }
.tk-labels .tk-x { font-size: 0.85rem; padding: 0 2px 0 4px; }
.tk-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-switch b { display: block; font-size: 0.86rem; color: var(--text-primary); }
.tk-switch .ws-hint { display: block; margin: 2px 0 0; }
.tk-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: 0.8rem; }
.tk-facts dt { color: var(--text-muted); }
.tk-facts dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.tk-key { font-family: 'JetBrains Mono', monospace; font-size: 0.78em; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.tk-key.is-sm { font-size: 0.68rem; }

/* Phase 57: links and checkboxes with no rule of their own follow the theme, not the browser's blue. */
a:not([class]) { color: var(--accent-solid); }
a:not([class]):hover { color: #b5ff3b; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--jade, #b5ff3b); }

/* ===========================================================================
   Phase 58: the tool pages in the workspace layout.
   The older pages (Facebook tools, Instagram audit and competitors, leads,
   pipeline, reviews, content plan, creators, schedules, Team & settings) keep
   their markup and behaviour; inside the staff shell they now read like the
   newer ones: a page header on the background, underline tabs, flat cards with
   section-sized titles, and primary buttons sized to their label.
   =========================================================================== */
body.el-has-sidebar .card { padding: 20px; border-radius: var(--r-md); box-shadow: none; backdrop-filter: none; margin-bottom: 16px; }
body.el-has-sidebar .card::before { display: none; }
body.el-has-sidebar .card-title { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 6px; }
body.el-has-sidebar .card-subtitle { font-size: 0.86rem; margin-bottom: 16px; max-width: 80ch; }
body.el-has-sidebar .segment-bar { display: flex; flex-wrap: nowrap; gap: 4px; width: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: none; border: 0; border-bottom: 1px solid var(--card-border); border-radius: 0; padding: 0; margin: 4px 0 18px; }
body.el-has-sidebar .segment-bar::-webkit-scrollbar { display: none; }
body.el-has-sidebar .segment-btn { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; margin-bottom: -1px;
    color: var(--text-secondary); padding: 10px 14px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
body.el-has-sidebar .segment-btn:hover:not(.active) { background: none; color: var(--text-primary); }
body.el-has-sidebar .segment-btn.active { background: none; box-shadow: none; color: #b5ff3b; border-bottom-color: var(--accent-solid); font-weight: 800; }
body.el-has-sidebar .btn-primary { width: auto; min-width: 180px; padding: 12px 22px; font-size: 0.95rem; margin-top: 20px; }
body.el-has-sidebar .explainer { border-radius: var(--r-md); backdrop-filter: none; margin-bottom: 16px; }
body.el-has-sidebar .explainer > summary { padding: 14px 20px; }
@media (max-width: 560px) { body.el-has-sidebar .btn-primary { width: 100%; } }

/* Phase 59: filter by label (My tasks, a client's board, Websites). */
.ws-lblbar { align-items: center; }
.ws-lbl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* ===========================================================================
   PHASE 62 :: THE SITE'S LOOK
   The workspace now dresses like the EdgeLead site redesign: black, white
   hairlines, uppercase Space Grotesk for what names a screen or a section,
   Inter for reading, square-ish 6px controls, blue for the one action and
   lime for the one highlight. Only the logo is the workspace's own. This
   block sits last so it wins over the older per-component rules without
   each of them being rewritten.
   =========================================================================== */
html, body { background: var(--bg-color); }
body, button, input, select, textarea { font-family: var(--font-body); }
body { -webkit-font-smoothing: antialiased; }

h1, .h1, .ws-head h1, .card-title, h3.block-title, .tk-sec h3, .el-drawer h2,
.job-head h2, .job-head h3 {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; line-height: 1; font-weight: 700;
}
.ws-head h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.card-title { font-size: 1.25rem; }
h3.block-title, .tk-sec h3 { font-size: .86rem; letter-spacing: .08em; }
.el-eyebrow, .tk-field > label, .tk-facts dt {
    font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: .68rem; color: var(--text-muted);
}
label { color: var(--text-muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.check, label.check, .ws-check label, .tk-attach { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
label.ws-btn { margin: 0; font-size: .8rem; color: inherit; }

/* Panels: flat black with a hairline, no glow. */
.card, .ws-card { background: var(--surface-1); border-color: var(--card-border); box-shadow: none; }
.card::before { display: none; }

/* Controls */
.ws-btn { border-radius: 6px; font-weight: 600; border-color: rgba(255,255,255,.2); background: transparent; color: var(--text-primary); }
.ws-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.ws-btn.is-gold { background: var(--accent-solid); color: #fff; border-color: transparent; }
.ws-btn.is-gold:hover { background: #2f7bff; filter: none; }
.ws-btn.is-sm { border-radius: 5px; }
.btn-primary { border-radius: 6px; background: var(--accent-solid); color: #fff; font-weight: 600; }
.btn-primary:hover:not([disabled]) { background: #2f7bff; filter: none; box-shadow: none; }
.btn-secondary, .btn-danger { border-radius: 6px; }
input, select, textarea { border-radius: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(24,106,255,.25); }
:focus-visible { outline-color: var(--accent-solid); }

/* Lime carries black, never white. */
.ws-check[aria-checked="true"] .box, .ws-step.is-done .tick { color: #000; }
.ws-toggle[aria-checked="true"]::after { background: #000; }

/* The rail: black, the active item a white-on-blue-tint row with a lime mark. */
.el-sidebar { background: #000; backdrop-filter: none; box-shadow: none; border-right: 1px solid var(--card-border); font-family: var(--font-body); }
.el-sidebar .el-tab { border-radius: 6px; }
.el-sidebar .el-tab:hover { background: rgba(255,255,255,.06); }
.el-sidebar .el-tab.is-active { background: rgba(24,106,255,.16); color: #fff; box-shadow: inset 2px 0 0 var(--lime); }
.el-sidebar .el-group { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.el-acct-menu { background: var(--surface-2); border-color: rgba(255,255,255,.16); border-radius: 8px; }

/* Tags and chips: the site's small uppercase blocks. */
.ws-lbl, .ws-chip, .el-pill { border-radius: 4px; }
.tk-key { font-family: var(--font-display); letter-spacing: .06em; }
.ws-card-h h2, .ws-card h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .95rem; }
.ws-hint { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.tk-switch b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }

/* ---- phase 69: the client's workbook — content plan, ad ledger, message templates (client-tools.js) ---- */
.wb-h { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.wb-bad { color: var(--danger); }
.wb-gap { margin-bottom: 14px; }
.wb-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wb-split { grid-template-columns: minmax(0, 1fr); } }
.wb-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 1100px) { .wb-side { position: static; max-height: none; } }
.wb-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 14px 16px; }
.wb-panel > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--text-primary); }
.wb-side-note { font-size: .8rem; margin: 10px 0; }
.wb-plan { border-top: 1px solid var(--card-border); padding-top: 12px; margin-top: 12px; }
.wb-plan-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text-primary); }
.wb-sum { color: var(--text-secondary); font-size: .84rem; line-height: 1.5; margin: 8px 0; }
.wb-idea { border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wb-idea-h { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
.wb-idea-t { font-weight: 700; color: var(--text-primary); font-size: .9rem; }
.wb-idea-c { color: var(--text-secondary); font-size: .84rem; line-height: 1.5; }
.wb-idea-cap { white-space: pre-wrap; color: var(--text-secondary); font-size: .82rem; margin: 6px 0; }
.wb-more { font-size: .84rem; color: var(--text-secondary); width: 100%; }
.wb-more > summary { cursor: pointer; color: var(--text-muted); }
.wb-more ol, .wb-more ul { margin: 6px 0; padding-left: 20px; line-height: 1.55; }
.wb-ref { margin-top: 16px; border-top: 1px solid var(--card-border); padding-top: 12px; }
.wb-table td .t { max-width: 46ch; min-width: 200px; }
.wb-status { width: auto; padding: 4px 30px 4px 8px; font-size: .8rem; border-radius: 8px; font-weight: 700; background-position: right 8px center; }
.wb-status.is-planned { color: var(--text-secondary); }
.wb-status.is-made { color: var(--warn); }
.wb-status.is-posted { color: var(--jade); }
.wb-status.is-skipped { color: var(--text-muted); }
.wb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (max-width: 640px) { .wb-fields { grid-template-columns: minmax(0, 1fr); } }
.wb-fields .wb-full { grid-column: 1 / -1; }
.wb-fields label { margin: 0 0 6px; }
.wb-area.is-big { min-height: 170px; }
.wb-paste-out { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.wb-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-kpis { margin-bottom: 16px; }
.wb-ins { margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary); line-height: 1.6; font-size: .9rem; }
.wb-ins b { color: var(--text-primary); }
.wb-bar { height: 6px; border-radius: 3px; background: var(--accent-solid); min-width: 2px; }
.wb-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.wb-bar-row input[type="search"] { max-width: 280px; }
.wb-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-checks label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: .84rem; font-weight: 500; color: var(--text-primary);
    border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.wb-checks input { width: auto; accent-color: var(--accent-solid); }
.wb-calc { font-size: .82rem; margin-top: 12px; }
.wb-qty { width: 72px !important; padding: 4px 8px !important; text-align: right; font-variant-numeric: tabular-nums; }
.wb-views { margin-bottom: 16px; }
.wb-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.wb-tpl { display: flex; flex-direction: column; gap: 12px; }
.wb-tpl .ws-actions { margin-top: auto; }
.wb-bubble { background: rgba(24,106,255,0.12); border: 1px solid rgba(24,106,255,0.3); border-radius: 16px 16px 16px 4px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.wb-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); font-size: .9rem; line-height: 1.5; }
.wb-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.wb-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.wb-preview { margin-bottom: 14px; }
.wb-preview-h { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.wb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wb-thumb { position: relative; width: 84px; height: 84px; }
.wb-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.wb-thumb .el-iconbtn { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.7); }

/* ---- phase 70: @mentions in task comments (ui.js mentionPicker) ---- */
.tk-mention { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(24,106,255,0.18); color: #9cc3ff; font-weight: 700; white-space: nowrap; }
.tk-mentions { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 4px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface-2, #151517); max-width: 360px; }
.tk-mentions[hidden] { display: none; }
.tk-mentions button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; color: var(--text-primary); padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.tk-mentions button span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tk-mentions button small { color: var(--text-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; }
.tk-mentions button.is-on, .tk-mentions button:hover { background: var(--accent-dim); }
.tk-mentions .el-avatar { width: 26px; height: 26px; font-size: 0.7rem; flex: none; }