/* BolpatraCheck brand layer — one set of rules for type, colour, corners, shadows, motion and states.
Loaded after every other style sheet (base.html, print.html), so these choices win everywhere.
The Brand guidelines page (/brand) shows them for offices that print. */
/* GD — the one navy scale of the app (primitives --n-50 … --n-950); every navy in every style sheet is var(--n-…), the
Tailwind brand scale, --navy, --navy-dark, --navy-light and the sheets' --np-navy included */
:root{--n-50:#e7eef9;--n-100:#d3e0f4;--n-200:#afc6ea;--n-300:#8fb4e3;--n-400:#5a87c9;--n-500:#2b6cb0;--n-600:#0b3a82;--n-700:#072a60;--n-800:#06244f;--n-900:#051c3e;--n-950:#03122a}
:root{--navy:var(--n-600);--navy-dark:var(--n-700)}
.v11{--np-navy:var(--n-600);--np-navy-d:var(--n-700)}
/* ---------- 1. tokens ---------- */
:root{
/* type scale: seven fixed sizes; 12 px is the smallest label */
--fs-2xs:12px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:24px;
/* weights: 400 text · 600 labels and buttons · 700 headings */
--fw-text:400;--fw-label:600;--fw-head:700;
/* line height per script: Devanagari needs more room for its marks above and below */
--lh-latin:1.4;--lh-deva:1.6;
/* corners: five radii */
--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
/* shadows: three levels and the dialog */
--sh-1:0 1px 2px rgba(7,42,96,.08),0 1px 1px rgba(7,42,96,.04); /* cards, tiles, chips */
--sh-2:0 6px 18px rgba(7,42,96,.14); /* menus, pop-ups, the ribbon */
--sh-3:0 18px 48px rgba(7,22,48,.32); /* drawers, dialogs */
--sh-soft:var(--sh-1);--sh-card:var(--sh-1);--sh-dialog:var(--sh-3);
/* motion: one easing curve, two durations */
--ease:cubic-bezier(.2,0,0,1);--dur-1:120ms;--dur-2:220ms;
/* icons: one stroke weight */
--icon-sw:1.75;
/* focus: brand blue ring with a white halo (visible on navy and on paper) */
--focus:var(--n-500,#2b6cb0);--focus-halo:#fff;
/* the decorative accent (rules, active marks, step numbers) is navy; red is kept for alerts and the one key action */
--accent:var(--navy);--accent-soft:var(--navy-light);--rule-on-navy:var(--gold);
/* cell states (the legend above the sheet) */
--cell-blank-bg:#fffbea;--cell-blank-bd:#d6b656;
--cell-fill-bg:#ffffff;--cell-fill-bd:#a9b8cf;
--cell-ovr-bg:#ffefdc;--cell-ovr-bd:#e08a2a;
--cell-bad-bg:var(--in-bad-bg);--cell-bad-bd:#d0646f;
--cell-fx-ink:#3b4a63;
}
html.dark,html[data-theme="dark"]{
/* dark mode has its own palette: navy lifted so it stays readable on the dark ground (not inverted greys) */
--navy-ink:#8fb4f0;--accent:#6f9fe0;--accent-soft:#262626;--focus:#8fb4f0;--focus-halo:#131313;
--sh-1:0 1px 2px rgba(0,0,0,.45);--sh-2:0 8px 22px rgba(0,0,0,.55);--sh-3:0 20px 50px rgba(0,0,0,.7);
--cell-blank-bg:#2a2615;--cell-blank-bd:#7a6830;
--cell-fill-bg:#1d1d1d;--cell-fill-bd:#484848;
--cell-ovr-bg:#3a2612;--cell-ovr-bd:#b06a1e;
--cell-bad-bd:#a2484f;--cell-fx-ink:#c3d0e6;
}
/* ---------- 2. type ---------- */
/* Devanagari (Nepali) text: its own font beside the Latin one, a touch smaller so both read the same weight, and more line height */
:lang(ne),.np,[lang="ne"]{font-family:"Noto Sans Devanagari",Kalimati,"Nirmala UI",var(--f-ui);line-height:var(--lh-deva)}
@font-face{font-family:"BC Deva UI";src:local("Noto Sans Devanagari"),local("Kalimati"),local("Nirmala UI");unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF;size-adjust:94%}
body.bc-ui{font-family:var(--f-ui);line-height:var(--lh-latin)}
/* Nepali digits (१२३) sit at the same size and width as the Latin ones in numbers and amounts */
.v11 .in.num,.v11 td.r,.bc-num,.tnum{font-variant-numeric:tabular-nums lining-nums}
/* italics are hard to read in Devanagari: hints and notes are set upright and grey instead */
.v11 .hint,.v11 .bshint,.v11 .qtnote,.v11 .nrb-src,.v11 .simNA,.help,.ps-hint{font-style:normal}
:lang(ne) i,:lang(ne) em,.np i,.np em{font-style:normal}
.v11 .in.ph-hint::placeholder{font-style:normal}
/* the smallest label is 12 px: ribbon captions, chips, badges, pills, menu headings */
.badge,.chip,.wb-pill,.wb-menu .hd,.wb-menu .sub,.nav-heading,.soon,.db-stg i,.v11 .yn-t,.v11 .pgchip,.wb-tab,.xl-b>button,.xl-b>a{font-size:var(--fs-xs)}
@media (max-width:1500px){.xl-b>button span,.xl-b>a span{font-size:var(--fs-xs)}}
.db-st b{font-weight:var(--fw-head)}
/* ---------- 3. icons ---------- */
/* one stroke weight for every line icon (the toolbar, the ribbon, menus, pages) */
svg[stroke="currentColor"][stroke-linecap="round"]{stroke-width:var(--icon-sw)}
/* ribbon icons on one baseline, one size */
.xl-b>button:has(svg),.xl-b>a:has(svg){justify-content:flex-start;padding-top:6px}
.xl-b>button svg,.xl-b>a svg{width:20px;height:20px;flex:none}
/* ---------- 4. focus, motion ---------- */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* buttons, links and tabs get a halo too, so the ring shows on navy and on paper; text boxes keep their own ring */
:where(a,button,summary,[role="button"],[role="tab"],[tabindex]):focus-visible{box-shadow:0 0 0 4px var(--focus-halo)}
.wb-bar :focus-visible,.wb-dlg>header :focus-visible{outline-color:var(--gold);box-shadow:none}
.v11 .in:focus-visible{box-shadow:none}
.btn,.wb-c,.wb-tab,.chip,.badge,.menu-item,.nav-link,.xl-b>button,.xl-b>a{transition-timing-function:var(--ease);transition-duration:var(--dur-1)}
.wb-menu,.wb-dlg,.toast{animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
html[data-rm] *,html[data-rm] *::before,html[data-rm] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
/* ---------- 5. corners and shadows ---------- */
.pl-card,.v11 .sheet.ui{box-shadow:var(--sh-1)}
.wb-menu,.xl-ribbon{box-shadow:var(--sh-2)}
.xl-ribbon{box-shadow:var(--sh-1)}
.wb-dlg,.toast{box-shadow:var(--sh-3)}
.wb-menu{border-radius:var(--r-md)}
.wb-c{border-radius:var(--r-sm)}
/* chips are pills everywhere; badges too */
.chip,.badge,.v11 .pq-v,.v11 .simTag{border-radius:var(--r-pill)}
/* ---------- 6. brand red only for alerts and the one key action ---------- */
/* the navy bar keeps a gold rule; headings, section bars and active marks use navy */
.wb-bar{border-bottom-color:var(--rule-on-navy)}
.wb-dlg>header,.lr-doc-hd,.lr-pop-hd,.op-hd{border-bottom-color:var(--rule-on-navy)}
.v11 .sheet.ui{border-top-color:var(--navy)}
.v11 .sheet.ui .ttl,.pl-ttl{border-left-color:var(--navy)}
.v11 .sheet.ui details:not(.how):not(.pgRef){border-left-color:var(--navy-light);border-left-width:4px}
.v11 .sheet.ui details[open]:not(.how):not(.pgRef){border-left-color:var(--accent)}
.v11 .sheet.ui .be-h>b:first-child{border-left-color:var(--accent)}
.pl-card{border-top-color:var(--navy)}
.v11 .bdsno,.pl-box h3 .n,.gd-n,.hp-steps label::before,.fc-hd .n{background:var(--accent)}
.lw-cn{background:var(--navy)}
.wb-menu .hd,.wb-gl{color:var(--muted)}
.lr-h2 svg,.nd-t>svg,.lr-card-f .go,.lr-pop-ft a{color:var(--accent)}
.sb .nav-link-active{box-shadow:inset 3px 0 0 var(--accent)}
.hp-tabs button[aria-selected="true"],.pl-tabs button[aria-selected="true"],.of-tabs a[aria-current="page"]{border-bottom-color:var(--accent)}
.ps-tabs button[aria-selected="true"],.wb-tabs-nav a.on{box-shadow:inset 0 -3px 0 var(--gold)}
.wb-c.on,.wb-c.on:hover:not(:disabled){background:#fff;color:var(--navy-dark);border-color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.wb-c.wb-help{background:transparent;border-color:rgba(255,255,255,.7)}
html.dark .wb-menu .hd,html.dark .wb-gl{color:var(--muted)}
/* ---------- 7. the active sheet tab: a stronger shape, not only colour ---------- */
.wb-tab.on{font-weight:var(--fw-head);box-shadow:inset 0 -3px 0 var(--gold);padding-top:8px;margin-top:-2px;border-radius:0 0 var(--r-sm) var(--r-sm)}
html[data-tabs="top"] .wb-tab.on{box-shadow:inset 0 3px 0 var(--gold);margin-top:0;margin-bottom:-2px;padding-bottom:9px}
@media (min-width:821px){
html[data-tabs="left"] .wb-tab.on{box-shadow:inset 5px 0 0 var(--gold);margin:2px 6px 2px 0;padding-top:6px;border-radius:0 var(--r-sm) var(--r-sm) 0}
}
html[data-ui="excel"] .wb-tab.on{font-weight:var(--fw-head);box-shadow:inset 0 -3px 0 var(--n-600,#0b3a82),0 2px 0 #fff;border-top:0;margin-top:-1px;border-radius:0 0 var(--r-sm) var(--r-sm)}
html[data-ui="excel"].dark .wb-tab.on{box-shadow:inset 0 -3px 0 #5b8def}
/* ---------- 8. Excel-mode ribbon: quiet group labels, a divider rhythm ---------- */
.xl-g>small{font-size:11px;font-weight:var(--fw-text);color:#8a8f98;letter-spacing:.02em}
.xl-g{border-right:0;position:relative}
.xl-g:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;bottom:22%;width:1px;background:linear-gradient(180deg,transparent,#d6d6d6 20%,#d6d6d6 80%,transparent)}
html.dark .xl-g:not(:last-child)::after{background:linear-gradient(180deg,transparent,#3e3e3e 20%,#3e3e3e 80%,transparent)}
.xl-ribbon{background:linear-gradient(180deg,#fff 0,#fff 70%,#fafbfc 100%)}
html.dark .xl-ribbon{background:#252525}
/* ---------- 9. cells: to fill · filled · check failed · formula · changed from the default ---------- */
@media screen{
.v11 .in{background:var(--cell-fill-bg);border-color:var(--cell-fill-bd);color:inherit}
.v11 .in.blank{background:var(--cell-blank-bg);border-color:var(--cell-blank-bd);border-style:dashed}
.v11 .in:hover{border-color:var(--navy)}
.v11 .in:focus{background:#fff;border-style:solid;outline:2px solid var(--focus);outline-offset:-1px}
html.dark .v11 .in:focus{background:#131313}
.v11 .in.v-bad,.v11 .in.v-warn,.v11 .in.err{background:var(--cell-bad-bg);border-color:var(--cell-bad-bd);border-style:solid}
.v11 .in.v-warn{border-style:dashed}
.v11 .in.err{outline:0;box-shadow:inset 3px 0 0 var(--cell-bad-bd)}
.v11 .in.fx{font-style:normal;color:var(--cell-fx-ink);text-decoration:none;background-image:linear-gradient(90deg,var(--cell-fx-ink),var(--cell-fx-ink));background-size:100% 1px;background-repeat:no-repeat;background-position:0 calc(100% - 1px)}
.v11 .keyOv .in{background:var(--cell-ovr-bg);border-color:var(--cell-ovr-bd);border-style:solid}
.v11 .errMsg{font-size:var(--fs-xs);font-style:normal}
}
/* the legend */
.cl-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 14px;max-width:100%;margin:2px 4px 6px;font:var(--fs-xs)/1.3 var(--f-ui);color:var(--muted)}
.cl-key>span{display:inline-flex;align-items:center;gap:6px}
.cl-key .cl-k-t{font-weight:var(--fw-label)}
.cl-sw{display:inline-grid;place-items:center;width:22px;height:14px;border:1px solid;border-radius:var(--r-xs);font:700 10px/1 var(--f-ui);font-style:normal}
.cl-sw.blank{background:var(--cell-blank-bg);border-color:var(--cell-blank-bd);border-style:dashed}
.cl-sw.fill{background:var(--in-ok-bg);border-color:var(--in-ok-bd)}
.cl-sw.bad{background:var(--cell-bad-bg);border-color:var(--cell-bad-bd);color:var(--bad-tx)}
.cl-sw.fx{background:var(--cell-fill-bg);border-color:var(--cell-fill-bd);color:var(--cell-fx-ink)}
.cl-sw.ovr{background:var(--cell-ovr-bg);border-color:var(--cell-ovr-bd)}
@media (max-width:820px){.cl-key{justify-content:flex-start}}
@media print{.cl-key{display:none!important}}
/* ---------- 10. status chips: an icon as well as the colour (pass / fail read without colour) ---------- */
.v11 .yn-t.y::before,.v11 .pq-v.ok::before,.v11 .simTag.ok::before,.badge-green::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:0;margin-right:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:currentColor;-webkit-mask:var(--lc-check) center/contain no-repeat;mask:var(--lc-check) center/contain no-repeat;margin-right:4px;font-weight:700}
.v11 .yn-t.n::before,.v11 .pq-v.bad::before,.badge-rose::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:0;margin-right:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:currentColor;-webkit-mask:var(--lc-x) center/contain no-repeat;mask:var(--lc-x) center/contain no-repeat;margin-right:4px;font-weight:700}
/* the Qualified / Not Qualified (Passed / Failed) marks: one size on every sheet */
.v11 .pq-v,.v11 .simTag{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;font:var(--fw-label) var(--fs-xs)/1 var(--f-ui)}
/* ---------- 11. dashboard: calmer stage tiles in the stage ramp ---------- */
.db-st{background:color-mix(in srgb,currentColor 9%,var(--paper));border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-top:4px solid currentColor;box-shadow:none}
.db-st b{color:currentColor}
.db-st span{color:var(--ink)}
.db-st:hover{filter:none;background:color-mix(in srgb,currentColor 15%,var(--paper))}
/* ---------- 12. avatars: initials sized to the circle ---------- */
.pres,.wb-av{font-weight:var(--fw-head);letter-spacing:.02em}
.pres{font-size:max(9px,calc(var(--pres-s,28px) * .38))}
.wb-bar .pres{--pres-s:22px}
.wb-av{font-size:10px}
/* ---------- 13. dark mode: navy as text is lifted so it does not go dim ---------- */
html.dark .sb .nav-link-active,html.dark .wb-menu svg,html.dark .v11 .sheet.ui .ttl,html.dark .pl-ttl,html.dark .link{color:var(--navy-ink)}
html.dark .v11 .sheet.ui{border-top-color:var(--accent)}
/* ---------- 14. buttons: primary · secondary · ghost · destructive ---------- */
.btn-destructive{background:#c8102e;color:#fff;box-shadow:var(--sh-1)}
.btn-destructive:hover{background:#9e0b23}
/* ---------- 15. tablets: touch targets of at least 44 px ---------- */
@media (pointer:coarse){
.wb-c,.wb-tab,.btn,.btn-icon,.menu-item,.nav-link,.xl-b>button,.xl-b>a,.wb-menu a,.wb-menu button{min-height:44px}
.btn-icon,.wb-c.wb-ic{min-width:44px}
}
/* ---------- 16. print: real hairlines for the grid on high-density printers ---------- */
@media print and (min-resolution:2dppx){
.v11 table.g td,.v11 table.g th{border-width:.5pt}
}
/* ---------- 17. state chips (chip-s): 12 px, an icon with the colour; the procedures told apart by shape ---------- */
.chip-s{height:22px;padding:0 9px;gap:5px;border-radius:var(--r-sm);font:600 12px/1 var(--f-ui)}
.chip-s:is(.ok,.bad,.warn)::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--chip-ic) center/contain no-repeat;mask:var(--chip-ic) center/contain no-repeat}
.chip-s.ok{--chip-ic:url("data:image/svg+xml;utf8,");box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
.chip-s.bad{--chip-ic:url("data:image/svg+xml;utf8,");box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
.chip-s.warn{--chip-ic:url("data:image/svg+xml;utf8,");box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
/* the procedure tags: one size and shape, a brand tint each, and an icon that tells them apart without colour —
one envelope (1S1E), two envelopes (1S2E), the opening record (Muchulka) */
.chip-s:is(.m-1S1E,.m-1S2E,.m-MU){height:22px;padding:0 8px 0 6px;gap:5px;border-radius:var(--r-sm);border:1px solid;font:600 12px/1 var(--f-ui);letter-spacing:.01em;box-shadow:none}
.chip-s:is(.m-1S1E,.m-1S2E,.m-MU)::before{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--chip-ic) center/contain no-repeat;mask:var(--chip-ic) center/contain no-repeat}
.chip-s.m-1S2E{--chip-ic:url("data:image/svg+xml;utf8,");color:#fff;background:var(--n-600,#0b3a82);border-color:var(--n-600,#0b3a82)}
.chip-s.m-1S1E{--chip-ic:url("data:image/svg+xml;utf8,");color:#174f8f;background:#eaf2fb;border-color:#b9d0ec}
.chip-s.m-MU{--chip-ic:url("data:image/svg+xml;utf8,");color:#6b4e00;background:#fbf4de;border-color:#e3cd8a}
html.dark .chip-s.m-1S2E{color:#131313;background:#8fb4f0;border-color:#8fb4f0}
html.dark .chip-s.m-1S1E{color:#a9c8f2;background:#212121;border-color:#454545}
html.dark .chip-s.m-MU{color:#ecd28a;background:#2e2610;border-color:#6b5822}
/* ---------- 18. Word mode: the page as real paper ---------- */
html[data-doc] #sheetWrap .sheet,html[data-ui="excel"][data-doc] #sheetWrap .sheet{border:0;border-radius:var(--r-xs);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.08),0 12px 28px -6px rgba(7,42,96,.18)}
html[data-doc] .xl-ruler{background:repeating-linear-gradient(90deg,transparent 0 9px,#c9cfd8 9px 10px),#f7f8fa;background-size:10px 6px,auto;background-repeat:repeat-x;background-position:0 100%}
/* ---------- 19. the brand guidelines page ---------- */
.bg-page{max-width:1080px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-6)}
.bg-page h1{font:var(--fw-head) var(--fs-2xl)/1.25 var(--f-ui);color:var(--ink);margin:0 0 var(--sp-2)}
.bg-page h2{font:var(--fw-head) var(--fs-xl)/1.3 var(--f-ui);color:var(--ink);margin:var(--sp-6) 0 var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.bg-page h3{font:var(--fw-label) var(--fs-md)/1.4 var(--f-ui);color:var(--ink);margin:var(--sp-4) 0 var(--sp-2)}
.bg-page p,.bg-page li{font-size:var(--fs-md);line-height:1.55;color:var(--ink);max-width:72ch}
.bg-page .mut{color:var(--muted)}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.bg-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--sh-1)}
.bg-sw{height:56px;border-radius:var(--r-sm);margin-bottom:var(--sp-2);border:1px solid rgba(0,0,0,.06)}
.bg-card code,.bg-page code{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted)}
.bg-card b{display:block;font-size:var(--fs-sm)}
.bg-lock{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:stretch}
.bg-lock>div{flex:1 1 300px}
.bg-print-hd{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:#fff;color:#000;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-doc)}
.bg-print-hd .c{text-align:center;line-height:1.35}.bg-print-hd .c b{display:block;font-size:17px}.bg-print-hd .c span{font-size:13px}
.bg-print-hd hr{grid-column:1/-1;border:0;border-top:1.5px solid #000;margin:6px 0 0;box-shadow:0 2px 0 #fff,0 3px 0 #000}
.bg-scale p{margin:4px 0;color:var(--ink)}
.bg-do{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3)}
.bg-do>div{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);background:var(--paper)}
.bg-do .yes{border-top:4px solid var(--bc-stage-finalised,#2f7d57)}.bg-do .no{border-top:4px solid #c8102e}
.bg-do h3{margin-top:0}
.bg-ramp{display:flex;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.bg-ramp>div{flex:1;padding:var(--sp-3);font:var(--fw-label) var(--fs-sm)/1.3 var(--f-ui);background:color-mix(in srgb,currentColor 10%,var(--paper));border-top:4px solid currentColor}
.bg-ramp>div span{display:block;color:var(--ink);font-weight:var(--fw-text);font-size:var(--fs-xs)}
@media print{.bg-page{max-width:none;padding:0}.bg-card,.bg-do>div{box-shadow:none;break-inside:avoid}}
.bg-page ul{list-style:disc;padding-left:1.25rem;margin:var(--sp-2) 0}.bg-page ul li{margin:2px 0}
/* ---------- 20. quick dark / light toggle ---------- */
.tg-sun{display:none}html.dark .tg-sun{display:inline}html.dark .tg-moon{display:none}
html[data-ui="excel"] .xl-hide-q{display:none}
/* ---------- 21. What's new: the notice in the header and its page ---------- */
.wn-pill{display:inline-flex;align-items:center;gap:2px;border-radius:var(--r-pill);background:var(--navy-light);color:var(--navy-dark);font:var(--fw-label) var(--fs-xs)/1 var(--f-ui);padding:0 2px 0 10px;height:28px;border:1px solid var(--line)}
.wn-pill a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.wn-pill svg{width:14px;height:14px}
.wn-pill button{display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:var(--r-pill);background:none;color:var(--muted);cursor:pointer}
.wn-pill button:hover{background:rgba(0,0,0,.06)}
html.dark .wn-pill{color:var(--navy-ink)}
.wn-dot{color:#fff!important;background:var(--accent);border-radius:var(--r-pill);padding:1px 6px}
.wn-page{max-width:820px}
.wn-page h1{font:var(--fw-head) var(--fs-2xl)/1.25 var(--f-ui);margin:0 0 var(--sp-2)}
.wn-page .mut{color:var(--muted)}
.wn-it{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;box-shadow:var(--sh-1)}
.wn-it summary{cursor:pointer;font-size:var(--fs-md)}
.wn-it p,.wn-it li{font-size:var(--fs-md);line-height:1.55;margin:var(--sp-2) 0 0}
.wn-it ul{list-style:disc;padding-left:1.25rem}
/* ---------- 22. side menu: a grip on its edge to resize it ---------- */
.sb-grip{position:absolute;top:0;right:-3px;bottom:0;width:6px;cursor:col-resize;z-index:2}
.sb-grip:hover,.sb-grip:focus-visible,html.sb-drag .sb-grip{background:linear-gradient(90deg,transparent 2px,var(--focus) 2px,var(--focus) 4px,transparent 4px)}
html.sb-mini .sb-grip{display:none}
html.sb-drag,html.sb-drag *{cursor:col-resize!important;user-select:none}
html.sb-drag .sb,html.sb-drag .sb-main{transition:none}
/* ---------- 23. simple mode: the essentials and the next step ---------- */
.wb-simple-next{display:none}
html[data-simple] .wb-simple-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 4px 10px;padding:10px 14px;border-radius:var(--r-md);background:var(--navy-light);border:1px solid var(--line);font:var(--fs-md)/1.4 var(--f-ui);color:var(--ink)}
html[data-simple] .wb-simple-next>span{flex:1 1 280px}
html[data-simple] .wb-bar [data-grp]:not([data-grp="project"]):not([data-grp="print"]):not([data-grp="help"]):not([data-grp="bidders"]),
html[data-simple] .wb-view>*:not(.wb-zoom):not(#wbLeft),html[data-simple] .wb-ask,html[data-simple] .wb-chat,html[data-simple] .wb-notes,html[data-simple] .xl-ribbon .xl-g:not(:first-child){display:none!important}
.sm-on{display:none}html[data-simple] .sm-on{display:inline}html[data-simple] .sm-off{display:none}
/* ---------- 24. Excel mode ▸ File: this project's save, backup, export, print ---------- */
.xs-file{padding:24px 32px 8px;max-width:980px}
.xs-file h2{font:var(--fw-head) var(--fs-xl)/1.3 var(--f-ui);margin:0 0 12px;color:var(--ink)}
.xs-file-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.xs-file-g>a,.xs-file-g>button{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;font:var(--fs-sm)/1.35 var(--f-ui)}
.xs-file-g>a:hover,.xs-file-g>button:hover{border-color:var(--navy);background:var(--navy-light)}
.xs-file-g svg{width:20px;height:20px;grid-row:span 2;color:var(--navy)}
html.dark .xs-file-g svg{color:var(--navy-ink)}
.xs-file-g small{color:var(--muted);font-size:var(--fs-xs)}
.db-recent .db-list a{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.db-recent .db-list a:hover b{text-decoration:underline}
.db-rs-p{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-hidn{flex:none;align-self:center;margin:0 6px;padding:2px 10px;border:1px dashed var(--line);border-radius:var(--r-pill);background:none;color:var(--muted);font:var(--fs-xs)/1.4 var(--f-ui);cursor:pointer;white-space:nowrap}
.wb-hidn:hover{color:var(--ink);border-color:var(--navy)}
/* ---------- 25. table tools: copy with formatting, sort, filter (screen only) ---------- */
.tt-ic{position:absolute;top:2px;right:2px;z-index:3;display:inline-flex;gap:2px;font-family:var(--f-ui);font-weight:400;text-align:left}
.tt-bar0{position:relative;height:0}.tt-bar0>.tt-ic{top:-26px;right:0}
.tt-i{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--navy-dark);cursor:pointer;opacity:.55;transition:opacity var(--dur-1) var(--ease)}
.tt-i svg{width:13px;height:13px}
.tt-i[hidden]{display:none}
table:hover .tt-i,.tt-bar0:hover .tt-i,.tt-i:focus-visible,.tt-i.on,.tt-i.done,.tt-ic:focus-within .tt-i{opacity:1}
.tt-i:hover{border-color:var(--navy);background:var(--navy-light)}
.tt-i.done{color:var(--ok-tx);border-color:var(--in-ok-bd);background:var(--ok-bg)}
.tt-i.on{color:#fff;background:var(--navy);border-color:var(--navy)}
html.dark .tt-i{color:var(--navy-ink)}
.tt-pop{position:absolute;top:26px;right:0;z-index:4;padding:4px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-2)}
.tt-pop[hidden]{display:none}
.tt-pop input{width:180px;height:26px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:var(--fs-xs) var(--f-ui)}
.v11 th.tt-sort{cursor:pointer;user-select:none}
.v11 th.tt-sort:hover{text-decoration:underline}
.v11 th[aria-sort="ascending"]::after{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:.3em;margin-right:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:currentColor;-webkit-mask:var(--lc-up) center/contain no-repeat;mask:var(--lc-up) center/contain no-repeat;font-size:9px}.v11 th[aria-sort="descending"]::after{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:.3em;margin-right:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:currentColor;-webkit-mask:var(--lc-down) center/contain no-repeat;mask:var(--lc-down) center/contain no-repeat;font-size:9px}
.v11 tr.tt-out{display:none}
html[data-simple] .tt-ic{display:none}
@media print{.tt-ic,.tt-bar0{display:none!important}.v11 tr.tt-out{display:table-row!important}.v11 th[aria-sort]::after{content:none!important}}
/* ---------- 26. a skeleton while the next sheet loads (instead of a blank or faded page) ---------- */
@keyframes bc-shim{from{background-position:120% 0}to{background-position:-20% 0}}
#sheetWrap.ux-loading>*{opacity:1}
#sheetWrap.ux-loading .sheet :is(td,th,.ttl,p,h2,h3,.in,b,span,a,button,select,input,textarea){color:transparent!important;border-color:transparent!important;
background:linear-gradient(90deg,var(--line-soft) 25%,var(--paper) 37%,var(--line-soft) 63%) 0 0/400% 100%!important;animation:bc-shim 1.2s var(--ease) infinite;box-shadow:none!important}
#sheetWrap.ux-loading .sheet :is(td,th){background-clip:content-box!important;border-color:var(--paper)!important}
#sheetWrap.ux-loading .sheet img,#sheetWrap.ux-loading .sheet svg{visibility:hidden}
@media (prefers-reduced-motion:reduce){#sheetWrap.ux-loading .sheet *{animation:none!important}}
/* ---------- 27. the breadcrumb on phones: the group and the sheet only ---------- */
@media (max-width:640px){
.wb-crumb>:nth-last-child(n+4){display:none}
.wb-crumb{max-width:100%}
.wb-crumb b{max-width:55vw}
}
/* ---------- 28. hero bands: brand navy, smooth — a soft light from the top right and a deeper corner, no lines or texture ---------- */
.db-hero,.lr-hero,.tc-hd,.lr-doc-hd,.lr-pop-hd{background:
radial-gradient(900px 340px at 92% -30%,rgba(120,170,255,.28),transparent 62%),
radial-gradient(700px 300px at -10% 130%,rgba(201,162,39,.16),transparent 60%),
linear-gradient(125deg,var(--navy-dark,var(--n-700,#072a60)) 0%,var(--navy,var(--n-600,#0b3a82)) 55%,#0f4596 100%)!important}
.lr-hero::after,.tc-hd::after{display:none}
html.dark .db-hero,html.dark .lr-hero{background:
radial-gradient(900px 340px at 92% -30%,rgba(110,150,230,.18),transparent 62%),
linear-gradient(125deg,#181818 0%,#1d1d1d 60%,#252525 100%)!important}
/* ---------- 29. start page: a miniature of each procedure's first sheet ---------- */
.xs-th.xs-mini{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 10px;background:#fff;border:1px solid var(--line);color:#1d2738;position:relative;overflow:hidden}
.xs-mini .mn-hd{display:flex;flex-direction:column;align-items:center;gap:2px}
.xs-mini .mn-hd i{display:block;height:3px;width:46%;border-radius:var(--r-xs);background:#9aa7bb}.xs-mini .mn-hd i.w{width:66%;height:4px;background:#1d2738}
.xs-mini .mn-ttl{border:1px solid #1d2738;font:700 8px/1.4 "Times New Roman",serif;text-align:center;padding:1px 0}
.xs-mini .mn-kv{display:grid;grid-template-columns:1fr 1.2fr;gap:2px}
.xs-mini .mn-kv i{height:6px;border:1px solid #c8cfda}.xs-mini .mn-kv i.in{background:var(--cell-blank-bg);border:1px dashed var(--cell-blank-bd)}
.xs-mini .mn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.xs-mini .mn-grid i{height:6px;border:1px solid #c8cfda}
.xs-mini .mn-grid i:nth-child(-n+4){background:var(--n-50,#e7eef9)}
.xs-mini .mn-chip{position:absolute;right:6px;bottom:6px;height:18px;padding:0 6px;font-size:11px;background:var(--paper)}
html.dark .xs-th.xs-mini{background:#e9edf3}
/* ---------- 30. Kalimati has no bold or italic files: let the browser draw them every time (screen, print, PDF) ---------- */
.v11,.v11 *,.letter,.letter *{font-synthesis:weight style}
/* ---------- 31. queries on a box: a thread of replies ---------- */
.cn-thr{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin:6px 0}
.cn-m{padding:6px 9px;border-radius:var(--r-sm);background:var(--line-soft);font:var(--fs-sm)/1.45 var(--f-ui)}
.cn-m.q{background:var(--navy-light);border-left:3px solid var(--accent)}
.cn-m p{margin:0;white-space:pre-wrap}.cn-m small{color:var(--muted);font-size:var(--fs-xs)}
.cn-st{margin:0;color:var(--ok-tx);font:var(--fs-xs) var(--f-ui)}
/* ---------- 32. buttons: one height scale, one corner, four kinds (primary · secondary · ghost · destructive) ---------- */
.btn{min-height:36px;border-radius:var(--r-md);font-weight:600;letter-spacing:.005em}
.btn-sm{min-height:30px;border-radius:var(--r-sm)}
.btn-lg{min-height:44px}
.btn-danger,.btn-destructive{background:#c8102e;color:#fff}.btn-danger:hover,.btn-destructive:hover{background:#9e0b23}
.tk-btn{min-height:28px}
/* ---------- 33. text size: Small (Settings ▸ Appearance) — the sheets at 90 %, the rest of the app a step smaller ---------- */
html[data-ts="s"]{font-size:15px}
html[data-ts="s"] body.bc-ui{font-size:12.5px}
html[data-ts="s"] .wb-area .v11{zoom:.9}
/* ---------- 34. the compact colour key in the sheet's tool row ---------- */
.ux-key{font-size:var(--fs-xs)}
.ux-key>span{display:inline-flex;align-items:center;gap:4px;margin-right:6px}
.ux-key .cl-sw{width:14px;height:11px;margin:0;font-size:0}
/* ---------- 35. Bidder Entry: its own tool row — pin · voice · attach · Excel export / import · fill-in · print ·
PDF · Word · Excel · colour key · empty boxes · zoom · full screen · meeting mode ---------- */
.wb-exp :is(.wb-asg,[data-c2-toggle],[data-dlg="dlgOcr"],[data-prov-toggle],[data-side-toggle],[data-offline-save],#wbSec,#wbBf,
[data-view="focus"],[data-view="pv"]){display:none!important}
.wb-exp:not(.be) :is(.wb-pinb,[data-voice],[data-docs-toggle]){display:none!important}
.wb-exp.be :is([data-view="cols"],[data-view="widths"]){display:none!important}
.be-key{display:inline-flex;align-items:center;gap:8px;margin:0 6px 0 4px;font:var(--fs-xs)/1 var(--f-ui);color:var(--muted);white-space:nowrap}
.be-key>span{display:inline-flex;align-items:center;gap:4px}
.be-key .cl-sw{width:16px;height:12px;font-size:9px}
@media (max-width:1500px){.be-key>span{font-size:0;gap:0}.be-key{gap:4px}}
/* ---------- 36. Bidder Entry: the same authorized representative for two bidders ---------- */
.v11 .coi-w{margin-top:5px;padding:6px 10px;border-radius:var(--r-sm);background:#fff4d6;border:1px solid #e0b44a;color:#5c4300;font:var(--fs-sm)/1.45 var(--f-ui)}
html.dark .v11 .coi-w{background:#3a2e0d;border-color:#8a6a1e;color:#ffd77a}
@media print{.v11 .coi-w{display:none}}
#sheetWrap .tt-i{background:var(--paper);color:var(--navy-dark);border:1px solid var(--line)}
#sheetWrap .tt-i:hover{border-color:var(--navy);background:var(--navy-light)}
#sheetWrap .tt-i.done{color:var(--ok-tx);border-color:var(--in-ok-bd);background:var(--ok-bg)}
#sheetWrap .tt-i.on{color:#fff;background:var(--navy);border-color:var(--navy)}
html.dark #sheetWrap .tt-i:not(.on):not(.done){color:var(--navy-ink)}
/* ---------- 37. Bidder Entry: the firm library as a menu in the bidder bar ---------- */
.v11 .fl-dd{position:relative;display:inline-block}
.v11 .fl-dd>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--navy-dark);font:600 var(--fs-xs)/1 var(--f-ui);cursor:pointer;white-space:nowrap}
.v11 .fl-dd>summary::-webkit-details-marker{display:none}
.v11 .fl-dd>summary:hover,.v11 .fl-dd[open]>summary{border-color:var(--navy);background:var(--navy-light)}
.v11 .fl-hits{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-size:11px;display:inline-grid;place-items:center}
.v11 .fl-car{font-size:10px;opacity:.7}
.v11 .fl-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;display:flex;flex-direction:column;gap:6px;min-width:300px;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-2);font:var(--fs-sm)/1.4 var(--f-ui)}
.v11 .fl-menu .hint{margin:0;font-size:var(--fs-xs)}
.v11 .fl-menu .fl-who{display:flex;gap:6px}.v11 .fl-menu .fl-who select{flex:1;min-width:0}
.v11 .fl-menu .fl-row2{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.v11 .fl-menu a{color:var(--navy);font-weight:600}
html.dark .v11 .fl-dd>summary,html.dark .v11 .fl-menu a{color:var(--navy-ink)}
/* the bidder bar: icons with their names on hover */
.v11 .be-nav .be-ic{width:15px;height:15px;vertical-align:-3px}
.v11 .be-nav button:has(> .be-ic:only-child){width:28px;height:26px;padding:0;display:inline-grid;place-items:center}
.v11 .be-nav .be-lab{display:inline-grid;place-items:center;color:var(--muted)}
.v11 .be-nav .be-lab .be-ic{width:16px;height:16px}
.v11 .be-nav:has(.fl-dd[open]){overflow:visible}
/* ---------- 38. sheets whose bidders' data is entered in Bidder Entry: a double-click on a box opens it there ---------- */
#sheetWrap:has(.be-lockbar) [data-p^="b."][disabled]{pointer-events:none}
#sheetWrap:has(.be-lockbar) td:has(> [data-p^="b."][disabled]),#sheetWrap:has(.be-lockbar) td:has([data-p^="b."][disabled]){cursor:alias}
/* ---------- 39. Helper ▸ Guide: the Guide sheet inside the Helper ---------- */
.hp-guide{display:block;width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
/* ---------- 40. steady bars while typing: the text that changes on every save (the save state, the empty-box count,
the progress %) keeps one width, so the toolbars never re-wrap and the sheet does not jump up and down ---------- */
.wb-bar{overflow-x:clip} /* the bar never makes the page wider (a horizontal scrollbar coming and going moved the whole page) */
.wb-bar .wb-saved{display:inline-block;width:7.5rem;max-width:7.5rem;overflow:hidden;text-overflow:ellipsis;text-align:right}
.wb-bar [data-grp="progress"]{font-variant-numeric:tabular-nums}
#wbLeft{min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.v11 .be-nav{scrollbar-width:none}.v11 .be-nav::-webkit-scrollbar{display:none}
.v11 .be-nav select[data-p="beSel"]{width:340px;max-width:40vw}
/* ---------- 41. Fin. Opening Chart ▸ How it works: the worked example ---------- */
.v11 .fo-how .fo-ex{width:auto;margin:6px 0 0;font:12px/1.4 var(--f-ui)}
.v11 .fo-how .fo-ex th,.v11 .fo-how .fo-ex td{padding:3px 8px;border:1px solid var(--line);background:var(--paper)}
.v11 .fo-how .fo-ex td:first-child{color:var(--muted);white-space:nowrap}
/* ---------- 42. the "project at a glance" panel: moved by its header, resized from its corner ---------- */
.gl-drawer{position:fixed;z-index:58;display:flex;flex-direction:column;min-width:360px;min-height:240px;max-width:calc(100vw - 8px);max-height:calc(100vh - 8px);
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);overflow:hidden;resize:both}
.gl-drawer[hidden]{display:none}
.gl-hd{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;background:linear-gradient(90deg,var(--navy-dark),var(--navy));color:#fff;cursor:move;user-select:none;flex:none}
.gl-hd>b{display:inline-flex;align-items:center;gap:6px;font:var(--fw-head) var(--fs-sm)/1 var(--f-ui);white-space:nowrap}
.gl-hd svg{width:15px;height:15px}
.gl-hd .nd-ic{color:#fff;border:0;background:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer}
.gl-hd .nd-ic:hover{background:rgba(255,255,255,.15)}
.gl-tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.gl-tabs button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:var(--r-sm);background:rgba(255,255,255,.1);color:#dbe6f7;font:var(--fw-label) var(--fs-xs)/1 var(--f-ui);cursor:pointer;white-space:nowrap}
.gl-tabs button[aria-selected="true"]{background:#fff;color:var(--navy-dark)}
.gl-frame{flex:1;width:100%;border:0;background:var(--bg)}
.gl-drawer.gl-moving .gl-frame{pointer-events:none}
/* ---------- 43. the top toolbar: lower, and in three groups — the project on the left (project, procedure, bidders,
find, find bidder, progress), the tools in the middle (dates … file), the people and you on the right ---------- */
html:not([data-ui="excel"]){--tb-h:34px}
html:not([data-ui="excel"]) .wb-bar{min-height:var(--tb-h);padding:2px 8px;gap:2px 4px;border-bottom-width:2px}
html:not([data-ui="excel"]) .wb-bar .wb-grp{padding:1px 3px;gap:2px;border-radius:0;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07)}
html:not([data-ui="excel"]) .wb-bar .wb-c{height:24px}
/* left: one group */
html:not([data-ui="excel"]) .wb-bar [data-grp="project"]{border-radius:var(--r-md) 0 0 var(--r-md);border-right:0}
html:not([data-ui="excel"]) .wb-bar [data-grp="goto"]{border-radius:0 var(--r-md) var(--r-md) 0}
/* middle: one group, centred */
html:not([data-ui="excel"]) .wb-bar [data-grp="tools"]{margin-left:auto;border-radius:var(--r-md) 0 0 var(--r-md);border-right:0}
html:not([data-ui="excel"]) .wb-bar [data-grp="views"]{border-left:0;border-right:0}
html:not([data-ui="excel"]) .wb-bar [data-grp="print"]{border-radius:0 var(--r-md) var(--r-md) 0;border-left:0}
html:not([data-ui="excel"]) .wb-bar [data-grp="tools"],html:not([data-ui="excel"]) .wb-bar [data-grp="views"],html:not([data-ui="excel"]) .wb-bar [data-grp="print"]{margin-right:0}
html:not([data-ui="excel"]) .wb-bar [data-grp="views"],html:not([data-ui="excel"]) .wb-bar [data-grp="print"]{margin-left:-4px}
/* right: who is working … the theme, the save state and you */
html:not([data-ui="excel"]) .wb-bar .wb-push{margin-left:auto;padding:1px 3px 1px 6px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.07)}
html:not([data-ui="excel"]) .wb-bar [data-grp="goto"]{margin-left:-4px}
/* The sheets, on screen and in print (request of 6 Nov): English in Times New Roman, Nepali in Kalimati
(fonts.css: the installed Kalimati, else Noto Sans Devanagari; Times New Roman never draws Devanagari, so a cluster
such as त्र or प्रा is shaped whole). The menus, buttons and pages follow Settings ▸ Interface font (--f-ui). No letter-spacing and the
ligatures on where text is typed and in the sheets: Chrome drops ligatures when letters are spaced. */
:root,.v11{--docf:"Times New Roman",Kalimati,"Nirmala UI","Noto Sans Devanagari",Mangal,serif}
.v11 .sheet,.v11 .sheet :is(input,textarea,select,td,th,p,div,span,b),input,textarea,select,[contenteditable],.np{letter-spacing:normal;font-variant-ligatures:normal}
/* ---------- the document fonts on every sheet, on screen and in print ----------
Nepali (Devanagari) in Kalimati and English in Times New Roman: --docf names Times New Roman first, which has no
Devanagari, so each Nepali letter falls to Kalimati (fonts.css: the installed Kalimati, else Noto Sans Devanagari).
It covers the text, tables, entry boxes and result badges of every sheet, the Guide included (letters, minutes, forms, Bidder Entry); not
the buttons and the bars that are on screen only, and never a font the user chose in the text editor (an inline
font-family, kept with everything inside it). */
.v11 .sheet:not([style*="font-family"]),
.v11 .sheet :is(p,div,span,b,i,u,strong,em,small,sup,sub,a,abbr,dfn,mark,q,cite,del,ins,s,label,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,
table,caption,thead,tbody,tfoot,tr,td,th,input,select,option,textarea,output,blockquote,pre,section,header,footer,figure,figcaption,fieldset,legend,center):where(:not(.screen,.screen *,.tools,.tools *,.lset,.lset *,.lockbar,.lockbar *,.bdsbar,.bdsbar *,.be-nav,.be-nav *,.be-prog,.be-prog *,button *,.np-dash,
[style*="font-family"],[style*="font-family"] *,font[face] *,[contenteditable] [style*="font-family"] *)){
font-family:var(--docf,"Times New Roman",Kalimati,"Nirmala UI","Noto Sans Devanagari",Mangal,serif)!important}
/* ---------- 30. the app's tooltip (static/js/tips.js): a small white card, a navy accent, a soft shadow and an arrow ---------- */
.bc-tip{position:fixed;z-index:1000;max-width:320px;padding:7px 11px 7px 12px;border-radius:var(--r-md);background:#fff;color:#1d2738;
border:1px solid rgba(11,42,91,.14);border-left:3px solid var(--navy,var(--n-600,#0b3a82));box-shadow:0 10px 28px -10px rgba(7,30,70,.35),0 2px 6px rgba(7,30,70,.08);
font:500 12.5px/1.45 var(--f-ui,var(--f-ui));letter-spacing:.005em;white-space:pre-line;overflow-wrap:anywhere;pointer-events:none;
opacity:0;transform:translateY(4px) scale(.98);transition:opacity .14s var(--ease),transform .14s var(--ease)}
.bc-tip[data-below="1"]{transform:translateY(-4px) scale(.98)}
.bc-tip.in{opacity:1;transform:none}
.bc-tip[hidden]{display:none}
.bc-tip-a{position:absolute;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:#fff;border-right:1px solid rgba(11,42,91,.14);border-bottom:1px solid rgba(11,42,91,.14);transform:rotate(45deg)}
.bc-tip[data-below="1"] .bc-tip-a{bottom:auto;top:-6px;transform:rotate(225deg)}
html.dark .bc-tip{background:#262626;color:#e6edf8;border-color:rgba(156,192,255,.22);border-left-color:#9cc0ff;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
html.dark .bc-tip-a{background:#262626;border-color:rgba(156,192,255,.22)}
@media (prefers-reduced-motion:reduce){.bc-tip{transition:none}}
@media print{.bc-tip{display:none!important}}
/* ---------------------------------------------------------------- calm visual style: navy and one red accent, no gradient
text, one icon set, one button style in every mode */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px}
/* the landing heading in solid navy with the red accent, no gradient text */
.rg-h1,.rg-h1 span{background:none!important;-webkit-text-fill-color:currentColor!important}.rg-h1{color:var(--n-600,#0b3a82)}.rg-h1 span{color:#c8102e}
html.dark .rg-h1{color:#c9dafb}html.dark .rg-h1 span{color:#ff8a98}
/* the procedures in navy tints, not violet */
.chip-s.m-1S1E,.chip-s.m-1S2E,.chip-s.m-MU{background:#eef3fb!important;color:var(--n-600,#0b3a82)!important;border-color:#c3cfe0!important}
html.dark .chip-s.m-1S1E,html.dark .chip-s.m-1S2E,html.dark .chip-s.m-MU{background:#262626!important;color:#c9dafb!important;border-color:#464646!important}
/* the one icon set inside text: the size of the text, on its baseline (✓ ✕ ⚠ → and the emoji are drawn with it) */
svg.ico.sym{width:1.05em;height:1.05em;vertical-align:-.15em;stroke-width:var(--icon-sw,1.75);display:inline-block;flex:none}
/* one button: three sizes (28 / 32 / 40 px), four kinds (secondary, primary navy, accent red, ghost) — shell, tools and sheets */
:root{--btn-h:32px;--btn-h-sm:28px;--btn-h-lg:40px;--btn-bg:#fff;--btn-fg:var(--n-700,#072a60);--btn-bd:#8fa0bb;--btn-bg-hover:#eef3fb}
html.dark{--btn-bg:#1d1d1d;--btn-fg:#dbe6f7;--btn-bd:#464646;--btn-bg-hover:#262626}
html[data-theme] body .btn,html[data-theme] body .tk-btn,html[data-theme] body .v11 .sheet.ui button:not(.del):not(.go):not(.be-go):not(.pgchip):not(.itbref):not(.wb-c):not(.yn-t){
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-h);padding:0 var(--sp-3);
font-weight:600;font-size:var(--fs-sm,13px);line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;
border:1px solid var(--btn-bd);border-radius:var(--r-sm,var(--r-sm));background:var(--btn-bg);color:var(--btn-fg);box-shadow:none;
transition:background var(--dur-1,120ms) var(--ease),border-color var(--dur-1,120ms) var(--ease),color var(--dur-1,120ms) var(--ease)}
html[data-theme] body .btn:hover,html[data-theme] body .tk-btn:hover{background:var(--btn-bg-hover)}
html[data-theme] body .btn svg,html[data-theme] body .tk-btn svg{width:16px;height:16px;flex:none}
html[data-theme] body .btn-sm,html[data-theme] body .tk-btn.sm,html[data-theme] body .v11 .sheet.ui button:not(.del):not(.go):not(.be-go):not(.pgchip):not(.itbref):not(.wb-c):not(.yn-t){min-height:var(--btn-h-sm);padding:0 var(--sp-2);font-size:var(--fs-xs,12px)}
html[data-theme] body .btn-lg,html[data-theme] body .tk-btn.lg{min-height:var(--btn-h-lg);padding:0 var(--sp-5);font-size:var(--fs-lg,16px)}
html[data-theme] body .tk-btn.ico{width:var(--btn-h);padding:0}
html[data-theme] body .btn-primary,html[data-theme] body .tk-btn.primary{background:var(--n-600,#0b3a82);border-color:var(--n-600,#0b3a82);color:#fff}
html[data-theme] body .btn-primary:hover,html[data-theme] body .tk-btn.primary:hover{background:var(--n-700,#072a60);border-color:var(--n-700,#072a60)}
html[data-theme] body .tk-btn.accent,html[data-theme] body .btn-accent,html[data-theme] body .btn-destructive{background:#c8102e;border-color:#c8102e;color:#fff}
html[data-theme] body .tk-btn.accent:hover,html[data-theme] body .btn-accent:hover,html[data-theme] body .btn-destructive:hover{background:#a00d25;border-color:#a00d25}
html[data-theme] body .btn-ghost{background:transparent;border-color:transparent;color:var(--btn-fg)}
html[data-theme] body .btn-ghost:hover{background:var(--btn-bg-hover)}
html[data-theme] body .btn:disabled,html[data-theme] body .tk-btn:disabled{opacity:.5;cursor:not-allowed}
/* UX-055 — the borders of boxes, menus and buttons at 3:1 or more against their background (screen only; print unchanged).
The entry boxes of the sheets are typed in Times New Roman and Kalimati, as printed. */
@media screen{
:root{--ctl-line:#7d8aa0;--in-line:#5f86bd}
html.dark{--ctl-line:#6b7a93;--in-line:#5a7bab}
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(:focus),
html body select:not(:focus),html body textarea:not(:focus),
html[data-theme] body .btn-secondary,html[data-theme] body .tk-btn:not(.primary):not(.accent):not(.ghost){border-color:var(--ctl-line)}
html body .v11 .in:not(:focus){border-color:var(--in-line)}
html body .v11 .myletter .lrow .in:not(:focus){border-color:transparent transparent var(--in-line)}
}
/* UX-052 — dark mode: the red of the wordmark lighter, to read on the dark side bar */
html.dark .wm-red{color:#ff7a8c}
/* The interface font (Settings ▸ Appearance ▸ Interface font): the app's sans by default (Segoe UI on Windows, then Noto Sans or the
self-hosted Inter, Nepali in Noto Sans Devanagari); "Times New Roman" puts the whole interface in Times New Roman for
English and Kalimati for Nepali. The sheets and print always use Times New Roman and Kalimati (--docf). */
:root,html[data-ui]{--f-ui:"Segoe UI","Noto Sans","BC Sans","Noto Sans Devanagari","BC Deva",Kalimati,system-ui,-apple-system,Roboto,Arial,sans-serif}
body.bc-ui,html body{font-family:var(--f-ui)}
.v11{--np-sans:var(--f-ui)}
/* GD — five radii (--r-xs 4, --r-sm 6, --r-md 10, --r-lg 14, --r-pill) and one easing curve: the Tailwind and older tokens
point at them, and every border-radius of the style sheets uses one of the five */
:root{--bc-radius-md:var(--r-sm);--bc-radius-lg:var(--r-md);--bc-radius-xl:var(--r-lg);--bc-radius-2xl:var(--r-lg);--bc-radius-full:var(--r-pill);
--radius-sm:var(--r-xs);--radius-md:var(--r-sm);--radius-lg:var(--r-md);--radius-xl:var(--r-lg);--radius-2xl:var(--r-lg);
--ease:cubic-bezier(.2,0,0,1);--ease-in-out:var(--ease);--ease-out:var(--ease);--ease-in:var(--ease);--default-transition-timing-function:var(--ease)}
/* GD — the tables of the sheets on screen: the UI sans with tabular figures, rows at least 32 px, the row under the mouse
tinted, the headers of number columns right-aligned (th.r, set by ux.js). The printed page keeps the serif and its rows. */
@media screen{
.v11 .sheet table.g td{height:32px}
.v11 .sheet table.g tr:hover>td{box-shadow:inset 0 0 0 999px rgba(11,58,130,.05)}
html.dark .v11 .sheet table.g tr:hover>td{box-shadow:inset 0 0 0 999px rgba(156,194,255,.07)}
.v11 .sheet table.g th.r{text-align:right}
}
/* GD — the icons drawn by the style sheets are Lucide too (the same line icons as the pages), as masks painted in the
text colour: no ✓ ✕ ⚠ ▸ ▾ ▲ ▼ ＋ － ✎ ↵ → ↓ characters */
:root{--lc-check:url("data:image/svg+xml;utf8,");--lc-x:url("data:image/svg+xml;utf8,");--lc-alert:url("data:image/svg+xml;utf8,");--lc-pencil:url("data:image/svg+xml;utf8,");--lc-right:url("data:image/svg+xml;utf8,");--lc-down:url("data:image/svg+xml;utf8,");--lc-up:url("data:image/svg+xml;utf8,");--lc-plus:url("data:image/svg+xml;utf8,");--lc-minus:url("data:image/svg+xml;utf8,");--lc-enter:url("data:image/svg+xml;utf8,");--lc-arrow-down:url("data:image/svg+xml;utf8,");--lc-arrow-right:url("data:image/svg+xml;utf8,")}
/* One font in every sheet, on screen and in print (request of 6 Nov): Times New Roman for English and Kalimati for
Nepali (the rule above); the app's menus, bars and buttons stay in the UI sans. Figures in number cells line up. */
@media screen{
.v11 .sheet table.g td.r,.v11 .sheet table.g td.r *,.v11 .sheet input[inputmode="decimal"],.v11 .sheet input[type="number"]{font-variant-numeric:tabular-nums}
}
/* Settings ▸ Appearance ▸ Interface font ▸ Times New Roman (html[data-font="times"]) */
html[data-font="times"],html[data-font="times"][data-ui]{--f-ui:"Times New Roman",Kalimati,"Nirmala UI","Noto Sans Devanagari",Mangal,serif}
/* the sheet list: each sheet name in a faint border; the sheet that is open in a light navy tint with navy text, bold, and
a red edge on the side the list starts from (side bar and bottom tabs; Classic and Modern). Excel mode keeps Excel's own tabs. */
html:not([data-ui="excel"]) body .wb-tab{border:1px solid rgba(11,58,130,.10)!important}
html.dark:not([data-ui="excel"]) body .wb-tab{border-color:rgba(156,194,255,.12)!important}
html[data-tabs="left"]:not([data-ui="excel"]) body .wb-tab{margin-top:2px;margin-bottom:2px}
html:not([data-ui="excel"]) body .wb-tab.on,html:not([data-ui="excel"]) body .wb-tab.on:hover{background:#e3ecf9!important;color:var(--n-700,#072a60)!important;font-weight:650!important;
border-color:rgba(11,58,130,.28)!important;box-shadow:inset 0 3px 0 #c8102e!important}
html[data-tabs="left"]:not([data-ui="excel"]) body .wb-tab.on,html[data-tabs="left"]:not([data-ui="excel"]) body .wb-tab.on:hover{box-shadow:inset 3px 0 0 #c8102e!important}
html:not([data-ui="excel"]) body .wb-tab.on :is(svg,.wb-tc){color:var(--n-600,#0b3a82)!important}
html.dark:not([data-ui="excel"]) body .wb-tab.on{background:#262626!important;color:#d6e3fa!important;border-color:rgba(156,194,255,.35)!important}
html.dark:not([data-ui="excel"]) body .wb-tab.on :is(svg,.wb-tc){color:#9cc2ff!important}
/* breadcrumbs (layouts/app.html, macros/crumbs.html; the sheets: the line under the toolbar): home › … › the page you are on */
.bcx{display:flex;align-items:center;gap:1px;min-width:0;overflow:hidden;white-space:nowrap;font:500 13.5px/1.2 var(--f-ui);color:#64748b}
.bcx a,.bcx>span,.bcx b{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:var(--r-sm);min-width:0;overflow:hidden;text-overflow:ellipsis}
.bcx a{color:var(--n-600,#0b3a82);text-decoration:none;flex:0 1 auto;transition:background .15s}.bcx a:hover{background:var(--n-50,#e7eef9)}
.bcx b{color:#0f172a;font-weight:650;flex:0 1 auto}
.bcx>span{color:#64748b;flex:0 1 auto}
.bcx .bc-home{flex:none;padding:4px 5px}.bcx .bc-home svg{width:16px;height:16px}
.bcx .bc-s{flex:none;width:12px;height:12px;background-color:#94a3b8;-webkit-mask:var(--lc-right) center/contain no-repeat;mask:var(--lc-right) center/contain no-repeat}
html.dark .bcx{color:#94a3b8}html.dark .bcx a{color:#9cc2ff}html.dark .bcx a:hover{background:#262626}html.dark .bcx b{color:#e3e9f3}
.bcx .bc-home+.bc-s:last-child{display:none}
.wb-crumb.bcx{font-size:13px}.wb-crumb.bcx .bc-p{max-width:220px}
/* the sheet side bar's width (ux.js: drag its right edge; it snaps to Full, 75 %, 50 % or Icons; kept on this computer):
Full and 75 % show the full sheet names, 50 % the short names (BDS, 2.3.1 NW, Q.Sum), Icons an icon or the short name in a badge */
html[data-tabs="left"]:not([data-ui="excel"]) .wb-tabs{position:sticky}
.wb-tgrip{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:6;touch-action:none}
.wb-tgrip::after{content:"";position:absolute;top:50%;left:3px;width:2px;height:36px;margin-top:-18px;border-radius:2px;background:rgba(11,58,130,.18);transition:background .15s,height .15s,margin .15s}
.wb-tgrip:hover::after,.wb-tgrip.on::after{background:var(--n-600,#0b3a82);height:56px;margin-top:-28px}
html:not([data-tabs="left"]) .wb-tgrip,html[data-ui="excel"] .wb-tgrip{display:none}
html.wb-tw-drag,html.wb-tw-drag *{cursor:col-resize!important;user-select:none!important}
html[data-tabs="left"][data-tbw="75"] .wb-shell{grid-template-columns:180px minmax(0,1fr)}
html[data-tabs="left"][data-tbw="75"] .wb-tab>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html[data-tabs="left"][data-tbw="50"] .wb-shell{grid-template-columns:120px minmax(0,1fr)}
html[data-tabs="left"][data-tbw="50"] .wb-tab>span{display:none}
html[data-tabs="left"][data-tbw="50"] .wb-tab .wb-tc{display:inline;font:inherit;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tabs="left"][data-tbw="50"] .wb-gl span{overflow:hidden;text-overflow:ellipsis}
html[data-tabs="left"][data-tbw="icons"] .wb-shell{grid-template-columns:58px minmax(0,1fr)}
html[data-tabs="left"][data-tbw="icons"] .wb-tab>span,html[data-tabs="left"][data-tbw="icons"] .wb-tab:has(svg) .wb-tc,
html[data-tabs="left"][data-tbw="icons"] .wb-gl span,html[data-tabs="left"][data-tbw="icons"] .wb-gl em,html[data-tabs="left"][data-tbw="icons"] .wb-gl .wb-gl-c,
html[data-tabs="left"][data-tbw="icons"] .wb-gpin,html[data-tabs="left"][data-tbw="icons"] .wb-gp-all{display:none!important}
html[data-tabs="left"][data-tbw="icons"] .wb-tab{justify-content:center;padding:6px 0!important}
html[data-tabs="left"][data-tbw="icons"] .wb-tab svg{width:18px;height:18px}
html[data-tabs="left"][data-tbw="icons"] .wb-tab:not(:has(svg)) .wb-tc{display:grid;place-items:center;width:38px;min-height:22px;border-radius:6px;font:700 8.5px/1.1 var(--f-ui);font-style:normal;
text-align:center;overflow:hidden;word-break:break-word}
html[data-tabs="left"][data-tbw="icons"] .wb-gl{justify-content:center;font-size:0;padding:8px 0 2px}
html[data-tabs="left"][data-tbw="icons"] .wb-gl::before{content:"";display:block;width:30px;border-top:2px solid rgba(11,58,130,.25)}
html[data-tabs="left"][data-tbw="icons"] .wb-tabs-nav{flex-direction:column;align-items:center}
html[data-tabs="left"][data-tbw="50"] .wb-gpin{display:none!important}
/* ---------- dark mode: neutral black (request of 7 Nov, like the dark modes of ChatGPT and other modern apps) ----------
a black ground, charcoal panels (#171717 · #212121 · #2f2f2f), soft white text (#ececec), grey secondary text (#b4b4b4),
hairline borders (#2f2f2f); colour only where it means something (links, the result badges, the open sheet's red edge).
The navy tints of the older dark mode were turned into greys of the same lightness by tools/dark_neutral.py. */
html.dark,html.dark[data-style],html.dark[data-ui]{
--bg:#000;--paper:#171717;--card:#171717;--line:#2f2f2f;--line-soft:#212121;--ink:#ececec;--muted:#b4b4b4;--navy-light:#262626;--key-bg:#212121;
--m-bg:#000;--m-surface:#171717;--m-surface-2:#212121;--m-surface-3:#0d0d0d;--m-line:#2f2f2f;--m-line-2:#212121;--m-ink:#ececec;--m-ink-2:#d4d4d4;
--m-muted:#b4b4b4;--m-faint:#8e8e8e;--m-glass:rgba(13,13,13,.86);--m-accent-soft:#262626;--m-accent-soft-2:#2f2f2f;
--color-slate-950:#000;--color-slate-900:#0d0d0d;--color-slate-800:#212121;--color-slate-700:#2f2f2f;--color-slate-600:#424242;
--color-slate-500:#8e8e8e;--color-slate-400:#b4b4b4;--color-slate-300:#c9c9c9;--color-slate-200:#dcdcdc;--color-slate-100:#ececec;--color-slate-50:#f4f4f4;
--navy:#3f74d6;--m-accent:#3f74d6; /* one blue in the dark: white text on it 4.5:1, and as text on the black 4.7:1 */
color-scheme:dark}
html.dark body{background:#000!important;color:#ececec}
html.dark .st-tabs button[aria-selected="true"],html.dark .st-seg button[aria-pressed="true"]{background:#2f2f2f!important;color:#fff!important}
html.dark aside.sb,html.dark .sb-main>header:not(.wb-bar){background:#000!important;border-color:#212121!important}
html.dark .wb-bar,html.dark[data-style] .wb-bar{background:#0d0d0d!important;border-bottom:1px solid #212121!important;box-shadow:none!important}
html.dark .wb-bar :is(.wb-c,.wb-proj,select.wb-c,input.wb-c){background:#212121;border-color:#2f2f2f;color:#ececec}
html.dark :is(.card,.pl-box,.db-kpi,.db-card,.lr-card,.lt-card,.st-dlg,.wb-dlg,.bc-cf,[role="menu"]){background:#171717!important;border-color:#2f2f2f!important;box-shadow:none!important}
html.dark :is(.btn-secondary,.tk-btn:not(.primary):not(.accent)){background:#212121;border-color:#3a3a3a;color:#ececec}
html.dark :is(.btn-primary,.tk-btn.primary){background:#ececec!important;border-color:#ececec!important;color:#0d0d0d!important}
html.dark :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:#212121;border-color:#3a3a3a;color:#ececec}
html.dark .v11{--paper:#171717;--inbg:#212121;--np-line:#2f2f2f;--np-ink:#ececec;--np-mut:#b4b4b4;--np-navy-l:#262626}
html.dark .v11 .sheet{background:#171717!important;box-shadow:0 0 0 1px #2f2f2f!important}
html.dark .v11 .in,html.dark .v11 select.in{background:#212121!important;border-color:#3a3a3a!important;color:#ececec!important}
html.dark .wb-tabs{background:#000!important;border-color:#212121!important}
html.dark body .wb-tab{border-color:#262626!important}
html.dark body .wb-tab.on{background:#212121!important;color:#fff!important;border-color:#3a3a3a!important}
html.dark .bcx b{color:#fff}html.dark .bcx a{color:#c9c9c9}html.dark .bcx a:hover{background:#212121;color:#fff}
html.dark ::selection{background:#3a3a3a}