grid containers with inline styles
============================================================ */
@media (max-width:768px){
/* Plain div · 3-col grid → 2-col */
html body div[style*="grid-template-columns:repeat(3"]{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:8px !important;
}
/* Plain div · 4-col grid → 2-col */
html body div[style*="grid-template-columns:repeat(4"]{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:8px !important;
}
/* Long button labels in dec-act · allow text wrap */
html body .dec-act{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
width:100%;
}
html body .dec-act .btn{
width:100% !important;
justify-content:flex-start !important;
text-align:left;
white-space:normal !important;
overflow:visible !important;
text-overflow:initial !important;
word-break:normal;
padding:11px 13px !important;
}
}
/* ============================================================
BATCH 02 v3-r8 · MOBILE MICRO-FIX PASS
Targeted polish only · no architectural changes from v3-r7
============================================================ */
@media (max-width:768px){
/* ─────────────────────────────────────────────────────────
#1 + #2: STICKY FOOTER · stack buttons full-width
Affects screen-004 + screen-011
───────────────────────────────────────────────────────── */
html body .sticky-bar{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:8px !important;
padding:12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
bottom:64px !important; /* sit directly on top of mob-tab */
}
/* The status/metadata text row stays compact at top */
html body .sticky-bar > div:first-child,
html body .sticky-bar > div.sb-meta{
flex:0 0 auto !important;
width:100% !important;
font-size:10.5px !important;
line-height:1.4;
color:var(--hint);
padding:0 2px;
overflow-wrap:anywhere;
text-align:left;
}
/* Buttons row · 2 buttons side-by-side, equal flex */
html body .sticky-bar > .btn,
html body .sticky-bar > a.btn{
flex:1 1 calc(50% - 4px) !important;
width:auto !important;
min-width:0 !important;
padding:11px 12px !important;
font-size:12.5px !important;
border-radius:12px !important;
justify-content:center !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-sizing:border-box;
}
/* Group adjacent .btn elements into a 2-up row · use wrapper if exists */
html body .sticky-bar{
flex-wrap:wrap !important;
}
html body .sticky-bar > .btn:first-of-type{
margin-left:0 !important;
}
/* If the primary CTA has long label · still center & truncate · prevent clip */
html body .sticky-bar .btn.brand{
flex:2 1 0% !important; /* primary CTA gets more space */
}
/* Inline SVG arrows · keep tight */
html body .sticky-bar .btn svg{
flex-shrink:0;
margin-left:4px;
}
/* ─────────────────────────────────────────────────────────
#3: GLOBAL BOTTOM SPACING · clear sticky-bar + mob-tab
───────────────────────────────────────────────────────── */
html body .app{
padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important;
}
/* For screens that USE sticky-bar (004, 011) · need extra room */
html body .page:has(.sticky-bar),
html body .app:has(.sticky-bar){
padding-bottom:calc(220px + env(safe-area-inset-bottom)) !important;
}
/* Fallback for browsers without :has() · target the inner page directly */
html body .page{
padding-bottom:14px; /* page itself stays normal · app handles bottom */
}
/* Trust block always has clear space below */
html body .trust-block,
html body .page > .trust-block{
margin-bottom:0;
}
/* ─────────────────────────────────────────────────────────
#4: TOPBAR / BREADCRUMB FINAL TIGHTEN
Cleaner 2-row layout · no collision · shortened crumbs
───────────────────────────────────────────────────────── */
/* Row 2 · breadcrumb · hide middle path segments */
html body .topbar .crumb-bar .crumbs{
overflow:hidden;
max-width:140px;
text-overflow:ellipsis;
flex:0 1 auto;
}
/* Hide the middle path "Lead · Customer · Follow-up" on tight mobile */
html body .topbar .crumb-bar .crumbs > span.sep + *:not(b):not(:last-child){
display:none;
}
/* Show only "Module / Current Screen" pattern */
/* Prev/Next pills · keep compact, no overlap */
html body .topbar .crumb-pill{
max-width:90px;
font-size:9.5px;
padding:4px 7px;
border-radius:12px;
}
html body .topbar .crumb-pill svg{
width:11px;
height:11px;
flex-shrink:0;
}
/* Row 1 top-actions · ensure primary CTA never clips */
html body .topbar > .top-actions,
html body .topbar > .topbar-r{
max-width:62%;
flex-wrap:nowrap;
overflow:hidden;
}
html body .top-actions .btn,
html body .topbar-r .btn{
max-width:110px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Hide long action label text on very tight screens · show icon only */
html body .top-actions .btn span:not(.dot),
html body .topbar-r .btn span:not(.dot){
display:inline;
}
}
@media (max-width:380px){
/* Compact mobile · sticky bar even tighter */
html body .sticky-bar > .btn,
html body .sticky-bar > a.btn{
padding:10px 10px !important;
font-size:11.5px !important;
}
/* Top-actions · icon-only for primary CTA when extremely tight */
html body .top-actions .btn,
html body .topbar-r .btn{
max-width:90px;
padding:6px 9px;
}
/* Crumbs · even shorter */
html body .topbar .crumb-bar .crumbs{
max-width:100px;
font-size:9.5px;
}
}
/* ============================================================
BATCH 03 r3 · MOBILE WIDTH HARD-GATE LAYER
Catch-all rules so document.scrollWidth = viewport at <=768px
============================================================ */
/* Tablet (769-1024px) keeps existing behavior · changes ONLY at <=768px */
@media (max-width:768px){
/* ─────────────────────────────────────────────────────────
CATCH-ALL · ANY inline grid template stacks to 1-col
v3-r8 only matched `1fr 1fr` exactly · r3 matches all ratios
───────────────────────────────────────────────────────── */
html body section[style*="display:grid"],
html body div[style*="display:grid"],
html body section[style*="grid-template-columns"],
html body div[style*="grid-template-columns"]{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
gap:14px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
/* Children of stacked grids · enforce width and min-width:0 */
html body section[style*="display:grid"] > *,
html body div[style*="display:grid"] > *,
html body section[style*="grid-template-columns"] > *,
html body div[style*="grid-template-columns"] > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}
/* Allow specific PATTERNS that need 2-col on mobile · KPI tiles etc · use explicit class .mobile-safe-grid below */
html body .mobile-safe-grid[style*="display:grid"],
html body .mobile-safe-grid[style*="grid-template-columns"]{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:8px !important;
}
html body .mobile-safe-grid > *{flex:none}
/* ─────────────────────────────────────────────────────────
RO-PANEL · ro-row · ro-v · force text wrap, no overflow
───────────────────────────────────────────────────────── */
html body .ro-panel,
html body .ro-panel-h,
html body .ro-panel-b{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}
html body .ro-row{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:3px !important;
overflow:hidden !important;
}
html body .ro-row > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}
html body .ro-l{
overflow-wrap:anywhere !important;
word-break:break-word !important;
white-space:normal !important;
}
html body .ro-v{
display:block !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
white-space:normal !important;
text-overflow:initial !important;
text-align:left !important;
justify-content:flex-start !important;
}
html body .ro-v *{
max-width:100% !important;
overflow-wrap:anywhere;
word-break:break-word;
}
/* Money symbol+amount inside ro-v stay together as a unit, but parent wraps around */
html body .ro-v .money,
html body .ro-v .aed-symbol{
display:inline-flex !important;
white-space:nowrap !important;
word-break:keep-all !important;
}
html body .ro-foot{
width:100% !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
}
/* ─────────────────────────────────────────────────────────
INLINE-ACTIONS · replaces sticky-bar on screens 017/018/019
Bottom action section that sits in normal flow · not fixed
───────────────────────────────────────────────────────── */
html body .inline-actions{
display:flex !important;
flex-direction:column;
align-items:stretch;
gap:10px;
padding:14px;
margin:0;
width:100%;
max-width:100%;
box-sizing:border-box;
background:var(--card);
border-radius:14px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
html body .inline-actions > .sb-meta,
html body .inline-actions > div:first-child:not(.btn){
width:100%;
font-size:11.5px;
color:var(--hint);
line-height:1.5;
overflow-wrap:anywhere;
word-break:break-word;
padding:0 2px;
}
html body .inline-actions > .btn{
width:100% !important;
max-width:100% !important;
flex:none !important;
padding:12px 14px;
font-size:13px;
justify-content:center;
border-radius:12px;
white-space:normal;
overflow:visible;
text-overflow:initial;
}
/* ─────────────────────────────────────────────────────────
ABSOLUTE WIDTH CONTAINMENT · every container fits viewport
───────────────────────────────────────────────────────── */
html, body{
width:100% !important;
max-width:100vw !important;
overflow-x:clip !important;
}
html body .app,
html body .main,
html body .page,
html body .content,
html body .shell,
html body .batch-shell,
html body .screen,
html body section,
html body article,
html body header,
html body footer,
html body nav.crumb-bar{
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Long mono / ID / transaction-ref text must wrap */
html body code,
html body kbd,
html body samp,
html body .mono,
html body .meta-tiny,
html body b,
html body p,
html body span,
html body div{
word-break:normal;
}
/* ─────────────────────────────────────────────────────────
MOBILE UTILITY CLASSES · per audit spec
───────────────────────────────────────────────────────── */
html body .mobile-stack{
display:flex !important;
flex-direction:column !important;
width:100%;
max-width:100%;
gap:14px;
box-sizing:border-box;
}
html body .mobile-stack > *{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
html body .mobile-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
padding:14px;
border-radius:14px;
background:var(--card);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
html body .mobile-scroll-x{
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch !important;
width:100% !important;
max-width:100% !important;
scrollbar-width:none;
}
html body .mobile-scroll-x::-webkit-scrollbar{display:none}
html body .mobile-full{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}
html body .mobile-actions-stack{
display:flex !important;
flex-direction:column !important;
gap:8px;
width:100%;
}
html body .mobile-actions-stack > .btn{
width:100% !important;
justify-content:center;
flex:none !important;
}
html body .mobile-inline-actions{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
gap:8px;
width:100%;
}
html body .mobile-inline-actions > .btn{
flex:1 1 calc(50% - 4px) !important;
min-width:0;
justify-content:center;
}
html body .mobile-compare-row{
display:flex !important;
flex-direction:column !important;
gap:6px;
padding:12px 14px;
border-top:0.5px solid var(--hairline);
width:100%;
max-width:100%;
box-sizing:border-box;
overflow:hidden;
}
html body .mobile-compare-row > *{
width:100%;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
}
html body .mobile-ro-row{
display:flex !important;
flex-direction:column !important;
gap:3px;
padding:9px 0;
border-bottom:0.5px dashed var(--hairline);
width:100%;
max-width:100%;
overflow:hidden;
}
/* ─────────────────────────────────────────────────────────
SAFE BOTTOM PADDING · screens with inline-actions don't need
the 220px sticky-bar buffer · standard 120px is enough
───────────────────────────────────────────────────────── */
html body .app:not(:has(.sticky-bar)){
padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important;
}
/* ─────────────────────────────────────────────────────────
DET-HERO · ensure intel-row + actions remain in shape
The catch-all grid-stack rule above would have flattened
the intel-row to 1-col · explicitly restore 2-col grid for it
───────────────────────────────────────────────────────── */
html body .det-hero .intel-row{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
flex-direction:row !important;
gap:0 !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
}
html body .det-hero .intel-row > .it{
width:auto !important;
flex:none !important;
min-width:0 !important;
overflow:hidden;
}
/* intel-strip on list screens · keep 2-col */
html body .intel-strip{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
flex-direction:row !important;
gap:8px !important;
}
html body .intel-strip > .it{
width:auto !important;
flex:none !important;
min-width:0 !important;
}
html body .intel-strip > .it:last-child:nth-child(2n+1){grid-column:1 / -1}
/* row-2u KPI strip · keep 2-col */
html body .row-2u[style*="repeat(4"],
html body .row-2u[style*="repeat(3"],
html body .row-2u[style*="repeat(2"]{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
flex-direction:row !important;
gap:9px !important;
}
/* Pre-existing 2-row tab/scroll containers · keep horizontal scroll */
html body .tabs,
html body .fpill-bar,
html body .stage-strip{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
}
/* ─────────────────────────────────────────────────────────
INLINE-FLEX containers · ensure content min-width:0
The morning action engine cards · readiness checklist · etc.
───────────────────────────────────────────────────────── */
html body div[style*="display:flex"]:not(.det-actions):not(.det-h-row):not(.intel-row):not(.tabs):not(.fpill-bar):not(.stage-strip):not(.mob-tab):not(.crumb-bar):not(.crumb-nav):not(.top-actions):not(.topbar):not(.det-tags){
flex-wrap:wrap;
}
html body div[style*="display:flex"] > *{
min-width:0;
}
/* ─────────────────────────────────────────────────────────
PRE-DRIVE / OUTCOME · 4-button grid → 2-col
───────────────────────────────────────────────────────── */
html body div[style*="grid-template-columns:repeat(4"]{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
flex-direction:row !important;
gap:8px !important;
}
}
/* ============================================================
COMPACT MOBILE (<=380px) · iPhone SE tightening
============================================================ */
@media (max-width:380px){
html body .inline-actions{padding:12px}
html body .inline-actions > .btn{padding:10px 12px;font-size:12.5px}
}
/* Screen-018 customer-type switcher · stack on mobile · prevent overflow */
@media (max-width:768px){
html body .cust-type-row{
flex-direction:column !important;
align-items:stretch !important;
gap:12px !important;
}
html body .cust-type-row > .ic{align-self:flex-start}
html body .cust-type-row > div[style*="flex:1"]{
flex:none !important;
width:100% !important;
}
html body .cust-type-row > div[style*="display:inline-flex"]{
width:100% !important;
justify-content:stretch !important;
}
html body .cust-type-row > div[style*="display:inline-flex"] > .btn{
flex:1 1 50% !important;
text-align:center;
justify-content:center !important;
}
}
/* Index.html · batch review page · mobile shell */
@media (max-width:768px){
html body .batch-shell{
padding:24px 14px 96px !important;
max-width:100% !important;
width:100% !important;
box-sizing:border-box;
}
html body .batch-header{
flex-direction:column !important;
align-items:flex-start !important;
gap:18px !important;
}
html body .batch-header > div{
width:100% !important;
max-width:100% !important;
align-items:flex-start !important;
text-align:left !important;
}
html body .batch-header h1{
font-size:24px !important;
}
html body .batch-status-strip{
grid-template-columns:1fr !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
}
/* ============================================================
r3 · FINAL CONTAINMENT NUKE · everything fits in viewport
============================================================ */
@media (max-width:768px){
/* Form card + s-card on mobile · explicit width constraints */
html body .form-card,
html body .s-card,
html body .s-card-h,
html body .s-card-b,
html body .ro-panel,
html body .next-step,
html body .intel-strip,
html body .stage-strip,
html body .fpill-bar,
html body .cdc-lane,
html body .cdc-grp,
html body .leads-list,
html body .cust-list,
html body .deal-cockpit-main,
html body .deal-cockpit-aside{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Chips · long labels wrap inside their pill */
html body .chip{
max-width:100% !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
height:auto !important;
min-height:22px;
padding:3px 9px !important;
line-height:1.4 !important;
box-sizing:border-box;
}
/* Form label .opt (the "optional" / "required..." hints) · stay inline */
html body .form-label .opt,
html body .form-field .opt{
white-space:normal;
overflow-wrap:anywhere;
}
/* Any element with min-width set explicitly · cap at viewport */
html body *{
min-width:0;
}
/* Re-allow min-width where it's structural · iconbtn/avatar/etc */
html body .iconbtn,
html body .av,
html body .brand-glyph,
html body .det-av{
min-width:auto;
}
/* Buttons inside cards · contain */
html body .btn{
max-width:100% !important;
box-sizing:border-box;
}
/* OPT pills + inline form chips · don't push parent wider */
html body span.opt{
display:inline-block;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
white-space:normal;
font-size:10px;
color:var(--hint);
margin-left:6px;
}
}
/* ============================================================
BATCH 03 r4 · PREMIUM MICRO-POLISH PASS
============================================================ */
/* ─────────────────────────────────────────────────────────
r4 · #5 · Screen-018 customer-type switcher · CSS-only fade
Activated by reorder of segmented control · respects motion preference
───────────────────────────────────────────────────────── */
.cust-form-section{
opacity:1;
transform:translateY(0);
transition:opacity 170ms var(--ease, cubic-bezier(0.4,0,0.2,1)),
transform 170ms var(--ease, cubic-bezier(0.4,0,0.2,1));
will-change:opacity, transform;
}
.cust-form-section[hidden],
.cust-form-section.is-hidden{
opacity:0;
transform:translateY(4px);
pointer-events:none;
}
.cust-form-section.is-entering{
opacity:0;
transform:translateY(-4px);
animation:custFormEnter 180ms var(--ease, cubic-bezier(0.4,0,0.2,1)) forwards;
}
@keyframes custFormEnter{
to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
.cust-form-section,
.cust-form-section.is-entering{
animation:none !important;
transition:none !important;
opacity:1 !important;
transform:none !important;
}
}
/* ─────────────────────────────────────────────────────────
r4 · #6 · Trust Rules · context-aware label
Adds an "screen-specific" suffix beside the count
───────────────────────────────────────────────────────── */
.trust-pill .cnt{
position:relative;
}
.trust-pill .cnt::after{
content:" · screen-specific";
font-family:var(--font-mono);
font-size:9px;
letter-spacing:0.08em;
color:var(--hint);
font-weight:500;
text-transform:uppercase;
margin-left:5px;
}
@media (max-width:768px){
.trust-pill .cnt::after{
content:" · screen";
font-size:8.5px;
}
}
/* ─────────────────────────────────────────────────────────
r4 · #9 · Defer secondary button · intentional alternate
.btn.secondary · clear distinction from ghost (which can read as disabled)
───────────────────────────────────────────────────────── */
.btn.secondary{
background:var(--card-sunk);
color:var(--ink-2);
border:0;
box-shadow:inset 0 0 0 0.5px var(--hairline);
font-weight:500;
}
.btn.secondary:hover{
background:var(--surface-3, var(--card));
color:var(--ink);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
.btn.secondary:focus-visible{
outline:2px solid var(--brand);
outline-offset:2px;
}
.btn.secondary svg{
opacity:0.7;
}
/* ─────────────────────────────────────────────────────────
r4 · #3 · Lead Owner on-leave row · muted intentional state
───────────────────────────────────────────────────────── */
.rrow.leave-row{
background:linear-gradient(0deg, var(--card-sunk) 0%, var(--card) 100%);
border-left:3px solid var(--hairline);
}
.rrow.leave-row .leave-msg{
display:flex;
align-items:center;
height:100%;
}
/* ─────────────────────────────────────────────────────────
r4 · #8 · Outcome picker buttons · consistent visual weight
───────────────────────────────────────────────────────── */
.outcome-grid .outcome-btn{
transition:background 160ms var(--ease, cubic-bezier(0.4,0,0.2,1)),
box-shadow 160ms var(--ease, cubic-bezier(0.4,0,0.2,1)),
transform 120ms var(--ease, cubic-bezier(0.4,0,0.2,1));
}
.outcome-grid .outcome-btn:hover{
background:var(--card);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
transform:translateY(-1px);
}
.outcome-grid .outcome-btn:focus-visible{
outline:2px solid var(--brand);
outline-offset:2px;
}
.outcome-grid .outcome-btn .outcome-ic{
transition:transform 200ms var(--ease, cubic-bezier(0.4,0,0.2,1));
}
.outcome-grid .outcome-btn:hover .outcome-ic{
transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
.outcome-grid .outcome-btn,
.outcome-grid .outcome-btn:hover,
.outcome-grid .outcome-btn:hover .outcome-ic{
transition:none !important;
transform:none !important;
}
}
/* ─────────────────────────────────────────────────────────
r4 · #4 · P1 routing rule emphasis (no rule layout regression)
Stronger than P2-P6 via the existing brand-50 + brand-soft border
───────────────────────────────────────────────────────── */
.rule-card-p1,
[data-priority="p1"]{
background:linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 90%);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
/* ─────────────────────────────────────────────────────────
r4 · mobile · keep on-leave row two-row stack
───────────────────────────────────────────────────────── */
@media (max-width:768px){
html body .rrow.leave-row{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:8px !important;
}
html body .rrow.leave-row .leave-msg{
grid-column:auto !important;
padding:6px 0 !important;
border-top:0.5px dashed var(--hairline);
border-bottom:0.5px dashed var(--hairline);
}
}
/* ============================================================
BATCH 04 · SALES DOCUMENTS CORE LAYER
Q-line builder · doc preview · size variants · print stylesheet
Appended below Batch 03 v1.0-r4 LOCKED boundary (line 5114)
============================================================ */
/* ─────────────────────────────────────────────────────────
QLINE · quotation / proforma line item card
───────────────────────────────────────────────────────── */
.qline-list{
display:flex;
flex-direction:column;
gap:0;
}
.qline{
border-top:0.5px solid var(--hairline);
background:var(--surface);
transition:background 160ms var(--ease, cubic-bezier(0.4,0,0.2,1));
}
.qline:first-child{border-top:0}
.qline:hover{background:var(--card-sunk)}
.qline.qline-vehicle{background:linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 60%)}
.qline-h{
display:flex;
align-items:center;
gap:10px;
padding:11px 16px;
border-bottom:0.5px dashed var(--hairline);
}
.qline-type{
display:inline-flex;
align-items:center;
gap:6px;
font-family:var(--font-mono);
font-size:10.5px;
letter-spacing:0.08em;
color:var(--ink-2);
text-transform:uppercase;
font-weight:600;
padding:4px 10px;
border-radius:9999px;
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.qline.qline-vehicle .qline-type{
color:var(--brand);
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
.qline-type svg{width:11px;height:11px}
.qline-num{
font-family:var(--font-mono);
font-size:10.5px;
color:var(--hint);
letter-spacing:0.05em;
font-weight:500;
flex:1;
}
.qline-b{padding:12px 16px 14px}
.qline-desc{
font-size:12.5px;
color:var(--ink-2);
line-height:1.55;
margin-bottom:10px;
}
.qline-desc b{color:var(--ink);font-weight:600}
.qline-grid{
display:grid;
grid-template-columns:1fr 1.4fr 1.2fr 1.2fr 1.3fr;
gap:10px;
align-items:flex-end;
}
.qline-cell{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
}
.qline-cell label{
font-family:var(--font-mono);
font-size:9.5px;
letter-spacing:0.08em;
color:var(--hint);
text-transform:uppercase;
font-weight:600;
}
.qline-cell .qline-ro{
font-size:12.5px;
color:var(--ink-2);
padding:7px 10px;
background:var(--card-sunk);
border-radius:12px;
font-weight:500;
text-align:left;
}
.qline-total{
text-align:right;
border-left:0.5px solid var(--hairline);
padding-left:14px;
}
.qline-total label{text-align:right;display:block}
.qline-total b{
font-family:var(--font-mono);
font-size:13.5px;
font-weight:700;
color:var(--ink);
display:inline-flex;
align-items:center;
gap:3px;
}
/* ─────────────────────────────────────────────────────────
FORM size variant · .sm
───────────────────────────────────────────────────────── */
.form-input.sm,
.form-select.sm{
padding:7px 10px !important;
font-size:12px !important;
height:32px !important;
min-height:32px !important;
}
.input-grp.sm{height:32px}
.input-grp.sm .form-input{height:30px}
.input-grp.sm .pre{
padding:0 9px;
font-size:11px;
background:var(--card-sunk);
}
.iconbtn.xs{
width:24px;
height:24px;
padding:0;
border-radius:12px;
}
.iconbtn.xs svg{width:11px;height:11px}
/* ─────────────────────────────────────────────────────────
DOC-PREVIEW · customer-facing document preview surface
Wraps an .s-card · sets preview body to white-ish paper feel
───────────────────────────────────────────────────────── */
.s-card.doc-preview{
box-shadow:inset 0 0 0 0.5px var(--hairline), 0 4px 14px -8px rgba(28,28,40,0.06);
}
.s-card.doc-preview .s-card-b{
background:var(--surface);
}
/* ─────────────────────────────────────────────────────────
BATCH 04 · MOBILE LAYER
qline-grid stacks · doc-preview gets compact padding · etc.
───────────────────────────────────────────────────────── */
@media (max-width:768px){
html body .qline-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
html body .qline-grid > .qline-total{
grid-column:1 / -1 !important;
border-left:0 !important;
border-top:0.5px solid var(--hairline) !important;
padding-left:0 !important;
padding-top:10px !important;
margin-top:4px !important;
text-align:right;
}
html body .qline-h{padding:10px 14px}
html body .qline-b{padding:11px 14px 12px}
html body .qline-num{font-size:10px}
html body .qline-type{font-size:10px;padding:3px 8px}
/* Document preview · readable on mobile · less padding */
html body .s-card.doc-preview .s-card-b{
padding:18px 16px !important;
}
/* Tables inside doc-preview · stack on mobile */
html body .s-card.doc-preview table{
font-size:11.5px !important;
}
html body .s-card.doc-preview table th,
html body .s-card.doc-preview table td{
padding:8px 6px !important;
word-break:break-word;
overflow-wrap:anywhere;
}
/* Iconbtn.xs stays visible · don't shrink */
html body .iconbtn.xs{min-width:24px;width:24px}
}
/* ─────────────────────────────────────────────────────────
PRINT STYLESHEET · for document-preview screens (026 · 030 · 032)
Hide shell · show only document preview · A4 friendly
───────────────────────────────────────────────────────── */
@media print{
html, body{
background:var(--surface) !important;
color:var(--c-print-ink) !important;
font-size:11pt;
}
.sidebar,
.topbar,
.mob-tab,
.trust-block,
.det-actions,
.det-tags,
.inline-actions,
.sticky-bar,
.det-hero .intel-row,
.page-hero-anchor,
.page-hero-eyebrow,
.top-actions,
.crumb-bar,
.back-master{
display:none !important;
}
.app{
display:block !important;
padding:0 !important;
background:var(--surface) !important;
}
.main, .page{
margin:0 !important;
padding:0 !important;
background:var(--surface) !important;
width:100% !important;
max-width:none !important;
}
/* Only show .s-card.doc-preview content; other cards hidden in print */
.deal-cockpit > div:not(:has(.doc-preview)){
display:none !important;
}
.s-card.doc-preview{
box-shadow:none !important;
border:0 !important;
background:var(--surface) !important;
page-break-inside:auto;
}
.s-card.doc-preview .s-card-h{display:none !important}
.s-card.doc-preview .s-card-b{
background:var(--surface) !important;
padding:0 !important;
}
/* Re-color chips for print · gray hairlines · no dark heroes */
.chip{
background:var(--surface) !important;
color:var(--c-print-ink-mid) !important;
box-shadow:inset 0 0 0 0.5px var(--c-print-edge) !important;
}
.det-hero{
background:var(--surface) !important;
color:var(--c-print-ink) !important;
box-shadow:none !important;
padding:0 0 12pt 0 !important;
}
.det-hero .det-h1, .det-hero .det-sub, .det-hero .eyebrow{
color:var(--c-print-ink) !important;
}
/* Hide aside in document-preview screens during print */
.deal-cockpit{
display:block !important;
grid-template-columns:none !important;
}
.deal-cockpit > *:not(.doc-preview):not(:has(.doc-preview)){
display:none !important;
}
table{page-break-inside:avoid}
a{color:var(--c-print-ink) !important;text-decoration:none !important}
}
/* ============================================================
BATCH 04 r2 · MOBILE DOCUMENT PREVIEW POLISH
1. .doc-preview
stacks to cards on mobile
2. Money symbol + value never split across lines
3. Mob-tab overlap prevention via stronger bottom safe-area
============================================================ */
/* ─────────────────────────────────────────────────────────
1 · MONEY NOWRAP GUARANTEE
Symbol + amount stay together · works inside any container
───────────────────────────────────────────────────────── */
.money,
.money-pair,
.amount,
.doc-money,
.total-value,
.qline-total,
.line-total,
.tot-v{
white-space:nowrap !important;
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum';
}
/* aed-symbol followed by plain-text number · ensure they stay paired
We target the IMMEDIATE parent (td, b, span, div) of any aed-symbol
when the parent contains money-like content */
.doc-preview td:has(.aed-symbol),
.doc-preview b:has(.aed-symbol),
.doc-preview td b,
.doc-preview td span:has(.aed-symbol),
.ro-v:has(.aed-symbol),
.qline-total:has(.aed-symbol),
.tot-v:has(.aed-symbol),
.doc-money,
.doc-amt{
white-space:nowrap;
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum';
}
/* Backup for browsers without :has() · classes that hold money */
.money-pair{
display:inline-flex;
align-items:baseline;
gap:3px;
white-space:nowrap;
}
/* ─────────────────────────────────────────────────────────
2 · DOC-PREVIEW TABLE → MOBILE CARDS
Desktop keeps premium table · mobile stacks as item cards
───────────────────────────────────────────────────────── */
@media (max-width:768px){
html body .doc-preview table{
width:100% !important;
border-collapse:separate !important;
border-spacing:0 8px !important;
margin:10px 0 !important;
}
html body .doc-preview table thead{display:none}
html body .doc-preview table tr{
display:block !important;
width:100% !important;
background:var(--card-sunk);
border-radius:12px;
padding:10px 12px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
border:0 !important;
margin-bottom:0 !important;
}
html body .doc-preview table td{
display:flex !important;
flex-direction:row !important;
justify-content:space-between !important;
align-items:baseline !important;
width:100% !important;
padding:5px 0 !important;
border:0 !important;
text-align:left !important;
font-size:12.5px !important;
overflow-wrap:anywhere;
word-break:break-word;
gap:12px;
}
/* First cell · item name · full-width title row */
html body .doc-preview table td:first-child{
flex-direction:column !important;
align-items:flex-start !important;
padding-bottom:8px !important;
border-bottom:0.5px dashed var(--hairline) !important;
margin-bottom:5px !important;
}
html body .doc-preview table td:first-child b{
font-size:13px;
color:var(--ink);
overflow-wrap:anywhere;
word-break:break-word;
white-space:normal;
}
/* Non-first cells get a generated label · matches the desktop column header */
html body .doc-preview table td:not(:first-child)::before{
content:attr(data-label);
font-family:var(--font-mono);
font-size:10px;
color:var(--hint);
text-transform:uppercase;
letter-spacing:0.08em;
font-weight:600;
flex:0 0 auto;
}
/* The value side · right-aligned and nowrap */
html body .doc-preview table td:not(:first-child){
text-align:right !important;
}
html body .doc-preview table td:not(:first-child) > *,
html body .doc-preview table td:not(:first-child) b{
white-space:nowrap;
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum';
text-align:right;
margin-left:auto;
}
/* Total row · highlighted */
html body .doc-preview table tr.total-row,
html body .doc-preview table tr:last-child{
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
}
/* ─────────────────────────────────────────────────────────
3 · MOBILE BOTTOM-NAV OVERLAY PROTECTION
Stronger bottom padding · ensures all critical content
(Trust Rules pill · totals · sticky/inline actions)
has clearance from the fixed mob-tab
───────────────────────────────────────────────────────── */
@media (max-width:768px){
/* Bump default page bottom padding so the LAST card never sits under the nav */
html body .app{
padding-bottom:calc(140px + env(safe-area-inset-bottom)) !important;
}
/* Screens with .inline-actions footer get even more bottom room */
html body .app:has(.inline-actions){
padding-bottom:calc(110px + env(safe-area-inset-bottom)) !important;
}
/* Add a baseline margin-bottom to .trust-block so the Trust pill never touches nav */
html body .trust-block{
margin-bottom:14px !important;
}
/* Det-hero compression on mobile · slightly tighter */
html body .det-hero{
padding:18px 14px 16px !important;
}
html body .det-hero .det-h1{
font-size:20px !important;
line-height:1.15 !important;
}
html body .det-hero .det-sub{
font-size:12.5px !important;
line-height:1.5 !important;
}
html body .det-hero .intel-row{
margin-top:14px !important;
gap:1px !important;
}
/* Intel-strip tiles compression so cards fit cleanly above nav */
html body .intel-strip > .it{
padding:11px 12px !important;
}
html body .intel-strip > .it .v{
font-size:20px !important;
line-height:1.1 !important;
}
html body .intel-strip > .it .d{
font-size:10.5px !important;
line-height:1.4 !important;
}
}
/* ─────────────────────────────────────────────────────────
4 · MOB-TAB · subtle scrim so document content peeks through
Backdrop-blur fallback to opaque on browsers without support
───────────────────────────────────────────────────────── */
@media (max-width:768px){
html body .mob-tab{
background:color-mix(in srgb, var(--surface) 92%, transparent);
-webkit-backdrop-filter:saturate(180%) blur(12px);
backdrop-filter:saturate(180%) blur(12px);
}
@supports not (backdrop-filter: blur(12px)){
html body .mob-tab{
background:var(--surface);
}
}
}
/* ============================================================
BATCH 05 r2 · AUDIT TIMELINE MOBILE POLISH
Fixes the "empty colored bar" caused by 34px icon container
stretching to 100% under the Batch 03 r3 grid-stack catch-all.
============================================================ */
@media (max-width:768px){
/* Override catch-all · keep audit-row as a 3-column grid on mobile */
html body .frow.audit-row{
display:grid !important;
grid-template-columns:36px 1fr auto !important;
grid-template-areas:
"icon meta arrow"
"icon body body"
"chip chip foot" !important;
flex-direction:row !important;
gap:6px 11px !important;
align-items:start !important;
padding:13px 14px !important;
}
/* 1 · icon container · stays a 34px tile · spans 2 rows · NO empty bar */
html body .frow.audit-row > *:nth-child(1){
grid-area:icon !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
max-width:34px !important;
flex:none !important;
}
/* 2 · time stamp · top right · compact inline */
html body .frow.audit-row > *:nth-child(2){
grid-area:meta !important;
width:auto !important;
text-align:right !important;
font-size:10.5px !important;
color:var(--hint);
align-self:start;
}
html body .frow.audit-row > *:nth-child(2) b{font-size:12px}
html body .frow.audit-row > *:nth-child(2) div{display:inline;margin-left:6px}
/* 3 · title + summary body · row 2 · wraps cleanly */
html body .frow.audit-row > *:nth-child(3){
grid-area:body !important;
width:auto !important;
min-width:0 !important;
}
html body .frow.audit-row > *:nth-child(3) b{font-size:12.5px;line-height:1.35}
/* 4 · status chip · bottom left */
html body .frow.audit-row > *:nth-child(4){
grid-area:chip !important;
width:auto !important;
justify-self:start !important;
align-self:center;
}
/* 5 · actor + channel info · bottom right · compact */
html body .frow.audit-row > *:nth-child(5){
grid-area:foot !important;
width:auto !important;
text-align:right !important;
font-size:10.5px !important;
color:var(--muted);
align-self:center;
}
html body .frow.audit-row > *:nth-child(5) b{font-size:11px}
/* 6 · arrow button · top right inline with time */
html body .frow.audit-row > *:nth-child(6){
grid-area:arrow !important;
width:auto !important;
min-width:auto !important;
flex:none !important;
align-self:start;
}
}
/* ============================================================
BATCH 06 v1.0 · MARKETING SHELL (screen-040 only)
Light marketing-style shell for customer-facing intake preview
============================================================ */
.marketing-body{
background:var(--surface);
min-height:100vh;
margin:0;
font-family:var(--font-sans);
color:var(--ink);
}
.marketing-shell{
display:flex;
flex-direction:column;
min-height:100vh;
max-width:100%;
}
.marketing-topbar{
display:flex;
align-items:center;
gap:14px;
padding:14px 32px;
background:var(--card);
border-bottom:0.5px solid var(--hairline);
position:sticky;
top:0;
z-index:10;
}
.marketing-topbar .back-master{
display:inline-flex;
align-items:center;
gap:6px;
font-size:11px;
font-family:var(--font-mono);
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
text-decoration:none;
font-weight:600;
}
.marketing-topbar .back-master:hover{color:var(--ink)}
.marketing-topbar .back-master svg{width:14px;height:14px;stroke-width:2}
.marketing-main{
flex:1;
padding:36px 32px 64px;
max-width:920px;
margin:0 auto;
width:100%;
box-sizing:border-box;
}
.marketing-foot{
display:flex;
align-items:center;
gap:14px;
padding:18px 32px;
background:var(--card-sunk);
border-top:0.5px solid var(--hairline);
font-family:var(--font-mono);
font-size:10.5px;
letter-spacing:0.06em;
color:var(--hint);
text-transform:uppercase;
}
@media (max-width:768px){
html body .marketing-topbar{padding:13px 14px;flex-wrap:wrap;gap:10px}
html body .marketing-topbar .back-master{font-size:10.5px}
html body .marketing-main{padding:24px 14px 64px}
html body .marketing-foot{padding:14px;flex-direction:column;align-items:flex-start;gap:6px;font-size:9.5px}
html body .marketing-foot > *{margin-left:0 !important}
}
/* ============================================================
BATCH 06 v1.0-r2 · CLEANUP LAYER
1. Public-form typography (screen 040 m-step / m-trust)
2. Mobile topbar action collision (all app-shell screens)
3. Mobile hero/ribbon spacing
4. Tokenized photo-capture + inspection-thumb tiles
5. Solid danger chip + inverse dot
============================================================ */
/* ─── 1. Public-form section heads + trust tiles (screen 040) ─── */
.m-step-h{
display:flex;
align-items:flex-start;
gap:14px;
margin-top:28px;
margin-bottom:14px;
padding-bottom:11px;
border-bottom:0.5px solid var(--hairline);
}
.m-step-h:first-of-type{margin-top:0}
.m-step-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:9999px;
background:var(--brand-50);
color:var(--brand);
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:0.02em;
flex:none;
}
.m-step-t{
display:flex;
flex-direction:column;
gap:3px;
flex:1;
min-width:0;
}
.m-step-t b{
display:block;
font-size:16px;
font-weight:600;
letter-spacing:-0.005em;
line-height:1.25;
color:var(--ink);
}
.m-step-t span{
display:block;
font-size:12px;
font-weight:400;
color:var(--muted);
line-height:1.45;
}
/* Trust tiles · screen 040 footer */
.m-trust-it{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:14px;
background:var(--card);
border-radius:14px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.m-trust-ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:12px;
flex:none;
margin-bottom:2px;
}
.m-trust-it b{
display:block;
font-size:13px;
font-weight:600;
letter-spacing:-0.005em;
line-height:1.3;
color:var(--ink);
}
.m-trust-it span{
display:block;
font-size:11.5px;
color:var(--muted);
line-height:1.5;
}
/* ─── 2. Mobile topbar action collision fix ───
On mobile, the topbar's three columns (back-master · crumb-bar · top-actions)
collide because crumbs + crumb-nav + action buttons compete for narrow space.
Stack them cleanly. */
@media (max-width:768px){
html body .topbar{
grid-template-columns:1fr !important;
grid-template-rows:auto auto !important;
grid-template-areas:
"back actions"
"crumb crumb" !important;
align-items:center !important;
row-gap:8px !important;
padding:11px 14px 10px !important;
}
html body .topbar .back-master{
grid-area:back !important;
width:auto !important;
min-width:auto !important;
justify-self:start !important;
}
html body .topbar .top-actions{
grid-area:actions !important;
width:auto !important;
justify-self:end !important;
gap:6px !important;
flex-wrap:nowrap !important;
}
html body .topbar .top-actions .btn.sm{
padding:5px 9px !important;
font-size:11px !important;
white-space:nowrap !important;
}
html body .topbar .top-actions .iconbtn{
width:30px !important;
height:30px !important;
}
html body .topbar .crumb-bar{
grid-area:crumb !important;
width:auto !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
align-items:flex-start !important;
min-width:0 !important;
}
html body .topbar .crumbs{
width:100% !important;
font-size:10.5px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
html body .topbar .crumb-nav{
width:100% !important;
display:flex !important;
gap:6px !important;
flex-wrap:wrap !important;
}
html body .topbar .crumb-nav .crumb-pill{
font-size:10.5px !important;
padding:4px 8px !important;
}
}
/* ─── 3. Mobile hero / anchor ribbon clearance ─── */
@media (max-width:768px){
html body .page-hero-anchor{
margin-top:0 !important;
margin-bottom:0 !important;
}
html body .page-hero-anchor .ribbon{
font-size:9px !important;
padding:5px 12px !important;
letter-spacing:0.06em !important;
line-height:1.35 !important;
white-space:normal !important;
text-align:center !important;
}
html body .page-hero-anchor + .page-hero,
html body .page-hero-anchor + .det-hero{
margin-top:0 !important;
padding-top:18px !important;
}
html body .page-hero{
padding:18px 16px !important;
}
html body .det-hero{
padding:18px 16px !important;
}
html body .page-hero-title,
html body .det-h1{
font-size:18px !important;
line-height:1.25 !important;
margin:8px 0 !important;
}
html body .page-hero-title i,
html body .det-h1 i{
display:block !important;
font-size:13px !important;
font-weight:500 !important;
margin-top:5px !important;
color:var(--muted) !important;
}
html body .page-hero-desc,
html body .det-sub{
font-size:12px !important;
line-height:1.55 !important;
}
html body .page-hero-eyebrow{
font-size:10px !important;
line-height:1.4 !important;
padding-bottom:8px !important;
}
}
/* ─── 4. Tokenized photo-capture tiles (screen 043) ─── */
.cap-tile-base{
aspect-ratio:1.1;
border-radius:14px;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-end;
padding:10px;
color:var(--surface);
}
.cap-tile-dark{background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 100%)}
.cap-tile-brand{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dim) 100%)}
.cap-tile-warm{background:linear-gradient(135deg,var(--c-tile-warm-1) 0%,var(--c-tile-warm-2) 100%)}
.cap-tile-engine{background:linear-gradient(135deg,var(--c-tile-engine-1) 0%,var(--c-tile-engine-2) 100%)}
.cap-tile-amber{background:linear-gradient(135deg,var(--c-tile-amber-1) 0%,var(--c-tile-amber-2) 100%)}
.cap-tile-label{
font-family:var(--font-mono);
font-size:10px;
letter-spacing:0.08em;
font-weight:600;
color:var(--surface);
}
.cap-tile-check{
position:absolute;
top:8px;
right:8px;
width:18px;
height:18px;
border-radius:9999px;
background:var(--success);
color:var(--surface);
display:flex;
align-items:center;
justify-content:center;
}
/* Small mini-camera tile · screen 043 damage thumbs */
.cap-mini{
aspect-ratio:1;
background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 100%);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:var(--surface);
}
/* ─── 5. Inspection mini photo thumbnails (screen 042) ─── */
.inspect-thumb{
aspect-ratio:1;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:8px;
color:var(--surface);
letter-spacing:0.06em;
font-weight:600;
}
.inspect-thumb-dark{background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 100%)}
.inspect-thumb-brand{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dim) 100%)}
.inspect-thumb-gray{background:linear-gradient(135deg,var(--c-tile-engine-2) 0%,var(--c-tile-engine-3) 100%)}
/* ─── 6. Solid danger chip + inverse dot (screen 048) ─── */
.chip.danger-solid{
background:var(--danger);
color:var(--surface);
}
.chip.danger-solid .dot{background:var(--surface) !important}
.dot.inverse{background:var(--surface) !important}
/* ─── Batch 06 r2 · additional mobile topbar tightening ───
Hide search/bell iconbtns (not critical for review) and reduce
crumbs to only the current page name on narrow widths. */
@media (max-width:768px){
/* Hide search + bell on mobile · keep the 2 action buttons */
html body .topbar .top-actions > .iconbtn.ghost{
display:none !important;
}
/* Truncate long action button text · ellipsis allowed */
html body .topbar .top-actions .btn.sm{
max-width:160px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* Simplify breadcrumbs on mobile · show only current page (the ) */
html body .topbar .crumbs > a,
html body .topbar .crumbs > .sep{
display:none !important;
}
html body .topbar .crumbs > b{
font-size:11px !important;
font-weight:600 !important;
color:var(--ink) !important;
letter-spacing:-0.005em !important;
}
}
/* ============================================================
BATCH 08 v1.0 · ANALYTICS / REPORTS CORE LAYER
Premium 2026 dealership intelligence cockpit
8 report screens · all HTML/CSS charts · zero JS dependencies
Prior layers 1-6034 from Batch 07 r2 LOCKED · untouched
============================================================ */
/* ─── Report hero (premium executive cockpit) ───────────── */
.rpt-hero{
position:relative;
background:linear-gradient(135deg,var(--c-tile-night-1) 0%,var(--c-tile-night-2) 50%,var(--brand) 100%);
color:var(--surface);
border-radius:16px;
padding:22px 26px 20px;
margin-bottom:16px;
overflow:hidden;
box-shadow:0 1px 2px rgba(15,12,28,0.04),0 8px 28px rgba(31,0,167,0.10);
}
.rpt-hero::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 88% 18%,rgba(255,255,255,0.10) 0%,transparent 36%),
radial-gradient(circle at 12% 92%,rgba(106,85,224,0.18) 0%,transparent 42%);
pointer-events:none;
}
.rpt-hero > *{position:relative;z-index:1}
.rpt-hero-eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
font-family:var(--font-mono);
font-size:10px;
font-weight:600;
letter-spacing:0.1em;
text-transform:uppercase;
color:rgba(255,255,255,0.72);
margin-bottom:10px;
}
.rpt-hero-eyebrow .dot{
width:6px;
height:6px;
border-radius:9999px;
background:var(--c-violet-bright);
box-shadow:0 0 8px rgba(125,108,255,0.7);
}
.rpt-hero h1{
font-size:24px;
font-weight:600;
letter-spacing:-0.015em;
margin:0 0 4px;
line-height:1.2;
color:var(--surface);
}
.rpt-hero h1 i{font-style:normal;font-weight:500;color:rgba(255,255,255,0.78);font-size:16px;letter-spacing:-0.01em}
.rpt-hero-desc{
font-size:13px;
line-height:1.55;
color:rgba(255,255,255,0.78);
margin:6px 0 14px;
max-width:680px;
}
.rpt-hero-desc b{color:var(--surface);font-weight:600}
.rpt-hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rpt-hero-chips .chip{
background:rgba(255,255,255,0.08);
color:var(--surface);
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.16);
font-size:11px;
padding:4px 10px;
}
.rpt-hero-chips .chip.brand{background:rgba(255,255,255,0.16);color:var(--surface)}
.rpt-hero-chips .chip .dot.brand{background:var(--c-violet-bright)}
.rpt-hero-chips .chip .dot.ok{background:var(--c-success-tint)}
.rpt-hero-chips .chip .dot.warn{background:var(--c-amber-bright)}
/* Report hero · KPI strip embedded in hero footer */
.rpt-kpi-strip{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1px;
margin-top:18px;
background:rgba(255,255,255,0.08);
border-radius:14px;
padding:1px;
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.10);
overflow:hidden;
}
.rpt-kpi{
padding:13px 15px;
background:rgba(10,8,32,0.4);
display:flex;
flex-direction:column;
gap:5px;
}
.rpt-kpi .l{
display:flex;
align-items:center;
gap:6px;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:rgba(255,255,255,0.6);
}
.rpt-kpi .l::before{
content:'';
width:5px;
height:5px;
border-radius:9999px;
background:var(--c-violet-bright);
}
.rpt-kpi.ok .l::before{background:var(--c-success-tint)}
.rpt-kpi.warn .l::before{background:var(--c-amber-bright)}
.rpt-kpi .v{
font-family:var(--font-sans);
font-size:22px;
font-weight:600;
letter-spacing:-0.015em;
color:var(--surface);
line-height:1.1;
}
.rpt-kpi .v small{font-size:11px;color:rgba(255,255,255,0.6);font-weight:500;margin-left:2px}
.rpt-kpi .d{
font-size:10.5px;
color:rgba(255,255,255,0.62);
line-height:1.4;
}
.rpt-kpi .d.up{color:var(--c-success-tint)}
.rpt-kpi .d.down{color:var(--c-danger-tint)}
/* ─── Filter bar (premium · always-light · sits below hero) ── */
.rpt-filter-bar{
background:var(--surface);
border-radius:14px;
padding:11px 14px;
margin-bottom:16px;
box-shadow:inset 0 0 0 0.5px var(--hairline),0 1px 2px rgba(15,12,28,0.02);
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.rfb-l{
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--hint);
padding-right:4px;
border-right:0.5px solid var(--hairline);
margin-right:4px;
}
.rfb-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 10px 5px 9px;
border-radius:9999px;
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
font-size:11.5px;
font-weight:500;
color:var(--ink-2);
letter-spacing:-0.005em;
cursor:pointer;
}
.rfb-pill:hover{background:var(--brand-50);color:var(--brand)}
.rfb-pill.active{background:var(--brand-50);color:var(--brand);box-shadow:inset 0 0 0 0.5px var(--brand-soft);font-weight:600}
.rfb-pill svg{width:11px;height:11px;stroke-width:2;color:var(--hint);flex:none}
.rfb-pill.active svg{color:var(--brand)}
.rfb-pill .pill-l{
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
margin-right:2px;
}
.rfb-pill.active .pill-l{color:var(--brand)}
.rfb-spacer{flex:1}
.rfb-action{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 11px;
border-radius:9999px;
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--hairline);
font-size:11px;
font-weight:600;
color:var(--ink-2);
}
.rfb-action:hover{background:var(--card-sunk);color:var(--ink)}
.rfb-action svg{width:12px;height:12px;stroke-width:1.7}
.rfb-action.brand{background:var(--brand);color:var(--surface);box-shadow:none}
.rfb-action.brand:hover{background:var(--brand-dim);color:var(--surface)}
/* ─── Source label / read-only badge (used everywhere) ─── */
.src-label{
display:inline-flex;
align-items:center;
gap:4px;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--hint);
padding:2px 7px;
background:var(--card-sunk);
border-radius:9999px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.src-label svg{width:9px;height:9px;stroke-width:2}
.src-label.ro{color:var(--brand-dim);background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-soft)}
.src-label.est{color:var(--warning-dim);background:var(--warning-50);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
/* ─── Analytics layout primitives ─────────────────────────── */
.rpt-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.rpt-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.rpt-row-37{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:14px}
.rpt-row-46{display:grid;grid-template-columns:0.7fr 1fr;gap:14px;margin-bottom:14px}
.rpt-card{
background:var(--card);
border-radius:14px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
overflow:hidden;
display:flex;
flex-direction:column;
}
.rpt-card-h{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-bottom:0.5px solid var(--hairline);
}
.rpt-card-h .ttl{display:flex;align-items:center;gap:10px;min-width:0}
.rpt-card-h .ttl .ic{
width:28px;
height:28px;
border-radius:12px;
background:var(--brand-50);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.rpt-card-h .ttl .ic svg{width:14px;height:14px;stroke-width:1.7}
.rpt-card-h .ttl b{font-size:13.5px;font-weight:600;letter-spacing:-0.005em;line-height:1.25}
.rpt-card-h .ttl small{display:block;font-size:11px;color:var(--muted);font-weight:400;line-height:1.4;margin-top:1px}
.rpt-card-h .meta{display:flex;align-items:center;gap:7px;flex:none}
.rpt-card-b{padding:14px 16px;flex:1}
.rpt-card-b.pad-0{padding:0}
.rpt-card-b.dense{padding:12px 14px}
.rpt-card-f{
padding:11px 16px;
border-top:0.5px solid var(--hairline);
background:var(--card-sunk);
font-size:11px;
color:var(--muted);
line-height:1.5;
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
}
.rpt-card-f svg{width:11px;height:11px;color:var(--hint);stroke-width:2;flex:none}
/* ─── HTML/CSS Bar chart (horizontal · stacked or single) ── */
.bar-row{
display:grid;
grid-template-columns:140px 1fr 60px;
align-items:center;
gap:11px;
padding:7px 0;
font-size:12px;
}
.bar-row + .bar-row{border-top:0.5px solid var(--hairline)}
.bar-row .bar-l{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bar-l small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
.bar-track{
position:relative;
height:18px;
background:var(--card-sunk);
border-radius:9999px;
overflow:hidden;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.bar-fill{
position:absolute;
top:0;
bottom:0;
left:0;
background:linear-gradient(90deg,var(--brand-tint) 0%,var(--brand) 100%);
border-radius:9999px;
display:flex;
align-items:center;
justify-content:flex-end;
padding-right:7px;
color:var(--surface);
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.04em;
}
.bar-fill.warn{background:linear-gradient(90deg,var(--c-warning-bright) 0%,var(--warning) 100%)}
.bar-fill.danger{background:linear-gradient(90deg,var(--c-danger-bright) 0%,var(--danger) 100%)}
.bar-fill.success{background:linear-gradient(90deg,var(--c-success-bright) 0%,var(--success) 100%)}
.bar-fill.muted{background:linear-gradient(90deg,var(--c-muted-tint) 0%,var(--c-muted-deep) 100%)}
.bar-fill.gradient2{background:linear-gradient(90deg,var(--c-violet-bright) 0%,var(--brand) 100%)}
.bar-row .bar-v{
text-align:right;
font-family:var(--font-mono);
font-size:12px;
font-weight:600;
color:var(--ink);
letter-spacing:0.02em;
}
.bar-row .bar-v small{font-size:9.5px;color:var(--hint);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;display:block;margin-top:1px}
/* Stacked horizontal bar (multi-segment) */
.bar-stacked{
position:relative;
height:24px;
background:var(--card-sunk);
border-radius:12px;
overflow:hidden;
display:flex;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.bar-seg{
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
color:var(--surface);
letter-spacing:0.04em;
position:relative;
min-width:0;
}
.bar-seg + .bar-seg{box-shadow:inset 1px 0 0 rgba(255,255,255,0.15)}
.bar-seg.s-brand{background:var(--brand)}
.bar-seg.s-brand-tint{background:var(--brand-tint)}
.bar-seg.s-success{background:var(--success)}
.bar-seg.s-warn{background:var(--warning)}
.bar-seg.s-danger{background:var(--danger)}
.bar-seg.s-muted{background:var(--c-muted-tint);color:var(--surface)}
/* Stacked-bar legend */
.bar-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;font-size:11px;color:var(--muted)}
.bar-legend .lg{display:inline-flex;align-items:center;gap:5px}
.bar-legend .lg .sw{width:9px;height:9px;border-radius:var(--r-full);flex:none}
.bar-legend .lg .sw.s-brand{background:var(--brand)}
.bar-legend .lg .sw.s-brand-tint{background:var(--brand-tint)}
.bar-legend .lg .sw.s-success{background:var(--success)}
.bar-legend .lg .sw.s-warn{background:var(--warning)}
.bar-legend .lg .sw.s-danger{background:var(--danger)}
.bar-legend .lg .sw.s-muted{background:var(--c-muted-tint)}
.bar-legend .lg b{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:10.5px;margin-left:2px}
/* ─── HTML/CSS Funnel (vertical · all 11 pipeline stages) ─── */
.funnel-wrap{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.funnel-stage{
display:grid;
grid-template-columns:30px 1fr;
align-items:center;
gap:12px;
}
.funnel-stage .fn-num{
width:28px;
height:28px;
border-radius:9999px;
background:var(--brand-50);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
.funnel-stage.lost .fn-num{background:var(--danger-50);color:var(--danger-dim);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.funnel-stage.won .fn-num{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.funnel-bar{
height:38px;
background:linear-gradient(90deg,var(--brand-tint) 0%,var(--brand) 100%);
border-radius:12px;
display:grid;
grid-template-columns:1fr auto auto auto;
align-items:center;
gap:14px;
padding:0 14px 0 16px;
color:var(--surface);
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.10);
position:relative;
}
.funnel-stage.lost .funnel-bar{background:linear-gradient(90deg,var(--c-muted-tint) 0%,var(--c-muted-deep) 100%)}
.funnel-stage.won .funnel-bar{background:linear-gradient(90deg,var(--c-success-bright) 0%,var(--success) 100%)}
.funnel-bar .stg-l{font-size:13px;font-weight:600;letter-spacing:-0.005em;line-height:1.2}
.funnel-bar .stg-c{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--surface);letter-spacing:0.02em;border-left:0.5px solid rgba(255,255,255,0.22);padding-left:12px}
.funnel-bar .stg-c small{font-size:9.5px;color:rgba(255,255,255,0.75);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;display:block;margin-top:1px}
.funnel-bar .stg-v{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.85);border-left:0.5px solid rgba(255,255,255,0.22);padding-left:12px}
.funnel-bar .stg-d{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,0.78);border-left:0.5px solid rgba(255,255,255,0.22);padding-left:12px;letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
/* Stage drop-off chevron between stages */
.funnel-drop{
display:grid;
grid-template-columns:30px 1fr;
align-items:center;
gap:12px;
}
.funnel-drop .fn-num{visibility:hidden}
.funnel-drop .drop-meta{
display:inline-flex;
align-items:center;
gap:7px;
padding:4px 11px;
border-radius:9999px;
background:var(--card-sunk);
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--hint);
margin-left:0;
width:fit-content;
}
.funnel-drop .drop-meta.warn{background:var(--warning-50);color:var(--warning-dim)}
.funnel-drop .drop-meta.danger{background:var(--danger-50);color:var(--danger-dim)}
.funnel-drop .drop-meta svg{width:9px;height:9px;stroke-width:2.5}
/* ─── HTML/CSS Donut/Ring chart (CSS conic-gradient) ─── */
.ring-wrap{
width:200px;
height:200px;
position:relative;
margin:0 auto;
}
.ring{
width:200px;
height:200px;
border-radius:9999px;
background:conic-gradient(var(--brand) 0% 32%,var(--brand-tint) 32% 56%,var(--success) 56% 72%,var(--warning) 72% 86%,var(--danger) 86% 100%);
mask:radial-gradient(circle at center,transparent 56%,var(--c-black) 56.5%);
-webkit-mask:radial-gradient(circle at center,transparent 56%,var(--c-black) 56.5%);
}
.ring-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
.ring-center b{display:block;font-size:30px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);line-height:1.1}
.ring-center b small{font-size:14px;color:var(--muted);font-weight:500;margin-left:2px}
.ring-center span{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--hint);margin-top:5px}
/* Ring legend (next to ring) */
.ring-legend{display:flex;flex-direction:column;gap:7px;font-size:12px}
.ring-legend .lg{display:grid;grid-template-columns:11px 1fr auto auto;gap:9px;align-items:center;padding:5px 0;border-bottom:0.5px solid var(--hairline)}
.ring-legend .lg:last-child{border-bottom:0}
.ring-legend .lg .sw{width:11px;height:11px;border-radius:var(--r-full)}
.ring-legend .lg .sw.s-brand{background:var(--brand)}
.ring-legend .lg .sw.s-brand-tint{background:var(--brand-tint)}
.ring-legend .lg .sw.s-success{background:var(--success)}
.ring-legend .lg .sw.s-warn{background:var(--warning)}
.ring-legend .lg .sw.s-danger{background:var(--danger)}
.ring-legend .lg .sw.s-muted{background:var(--c-muted-tint)}
.ring-legend .lg .lg-l b{font-size:12px;font-weight:500;letter-spacing:-0.005em;color:var(--ink)}
.ring-legend .lg .lg-l small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.ring-legend .lg .lg-v{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);text-align:right;letter-spacing:0.02em}
.ring-legend .lg .lg-pct{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:0.04em;text-align:right;min-width:36px}
/* Smaller compact donut (for source comparison) */
.ring-mini{width:80px;height:80px;position:relative;flex:none}
.ring-mini .ring{width:80px;height:80px}
.ring-mini .ring-center{top:50%;left:50%}
.ring-mini .ring-center b{font-size:16px}
.ring-mini .ring-center span{font-size:8px;margin-top:1px}
/* ─── Sparkline (vertical bars · trend over time) ─── */
.spark{
display:flex;
align-items:flex-end;
gap:2px;
height:36px;
padding:2px 0;
}
.spark .sb{
flex:1;
background:linear-gradient(180deg,var(--brand-tint) 0%,var(--brand) 100%);
border-radius:var(--r-full);
min-height:3px;
transition:opacity 0.1s ease;
}
.spark .sb.last{background:linear-gradient(180deg,var(--c-success-bright) 0%,var(--success) 100%)}
.spark .sb.dim{background:linear-gradient(180deg,var(--c-grey-light) 0%,var(--c-muted-tint) 100%)}
.spark.warn .sb{background:linear-gradient(180deg,var(--c-warning-bright) 0%,var(--warning) 100%)}
.spark.danger .sb{background:linear-gradient(180deg,var(--c-danger-bright) 0%,var(--danger) 100%)}
.spark-row{
display:grid;
grid-template-columns:140px 1fr 90px;
align-items:center;
gap:11px;
padding:9px 0;
font-size:12px;
}
.spark-row + .spark-row{border-top:0.5px solid var(--hairline)}
.spark-row .sr-l{font-weight:500;color:var(--ink)}
.spark-row .sr-l small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
.spark-row .sr-v{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink);text-align:right;letter-spacing:0.02em}
.spark-row .sr-v small{display:block;font-size:9.5px;color:var(--success-dim);font-weight:600;letter-spacing:0.04em;margin-top:1px}
.spark-row .sr-v small.down{color:var(--danger-dim)}
/* ─── Insight callout cards (Best · Watch · Risk) ─── */
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px}
.insight-card{
background:var(--card);
padding:14px 15px;
border-radius:14px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;
flex-direction:column;
gap:8px;
position:relative;
overflow:hidden;
}
.insight-card::before{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
width:3px;
background:var(--brand);
}
.insight-card.warn::before{background:var(--warning)}
.insight-card.risk::before{background:var(--danger)}
.insight-card.success::before{background:var(--success)}
.insight-card.success{background:linear-gradient(180deg,var(--success-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.insight-card.warn{background:linear-gradient(180deg,var(--warning-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.insight-card.risk{background:linear-gradient(180deg,var(--danger-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.insight-card .ins-h{
display:flex;
align-items:center;
gap:8px;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--brand-dim);
}
.insight-card.warn .ins-h{color:var(--warning-dim)}
.insight-card.risk .ins-h{color:var(--danger-dim)}
.insight-card.success .ins-h{color:var(--success-dim)}
.insight-card .ins-h .ic-mini{
width:18px;
height:18px;
border-radius:var(--r-sm);
background:var(--brand-50);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.insight-card.warn .ins-h .ic-mini{background:var(--warning-50);color:var(--warning-dim)}
.insight-card.risk .ins-h .ic-mini{background:var(--danger-50);color:var(--danger-dim)}
.insight-card.success .ins-h .ic-mini{background:var(--success-50);color:var(--success-dim)}
.insight-card .ins-h .ic-mini svg{width:11px;height:11px;stroke-width:2}
.insight-card .ins-v{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);line-height:1.15}
.insight-card .ins-v small{font-size:11.5px;color:var(--muted);font-weight:500;display:block;margin-top:2px}
.insight-card .ins-d{font-size:11.5px;color:var(--ink-2);line-height:1.5}
/* ─── Leaderboard row (salesperson / owner cards) ─── */
.lb-row{
display:grid;
grid-template-columns:32px 30px 1fr 1fr 120px 70px;
gap:12px;
align-items:center;
padding:11px 14px;
font-size:12.5px;
}
.lb-row + .lb-row{border-top:0.5px solid var(--hairline)}
.lb-row .lb-rank{
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
color:var(--hint);
letter-spacing:0.06em;
}
.lb-row .lb-rank.top{color:var(--brand)}
.lb-row .lb-av{
width:30px;
height:30px;
border-radius:9999px;
background:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);
color:var(--surface);
font-family:var(--font-mono);
font-size:10.5px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.lb-row .lb-av.b{background:linear-gradient(135deg,var(--c-violet-bright) 0%,var(--c-violet-deep) 100%)}
.lb-row .lb-av.c{background:linear-gradient(135deg,var(--c-success-bright) 0%,var(--c-success-deep) 100%)}
.lb-row .lb-av.d{background:linear-gradient(135deg,var(--c-warning-bright) 0%,var(--c-amber-deep) 100%)}
.lb-row .lb-l b{display:block;font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink);line-height:1.25}
.lb-row .lb-l span{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:1px}
.lb-row .lb-bar{position:relative;height:14px;background:var(--card-sunk);border-radius:9999px;overflow:hidden;box-shadow:inset 0 0 0 0.5px var(--hairline)}
.lb-row .lb-bar .lb-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--brand-tint) 0%,var(--brand) 100%);border-radius:9999px}
.lb-row .lb-v{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);text-align:right;letter-spacing:0.02em}
.lb-row .lb-v small{display:block;font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin-top:1px}
.lb-row .lb-trend{
display:inline-flex;
align-items:center;
gap:3px;
font-family:var(--font-mono);
font-size:10.5px;
font-weight:700;
color:var(--success-dim);
letter-spacing:0.04em;
justify-self:end;
}
.lb-row .lb-trend.down{color:var(--danger-dim)}
.lb-row .lb-trend svg{width:11px;height:11px;stroke-width:2.5}
/* ─── Table-style drilldown (with mobile-card stacking) ─── */
.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dt thead{background:var(--card-sunk)}
.dt thead th{
text-align:left;
padding:10px 14px;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
border-bottom:0.5px solid var(--hairline);
white-space:nowrap;
}
.dt thead th.num{text-align:right}
.dt tbody td{
padding:10px 14px;
border-bottom:0.5px solid var(--hairline);
font-size:12px;
color:var(--ink-2);
vertical-align:middle;
}
.dt tbody td.num{text-align:right;font-family:var(--font-mono);font-weight:600;color:var(--ink);letter-spacing:0.02em}
.dt tbody td .meta-b{display:block;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.dt tbody td .meta-s{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:1px}
.dt tbody tr:hover{background:var(--card-sunk)}
.dt tbody tr.warn-row td{background:var(--warning-50)}
.dt tbody tr.danger-row td{background:var(--danger-50)}
.dt tbody tr.success-row td{background:var(--success-50)}
/* Mobile table-to-card stacking */
@media (max-width:768px){
html body .dt thead{display:none}
html body .dt tbody tr{
display:block;
background:var(--card);
border-radius:12px;
padding:11px 13px;
margin-bottom:9px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
border-bottom:0;
}
html body .dt tbody td{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 0;
border-bottom:0.5px solid var(--hairline);
font-size:12px;
text-align:left !important;
}
html body .dt tbody td:last-child{border-bottom:0}
html body .dt tbody td::before{
content:attr(data-label);
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
margin-right:12px;
flex:none;
}
html body .dt tbody td.num{font-family:var(--font-mono);text-align:right !important}
html body .dt tbody tr.warn-row,
html body .dt tbody tr.danger-row,
html body .dt tbody tr.success-row{box-shadow:inset 0 0 0 0.5px var(--hairline)}
html body .dt tbody tr.warn-row td:first-child::after{content:'⚠';margin-left:auto;color:var(--warning-dim)}
}
/* ─── Comparison rail (vs prev period) ─── */
.cmp-rail{
display:flex;
align-items:center;
gap:9px;
padding:11px 14px;
background:var(--card-sunk);
border-radius:12px;
font-size:11.5px;
color:var(--ink-2);
line-height:1.5;
margin-bottom:14px;
flex-wrap:wrap;
}
.cmp-rail svg{width:13px;height:13px;color:var(--hint);stroke-width:2;flex:none}
.cmp-rail b{color:var(--ink);font-weight:600}
.cmp-rail .cmp-chg{
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:0.04em;
padding:2px 8px;
border-radius:9999px;
}
.cmp-rail .cmp-chg.up{color:var(--success-dim);background:var(--success-50)}
.cmp-rail .cmp-chg.down{color:var(--danger-dim);background:var(--danger-50)}
.cmp-rail .cmp-chg.flat{color:var(--hint);background:var(--card-sunk);box-shadow:inset 0 0 0 0.5px var(--hairline)}
/* ─── Margin waterfall (vertical step blocks) ─── */
.waterfall{display:flex;align-items:flex-end;gap:14px;padding:18px 14px 6px;height:240px;overflow-x:auto}
.wf-step{
flex:1;
min-width:80px;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}
.wf-bar-wrap{
width:100%;
display:flex;
align-items:flex-end;
flex:1;
}
.wf-bar{
width:100%;
border-radius:var(--r-sm) var(--r-sm) 0 0;
position:relative;
min-height:6px;
}
.wf-bar.start{background:linear-gradient(180deg,var(--brand-tint) 0%,var(--brand) 100%)}
.wf-bar.minus{background:linear-gradient(180deg,var(--c-warning-bright) 0%,var(--warning) 100%);border-radius:0;margin-bottom:0}
.wf-bar.plus{background:linear-gradient(180deg,var(--c-success-bright) 0%,var(--success) 100%);border-radius:0}
.wf-bar.end{background:linear-gradient(180deg,var(--c-success-bright) 0%,var(--success) 100%)}
.wf-bar.end.risk{background:linear-gradient(180deg,var(--c-danger-bright) 0%,var(--danger) 100%)}
.wf-bar .wf-v{
position:absolute;
top:-22px;
left:50%;
transform:translateX(-50%);
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
color:var(--ink);
letter-spacing:0.02em;
white-space:nowrap;
}
.wf-bar .wf-v.minus{color:var(--warning-dim)}
.wf-bar .wf-v.plus{color:var(--success-dim)}
.wf-step .wf-l{
text-align:center;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--hint);
line-height:1.3;
}
.wf-step .wf-l small{display:block;font-family:var(--font-sans);font-size:10px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;margin-top:3px}
/* Connector between waterfall steps */
.wf-step::after{
content:'';
position:absolute;
/* not used · spacing between bars handled by gap */
}
/* ─── Source / Reason matrix (small grid · branch x reason) ─── */
.matrix-row{
display:grid;
grid-template-columns:140px repeat(5,1fr);
gap:1px;
background:var(--hairline);
}
.matrix-row + .matrix-row{margin-top:1px}
.matrix-cell{
background:var(--card);
padding:9px 11px;
font-size:11.5px;
display:flex;
flex-direction:column;
gap:1px;
}
.matrix-cell.head{
background:var(--card-sunk);
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--hint);
justify-content:center;
}
.matrix-cell.label{font-weight:600;color:var(--ink);justify-content:center;font-size:12px}
.matrix-cell .mv{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0.02em}
.matrix-cell .mp{font-family:var(--font-mono);font-size:9.5px;color:var(--hint);font-weight:600;letter-spacing:0.04em}
.matrix-cell.hi{background:var(--brand-50)}
.matrix-cell.hi .mv{color:var(--brand)}
.matrix-cell.med{background:var(--warning-50)}
.matrix-cell.med .mv{color:var(--warning-dim)}
.matrix-cell.lo{background:var(--success-50)}
.matrix-cell.lo .mv{color:var(--success-dim)}
.matrix-cell.empty{background:var(--card-sunk);color:var(--hint)}
.matrix-cell.empty .mv{color:var(--hint)}
/* ─── Pipeline-stage rail (mini segmented bar showing stage spread) ─── */
.stg-rail{
display:grid;
grid-template-columns:repeat(11,1fr);
gap:2px;
height:24px;
margin:8px 0 4px;
}
.stg-rail .stg-cell{
background:var(--brand-50);
border-radius:var(--r-sm);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
color:var(--brand);
letter-spacing:0.02em;
}
.stg-rail .stg-cell.high{background:var(--brand);color:var(--surface)}
.stg-rail .stg-cell.mid{background:var(--brand-tint);color:var(--surface)}
.stg-rail .stg-cell.lost{background:var(--danger-50);color:var(--danger-dim)}
.stg-rail .stg-cell.won{background:var(--success);color:var(--surface)}
.stg-rail-labels{
display:grid;
grid-template-columns:repeat(11,1fr);
gap:2px;
margin-top:3px;
font-family:var(--font-mono);
font-size:8px;
font-weight:600;
letter-spacing:0.04em;
color:var(--hint);
text-transform:uppercase;
}
.stg-rail-labels span{text-align:center}
/* ─── Heatmap (owner workload · day x hour) ─── */
.heat-grid{
display:grid;
grid-template-columns:90px repeat(7,1fr);
gap:2px;
font-size:11px;
}
.heat-cell{
background:var(--card-sunk);
padding:6px 4px;
border-radius:var(--r-sm);
text-align:center;
font-family:var(--font-mono);
font-size:10.5px;
font-weight:700;
color:var(--ink);
letter-spacing:0.02em;
min-height:30px;
display:flex;
align-items:center;
justify-content:center;
}
.heat-cell.h-axis{
background:transparent;
color:var(--hint);
font-size:10.5px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
justify-content:flex-start;
padding-left:0;
}
.heat-cell.h-head{
background:transparent;
color:var(--hint);
font-size:10px;
letter-spacing:0.08em;
text-transform:uppercase;
font-weight:700;
min-height:24px;
}
.heat-cell.t1{background:var(--brand-50);color:var(--brand-dim)}
.heat-cell.t2{background:var(--c-brand-pale);color:var(--brand-dim)}
.heat-cell.t3{background:var(--c-brand-mid);color:var(--surface)}
.heat-cell.t4{background:var(--brand-tint);color:var(--surface)}
.heat-cell.t5{background:var(--brand);color:var(--surface)}
.heat-cell.over{background:var(--danger-50);color:var(--danger-dim)}
/* ─── Action bar (export · share · save view) ─── */
.rpt-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:14px;
}
.rpt-actions .label{
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
margin-right:4px;
}
/* ─── Hero-print mode (used on report screens) ─── */
@media print{
html body .sidebar,
html body .topbar,
html body .mob-tab,
html body .trust-block,
html body .rpt-actions,
html body .rfb-action{display:none !important}
html body .rpt-hero{
background:var(--surface) !important;
color:var(--ink) !important;
border:0.5px solid var(--hairline);
box-shadow:none !important;
}
html body .rpt-hero h1{color:var(--ink) !important}
html body .rpt-hero-eyebrow{color:var(--muted) !important}
html body .rpt-hero-desc{color:var(--ink-2) !important}
html body .rpt-hero-desc b{color:var(--ink) !important}
html body .rpt-hero-chips .chip{background:var(--card-sunk) !important;color:var(--ink-2) !important;box-shadow:inset 0 0 0 0.5px var(--hairline) !important}
html body .rpt-kpi{background:var(--card-sunk) !important}
html body .rpt-kpi .v{color:var(--ink) !important}
html body .rpt-kpi .l{color:var(--muted) !important}
html body .rpt-kpi .d{color:var(--ink-2) !important}
html body .main{padding:0 !important}
html body .page{padding:0 !important}
html body .rpt-card{box-shadow:inset 0 0 0 0.5px var(--hairline) !important;page-break-inside:avoid}
}
/* ─── Mobile responsive layer for B08 ───────────────────── */
@media (max-width:768px){
html body .rpt-hero{padding:18px 16px 14px;border-radius:14px}
html body .rpt-hero h1{font-size:20px}
html body .rpt-hero h1 i{font-size:14px}
html body .rpt-hero-desc{font-size:12px}
html body .rpt-kpi-strip{grid-template-columns:1fr 1fr;gap:1px}
html body .rpt-kpi{padding:10px 12px}
html body .rpt-kpi .v{font-size:18px}
html body .rpt-row-2,
html body .rpt-row-3,
html body .rpt-row-37,
html body .rpt-row-46{grid-template-columns:1fr;gap:11px}
html body .rpt-filter-bar{padding:9px 11px}
html body .rfb-l{display:none}
html body .rfb-pill{font-size:10.5px;padding:4px 9px 4px 8px}
html body .rfb-spacer{display:none}
html body .rfb-action.brand{font-size:10.5px}
html body .bar-row{grid-template-columns:90px 1fr 56px;gap:8px;font-size:11px}
html body .bar-row .bar-l small{font-size:9.5px}
html body .lb-row{grid-template-columns:24px 28px 1fr 80px;gap:9px;padding:10px 12px;font-size:11.5px}
html body .lb-row .lb-bar,
html body .lb-row .lb-trend{display:none}
html body .lb-row .lb-v{font-size:11.5px}
html body .funnel-wrap{padding:11px 12px;gap:5px}
html body .funnel-stage{grid-template-columns:24px 1fr;gap:8px}
html body .funnel-stage .fn-num{width:22px;height:22px;font-size:9.5px}
html body .funnel-bar{height:34px;padding:0 11px 0 12px;gap:8px;grid-template-columns:1fr auto auto}
html body .funnel-bar .stg-l{font-size:11.5px}
html body .funnel-bar .stg-c{font-size:11px;padding-left:8px}
html body .funnel-bar .stg-c small{font-size:8px}
html body .funnel-bar .stg-v{display:none}
html body .funnel-bar .stg-d{font-size:9px;padding-left:8px}
html body .funnel-drop .drop-meta{font-size:8.5px;padding:3px 8px}
html body .ring-wrap{width:160px;height:160px}
html body .ring-wrap .ring{width:160px;height:160px}
html body .ring-center b{font-size:24px}
html body .ring-center b small{font-size:12px}
html body .matrix-row{grid-template-columns:90px repeat(5,1fr)}
html body .matrix-cell{padding:7px 8px;font-size:10.5px}
html body .matrix-cell.label{font-size:11px}
html body .matrix-cell .mv{font-size:11px}
html body .matrix-cell .mp{font-size:9px}
html body .stg-rail{grid-template-columns:repeat(11,minmax(20px,1fr));height:20px;overflow-x:auto;padding-bottom:2px}
html body .stg-rail .stg-cell{font-size:8.5px}
html body .stg-rail-labels{font-size:7px;letter-spacing:0.02em}
html body .heat-grid{grid-template-columns:60px repeat(7,1fr);font-size:9.5px}
html body .heat-cell{min-height:24px;padding:4px 2px;font-size:9.5px}
html body .heat-cell.h-axis{font-size:9px}
html body .heat-cell.h-head{font-size:8.5px}
html body .waterfall{padding:16px 11px 4px;gap:8px;height:200px}
html body .wf-step{min-width:56px}
html body .wf-bar .wf-v{font-size:9.5px;top:-18px}
html body .wf-step .wf-l{font-size:8.5px}
html body .wf-step .wf-l small{font-size:9px}
html body .insight-grid{grid-template-columns:1fr;gap:9px}
html body .insight-card{padding:12px 13px}
html body .insight-card .ins-v{font-size:15px}
html body .ring-legend .lg{grid-template-columns:10px 1fr auto auto;gap:7px;padding:4px 0}
html body .ring-legend .lg .lg-l b{font-size:11.5px}
html body .ring-legend .lg .lg-l small{font-size:10px}
html body .ring-legend .lg .lg-v{font-size:11px}
html body .ring-legend .lg .lg-pct{font-size:9.5px;min-width:30px}
html body .cmp-rail{font-size:11px;padding:9px 12px;gap:7px}
html body .spark-row{grid-template-columns:100px 1fr 64px;gap:8px;padding:8px 0}
html body .spark-row .sr-l{font-size:11.5px}
html body .spark-row .sr-l small{font-size:10px}
html body .spark-row .sr-v{font-size:11px}
html body .spark{height:28px}
html body .rpt-card-h{padding:12px 14px}
html body .rpt-card-h .ttl b{font-size:12.5px}
html body .rpt-card-h .ttl small{font-size:10.5px}
html body .rpt-card-b{padding:12px 14px}
}
/* ============================================================
BATCH 08 · ANALYTICS / REPORTS CORE · ADD-ON VOCABULARY
New chart class names emitted by the Batch 08 generator
(does not conflict with existing analytics classes above)
============================================================ */
/* Token aliases · resolve pre-existing missing references in the
inherited Batch 07 r2 shared.css (e.g. --card-sunk, --card,
--brand-soft, --brand-dim, --brand-tint were referenced but not
defined in :root). These aliases keep visual semantics consistent
with how the Batch 07 r2 rules were designed to render. */
:root{
--card: var(--surface);
--card-sunk: var(--surface-sunken);
--brand-soft: var(--brand-200);
--brand-dim: var(--brand-700);
--brand-tint: var(--brand-400);
--r-sm: 12px;
--r-md: 14px;
--r-lg: 16px;
--r-full: 9999px;
}
/* ─── Funnel (new vocabulary · horizontal row per stage) ──── */
/* Note: shared.css contains an older .funnel-bar rule above (line ~6433);
these rules use higher specificity (.funnel-bar-wrap >) to win cleanly */
.funnel-stage{
display:grid;
grid-template-columns:180px 1fr 110px;
gap:14px;
align-items:center;
padding:10px 14px;
border-radius:var(--r-md);
}
.funnel-stage:nth-child(odd){background:var(--card-sunk)}
.funnel-stage.lost{background:linear-gradient(90deg,var(--danger-50) 0%,transparent 100%)}
.funnel-stage.won{background:linear-gradient(90deg,var(--success-50) 0%,transparent 100%)}
.funnel-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.funnel-label b{font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink);line-height:1.25}
.funnel-label span{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.04em;font-weight:600}
.funnel-bar-wrap{display:flex;flex-direction:column;gap:5px;min-width:0}
.funnel-bar-wrap .funnel-bar{
height:22px;
background:var(--card-sunk);
border-radius:var(--r-sm);
overflow:hidden;
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:block;
padding:0;
gap:0;
grid-template-columns:none;
}
.funnel-bar-wrap .funnel-bar .funnel-fill{
height:100%;
border-radius:var(--r-sm);
transition:width 0.3s ease;
background-color:var(--brand);
background-image:linear-gradient(90deg,var(--brand-400) 0%,var(--brand) 100%);
display:block;
}
.funnel-stage.brand .funnel-bar-wrap .funnel-fill{background-image:linear-gradient(90deg,var(--brand-400) 0%,var(--brand) 100%);background-color:var(--brand)}
.funnel-stage.warn .funnel-bar-wrap .funnel-fill{background-image:linear-gradient(90deg,var(--warning-soft) 0%,var(--warning) 100%);background-color:var(--warning)}
.funnel-stage.won .funnel-bar-wrap .funnel-fill{background-image:linear-gradient(90deg,var(--success-soft) 0%,var(--success) 100%);background-color:var(--success)}
.funnel-stage.lost .funnel-bar-wrap .funnel-fill{background-image:linear-gradient(90deg,var(--hint) 0%,var(--muted) 100%);background-color:var(--muted)}
.funnel-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.funnel-days{color:var(--muted)}
.funnel-drop{
color:var(--danger-dim);
padding:1px 8px;
background:var(--danger-50);
border-radius:var(--r-full);
box-shadow:inset 0 0 0 0.5px var(--danger-soft);
white-space:nowrap;
flex:none;
}
.funnel-stage.warn .funnel-drop{color:var(--warning-dim);background:var(--warning-50);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.funnel-value{
text-align:right;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:1px;
}
.funnel-value b{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;display:flex;align-items:center;gap:3px}
.funnel-value b .aed-symbol{width:11px;height:11px;color:var(--muted)}
.funnel-value .fv-unit{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase}
/* ─── Source matrix table (screen 062) ───────────────────── */
.matrix-tbl{display:flex;flex-direction:column;gap:1px}
.matrix-head{
display:grid;
grid-template-columns:1.6fr 0.7fr 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 0.9fr 1fr 0.9fr;
gap:10px;
padding:9px 14px;
background:var(--card-sunk);
border-radius:var(--r-sm) var(--r-sm) 0 0;
font-family:var(--font-mono);
font-size:9.5px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
font-weight:700;
}
.matrix-row{
display:grid;
grid-template-columns:1.6fr 0.7fr 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 0.9fr 1fr 0.9fr;
gap:10px;
padding:10px 14px;
border-bottom:0.5px solid var(--hairline);
align-items:center;
font-size:12px;
}
.matrix-row:last-child{border-bottom:0}
.matrix-row:hover{background:var(--card-sunk)}
.matrix-cell{display:flex;align-items:center;gap:7px;min-width:0}
.matrix-cell.src{gap:9px}
.matrix-cell.num{flex-direction:column;align-items:flex-start;gap:1px}
.matrix-cell b{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.matrix-cell .mc-ic{
width:24px;
height:24px;
border-radius:var(--r-sm);
display:flex;
align-items:center;
justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.matrix-cell .mc-ic svg{width:12px;height:12px;stroke-width:1.7}
.matrix-cell .mc-sub{font-family:var(--font-mono);font-size:9.5px;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.matrix-cell .mc-pct{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--ink-2);min-width:34px;text-align:right}
.matrix-cell .mc-pct b{font-size:11px;color:var(--success-dim)}
.matrix-cell .mc-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:3px;letter-spacing:-0.005em}
.matrix-cell .mc-val .aed-symbol{width:11px;height:11px;color:var(--muted)}
.matrix-cell .mc-meta{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:600;letter-spacing:0.02em}
.matrix-cell .bar-track.sm{flex:1;min-width:0;max-width:88px}
/* ─── Heatmap rows (screen 063 owner workload) ─────────────── */
/* Override the inherited .heat-grid rule (which expects flat cells as children)
when it contains the new .heat-row wrapper structure. */
.heat-grid:has(.heat-row),
.heat-grid:has(.heat-head){
display:block;
grid-template-columns:none;
gap:0;
padding:12px 16px;
}
.heat-row{
display:grid;
grid-template-columns:160px repeat(7,1fr);
gap:5px;
padding:6px 0;
align-items:center;
}
.heat-head{
display:grid;
grid-template-columns:160px repeat(7,1fr);
gap:5px;
padding:7px 0 4px;
font-family:var(--font-mono);
font-size:9.5px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
font-weight:700;
text-align:center;
}
.heat-head > :first-child{text-align:left}
.heat-row > :first-child{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:-0.005em}
.heat-cell{
height:30px;
border-radius:var(--r-sm);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:-0.005em;
}
.heat-cell.h-0{background:var(--card-sunk);color:var(--hint)}
.heat-cell.h-1{background:var(--c-brand-lightest);color:var(--brand-400)}
.heat-cell.h-2{background:var(--c-brand-soft-2);color:var(--brand)}
.heat-cell.h-3{background:var(--brand);color:var(--surface)}
/* ─── Leaderboard (screen 061 sales perf · enhanced) ──────── */
.leaderboard{display:flex;flex-direction:column;gap:1px}
.leaderboard .lb-row{padding:9px 14px;border-bottom:0.5px solid var(--hairline)}
.leaderboard .lb-row:last-child{border-bottom:0}
/* ─── Bar legend item ────────────────────────────────────── */
.bl-i{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted)}
.bl-i::before{content:'';width:8px;height:8px;border-radius:var(--r-full);background:currentColor;flex:none}
.bl-i.brand{color:var(--brand)}
.bl-i.ok{color:var(--success-dim)}
.bl-i.warn{color:var(--warning-dim)}
.bl-i.danger{color:var(--danger-dim)}
.bl-i.muted{color:var(--hint)}
/* ─── Waterfall step label (screen 066) ──────────────────── */
.wf-lbl{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
/* ─── Hero title (used inside .rpt-hero) ─────────────────── */
.rpt-hero-title{
font-size:26px;
font-weight:600;
letter-spacing:-0.015em;
margin:0 0 10px;
line-height:1.2;
color:var(--surface);
}
.rpt-hero-title i{
font-style:normal;
font-size:14px;
font-weight:500;
letter-spacing:-0.005em;
color:rgba(255,255,255,0.78);
display:block;
margin-top:6px;
font-family:var(--font-mono);
}
/* ─── Filter bar right column ────────────────────────────── */
.rfb-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* ─── Notify dot (in trust pill, etc.) ───────────────────── */
.notify{display:inline-block;width:6px;height:6px;border-radius:var(--r-full);background:var(--danger);margin-right:6px;vertical-align:middle}
/* ─── Pos/neg deltas (used inline) ───────────────────────── */
.pos{color:var(--success-dim);font-weight:700}
.neg{color:var(--danger-dim);font-weight:700}
/* ─── Trust list (collapsed trust block) ─────────────────── */
.trust-list{display:flex;flex-direction:column;gap:8px;padding:13px 16px;font-size:12px;color:var(--ink-2);line-height:1.55}
.trust-list li{position:relative;padding-left:18px;list-style:none}
.trust-list li::before{
content:'';
position:absolute;
left:0;
top:7px;
width:8px;
height:8px;
border-radius:var(--r-full);
background:var(--brand-50);
box-shadow:inset 0 0 0 0.5px var(--brand-soft);
}
.trust-list li b{color:var(--ink);font-weight:600}
.trust-pill-details{padding:0 16px 13px}
.trust-pill-details summary{
cursor:pointer;
list-style:none;
padding:13px 0;
display:flex;
align-items:center;
gap:9px;
font-size:12.5px;
font-weight:600;
letter-spacing:-0.005em;
color:var(--ink);
}
.trust-pill-details summary::-webkit-details-marker{display:none}
.trust-pill-details summary::after{
content:'';
width:14px;
height:14px;
background-color:var(--muted);
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
margin-left:auto;
transition:transform 0.15s ease;
}
.trust-pill-details[open] summary::after{transform:rotate(180deg)}
.trust-pill-details summary .trust-ic{
width:22px;
height:22px;
border-radius:var(--r-sm);
background:var(--brand-50);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
}
.trust-pill-details summary .trust-ic svg{width:12px;height:12px;stroke-width:1.7}
.trust-pill-details ul{margin:0;padding:8px 0 0;list-style:none}
/* ─── Sidebar foot meta (for analytics screens) ──────────── */
.sf-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sf-meta b{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ─── Mobile adaptation for new vocabulary ───────────────── */
@media (max-width:768px){
html body .funnel-stage{grid-template-columns:1fr;gap:7px}
html body .funnel-value{align-items:flex-start;text-align:left;flex-direction:row;gap:5px}
html body .matrix-tbl{overflow-x:auto}
html body .matrix-head{display:none}
html body .matrix-row{grid-template-columns:1fr 1fr;gap:8px;padding:11px 12px;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 0.5px var(--hairline);border-bottom:0;margin-bottom:6px}
html body .matrix-cell.src{grid-column:1/-1;border-bottom:0.5px solid var(--hairline);padding-bottom:6px;margin-bottom:3px}
html body .heat-row,html body .heat-head{grid-template-columns:120px repeat(7,1fr);gap:3px}
html body .heat-cell{height:26px;font-size:10px}
html body .rpt-hero-title{font-size:22px}
html body .rpt-hero-title i{font-size:12px}
}
/* ─── Print stylesheet (hide shell · show report only) ──── */
@media print{
html body .sidebar,html body .topbar,html body .mob-tab,html body .topbar-mob,html body .rpt-prev-next,html body .rpt-export-row,html body .filter-bar .rfb-r,html body .back-link{display:none !important}
html body{background:var(--surface) !important}
html body .main{margin-left:0 !important;padding:0 !important}
html body .rpt-hero{background:var(--card) !important;color:var(--ink) !important;box-shadow:inset 0 0 0 0.5px var(--hairline) !important;page-break-inside:avoid;break-inside:avoid}
html body .rpt-hero-title,html body .rpt-hero-eyebrow,html body .rpt-hero-desc{color:var(--ink) !important}
html body .rpt-hero-chips .chip{background:var(--card-sunk) !important;color:var(--ink-2) !important;box-shadow:inset 0 0 0 0.5px var(--hairline) !important}
html body .rpt-kpi,html body .rpt-card,html body .panel{page-break-inside:avoid;break-inside:avoid}
html body .funnel-stage{page-break-inside:avoid;break-inside:avoid}
html body .matrix-row{page-break-inside:avoid;break-inside:avoid}
html body .stat .st-v,html body .rpt-hero-title{font-size:18px !important}
html body .funnel-bar{background:var(--card-sunk) !important;box-shadow:inset 0 0 0 0.5px var(--hairline) !important}
html body .funnel-fill{background:var(--ink-2) !important}
html body a{color:var(--ink) !important;text-decoration:none !important}
}
/* ============================================================
BATCH 08 v1.0-r2 · REPORT ROW LAYOUT CLEANUP
New .rpt-row class family for readable report sections.
Fixes the cramped .lb-row layout in screens 065/066/067/068
where 4-element rows were squeezed into a 6-column grid.
============================================================ */
.rpt-row{
display:grid;
grid-template-columns:36px minmax(0,1fr) minmax(70px,140px) 78px;
gap:13px;
align-items:center;
padding:11px 14px;
font-size:12.5px;
border-bottom:0.5px solid var(--hairline);
position:relative;
}
.rpt-row:last-child{border-bottom:0}
.rpt-row:hover{background:var(--card-sunk)}
/* Leading slot (col 1) — flexible content: dot, rank, icon, avatar */
.rr-lead{
display:flex;
align-items:center;
justify-content:center;
flex:none;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:0.04em;
color:var(--hint);
}
.rr-lead.dot{display:block;width:11px;height:11px;border-radius:var(--r-full);margin:0 auto;background:var(--brand)}
.rr-lead.av{
width:30px;height:30px;border-radius:var(--r-full);
background-image:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);
background-color:var(--brand);
color:var(--surface);
font-size:10px;
display:flex;align-items:center;justify-content:center;
}
.rr-lead.av.b{background-image:linear-gradient(135deg,var(--c-violet-bright) 0%,var(--c-violet-deep) 100%)}
.rr-lead.av.c{background-image:linear-gradient(135deg,var(--c-success-bright) 0%,var(--c-success-deep) 100%)}
.rr-lead.av.d{background-image:linear-gradient(135deg,var(--c-warning-bright) 0%,var(--c-amber-deep) 100%)}
.rr-lead.ic{
width:30px;height:30px;border-radius:var(--r-sm);
background:var(--brand-50);color:var(--brand);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.rr-lead.ic svg{width:14px;height:14px;stroke-width:1.7}
.rr-lead.rank-top{color:var(--brand)}
.rr-lead.warn{color:var(--warning-dim)}
/* Label slot (col 2) — name + meta · uses min-width:0 to prevent word-by-word wrap */
.rr-label{min-width:0;display:flex;flex-direction:column;gap:1px}
.rr-label b{
font-size:13px;
font-weight:600;
color:var(--ink);
letter-spacing:-0.005em;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rr-label .sub{
font-size:11px;
color:var(--muted);
line-height:1.4;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rr-label .sub b{
font-weight:600;
color:var(--ink-2);
white-space:normal;
display:inline;
font-size:11px;
}
.rr-label .sub .aed-symbol{display:inline-block;width:10px;height:10px;vertical-align:-1px;color:var(--muted)}
.rr-label .sub .tag-mini{
display:inline-flex;align-items:center;gap:3px;
font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
padding:1px 6px;border-radius:var(--r-full);
background:var(--card-sunk);color:var(--hint);
box-shadow:inset 0 0 0 0.5px var(--hairline);
margin-left:4px;
}
.rr-label .sub .tag-mini.warn{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.rr-label .sub .tag-mini.ok{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.rr-label .sub .tag-mini.danger{background:var(--danger-50);color:var(--danger-dim);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.rr-label .sub .tag-mini.brand{background:var(--brand-50);color:var(--brand);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
/* Bar slot (col 3) */
.rr-bar{
position:relative;
height:10px;
background:var(--card-sunk);
border-radius:var(--r-full);
overflow:hidden;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.rr-bar .rr-fill{
position:absolute;
inset:0;
background-color:var(--brand);
background-image:linear-gradient(90deg,var(--brand-400) 0%,var(--brand) 100%);
border-radius:var(--r-full);
width:0%;
transition:width 0.3s ease;
}
.rr-bar .rr-fill.warn{background-image:linear-gradient(90deg,var(--warning-soft) 0%,var(--warning) 100%);background-color:var(--warning)}
.rr-bar .rr-fill.danger{background-image:linear-gradient(90deg,var(--danger-soft) 0%,var(--danger) 100%);background-color:var(--danger)}
.rr-bar .rr-fill.success{background-image:linear-gradient(90deg,var(--success-soft) 0%,var(--success) 100%);background-color:var(--success)}
.rr-bar .rr-fill.muted{background-image:linear-gradient(90deg,var(--hint) 0%,var(--muted) 100%);background-color:var(--muted)}
/* Value slot (col 4) — right-aligned mono · stays on one line */
.rr-val{
text-align:right;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:1px;
font-family:var(--font-mono);
white-space:nowrap;
}
.rr-val b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;line-height:1.15;display:inline-flex;align-items:center;gap:3px}
.rr-val b small{font-size:10px;color:var(--muted);font-weight:600;margin-left:1px}
.rr-val b .aed-symbol{width:10px;height:10px;color:var(--muted)}
.rr-val .sub{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.rr-val .delta{
display:inline-flex;align-items:center;gap:2px;
font-size:10px;font-weight:700;letter-spacing:0.04em;
padding:1px 6px;border-radius:var(--r-full);
margin-top:1px;
}
.rr-val .delta.up{color:var(--success-dim);background:var(--success-50)}
.rr-val .delta.down{color:var(--danger-dim);background:var(--danger-50)}
.rr-val .delta.flat{color:var(--hint);background:var(--card-sunk)}
/* Highlight row variants */
.rpt-row.warn{background:linear-gradient(90deg,var(--warning-50) 0%,transparent 60%)}
.rpt-row.danger{background:linear-gradient(90deg,var(--danger-50) 0%,transparent 60%)}
.rpt-row.success{background:linear-gradient(90deg,var(--success-50) 0%,transparent 60%)}
/* Footer summary row variant (slimmer, italic note) */
.rpt-row.summary{
border-top:0.5px solid var(--hairline);
border-bottom:0;
padding:11px 14px;
font-size:11px;
font-style:italic;
color:var(--muted);
}
/* Mobile · stack to 2-row card layout */
@media (max-width:768px){
html body .rpt-row{
grid-template-columns:36px minmax(0,1fr) 78px;
grid-template-areas:"lead label val" "lead bar bar";
gap:8px 10px;
padding:11px 12px;
}
html body .rpt-row .rr-lead{grid-area:lead}
html body .rpt-row .rr-label{grid-area:label}
html body .rpt-row .rr-bar{grid-area:bar;height:8px}
html body .rpt-row .rr-val{grid-area:val}
html body .rpt-row .rr-label b{font-size:12.5px}
html body .rpt-row .rr-label .sub{font-size:10.5px}
html body .rpt-row .rr-val b{font-size:12px}
}
/* ============================================================
BATCH 08 v1.0-r3 · MOBILE CHART CLEANUP
Mobile-only layouts for: stacked-bar inner labels (hide),
margin waterfall (vertical list), branch matrix (cards).
============================================================ */
/* Hide stacked-bar inner labels at mobile · rely on legend below */
@media (max-width:768px){
html body .bar-stacked .bar-seg span{display:none}
html body .bar-stacked{height:32px}
}
/* Margin waterfall · mobile vertical list (hidden at desktop) */
.waterfall-mobile{display:none}
@media (max-width:768px){
html body .waterfall{display:none}
html body .waterfall-mobile{display:flex;flex-direction:column;gap:7px}
}
.waterfall-mobile .wfm-row{
display:grid;
grid-template-columns:8px minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:10px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.waterfall-mobile .wfm-row.start{
background:linear-gradient(90deg,var(--brand-50) 0%,var(--surface) 70%);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.waterfall-mobile .wfm-row.end{
background-image:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);
background-color:var(--brand);
box-shadow:none;
}
.waterfall-mobile .wfm-tag{align-self:stretch;border-radius:var(--r-full);background:var(--brand)}
.waterfall-mobile .wfm-row.neg .wfm-tag{background:var(--warning)}
.waterfall-mobile .wfm-row.pos .wfm-tag{background:var(--success)}
.waterfall-mobile .wfm-row.end .wfm-tag{background:rgba(255,255,255,0.35)}
.waterfall-mobile .wfm-lbl{min-width:0}
.waterfall-mobile .wfm-lbl b{
display:block;font-size:13px;font-weight:600;color:var(--ink);
letter-spacing:-0.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.waterfall-mobile .wfm-row.end .wfm-lbl b{color:var(--surface)}
.waterfall-mobile .wfm-lbl .sub{
display:block;font-family:var(--font-mono);font-size:9.5px;
color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;
font-weight:600;margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.waterfall-mobile .wfm-row.end .wfm-lbl .sub{color:rgba(255,255,255,0.78)}
.waterfall-mobile .wfm-val{
font-family:var(--font-mono);font-size:13px;font-weight:700;
color:var(--ink);letter-spacing:-0.005em;
white-space:nowrap;text-align:right;
display:flex;align-items:center;gap:3px;
}
.waterfall-mobile .wfm-val .aed-symbol{width:10px;height:10px;color:var(--muted)}
.waterfall-mobile .wfm-row.neg .wfm-val{color:var(--warning-dim)}
.waterfall-mobile .wfm-row.pos .wfm-val{color:var(--success-dim)}
.waterfall-mobile .wfm-row.end .wfm-val{color:var(--surface);font-size:14px}
.waterfall-mobile .wfm-row.end .wfm-val .aed-symbol{color:rgba(255,255,255,0.78)}
/* Branch × reason matrix · mobile cards (hidden at desktop) */
.branch-cards-mobile{display:none}
@media (max-width:768px){
html body .heat-grid:has(.heat-row){display:none}
html body .branch-cards-mobile{display:flex;flex-direction:column;gap:10px;padding:14px 14px 14px}
}
.branch-cards-mobile .bcm-card{
background:var(--surface);
border-radius:var(--r-sm);
padding:12px 13px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.branch-cards-mobile .bcm-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-bottom:9px;border-bottom:0.5px solid var(--hairline);margin-bottom:9px;
}
.branch-cards-mobile .bcm-head b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.branch-cards-mobile .bcm-total{
font-family:var(--font-mono);font-size:10.5px;font-weight:700;
color:var(--brand);background:var(--brand-50);
padding:3px 9px;border-radius:var(--r-full);letter-spacing:0.06em;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.branch-cards-mobile .bcm-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.branch-cards-mobile .bcm-item{
display:flex;align-items:center;justify-content:space-between;
gap:8px;font-size:11.5px;
}
.branch-cards-mobile .bcm-item span{
color:var(--muted);font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.branch-cards-mobile .bcm-item b{
font-family:var(--font-mono);font-weight:700;color:var(--ink);
font-size:12px;letter-spacing:0.02em;flex:none;
}
/* ============================================================
BATCH 08 v1.0-r4 · CHART/DECOR HEX TOKENS
Tokenizes all raw hex previously inline in non-:root rules.
============================================================ */
:root{
--c-black: #000000;
--c-success-bright: #3BB37E;
--c-success-tint: #5EE0A0;
--c-success-deep: #0F8B5A;
--c-warning-bright: #E8A34A;
--c-amber-bright: #FFC55A;
--c-amber-deep: #B57808;
--c-danger-bright: #E35A4D;
--c-danger-tint: #FF8A7A;
--c-violet-bright: #7D6CFF;
--c-violet-deep: #4A36C9;
--c-muted-tint: #9DA0B3;
--c-muted-deep: #6B6D80;
--c-grey-light: #C4C4D0;
--c-brand-pale: #CFC6F5;
--c-brand-soft-2: #C9BFEE;
--c-brand-mid: #8E7DF0;
--c-brand-lightest: #EAE5FA;
--c-print-ink: #1C1C28;
--c-print-ink-mid: #3C3C50;
--c-print-edge: #D8D8E0;
--c-tile-night-1: #0A0820;
--c-tile-night-2: #1A0D5A;
--c-tile-warm-1: #3A2A1F;
--c-tile-warm-2: #5A3A2A;
--c-tile-engine-1: #1A1A1A;
--c-tile-engine-2: #2A2A2A;
--c-tile-engine-3: #3A3A3A;
--c-tile-amber-1: #2A1A1F;
--c-tile-amber-2: #3A2A2F;
}
/* ============================================================
BATCH 08 v1.0-r5 · KPI / INSIGHT STRIP VISUAL POLISH
The .rpt-kpi-strip and .rpt-kpi tiles were originally designed
for dark-hero-embedded use (rgba(10,8,32,0.4) bg) but in actual
screens they sit standalone below the filter bar against the
light app shell — making them feel dull / disabled / gray.
r5 restyles them as premium light analytics cards while keeping
the same HTML structure (no markup changes required).
============================================================ */
.rpt-kpi-strip{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;
margin-top:0;
margin-bottom:18px;
background:var(--hairline);
border-radius:var(--r-md);
padding:1px;
box-shadow:0 1px 2px rgba(15,12,28,0.04), inset 0 0 0 0.5px var(--hairline);
overflow:hidden;
}
.rpt-kpi{
padding:14px 16px;
background-color:var(--surface);
background-image:linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 130%);
display:flex;
flex-direction:column;
gap:7px;
position:relative;
min-height:96px;
}
/* Accent variant · first / highlighted tile · stronger brand wash */
.rpt-kpi.accent{
background-image:linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
}
.rpt-kpi.accent .kpi-v{color:var(--brand-700)}
/* Status variants · subtle tone hints */
.rpt-kpi.ok{
background-image:linear-gradient(180deg, var(--surface) 0%, var(--success-50) 130%);
}
.rpt-kpi.warn{
background-image:linear-gradient(180deg, var(--surface) 0%, var(--warning-50) 130%);
}
.rpt-kpi.danger{
background-image:linear-gradient(180deg, var(--surface) 0%, var(--danger-50) 130%);
}
/* Dot color variants inside .kpi-lbl (used in the leading dot before label text) */
.rpt-kpi .kpi-lbl .dot{
display:inline-block;
width:6px;
height:6px;
border-radius:var(--r-full);
background:var(--brand);
margin-right:5px;
vertical-align:middle;
}
.rpt-kpi .kpi-lbl .dot.brand{background:var(--brand)}
.rpt-kpi .kpi-lbl .dot.ok{background:var(--success-2)}
.rpt-kpi .kpi-lbl .dot.warn{background:var(--warning-2)}
.rpt-kpi .kpi-lbl .dot.danger{background:var(--danger-2)}
/* Tighten inherited .kpi-lbl / .kpi-v / .kpi-sub for this context (light bg compatibility) */
.rpt-kpi .kpi-top{margin-bottom:1px}
.rpt-kpi .kpi-lbl{color:var(--hint)}
.rpt-kpi .kpi-v{
font-family:var(--font-mono);
font-size:23px;
font-weight:700;
letter-spacing:-0.018em;
color:var(--ink);
line-height:1.1;
display:flex;
align-items:baseline;
gap:6px;
}
.rpt-kpi .kpi-v small{font-size:11px;color:var(--muted);font-weight:500}
.rpt-kpi .kpi-v .aed-symbol{width:13px;height:13px;color:var(--muted);align-self:center}
.rpt-kpi .kpi-sub{
font-size:11px;
color:var(--muted);
line-height:1.45;
margin-top:auto;
}
.rpt-kpi .kpi-sub b{color:var(--ink-3);font-weight:600}
/* Override legacy .l / .v / .d dark-themed helpers (for any rule that still uses them) */
.rpt-kpi .l{color:var(--hint)}
.rpt-kpi .v{color:var(--ink)}
.rpt-kpi .v small{color:var(--muted)}
.rpt-kpi .d{color:var(--ink-3)}
.rpt-kpi .d.up{color:var(--success-dim)}
.rpt-kpi .d.down{color:var(--danger-dim)}
.rpt-kpi .l::before{background:var(--brand)}
.rpt-kpi.ok .l::before{background:var(--success-2)}
.rpt-kpi.warn .l::before{background:var(--warning-2)}
/* Mobile · keep premium look · slightly tighter padding */
@media (max-width:768px){
html body .rpt-kpi-strip{grid-template-columns:repeat(2,1fr)}
html body .rpt-kpi{padding:11px 13px;min-height:84px}
html body .rpt-kpi .kpi-v{font-size:20px}
html body .rpt-kpi .kpi-sub{font-size:10.5px}
}
/* ============================================================
BATCH 09 v1.0 · ANALYTICS / REPORTS EXTENDED COMPONENTS
New CSS for screens 069-075 specific components.
============================================================ */
/* ─── Filter bar internal layout (fb-l/fb-r/fb-grp) ────────── */
.rpt-filter-bar .fb-l{display:flex;align-items:center;gap:11px;flex-wrap:wrap;flex:1;min-width:0}
.rpt-filter-bar .fb-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rpt-filter-bar .fb-grp{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--font-mono);font-size:10px;font-weight:600;
color:var(--ink-3);letter-spacing:0.06em;
padding:5px 10px;
background:var(--card-sunk);border-radius:var(--r-full);
box-shadow:inset 0 0 0 0.5px var(--hairline);
white-space:nowrap;
}
.rpt-filter-bar .fb-grp b{color:var(--brand);font-weight:700;letter-spacing:0.06em}
.rpt-filter-bar .fb-grp svg{width:11px;height:11px;color:var(--muted);stroke-width:1.7}
/* ─── 3+3+5 Cadence rail (screen 070) ────────────────────── */
.cadence-rail{
display:grid;
grid-template-columns:repeat(11,1fr);
gap:5px;
}
.crl-step{
display:flex;flex-direction:column;align-items:center;
padding:11px 5px 9px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
text-align:center;
position:relative;
background-image:linear-gradient(180deg,var(--surface) 0%,var(--brand-50) 130%);
}
.crl-step.success{background-image:linear-gradient(180deg,var(--surface) 0%,var(--success-50) 130%)}
.crl-step.warn{background-image:linear-gradient(180deg,var(--surface) 0%,var(--warning-50) 130%)}
.crl-step.danger{background-image:linear-gradient(180deg,var(--surface) 0%,var(--danger-50) 130%)}
.crl-num{
width:22px;height:22px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
font-family:var(--font-mono);font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;
margin-bottom:7px;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.crl-step.success .crl-num{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.crl-step.warn .crl-num{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.crl-step.danger .crl-num{background:var(--danger-50);color:var(--danger-dim);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.crl-lbl{display:flex;flex-direction:column;gap:2px;margin-bottom:7px}
.crl-lbl b{font-size:10.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.2}
.crl-lbl span{font-family:var(--font-mono);font-size:8.5px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase}
.crl-pct{
font-family:var(--font-mono);font-size:13px;font-weight:700;
color:var(--ink);letter-spacing:-0.015em;
}
.crl-step.success .crl-pct{color:var(--success-dim)}
.crl-step.warn .crl-pct{color:var(--warning-dim)}
.crl-step.danger .crl-pct{color:var(--danger-dim)}
/* ─── Stage duration timeline (screen 071) ───────────────── */
.stg-timeline{display:flex;flex-direction:column;gap:11px}
.stg-row{
display:grid;
grid-template-columns:200px minmax(0,1fr) 65px;
align-items:center;
gap:14px;
}
.stg-lbl{min-width:0;display:flex;flex-direction:column;gap:1px}
.stg-lbl b{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.stg-lbl span{font-size:10.5px;color:var(--muted);line-height:1.4}
.stg-bar{
position:relative;
height:22px;
background:var(--card-sunk);
border-radius:var(--r-sm);
overflow:hidden;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.stg-fill{
position:absolute;inset:0 auto 0 0;
background-image:linear-gradient(90deg,var(--brand-400) 0%,var(--brand) 100%);
background-color:var(--brand);
border-radius:var(--r-sm);
display:flex;align-items:center;justify-content:flex-end;
padding:0 10px;
color:var(--surface);
font-family:var(--font-mono);font-size:10.5px;font-weight:700;
letter-spacing:0.02em;
width:0%;
min-width:38px;
}
.stg-fill.warn{background-image:linear-gradient(90deg,var(--c-warning-bright) 0%,var(--warning) 100%);background-color:var(--warning)}
.stg-fill.success{background-image:linear-gradient(90deg,var(--c-success-bright) 0%,var(--success) 100%);background-color:var(--success)}
.stg-fill.danger{background-image:linear-gradient(90deg,var(--c-danger-bright) 0%,var(--danger) 100%);background-color:var(--danger)}
.stg-d{display:inline-block}
.stg-after{
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--ink);letter-spacing:0.02em;
text-align:right;
}
/* ─── Saved-view grid + cards (screen 072) ───────────────── */
.sv-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:12px;
}
.sv-card{
display:flex;flex-direction:column;
padding:14px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline), 0 1px 2px rgba(15,12,28,0.03);
gap:11px;
background-image:linear-gradient(180deg,var(--surface) 0%,var(--brand-50) 250%);
transition:box-shadow 0.15s ease;
}
.sv-card:hover{box-shadow:inset 0 0 0 0.5px var(--brand-100), 0 2px 4px rgba(15,12,28,0.05)}
.sv-card.archived{
background-image:none;background:var(--card-sunk);
opacity:0.7;
}
.sv-card-h{display:flex;align-items:flex-start;gap:10px}
.sv-card-ic{
width:32px;height:32px;border-radius:var(--r-sm);
display:flex;align-items:center;justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.sv-card-ic svg{width:14px;height:14px;stroke-width:1.7}
.sv-card-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sv-card-meta b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.3}
.sv-card-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:600}
.sv-status{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.06em;
padding:3px 7px;border-radius:var(--r-full);
white-space:nowrap;
flex:none;
}
.sv-card-filters{display:flex;flex-wrap:wrap;gap:5px}
.sv-chip{
font-family:var(--font-mono);font-size:9.5px;font-weight:600;
color:var(--ink-3);
padding:3px 8px;border-radius:var(--r-full);
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
letter-spacing:0.04em;
}
.sv-card-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:10px;
border-top:0.5px solid var(--hairline);
}
.sv-owner{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.sv-owner span{display:flex;flex-direction:column;gap:1px;min-width:0}
.sv-owner span b{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-owner span i{font-family:var(--font-mono);font-size:9px;color:var(--muted);font-style:normal;letter-spacing:0.04em}
.sv-actions{display:flex;gap:3px;flex:none}
.sv-btn{
width:26px;height:26px;border-radius:var(--r-sm);
background:transparent;border:0;
display:flex;align-items:center;justify-content:center;
color:var(--muted);cursor:pointer;
transition:background 0.12s, color 0.12s;
}
.sv-btn:hover{background:var(--brand-50);color:var(--brand)}
.sv-btn:disabled,.sv-btn[disabled]{opacity:0.35;cursor:not-allowed}
.sv-btn svg{width:13px;height:13px;stroke-width:1.8}
/* ─── Form field helpers (used in 073, 074, 075) ─────────── */
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.form-field label{
font-family:var(--font-mono);font-size:9.5px;font-weight:600;
color:var(--hint);letter-spacing:0.1em;text-transform:uppercase;
}
.select-mock{
display:flex;align-items:center;gap:10px;
padding:10px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
cursor:pointer;
}
.select-mock svg{width:14px;height:14px;stroke-width:1.7;color:var(--brand);flex:none}
.select-mock b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-mock span,.select-mock .sub{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em;font-weight:600;flex:none}
/* ─── Format picker (PDF/Excel/Print pills) ───────────────── */
.fmt-pick{display:flex;gap:7px;flex-wrap:wrap}
.fmt-pill{
display:flex;align-items:center;gap:7px;
padding:9px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
border:0;cursor:pointer;
flex:1;min-width:130px;
transition:all 0.12s ease;
}
.fmt-pill svg{width:15px;height:15px;stroke-width:1.7;color:var(--muted);flex:none}
.fmt-pill b{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:-0.005em}
.fmt-pill span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em;font-weight:500}
.fmt-pill:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.fmt-pill.active{
background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 100%);
box-shadow:inset 0 0 0 0.5px var(--brand-100), 0 1px 2px rgba(31,0,167,0.06);
}
.fmt-pill.active svg{color:var(--brand)}
.fmt-pill.active b{color:var(--brand-700)}
.fmt-pill.active span{color:var(--brand)}
/* ─── Included sections checklist (incl-row) ──────────────── */
.incl-list{display:flex;flex-direction:column;gap:5px}
.incl-row{
display:flex;align-items:center;gap:11px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
cursor:pointer;
}
.incl-row:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.incl-row b{font-size:12px;font-weight:600;color:var(--ink-3);flex:1;min-width:0;letter-spacing:-0.005em}
.incl-row span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em;font-weight:500;flex:none}
.incl-box{
width:16px;height:16px;border-radius:var(--r-sm);
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;align-items:center;justify-content:center;
flex:none;
}
.incl-row.checked .incl-box{
background:var(--brand);
box-shadow:none;
}
.incl-box svg{width:11px;height:11px;color:var(--surface);stroke-width:2.4}
.incl-row.checked b{color:var(--ink)}
/* ─── Recipient picker (recip-chip + recip-add) ──────────── */
.recip-list{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.recip-chip{
display:flex;align-items:center;gap:7px;
padding:5px 9px 5px 5px;
background:var(--brand-50);
border-radius:var(--r-full);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.recip-chip span{font-size:11.5px;font-weight:600;color:var(--brand-700);letter-spacing:-0.005em}
.recip-chip svg{width:11px;height:11px;color:var(--muted);stroke-width:1.8;cursor:pointer}
.recip-chip svg:hover{color:var(--danger)}
.recip-add{
display:inline-flex;align-items:center;gap:5px;
padding:7px 11px;
background:transparent;border:0;cursor:pointer;
color:var(--brand);
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:0.06em;text-transform:uppercase;
border-radius:var(--r-full);
box-shadow:inset 0 0 0 0.5px dashed var(--brand-200);
}
.recip-add:hover{background:var(--brand-50)}
.recip-add svg{width:11px;height:11px;stroke-width:2}
/* ─── Readiness checklist (chk-item) ────────────────────── */
.chk-list{display:flex;flex-direction:column;gap:7px}
.chk-item{
display:flex;align-items:flex-start;gap:11px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.chk-item.ok{background-image:linear-gradient(180deg,var(--surface) 0%,var(--success-50) 130%)}
.chk-item.warn{background-image:linear-gradient(180deg,var(--surface) 0%,var(--warning-50) 130%)}
.chk-ic{
width:22px;height:22px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.chk-item.ok .chk-ic{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.chk-item.warn .chk-ic{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.chk-ic svg{width:12px;height:12px;stroke-width:2.2}
.chk-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chk-meta b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.chk-meta span{font-size:10.5px;color:var(--muted);line-height:1.4}
/* ─── Custom builder grid (screen 074) ────────────────────── */
.builder-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.builder-col{
display:flex;flex-direction:column;gap:11px;
padding:14px;
background:var(--card-sunk);
border-radius:var(--r-md);
}
.builder-col-h{
display:flex;align-items:center;gap:9px;
padding-bottom:9px;
border-bottom:0.5px solid var(--hairline);
margin-bottom:3px;
}
.builder-col-h b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;flex:1}
.builder-num{
width:22px;height:22px;border-radius:var(--r-full);
background:var(--brand);color:var(--surface);
font-family:var(--font-mono);font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;
flex:none;
}
.metric-list{display:flex;flex-direction:column;gap:5px;max-height:480px;overflow-y:auto}
.metric-row{
display:flex;align-items:center;gap:10px;
padding:8px 11px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
cursor:pointer;
position:relative;
}
.metric-row:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.metric-row.checked{background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 130%);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.metric-row.checked .metric-meta b{color:var(--brand-700)}
.metric-row.blocked{opacity:0.55;cursor:not-allowed;background:var(--card-sunk)}
.metric-row.blocked:hover{background:var(--card-sunk);box-shadow:inset 0 0 0 0.5px var(--hairline)}
.metric-box{
width:16px;height:16px;border-radius:var(--r-sm);
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;align-items:center;justify-content:center;
flex:none;
}
.metric-row.checked .metric-box{background:var(--brand);box-shadow:none}
.metric-box svg{width:11px;height:11px;color:var(--surface);stroke-width:2.4}
.metric-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.metric-meta b{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:-0.005em;line-height:1.25}
.metric-meta span{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.04em;font-weight:500;text-transform:uppercase}
.lock-ic{width:11px;height:11px;color:var(--muted);stroke-width:1.7;flex:none}
/* ─── Preview panel (screen 074) ──────────────────────────── */
.preview-panel{
background:var(--surface);
border-radius:var(--r-sm);
padding:13px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.prv-h{display:flex;flex-direction:column;gap:2px;margin-bottom:11px}
.prv-h b{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.prv-h span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
.prv-table{display:flex;flex-direction:column;gap:1px;background:var(--hairline);border-radius:var(--r-sm);padding:1px;overflow:hidden}
.prv-row{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
gap:1px;
background:var(--surface);
padding:7px 9px;
font-size:11px;
}
.prv-row.prv-head{
background:var(--card-sunk);
font-family:var(--font-mono);font-size:9.5px;font-weight:700;
letter-spacing:0.06em;color:var(--hint);text-transform:uppercase;
}
.prv-row div b{font-weight:700;color:var(--brand);font-family:var(--font-mono)}
.prv-sources{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;padding-top:11px;border-top:0.5px solid var(--hairline)}
.src-tag{
font-family:var(--font-mono);font-size:9px;font-weight:600;
letter-spacing:0.04em;text-transform:uppercase;
padding:3px 7px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
/* ─── Schedule cockpit (screen 075) ────────────────────────── */
.sched-grid{display:flex;flex-direction:column;gap:11px}
.freq-pick{display:flex;gap:7px;flex-wrap:wrap}
.freq-pill{
flex:1;min-width:120px;
display:flex;flex-direction:column;gap:3px;
padding:11px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
border:0;cursor:pointer;
text-align:left;
transition:all 0.12s ease;
}
.freq-pill b{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:-0.005em}
.freq-pill span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em}
.freq-pill:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.freq-pill.active{
background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 100%);
box-shadow:inset 0 0 0 0.5px var(--brand-100), 0 1px 2px rgba(31,0,167,0.06);
}
.freq-pill.active b{color:var(--brand-700)}
.freq-pill.active span{color:var(--brand)}
.recip-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:7px;
}
.recip-card{
display:flex;flex-direction:column;align-items:center;gap:5px;
padding:11px 9px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
text-align:center;
cursor:pointer;
transition:all 0.12s ease;
}
.recip-card:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.recip-card.active{
background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 100%);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.recip-card b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.25}
.recip-card span{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.04em;font-weight:500}
.recip-card.active b{color:var(--brand-700)}
.recip-role{
display:inline-block;
padding:1px 7px;border-radius:var(--r-full);
background:var(--brand);color:var(--surface);
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.06em;text-transform:uppercase;
margin-top:3px;
}
.recip-card:not(.active) .recip-role{background:var(--card-sunk);color:var(--muted);box-shadow:inset 0 0 0 0.5px var(--hairline)}
/* ─── Delivery method row (screen 075) ─────────────────────── */
.del-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.del-opt{
display:flex;align-items:center;gap:8px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
cursor:pointer;
flex:1;min-width:140px;
}
.del-opt:hover{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.del-opt.checked{
background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 130%);
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.del-box{
width:14px;height:14px;border-radius:var(--r-sm);
background:var(--surface);
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;align-items:center;justify-content:center;
flex:none;
}
.del-opt.checked .del-box{background:var(--brand);box-shadow:none}
.del-box svg{width:9px;height:9px;color:var(--surface);stroke-width:2.4}
.del-ic{width:13px;height:13px;color:var(--muted);stroke-width:1.7;flex:none}
.del-opt.checked .del-ic{color:var(--brand)}
.del-opt b{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:-0.005em}
.del-opt.checked b{color:var(--brand-700)}
/* ─── Next-run list (screen 075) ───────────────────────────── */
.next-run-list{display:flex;flex-direction:column;gap:5px}
.nr-row{
display:flex;align-items:center;gap:12px;
padding:10px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.nr-row.paused{opacity:0.6}
.nr-date{
display:flex;flex-direction:column;align-items:center;
flex:none;
min-width:42px;
padding:3px 6px;
background:var(--brand-50);
border-radius:var(--r-sm);
}
.nr-date b{font-size:11.5px;font-weight:700;color:var(--brand);letter-spacing:-0.005em;line-height:1.1}
.nr-date span{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.04em;font-weight:600}
.nr-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nr-meta b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.nr-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em}
.nr-status{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
padding:3px 8px;border-radius:var(--r-full);
background:var(--card-sunk);color:var(--muted);
box-shadow:inset 0 0 0 0.5px var(--hairline);
flex:none;
}
.nr-status.next{background:var(--brand);color:var(--surface);box-shadow:none}
.nr-status.paused{background:var(--card-sunk);color:var(--muted)}
/* ─── Audit summary list (screen 075) ──────────────────────── */
.audit-list{display:flex;flex-direction:column;gap:5px}
.audit-row{
display:flex;align-items:flex-start;gap:11px;
padding:9px 11px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.audit-row.ok{background-image:linear-gradient(180deg,var(--surface) 0%,var(--success-50) 200%)}
.audit-row.warn{background-image:linear-gradient(180deg,var(--surface) 0%,var(--warning-50) 200%)}
.audit-ic{
width:20px;height:20px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.audit-row.ok .audit-ic{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.audit-row.warn .audit-ic{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.audit-ic svg{width:11px;height:11px;stroke-width:2}
.audit-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.audit-meta b{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.audit-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em}
/* ─── Insight card body helper ─────────────────────────────── */
.ins-b{margin-top:7px;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.ins-b b{color:var(--ink);font-weight:600}
/* ─── Mobile · all Batch 09 components ─────────────────────── */
@media (max-width:768px){
/* Filter bar wraps vertically · groups become chip rail */
html body .rpt-filter-bar{flex-direction:column;align-items:stretch;gap:9px}
html body .rpt-filter-bar .fb-l{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;flex:none}
html body .rpt-filter-bar .fb-l::-webkit-scrollbar{display:none}
html body .rpt-filter-bar .fb-r{justify-content:flex-start}
/* Cadence rail: scroll horizontally with snap */
html body .cadence-rail{
display:flex;overflow-x:auto;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
padding-bottom:5px;gap:7px;
}
html body .cadence-rail::-webkit-scrollbar{display:none}
html body .crl-step{flex:0 0 86px;scroll-snap-align:start}
/* Stage timeline · stack label + bar + after */
html body .stg-row{
grid-template-columns:minmax(0,1fr) 50px;
grid-template-areas:"lbl after" "bar bar";
gap:7px 11px;
}
html body .stg-lbl{grid-area:lbl}
html body .stg-bar{grid-area:bar;height:18px}
html body .stg-after{grid-area:after}
/* Saved view grid · single column on mobile */
html body .sv-grid{grid-template-columns:1fr}
/* Builder grid · stack columns */
html body .builder-grid{grid-template-columns:1fr}
html body .metric-list{max-height:none}
/* Format pick · keep horizontal, smaller */
html body .fmt-pick{flex-direction:column}
html body .fmt-pill{min-width:0}
/* Freq pick · stack */
html body .freq-pick{flex-direction:column}
html body .freq-pill{min-width:0}
/* Preview table → 2-col on mobile */
html body .prv-row{grid-template-columns:1fr 1fr;font-size:10px}
html body .prv-row > div:nth-child(n+3){display:none}
/* Recipient grid stays 2-col */
html body .recip-grid{grid-template-columns:1fr 1fr}
}
/* ============================================================
BATCH 09 v1.0-r2 · OVERFLOW + TABLET/MOBILE CLEANUP
Containment for tablet 768px and mobile 375px · prevents
horizontal page overflow · compresses topbar and filter bar
for narrow viewports · converts mobile cadence rail to
stacked 2-column cards.
============================================================ */
/* ─── Global overflow containment ────────────────────────── */
html, body{max-width:100vw;overflow-x:hidden}
.app{max-width:100vw;overflow-x:hidden}
.main{min-width:0;max-width:100%;overflow-x:hidden}
.page{min-width:0;max-width:100%}
/* ─── Topbar safe layout at tablet/mobile ────────────────── */
.topbar{max-width:100%;min-width:0;flex-wrap:wrap;box-sizing:border-box}
.topbar > *{min-width:0;box-sizing:border-box}
.crumb-bar{min-width:0;flex:1;box-sizing:border-box}
.crumbs{min-width:0}
.crumbs b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block;vertical-align:bottom}
.crumb-nav{flex-shrink:0;min-width:0}
/* Tablet (≤1024px) · topbar compresses to stacked rows */
@media (max-width:1024px){
html body .topbar{padding:11px 14px;gap:8px;flex-wrap:wrap;align-items:center}
html body .topbar .back-master{flex:none}
html body .topbar .crumb-bar{
flex:1 1 100%;order:2;
flex-direction:column;align-items:flex-start;gap:7px;
padding:0;border:0;
}
html body .topbar .crumbs{font-size:12.5px;max-width:100%;width:100%}
html body .topbar .crumbs b{max-width:calc(100% - 8px)}
html body .topbar .crumb-nav{
width:100%;display:flex;gap:7px;flex-wrap:wrap;
}
html body .topbar .crumb-pill{
font-size:10.5px;padding:5px 10px;flex:0 1 auto;min-width:0;
}
html body .topbar .crumb-pill span{
max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body .topbar .top-actions{order:1;margin-left:auto;flex-shrink:0}
}
/* Mobile (≤768px) · pills become even smaller */
@media (max-width:768px){
html body .topbar{padding:9px 12px}
html body .topbar .crumb-pill span{max-width:88px;font-size:10px}
html body .topbar .top-actions{gap:5px}
html body .topbar .top-actions .btn{padding:5px 9px;font-size:11px}
html body .topbar .top-actions .iconbtn{width:30px;height:30px}
}
/* ─── Filter bar safe layout ─────────────────────────────── */
.rpt-filter-bar{max-width:100%;min-width:0;box-sizing:border-box}
.rpt-filter-bar .fb-l{max-width:100%;min-width:0;box-sizing:border-box}
.rpt-filter-bar .fb-r{flex-shrink:0;min-width:0;box-sizing:border-box}
/* Tablet · filter chips wrap inside the bar (no page overflow) */
@media (max-width:1024px){
html body .rpt-filter-bar{flex-direction:column;align-items:stretch;gap:9px}
html body .rpt-filter-bar .fb-l{
flex-wrap:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:4px;
gap:8px;
width:100%;
}
html body .rpt-filter-bar .fb-l::-webkit-scrollbar{display:none}
html body .rpt-filter-bar .fb-grp{flex-shrink:0;flex-grow:0}
html body .rpt-filter-bar .fb-r{width:100%;justify-content:flex-start;gap:7px;flex-wrap:wrap}
}
/* Page-level KPI strip · stays contained */
.rpt-kpi-strip{max-width:100%;min-width:0;box-sizing:border-box}
.rpt-kpi{min-width:0;box-sizing:border-box}
/* ─── Mobile cadence rail · convert to 2-col stacked cards ── */
@media (max-width:768px){
html body .cadence-rail{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
overflow-x:visible;
scroll-snap-type:none;
padding-bottom:0;
}
html body .cadence-rail .crl-step{
flex:none;
width:auto;
flex-direction:row;
align-items:center;
gap:9px;
padding:9px 11px;
text-align:left;
scroll-snap-align:none;
min-height:60px;
}
html body .cadence-rail .crl-step .crl-num{
margin-bottom:0;
flex:none;
width:24px;height:24px;
font-size:11px;
}
html body .cadence-rail .crl-step .crl-lbl{
flex:1;min-width:0;
margin-bottom:0;
align-items:flex-start;
gap:1px;
}
html body .cadence-rail .crl-step .crl-lbl b{font-size:11px;line-height:1.2}
html body .cadence-rail .crl-step .crl-lbl span{font-size:8px}
html body .cadence-rail .crl-step .crl-pct{
flex:none;
font-size:13px;
margin-left:auto;
}
}
/* ─── Insight cards · safe text wrap ─────────────────────── */
.insight-card{max-width:100%;min-width:0;box-sizing:border-box}
.insight-card .ins-h{flex-wrap:wrap;min-width:0}
.insight-card .ins-h b{min-width:0;flex:1}
/* ─── Heat-grid · safe horizontal scroll at narrow widths ── */
@media (max-width:1024px){
html body .rpt-card-b .heat-grid{
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
html body .rpt-card-b .heat-grid::-webkit-scrollbar{display:none}
}
/* ─── rpt-row-37 (2-col layout) · stack at tablet ────────── */
@media (max-width:1024px){
html body .rpt-row-37{grid-template-columns:1fr;gap:12px}
}
/* ─── Stage timeline · ensure label column doesn't push width ── */
.stg-timeline{max-width:100%;min-width:0}
.stg-row{min-width:0;box-sizing:border-box}
.stg-lbl{min-width:0;overflow:hidden}
.stg-lbl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stg-lbl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ─── Saved view cards · prevent text overflow ───────────── */
.sv-card{max-width:100%;min-width:0;box-sizing:border-box}
.sv-card-h{min-width:0}
.sv-card-meta{min-width:0}
.sv-card-meta b{word-wrap:break-word;overflow-wrap:break-word}
/* ─── Builder grid · stack earlier at tablet (was 768) ───── */
@media (max-width:1024px){
html body .builder-grid{grid-template-columns:1fr;gap:11px}
html body .metric-list{max-height:340px}
}
/* ─── Schedule cockpit · safe recipient grid ──────────────── */
.recip-grid{max-width:100%;min-width:0}
.recip-card{min-width:0;box-sizing:border-box}
/* ─── Next-run list · safe text wrap ─────────────────────── */
.nr-meta{min-width:0}
.nr-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.nr-meta span{white-space:normal;line-height:1.4}
/* ============================================================
BATCH 10 v1.0 · ADMIN FOUNDATION COMPONENTS
New component classes for screens 022, 023, 076-080.
============================================================ */
/* ─── Stepper (022 import flow) ──────────────────────────── */
.b10-stepper{
display:flex;align-items:center;gap:0;
flex-wrap:wrap;
}
.b10-step{
display:flex;align-items:center;gap:10px;
padding:10px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
flex:1;min-width:140px;
}
.b10-step.done{background-image:linear-gradient(180deg,var(--surface) 0%,var(--success-50) 130%)}
.b10-step.active{
background-image:linear-gradient(180deg,var(--brand-50) 0%,var(--brand-100) 100%);
box-shadow:inset 0 0 0 0.5px var(--brand-100), 0 1px 2px rgba(31,0,167,0.06);
}
.b10-step-num{
width:26px;height:26px;border-radius:var(--r-full);
background:var(--card-sunk);color:var(--muted);
font-family:var(--font-mono);font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-step.done .b10-step-num{background:var(--success-2);color:var(--surface);box-shadow:none}
.b10-step.done .b10-step-num svg{width:13px;height:13px;stroke-width:2.4}
.b10-step.active .b10-step-num{background:var(--brand);color:var(--surface);box-shadow:none}
.b10-step-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-step-l b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.2}
.b10-step.active .b10-step-l b{color:var(--brand-700)}
.b10-step.done .b10-step-l b{color:var(--success-dim)}
.b10-step-l span{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.04em;font-weight:500;text-transform:uppercase;line-height:1.3}
.b10-step-conn{
flex:0 0 24px;height:2px;
background:var(--hairline);
border-radius:var(--r-full);
}
.b10-step-conn.done{background:var(--success-2)}
/* ─── Map list (022) ─────────────────────────────────────── */
.b10-map-list{display:flex;flex-direction:column;gap:5px}
.b10-map-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
align-items:center;gap:11px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-map-row.matched{background-image:linear-gradient(180deg,var(--surface) 0%,var(--success-50) 200%)}
.b10-map-row.needs{background-image:linear-gradient(180deg,var(--surface) 0%,var(--warning-50) 200%)}
.b10-map-row.skip{opacity:0.6}
.b10-map-l, .b10-map-r{min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-map-l b, .b10-map-r b{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;font-family:var(--font-mono)}
.b10-map-l span, .b10-map-r span{font-size:10px;color:var(--muted);line-height:1.3}
.b10-map-arrow{
width:20px;height:20px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.b10-map-arrow svg{width:11px;height:11px;stroke-width:2}
.b10-map-row.skip .b10-map-arrow{background:var(--card-sunk);color:var(--muted);box-shadow:inset 0 0 0 0.5px var(--hairline)}
.b10-map-status{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
padding:3px 7px;border-radius:var(--r-full);
background:var(--card-sunk);color:var(--muted);
box-shadow:inset 0 0 0 0.5px var(--hairline);
flex:none;
}
.b10-map-status.ok{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.b10-map-status.warn{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
/* ─── Stage governance (076) ─────────────────────────────── */
.b10-stage-list{display:flex;flex-direction:column;gap:7px}
.b10-stage-row{
display:grid;
grid-template-columns:54px minmax(0,1fr) auto;
gap:13px;align-items:center;
padding:11px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
background-image:linear-gradient(180deg,var(--surface) 0%,var(--brand-50) 300%);
}
.b10-stage-num{
display:flex;flex-direction:column;align-items:center;gap:3px;
width:42px;height:42px;border-radius:var(--r-sm);
background:var(--brand-50);color:var(--brand);
font-family:var(--font-mono);font-size:14px;font-weight:700;
justify-content:center;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
position:relative;
flex:none;
}
.b10-stage-num span{line-height:1}
.b10-stage-lock{
width:9px;height:9px;color:var(--brand);
stroke-width:2;
position:absolute;top:3px;right:3px;
opacity:0.6;
}
.b10-stage-meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.b10-stage-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.b10-stage-h b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-stage-badge{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
padding:2px 7px;border-radius:var(--r-full);
background:var(--brand);color:var(--surface);
}
.b10-stage-desc{font-size:11px;color:var(--muted);line-height:1.45}
.b10-stage-deps{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.b10-stage-actions{display:flex;gap:3px;flex:none}
/* ─── Flow steps (076 / 080) ─────────────────────────────── */
.b10-flow-steps{display:flex;flex-direction:column;gap:7px}
.b10-flow-step{
display:flex;align-items:flex-start;gap:11px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-flow-num{
width:22px;height:22px;border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
font-family:var(--font-mono);font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.b10-flow-step > div:last-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-flow-step > div:last-child b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-flow-step > div:last-child span{font-size:10.5px;color:var(--muted);line-height:1.4}
/* ─── Role cards (077) ───────────────────────────────────── */
.b10-role-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:12px;
}
.b10-role-card{
display:flex;flex-direction:column;gap:9px;
padding:14px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
background-image:linear-gradient(180deg,var(--surface) 0%,var(--brand-50) 280%);
}
.b10-role-h{display:flex;align-items:center;gap:11px}
.b10-role-ic{
width:38px;height:38px;border-radius:var(--r-sm);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;flex:none;
}
.b10-role-ic svg{width:16px;height:16px;stroke-width:1.85}
.b10-role-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-role-meta b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-role-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:600}
.b10-role-desc{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.b10-role-desc b{color:var(--ink);font-weight:600}
.b10-role-perms{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.b10-perm-chip{
font-family:var(--font-mono);font-size:9px;font-weight:600;
color:var(--ink-3);
padding:3px 8px;border-radius:var(--r-full);
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
letter-spacing:0.04em;
}
/* ─── Source list (078) ──────────────────────────────────── */
.b10-source-list{display:flex;flex-direction:column;gap:5px}
.b10-source-row{
display:grid;
grid-template-columns:32px minmax(0,1fr) 120px 40px 26px;
align-items:center;gap:11px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-source-ic{
width:32px;height:32px;border-radius:var(--r-sm);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;flex:none;
box-shadow:inset 0 0 0 0.5px var(--brand-100);
}
.b10-source-ic svg{width:14px;height:14px;stroke-width:1.75}
.b10-source-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-source-meta b{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-source-meta span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.04em;font-weight:500}
.b10-quality{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
padding:3px 9px;border-radius:var(--r-full);
text-align:center;
}
.b10-quality.highest{background:var(--brand);color:var(--surface)}
.b10-quality.high{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.b10-quality.medium{background:var(--brand-50);color:var(--brand);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.b10-quality.low{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.b10-quality.note{background:var(--card-sunk);color:var(--muted);box-shadow:inset 0 0 0 0.5px var(--hairline)}
/* ─── Toggle switch ──────────────────────────────────────── */
.b10-toggle{
width:32px;height:18px;border-radius:var(--r-full);
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:inline-block;position:relative;cursor:pointer;flex:none;
}
.b10-toggle.on{background:var(--brand);box-shadow:none}
.b10-toggle span{
position:absolute;top:2px;left:2px;
width:14px;height:14px;border-radius:var(--r-full);
background:var(--surface);
transition:transform 0.18s ease;
box-shadow:0 1px 2px rgba(15,12,28,0.12);
}
.b10-toggle.on span{transform:translateX(14px)}
/* ─── Tag grid (078) ─────────────────────────────────────── */
.b10-tag-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:9px;
}
.b10-tag-card{
display:flex;flex-direction:column;gap:5px;
padding:11px 13px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-tag-h{display:flex;align-items:center;justify-content:space-between;gap:9px}
.b10-tag-chip{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.06em;text-transform:uppercase;
padding:4px 9px;border-radius:var(--r-full);
}
.b10-tag-chip svg{width:10px;height:10px;stroke-width:1.85}
.b10-tag-count{
font-family:var(--font-mono);font-size:11.5px;font-weight:700;
color:var(--ink);letter-spacing:-0.005em;
}
.b10-tag-desc{font-size:10.5px;color:var(--muted);line-height:1.45}
/* ─── Branch governance cards (079) ──────────────────────── */
.b10-branch-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:12px;
}
.b10-branch-card{
display:flex;flex-direction:column;gap:11px;
padding:14px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
background-image:linear-gradient(180deg,var(--surface) 0%,var(--brand-50) 280%);
}
.b10-branch-h{display:flex;align-items:center;gap:11px}
.b10-branch-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b10-branch-meta b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-branch-meta span{font-size:11px;color:var(--muted);line-height:1.3}
.b10-branch-status{
font-family:var(--font-mono);font-size:8.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
padding:3px 8px;border-radius:var(--r-full);
white-space:nowrap;
flex:none;
}
.b10-branch-status.top{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.b10-branch-status.coaching{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.b10-branch-status.normal{background:var(--brand-50);color:var(--brand);box-shadow:inset 0 0 0 0.5px var(--brand-100)}
.b10-branch-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px 13px;
padding:11px 0;
border-top:0.5px solid var(--hairline);
border-bottom:0.5px solid var(--hairline);
}
.b10-branch-stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.b10-branch-stat span{font-family:var(--font-mono);font-size:8.5px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;font-weight:600}
.b10-branch-stat b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;font-family:var(--font-mono)}
.b10-branch-foot{
display:flex;align-items:center;gap:9px;
flex-wrap:wrap;
}
.b10-branch-note{flex:1;min-width:0;font-size:10.5px;color:var(--muted);font-style:italic;line-height:1.4}
/* ─── SLA list (080) ─────────────────────────────────────── */
.b10-sla-list{display:flex;flex-direction:column;gap:5px}
.b10-sla-row{
display:grid;
grid-template-columns:minmax(0,1fr) 80px 26px;
align-items:center;gap:13px;
padding:9px 12px;
background:var(--surface);
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.b10-sla-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.b10-sla-meta b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em}
.b10-sla-meta span{font-size:10.5px;color:var(--muted);line-height:1.4}
.b10-sla-value{
font-family:var(--font-mono);font-size:14px;font-weight:700;
color:var(--brand);letter-spacing:-0.015em;
text-align:right;
}
/* ─── Channel list (080) ─────────────────────────────────── */
.b10-channel-list{display:flex;flex-direction:column;gap:5px}
/* ─── Mobile · all Batch 10 components ──────────────────── */
@media (max-width:768px){
/* Stepper · stack vertically */
html body .b10-stepper{flex-direction:column;gap:5px}
html body .b10-step{width:100%;min-width:0}
html body .b10-step-conn{display:none}
/* Map list · 2-row layout */
html body .b10-map-row{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"l status" "arrow r";
gap:7px 11px;
}
html body .b10-map-l{grid-area:l}
html body .b10-map-arrow{grid-area:arrow}
html body .b10-map-r{grid-area:r}
html body .b10-map-status{grid-area:status;justify-self:end}
/* Stage row · keep readable */
html body .b10-stage-row{
grid-template-columns:48px minmax(0,1fr);
grid-template-areas:"num meta" "actions actions";
gap:9px;
}
html body .b10-stage-num{grid-area:num;width:42px;height:42px}
html body .b10-stage-meta{grid-area:meta}
html body .b10-stage-actions{grid-area:actions;justify-content:flex-end}
/* Role grid · single column */
html body .b10-role-grid{grid-template-columns:1fr}
/* Source row · stack value pills below */
html body .b10-source-row{
grid-template-columns:32px minmax(0,1fr) auto;
grid-template-areas:"ic meta toggle" "quality quality quality";
gap:7px 11px;
}
html body .b10-source-row .b10-source-ic{grid-area:ic}
html body .b10-source-row .b10-source-meta{grid-area:meta}
html body .b10-source-row .b10-quality{grid-area:quality;justify-self:start}
html body .b10-source-row .b10-toggle{grid-area:toggle;justify-self:end}
html body .b10-source-row .sv-btn{display:none}
/* Tag grid · 1-col mobile */
html body .b10-tag-grid{grid-template-columns:1fr}
/* Branch grid · single column */
html body .b10-branch-grid{grid-template-columns:1fr}
html body .b10-branch-stats{grid-template-columns:1fr 1fr;gap:6px 11px}
/* SLA list · stack value below label */
html body .b10-sla-row{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"meta button" "value button";
gap:3px 9px;
}
html body .b10-sla-meta{grid-area:meta}
html body .b10-sla-value{grid-area:value;text-align:left}
html body .b10-sla-row .sv-btn{grid-area:button}
}
/* ============================================================
BATCH 10 v1.0-r2 · REFERENCE PAGE UTILITY CLASSES
Absorbs repeated inline icon background/ring patterns used
in references/components-reference.html and references/pdf-and-qa-patterns.html
to keep the atomic library clean for Quasar conversion.
============================================================ */
.ref-ic-success{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.ref-ic-warn{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.ref-ic-danger{background:var(--danger-50);color:var(--danger-dim);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
/* State-card icon circle · used in references/components-reference.html state patterns */
.state-ic{
margin:13px auto 7px;
width:42px;height:42px;
border-radius:var(--r-full);
background:var(--brand-50);color:var(--brand);
display:flex;align-items:center;justify-content:center;
}
.state-ic.state-ic-warn{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.state-ic.state-ic-danger{background:var(--danger-50);color:var(--danger-dim);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.state-ic.state-ic-muted{background:var(--card-sunk);color:var(--muted);box-shadow:inset 0 0 0 0.5px var(--hairline)}
/* ─── LAYER 2 · PATTERN B GLOBAL SHELL · unique-block overlay ─────────── */
/* 156 rule blocks with >=1 selector unique to Pattern B. */
.mono{font-family:var(--font-mono)}
.shell{
display:grid;
grid-template-columns:var(--side-w) 1fr;
grid-template-rows:var(--top-h) 1fr;
grid-template-areas:
"side topbar"
"side main";
min-height:100vh;
background:var(--shell-bg);
}
.shell.collapsed{grid-template-columns:var(--side-w-collapsed) 1fr}
.shell-side{
grid-area:side;
background:var(--shell-side);
border-right:0.5px solid var(--hairline);
display:flex;
flex-direction:column;
position:sticky;
top:0;
height:100vh;
overflow:hidden;
z-index:5;
}
.shell-topbar{
grid-area:topbar;
background:var(--surface);
border-bottom:0.5px solid var(--hairline);
display:flex;
align-items:center;
gap:14px;
padding:0 22px;
position:sticky;
top:0;
z-index:4;
}
.shell-main{
grid-area:main;
padding:24px 28px 80px;
min-width:0;
}
.module-switcher{
position:relative;
padding:14px 12px 12px;
border-bottom:0.5px solid var(--hairline);
}
.ms-trigger{
width:100%;
display:flex;
align-items:center;
gap:11px;
padding:9px 11px;
border-radius:var(--r-sm);
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
transition:background 0.12s ease;
}
.ms-trigger:hover{background:var(--brand-50)}
.ms-trigger.open{background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-soft)}
.ms-icon{
width:32px;
height:32px;
border-radius:var(--r-sm);
background:var(--brand);
color:var(--surface);
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.ms-icon svg{width:16px;height:16px;stroke-width:1.7}
.ms-label{
flex:1;
min-width:0;
text-align:left;
display:flex;
flex-direction:column;
gap:1px;
}
.ms-label b{font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink);line-height:1.25}
.ms-label span{font-family:var(--font-mono);font-size:9.5px;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.ms-chev{
flex:none;
width:14px;
height:14px;
color:var(--hint);
}
.ms-chev svg{width:14px;height:14px;stroke-width:2}
.ms-panel{
position:absolute;
top:calc(100% + 6px);
left:12px;
right:12px;
background:var(--surface);
border-radius:var(--r-md);
box-shadow:0 1px 2px rgba(15,12,28,0.04),0 8px 28px rgba(15,12,28,0.10),inset 0 0 0 0.5px var(--hairline);
padding:8px;
z-index:20;
max-height:calc(100vh - 100px);
overflow-y:auto;
}
.ms-panel-h{
padding:8px 10px 10px;
border-bottom:0.5px solid var(--hairline);
margin-bottom:6px;
}
.ms-panel-h b{display:block;font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:-0.005em}
.ms-panel-h span{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-top:2px}
.ms-item{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius:var(--r-sm);
cursor:pointer;
transition:background 0.1s ease;
text-decoration:none;
color:inherit;
}
.ms-item:hover{background:var(--card-sunk)}
.ms-item.active{background:var(--brand-50)}
.ms-item.active .ms-item-ic{background:var(--brand);color:var(--surface)}
.ms-item.active .ms-item-l b{color:var(--brand)}
.ms-item-ic{
width:28px;
height:28px;
border-radius:var(--r-sm);
background:var(--card-sunk);
color:var(--ink-2);
display:flex;
align-items:center;
justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.ms-item-ic svg{width:14px;height:14px;stroke-width:1.7}
.ms-item-l{flex:1;min-width:0}
.ms-item-l b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:-0.005em;line-height:1.3}
.ms-item-l span{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:1px}
.ms-item-status{
flex:none;
font-family:var(--font-mono);
font-size:9px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
padding:2px 7px;
border-radius:var(--r-full);
background:var(--card-sunk);
}
.ms-item-status.live{background:var(--success-50);color:var(--success-dim)}
.ms-item-status.soon{background:var(--warning-50);color:var(--warning-dim)}
.side-nav{
flex:1;
overflow-y:auto;
padding:10px 8px 16px;
display:flex;
flex-direction:column;
gap:14px;
}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:var(--r-full)}
.side-grp{display:flex;flex-direction:column;gap:1px}
.side-grp-h{
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--hint);
padding:6px 12px 4px;
}
.nav-item{
display:flex;
align-items:center;
gap:11px;
padding:8px 12px 8px 14px;
border-radius:var(--r-sm);
font-size:13px;
font-weight:500;
color:var(--ink-2);
position:relative;
transition:background 0.1s ease, color 0.1s ease;
text-decoration:none;
}
.nav-item:hover{background:var(--card-sunk);color:var(--ink)}
.nav-item svg{width:15px;height:15px;stroke-width:1.7;color:var(--muted);flex:none}
.nav-item .nav-count{
margin-left:auto;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:600;
color:var(--hint);
letter-spacing:0.04em;
padding:2px 7px;
border-radius:var(--r-full);
background:var(--card-sunk);
flex:none;
}
.nav-item.active{
background:var(--brand-50);
color:var(--brand);
font-weight:600;
}
.nav-item.active::before{
content:'';
position:absolute;
left:0;
top:7px;
bottom:7px;
width:3px;
background:var(--brand);
border-radius:var(--r-full);
}
.nav-item.active svg{color:var(--brand)}
.nav-item.active .nav-count{background:var(--brand);color:var(--surface)}
.nav-item.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}
.nav-item.disabled .nav-soon{
margin-left:auto;
font-family:var(--font-mono);
font-size:8.5px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--warning-dim);
padding:2px 6px;
border-radius:var(--r-full);
background:var(--warning-50);
}
.side-foot{
padding:11px 12px;
border-top:0.5px solid var(--hairline);
display:flex;
align-items:center;
gap:10px;
}
.side-foot .av{
width:32px;
height:32px;
border-radius:var(--r-full);
background:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);
color:var(--surface);
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.side-foot .sf-meta{flex:1;min-width:0}
.side-foot .sf-meta b{display:block;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .sf-meta span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-collapse{
width:30px;
height:30px;
border-radius:var(--r-sm);
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
background:var(--card-sunk);
flex:none;
}
.tb-collapse:hover{color:var(--ink);background:var(--brand-50)}
.tb-collapse svg{width:15px;height:15px;stroke-width:2}
.tb-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);min-width:0;flex:1}
.tb-crumb b{color:var(--ink);font-weight:600}
.tb-crumb .sep{color:var(--hint);font-weight:400}
.tb-crumb .module-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px 4px 8px;
border-radius:var(--r-full);
background:var(--brand-50);
color:var(--brand);
font-size:11.5px;
font-weight:600;
letter-spacing:-0.005em;
flex:none;
}
.tb-crumb .module-pill svg{width:12px;height:12px;stroke-width:2}
.tb-search{
flex:1.4;
max-width:480px;
position:relative;
display:flex;
align-items:center;
}
.tb-search svg{position:absolute;left:12px;width:14px;height:14px;color:var(--hint);stroke-width:2;pointer-events:none}
.tb-search input{
width:100%;
height:34px;
padding:0 12px 0 34px;
font-family:var(--font-sans);
font-size:12.5px;
color:var(--ink);
background:var(--card-sunk);
border:0;
border-radius:var(--r-sm);
box-shadow:inset 0 0 0 0.5px var(--hairline);
outline:none;
transition:box-shadow 0.12s ease, background 0.12s ease;
}
.tb-search input:focus{background:var(--surface);box-shadow:inset 0 0 0 1px var(--brand)}
.tb-search input::placeholder{color:var(--hint)}
.tb-search .kbd{position:absolute;right:11px;font-family:var(--font-mono);font-size:9.5px;color:var(--hint);background:var(--surface);padding:2px 5px;border-radius:var(--r-full);box-shadow:inset 0 0 0 0.5px var(--hairline);letter-spacing:0.04em;font-weight:600}
.tb-right{display:flex;align-items:center;gap:8px;flex:none}
.tb-branch{
display:flex;
align-items:center;
gap:7px;
padding:5px 10px 5px 8px;
border-radius:var(--r-full);
background:var(--card-sunk);
box-shadow:inset 0 0 0 0.5px var(--hairline);
font-size:11.5px;
font-weight:600;
color:var(--ink-2);
letter-spacing:-0.005em;
}
.tb-branch:hover{background:var(--brand-50)}
.tb-branch .br-ic{
width:18px;
height:18px;
border-radius:var(--r-sm);
background:var(--brand);
color:var(--surface);
display:flex;
align-items:center;
justify-content:center;
}
.tb-branch .br-ic svg{width:10px;height:10px;stroke-width:2}
.tb-branch svg.chev{width:12px;height:12px;stroke-width:2;color:var(--hint)}
.tb-create{
position:relative;
display:flex;
align-items:center;
gap:6px;
padding:6px 13px 6px 11px;
border-radius:var(--r-sm);
background:var(--brand);
color:var(--surface);
font-size:12px;
font-weight:600;
letter-spacing:-0.005em;
transition:background 0.12s ease;
}
.tb-create:hover{background:var(--brand-dim)}
.tb-create svg{width:13px;height:13px;stroke-width:2.5}
.tb-create svg.chev{stroke-width:2;margin-left:1px;opacity:0.85}
.tb-icon{
width:32px;
height:32px;
border-radius:var(--r-sm);
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
position:relative;
}
.tb-icon:hover{background:var(--card-sunk);color:var(--ink)}
.tb-icon svg{width:15px;height:15px;stroke-width:1.7}
.tb-icon .badge{
position:absolute;
top:5px;
right:5px;
width:7px;
height:7px;
border-radius:var(--r-full);
background:var(--danger);
box-shadow:0 0 0 2px var(--surface);
}
.tb-av{
width:30px;
height:30px;
border-radius:var(--r-full);
background:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);
color:var(--surface);
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
margin-left:2px;
}
.tb-create-menu{
position:absolute;
top:calc(100% + 6px);
right:0;
width:240px;
background:var(--surface);
border-radius:var(--r-md);
box-shadow:0 1px 2px rgba(15,12,28,0.04),0 8px 28px rgba(15,12,28,0.10),inset 0 0 0 0.5px var(--hairline);
padding:7px;
z-index:20;
}
.tb-create-menu .cm-h{padding:7px 10px 8px;border-bottom:0.5px solid var(--hairline);margin-bottom:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--hint)}
.tb-create-menu .cm-item{
display:flex;
align-items:center;
gap:10px;
padding:7px 10px;
border-radius:var(--r-sm);
font-size:12.5px;
color:var(--ink-2);
font-weight:500;
cursor:pointer;
}
.tb-create-menu .cm-item:hover{background:var(--brand-50);color:var(--brand)}
.tb-create-menu .cm-item svg{width:14px;height:14px;stroke-width:1.7;color:var(--muted);flex:none}
.tb-create-menu .cm-item:hover svg{color:var(--brand)}
.tb-create-menu .cm-item .cm-sc{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:var(--hint);letter-spacing:0.04em;font-weight:600}
.page-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:22px;
flex-wrap:wrap;
}
.page-head h1{font-size:24px;font-weight:600;letter-spacing:-0.015em;margin:0;line-height:1.2}
.page-head .ph-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5;max-width:640px}
.page-head .ph-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip.ok{background:var(--success-50);color:var(--success-dim);box-shadow:inset 0 0 0 0.5px var(--success-soft)}
.chip.warn{background:var(--warning-50);color:var(--warning-dim);box-shadow:inset 0 0 0 0.5px var(--warning-soft)}
.chip.dot::before{content:'';width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.stat-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;
margin-bottom:22px;
}
.stat{
background:var(--card);
padding:16px 17px;
border-radius:var(--r-md);
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;
flex-direction:column;
gap:6px;
}
.stat .st-l{
display:flex;
align-items:center;
gap:7px;
font-family:var(--font-mono);
font-size:10px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--hint);
}
.stat .st-l::before{content:'';width:6px;height:6px;border-radius:var(--r-full);background:var(--brand)}
.stat .st-v{font-size:22px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);line-height:1.1}
.stat .st-v small{font-size:11px;color:var(--muted);font-weight:500;margin-left:3px}
.stat .st-d{font-size:11px;color:var(--muted);line-height:1.4}
.stat.accent{background:linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--brand-soft)}
.stat.accent .st-l{color:var(--brand)}
.panel{
background:var(--card);
border-radius:var(--r-md);
box-shadow:inset 0 0 0 0.5px var(--hairline);
overflow:hidden;
}
.panel-h{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 17px;
border-bottom:0.5px solid var(--hairline);
}
.panel-h b{font-size:13px;font-weight:600;letter-spacing:-0.005em}
.panel-h .panel-sub{font-family:var(--font-mono);font-size:10px;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.panel-b{padding:14px 17px}
.act-list{display:flex;flex-direction:column;gap:9px}
.act{
display:flex;
align-items:center;
gap:11px;
padding:11px 13px;
border-radius:var(--r-sm);
background:var(--card-sunk);
font-size:12px;
}
.act .act-ic{
width:30px;
height:30px;
border-radius:var(--r-sm);
background:var(--surface);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
flex:none;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.act .act-ic svg{width:14px;height:14px;stroke-width:1.7}
.act .act-l{flex:1;min-width:0}
.act .act-l b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.3}
.act .act-l span{display:block;font-size:11px;color:var(--muted);line-height:1.45;margin-top:1px}
.act .act-meta{font-family:var(--font-mono);font-size:10px;color:var(--hint);letter-spacing:0.04em;font-weight:600;flex:none}
.mob-shell{display:none}
.mob-bottom{display:none}
@media (max-width:768px) {
html body .shell-side{display:none}
html body .shell-topbar{
padding:0 12px;
gap:8px;
height:48px;
}
html body .shell-main{padding:14px 12px 90px}
html body .tb-collapse{
width:28px;
height:28px;
}
html body .tb-crumb{flex:1;font-size:11.5px;overflow:hidden}
html body .tb-crumb .module-pill{padding:3px 9px 3px 7px;font-size:11px}
html body .tb-crumb .crumb-current,html body .tb-crumb .crumb-parent,html body .tb-crumb .sep{display:none}
html body .tb-search{display:none}
html body .tb-right{gap:4px}
html body .tb-branch{display:none}
html body .tb-create{padding:5px 10px;font-size:11px}
html body .tb-create .create-label{display:none}
html body .tb-icon{width:28px;height:28px}
html body .tb-icon svg{width:13px;height:13px}
html body .tb-av{width:26px;height:26px;font-size:10px}
html body .mob-bottom{
display:grid;
grid-template-columns:repeat(5,1fr);
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--surface);
border-top:0.5px solid var(--hairline);
height:62px;
z-index:30;
padding-bottom:env(safe-area-inset-bottom);
}
html body .mob-bottom a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
color:var(--muted);
font-size:9.5px;
font-weight:600;
letter-spacing:-0.005em;
}
html body .mob-bottom a svg{width:18px;height:18px;stroke-width:1.7}
html body .mob-bottom a.active{color:var(--brand)}
html body .mob-bottom a.active svg{stroke-width:2}
html body .stat-grid{grid-template-columns:1fr 1fr;gap:8px}
html body .stat{padding:13px 14px}
html body .row-2{grid-template-columns:1fr;gap:12px}
html body .page-head h1{font-size:20px}
html body .mob-module-sheet{
display:flex;
flex-direction:column;
position:fixed;
inset:0;
background:var(--surface);
z-index:50;
overflow-y:auto;
}
html body .mob-module-sheet-h{
display:flex;
align-items:center;
justify-content:space-between;
padding:13px 16px;
border-bottom:0.5px solid var(--hairline);
position:sticky;
top:0;
background:var(--surface);
z-index:1;
}
html body .mob-module-sheet-h b{font-size:15px;font-weight:600;letter-spacing:-0.01em}
html body .mob-module-sheet-h .close{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--muted)}
html body .mob-module-sheet-h .close svg{width:16px;height:16px;stroke-width:2}
html body .mob-module-sheet .ms-grid{
padding:14px;
display:grid;
grid-template-columns:1fr;
gap:8px;
}
html body .mob-module-sheet .ms-grid .ms-item{padding:11px 12px}
html body .mob-module-sheet .ms-grid .ms-item .ms-item-ic{width:32px;height:32px}
}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.demo-card{
background:var(--card);
border-radius:var(--r-md);
padding:16px 18px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
display:flex;
flex-direction:column;
gap:10px;
text-decoration:none;
color:inherit;
transition:transform 0.1s ease,box-shadow 0.12s ease;
}
.demo-card:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 0.5px var(--brand-soft),0 4px 14px rgba(31,0,167,0.06)}
.demo-card .dc-h{display:flex;align-items:center;gap:10px}
.demo-card .dc-ic{
width:34px;
height:34px;
border-radius:var(--r-sm);
background:var(--brand-50);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
}
.demo-card .dc-ic svg{width:16px;height:16px;stroke-width:1.7}
.demo-card .dc-h .dc-num{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--brand);font-weight:700;letter-spacing:0.08em}
.demo-card b{font-size:13.5px;font-weight:600;letter-spacing:-0.005em;line-height:1.2}
.demo-card span{font-size:11.5px;color:var(--muted);line-height:1.5}
.brand-glyph i{color:var(--brand-soft);font-style:normal}
.brand-meta b{display:block;font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink);line-height:1.2}
.brand-meta span{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:0.08em;margin-top:1px}
.docs-shell{
max-width:1080px;
margin:0 auto;
padding:48px 32px 80px;
}
.docs-shell h1{font-size:30px;font-weight:600;letter-spacing:-0.015em;margin:0 0 6px}
.docs-shell h2{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin:36px 0 12px}
.docs-shell h3{font-size:15px;font-weight:600;letter-spacing:-0.005em;margin:22px 0 8px;color:var(--ink-2)}
.docs-shell p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
.docs-shell ul,.docs-shell ol{font-size:13.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;padding-left:22px}
.docs-shell li{margin:3px 0}
.docs-shell code{font-family:var(--font-mono);font-size:12px;background:var(--card-sunk);padding:1px 6px;border-radius:var(--r-full);color:var(--brand)}
.docs-shell .lead{font-size:14.5px;color:var(--muted);margin:0 0 24px;max-width:780px;line-height:1.6}
.compare-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin:18px 0 24px;
}
.compare-card{
background:var(--card);
border-radius:var(--r-md);
padding:18px 20px;
box-shadow:inset 0 0 0 0.5px var(--hairline);
}
.compare-card.bad{background:linear-gradient(180deg,var(--danger-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--danger-soft)}
.compare-card.good{background:linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 80%);box-shadow:inset 0 0 0 0.5px var(--brand-soft)}
.compare-card .ct-label{
display:inline-flex;
align-items:center;
gap:6px;
font-family:var(--font-mono);
font-size:9.5px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--danger-dim);
margin-bottom:8px;
}
.compare-card.good .ct-label{color:var(--brand)}
.compare-card h3{margin-top:0}
.compare-card ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-2)}
@media (max-width:768px) {
html body .docs-shell{padding:24px 14px 80px}
html body .docs-shell h1{font-size:24px}
html body .docs-shell h2{font-size:17px}
html body .compare-grid{grid-template-columns:1fr}
}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tag{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--hint);padding:4px 9px;background:var(--card-sunk);border-radius:var(--r-full);box-shadow:inset 0 0 0 0.5px var(--hairline)}
.tag.brand{color:var(--brand);background:var(--brand-50);box-shadow:inset 0 0 0 0.5px var(--brand-soft)}
.sect-divider{
height:0.5px;
background:var(--hairline);
margin:32px 0;
}
/* ═══════════════════════════════════════════════════════════════════════ */
/* CLIENT DEMO ADDITIONS · v1.0 */
/* ═══════════════════════════════════════════════════════════════════════ */
/* ─── Landing-page accent tokens (used by master index.html) ──────────── */
:root{
--gold:#FFB400;
--gold-soft:#FFD66E;
--gold-border:#F0CB6E;
--gold-bg:#FFF7E6;
--gold-dim:#C99100;
--gold-text:#5C4200;
--gold-text-2:#604400;
}
/* ─── Combined-package nav strip (replaces inline style block) ───────── */
.cp-nav-strip{
display:flex;align-items:center;justify-content:space-between;gap:12px;
max-width:1320px;margin:32px auto 24px;padding:14px 18px;
border:0.5px solid var(--border);border-radius:14px;
background:var(--surface);box-shadow:0 1px 2px rgba(15,18,27,0.04);
font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:var(--ink);
}
.cp-nav-strip .cp-mid{
display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
flex:1;min-width:0;text-decoration:none;color:inherit;
padding:6px 12px;border-radius:10px;transition:background .14s ease;
}
.cp-nav-strip .cp-mid:hover{background:var(--bg-2)}
.cp-nav-strip .cp-mid b{font-size:12.5px;font-weight:600;letter-spacing:0.02em}
.cp-nav-strip .cp-mid span{
font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
font-size:10.5px;font-weight:600;color:var(--muted);
letter-spacing:0.08em;text-transform:uppercase;
}
.cp-nav-strip a,
.cp-nav-strip .cp-disabled{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;border-radius:12px;border:0.5px solid var(--border);
text-decoration:none;color:var(--ink);font-weight:500;font-size:12px;
background:var(--bg-2);
transition:background .15s ease,border-color .15s ease;
}
.cp-nav-strip a:hover{background:var(--surface-sunken);border-color:var(--border-strong)}
.cp-nav-strip .cp-disabled{opacity:0.4;background:transparent;cursor:default}
.cp-nav-strip .cp-home{background:var(--brand);color:var(--inverse);border-color:var(--brand)}
.cp-nav-strip .cp-home:hover{background:var(--brand-700);border-color:var(--brand-700)}
@media (max-width:560px){
.cp-nav-strip{flex-direction:column;gap:8px;padding:12px 14px;margin:20px 12px 16px}
.cp-nav-strip a,
.cp-nav-strip .cp-disabled,
.cp-nav-strip .cp-mid{width:100%;justify-content:center}
}
/* ─── nav-link-soon · non-clickable menu item (was href="#") ─────────── */
.nav-link-soon{
opacity:0.45;cursor:default;pointer-events:none;
}
.nav-link-soon::after{
content:"soon";display:inline-block;margin-left:auto;
font-family:var(--font-mono,'JetBrains Mono',monospace);
font-size:9px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
color:var(--muted);opacity:0.85;
}
/* ─── Hide developer-style "Trust Rules" chip blocks on client demo ──── */
.trust-block{display:none !important}
/* ─── Screen 002 · Test Drives Today · controlled icon size ──────────── */
/* Root cause: shared.css has `svg{display:block;max-width:100%}` and the
.tag rule has no child svg sizing. SVGs in .tag chips render full-width.
Fix: explicit small sizing on .tag svg, matching the .chip svg pattern. */
.tag svg,
.tag > svg{
width:11px;height:11px;flex:0 0 auto;stroke-width:1.85;
}
.sched-body .tag svg,
.sched-it .tag svg,
.sched .tag svg{
width:10px;height:10px;flex:0 0 auto;stroke-width:1.85;
}
/* Defensive: any unsized svg inside a small label context */
.sched-body svg:not([width]):not([height]):not(.aed-symbol svg),
.sched-it svg:not([width]):not([height]):not(.aed-symbol svg){
max-width:14px;max-height:14px;
}
/* Optional named hooks (per the brief): these scope nicely if added later */
.test-drive-card svg,
.td-visual svg,
.command-test-drive-card svg{
max-width:56px;max-height:56px;
}
@media (max-width:640px){
.test-drive-card svg,
.td-visual svg,
.command-test-drive-card svg{
max-width:40px;max-height:40px;
}
}
/* ═══════════════════════════════════════════════════════════════════════ */
/* CLIENT POLISH r2 ADDITIONS */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Converted action anchors: span role="button" elements get cursor pointer */
span[role="button"]{cursor:pointer;-webkit-user-select:none;user-select:none}
span[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
button.btn,
button.qa,
button.tab,
button.doc-chip,
button.nba{
/* Reset minimal UA button defaults so the .btn / .qa / .tab class rules
continue to define appearance unchanged. */
font:inherit;
text-align:inherit;
}
/* Defensive softening for any leftover trust-block UI (kept hidden by the
earlier display:none rule, but if the rule is ever removed, this keeps the
pill subtle). */
.trust-pill{
font-size:11px;font-weight:500;
color:var(--muted);
border:0.5px solid var(--border);
background:var(--bg-2);
border-radius:9999px;
}