/* BidOS — the stylesheet. Generated from app.html by
scripts/split_app.py; edit this file once the split is live. */
/* ── Fonts, vendored ────────────────────────────────────────────────────
These used to load from Google's CDN. A government tenant should not have
its browser calling a third party on every page load, and the app has to
render identically on an air-gapped network. Served from /fonts by the
app itself, cached immutable. Tajawal and IBM Plex Mono are SIL OFL 1.1;
Manrope likewise — see static/fonts/LICENSE.txt.
Only the arabic and latin subsets are shipped: no cyrillic, greek or
vietnamese, which this product never renders. 14 files, 196 KB total.
swap = text paints immediately in the fallback, then reflows. */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/tajawal-arabic-400-normal.woff2') format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/tajawal-arabic-500-normal.woff2') format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/tajawal-arabic-700-normal.woff2') format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;
src:url('/fonts/tajawal-arabic-800-normal.woff2') format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/tajawal-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/tajawal-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/tajawal-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;
src:url('/fonts/tajawal-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/manrope-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/manrope-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/manrope-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
src:url('/fonts/manrope-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}
/* -- Palette ------------------------------------------------------------
Canvas is a warm neutral, not a blue-grey: less clinical across the long
reading sessions this product actually gets, and it lets a single
saturated accent carry the emphasis instead of six competing blues.
The accent is indigo on purpose - Etimad's own identity is teal-green,
and a bidder's tool should not read as if it were the portal.
Green is reserved for "awarded" and is never used decoratively.
--------------------------------------------------------------------- */
:root{
--bg:#F7F5F1; --surface:#FFFFFF; --raised:#FBFAF7; --sunk:#EFEBE4;
--line:#E5E0D7; --line-2:#D3CCC0;
--text:#191B1F; --ink-2:#464A52; --muted:#6B6E76; --faint:#8E8B85;
--head:#1A1C21; --navy:#1A1C21; --navy-2:#141619; --rail-ink:#C9C6C0; --rail-accent:#9AA6FF;
--accent:#2F45C5; --accent-ink:#FFFFFF; --ice:#ECEEFB; --accent-line:#C9CFF6;
/* ── reversed-out and status surfaces ──────────────────────────────────
These used to be literals with a `[data-theme="dark"] .x` override. That
override does not apply to a reader whose OS is dark and who never
touched the toggle, because the toggle is what writes data-theme — so
the dark palette was in force while the light component colours stayed.
The selected lens button was #15161A on #101115: 1.1:1, invisible, on
the main screen. Tokens in all four blocks, like --head. */
--sel:#1A1C21; --sel-ink:#FFFFFF; --sel-soft:#ECEEFB;
--ok-soft:#EBF7EF; --ok-ink:#0E6E3C; --ok-dot:#12B76A;
--warn-soft:#FEF6E7; --warn-ink:#8A5A00; --warn-dot:#F79009;
--bad-soft:#FDECEC; --bad-ink:#9B1C1C; --bad-dot:#D92D20;
--del-soft:#FEF3F2; --del-line:#F4B0AB;
--won:#10714E; --won-soft:#E4F1EA;
--lost:#B3261E; --lost-soft:#FBEBE9;
--warn:#8A5A12; --warn-soft:#FAF0DE;
--clay:#9A4A24; --clay-soft:#F8EBE3;
--radius:12px;
--shadow:0 1px 2px rgba(25,27,31,.05),0 4px 16px rgba(25,27,31,.06);
--shadow-h:0 2px 6px rgba(25,27,31,.09),0 12px 30px rgba(25,27,31,.11);
/* ── v2: the expressive surface ────────────────────────────────────────
Same blue. The scale around it is new: a token per step so a tint, a
border and a glow are the SAME hue at different weights instead of three
colours that happen to look related. */
--a-50:#F0F2FE; --a-100:#DFE3FB; --a-200:#C3CAF7; --a-300:#9BA7EF;
--a-400:#6D7CE4; --a-500:#2F45C5; --a-600:#2537A6; --a-700:#1E2D85;
--a-800:#192566; --a-900:#141D4F;
--grad-accent:linear-gradient(135deg,#3A50D6 0%,#2F45C5 48%,#5B3FB8 100%);
--grad-rail:linear-gradient(180deg,#171A2E 0%,#13151F 44%,#101119 100%);
--grad-sheen:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
--glow:0 6px 20px rgba(47,69,197,.28);
--glow-soft:0 2px 10px rgba(47,69,197,.16);
--ring:rgba(47,69,197,.18);
--rail-bg:#13151F; --rail-ink:#C9CEDC; --rail-ink-2:#FFFFFF;
--rail-sect:#6B7490; --rail-hover:rgba(255,255,255,.07);
--rail-line:rgba(255,255,255,.09); --rail-chip:#242838;
--elev-1:0 1px 2px rgba(20,22,30,.06);
--elev-2:0 2px 4px rgba(20,22,30,.06),0 8px 24px rgba(20,22,30,.08);
--elev-3:0 10px 20px rgba(20,22,30,.10),0 30px 60px rgba(20,22,30,.12);
--r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
--dur-1:.14s; --dur-2:.26s; --ease:cubic-bezier(.2,.8,.2,1);
--fs-micro:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px;
--fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;
}
/* The reader's OS preference wins unless they have chosen a theme in here. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#15161A; --surface:#1D1F24; --raised:#24262C; --sunk:#121317;
--line:#2D3038; --line-2:#3A3E48;
--text:#EDEAE4; --ink-2:#C0BCB4; --muted:#9A968E; --faint:#7A766F;
--head:#9AA6FF; --navy:#101115; --navy-2:#0C0D10;
--accent:#9AA6FF; --accent-ink:#15161A; --ice:#232746; --accent-line:#343C63;
--sel:#9AA6FF; --sel-ink:#15161A; --sel-soft:#1B2C42;
--ok-soft:#0d2a1b; --ok-ink:#7fd7a5; --ok-dot:#12B76A;
--warn-soft:#2d2205; --warn-ink:#f2c063; --warn-dot:#F79009;
--bad-soft:#2d0e0e; --bad-ink:#f19999; --bad-dot:#D92D20;
--del-soft:#2d1210; --del-line:#7a2f2a;
--won:#63C295; --won-soft:#12291F;
--lost:#F0928A; --lost-soft:#2B1614;
--warn:#E0AE68; --warn-soft:#2A2114;
--clay:#E09A6E; --clay-soft:#2B1B12;
--shadow:0 1px 3px rgba(0,0,0,.45); --shadow-h:0 8px 30px rgba(0,0,0,.55);
--a-50:#1A1E33; --a-100:#222845; --a-200:#2E3760; --a-300:#4B5696;
--a-400:#6E7CD2; --a-500:#9AA6FF; --a-600:#B3BCFF; --a-700:#C9CFFF;
--a-800:#DDE1FF; --a-900:#EEF0FF;
--grad-accent:linear-gradient(135deg,#8E9BFF 0%,#9AA6FF 48%,#B79BFF 100%);
--grad-rail:linear-gradient(180deg,#14161F 0%,#0F1117 46%,#0B0C11 100%);
--grad-sheen:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
--glow:0 6px 22px rgba(154,166,255,.22);
--glow-soft:0 2px 12px rgba(154,166,255,.14);
--ring:rgba(154,166,255,.22);
--rail-bg:#0F1117; --rail-ink:#AEB6C8; --rail-ink-2:#FFFFFF;
--rail-sect:#5F6880; --rail-hover:rgba(255,255,255,.06);
--rail-line:rgba(255,255,255,.08); --rail-chip:#1C2030;
--elev-1:0 1px 2px rgba(0,0,0,.5);
--elev-2:0 2px 6px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.45);
--elev-3:0 12px 24px rgba(0,0,0,.55),0 36px 70px rgba(0,0,0,.5);
}}
/* An explicit choice must outrank the OS preference in BOTH directions. The
toggle writes data-theme on , so "light" needs a block of its own —
without one it fell through to :root, which the dark media query had
already rewritten, and the button appeared to do nothing. */
[data-theme="light"]{
--bg:#F7F5F1; --surface:#FFFFFF; --raised:#FBFAF7; --sunk:#EFEBE4;
--line:#E5E0D7; --line-2:#D3CCC0;
--text:#191B1F; --ink-2:#464A52; --muted:#6B6E76; --faint:#8E8B85;
--head:#1A1C21; --navy:#1A1C21; --navy-2:#141619; --rail-ink:#C9C6C0; --rail-accent:#9AA6FF;
--accent:#2F45C5; --accent-ink:#FFFFFF; --ice:#ECEEFB; --accent-line:#C9CFF6;
--sel:#1A1C21; --sel-ink:#FFFFFF; --sel-soft:#ECEEFB;
--ok-soft:#EBF7EF; --ok-ink:#0E6E3C; --ok-dot:#12B76A;
--warn-soft:#FEF6E7; --warn-ink:#8A5A00; --warn-dot:#F79009;
--bad-soft:#FDECEC; --bad-ink:#9B1C1C; --bad-dot:#D92D20;
--del-soft:#FEF3F2; --del-line:#F4B0AB;
--won:#10714E; --won-soft:#E4F1EA;
--lost:#B3261E; --lost-soft:#FBEBE9;
--warn:#8A5A12; --warn-soft:#FAF0DE;
--clay:#9A4A24; --clay-soft:#F8EBE3;
--radius:12px;
--shadow:0 1px 2px rgba(25,27,31,.05),0 4px 16px rgba(25,27,31,.06);
--shadow-h:0 2px 6px rgba(25,27,31,.09),0 12px 30px rgba(25,27,31,.11);
/* ── v2: the expressive surface ────────────────────────────────────────
Same blue. The scale around it is new: a token per step so a tint, a
border and a glow are the SAME hue at different weights instead of three
colours that happen to look related. */
--a-50:#F0F2FE; --a-100:#DFE3FB; --a-200:#C3CAF7; --a-300:#9BA7EF;
--a-400:#6D7CE4; --a-500:#2F45C5; --a-600:#2537A6; --a-700:#1E2D85;
--a-800:#192566; --a-900:#141D4F;
--grad-accent:linear-gradient(135deg,#3A50D6 0%,#2F45C5 48%,#5B3FB8 100%);
--grad-rail:linear-gradient(180deg,#171A2E 0%,#13151F 44%,#101119 100%);
--grad-sheen:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
--glow:0 6px 20px rgba(47,69,197,.28);
--glow-soft:0 2px 10px rgba(47,69,197,.16);
--ring:rgba(47,69,197,.18);
--rail-bg:#13151F; --rail-ink:#C9CEDC; --rail-ink-2:#FFFFFF;
--rail-sect:#6B7490; --rail-hover:rgba(255,255,255,.07);
--rail-line:rgba(255,255,255,.09); --rail-chip:#242838;
--elev-1:0 1px 2px rgba(20,22,30,.06);
--elev-2:0 2px 4px rgba(20,22,30,.06),0 8px 24px rgba(20,22,30,.08);
--elev-3:0 10px 20px rgba(20,22,30,.10),0 30px 60px rgba(20,22,30,.12);
--r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
--dur-1:.14s; --dur-2:.26s; --ease:cubic-bezier(.2,.8,.2,1);
--fs-micro:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px;
--fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;
}
[data-theme="dark"]{
--bg:#15161A; --surface:#1D1F24; --raised:#24262C; --sunk:#121317;
--line:#2D3038; --line-2:#3A3E48;
--text:#EDEAE4; --ink-2:#C0BCB4; --muted:#9A968E; --faint:#7A766F;
--head:#9AA6FF; --navy:#101115; --navy-2:#0C0D10;
--accent:#9AA6FF; --accent-ink:#15161A; --ice:#232746; --accent-line:#343C63;
--sel:#9AA6FF; --sel-ink:#15161A; --sel-soft:#1B2C42;
--ok-soft:#0d2a1b; --ok-ink:#7fd7a5; --ok-dot:#12B76A;
--warn-soft:#2d2205; --warn-ink:#f2c063; --warn-dot:#F79009;
--bad-soft:#2d0e0e; --bad-ink:#f19999; --bad-dot:#D92D20;
--del-soft:#2d1210; --del-line:#7a2f2a;
--won:#63C295; --won-soft:#12291F;
--lost:#F0928A; --lost-soft:#2B1614;
--warn:#E0AE68; --warn-soft:#2A2114;
--clay:#E09A6E; --clay-soft:#2B1B12;
--shadow:0 1px 3px rgba(0,0,0,.45); --shadow-h:0 8px 30px rgba(0,0,0,.55);
--a-50:#1A1E33; --a-100:#222845; --a-200:#2E3760; --a-300:#4B5696;
--a-400:#6E7CD2; --a-500:#9AA6FF; --a-600:#B3BCFF; --a-700:#C9CFFF;
--a-800:#DDE1FF; --a-900:#EEF0FF;
--grad-accent:linear-gradient(135deg,#8E9BFF 0%,#9AA6FF 48%,#B79BFF 100%);
--grad-rail:linear-gradient(180deg,#14161F 0%,#0F1117 46%,#0B0C11 100%);
--grad-sheen:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
--glow:0 6px 22px rgba(154,166,255,.22);
--glow-soft:0 2px 12px rgba(154,166,255,.14);
--ring:rgba(154,166,255,.22);
--rail-bg:#0F1117; --rail-ink:#AEB6C8; --rail-ink-2:#FFFFFF;
--rail-sect:#5F6880; --rail-hover:rgba(255,255,255,.06);
--rail-line:rgba(255,255,255,.08); --rail-chip:#1C2030;
--elev-1:0 1px 2px rgba(0,0,0,.5);
--elev-2:0 2px 6px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.45);
--elev-3:0 12px 24px rgba(0,0,0,.55),0 36px 70px rgba(0,0,0,.5);
}
/* Arabic and Latin each get their own face and line-height; neither is a
fallback for the other. Figures stay monospaced and tabular so money and
scores line up down a column and can be compared at a glance. */
*{box-sizing:border-box;margin:0;font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif}
html[dir="ltr"] *{font-family:"Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif}
html[dir="rtl"] body{line-height:1.65}
html[dir="ltr"] body{line-height:1.5}
.mono,.num,.kpi .v,.ckpi .v{font-family:"IBM Plex Mono",ui-monospace,monospace;
font-variant-numeric:tabular-nums}
/* A tile whose value is a sentence rather than a figure: monospace is for
numbers you compare down a column, not for prose. */
.kpi .v .prose,.ckpi .v .prose{font-family:inherit;font-size:15px;font-weight:600;
line-height:1.4;display:inline-block}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;
font-size:clamp(13px,.3vw + 12px,14px);-webkit-font-smoothing:antialiased}
/* THE RAIL, and only the rail. This was a bare `aside` selector, which also
matched the three facet sidebars in the content area — they are too. .card won the background, so the panel was
white, but nothing competed with the rail's `color:#DCE6F2`, so every facet
label that does not set its own colour rendered pale-blue-white on white at
1.26:1. The rail's display:flex, height:100vh and padding leaked in as well.
The rail is the only that is a direct child of . */
body > aside{width:248px;background:var(--navy-2);color:#DCE6F2;padding:16px 12px;display:flex;
flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;transition:width .2s;flex:0 0 auto;z-index:20}
/* The rail is height:100vh with no scroll, and it holds 28 navigation rows and
7 section headings. That is about 1,450px of content, so on a 1080p screen
roughly the last eleven items were simply clipped - including the language
toggle, which sat at the very bottom. "The sidebar is not showing everything"
and "I cannot switch Arabic and English" were one bug: nothing was broken,
the control was below the fold with no way to reach it.
So the navigation scrolls, and the controls that are not navigation are
pinned where they can always be reached. */
aside .navs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;
scrollbar-color:#2B4A6E transparent;margin-inline:-4px;padding-inline:4px}
aside .navs::-webkit-scrollbar{width:8px}
aside .navs::-webkit-scrollbar-thumb{background:#2B4A6E;border-radius:4px}
aside .navs::-webkit-scrollbar-track{background:transparent}
/* A hint that there is more below, rather than a hard edge that looks like
the end — but ONLY while there is more below. It used to be unconditional,
and it used to fade into the account block that sat underneath it. That
block moved to the top of the page, so the fade landed on the last item in
the list instead and left "Admin console" half-drawn, at the bottom, with
nothing to scroll to. railFade() in app.js puts `more` on while the list is
scrolled above its own end. */
aside .navs.more{mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent)}
.logo{font-size:20px;font-weight:800;letter-spacing:.4px;padding:6px 12px 18px;white-space:nowrap}
.logo span{color:var(--rail-accent)}
.sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:#5E7796;padding:14px 14px 6px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
color:#C2D2E5;cursor:pointer;font-size:13.5px;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(47,69,197,.30)}
.nav .ic{width:20px;text-align:center;flex:0 0 auto;font-size:16px}
.nav .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav .nbadge{background:var(--lost);color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:9px;
display:flex;align-items:center;justify-content:center;padding:0 5px;flex:0 0 auto}
.nav.active .nbadge{background:rgba(255,255,255,.25)}
.appbar .foot .av{width:34px;height:34px;border-radius:50%;background:#2B4A6E;display:flex;
align-items:center;justify-content:center;color:var(--accent);font-weight:700;font-size:12px;flex:0 0 auto}
.appbar .foot .who{font-size:12.5px;white-space:nowrap;overflow:hidden}
.appbar .foot .who small{display:block;color:#6C86A3;font-size:11px}
main{flex:1;padding:clamp(18px,2.2vw,30px);min-width:0}
#view-dash,#view-ai{--view-max:2100px}
header.top{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
header.top h1{font-size:clamp(18px,1vw+13px,22px);font-weight:800;letter-spacing:-.2px}
.spacer{flex:1}
.btn{border:none;border-radius:11px;padding:9px 16px;font-size:13px;cursor:pointer;font-weight:600;
background:var(--navy);color:var(--accent-ink);transition:filter .15s,background .15s}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-2);font-weight:500}
.btn.ghost:hover{background:var(--bg);filter:none}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{background:var(--surface);
border:1px solid var(--line-2);color:var(--text);border-radius:11px;padding:9px 13px;font-size:13px;
min-width:200px;transition:border-color .15s,box-shadow .15s;outline:none}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{
border-color:var(--accent);box-shadow:0 0 0 3px var(--ice)}
@media(max-width:1180px){body > aside{width:74px}
.logo span,.sect,.nav .lbl,.nav .nbadge{display:none}
.logo{text-align:center;padding:6px 0 18px;font-size:0}.logo::before{content:"B";font-size:20px}
.nav{justify-content:center;padding:11px 0}}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* command center */
#view-dash{--view-max:2100px}
.cc-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cc-hi h1{font-size:clamp(19px,1.3vw + 12px,24px);font-weight:800;letter-spacing:-.3px}
.cc-sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.cc-sub b{color:var(--text)}
.cc-date{color:var(--faint,#94A3B5);font-size:12.5px;white-space:nowrap}
.cc-grid{display:grid;gap:clamp(12px,1.1vw,16px)}
.cc-attn{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:16px}
.cc-kpis{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));margin-bottom:16px}
.cc-cols{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));margin-bottom:16px}
.cc-two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.acard:hover{transform:translateY(-2px)}
.acard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px}
.acard.bad::before{background:var(--lost)}.acard.warn::before{background:var(--warn)}.acard.info::before{background:var(--accent)}
.acard .ah{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.acard .ib{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.acard.bad .ib{background:var(--lost-soft);color:var(--lost)}.acard.warn .ib{background:var(--warn-soft);color:var(--warn)}.acard.info .ib{background:var(--ice);color:var(--accent)}
.acard .an{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.5px}
.acard .an small{font-size:12.5px;font-weight:600;color:var(--muted)}
.acard .ali{font-size:12.5px;margin-top:10px;display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px dashed var(--line);align-items:center}
.acard .ali>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .ali b{color:var(--lost);font-weight:700;white-space:nowrap}
.acard .ali .w{color:var(--warn);white-space:nowrap}
.ckpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);transition:transform .18s}
.ckpi:hover{transform:translateY(-2px)}
.ckpi .l{font-size:12.5px;color:var(--muted)}
.ckpi .v{font-size:clamp(23px,2vw,29px);font-weight:800;margin-top:8px;letter-spacing:-.5px}
.ckpi .v small{font-size:14px;color:var(--muted);font-weight:600}
.ckpi .dd{font-size:12px;margin-top:4px;color:var(--muted)}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.cch{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:10px}
.cch h3{font-size:14px;font-weight:700}
.cch a{color:var(--accent);font-size:15px;text-decoration:none;font-weight:600;cursor:pointer}
.ccb{padding:8px}
.crow{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .15s}
.crow:hover{background:var(--bg)}
.cday{width:46px;text-align:center;flex:0 0 auto}
.cday .dn{font-size:19px;font-weight:800;line-height:1}
.cday .dm{font-size:10.5px;color:var(--muted)}
.crow .cbody{flex:1;min-width:0}
.crow .cbody .t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .cbody .c{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip{font-size:10.5px;padding:4px 10px;border-radius:20px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.cchip.d1{background:var(--lost-soft);color:var(--lost)}.cchip.d3{background:var(--warn-soft);color:var(--warn)}.cchip.d7{background:var(--ice);color:var(--accent)}
.cc-fn{padding:8px 18px 16px}
.cfr{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12.5px}
.cfr .fl{width:clamp(70px,7vw,96px);color:var(--muted);flex:0 0 auto}
.cfr .tr{flex:1;min-width:0;height:24px;background:var(--bg);border-radius:8px;overflow:hidden}
.cfr .fill{height:100%;border-radius:8px;display:flex;align-items:center;padding-inline-start:10px;color:#fff;font-weight:700;font-size:11.5px}
.cfr .cv{width:44px;text-align:start;font-weight:700;flex:0 0 auto}
.cdec{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;transition:background .15s;cursor:pointer}
.cdec:hover{background:var(--bg)}
.cverd{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cact{display:flex;align-items:center;gap:12px;padding:11px 12px;font-size:12.5px;border-radius:11px}
.cact .cib{width:30px;height:30px;border-radius:9px;background:var(--ice);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:15px}
.cact .cbody{flex:1;min-width:0}
.cact .cbody .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cact .cbody .m{color:var(--faint,#94A3B5);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:18px;box-shadow:var(--shadow)}
.kpi .v{font-size:30px;font-weight:800;color:var(--head)}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.card h3{font-size:14px;margin-bottom:12px;color:var(--muted);font-weight:600}
.bar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:12.5px}
.bar .n{width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;background:var(--ice);height:10px;border-radius:6px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:6px;transition:width .5s}
.bar .pct{width:86px;color:var(--muted)}
#view-pipe.active{display:flex;flex-direction:column;height:calc(100vh - 52px);overflow:hidden}
#view-pipe header.top{flex:0 0 auto}
#results{flex:0 0 auto}
.kcard.kdel{border:1px solid var(--del-line);background:var(--del-soft);opacity:.85}
#pipeBody{display:flex;gap:12px;flex:1 1 0;min-height:0;align-items:stretch}
#pfPanel{max-height:none;height:100%;top:0}
#kanban{display:flex;gap:10px;align-items:stretch;overflow-x:auto;padding-bottom:8px;
flex:1 1 0;min-height:0;min-width:0}
.kcol{flex:1 1 0;min-width:160px;border-top:3px solid var(--accent);display:flex;flex-direction:column;min-height:0}
.kcol[data-col="screening"]{border-top-color:#8FA1B8}
.kcol[data-col="bidding"]{border-top-color:#3B82C4}
.kcol[data-col="submitted"]{border-top-color:#6C5CE7}
.kcol[data-col="tech_eval"]{border-top-color:#B06000}
.kcol[data-col="fin_eval"]{border-top-color:#0B7285}
.kcol[data-col="won"]{border-top-color:var(--won)}
.kcol[data-col="lost"]{border-top-color:var(--lost)}
.kcol[data-col="cancelled"]{border-top-color:#777}
.kcol{background:var(--ice);border-radius:var(--radius);padding:10px 6px 10px 10px}
.kcol h2{font-size:12px;color:var(--head);display:flex;justify-content:space-between;
align-items:center;gap:6px;padding:4px 6px 9px;flex:0 0 auto}
.kcol h2 .cw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcol h2 .cv{background:var(--surface);color:var(--muted);border-radius:9px;
padding:0 7px;font-size:10px;font-weight:600}
.kcards{overflow-y:auto;flex:1;min-height:0;padding-inline-end:4px;scrollbar-width:thin}
.kcards::-webkit-scrollbar{width:6px}
.kcards::-webkit-scrollbar-thumb{background:rgba(31,78,121,.25);border-radius:3px}
.kcol h2 .n{background:var(--navy);color:#fff;border-radius:10px;padding:0 9px;font-size:12px}
.kcard{background:var(--surface);border-radius:10px;padding:8px 10px;margin-bottom:7px;
cursor:pointer;border:1px solid var(--line);transition:transform .12s,box-shadow .12s}
.kcard:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--accent)}
.kcard .t{font-weight:600;font-size:11.5px;line-height:1.55;margin-bottom:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kcard .c{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .m{font-size:11px;margin-top:6px;display:flex;justify-content:space-between;align-items:center}
.kcard .m .v{font-weight:700;color:var(--head);font-size:11.5px}
/* ══ the director's lenses ═══════════════════════════════════════════════ */
/* attainment — three bars, because a director asks three questions in
sequence: what is banked, what is realistic, what is the ceiling */
.atcard{margin-bottom:14px;border-inline-start:3px solid var(--line-2)}
.atcard.ahead{border-inline-start-color:var(--ok-dot)}
.atcard.at_risk{border-inline-start-color:var(--warn-dot)}
.atcard.behind{border-inline-start-color:var(--bad-dot)}
.athead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.athead h3{margin:0}
.atv{font-size:11px;font-weight:700;border-radius:6px;padding:2px 9px}
.atv.ahead{background:var(--ok-soft);color:var(--ok-ink)}
.atv.at_risk{background:var(--warn-soft);color:var(--warn-ink)}
.atv.behind{background:var(--bad-soft);color:var(--bad-ink)}
.atv.no_target{background:var(--sunk);color:var(--muted)}
.atbar{display:flex;height:22px;border-radius:7px;overflow:hidden;background:var(--sunk);
margin:12px 0 8px;position:relative}
.atbar i{display:block;height:100%}
.atbar i.closed{background:var(--won)}
.atbar i.commit{background:var(--accent)}
.atbar i.best{background:var(--accent-line)}
.atnums{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);
align-items:baseline}
.atnums b{color:var(--head);font-variant-numeric:tabular-nums}
.atnums .short{color:var(--bad-ink);font-weight:600}
.atnums .over{color:var(--ok-ink);font-weight:600}
.atpct{font-size:17px;font-weight:800;color:var(--head);font-variant-numeric:tabular-nums}
.attab{margin-top:14px}
.atsc{display:block;color:var(--faint);font-size:10.5px}
.atmini{display:block;height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.atmini i{display:block;height:100%;background:var(--accent)}
.atmini i.ahead{background:var(--won)}
.atmini i.behind{background:var(--lost)}
.atmini i.at_risk{background:var(--warn)}
/* workload — both hats on one row, because the engineer who owns three and
is presales on nine is the one about to miss something */
.twhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px;
font-size:13px;color:var(--muted)}
.twhead b{color:var(--head);font-size:17px;font-variant-numeric:tabular-nums}
.twhead .sep{color:var(--line-2)}
.twq{background:var(--warn-soft);color:var(--warn-ink);border-radius:7px;
padding:2px 9px;font-size:11.5px;font-weight:600}
.twtab td{vertical-align:middle}
.twr{font-size:10.5px;color:var(--faint)}
.twbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--sunk);
min-width:60px}
.twbar i,.twbar u,.twbar s{display:block;height:100%;text-decoration:none}
.twbar i{background:var(--accent)}
.twbar u{background:var(--head)}
.twbar s{background:var(--line-2)}
.twkey{display:flex;gap:14px;font-size:11px;color:var(--muted);padding:10px 10px 2px}
.twkey i{display:inline-block;width:10px;height:10px;border-radius:3px;
margin-inline-end:5px;vertical-align:-1px}
.twkey .k1{background:var(--accent)}.twkey .k2{background:var(--head)}
.twkey .k3{background:var(--line-2)}
/* analysis */
.anrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;
margin-bottom:14px}
.antile{background:var(--surface);border:1px solid var(--line);border-radius:11px;
padding:12px 14px}
.antile b{display:block;font-size:24px;font-weight:800;color:var(--head);line-height:1.15;
font-variant-numeric:tabular-nums}
.antile span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.antile small{display:block;font-size:10.5px;color:var(--faint)}
.anst{font-size:10px;border-radius:5px;padding:1px 6px;margin-inline-start:6px;
font-weight:700}
.anst.blocked{background:var(--bad-soft);color:var(--bad-ink)}
.anst.unasked{background:var(--warn-soft);color:var(--warn-ink)}
.ancols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ancut{display:grid;grid-template-columns:1fr 70px 34px 44px;gap:8px;align-items:center;
padding:4px 0;font-size:12.5px}
.ancut .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ancut .b{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.ancut .b i{display:block;height:100%;background:var(--accent)}
.ancut .n,.ancut .r{text-align:end;font-variant-numeric:tabular-nums;color:var(--muted)}
.ancut .r.good{color:var(--ok-ink);font-weight:700}
.anfoot{font-size:10.5px;color:var(--faint);margin-top:8px}
.anmvhead{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.anmvhead b{color:var(--head)}
.anmvhead b.up{color:var(--ok-ink)}
.anmvhead b.down{color:var(--bad-ink)}
.anmvhead .sep{color:var(--line-2);margin:0 5px}
.anmvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.anmv{border:1px solid var(--line);border-radius:10px;padding:10px;
border-top:3px solid var(--line-2)}
.anmv.up{border-top-color:var(--ok-dot)}
.anmv.down{border-top-color:var(--bad-dot)}
.anmv.new{border-top-color:var(--accent)}
.anmv.out{border-top-color:var(--line-2)}
.anmv h4{margin:0 0 6px;font-size:12px;color:var(--head);display:flex;
justify-content:space-between}
.anmv h4 span{color:var(--muted);font-variant-numeric:tabular-nums}
.anmvr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:5px 0;
border-top:1px solid var(--line);cursor:pointer;font-size:11.5px}
.anmvr .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.anmvr .s{grid-column:1;font-size:10.5px;color:var(--muted)}
.anmvr .v{grid-row:1;font-variant-numeric:tabular-nums;color:var(--head);font-weight:600}
.anmvn{font-size:11.5px;color:var(--faint);padding:4px 0}
/* bulk */
.bulkbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;background:var(--sel);
color:var(--sel-ink);border-radius:11px;padding:9px 14px;margin-bottom:10px;
position:sticky;top:8px;z-index:12}
.bulkbar b{font-size:16px;font-variant-numeric:tabular-nums}
.bulkbar select,.bulkbar input{background:var(--surface);border:1px solid var(--line);
color:var(--text);border-radius:8px;padding:5px 9px;font-size:12.5px;font-family:inherit}
.clpick{width:auto;cursor:pointer}
/* the assists */
.aspanel{border:1px solid var(--line);border-radius:11px;margin-top:8px;overflow:hidden}
.astabs{display:flex;background:var(--sunk);border-bottom:1px solid var(--line)}
.astabs button{flex:1;border:0;background:none;color:var(--muted);font-family:inherit;
font-size:11.5px;font-weight:600;padding:8px 6px;cursor:pointer;min-width:0}
.astabs button.on{background:var(--surface);color:var(--head);
box-shadow:inset 0 -2px 0 var(--accent)}
.asbody{padding:12px}
.asnote{font-size:12.5px;color:var(--muted)}
.assrc{font-size:10.5px;background:var(--ice);color:var(--accent);border-radius:5px;
padding:1px 7px;margin-inline-start:6px}
.asq{border-inline-start:3px solid var(--line-2);padding:7px 0 7px 11px;
padding-inline-start:11px;margin-bottom:9px}
.asq.gate_unasked{border-inline-start-color:var(--warn-dot)}
.asq.gate_blocked{border-inline-start-color:var(--bad-dot)}
.asq.unasked{border-inline-start-color:var(--line-2)}
.asq.weak{border-inline-start-color:var(--accent)}
.ash{display:flex;gap:8px;align-items:center;font-size:12.5px}
.asb{font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px;
background:var(--sunk);color:var(--muted)}
.asq.gate_blocked .asb{background:var(--bad-soft);color:var(--bad-ink)}
.asq.gate_unasked .asb{background:var(--warn-soft);color:var(--warn-ink)}
.asw{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.asa{font-size:12.5px;color:var(--text);margin-top:3px}
.asf{font-size:11.5px;color:var(--muted);margin-top:2px}
.asbasis{font-size:10.5px;color:var(--faint);margin-top:10px;border-top:1px solid var(--line);
padding-top:7px}
.asgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.askv{background:var(--sunk);border-radius:9px;padding:9px 11px}
.askv b{display:block;font-size:18px;color:var(--head);font-variant-numeric:tabular-nums}
.askv span{font-size:10.5px;color:var(--muted)}
.aswin{margin-top:11px}
.aswin h5{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);font-weight:600}
.aswr{display:flex;justify-content:space-between;gap:10px;font-size:12px;
padding:4px 0;border-top:1px solid var(--line)}
.aswr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.asdraft{width:100%;min-height:190px;background:var(--bg);border:1px solid var(--line);
color:var(--text);border-radius:9px;padding:10px;font-size:12.5px;font-family:inherit;
line-height:1.8;margin-top:8px}
/* the bid phases, as a spine inside `bidding` */
.bpspine{display:flex;gap:4px;margin:10px 0 8px;flex-wrap:wrap}
.bpstep{flex:1 1 90px;min-width:0;border:1px solid var(--line);border-radius:9px;
padding:7px 9px;cursor:pointer;background:var(--surface)}
.bpstep b{display:block;font-size:11.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpstep small{font-size:10px;color:var(--faint)}
.bpstep.done{background:var(--ok-soft);border-color:var(--ok-dot)}
.bpstep.done b{color:var(--ok-ink)}
.bpstep.current{background:var(--sel);border-color:var(--sel)}
.bpstep.current b,.bpstep.current small{color:var(--sel-ink)}
.bpchecks{display:grid;gap:5px;margin-top:6px}
.bpchk{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text)}
.bpchk input{width:auto}
.bpwarn{font-size:11.5px;color:var(--warn-ink);background:var(--warn-soft);
border-radius:7px;padding:5px 9px;margin-top:7px}
/* ══ Qualification setup ═════════════════════════════════════════════════ */
.qcbud{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:10px 0 6px;
border:1px solid var(--line);background:var(--sunk)}
.qcbud i{background:var(--accent);display:flex;flex-direction:column;
align-items:center;justify-content:center;color:var(--accent-ink);
border-inline-end:1px solid var(--surface);min-width:0;overflow:hidden;
font-style:normal;transition:flex-grow .18s}
.qcbud i.g{background:var(--head)}
.qcbud i b{font-size:9.5px;font-weight:700;white-space:nowrap;opacity:.9;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qcbud i u{font-size:10.5px;text-decoration:none;opacity:.8}
.qcbudl{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.qcbudl .sep{color:var(--line-2);margin:0 5px}
.qcsim{margin:4px 0 14px}
.qcsl{font-size:12.5px;color:var(--head);font-weight:600;margin-bottom:6px}
.qcsr{display:flex;gap:6px;flex-wrap:wrap}
.qcs{flex:1 1 72px;border:1px solid var(--line);border-radius:9px;padding:7px 4px;
text-align:center;background:var(--surface)}
.qcs .l{display:block;font-size:10px;color:var(--faint)}
.qcs .s{display:block;font-size:17px;font-weight:800;color:var(--head);line-height:1.3}
.qcs .b{display:block;font-size:10px;color:var(--muted)}
.qcs.hot{border-color:var(--won)}
.qcs.warm{border-color:var(--warn)}
.qcs.pass{box-shadow:inset 0 -3px 0 var(--ok-dot)}
/* ══ the combobox ════════════════════════════════════════════════════════
A typeahead on a bare elements the meter always rendered, read as a radial
mark instead of a row of bars. Nothing in the DOM changed — the board, the
list and the tests all still see .scm > i.gate/.unk/.blk with --f — but
the shape they make is now the thing you recognise a deal by across the
room, which a row of eight bars never was.
Why radial rather than a bar chart: a bar chart is read left to right, one
value at a time, and what a salesperson needs from a card is not eight
values — it is the SILHOUETTE. Money and Authority strong with Need unasked
makes a shape your eye learns in a week, and a lead whose shape is a thin
star is in trouble no matter what its score says.
The grammar, which is the product's own argument drawn rather than written:
spoke length how good the answer is, as a fraction of that criterion's
own range — so it survives a retuned scale
dotted stub NOBODY ASKED. Structurally different from a short spoke,
because "unknown" and "bad" lead to different afternoons
a ringed tip a gate: money, authority, need. Weak on one of these
blocks qualification whatever the other five say
red tip that gate is failing amber tip that gate is unasked
The score does not appear in the glyph. It is one number and it already
has a chip; the glyph is for the shape. */
.scm{--g:42px;--spoke:3.5px;position:relative;width:var(--g);height:var(--g);
display:block;margin-top:8px;flex:0 0 auto;border-radius:50%;
background:radial-gradient(circle,transparent 0 28%,
var(--line) 28% 30%,transparent 30.5%)}
.scm i{position:absolute;left:calc(50% - (var(--spoke) / 2));top:6%;width:var(--spoke);
height:44%;background:var(--line);border-radius:var(--r-pill);overflow:hidden;
transform-origin:50% 100%;display:block;
-webkit-mask:linear-gradient(to top,transparent 0 34%,#000 34%);
mask:linear-gradient(to top,transparent 0 34%,#000 34%)}
/* the fill starts where the hole ends, so a 60% answer is 60% of the VISIBLE
spoke rather than 60% of a radius a third of which nobody can see */
.scm i::after{content:"";position:absolute;inset-inline:0;bottom:34%;
height:calc(var(--f,0%) * .66);background:var(--a-400);border-radius:var(--r-pill)}
/* the three gates carry the weight of the rule, so they carry more ink */
.scm i.gate{--spoke:5px;left:calc(50% - 2.5px)}
.scm i.gate::after{background:var(--a-600)}
.scm i.gate::before{content:"";position:absolute;top:-1px;left:50%;z-index:2;
transform:translateX(-50%);width:5px;height:5px;border-radius:50%;
background:var(--line-2)}
.scm i.blk::before{background:var(--bad-dot);box-shadow:0 0 0 2px var(--bad-soft)}
.scm i.unk.gate::before{background:var(--warn-dot);box-shadow:0 0 0 2px var(--warn-soft)}
/* nobody asked: a dotted track and no fill at all, never a short bar */
.scm i.unk{background:repeating-linear-gradient(to bottom,var(--line-2) 0 2px,
transparent 2px 5px);opacity:.75}
.scm i:nth-child(1){transform:rotate(0deg)}
.scm i:nth-child(2){transform:rotate(45deg)}
.scm i:nth-child(3){transform:rotate(90deg)}
.scm i:nth-child(4){transform:rotate(135deg)}
.scm i:nth-child(5){transform:rotate(180deg)}
.scm i:nth-child(6){transform:rotate(225deg)}
.scm i:nth-child(7){transform:rotate(270deg)}
.scm i:nth-child(8){transform:rotate(315deg)}
/* The card's own foot places the mark beside the money — see .kcard .foot.
It was absolutely positioned here first, which printed the glyph straight
through the figures on any card whose numbers sat at that height. */
.kcard{position:relative}
body.dense .scm{--g:26px;--spoke:2.5px}
body.dense .scm i.gate{--spoke:3.5px;left:calc(50% - 1.75px)}
/* and the full-size one, with the score in the middle of it */
/* The hole that works at 44px is a crater at 168px: the spokes stop being
one mark and read as eight sticks around an empty middle. The big one
keeps a tighter centre, a visible dial, and a hub for the score. */
.scm.big{--g:150px;--spoke:10px;margin:6px auto 12px;
background:radial-gradient(circle,transparent 0 21%,
var(--line) 21% 22.5%,transparent 23%)}
.scm.big i{-webkit-mask:linear-gradient(to top,transparent 0 23%,#000 23%);
mask:linear-gradient(to top,transparent 0 23%,#000 23%)}
.scm.big i::after{bottom:23%;height:calc(var(--f,0%) * .77)}
.scm.big i.gate{--spoke:14px;left:calc(50% - 7px)}
.scm.big i.gate::before{width:12px;height:12px;top:-3px}
.scmwrap{position:relative;display:flex;align-items:center;justify-content:center}
.scmwrap .scv{position:absolute;text-align:center;line-height:1.1;
width:62px;height:62px;border-radius:50%;background:var(--surface);
border:1px solid var(--line);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1px;z-index:2}
.scmwrap .scv b{display:block;font-size:24px;font-weight:800;color:var(--head);
font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.scmwrap .scv span{font-size:9.5px;color:var(--muted);
max-width:58px;line-height:1.2}
/* the legend under the big fingerprint — three marks, three sentences */
.scmkey{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
font-size:var(--fs-xs);color:var(--muted);margin:-4px 0 14px}
.scmkey i{display:inline-block;width:9px;height:9px;border-radius:50%;
margin-inline-end:6px;vertical-align:-1px}
.scmkey .k-gate{background:var(--line-2)}
.scmkey .k-unk{background:var(--warn-dot)}
.scmkey .k-blk{background:var(--bad-dot)}
/* ── the time canvas ───────────────────────────────────────────────────── */
.tlhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tlwarn{background:var(--bad-soft);color:var(--bad-ink);border-radius:var(--r-pill);
padding:5px 13px;font-size:var(--fs-sm);font-weight:600}
.tlwarn b{font-variant-numeric:tabular-nums}
.tlnote{color:var(--muted);font-size:var(--fs-sm)}
.tlcard{padding:16px 18px 8px;overflow:hidden}
.tlruler{position:relative;height:22px;margin-inline-start:calc(150px + 46px);
margin-bottom:6px}
.tlruler i{position:absolute;top:0;font-style:normal}
.tlruler i b{font-size:var(--fs-micro);color:var(--faint);font-weight:600;
font-variant-numeric:tabular-nums;white-space:nowrap}
.tlruler .tlnow{position:absolute;top:0}
.tlruler .tlnow b{background:var(--grad-accent);color:var(--accent-ink);
font-size:var(--fs-micro);font-weight:700;border-radius:var(--r-pill);
padding:2px 9px;white-space:nowrap;box-shadow:var(--glow-soft)}
.tllane{display:flex;align-items:stretch;gap:0;border-top:1px solid var(--line);
min-height:62px}
.tllbl,.tlgut{padding-top:14px}
.tllbl{width:150px;flex:0 0 auto;padding:14px 10px 10px 0;font-size:var(--fs-sm);
font-weight:700;color:var(--ink-2);line-height:1.3}
.tllbl small{display:block;color:var(--faint);font-weight:600;
font-variant-numeric:tabular-nums}
/* the part nobody wants to look at, drawn to the same scale as the rest */
.tlgut{width:46px;flex:0 0 auto;position:relative;background:var(--sunk);
border-inline-end:2px dashed var(--line-2);display:flex;align-items:center;
justify-content:center}
.tlgut.has{background:var(--bad-soft)}
.tlgut b{font-size:var(--fs-sm);font-weight:800;color:var(--bad-ink);
font-variant-numeric:tabular-nums}
.tltrack{position:relative;flex:1;min-width:0;padding:10px 0;
min-height:calc(var(--rows,1) * 30px + 16px)}
.tlgrid{position:absolute;inset-block:0;width:1px;background:var(--line);opacity:.6}
.tlnowline{position:absolute;inset-block:0;width:2px;background:var(--a-400);
opacity:.75}
/* a mark is a dot and its title; the title is clipped rather than wrapped,
because a lane that grows to fit its longest title stops being a lane */
.tldot{position:absolute;transform:translate(-50%,0);border:none;
background:var(--a-100);color:var(--a-700);border-radius:var(--r-pill);
padding:4px 10px 4px 8px;display:flex;align-items:center;gap:6px;cursor:pointer;
max-width:190px;box-shadow:var(--elev-1);font-family:inherit;
transition:box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
html[dir="rtl"] .tldot{transform:translate(50%,0)}
.tldot::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
background:var(--a-500)}
.tldot.s1{padding-block:6px}
.tldot.s1::before{width:11px;height:11px}
.tldot.s2{padding-block:8px}
.tldot.s2::before{width:14px;height:14px}
.tldot .tlp{font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:120px}
.tldot small{font-size:var(--fs-micro);color:var(--muted);
font-variant-numeric:tabular-nums;flex:0 0 auto}
.tldot:hover{box-shadow:var(--elev-2);z-index:4}
html[dir="ltr"] .tldot:hover{transform:translate(-50%,0) scale(1.04)}
html[dir="rtl"] .tldot:hover{transform:translate(50%,0) scale(1.04)}
.tldot.late{background:var(--bad-soft);color:var(--bad-ink)}
.tldot.late::before{background:var(--bad-dot)}
.tlfoot{margin-top:10px;font-size:var(--fs-sm)}
@media(max-width:900px){
.tllbl{width:96px}.tlruler{margin-inline-start:calc(96px + 46px)}
.tldot{max-width:120px}.tldot .tlp{max-width:64px}}
/* ── the work bar ──────────────────────────────────────────────────────────
Three bands instead of five, and in the order somebody reads a screen:
what am I looking at (title + lens + the one action), how am I narrowing
it (search, filters, focus), and what does that leave (scope, counts,
saved views). The machinery that used to sit in band one now lives behind
a labelled panel that says how many filters it is holding. */
.workbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin:0 0 10px;padding:0}
.workbar[hidden]{display:none}
.wsearch{position:relative;display:flex;align-items:center;flex:1 1 280px;
max-width:420px;min-width:0}
.wsearch .ic{position:absolute;inset-inline-start:13px;color:var(--faint);
font-size:15px;pointer-events:none}
.wsearch input{width:100%;min-width:0;padding-inline-start:38px;
background:var(--surface);border-radius:var(--r-pill)}
.workbar .btn.ghost{padding:9px 14px}
.workbar .btn.ghost.on{background:var(--a-50);border-color:var(--a-300);
color:var(--a-700)}
#fltN{background:var(--grad-accent);color:var(--accent-ink);border-radius:var(--r-pill);
font-size:var(--fs-micro);font-weight:700;padding:1px 7px;margin-inline-start:7px;
font-variant-numeric:tabular-nums}
.popwrap{position:relative}
.pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:30;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--elev-3);padding:14px;width:320px;
animation:popIn var(--dur-2) var(--ease) both}
.pop.pop-sm{width:210px;padding:8px}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.985)}
to{opacity:1;transform:none}}
.poprow{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.poprow label{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.poprow select,.poprow input{width:100%;min-width:0}
.popchk{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);
padding:7px 0;color:var(--text);cursor:pointer}
.popchk input{min-width:0;width:auto;box-shadow:none}
.popfoot{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;
display:flex;justify-content:flex-end}
.popitem{display:block;width:100%;text-align:start;background:none;border:none;
color:var(--text);font-family:inherit;font-size:var(--fs-sm);padding:9px 11px;
border-radius:var(--r-sm);cursor:pointer}
.popitem:hover{background:var(--a-50);color:var(--a-700)}
/* the quiet line: who you are seeing for, what that leaves, and the views
somebody saved. One line, muted, and never competing with the board. */
.metastrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-bottom:8px;min-height:0}
.metastrip:empty{display:none}
#totals{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.pstate{margin-bottom:12px}
/* ── the column header ─────────────────────────────────────────────────── */
.kcol h2{flex-direction:column;align-items:stretch;gap:5px;padding:6px 8px 10px}
.kcol h2 .ch1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcol h2 .cw{font-size:var(--fs-sm);font-weight:700;color:var(--head);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kcol h2 .ch2{display:flex;align-items:center;gap:6px;min-height:16px}
.kcol h2 .n{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
border-radius:var(--r-pill);padding:1px 9px;font-size:var(--fs-xs);font-weight:700;
font-variant-numeric:tabular-nums;flex:0 0 auto}
.kcol.klead h2 .n{background:var(--grad-accent);color:var(--accent-ink);border-color:transparent}
.kcol h2 .cv{background:none;color:var(--muted);padding:0;font-size:var(--fs-xs);
font-weight:700;font-variant-numeric:tabular-nums}
.kcol h2 .cv.dim{color:var(--faint);font-weight:500}
.kcol h2 .late{font-size:var(--fs-micro);padding:1px 7px;border-radius:var(--r-pill)}
.cshare{display:block;height:3px;background:var(--line);border-radius:var(--r-pill);
overflow:hidden}
.cshare u{display:block;height:100%;background:var(--a-400);text-decoration:none;
border-radius:var(--r-pill);transition:width var(--dur-2) var(--ease)}
.kcol{background:var(--raised);border:1px solid var(--line);border-top-width:3px;
padding:8px 6px 8px 8px}
.kcol.klead{background:var(--sunk)}
/* ── the taxonomy is not the brand ─────────────────────────────────────────
Tags were blue chips, the same blue as the primary action and the active
nav row. On a card carrying a status badge, a gate badge and two tags, the
eye went to the tags — which are the least important thing on it. */
.chip{background:var(--sunk);color:var(--muted);font-weight:600;
border:1px solid var(--line);font-size:var(--fs-micro);padding:1px 8px}
.kcard .chip{margin-inline-start:0;margin-top:4px}
/* ── the quiet line ────────────────────────────────────────────────────────
Three things used to share this line at the same weight: who you are
seeing for, the views somebody saved, and a list of keyboard shortcuts. A
shortcut list is a thing you read once and never again, so it fades in
when the line is under the cursor and otherwise stays out of the way. */
.metastrip{border-bottom:1px solid var(--line);padding-bottom:8px}
.metastrip #crmScope{flex:0 0 auto}
.metastrip .vtabs{flex:1 1 auto;display:flex;align-items:center;gap:7px;min-width:0}
.kbhint{opacity:0;transition:opacity var(--dur-2) var(--ease);
font-size:var(--fs-micro);white-space:nowrap}
.metastrip:hover .kbhint,.kbhint:focus-within{opacity:1}
.kbhint kbd{border-radius:5px;padding:1px 5px;font-size:var(--fs-micro)}
.vtab{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
padding:4px 11px;font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;
transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.vtab:hover{border-color:var(--a-300);color:var(--a-700)}
/* the one reading on this line that is worth a glance */
.pstate{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;
gap:8px;flex-wrap:wrap}
.pstate b{color:var(--head);font-size:var(--fs-lg);font-weight:800;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pstate .sep{color:var(--line-2)}
.chipf{background:var(--a-50);color:var(--a-700);border:1px solid var(--a-200);
border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-xs);font-weight:600}
.chipf x{cursor:pointer;margin-inline-start:6px;opacity:.65}
.chipf x:hover{opacity:1}
.clrall{background:none;border:none;color:var(--muted);font-family:inherit;
font-size:var(--fs-xs);cursor:pointer;text-decoration:underline}
/* ── the stages are one scale, not a rainbow ───────────────────────────────
The column tops were five unrelated literals — a grey-blue, a mid blue, a
violet, a brown and a teal — none of them from the palette. A funnel is a
SEQUENCE, so it takes a sequential ramp: one hue, light at the top of the
funnel and full strength at the end of it. The only columns that leave the
ramp are the three that are not stages at all but outcomes, and those keep
the status colours they share with every other screen. */
.kcol[data-col="new"]{border-top-color:var(--a-200)}
.kcol[data-col="qualifying"]{border-top-color:var(--a-300)}
.kcol[data-col="qualified"]{border-top-color:var(--a-400)}
.kcol[data-col="manually_qualified"]{border-top-color:var(--a-400)}
.kcol[data-col="screening"]{border-top-color:var(--a-400)}
.kcol[data-col="bidding"]{border-top-color:var(--a-500)}
.kcol[data-col="submitted"]{border-top-color:var(--a-600)}
.kcol[data-col="tech_eval"]{border-top-color:var(--a-700)}
.kcol[data-col="fin_eval"]{border-top-color:var(--a-800)}
.kcol[data-col="won"]{border-top-color:var(--ok-dot)}
.kcol[data-col="lost"]{border-top-color:var(--bad-dot)}
.kcol[data-col="cancelled"],.kcol[data-col="no_bid"]{border-top-color:var(--line-2)}
/* and the share bar under each header takes the same colour as its column,
so the two marks on a header are one statement rather than two */
.kcol[data-col="won"] .cshare u{background:var(--ok-dot)}
.kcol[data-col="lost"] .cshare u{background:var(--bad-dot)}
.kcol[data-col="cancelled"] .cshare u,.kcol[data-col="no_bid"] .cshare u{
background:var(--line-2)}
/* ── the two flows ─────────────────────────────────────────────────────── */
.flowtabs{display:flex;gap:4px;margin:0 0 12px;padding:4px;background:var(--sunk);
border-radius:var(--r-pill);width:fit-content;max-width:100%;overflow:auto}
.flowtabs button{border:none;background:none;font-family:inherit;cursor:pointer;
border-radius:var(--r-pill);padding:8px 18px;font-size:var(--fs-sm);font-weight:700;
color:var(--muted);display:flex;align-items:center;gap:8px;white-space:nowrap;
transition:background var(--dur-2) var(--ease),color var(--dur-1) var(--ease)}
.flowtabs button b{font-size:var(--fs-xs);font-weight:700;background:var(--surface);
color:var(--muted);border-radius:var(--r-pill);padding:1px 8px;
font-variant-numeric:tabular-nums}
.flowtabs button:hover{color:var(--text)}
.flowtabs button.on{background:var(--surface);color:var(--head);box-shadow:var(--elev-1)}
.flowtabs button.on b{background:var(--grad-accent);color:var(--accent-ink)}
#view-pipe.lens-list .flowtabs,#view-pipe.lens-cast .flowtabs,
#view-pipe.lens-team .flowtabs,#view-pipe.lens-anal .flowtabs,
#view-pipe.lens-time .flowtabs{display:none}
/* with two flows instead of eleven columns, a column can be read */
.kcol{min-width:252px}
body.dense .kcol{min-width:200px}
/* ── the archive ───────────────────────────────────────────────────────── */
.kcol.kclosed{min-width:150px;max-width:170px;flex:0 0 auto;background:var(--sunk);
border-top-color:var(--line-2)}
.closedopen{margin:6px 2px 10px;width:calc(100% - 4px);border:1px dashed var(--line-2);
background:none;color:var(--muted);font-family:inherit;font-size:var(--fs-xs);
border-radius:var(--r-md);padding:8px;cursor:pointer;
transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.closedopen:hover{border-color:var(--a-300);color:var(--a-700)}
.closedlist{display:flex;flex-direction:column;gap:7px;padding:0 4px;
font-size:var(--fs-xs);color:var(--muted)}
.closedlist b{color:var(--head);font-variant-numeric:tabular-nums;
margin-inline-end:5px}
/* ── the queue pattern: board on one side, the pursuit on the other ────────
The drawer slid over the board, so opening a lead hid the column it came
from and the three next to it — and the commonest thing anybody does here
is read one card, decide, and move to the next. On a wide screen the board
now makes room instead of being covered: the page narrows, the drawer
becomes the right-hand pane, and j / k keep walking the column behind it.
Under 1440px there is not enough room for two panes, so it stays a drawer
— which is the honest version of "responsive" for this layout. */
/* Driven by two attributes rather than :has(), which the browser re-evaluates
on every mutation — and a board of six hundred cards mutates constantly. */
@media (min-width:1440px){
body[data-view="pipe"].dw-open main{
padding-inline-end:calc(var(--pane,470px) + 10px)}
body[data-view="pipe"].dw-open #drawer.open{
width:var(--pane,470px);box-shadow:none;border-radius:0;
border-inline-start:1px solid var(--line);background:var(--surface)}
body[data-view="pipe"].dw-open #drawer.open.wide{--pane:760px}
main{transition:padding var(--dur-2) var(--ease)}
}
/* ── a board of six hundred cards ──────────────────────────────────────────
Every card carries a title, a client, badges, a money figure and a
nine-element fingerprint. At 790 cards that is roughly fifteen thousand
boxes the browser lays out and paints on every render, and the screen
stopped answering while it did — which no amount of styling survives.
content-visibility lets the browser skip the work for anything scrolled
out of its column and keep the scrollbar honest with a size hint. The
cards look identical; the board stops blocking the main thread. */
.kcard{content-visibility:auto;contain-intrinsic-size:auto 118px}
body.dense .kcard{contain-intrinsic-size:auto 62px}
.kcards{contain:layout paint}
.tldot{content-visibility:auto;contain-intrinsic-size:auto 26px}
/* ── the lead card's foot ─────────────────────────────────────────────────
The fingerprint used to be absolutely positioned over the card, which is
fine until a card's own figures sit at that height — then the mark prints
through the money, which is what it was doing. It has a cell now. The pair
is deliberate: the shape of the qualification beside what the deal is
worth is the question "is this real, and is it big", answered together. */
.kcard .foot{display:flex;align-items:center;gap:12px;margin-top:10px}
/* relative, NOT static: the eight spokes are absolutely positioned, so the
moment the mark stops being their containing block they resolve against
the card instead and the glyph is drawn across the whole of it — which is
exactly what happened, and it looked like a second pinwheel floating over
the text. */
.kcard .scm{position:relative;margin:0;flex:0 0 auto;--g:44px}
.kcard .m{flex:1;min-width:0;margin-top:0;display:flex;flex-direction:column;
align-items:flex-start;gap:3px;justify-content:center}
.kcard .m .v{font-size:var(--fs-lg);font-weight:800;color:var(--head);
font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.kcard .odds{font-size:var(--fs-micro);color:var(--muted);display:flex;
align-items:center;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.kcard .odds .bar{color:var(--faint)}
.kcard .odds .manual{font-style:normal;background:var(--warn-soft);
color:var(--warn-ink);border-radius:var(--r-pill);padding:0 6px;font-weight:700}
body.dense .kcard .foot{gap:8px;margin-top:6px}
body.dense .kcard .scm{--g:26px}
body.dense .kcard .m .v{font-size:var(--fs-sm)}
body.dense .kcard .odds{display:none}
/* ── lead drawer cockpit ───────────────────────────────────────────────
The verbs used to sit two screens below the fold, under eight sets of
radio buttons. The head carries them and never scrolls; the rest of the
record is four panes, all rendered and toggled with [hidden] so a
half-typed note or a radio answer survives a tab switch. */
/* top:-26px, not 0: a sticky offset is measured from the scrollport, and
the scrollport is the drawer PADDING box — top:0 parks the head 26px
down and lets the pane scroll through the strip above it. */
#drawer .dwhead{position:sticky;top:-26px;z-index:5;background:var(--surface);
margin:-26px -26px 0;padding:22px 26px 12px;border-bottom:1px solid var(--line)}
#drawer .dwhead h2{margin-bottom:4px}
.dwsub{font-size:var(--fs-sm);color:var(--muted);margin-bottom:8px}
.dwsub a{color:var(--accent);text-decoration:none}
.dwsub a:hover{text-decoration:underline}
.dwchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dwmoney{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-top:8px}
.dwmoney b{font-size:var(--fs-xl);font-weight:800;color:var(--head);
font-variant-numeric:tabular-nums;line-height:1}
.dwmoney span{font-size:var(--fs-xs);color:var(--muted)}
#drawer .dwhead .actions{margin-top:12px}
.dwtabs{display:flex;gap:2px;margin:0 -26px 14px;padding:10px 26px 0;
border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.dwtabs::-webkit-scrollbar{display:none}
.dwtabs button{border:none;background:none;cursor:pointer;white-space:nowrap;
font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);
padding:8px 10px;border-bottom:2px solid transparent;
display:flex;gap:6px;align-items:center}
.dwtabs button:hover{color:var(--head)}
.dwtabs button.on{color:var(--head);border-bottom-color:var(--accent)}
.dwtabs button b{font-size:var(--fs-xs);font-weight:700;background:var(--sunk);
color:var(--muted);border-radius:var(--r-pill);padding:0 6px;min-width:18px;
text-align:center;font-variant-numeric:tabular-nums}
.dwtabs button.on b{background:var(--accent);color:var(--accent-ink)}
.dwpane[hidden]{display:none}
.dwpane>h3:first-child{border-top:none;margin-top:0;padding-top:0}
.dwfacts{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:12px 0 0;
font-size:var(--fs-sm);background:var(--bg);border-radius:var(--r-lg);padding:12px 14px}
.dwfacts dt{color:var(--muted)}
.dwfacts dd{margin:0;color:var(--head);font-weight:600}
/* The close button used to scroll away under the sticky head: it is
positioned against the drawer, and the drawer is what scrolls. Fixed
inside a transformed ancestor resolves against that ancestor, so it stays
put with the drawer and still slides off-screen when the drawer closes. */
#drawer>.x{position:fixed;top:14px;z-index:6}
/* ── the tender card ──────────────────────────────────────────────────────
Its chips sit where the lead card's band and gates sit, and its readiness
where the lead card's fingerprint sits, so a board holding both reads as
one thing and the eye lands in the same place on either. */
.kchips{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:5px}
.kchips .gatechip,.kchips .chip{margin-inline-start:0;margin-top:0}
.dueg{display:inline-flex;align-items:center;gap:3px;border-radius:var(--r-pill);
padding:1px 7px;font-size:var(--fs-micro);font-weight:700;background:var(--sunk);
color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dueg.soon{background:var(--warn-soft);color:var(--warn-ink)}
.dueg.late{background:var(--bad-soft);color:var(--bad-ink)}
.dueg.none{font-weight:600;color:var(--faint)}
/* after submission the date is a fact, not a countdown — no colour spent */
.dueg.done{font-weight:600;letter-spacing:.01em}
/* One bar per checklist item: a 4-of-7 that is the FIRST four is a bid being
worked through, and a 4-of-7 scattered is one being cherry-picked. The
count alone cannot tell them apart. */
.kcard .rdy{flex:0 0 auto;width:44px;height:26px;display:flex;align-items:stretch;
gap:2px}
.kcard .rdy i{flex:1;min-width:2px;border-radius:2px;background:var(--sunk)}
.kcard .rdy i.on{background:var(--a-500)}
.kcard .rdy.full i.on{background:var(--won)}
/* a checklist nobody has started is worth seeing and not worth shouting */
.kcard .rdy.none{opacity:.45}
body.dense .kcard .rdy{width:30px;height:16px}
/* ── room to work ─────────────────────────────────────────────────────────
Two panels sit either side of the board and neither could be put away: a
240px rail of navigation and a 240px rail of facets, on a screen whose job
is six columns of cards. Both collapse now, and both remember.
The account strip moved out of the rail's foot to the top of the page.
Everything here is written with logical properties, so it lands at the
top-left in Arabic and the top-right in English without a second rule. */
.appbar{display:flex;align-items:center;gap:8px;margin:-4px 0 10px;
padding-bottom:8px;border-bottom:1px solid var(--line)}
.appbar .utils{display:flex;align-items:center;gap:4px;margin-inline-start:auto;
border:none;padding:0}
.appbar .utils .nav{padding:6px 10px;border-radius:var(--r-pill)}
.appbar .foot{display:flex;align-items:center;gap:9px;margin:0;padding:4px 6px;
border:none;border-radius:var(--r-pill);background:var(--sunk)}
.appbar .foot .av{width:28px;height:28px;font-size:11px}
.appbar .foot .who{font-size:var(--fs-xs);line-height:1.2}
.appbar .foot .who small{font-size:var(--fs-micro)}
@media(max-width:760px){.appbar .foot .who{display:none}}
/* the rail's own switch, in its wordmark */
aside .logo{display:flex;align-items:center;gap:8px}
.railtog{margin-inline-start:auto;width:26px;height:26px;flex:0 0 auto;
border:1px solid var(--rail-line,#2B4A6E);background:none;border-radius:8px;
color:inherit;cursor:pointer;font-size:13px;line-height:1;opacity:.75}
.railtog:hover{opacity:1}
.railtog::before{content:"⟨"}
html[dir="ltr"] .railtog::before{content:"⟩"}
body.rail-min .railtog::before{content:"⟩"}
html[dir="ltr"] body.rail-min .railtog::before{content:"⟨"}
body.rail-min > aside{width:64px;flex:0 0 64px} /* same specificity as the base rule */
/* font-size:0 rather than hiding a span: white-label replaces the wordmark
with the tenant's own name as a bare text node, and there is no selector
for a text node. The switch gets its size back on the next line. */
body.rail-min .logo{font-size:0;gap:0;padding:10px 0 14px}
body.rail-min .logo img{display:none}
body.rail-min #planBadge{display:none!important} /* it is built with an inline display */
body.rail-min .sect,
body.rail-min .nav .lbl,body.rail-min .nav .kbd{display:none}
body.rail-min .nav{justify-content:center;padding:11px 0}
body.rail-min .logo{justify-content:center;gap:0}
body.rail-min .railtog{margin-inline-start:0;font-size:13px}
/* the facet rail folds to a strip that still says how many filters are on */
.fcol{margin-inline-start:6px;border:none;background:none;cursor:pointer;
color:var(--muted);font-size:14px;line-height:1;padding:2px 4px;border-radius:6px}
.fcol:hover{background:var(--sunk);color:var(--head)}
.fcol::before{content:"⟨"}
html[dir="ltr"] .fcol::before{content:"⟩"}
body.facets-min .fcol::before{content:"⚲"}
body.facets-min .facetbar{width:38px;flex:0 0 38px;padding:10px 4px;overflow:hidden}
body.facets-min .facetbar>*:not(.fhead){display:none}
body.facets-min .facetbar .fhead{flex-direction:column;gap:6px;margin:0}
body.facets-min .facetbar .fhead b,body.facets-min .facetbar .freset{display:none}
body.facets-min .fcol{margin-inline-start:0;font-size:16px}
.fcount{font-size:var(--fs-micro);font-weight:700;background:var(--accent);
color:var(--accent-ink);border-radius:var(--r-pill);padding:0 5px;display:none}
body.facets-min .fcount{display:inline-block}
/* The rail's own ink is light, for a navy rail. These three moved onto the
page, so they take the page's. */
.appbar .utils .nav{color:var(--ink-2);background:none;width:auto;margin:0}
.appbar .utils .nav:hover{background:var(--sunk);color:var(--head)}
.appbar .utils .nav .lbl{flex:0 0 auto}
.appbar .foot .who{color:var(--head)}
/* ── what the stage will not accept ───────────────────────────────────────
Dimmed rather than hidden: a control that vanishes reads as a bug or a
missing permission, and the question "why can I not tick this" then has no
answer on the screen. Dimmed and inert, under a line that says why, it
reads as the state of the pursuit — which is what it is. */
.lkbar{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;
border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:600;
background:var(--warn-soft);color:var(--warn-ink)}
.lkbar.closed{background:var(--bad-soft);color:var(--bad-ink)}
.lkbar.parked{background:var(--sunk);color:var(--muted)}
.lkbar .lkic{font-size:14px;line-height:1;flex:0 0 auto}
.lkbar .lkun{margin-inline-start:auto;font-weight:700;font-size:var(--fs-xs);
opacity:.85}
.lk-off{opacity:.42;pointer-events:none;filter:grayscale(.5)}
/* ── the policy, on the screen ────────────────────────────────────────────
Four answers reach the reader, not one. A BLOCK and an APPROVAL_REQUIRED
that look alike teach that every refusal is a wall, and a wall is what
people route around. */
.gvbar{display:flex;align-items:center;gap:8px;border-radius:var(--r-lg);
padding:8px 12px;font-size:var(--fs-sm);font-weight:700;margin:10px 0}
.gvbar span{font-size:14px;line-height:1}
.gvbar.APPROVAL_REQUIRED{background:var(--warn-soft);color:var(--warn-ink)}
.gvbar.BLOCK{background:var(--bad-soft);color:var(--bad-ink)}
.gvbar.WARN{background:var(--sunk);color:var(--ink-2)}
.gvlist{list-style:none;padding:0;margin:8px 0 2px;font-size:var(--fs-sm)}
.gvlist li{padding:7px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.gvlist li:first-child{border-top:none}
.gvlist b{font-weight:600;color:var(--head)}
.gvnote{font-size:var(--fs-xs);color:var(--muted);margin-top:10px;line-height:1.6}
/* the five questions, on the record they are about */
.gvstrip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;margin:0 0 14px}
.gvrow{display:flex;align-items:center;gap:9px;background:var(--surface);
padding:8px 11px;font-size:var(--fs-sm)}
.gvtick{width:18px;flex:0 0 auto;text-align:center;font-weight:700}
.gvrow.on .gvtick{color:var(--won)}
.gvrow.ask .gvtick{color:var(--warn-ink)}
.gvrow.off .gvtick{color:var(--bad-ink)}
.gvrow.ask{background:var(--warn-soft)}
.gvrow.off{background:var(--bad-soft)}
.gvlbl{font-weight:600;color:var(--head);flex:0 0 auto}
.gvdet{color:var(--muted);flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.gvdo{border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
border-radius:var(--r-pill);padding:2px 10px;font:inherit;
font-size:var(--fs-xs);font-weight:600;color:var(--accent);flex:0 0 auto}
.gvdo:hover{background:var(--a-50)}
/* ── المحتوى المحلي ───────────────────────────────────────────────────────
One bar, two segments, out of a hundred — because the question is always
"how much of the score is price and how much is content", and two numbers
side by side answer it slower than one bar does. The track is recessive,
the gap between segments is the surface colour rather than a line, and the
radius sits on the data end only. */
.lcgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.lcgrid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);
color:var(--muted)}
.lcgrid input{width:100%;min-width:0}
.lcchk{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);
color:var(--ink-2);margin:4px 0}
.lcmech{background:var(--bg);border-radius:var(--r-lg);padding:10px 12px;
margin:12px 0 10px;font-size:var(--fs-sm)}
.lcmech.guess{background:var(--warn-soft)}
.lcmech b{color:var(--head)}
.lcmech .chip{margin-inline-start:6px}
.lcnote{font-size:var(--fs-xs);color:var(--muted);line-height:1.65;margin-top:4px}
.lcbar{display:flex;height:16px;border-radius:var(--r-sm,4px);background:var(--sunk);
overflow:hidden;margin:10px 0 8px}
.lcbar i{display:block;height:100%}
.lcbar i.p{background:var(--a-500);border-radius:0}
.lcbar i.c{background:var(--a-300);border-inline-start:2px solid var(--surface);
border-start-end-radius:4px;border-end-end-radius:4px}
.lckey{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);
font-variant-numeric:tabular-nums}
.lckey i{display:inline-block;width:9px;height:9px;border-radius:2px;
margin-inline-end:5px;vertical-align:-1px}
.lckey i.p{background:var(--a-500)}
.lckey i.c{background:var(--a-300)}
.lckey b{color:var(--head);font-weight:700}
.lckey .tot{margin-inline-start:auto;color:var(--head);font-weight:600}
.lcmiss{font-size:var(--fs-xs);color:var(--warn-ink);background:var(--warn-soft);
border-radius:var(--r-lg);padding:7px 11px;margin:8px 0}
.lcmiss .chip{margin-inline-start:5px}
#dwLc .ok{color:var(--won);font-weight:600}
#dwLc .no{color:var(--bad-ink);font-weight:600}
#dwLc .itab td{padding:5px 8px;font-variant-numeric:tabular-nums}
#dwLc .itab .gain{color:var(--won);font-weight:700}
.lcmechpick{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);
color:var(--muted);margin:8px 0}
.lcmechpick select{width:100%}
/* the governance dialogue's own box, styled as the outcome modal is */
#gvModal{background:var(--surface);border-radius:var(--r-xl);padding:22px 24px;
width:460px;max-width:94vw;box-shadow:var(--elev-3);max-height:88vh;overflow:auto}
#gvModal[hidden]{display:none}
#gvModal h2{font-size:var(--fs-xl);font-weight:800;color:var(--head);margin-bottom:4px}
#gvModal label{display:block;font-size:var(--fs-xs);color:var(--muted);
margin:10px 0 4px}
#gvModal input[type=text],#gvModal textarea{width:100%}
/* a row that is simply not due yet is not a fault — grey, not red */
.gvrow.idle{background:var(--surface)}
.gvrow.idle .gvtick{color:var(--faint)}
.gvrow.idle .gvlbl{color:var(--ink-2);font-weight:500}
/* the message body of the app's own alert/confirm */
.uimsg{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;
white-space:pre-wrap;margin:6px 0 2px}
/* a reason wears its own severity, so the wall is visible among the gates */
.gvlist li{display:flex;align-items:flex-start;gap:8px}
.gvlist .gvsev{flex:0 0 auto;font-weight:700;line-height:1.5}
.gvlist li.sev-BLOCK .gvsev{color:var(--bad-ink)}
.gvlist li.sev-APPROVAL_REQUIRED .gvsev{color:var(--warn-ink)}
.gvlist li.sev-WARN .gvsev{color:var(--muted)}
.gvlist .gvsevl{margin-inline-start:auto;flex:0 0 auto;font-size:var(--fs-micro);
font-weight:700;border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
.gvlist li.sev-BLOCK .gvsevl{background:var(--bad-soft);color:var(--bad-ink)}
.gvlist li.sev-APPROVAL_REQUIRED .gvsevl{background:var(--warn-soft);color:var(--warn-ink)}
.gvlist li.sev-WARN .gvsevl{background:var(--sunk);color:var(--muted)}
/* ── the bid plan, and the capacity grid ────────────────────────────────────
Both are tables of a kind, and both earn their keep by making one thing
obvious at a glance: what is late, and which week is already full. So the
colour is spent there and nowhere else — a plan where every row is
decorated is a plan nobody scans. */
.schverdict{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
padding:7px 10px;border-radius:var(--r-md);margin:2px 0 8px}
.schverdict.ok{background:var(--won-soft);color:var(--won)}
.schverdict.bad{background:var(--lost-soft);color:var(--lost)}
.schlist{display:flex;flex-direction:column;gap:1px}
.schrow{display:grid;grid-template-columns:21px 1fr;gap:2px 9px;align-items:start;
padding:7px 8px;border-radius:var(--r-md);font-size:12.5px;
transition:background var(--dur-1) var(--ease)}
.schrow:hover{background:var(--sunk)}
.schrow.late{box-shadow:inset 2px 0 0 var(--lost)}
html[dir="rtl"] .schrow.late{box-shadow:inset -2px 0 0 var(--lost)}
.schrow.done .schname{text-decoration:line-through;opacity:.55}
.schtick{grid-row:1 / span 2;width:19px;height:19px;flex:0 0 auto;border-radius:6px;
cursor:pointer;border:1.5px solid var(--line-2);background:transparent;
color:var(--won);font-size:12px;line-height:1;padding:0;margin-top:1px}
.schtick:hover{border-color:var(--accent)}
.schrow.done .schtick{background:var(--won);border-color:var(--won);color:#fff}
.schname{grid-column:2;min-width:0;line-height:1.45}
.schmeta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* where it NOW lands, when that is not where it was due — the number that
makes the slip real, so it is the one that is not grey */
.schmoved{color:var(--lost);font-weight:700}
.schwho{color:var(--ink-2)}
.schverdict{align-items:flex-start;line-height:1.45}
/* The names column takes whatever it needs and the weeks are a fixed, equal
grid: left to themselves the weeks collapse to the width of "1.0" and the
row reads as a sentence with four full stops after it. */
.captbl{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
.captbl th:not(:first-child),.captbl td:not(:first-child){width:74px}
.captbl th,.captbl td{padding:7px 9px;text-align:start;border-bottom:1px solid var(--line)}
.captbl th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2);
font-weight:600}
.chip.bad{background:color-mix(in srgb,var(--lost) 14%,transparent);color:var(--lost);
border:1px solid color-mix(in srgb,var(--lost) 38%,transparent)}
.capcell{text-align:center;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.capcell.over{background:var(--lost-soft);color:var(--lost);font-weight:700;
border-radius:var(--r-sm)}
/* ── the workbench lanes ────────────────────────────────────────────────────
A lane is one question. The heading carries the count and the tone; the
rows are the existing agenda row, so the day looks like the rest of the
product rather than like a new screen. An empty lane is deliberately NOT
hidden — "nothing at risk" is the answer a director most wants, and a
screen that hides it makes you wonder whether it ran. */
.wblane{margin:0 0 18px}
.wbh{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;
font-weight:700;color:var(--head)}
.wblane.bad .wbh{color:var(--lost)}
.wblane.warn .wbh{color:var(--warn)}
.wbempty{font-size:12.5px;color:var(--ink-2);padding:7px 10px;
background:var(--sunk);border-radius:var(--r-md)}
/* The owner is a control, not a label: until a milestone carries a name the
capacity grid can only report roles, so the empty state has to invite the
click rather than look like missing data. */
.schwho{border:none;background:none;padding:0;font:inherit;font-size:11px;
color:var(--ink-2);cursor:pointer;border-bottom:1px dashed var(--line-2)}
.schwho:hover{color:var(--accent);border-bottom-color:var(--accent)}
.schwho.none{color:var(--muted);font-style:italic}
/* A permission that hides DOM has to keep hiding it when the screen renders
more. permHide() only touches what exists when it runs, so the certificate
rows — rendered after sign-in — came back with live delete buttons for a
role that may not delete. A class on covers whatever comes next. */
body.no-certwrite .certwrite{display:none!important}
/* ══════════════ My day: the briefing, the week, the cascade ══════════════
The lanes answered "what is on me". They never answered "how is today",
which is the question somebody actually opens the screen with — so they
read thirteen counts and did the summing themselves.
Everything here is composed from the lanes already on the page: no second
query, no second opinion, and nothing that is not a date or a count. */
.mdbrief{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;
box-shadow:var(--shadow)}
.mdbs{font-size:21px;line-height:1.5;color:var(--text);font-weight:600;
margin:0 0 6px}
.mdbs.quiet{color:var(--ok-ink);font-weight:500}
.mdsince{font-size:12.5px;color:var(--muted);margin:0}
/* The week: five columns, Sunday to Thursday, each as tall as its own load.
The wall is marked because seeing Wednesday BEFORE Wednesday is the whole
point of drawing it. */
.mdweek{display:flex;gap:8px;margin-top:18px;align-items:flex-end}
.mdwd{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:8px 4px 7px;border-radius:9px;background:var(--raised);
border:1px solid transparent}
.mdwd .mdwn{font-size:11px;color:var(--muted);letter-spacing:.2px}
.mdwd .mdwc{font-size:16px;font-weight:700;color:var(--ink-2);line-height:1}
.mdwd .mdwbar{width:100%;height:4px;border-radius:3px;background:var(--line)}
.mdwd .mdwbar i{display:block;height:100%;border-radius:3px;
background:var(--a-300)}
.mdwd.now{background:var(--sel-soft);border-color:var(--accent-line)}
.mdwd.now .mdwn{color:var(--accent);font-weight:700}
.mdwd.wall{background:var(--warn-soft);border-color:var(--warn-dot)}
.mdwd.wall .mdwc{color:var(--warn-ink)}
.mdwd.wall .mdwbar i{background:var(--warn-dot)}
.mdwd.empty .mdwc{color:var(--faint);font-weight:500}
/* Working days left. A date asks the reader to count Sunday to Thursday in
their head; this is the sum they get wrong. */
.dchip{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap;
background:var(--sunk);color:var(--ink-2)}
.dchip.soon{background:var(--warn-soft);color:var(--warn-ink)}
.dchip.over{background:var(--bad-soft);color:var(--bad-ink)}
/* The cascade. "At risk" sends somebody to open a screen; the chain sends
them to the one task the rest is queued behind. */
.casc{margin:8px 0 2px;padding:12px 14px;background:var(--bad-soft);
border-radius:10px;border:1px solid var(--del-line)}
.cascl{font-size:11px;color:var(--bad-ink);font-weight:700;letter-spacing:.3px;
text-transform:uppercase;margin:0 0 8px}
.cascs{display:flex;flex-direction:column;gap:3px;margin:0}
.cascstep{font-size:12.5px;color:var(--ink-2);display:flex;gap:7px;
align-items:baseline}
.cascstep .cascar{color:var(--bad-dot);flex:0 0 auto}
.cascstep.root{color:var(--bad-ink);font-weight:700}
.cascfix{font-size:12.5px;color:var(--text);margin:9px 0 0;font-weight:600}
.cascfix b{color:var(--bad-ink)}
/* ── My day, laid out as a day rather than a filing cabinet ──────────────────
Thirteen expired certificates and eleven unowned milestones off one dead
tender turned the screen into a scroll nobody reached the bottom of, in a
1100px column with a third of the window empty beside it. Three changes:
the lanes sit two across, every lane draws five rows and counts the rest,
and the lanes with nothing in them collapse into ONE line instead of four
full-height cards each saying "nothing". */
#view-myday{--view-max:1460px}
.mdgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* The first lane is the platform's claim about what to look at first, so it
keeps the full width and the eye lands on it before the grid starts. */
.mdgrid>.wblane.lead{grid-column:1 / -1}
@media (max-width:1180px){ .mdgrid{grid-template-columns:1fr} }
.wblane .wbmore{display:block;width:100%;margin-top:8px;padding:7px 10px;
font-size:12px;font-weight:600;color:var(--accent);background:var(--ice);
border:1px solid var(--accent-line);border-radius:9px;cursor:pointer}
.wblane .wbmore:hover{background:var(--a-100)}
/* Everything that is clear, on one line. "Nothing at risk" is the answer a
director most wants — it is not worth a card the height of a real one. */
.mdclear{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
background:var(--ok-soft);border:1px solid var(--line);
border-radius:var(--radius);padding:12px 16px;margin-top:14px}
.mdclear .mdct{font-size:12px;font-weight:700;color:var(--ok-ink);
letter-spacing:.2px;margin-inline-end:4px}
.mdclear .mdci{font-size:12px;color:var(--ink-2);background:var(--surface);
border:1px solid var(--line);border-radius:999px;padding:3px 11px}
/* Two columns halved the room a row has, and the old one-line-with-ellipsis
title started cutting real work into «Requirements and co…». The title may
now take two lines; the line UNDER it — which was wrapping to three and
making every row as tall as a card — takes exactly one. */
.mdgrid .agrow .agw b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;line-height:1.35}
.mdgrid .agrow .agy{display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.mdgrid .agrow{align-items:flex-start}
.mdgrid .agrow .agi{margin-top:2px}
/* A week with nothing due in it does not need five empty columns drawn to
say so. */
.mdquiet{font-size:12.5px;color:var(--muted);margin:16px 0 0}
/* ══════════ The Command Center: the business, not your inbox ══════════════
Its three best cards had become a second, worse copy of My day — the same
deadlines, the same certificates, the same undecided bids, for everybody
regardless of role. These three answer the other question. */
.ccbiz{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
@media (max-width:980px){ .ccbiz{grid-template-columns:1fr} }
.bizc{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.bizc h4{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.4px;
text-transform:uppercase;color:var(--muted)}
.bizn{font-size:30px;font-weight:700;color:var(--text);line-height:1.1;
display:flex;align-items:baseline;gap:8px}
.bizn small{font-size:13px;font-weight:500;color:var(--muted)}
.bizl{font-size:12.5px;color:var(--ink-2);margin:8px 0 0;line-height:1.5}
.bizl b{color:var(--text)}
.bizmute{color:var(--faint)}
/* Closed, commit and the ceiling as one bar — the gap is measured against the
first two, so the third is drawn beside them and never inside them. */
.bizbar{display:flex;height:9px;border-radius:5px;overflow:hidden;
background:var(--sunk);margin:12px 0 8px}
.bizbar i{display:block;height:100%}
.bizbar .b1{background:var(--ok-dot)}
.bizbar .b2{background:var(--a-400)}
.bizkey{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.bizkey span::before{content:"";display:inline-block;width:8px;height:8px;
border-radius:2px;margin-inline-end:5px;background:var(--line-2)}
.bizkey .k1::before{background:var(--ok-dot)}
.bizkey .k2::before{background:var(--a-400)}
/* Where the money is sitting still — by value, because twelve small leads and
one large one blocked on the same question are not the same problem. */
.bizrow{display:flex;align-items:center;gap:10px;padding:7px 0;
border-top:1px solid var(--line)}
.bizrow:first-child{border-top:none}
.bizrow .bzn{flex:1;font-size:12.5px;color:var(--ink-2)}
.bizrow .bzv{font-size:12.5px;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums}
.bizrow .bzc{font-size:11px;color:var(--muted)}
/* Qualification mode `off`: the verdict carries band "off" and no label, so
every band pill fed from it disappears rather than showing an empty chip. */
.band.off{display:none}
/* ── Laptop and presentation screens (29 Oct 2026) ─────────────────────────
Measured, not guessed: a 17" laptop at 125–150% Windows scaling, or a
1366×768 panel, leaves the browser a viewport of about 1280–1366 × 600–660
once the tab strip and address bar are taken. Every rule below fixes
something that was off-screen or unreachable at that size. */
/* 1 · Dialogs. #modal had no height limit and no scroll, inside a fixed,
centred overlay. The «فرصة محتملة جديدة» form is already 689px tall with
its sections closed, so on a 657px screen the title sat above the top edge
and Save below the bottom — opening a section pushed it further, and there
was no way to reach either. The dialog now scrolls inside itself and its
buttons stay pinned to its foot. */
#modalBg{padding:16px}
#modal{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
#modal>:last-child:has(>.btn){position:sticky;bottom:-24px;
background:var(--surface);padding-block:12px;margin-bottom:-24px;z-index:2}
/* 2 · The rail. Its rows are flex items with overflow:hidden, so their
min-height resolves to 0 and the list SHRANK them to fit instead of
scrolling: at 657px every row was squeezed from 38px to about 20px and the
last ones (Admin console) to 18px with the label cut. Rows keep their
height; the list scrolls. */
aside .navs>*{flex-shrink:0}
aside .nav{line-height:1.4}
/* railFade() used the class name `more`, which is also the global "show more"
button (dashed border, width:100%) — so a scrollable rail drew a dashed box
round the whole menu. The fade now has its own name. */
aside .navs.has-more{mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent)}
/* 3 · Forms in two columns. A grid track of 1fr will not shrink below its
content, and a date input's content is wide, so «تاريخ الانتهاء» spilled
out of the certificates card. */
.grid>*,.grid2>*,#modal .grid2>*{min-width:0}
input[type=date]{min-width:0;max-width:100%}
/* 4 · Short screens: tighter chrome, and the board gets a full screen. */
@media (max-height:820px){
aside .nav{padding-block:6px;line-height:1.35}
.sect{padding-top:10px;padding-bottom:4px}
.logo{padding-bottom:10px}
header.top{margin-bottom:10px}
header.top h1{font-size:clamp(18px,1vw+12px,22px)}
}
/* The board lens is a fixed-height pane (100vh) with five rows of controls
above the columns; at 657px that left the columns 180px — one card each.
On a short screen the view becomes a normal page instead: the controls
scroll away and the board below them is a full screen tall, with its
columns scrolling inside it as before. */
@media (max-height:900px){
#view-pipe.lens-board.active{height:auto;overflow:visible}
#view-pipe.lens-board #pipeBody{flex:0 0 auto;height:calc(100vh - 24px);min-height:420px}
}
/* 5 · Facet lists hold Arabic names in the English UI (and the reverse), and
the ellipsis went on the wrong end. Each label now takes its own
direction from its first strong character. */
.fitem .fl,.agbar-n,.acrow .an{unicode-bidi:plaintext}
/* On a tall screen the board stays a fixed pane — but sized by the space that
is actually left, not by a 52px header that has since grown to ~120px with
the utility bar, which made every page with the board scroll by 60–70px. */
@media (min-height:901px){
main:has(>#view-pipe.lens-board.active){height:100vh;display:flex;flex-direction:column;overflow:hidden}
main:has(>#view-pipe.lens-board.active)>*{flex-shrink:0}
#view-pipe.lens-board.active{height:auto;flex:1 1 0;min-height:0}
}
/* ─── market access «جاهزية التأهيل» ─── */
.mafilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px}
.mafilters input{min-width:200px}
.mafilters .spacer{flex:1}
.matbl td{vertical-align:middle}
.machip{display:inline-block;padding:1px 9px;border-radius:var(--r-pill,99px);font-size:11.5px;
background:var(--ice);color:var(--head);border:1px solid var(--line)}
.machip.ok{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.machip.warn{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.machip.bad{background:var(--bad-soft);color:var(--bad-ink);border-color:transparent}
.mamoves{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.mamoves .btn{padding:2px 10px;font-size:12px}
.macat{border:1px solid var(--line);border-radius:var(--r-md,10px);padding:10px;margin:8px 0}
.macat-h{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mareq{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;
padding:6px 0;border-bottom:1px dashed var(--line)}
.mareq:last-child{border-bottom:0}
.mahist{display:grid;grid-template-columns:130px 1fr auto;gap:8px;font-size:12px;padding:3px 0;
border-bottom:1px solid var(--line)}
.mawarn{background:var(--warn-soft);color:var(--warn-ink);border-radius:var(--r-md,10px);
padding:8px 12px;margin:0 0 10px;font-size:12.5px;line-height:1.8}
.macard{margin-top:14px}
@media (max-width:700px){.mahist{grid-template-columns:1fr}.mareq{flex-direction:column}}
/* ═══════════ CX pass, 31 Oct 2026 ═══════════ */
/* Empty states that say what fills them */
.empty.ecta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.empty.ecta b{color:var(--ink-2);font-size:13.5px}
.empty.ecta p{margin:0;max-width:56ch;line-height:1.7;font-size:12.5px;color:var(--muted)}
.empty.ecta .ecta-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.empty.ecta .ecta-a .btn{padding:6px 14px;font-size:12px}
/* A module's English explanation inside the Arabic screen: a hint, not prose */
.pxhint{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);
border-bottom:1px dotted var(--line-2);cursor:help;white-space:nowrap}
.pxhint:focus{outline:2px solid var(--accent);outline-offset:2px}
/* TenderTalent: the raw reason folds away */
.tt-tech{margin-top:4px}
.tt-tech summary{cursor:pointer;font-size:11px;color:var(--muted)}
/* The date under a date field, in the screen's language with the Hijri date */
.dhint{display:block;font-size:11px;color:var(--muted);margin-top:3px;min-height:0;line-height:1.5}
.dhint:empty{display:none}
.poprow .dhint{flex-basis:100%}
/* Page titles: the purpose clause only where there is room */
header.top h1 .h1-sub{font-weight:600;color:var(--muted);font-size:.72em}
@media (max-width:1500px){header.top h1 .h1-sub{display:none}}
/* Pipeline: the lead/tender switch and the saved views share one row */
.pipe-sub{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:8px}
.pipe-sub .flowtabs{margin:0}
.pipe-sub .metastrip{flex:1 1 320px;margin:0;border-bottom:none;padding-bottom:0}
#view-pipe .pipe-sub+.pstate,#view-pipe .pstate{margin-top:4px}
#view-pipe.lens-list .pipe-sub .flowtabs,#view-pipe.lens-cast .pipe-sub .flowtabs,
#view-pipe.lens-team .pipe-sub .flowtabs,#view-pipe.lens-anal .pipe-sub .flowtabs,
#view-pipe.lens-time .pipe-sub .flowtabs{display:none}
/* The qualification meter on a card read as a loading spinner: eight spokes on
nothing. It now sits on a disc with the score in the middle — a gauge. */
.kcard .scm{border-radius:50%;background:radial-gradient(circle,var(--surface) 0 36%,var(--sunk) 37% 100%)}
.kcard .scm .scn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:700 11px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--head);z-index:3;pointer-events:none}
body.dense .kcard .scm .scn{font-size:8.5px}
/* ── the sidebar folds by section ── */
aside .navs .sect.sect-tog{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;
border-radius:6px}
aside .navs .sect.sect-tog::after{content:"▾";margin-inline-start:auto;font-size:10px;opacity:.7;
transition:transform .15s}
aside .navs .sect.sect-tog.folded::after{transform:rotate(90deg)}
html[dir="rtl"] aside .navs .sect.sect-tog.folded::after{transform:rotate(-90deg)}
aside .navs .sect.sect-tog:hover{color:var(--rail-ink)}
aside .navs .sect.sect-tog:focus-visible{outline:2px solid var(--rail-accent);outline-offset:1px}
body:not(.rail-min) aside .navs .sect-hid{display:none!important}
body.rail-min aside .navs .sect.sect-tog{display:none}
body.rail-min aside .navs .sect.sect-tog::after{display:none}
/* folded headings still show in the icon-only rail as a thin separator */
/* ── presentation mode ── */
#presentBtn .ic{font-size:13px}
body.present #presentBtn{background:var(--ice);color:var(--accent)}
#pmPill{position:fixed;bottom:16px;inset-inline-start:16px;z-index:90;display:flex;align-items:center;gap:10px;
background:var(--text);color:var(--bg);border-radius:999px;padding:6px 8px 6px 14px;font-size:12px;
box-shadow:0 6px 20px rgba(0,0,0,.25)}
html[dir="rtl"] #pmPill{padding:6px 14px 6px 8px}
#pmPill button{border:none;border-radius:999px;padding:4px 12px;font:inherit;font-weight:700;cursor:pointer;
background:var(--bg);color:var(--text)}
body.present .nav[data-view="gov"],body.present .nav[data-view="resolve"],
body.present .nav[data-view="systbl"],body.present .nav[data-view="data"],
body.present .nav[data-view="users"],body.present .nav[data-view="billing"],
body.present .nav[data-view="access"],body.present .nav[data-view="qcfg"],
body.present #adminBtn{display:none!important}
/* failures are for the people who run the system, not for the audience */
body.present .job:has(.s.failed),body.present .cact:has(.st.failed),
body.present .al-row.al-sys,body.present #envBanner,body.present .tt-warn .tt-tech{display:none!important}
@media (min-width:1500px){body.present main{zoom:1.08}}
.mu{font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;font-size:.62em;font-weight:700;letter-spacing:0;
font-variant-numeric:normal}
/* the role guide names a permission, with the identifier an admin will meet in settings */
.pcode{font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;opacity:.6;margin-inline-start:3px;direction:ltr;unicode-bidi:isolate}
body.present .pcode{display:none}
aside .navs .sect.sect-empty{display:none!important}
/* ═════════════════════════════════════════════════════════════════════════
CX — the role-shaped layer (cx.js; CX review, 1 Nov 2026)
═════════════════════════════════════════════════════════════════════════ */
/* trimmed per role / grouped into hubs: out of the rail, still in Ctrl-K */
.nav.cx-rolehid,.nav.cx-hubmember{display:none!important}
.nav.cx-hubactive{background:var(--grad-accent,var(--accent));color:var(--accent-ink,#fff);font-weight:700}
.nav.cx-hubactive .ic{opacity:1}
/* hub tabs — the screens of one job */
.cxhub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;padding:6px;
background:var(--sunk);border:1px solid var(--line);border-radius:12px}
.cxhubt{font-size:12px;font-weight:700;color:var(--muted);padding:0 8px}
.cxtab{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;
padding:6px 12px;border-radius:9px;cursor:pointer}
.cxtab:hover{background:var(--surface)}
.cxtab.on{background:var(--surface);color:var(--text);font-weight:700;box-shadow:var(--elev-1,0 1px 2px rgba(0,0,0,.08))}
/* where the co-pilot's data is processed, said once */
.cxaiw{font-size:11px;opacity:.8;font-weight:500!important;flex:0 1 auto!important;white-space:nowrap}
/* machine paths leave the cloud tenants */
body.cx-saas .cx-selfhost{display:none!important}
.cx-selfnote{margin-bottom:14px;color:var(--muted)}
/* login: company first, a language switch, and a way back in */
#authBox{position:relative}
#authBox .alang{position:absolute;top:14px;inset-inline-end:14px;border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);border-radius:20px;padding:3px 12px;font:inherit;font-size:12px;cursor:pointer}
#authBox .aforgot{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
#authBox .aforgot summary{cursor:pointer;color:var(--accent)}
#authBox .aforgot div{margin-top:6px;line-height:1.7}
/* My Day: the rest of the day is information, not an all-clear */
.mdclear .mdct{color:var(--muted)!important}
.mdclear{background:var(--raised)!important;border-color:var(--line)!important}
/* the opened tender can fill the page */
#drawer.cxfull{width:calc(100vw - 268px)!important;max-width:none!important}
body.rail-min #drawer.cxfull{width:calc(100vw - 84px)!important}
.cxfullbtn{position:absolute;top:18px;inset-inline-end:62px;z-index:3;padding:3px 10px;font-size:12px}
@media (max-width:900px){#drawer.cxfull{width:100vw!important}.cxfullbtn{display:none}}
/* one visual language: module banners become the house header */
.rp-hero,.br-hero,.tv-hero,.tt-hero{background:var(--surface)!important;color:var(--text)!important;
border:1px solid var(--line);box-shadow:none!important}
.rp-hero:after,.br-hero:after,.tv-hero:after,.tt-hero:after,
.rp-hero:before,.br-hero:before,.tv-hero:before,.tt-hero:before{display:none!important}
.rp-hero *,.br-hero *,.tv-hero *,.tt-hero *{color:inherit}
.rp-hero p,.br-hero p,.tv-hero p,.tt-hero p{color:var(--muted)!important;opacity:1!important}
/* one working list: group headings off except Reference and Settings */
body.cx-flat aside .navs .sect.cx-sect-off{display:none!important}
/* phone: the content column may shrink below its widest row (My Day ran
114 px off the edge at 390 px in RTL — CX review) */
@media (max-width:760px){
main{min-width:0;max-width:100%;overflow-x:hidden}
main .view,main .mdgrid,main .wblane,main .agenda,main .mdbrief{min-width:0;max-width:100%}
main .wblane .agenda>*{min-width:0}
main .wbrow,main .agrow{flex-wrap:wrap}
.cxhub{overflow-x:auto;flex-wrap:nowrap}
}
@media (max-width:760px){
#planBadge{display:none!important}
aside .logo{font-size:0!important;padding-bottom:8px}
aside .navs .sect{display:none!important}
}
/* the full-page tender workspace (cx.js workspace()) */
#drawer.cxfull #drawerBody{padding-top:8px}
.cxws-head{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;
padding:14px 18px;margin:30px 0 14px;background:var(--raised);border:1px solid var(--line);border-radius:14px}
.cxws-head h2{grid-column:2;margin:0;font-size:22px}
.cxws-facts{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 18px}
.cxws-facts .kv{margin:0}
.cxws-clock{grid-row:1/span 2;grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:96px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.cxws-clock b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:30px;line-height:1}
.cxws-clock span{font-size:11.5px;color:var(--muted);margin-top:4px;text-align:center}
.cxws-clock.warn{border-color:var(--warn);background:var(--warn-soft,#FAF0DE)}
.cxws-clock.bad{border-color:var(--lost);background:var(--lost-soft,#FBEBE9)}
.cxws-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.cxws-main{min-width:0}
.cxws-side{position:sticky;top:8px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cxws-side>*{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cxws-side .gvstrip{padding:0;overflow:hidden}
@media (max-width:1100px){.cxws-grid{grid-template-columns:1fr}.cxws-side{position:static}}
/* one settings home */
.cxset{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cxsetc{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev-1,none)}
.cxsetc:hover{border-color:var(--accent)}
.cxsetc b{font-size:15px}
.cxsetc .d{font-size:12.5px;color:var(--muted);line-height:1.7}
.cxsetc .now{font-size:12px;font-weight:700;color:var(--accent);margin-top:2px}
/* Arabic date fields */
.cxdatew{position:relative;display:inline-block;max-width:100%}
.cxdatew>input[type="date"]{width:100%}
.cxdatev{display:none}
body.cx-ardates .cxdatev{display:flex;align-items:center;position:absolute;inset:1px 30px 1px 30px;pointer-events:none;
background:inherit;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden}
body.cx-ardates .cxdatev.ph{color:var(--faint)}
body.cx-ardates .cxdatew>input[type="date"]{color:transparent}
body.cx-ardates .cxdatew>input[type="date"]::-webkit-datetime-edit{opacity:0}
body.cx-ardates .cxdatew+.dhint,body.cx-ardates .cxdatew .dhint{display:none}
/* ── every screen fills the window (1 Nov 2026) ─────────────────────────────
Views used to cap themselves between 1100px and 2100px (an inline
--view-max on each section, or a rule in the module that adds it), so on a
wide laptop or monitor the content sat in a narrow column with empty bands
on both sides. Every view now takes the full width of the content area at
every screen size; long prose paragraphs keep their own reading width, and
the side gutter grows a little with the window instead of the content
stopping. One rule here rather than an edit in twelve files, so a view
added later fills the screen without anyone remembering to. */
.view{max-width:none!important;margin-inline:0}
main{padding-inline:clamp(16px,2vw,40px)}
/* ── the next-step card on an opened tender (cx.js nextStep, 2 Nov 2026) ── */
.cxnext{border:1px solid var(--line);border-inline-start:4px solid var(--warn,#c98a1b);border-radius:10px;
padding:10px 14px;margin:10px 0;background:var(--surface);grid-column:1/-1}
.cxnext.ok{border-inline-start-color:var(--ok,#2e8b57)}
.cxnext-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cxnext-h .k{font-size:12px;color:var(--muted)}
.cxnext-h b{font-size:15px}
.cxnext-h .cxnext-st{font-size:12px;color:var(--muted)}
.cxnext ul{margin:6px 0 0;padding-inline-start:18px;font-size:13px}
.cxnext li.bad{color:var(--bad,#b3261e)}
.cxnext li.warn{color:var(--ink-2)}
.cxnext-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cxnext-f .chip{cursor:pointer;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:12px;padding:3px 10px;border-radius:999px}
.cxnext .sub{font-size:12px;color:var(--muted);margin-inline-start:8px}
.cxws-clock.closed b{font-size:14px;letter-spacing:0;line-height:1.3;white-space:nowrap}
/* truth on screen: what a KPI row rests on (app.js basisLine) */
.basis{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin:2px 2px 0;line-height:1.6}
.card.kpi .n{font-size:11px;color:var(--muted);margin-top:2px}
.cxnext-team{margin-top:8px;font-size:12.5px}