di
pagina e label di icon-button. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ============ KEYCAPS + COMMAND PALETTE (Batch 5 — keyboard.html) ============
`kbd` keycaps, `.keys` group, the `.palette` command palette, and the
`.hint-strip` trigger pill. */
kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: 5px;
background: white; border: 1px solid var(--hairline);
box-shadow: 0 1px 0 var(--hairline), inset 0 -1px 0 #f5f0f2;
font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
color: var(--ink); letter-spacing: 0;
}
kbd + kbd { margin-left: 4px; }
.keys { display: inline-flex; align-items: center; gap: 2px; }
.keys .sep { color: var(--ink-3); font-size: 11px; padding: 0 2px; }
.palette {
background: white; max-width: 560px; margin: 0 auto;
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 60px rgba(10,10,15,0.15), 0 8px 16px rgba(10,10,15,0.08);
border: 1px solid var(--hairline);
}
/* Modifier — Shell v3 inline-spotlight canonization. Re-positions the same
.palette as an anchored dropdown hanging under its host (.popover-host),
no centered modal, no scrim. Omit .p-input under .palette--inline — the
bar's .fb-search IS the input. Width is set by the consumer (field-width
default; a future two-column wide variant can land later without changing
this modifier). Z-index matches the .popover layer so the spotlight
composes with the Time and Filters popovers next to it. */
.palette--inline {
position: absolute; top: calc(100% + 6px); left: 0;
margin: 0; max-width: none; z-index: 10;
}
.palette--inline .p-input { display: none; }
.palette .p-input {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--hairline);
}
.palette .p-input .ic { color: var(--ink-3); font-size: 16px; }
.palette .p-input input {
flex: 1; border: 0; outline: 0; font-family: inherit;
font-size: 15px; color: var(--ink); background: transparent;
}
.palette .p-input input::placeholder { color: var(--ink-3); }
.palette .p-input .esc {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase;
}
.palette .p-section {
padding: 8px 0;
}
/* Tier ③ (popover surface eyebrow) — the same 10px / mono 700 / 0.18em /
uppercase / ink-3 as .popover .ph-title. The spotlight's "SET A FILTER" /
"JUMP TO" / "PAGES" section labels join the popover-eyebrow family — they
ARE eyebrows over an option list, just inside a palette host instead of
a popover host. Was 9px / 0.22em — drifted from .ph-title; harmonized
2026-05-28 pass 2 so the Spotlight reads as the same surface family. */
.palette .p-section h6 {
font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-3); margin: 8px 18px 6px;
}
.palette .p-row {
display: flex; align-items: center; gap: 12px;
padding: 9px 18px; cursor: pointer; font-size: 13.5px;
}
.palette .p-row:hover, .palette .p-row.active {
background: var(--pink-tint);
}
.palette .p-row.active .name { color: var(--pink-deep); font-weight: 500; }
.palette .p-row .icon {
width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.palette .p-row.active .icon { color: var(--pink-deep); }
.palette .p-row .name { flex: 1; color: var(--ink); }
/* Tier ⑤ (row meta) — the SKU / Page / ↵ label on the right of a palette
result row. Mono 500 · 11px · natural case · ink-3 · tab-nums. Same
canon as every other popover row meta. Pass 3 revert. */
.palette .p-row .meta {
font-family: 'JetBrains Mono', monospace; font-weight: 500;
font-size: 11px; color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* Tier ⑥ (footer copy) — the "↑↓ navigate · ↵ apply · esc close" hint
strip at the foot of the palette. Same 11.5px / mono 500 / sentence
case / ink-3 as .pf .stats and .time-pop .compare-row. Footer copy
reads as a quiet hint, not a menu vocabulary — sentence case + no
tracking, deliberately distinct from the uppercase row labels above.
Was 10px / 0.1em uppercase — drift, aligned 2026-05-28 pass 2. */
.palette .p-foot {
padding: 10px 18px; border-top: 1px solid var(--hairline);
display: flex; gap: 14px; align-items: center; justify-content: space-between;
background: #fbfbfc; font-family: 'JetBrains Mono', monospace;
font-weight: 500; font-size: 11.5px; color: var(--ink-3);
}
.palette .p-foot .hint { display: inline-flex; align-items: center; gap: 4px; }
.hint-strip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 999px;
background: white; border: 1px solid var(--hairline);
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-2);
letter-spacing: 0.06em;
}
/* ============ CHART PANEL + PRIMITIVES (Batch 6 — charts.html) ============
The `.chart-card` panel, `.legend`, and the SVG `.ax` / `.gridline`
primitives. */
.chart-card {
background: white; border: 1px solid var(--hairline);
border-radius: 12px; padding: 24px 24px 20px;
margin-top: 16px;
}
.chart-card .ch-title {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 18px; gap: 16px;
}
.chart-card .ch-title h4 {
margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 600;
font-size: 15px; color: var(--ink);
}
.chart-card .ch-title p {
margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); max-width: none;
}
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend .lg {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--ink-2); letter-spacing: 0.04em;
}
.legend .lg .sw {
width: 10px; height: 10px; border-radius: 2px;
}
/* OPEN swatch — amber diagonal hatch (matches the chart OPEN treatment);
LY swatch — dashed line. Cross-app legend semantics (hatch = open /
provisional, dash = last-year), canonized from app (audit Fase 2 shadowed
DEC1). The block's page margin stays app-side (geometric). */
.legend .lg .sw.hatch {
background: var(--cream);
background-image: repeating-linear-gradient(45deg,
var(--open-edge) 0 1.3px, transparent 1.3px 5.7px);
border: 1px solid var(--open-edge);
}
.legend .lg .sw.dash {
height: 0; width: 16px; background: transparent;
border-top: 2px dashed var(--ink-3); border-radius: 0; align-self: center;
}
/* SVG axis + gridline primitives */
.ax {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
fill: var(--ink-3); letter-spacing: 0.05em;
}
.ax-strong { fill: var(--ink-2); font-weight: 700; }
.gridline { stroke: var(--hairline); stroke-width: 1; }
.gridline-strong { stroke: #d8cdd0; stroke-width: 1; }
/* ============ APP SHELL — SIDEBAR / HEADER / ACCOUNT MENU (Batch 4 — app-shell.html) ============
The real sidebar (`.sb*`), header bar (`.header-*`) and account menu
(`.avatar*`, `.menu*`). The `-mock` wrappers, logo lab and ruler stay
page-local in app-shell.html. */
/* ----- Sidebar ----- */
.sb {
flex: 1;
padding: 22px 18px 18px;
display: flex; flex-direction: column;
font-family: 'DM Sans', sans-serif;
}
.sb.is-collapsed { padding: 22px 8px 16px; align-items: center; }
/* The brand row carries NO border, NO background, NO divider beneath it —
the wordmark sits free, never boxed into a rectangle (RULES.md · App shell). */
.sb-brand {
height: 40px;
display: flex; align-items: center;
margin-bottom: 28px;
width: 100%;
}
.sb.is-collapsed .sb-brand { justify-content: center; }
.sb-collapse-toggle {
margin-left: auto;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-3);
border-radius: 6px;
cursor: pointer;
}
.sb-collapse-toggle:hover { color: var(--ink); background: var(--surface); }
.sb.is-collapsed .sb-collapse-toggle { display: none; }
.sb-section {
font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-3);
margin: 18px 4px 8px;
line-height: 1;
}
.sb-section:first-of-type { margin-top: 0; }
.sb.is-collapsed .sb-section {
width: 32px; height: 1px; background: var(--hairline);
color: transparent; padding: 0; margin: 16px 0 12px;
}
.sb-link {
display: flex; align-items: center; gap: 12px;
height: 36px; padding: 0 10px;
border-radius: 8px;
color: var(--ink-2);
font-size: 13.5px; font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background var(--motion-fast);
}
.sb-link:hover { background: var(--surface); color: var(--ink); }
.sb-link.is-active {
background: var(--pink-tint);
color: var(--pink-deep);
font-weight: 600;
}
.sb-link .ic {
width: 18px; height: 18px; flex: 0 0 18px;
color: var(--ink-3);
}
.sb-link.is-active .ic { color: var(--pink-deep); }
.sb-link:hover .ic { color: var(--ink); }
.sb.is-collapsed .sb-link {
width: 44px; height: 44px; padding: 0;
justify-content: center; gap: 0;
border-radius: 10px;
}
.sb.is-collapsed .sb-link .label-text { display: none; }
.sb.is-collapsed .sb-link .ic { width: 20px; height: 20px; flex-basis: 20px; }
.sb-wm {
font-family: 'Caprasimo', serif;
color: var(--pink);
line-height: 0.85; letter-spacing: -0.02em;
font-weight: 400;
font-size: 28px;
display: inline-flex; align-items: center; gap: 8px;
}
.sb-collapsed-mark {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ----- Header bar ----- */
.header-bar {
height: 64px;
padding: 0 20px;
border-bottom: 1px solid var(--hairline);
display: flex; align-items: center; gap: 14px;
position: relative;
}
.header-pill {
display: inline-flex; align-items: center; gap: 8px;
height: 36px; padding: 0 14px;
border-radius: 999px;
background: white;
border: 1px solid var(--hairline);
font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.header-pill:hover { border-color: var(--pink-light); }
.header-pill .ic { color: var(--ink-3); }
.header-pill .add { color: var(--pink-deep); font-weight: 700; margin-left: 2px; }
.header-right {
margin-left: auto;
display: flex; align-items: center; gap: 10px;
}
.header-iconbtn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
color: var(--ink-2);
background: white;
border: 1px solid var(--hairline);
cursor: pointer;
transition: background var(--motion-fast), border-color var(--motion-fast);
}
.header-iconbtn:hover { background: var(--surface); border-color: var(--pink-light); color: var(--ink); }
.header-divider {
width: 1px; height: 24px; background: var(--hairline);
margin: 0 4px;
}
/* ----- Avatar + account menu (header top-right) ----- */
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--pink-tint);
color: var(--pink-deep);
display: inline-flex; align-items: center; justify-content: center;
font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
cursor: pointer;
flex: 0 0 36px;
aspect-ratio: 1 / 1;
border: 2px solid transparent;
transition: border-color var(--motion-base);
}
.avatar.is-open { border-color: var(--pink); }
.avatar:hover { border-color: var(--pink-light); }
.avatar-wrap { position: relative; }
.menu {
position: absolute; top: calc(100% + 8px); right: 0;
width: 260px;
background: white;
border: 1px solid var(--hairline);
border-radius: 12px;
box-shadow:
0 12px 32px rgba(10,10,15,0.10),
0 2px 6px rgba(10,10,15,0.04);
z-index: 50;
padding: 8px;
display: none;
}
.menu.is-open { display: block; }
.menu::before {
content: ''; position: absolute; top: -5px; right: 14px;
width: 10px; height: 10px;
background: white;
border-top: 1px solid var(--hairline);
border-left: 1px solid var(--hairline);
transform: rotate(45deg);
}
.menu-user {
display: flex; align-items: center; gap: 10px;
padding: 10px 10px 12px;
border-bottom: 1px solid var(--hairline);
margin: 0 -8px 6px;
padding-left: 18px; padding-right: 18px;
}
.menu-user .avatar { width: 32px; height: 32px; font-size: 13px; flex-basis: 32px; cursor: default; }
.menu-user .info { display: flex; flex-direction: column; min-width: 0; }
.menu-user .name {
font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13.5px;
color: var(--ink); line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 180px;
}
.menu-user .role {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3); margin-top: 4px;
}
.menu-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 10px;
border-radius: 6px;
font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500;
color: var(--ink);
cursor: pointer;
text-decoration: none;
transition: background var(--motion-fast);
}
.menu-item:hover { background: var(--surface); }
.menu-item .ic { width: 16px; height: 16px; color: var(--ink-3); flex: 0 0 16px; }
.menu-item:hover .ic { color: var(--ink); }
.menu-item .chev { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.menu-sep {
height: 1px; background: var(--hairline);
margin: 6px -8px;
}
.menu-item.is-signout { color: var(--cherry-deep); }
.menu-item.is-signout .ic { color: var(--cherry-deep); }
/* ============ MATRIX TABLE (TODO_COWORK A1) ============
Category × period pivot / heatmap — Sales · Compare, Countries.
Sticky first column + header. The total column sits right after the
dimension column (.matrix-th-total / .matrix-td-total). The total row
is plain — no fill — set off by a strong bottom rule. Heatmap tints
each cell by |YoY| in discrete steps; the total row is NOT tinted. */
.matrix-scroll {
overflow-x: auto;
/* Seamless by default — was a 1px hairline + 12px radius frame, but the
surrounding .panel already provides the outer frame. The standalone
frame on .matrix-scroll caused a double-outline (panel border + scroll
border), which Andrea flagged as the only table type still showing
its own outline. Aligned with the .data-table seamless default (Round 5). */
}
.matrix-table {
border-collapse: separate; border-spacing: 0;
width: auto; max-width: 100%; /* was width:100% — left-side dim was sprawling, eating the page */
font-family: var(--font-sans); font-size: var(--type-table-num-size);
/* Remap 2026-05-27 (Andrea): was hardcoded 12.5px — drift fix to the
canonical table number size token (13.5px). Pairs with Compare /
Countries Category × Month tables that now hide SKINCARE / NAIL by
default, freeing vertical space for a more readable base font on
the matrix heatmap. */
}
.matrix-table th, .matrix-table td {
padding: 8px 12px; border-bottom: 1px solid var(--hairline);
white-space: nowrap; text-align: right;
width: 1%; /* hug content; leftover space sits AFTER the rightmost column (right of table) */
}
.matrix-table thead th {
position: sticky; top: 0; z-index: 2;
background: white; border-bottom: 1.5px solid var(--ink-3);
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.matrix-th-dim {
position: sticky; left: 0; z-index: 3; text-align: left; min-width: 150px;
}
.matrix-th-month { min-width: 86px; }
.matrix-th-total, .matrix-td-total { border-right: 2px solid var(--hairline); }
.matrix-th-dim, .matrix-td-dim { border-right: 1px solid var(--hairline); } /* vertical separator on the dim column, on every row (was: only TOTAL row visible) */
.matrix-td-dim {
position: sticky; left: 0; z-index: 1; background: var(--paper);
text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--ink);
}
.matrix-td-total .matrix-cell-val { font-weight: 600; }
.matrix-tr-total td {
font-weight: 700; background: var(--paper);
border-bottom: 2px solid var(--ink-3);
}
/* Modifier for a TOTAL row placed at the BOTTOM of the table (the Sales
Compare M1 layout): the separator hairline goes ABOVE the row, not below. */
.matrix-tr-total--bottom td {
border-top: 2px solid var(--pink-light); border-bottom: 0;
}
.matrix-tr-group .matrix-td-dim { font-weight: 700; color: var(--ink); }
.matrix-tr-sub .matrix-td-dim { color: var(--ink-2); }
.matrix-td-sub-indent { padding-left: 30px; }
.matrix-cell-val {
display: block; font-weight: 500; font-variant-numeric: tabular-nums;
color: var(--ink); letter-spacing: -0.01em;
font-size: var(--type-matrix-val-size);
/* Canon 2026-05-27 (Andrea): matrix heatmap cells need a stronger
hierarchy than regular .data-table because val + YoY chip stack
into 2 short lines per cell. Specific tokens (`matrix-val-size` 15px /
`matrix-yoy-size` 10.5px = ratio 1.43) replace inheritance from
`--type-table-num-size`. The data-table tokens stay 13.5px / 11.5px
for prose-y customer / order tables. */
}
.matrix-cell-yoy {
display: block; font-family: var(--font-mono); margin-top: 1px;
font-size: var(--type-matrix-yoy-size); font-weight: 700;
}
.matrix-yoy-up { color: var(--success-deep); }
.matrix-yoy-down { color: var(--cherry-deep); }
.matrix-yoy-flat { color: var(--ink-3); }
/* Open-orders chip inside a now/future matrix cell — the open portion of the
month's value, as a small amber pill (B2 open treatment, inline variant).
Canonized from the mockup's page-local `.pm-open-note`. Sits after the
value on the same line. */
.matrix-open-chip {
display: inline-block; margin-left: 5px; padding: 1px 6px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--open-edge) 18%, var(--cream));
color: var(--warning-deep);
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 9.5px; letter-spacing: 0; white-space: nowrap;
vertical-align: 1px;
}
/* Heatmap — tint depth follows |YoY|, discrete steps (3 up, 2 down). */
.matrix-heat-pos-1 { background: color-mix(in srgb, var(--success) 8%, white); }
.matrix-heat-pos-2 { background: color-mix(in srgb, var(--success) 18%, white); }
.matrix-heat-pos-3 { background: color-mix(in srgb, var(--success) 30%, white); }
.matrix-heat-neg-1 { background: color-mix(in srgb, var(--cherry) 9%, white); }
.matrix-heat-neg-2 { background: color-mix(in srgb, var(--cherry) 20%, white); }
/* Whitespace / opportunity heat — pink. Third sibling of the matrix heat scale:
pos = YoY up (green), neg = YoY down (cherry), OPP = uncovered peer
opportunity (pink) for coverage / whitespace matrices. Canonized 2026-06 ·
Client deep-dive pass (brand x category whitespace). Reference mockup:
brand-mockups/client.html (Actions tab). Pairs with the `.tt` cell tooltip
(peers selling N of M · avg peer value · est. opportunity). */
.matrix-heat-opp-1 { background: color-mix(in srgb, var(--pink) 8%, white); }
.matrix-heat-opp-2 { background: color-mix(in srgb, var(--pink) 14%, white); }
.matrix-heat-opp-3 { background: color-mix(in srgb, var(--pink) 22%, white); }
/* --- Month-state model · consolidating surfaces (Sellout · incoming months,
Andrea 2026-07-08) ------------------------------------------------------
Lo stato del mese sell-out è di prima classe: un mese NON-final non mostra
mai YoY; il partial è SOLID-in-hatch GRIGIO (data-incoming — l'hatch amber
resta esclusivo degli open orders, RULES §OPEN). Due superfici canon:
(1) `.month-chip--*` — chip mono-heavy sotto il `th` del mese (SOLO la
parola-stato: PARTIAL / IN MONTH / INCOMING). Deriva da `.pm-partial`.
(2) tinta PER-CELLA del mese non-final (la lettura è per-retailer, non a
colonna): `.col-await` (neutro, nessun dato) · `.col-partial` (giallo,
"so far" — dato sotto la norma del cliente) · `.col-mtd` (info, mese a
finestra aperta) · `.col-gap` (warning forte, out-of-order). Una cella
"landed" (dato nella norma → cliente consolidato) NON porta tinta: è
bianca con YoY come un mese final. Ref: sellout-incoming-states.html. */
.month-chip {
display: block; font-family: var(--font-mono-heavy);
font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-top: 2px;
}
.month-chip--partial { color: var(--warning-deep); }
.month-chip--mtd { color: var(--info-deep); }
.month-chip--await { color: var(--ink-3); }
.month-chip--gap { color: var(--warning-deep); }
.col-await { background: color-mix(in srgb, var(--ink-3) 4%, white); }
.col-partial { background: color-mix(in srgb, var(--warning) 7%, white); }
.col-mtd { background: color-mix(in srgb, var(--info) 6%, white); }
.col-gap { background: color-mix(in srgb, var(--warning) 14%, white); }
/* le note di cella non-final ("so far" / "MTD · d1–N" / "awaiting") sono
quiet; il gap è un flag warning. Il valore resta ink — è vero venduto. */
.col-await .matrix-cell-yoy,
.col-partial .matrix-cell-yoy,
.col-mtd .matrix-cell-yoy { color: var(--ink-3); font-weight: 500; }
.col-gap .matrix-cell-yoy { color: var(--warning-deep); font-weight: 700; }
/* --- F-Code.8 · Matrix Trend column (Sales review 2026-05-31)
Leading column after the dim col, BEFORE the period columns. Carries
the row-level YoY headline + a 6-mo sparkline so the row scans in 1s
without reading every cell. Used by Sales · Compare Category × Month
and Sales · Countries Country × Category. Replaces per-cell heatmap
tint when paired with M1 grid (the YoY chip per cell becomes the
chrome carrier, no cell-bg tint needed).
Header is .matrix-th-trend, cell is .matrix-td-trend. Cell composes
.matrix-cell-trend-val (headline YoY mono-heavy) + .matrix-cell-trend-spark
(inline 68x14 SVG polyline). Sentiment modifier on the val. */
.matrix-th-trend,
.matrix-td-trend {
background: color-mix(in srgb, var(--pink-tint) 35%, white);
border-left: 1px solid var(--hairline);
border-right: 1px solid var(--hairline);
min-width: 86px;
text-align: left;
padding-left: 14px;
}
.matrix-cell-trend-val {
display: block;
font-family: var(--font-mono-heavy);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.matrix-cell-trend-val--up { color: var(--success-deep); }
.matrix-cell-trend-val--down { color: var(--cherry-deep); }
.matrix-cell-trend-val--flat { color: var(--ink-2); }
.matrix-cell-trend-spark { display: block; margin-top: 3px; }
/* --- Matrix laptop tier (≤1680px) --------------------------------
The intrinsic matrix (12 month columns + now-col widened by the
inline open chip) measures ~1265px: on a 1536 laptop (= 1920 @125%
scaling) with the sidebar expanded the panel offers ~1200px → the
table scrolls internally, the TREND column slides under the sticky
dim column (+/− signs eaten) and TOTAL is cut off (Andrea 2026-07-06
"spacca su laptop"). Same approach as the app-side #brand-ti-grid /
.page-budget laptop compactions: tighter cell padding, 14px values
and the open chip on its own line (now-col drops ~154px → ~92px).
Measured in browser: 1265px → ~1040px, fits 1366–1536 without a
horizontal bar; large monitors (≥1681px) keep the comfy sizes above. */
@media (max-width: 1680px) {
.matrix-table th, .matrix-table td {
padding-left: 7px; padding-right: 7px;
}
.matrix-th-dim { min-width: 132px; }
.matrix-th-month { min-width: 70px; }
.matrix-th-trend, .matrix-td-trend { min-width: 78px; padding-left: 10px; }
.matrix-cell-val { font-size: 14px; }
/* Open chip on its own line INSIDE the cell (stays right-aligned via
margin-left:auto — the td is text-align:right) → the now-col no
longer outgrows a normal month column. */
.matrix-open-chip {
display: block; margin-left: auto; margin-top: 2px; width: fit-content;
}
}
/* --- Sticky dim+TREND pair (modifier .matrix-table--sticky-pair) ------
Compare / Countries M1 matrix (the builders with a leading TREND
column). When the table scrolls horizontally (Customer dim, narrow
laptops) the reading anchor must stay put: without this the TREND
column slides UNDER the sticky dim column and gets chopped. A second
sticky column needs a KNOWN left offset, but `width`/`max-width` on a
do NOT cap an auto-layout table column (the dim column swallowed
all the leftover space, and long nowrap customer names push min-content
past any width). So the cap lives on an INNER block `.matrix-dim-clip`
(same pattern as the Budget ag-pin column): fixed clip width + fixed
cell padding ⇒ the column's min-content == max-content == 180px exactly
in every regime, and TREND docks at left:180px. Long names ellipsize —
the full name ships in the cell `title`. Scoped to the modifier so the
hug-width matrices sharing the canon (sell-through matrix, assortment
mix, retailer, client actions) keep their content-driven dim width.
Squeeze regime (table overflows → columns at min-content): dim is
exactly 180 and TREND pins flush next to it. Stretch regime (table
fills the panel, no scroll): sticky never engages — no conflict.
Padding is re-pinned here so the ≤1680px laptop tier (7px) cannot
desync the 180px math. The trend/dim opaque backgrounds (pink-tint
mix / paper) already hide the month columns scrolling underneath. */
.matrix-table--sticky-pair .matrix-th-dim,
.matrix-table--sticky-pair .matrix-td-dim {
padding-left: 12px; padding-right: 12px;
}
.matrix-table--sticky-pair .matrix-dim-clip {
display: block; width: 155px; /* 12 + 155 + 12 + 1px border = 180 */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.matrix-table--sticky-pair .matrix-td-sub-indent { padding-left: 30px; }
.matrix-table--sticky-pair .matrix-td-sub-indent .matrix-dim-clip {
width: 137px; /* 30 + 137 + 12 + 1px border = 180 */
}
.matrix-table--sticky-pair .matrix-th-trend,
.matrix-table--sticky-pair .matrix-td-trend {
position: sticky; left: 180px;
}
.matrix-table--sticky-pair .matrix-th-trend { z-index: 3; }
.matrix-table--sticky-pair .matrix-td-trend { z-index: 1; }
/* ============ MARKET SHARE BAR (Part F · Brand V3) ============
Per-category horizontal bar showing Markwins share vs Top 3 competitor
ticks. NOT a "market share %" claim (the brief explicitly forbids that
wording — see docs/circana-data-semantics.md) — this is a visual that
compares relative rank position in Circana. Composes only existing
tokens. Used by brand-overview.html Section 4 — Market Position. */
.market-share-bar { display: flex; flex-direction: column; gap: 10px; }
.market-share-bar__row {
display: grid; grid-template-columns: 110px 1fr 260px; gap: 12px;
align-items: center;
}
.market-share-bar__cat {
font-family: var(--font-sans); font-weight: 500; font-size: 12.5px;
color: var(--ink);
}
.market-share-bar__track {
position: relative; height: 14px;
background: var(--surface); border-radius: var(--radius-pill);
overflow: hidden;
}
.market-share-bar__mark {
height: 100%; background: var(--pink);
border-radius: var(--radius-pill);
}
.market-share-bar__tick {
position: absolute; top: -2px; width: 2px; height: 18px;
background: var(--ink-3); transform: translateX(-1px); border-radius: 1px;
}
.market-share-bar__tick--top { background: var(--ink); }
.market-share-bar__meta {
font-family: var(--font-mono); font-size: 11.5px;
color: var(--ink-2); font-variant-numeric: tabular-nums;
text-align: right;
}
.market-share-bar__meta strong {
font-family: var(--font-mono-heavy); font-weight: 700; color: var(--ink);
}
/* ============ WHITE SPACE TILE (Part F · Brand V3) ============
Tiered sub-category tile for the White Space Map. IN tiles (Markwins
present, neutral white) vs OUT tiles (white space, opportunity-sized
via --small/--medium/--large modifiers). Tier colours derive from
--warning / --c5 / --cherry via color-mix; tier text colours via
--warning-deep / --coral-deep / --cherry-deep. The "hot" tier upgrades
a small market with growth ≥+20% AND a competitor NPD signal to
--large — see RULES.md (brief §6.1). Used by brand-market.html
Section 2. */
.white-space-tile-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.white-space-tile {
padding: 14px 16px; border-radius: var(--radius-md);
border: 1px solid var(--hairline);
display: flex; flex-direction: column; gap: 6px;
min-height: 96px; background: var(--paper);
}
.white-space-tile__name {
font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
color: var(--ink);
}
.white-space-tile__status {
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 9.5px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-3);
display: flex; align-items: center; gap: 5px;
}
.white-space-tile__status::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: 0 0 6px; display: inline-block;
}
.white-space-tile__stat {
font-family: var(--font-sans); font-size: 11.5px;
color: var(--ink-2); line-height: 1.5;
margin-top: auto;
}
.white-space-tile__stat strong { color: var(--ink); font-weight: 600; }
/* IN tile — Markwins present, neutral */
.white-space-tile--in .white-space-tile__status { color: var(--success-deep); }
/* OUT tile — tier-coloured by opportunity */
.white-space-tile--small {
background: color-mix(in srgb, var(--warning) 12%, white);
border-color: color-mix(in srgb, var(--warning) 28%, white);
}
.white-space-tile--small .white-space-tile__status { color: var(--warning-deep); }
.white-space-tile--medium {
background: color-mix(in srgb, var(--c5) 20%, white);
border-color: color-mix(in srgb, var(--c5) 38%, white);
}
.white-space-tile--medium .white-space-tile__status { color: var(--coral-deep); }
.white-space-tile--large {
background: color-mix(in srgb, var(--cherry) 14%, white);
border-color: color-mix(in srgb, var(--cherry) 30%, white);
}
.white-space-tile--large .white-space-tile__status { color: var(--cherry-deep); }
/* Legend strip */
.white-space-tile-legend {
display: flex; gap: 18px; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--hairline);
font-family: var(--font-sans); font-size: 11.5px;
color: var(--ink-2); flex-wrap: wrap;
}
.white-space-tile-legend__key {
display: inline-flex; align-items: center; gap: 7px;
}
.white-space-tile-legend__key::before {
content: ''; width: 14px; height: 14px; border-radius: 3px;
border: 1px solid var(--hairline); flex: 0 0 14px;
}
.white-space-tile-legend__key--in::before { background: var(--paper); }
.white-space-tile-legend__key--small::before {
background: color-mix(in srgb, var(--warning) 12%, white);
border-color: color-mix(in srgb, var(--warning) 28%, white);
}
.white-space-tile-legend__key--medium::before {
background: color-mix(in srgb, var(--c5) 20%, white);
border-color: color-mix(in srgb, var(--c5) 38%, white);
}
.white-space-tile-legend__key--large::before {
background: color-mix(in srgb, var(--cherry) 14%, white);
border-color: color-mix(in srgb, var(--cherry) 30%, white);
}
/* ============ INFO-ICON TOOLTIP (TODO_COWORK A2) ============
Static, CSS-only tooltip — no JS. Put .tooltip-trigger on any element
that also carries a data-tooltip="..." attribute; on hover or keyboard
focus it shows a dark ink bubble with a caret, reusing the Plotly
tooltip identity (§6). .kpi-info-icon is the common trigger: a sized +
coloured wrapper for the brand info glyph next to a KPI label —
*/
.tooltip-trigger { position: relative; cursor: help; }
.tooltip-trigger::after {
content: attr(data-tooltip);
position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
background: var(--ink); color: white;
font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
font-weight: 400; letter-spacing: 0; text-transform: none;
padding: 8px 11px; border-radius: var(--radius-sm);
width: max-content; max-width: 230px; text-align: left;
box-shadow: var(--shadow-menu);
opacity: 0; visibility: hidden; transition: opacity var(--motion-base);
z-index: 50; pointer-events: none;
}
.tooltip-trigger::before {
content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 9px; height: 9px; background: var(--ink);
opacity: 0; visibility: hidden; transition: opacity var(--motion-base);
z-index: 50; pointer-events: none;
}
.tooltip-trigger:hover::after, .tooltip-trigger:hover::before,
.tooltip-trigger:focus-visible::after, .tooltip-trigger:focus-visible::before {
opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.tooltip-trigger::after, .tooltip-trigger::before { transition: none; }
}
.kpi-info-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; flex: 0 0 14px;
/* margin-left: auto pins the glyph to the far right of the eyebrow flex
row regardless of label length — the KPI card info-icon is always
top-right (F-Code.10 canon). */
color: var(--ink-3); margin-left: auto;
}
.kpi-info-icon svg { width: 100%; height: 100%; display: block; }
.kpi-info-icon:hover { color: var(--ink); }
/* --- KPI info-icon · rich tooltip (§07) -------------------------------
The canonical KPI info-icon tooltip is a STRUCTURED dark bubble (eyebrow
+ prose + optional divider/rows + provenance foot), not flat text. CSS
`::after` can only render `attr(data-tooltip)` (one string), so the rich
variant renders an actual `.kpi-info-tip` child (HTML) revealed on hover
/ focus. Same dark identity as the Plotly HOVERLABEL_DARK + the `.tt`
mockup family. Use via `kpi_info_tip()` (components/kpi_header.py). */
.kpi-info-icon--rich { position: relative; }
.kpi-info-tip {
/* Open BELOW the icon (the content area has room; opening above runs
under the top bar) and float above all chrome (z-index) so it never
renders under the sidebar. right:0 keeps it inside the content column
— the icon sits at the card's right, so it expands left within the
card area, away from the sidebar. */
position: absolute; top: calc(100% + 9px); right: 0;
/* z-index sopra la sidebar/drawer (fixed): rete di sicurezza — anche se un
tooltip dovesse sovrapporsi alla chrome, va SOPRA, mai sotto il menu
(feedback Andrea 2026-06-05). La direzione d'apertura (left/right) resta
il fix primario per non sovrapporsi proprio. */
display: none; z-index: 1300;
background: var(--ink); color: white;
border-radius: var(--radius-sm); padding: 10px 14px;
width: max-content; max-width: 300px; white-space: normal; text-align: left;
box-shadow: var(--shadow-menu);
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
/* Pin normal weight: the tip is nested inside the bold .kpi-card__eyebrow,
so without this the body inherits 700 → faux-bold (DM Mono ships 400/500
only) → heavy & blurry. Children that need weight set it explicitly
(.tt-eye 700, .tt-row__val 500). Matches the standalone canonical .tt. */
font-weight: 400;
letter-spacing: 0; text-transform: none; cursor: default;
}
.kpi-info-icon--rich:hover .kpi-info-tip,
.kpi-info-icon--rich:focus-within .kpi-info-tip { display: block; }
/* The leftmost card's tooltip opens to the RIGHT (into the content) so it
never slides under the sidebar; every other card opens left (right:0),
staying inside the content column. */
.kpi-header > *:first-child .kpi-info-tip { left: 0; right: auto; }
/* Projection panel: le KPI stanno nella colonna stretta SINISTRA, vicino alla
sidebar → i loro tooltip si aprono a DESTRA (dentro il pannello, mai sotto la
sidebar) e verso l'ALTO (`bottom`): il Projection è l'ultimo blocco della
pagina, aprendo verso il basso un tooltip lungo allungava la pagina e
generava una scrollbar (feedback Andrea 2026-06-05). Contenuto tenuto corto. */
.projection__kpi-lbl .kpi-info-tip {
left: 0; right: auto;
top: auto; bottom: calc(100% + 9px);
}
.kpi-info-tip .tt-eye {
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-light);
margin-bottom: 6px;
}
.kpi-info-tip .tt-body { color: rgba(255,255,255,0.9); }
.kpi-info-tip .tt-body strong { color: white; font-weight: 600; }
.kpi-info-tip .tt-divider { border-top: 1px solid rgba(255,255,255,0.18); margin: 7px 0; }
.kpi-info-tip .tt-row { display: flex; justify-content: space-between; gap: 18px; }
.kpi-info-tip .tt-row__lbl { color: rgba(255,255,255,0.65); }
.kpi-info-tip .tt-row__val {
color: white; font-weight: 500; font-variant-numeric: tabular-nums;
font-family: var(--font-mono-heavy);
}
.kpi-info-tip .tt-foot {
font-family: var(--font-mono); font-size: 10.5px;
color: rgba(255,255,255,0.55); margin-top: 4px;
}
/* ============ INTERACTIVE GRID (Style round · B4) ============
The ag-grid look — sortable header, column menu, pinned column, row
states, resize, footer. Production renders ag-grid with the
`ag-theme-atlas` theme (ships in Atlas); this CSS is the visual target
the theme params bind to, and the look static demos use directly.
Cell content stays canonical .td-* / .status-pill / .sku-* / .delta-*.
The .col-open column is the canonical B2 class. */
.atlas-grid-scroll { overflow-x: auto; }
.atlas-grid {
width: 100%; border-collapse: separate; border-spacing: 0;
font-family: var(--font-sans);
}
/* --- header --- */
.atlas-grid thead th {
background: white; padding: 0;
border-bottom: 1.5px solid var(--ink-3);
position: sticky; top: 0; z-index: 2;
}
.ag-col {
display: flex; align-items: center; gap: 6px;
padding: 10px 12px; cursor: pointer;
font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
white-space: nowrap; position: relative;
transition: background var(--motion-base);
}
.ag-col.is-num { justify-content: flex-end; }
.ag-col:hover { background: var(--pink-tint); color: var(--ink-2); }
.ag-col__sort { color: var(--pink); font-size: 9px; opacity: 0; }
.ag-col:hover .ag-col__sort { opacity: 0.4; }
.ag-col.is-sorted { color: var(--ink-2); box-shadow: inset 0 -2px 0 var(--pink); }
.ag-col.is-sorted .ag-col__sort { opacity: 1; }
.ag-col__menu {
margin-left: auto; width: 16px; height: 16px; flex: 0 0 16px;
color: var(--ink-3); opacity: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.ag-col:hover .ag-col__menu { opacity: 1; }
.ag-col__menu:hover { color: var(--ink); }
.ag-col__resize {
position: absolute; top: 6px; right: -1px; width: 5px; bottom: 6px;
cursor: col-resize; border-right: 1px solid var(--hairline);
}
.ag-col__resize:hover { border-right: 2px solid var(--pink-light); }
/* --- body --- */
.atlas-grid tbody td {
padding: 8px 12px; border-bottom: 1px solid var(--hairline);
font-size: 13.5px; vertical-align: middle; background: white;
}
.ag-row { cursor: pointer; }
.ag-row:hover td { background: color-mix(in srgb, var(--surface) 70%, white); }
.ag-row.is-selected td { background: var(--pink-tint); }
.ag-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--pink); }
/* Alert-pinned row — sorted to the top as an alert (AT RISK budget
customers). Mirrors the .is-selected edge, in --cherry. */
.ag-row--alert td:first-child { box-shadow: inset 3px 0 0 var(--cherry); }
.atlas-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.ag-rank { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: center; }
.ag-prod { display: flex; align-items: center; gap: 11px; } /* thumb + the canonical .td-sku-name identity (B7) */
.ag-gross { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* --- pinned column (# + Product) on horizontal scroll --- */
.ag-pin { position: sticky; left: 0; z-index: 1; }
.ag-pin--rank { left: 0; }
.ag-pin--prod { left: 44px; }
.atlas-grid.is-scrolled .ag-pin--prod::after {
content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 8px;
transform: translateX(100%);
background: linear-gradient(90deg, rgba(10,10,15,0.07), transparent);
pointer-events: none;
}
/* --- Open USD column — canonical .col-open (B2); grid-specific tints --- */
.atlas-grid .ag-col.col-open { background: color-mix(in srgb, var(--open-edge) 32%, var(--cream)); }
.atlas-grid td.col-open .num { font-weight: 600; }
/* --- footer --- */
.ag-foot {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 12px 4px 2px;
}
.ag-foot .rows-lbl {
font-family: var(--font-mono-heavy); font-size: 9px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
/* --- skeleton row --- */
.ag-sk { height: 9px; border-radius: var(--radius-sm); }
/* ============ SHAPE BAR (Style round · B6a) ============
Horizontal proportion bar — a total split into a few labelled, clickable
segments. Open Orders uses it for the month book by invoiceability
(potential --success vs open --open-edge); reusable for any
"whole, split N ways" read. */
.shape-bar { display: flex; height: 46px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; }
.shape-bar__seg { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; cursor: pointer; color: #fff; transition: filter var(--motion-base); }
.shape-bar__seg:hover { filter: brightness(1.06); }
/* Segment value + label. BEM names — must NOT reuse the bare .sk class:
.sk is the skeleton-shimmer primitive, and the collision leaked a white
shimmer background onto the label. nowrap + ellipsis so a label can
never wrap and break the fixed-height bar. */
.shape-bar__val { display: block; max-width: 100%; font-family: var(--font-sans); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shape-bar__lbl { display: block; max-width: 100%; font-family: var(--font-mono-heavy); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.94; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shape-bar__seg--ok { background: var(--success); }
.shape-bar__seg--soon { background: var(--warning); }
.shape-bar__seg--late { background: var(--cherry-deep); }
/* "No request date" segment — a data-quality gap, not a health state;
rendered grey to read as neutral / non-evaluable. */
.shape-bar__seg--none { background: var(--ink-3); }
/* Open-book segment — the unfulfilled remainder of the book stays in the
cross-Atlas OPEN canon (--open-edge amber, never grey, never a bespoke
colour). Text shifts to --warning-deep for contrast on the light amber.
Pairs with __seg--ok exactly like .bdg-achv pairs fill + open share
(Open Orders potential-invoiced redesign, CODE-PING §4). */
.shape-bar__seg--open { background: var(--open-edge); color: var(--warning-deep); }
/* Coverable segment (Open Orders v2, validata 2026-06-12) — stock
disponibile ma non ancora allocato: stessa famiglia del potential
("a un giro di allocazione di distanza"), MAI teal (riservato alla
provenienza esterna). Testo ink per contrasto sul verde chiaro. */
.shape-bar__seg--cov { background: color-mix(in srgb, var(--success) 38%, white); color: var(--ink); }
.shape-bar__seg--cov .shape-bar__lbl { color: var(--ink-2); }
.shape-bar__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 11.5px; color: var(--ink-2); }
.shape-bar__key span { display: inline-flex; align-items: center; gap: 7px; }
.shape-bar__key strong { color: var(--ink); font-weight: 600; }
.shape-bar__key .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
/* ============ WK-SPLIT (Open Orders · month-by-week) ============
Weekly distribution of the current month's open book. Uniform CSS
columns (NOT Plotly — micro-viz da panel): vertical bar filled
bottom-up with the potential share (--success), the open remainder
(--open-edge, canon OPEN — mai grigio) and, v2 only, the coverable
share (color-mix success 38%). The request week is DISTRIBUTION only,
never a deadline judgment: `--now` marks the current week as
orientation (pink label), `--nd` is the "No date" data-gap bucket
(all ink-3, always the LAST column, never merged elsewhere).
Anatomy: .wk-split > __col[--now|--nd] > __val (week total, sans 600
tabular) + __sub ("$X pot.", mono success-deep) + __bar (height ∝
week total) > __seg--pot / __seg--cov / __seg--rem + __wk (mono
"W24 · now" + small date range). */
.wk-split { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; align-items: end; padding: 6px 2px 0; }
.wk-split__col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.wk-split__val { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; }
.wk-split__sub { font-family: var(--font-mono); font-size: 10px; color: var(--success-deep); text-align: center; margin: 1px 0 7px; }
.wk-split__bar { display: flex; flex-direction: column-reverse; height: 110px; border-radius: 4px; overflow: hidden; }
.wk-split__seg { width: 100%; }
.wk-split__seg--pot { background: var(--success); }
.wk-split__seg--cov { background: color-mix(in srgb, var(--success) 38%, white); }
.wk-split__seg--rem { background: var(--open-edge); } /* canon OPEN — il residuo è book aperto */
.wk-split__wk { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: center; white-space: nowrap; }
.wk-split__wk small { display: block; color: var(--ink-3); font-size: 9.5px; margin-top: 1px; }
.wk-split__col--now .wk-split__wk { color: var(--pink-deep); font-weight: 700; }
.wk-split__col--nd .wk-split__val, .wk-split__col--nd .wk-split__wk { color: var(--ink-3); }
.wk-split__col--nd .wk-split__sub { color: var(--ink-3); }
/* ============ PROGRESSION BAR (Budget / Modal V2) ============
ACTUAL (solid --pink) + OPEN (solid --open-edge) = the PROJECTED whole,
against a PLAN / BUDGET marker. Thin, no text inscribed — the 3 KPI
cards above carry the numbers; a legend + one-line read decode it.
Used in the SKU modal and the Customer modal. */
.prog-bar__scale {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 10px;
color: var(--ink-3); margin-bottom: 6px;
}
.prog-bar__track {
position: relative; display: flex; height: 13px;
border-radius: var(--radius-pill); overflow: hidden; background: var(--hairline);
}
.prog-bar__seg { height: 100%; }
.prog-bar__seg--actual { background: var(--pink); } /* pipe / actual (pink) */
.prog-bar__seg--repl { background: var(--info); } /* replenishment (teal) */
.prog-bar__seg--open { background: var(--open-edge); } /* open orders (amber) */
.prog-bar__marker {
position: absolute; top: 0; bottom: 0; width: 2px;
background: var(--ink); z-index: 2;
}
.prog-bar__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; margin-top: 9px; flex-wrap: wrap;
}
.prog-bar__key { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
.prog-bar__key span { display: inline-flex; align-items: center; gap: 6px; }
.prog-bar__key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }
.prog-bar__key i.plan { width: 2px; height: 13px; border-radius: 1px; }
.prog-bar__read { font-size: 11.5px; color: var(--ink-2); }
.prog-bar__read b { font-family: var(--font-mono-heavy); font-weight: 700; color: var(--ink); }
.prog-bar__read .good { color: var(--success-deep); }
/* ============ BUDGET ACHIEVEMENT CELL ============
Achievement-% cell for the Budget × Customer table + brand-split tables.
__fill = Actual/Budget, tier-coloured (ramp mirrors .abc-card-a/b/c/d
green->amber, tier D escalated to --cherry). __open = the open order
book segment (--open-edge), so ACTUAL + OPEN reads in-row. */
.bdg-achv { display: flex; flex-direction: column; gap: 5px; min-width: 112px; }
.bdg-achv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bdg-achv__pct {
font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.bdg-achv__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-3); }
.bdg-achv__track {
position: relative; height: 6px; border-radius: var(--radius-pill);
background: var(--hairline); overflow: hidden;
}
.bdg-achv__fill { position: absolute; left: 0; top: 0; bottom: 0; }
.bdg-achv__fill--a { background: var(--success); } /* >=95% */
.bdg-achv__fill--b { background: color-mix(in srgb, var(--success) 58%, var(--paper)); } /* 80-94% */
.bdg-achv__fill--c { background: var(--warning); } /* 50-79% */
.bdg-achv__fill--d { background: var(--cherry); } /* <50% */
.bdg-achv__open { position: absolute; top: 0; bottom: 0; background: var(--open-edge); }
/* ============ PIPELINE PROGRESS · inline (Part F · Brand V3) ============
Mini progress bar that sits inside a .data-table cell, showing Actual
(pink) + Open Orders (--open-edge amber) against a Forecast track.
Canonical OPEN treatment extension to inline bars — see RULES.md
"OPEN treatment · inline bars". The numerical line above the bar
carries the explicit breakdown ("X.XK + Y.YK open · pct of WW.WK").
Used by brand-innovations.html SKU Launch Tracker · Pipeline
progress column. Sibling of .bdg-achv (both 6px inline cell bars,
different use cases: pipe-progress = unit volume; bdg-achv = budget %). */
.pipe-progress { display: flex; flex-direction: column; gap: 4px; }
.pipe-progress__line {
font-family: var(--font-mono); font-size: 11.5px;
color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.pipe-progress__line strong { color: var(--ink); font-weight: 600; }
.pipe-progress__pct {
color: var(--pink-text);
font-family: var(--font-mono-heavy); font-weight: 700;
}
.pipe-progress__open {
color: var(--warning-deep);
font-family: var(--font-mono-heavy); font-weight: 700;
}
.pipe-progress__denom { color: var(--ink-3); }
.pipe-progress__bar {
position: relative; height: 6px;
background: var(--surface);
border-radius: var(--radius-pill);
margin: 4px 0;
overflow: hidden;
max-width: 200px;
display: flex;
}
.pipe-progress__bar-fill { height: 100%; background: var(--pink); }
.pipe-progress__bar-open { height: 100%; background: var(--open-edge); }
/* ============ ACHIEVEMENT BAR · with target + Open (Part F · Brand V3) ============
Larger horizontal bar inside a .data-table cell: Actual (pink) + Open
(--open-edge) up to (or past) a vertical target marker. Stretch band
(--pink-light) extends past 100% when actual exceeds plan. Below 50%
the actual fill switches to --cherry (canonical warn). Target marker
sits at 100% of plan. Used by brand-innovations.html Innovation Reach ·
Country scorecard. Sibling of .prog-bar (both 13-14px ACTUAL+OPEN+
target bars, different use cases: prog-bar = modal SKU/Customer
volume vs PLAN; ach-cell = country scorecard achievement %). */
.ach-cell {
position: relative;
height: 14px;
width: 100%;
max-width: 280px;
background: var(--surface);
border-radius: var(--radius-pill);
overflow: visible;
}
.ach-cell__fill {
position: absolute; left: 0; top: 0; height: 100%;
background: var(--pink);
border-radius: var(--radius-pill);
}
.ach-cell__open {
position: absolute; top: 0; height: 100%;
background: var(--open-edge);
}
.ach-cell__fill--stretch {
background: var(--pink-light);
border-radius: 0;
/* position via inline left/width — past the 100% target */
}
.ach-cell__fill--warn { background: var(--cherry); }
.ach-cell__target {
position: absolute; top: -2px; bottom: -2px;
width: 2px; background: var(--ink);
border-radius: 1px;
}
/* ============ ORDER-BOOK EXPLORER (Style round · B6b) ============
Master-detail block: a ranked master list (each row a labelled share bar)
+ a detail pane. Lens / filters / search above it are canonical
(.segmented, .search-wrap); the detail line-items are a canonical
.data-table; each pane gets its own .paginator. */
/* DEPRECATED — use .atlas-grid + .drawer (RULES §Open Orders A3). The whole
.explorer / .explorer-* family (incl. .explorer--fixed) is superseded; kept
here only until the app is verified free of it, then removed. */
.explorer { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.explorer-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--hairline); background: #faf8f9; }
.explorer-body { display: grid; grid-template-columns: 38% 62%; }
.explorer-master { border-right: 1px solid var(--hairline); display: flex; flex-direction: column; }
.explorer-detail { display: flex; flex-direction: column; }
.master-head { padding: 10px 16px; font-family: var(--font-mono-heavy); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); }
.master-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--hairline); }
.master-row:hover { background: #faf8f9; }
.master-row.is-selected { background: var(--pink-tint); box-shadow: inset 3px 0 0 var(--pink); }
.master-row.is-selected .master-row__name { color: var(--pink-deep); font-weight: 600; }
.master-row__rank { font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700; color: var(--ink-3); }
.master-row__name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.master-row__bar { height: 5px; background: #f0edf0; border-radius: 3px; overflow: hidden; }
.master-row__bar i { display: block; height: 100%; background: var(--pink); border-radius: 3px; }
.master-row__meta { text-align: right; white-space: nowrap; }
.master-row__val { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.master-row__lines { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.od-chip { display: inline-block; font-family: var(--font-mono-heavy); font-size: 9px; font-weight: 700; color: var(--cherry-deep); background: #fee2e2; padding: 1px 6px; border-radius: var(--radius-pill); margin-top: 3px; }
.detail-head { padding: 14px 18px; border-bottom: 1px solid var(--hairline); display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.detail-id .nm { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.detail-id .sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.detail-stats { display: flex; gap: 18px; }
.detail-stat { text-align: right; }
.detail-stat .k { font-family: var(--font-mono-heavy); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.detail-stat .v { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.detail-stat .v--risk { color: var(--cherry-deep); }
.explorer-foot { margin-top: auto; padding: 9px 14px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
/* ============ INSIGHT LINE — Sales v2 (row, not card) ============
The canonical insight surface (supersedes .insight-callout). An insight is
a ROW, never a card: a hairline-framed container of rows, each = pill(layer)
+ sentence with numbers + meta (rule id · age) + CTA, with an
expandable "why" (human formula + source numbers + refresh timestamp). Max
3 rows + an "All insights (N) →" expander; empty state is one calm row.
Component: components/insight_line.py. The ENGINE (insight_engine.py) is a
CODE module; this is the canonical row it paints. */
.insight-lines {
border: 1px solid var(--hairline); border-radius: var(--radius-lg);
background: var(--paper); overflow: hidden;
}
.insight-line {
/* pill vertically CENTERED on the row (Andrea 2026-06-10, Item pass) */
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; border-bottom: 1px solid var(--hairline);
}
.insight-line:last-child { border-bottom: 0; }
.insight-line__pill { flex: 0 0 auto; margin-top: 0; } /* a .status-pill */
.insight-line__main { flex: 1 1 auto; min-width: 0; }
.insight-line__text {
font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45;
color: var(--ink-2);
}
.insight-line__text b {
font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* sub — VISIBLE subtitle (source/calc context, mono quiet). Canonized with
the Item pass (Andrea 2026-06-10): no hidden "why" — the formula + source
numbers live in plain sight under the sentence. */
.insight-line__sub {
margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px;
line-height: 1.5; color: var(--ink-3);
}
/* why — LEGACY ( variant, superseded by .insight-line__sub). */
.insight-line__why { margin-top: 4px; }
.insight-line__why-toggle {
cursor: pointer; list-style: none; display: inline-flex; align-items: center;
gap: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
}
.insight-line__why-toggle::-webkit-details-marker { display: none; }
.insight-line__why-toggle::before { content: "▸"; font-size: 9px; }
.insight-line__why[open] .insight-line__why-toggle::before { content: "▾"; }
.insight-line__why-toggle:hover { color: var(--ink-2); }
.insight-line__why-body {
margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px;
line-height: 1.55; color: var(--ink-3);
}
.insight-line__meta {
flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
white-space: nowrap;
}
.insight-line__cta {
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.04em; color: var(--pink-text); text-decoration: none;
}
.insight-line__cta:hover { color: var(--pink-deep); }
.insight-lines__more {
display: block; padding: 9px 14px; text-align: center;
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.04em; color: var(--pink-text); text-decoration: none;
border-top: 1px solid var(--hairline); background: var(--surface);
}
.insight-lines__more:hover { color: var(--pink-deep); }
/* Expander disclosure (All insights N) — native /, zero JS */
.insight-lines__expand { display: block; }
.insight-lines__expand > summary.insight-lines__more {
cursor: pointer; list-style: none; user-select: none;
}
.insight-lines__expand > summary.insight-lines__more::-webkit-details-marker { display: none; }
.insight-lines__expand > summary.insight-lines__more::marker { content: ""; }
.insight-lines__expand[open] > summary.insight-lines__more { color: var(--pink-deep); }
/* Le righe extra hanno .insight-line { display:flex }, che vince sulla UA-rule
di chiuso → nasconderle esplicitamente quando non-open. */
.insight-lines__expand:not([open]) > .insight-line { display: none; }
.insight-lines__empty {
display: flex; align-items: center; gap: 8px; padding: 13px 14px;
font-family: var(--font-sans); font-size: 13px; color: var(--ink-3);
}
.insight-lines__empty::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--success); flex: 0 0 7px;
}
@media (max-width: 720px) {
.insight-line { flex-wrap: wrap; }
.insight-line__meta { width: 100%; padding-left: 33px; }
}
/* ============ FIGURE STRIP · "By the numbers" sidebar (Part F · Brand V3) ============
Right-half "By the numbers" partner of an insight in .insight-pair.
Variants — ticker (mono numerics + hairlines), bare, spark,
timeline (canonical .timeline-style dot+rail). Combo-to-figure
pairing locked per RULES.md "Editorial rotation":
--masthead → --ticker
--quote → --bare
--sans → --timeline */
.figure-strip {
background: var(--paper); border: 1px solid var(--hairline);
border-radius: var(--radius-lg); box-sizing: border-box;
}
.figure-strip__eye {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--pink-deep);
}
.figure-strip__lbl {
font-family: var(--font-sans); font-size: 12px;
line-height: 1.5; color: var(--ink-2);
}
.figure-strip__lbl strong { color: var(--ink); font-weight: 600; }
/* Ticker variant — mono numerics + hairlines between rows */
.figure-strip--ticker { padding: 14px 20px; display: flex; flex-direction: column; }
.figure-strip--ticker .figure-strip__eye {
padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.figure-strip--ticker .figure-strip__list {
flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.figure-strip--ticker .figure-strip__row {
display: grid; grid-template-columns: 70px 1fr; gap: 14px;
align-items: start; padding: 12px 0;
border-bottom: 1px solid var(--hairline);
}
.figure-strip--ticker .figure-strip__row:last-child { border-bottom: 0; }
.figure-strip--ticker .figure-strip__num {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 18px; line-height: 1.5; color: var(--ink);
font-variant-numeric: tabular-nums; text-align: right;
}
/* Bare list variant — no card chrome, pink-text numerics */
.figure-strip--bare { padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; background: transparent; border: 0; border-radius: 0; }
.figure-strip--bare .figure-strip__eye { margin-bottom: 18px; }
.figure-strip--bare .figure-strip__list { display: flex; flex-direction: column; gap: 16px; }
.figure-strip--bare .figure-strip__row {
display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: start;
}
.figure-strip--bare .figure-strip__num {
font-family: var(--font-sans); font-weight: 600; font-size: 22px;
line-height: 1.4; color: var(--pink-text);
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
text-align: right;
}
/* Timeline variant — dot+rail */
.figure-strip--timeline { padding: 18px 20px; display: flex; flex-direction: column; }
.figure-strip--timeline .figure-strip__eye {
padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.figure-strip--timeline .figure-strip__list {
flex: 1; display: flex; flex-direction: column; justify-content: space-between;
position: relative; padding: 14px 0 6px;
}
.figure-strip--timeline .figure-strip__rail {
position: absolute; left: 5px; top: 18px; bottom: 18px;
width: 1px; background: var(--hairline);
}
.figure-strip--timeline .figure-strip__row {
display: grid; grid-template-columns: 11px 80px 1fr; gap: 10px; align-items: start;
}
.figure-strip--timeline .figure-strip__dot {
width: 11px; height: 11px; border-radius: 50%;
background: var(--pink); border: 2px solid var(--paper);
box-sizing: border-box; margin-top: 4px; display: inline-block;
}
.figure-strip--timeline .figure-strip__num {
font-family: var(--font-sans); font-weight: 600; font-size: 17px;
line-height: 1.5; color: var(--ink);
font-variant-numeric: tabular-nums; text-align: right;
}
/* ============================================================
INSIGHT v2 — diff + figure-strip spark/chart
(Stock pass · Andrea approved 2026-06)
============================================================ */
/* .insight-diff — "what's changed": flussi di transizione status→status.
Companion default: .figure-strip--spark. Vive in .insight-pair. */
.insight-diff { border: 1px solid var(--hairline); border-left: 3px solid var(--cherry); border-radius: var(--radius-md); background: var(--paper); padding: 17px 19px; display: flex; flex-direction: column; }
.insight-diff__head { font-family: var(--font-display); font-weight: 560; font-size: 21px; line-height: 1.18; letter-spacing: -0.012em; color: var(--ink); margin: 8px 0 0; }
.insight-diff__stand { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 12px; }
.insight-diff__stand b { color: var(--ink); font-weight: 600; }
.insight-diff__row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.insight-diff__flow { display: inline-flex; align-items: center; gap: 8px; }
.insight-diff__arrow { color: var(--ink-3); font-family: var(--font-mono); }
.insight-diff__n { font-family: var(--font-mono); font-weight: 700; font-size: 14px; min-width: 30px; text-align: right; }
.insight-diff__lbl { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-3); }
.insight-diff__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.insight-diff__src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
/* .figure-strip--spark — sparkline per metrica. Companion per insight ALTI
(ratio, diff): il __list è grid che riempie l'altezza, niente ballooning. */
.figure-strip--spark { padding: 14px 20px; display: flex; flex-direction: column; }
.figure-strip--spark .figure-strip__eye { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.figure-strip--spark .figure-strip__list { flex: 1; display: grid; grid-auto-rows: 1fr; }
.figure-strip--spark .figure-strip__row { display: grid; grid-template-columns: 58px 1fr 88px; gap: 12px; align-items: center; border-bottom: 1px solid var(--hairline); }
.figure-strip--spark .figure-strip__row:last-child { border-bottom: 0; }
.figure-strip--spark .figure-strip__num { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 18px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.figure-strip--spark .figure-strip__lbl { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.figure-strip--spark .figure-strip__lbl strong { color: var(--ink); font-weight: 600; }
.figure-strip--spark .figure-strip__spark { width: 88px; height: 24px; display: block; }
/* .figure-strip--chart — numeri compatti + un grafico nel footer.
Alternativa a --spark quando serve una singola viz d'insieme invece di N trend. */
.figure-strip--chart { padding: 14px 20px; display: flex; flex-direction: column; }
.figure-strip--chart .figure-strip__eye { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.figure-strip--chart .figure-strip__list { display: flex; flex-direction: column; }
.figure-strip--chart .figure-strip__row { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.figure-strip--chart .figure-strip__num { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 17px; color: var(--ink); text-align: right; }
.figure-strip--chart .figure-strip__lbl { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.figure-strip--chart .figure-strip__chart { flex: 1; min-height: 64px; margin-top: 12px; display: flex; flex-direction: column; }
/* ============ TABLE CELL TYPOGRAPHY (TODO_COWORK A3) ============
The .td-* cell family — ONE naming convention, extends the existing
.td-num / .td-num__delta. Apply to content inside .kpi-table /
.data-table. Atlas migrates its old .kpi-cell-* call sites to these. */
.td-dim { text-align: left; font-family: var(--font-sans); font-weight: 600; color: var(--ink); } /* was 500 — row identifier carries the row's identity, must read first */
.td-dim-caps { text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; } /* for CATEGORICAL CODE columns (brand abbr WNW, category FACE/LIP, subcategory HIGHLIGHT). Atlas: always uppercase. For proper nouns (Georgia, France) use plain .td-dim sentence-case. */
.td-value { text-align: right; font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.td-sku { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--ink); }
.td-desc {
font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.td-name {
font-family: var(--font-sans); font-weight: 500; font-size: 13px;
color: var(--ink); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.td-light { font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.td-mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
/* ============ PAGINATOR (TODO_COWORK B5) ============
Two sizes, one family. Rule of placement is by TABLE-WIDTH CONTEXT,
not by page count:
.paginator full — numbered pages + .paginator-info row count.
Use on FULL-WIDTH tables (taking the entire row).
Even at 2 pages, it gives proper "Showing X-Y of N".
.paginator-sm compact — Back / .paginator-pos "1 / N" / Next only.
Use on SIDE-BY-SIDE / PAIRED tables (Best/Worst, any
table sharing a row with another). Even at 100 pages,
there's no room for numbered buttons in those layouts.
The current page is ink-filled, NOT pink (pink = brand-surface / primary
action; "you are here" is a neutral state). */
.paginator { display: inline-flex; align-items: center; gap: 4px; }
.paginator-btn {
font-family: var(--font-sans); font-size: 13px;
min-width: 30px; height: 30px; padding: 0 10px;
border: 1px solid var(--hairline); background: white; color: var(--ink);
border-radius: var(--radius-sm); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 120ms, border-color 120ms;
}
.paginator-btn:hover { border-color: var(--ink-3); background: #f3f1f7; }
.paginator-btn.is-disabled, .paginator-btn[disabled] {
color: var(--ink-3); cursor: not-allowed; background: white; border-color: var(--hairline);
}
.paginator-num {
font-family: var(--font-sans); font-size: 13px;
min-width: 30px; height: 30px;
border: 1px solid transparent; background: transparent; color: var(--ink-2);
border-radius: var(--radius-sm); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.paginator-num:hover { background: #f3f1f7; color: var(--ink); }
.paginator-num.is-current {
/* Option C: pink-deep bold + underline, no fill. Drops the heavy ink-on-current.
Hover on other num/btn uses neutral #f3f1f7, never pink — pink reserved for "you are here". */
color: var(--pink-deep); font-weight: 700; background: transparent;
border-bottom: 2px solid var(--pink-deep); border-radius: 0;
height: 28px;
}
.paginator-gap { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); padding: 0 2px; }
.paginator-info {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3);
}
.paginator-pos { font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); padding: 0 10px; }
.paginator-sm .paginator-btn { font-size: 12.5px; height: 28px; padding: 0 9px; }
/* Paginator row — canonical layout for the strip below a table that holds
the paginator. The paginator is ALWAYS right-aligned (never left, never
centered — left-aligned reads as "this is in the wrong place"). Optional
.paginator-info sits on the left as a status label; flex pushes the
paginator to the right. */
.paginator-row {
display: flex; align-items: center; justify-content: flex-end;
gap: 14px; flex-wrap: wrap;
margin-top: 12px;
}
.paginator-row .paginator-info { margin-right: auto; } /* if present, info goes left, paginator stays right */
/* ============ SECTION TITLES (TODO_COWORK C2) ============
Canonical headers for app pages and panel blocks where a semantic
would interfere with page heading hierarchy. For brand-book pages keep
using // from brand.css. The subtitle pattern is dual-use:
inline (right of the title, table/panel header) OR stacked below the
title (page header with context line). */
.section-title {
font-family: var(--font-sans); font-weight: 600;
font-size: 20px; line-height: 1.2; letter-spacing: -0.01em;
color: var(--ink);
}
.section-subtitle {
font-family: var(--font-sans); font-weight: 400;
font-size: 13px; color: var(--ink-3);
}
/* Small mono eyebrow that sits ABOVE the .kpi-header on a Sales-tab masthead
(Shell v3 — Option 3 KPI-first stack). The big h1 section title is gone:
the section masthead is bar -> KPI header (led by this eyebrow) -> tabs ->
content. Tiny by design — the sidebar already says "where you are"; the
eyebrow is just the labelled handle. Reuses mono-heavy for the 700 weight
slot. */
.section-eyebrow {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-3);
}
/* ============ ACTIVITY TIMELINE (Admin panel · issue #107 / #A1) ============
Vertical chronological feed — one `.timeline` wraps N `.timeline-event`
rows. Each event = a RAIL (a hairline connector carrying a tone dot) + a
BODY (kind eyebrow · relative time · title · optional drill-down detail).
Built only from existing tokens: the connector is `--hairline` (the
canonical grid/connector colour — no `timeline-line-color` token is
needed), the dot carries the tone. Tone modifier colours the DOT ONLY;
body text stays `--ink`, so the feed reads as one quiet column with
colour used sparingly as signal:
--ok green — run / deploy / upload succeeded
--info teal — routine informational event (file arrived)
--warn amber — slow / skipped / degraded
--error red — failed run, deploy, or ingestion
--neutral gray — unclassified / system note
Use ONLY for a time-ordered event feed (admin activity, audit log, an
SKU's change history). A list that is NOT time-ordered is a table. */
.timeline { display: flex; flex-direction: column; }
/* Truncated mode — when the timeline ships more events than fit on screen
the wrapper gets `.timeline--collapsed`, hiding every event past the
nth-of-type set. The clientside toggle in pages/admin.py removes the
class to reveal the full list. The default nth value is 8; pages can
override with their own selector (e.g. `.timeline--collapsed.timeline--limit-5`). */
.timeline--collapsed .timeline-event:nth-of-type(n+9) { display: none; }
.timeline__more {
margin-top: 8px;
align-self: flex-start;
font-family: var(--font-mono); font-size: 11.5px;
background: transparent; border: 0; padding: 4px 0;
color: var(--pink-deep); cursor: pointer;
}
.timeline__more:hover { text-decoration: underline; }
.timeline-event { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
/* Rail — the connector runs the full row height; the dot is punched out of
it with a `--paper` ring so the line never shows through the dot. */
.timeline-event__rail { position: relative; display: flex; justify-content: center; }
.timeline-event__rail::before {
content: ''; position: absolute; top: 0; bottom: 0;
width: 2px; background: var(--hairline);
}
/* First event: connector starts AT the dot. Last event: it stops at the
dot. A lone event drops the connector entirely — never a dangling line. */
.timeline-event:first-child .timeline-event__rail::before { top: 6px; }
.timeline-event:last-child .timeline-event__rail::before { bottom: 6px; }
.timeline-event:only-child .timeline-event__rail::before { display: none; }
.timeline-event__dot {
position: relative; z-index: 1; margin-top: 1px;
width: 11px; height: 11px; border-radius: var(--radius-pill);
background: var(--ink-3); box-shadow: 0 0 0 3px var(--paper);
}
.timeline-event--ok .timeline-event__dot { background: var(--success); }
.timeline-event--info .timeline-event__dot { background: var(--info); }
.timeline-event--warn .timeline-event__dot { background: var(--warning); }
.timeline-event--error .timeline-event__dot { background: var(--error); }
.timeline-event--neutral .timeline-event__dot { background: var(--ink-3); }
/* Body — bottom padding gives the inter-event rhythm the rail spans. */
.timeline-event__body { min-width: 0; padding-bottom: var(--space-5); }
.timeline-event:last-child .timeline-event__body { padding-bottom: 0; }
.timeline-event__head { display: flex; align-items: baseline; gap: 8px; }
.timeline-event__kind {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
.timeline-event__time {
margin-left: auto; flex: 0 0 auto;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
.timeline-event__title {
margin-top: 3px;
font-family: var(--font-sans); font-weight: 500; font-size: 13.5px;
line-height: 1.45; color: var(--ink);
}
/* A mono fragment inside the title — a folder path, an id, a run number. */
.timeline-event__title .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
/* Drill-down — `.timeline-event--clickable` marks an event that opens; the
whole body is the hit target. `.is-open` rotates the chevron and the
detail card is rendered below. */
.timeline-event--clickable .timeline-event__body { cursor: pointer; }
.timeline-event__expand {
display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
padding: 0; border: 0; background: transparent; cursor: pointer;
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--pink-deep);
}
.timeline-event__expand .chev { transition: transform var(--motion-medium) var(--motion-ease-out); }
.timeline-event.is-open .timeline-event__expand .chev { transform: rotate(90deg); }
/* Detail panel collapsed by default — visible only when the parent
.timeline-event has .is-open (toggled by the clientside delegate
on .timeline-event__expand clicks in pages/admin.py). Without this
discriminator the panel renders open on every event and the
Activity timeline section grows unbounded. */
.timeline-event__detail { display: none; }
.timeline-event.is-open .timeline-event__detail {
display: block;
margin-top: 8px;
border: 1px solid var(--hairline); border-radius: var(--radius-md);
background: var(--paper); padding: 10px 14px;
}
.timeline-event__detail-row {
display: flex; gap: 12px; padding: 3px 0;
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
}
.timeline-event__detail-row dt {
flex: 0 0 92px; margin: 0; color: var(--ink-3);
font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.timeline-event__detail-row dd { margin: 0; min-width: 0; color: var(--ink); word-break: break-word; }
@media (prefers-reduced-motion: reduce) {
.timeline-event__expand .chev { transition: none; }
}
/* ============ SPARKLINE (Admin panel · issue #107 / #A1) ============
Inline 7-bar micro bar-chart — an at-a-glance trend with no axes, sized
for a table cell (row-count over the last 7 days, Data Lake state). Bar
heights are DATA: set them inline (`style="height:NN%"`). A near-zero bar
in `--hairline` (`.sparkline__bar--muted`) flags a skipped / no-update
day; the most recent day takes `--last` for a quiet "you are here"
emphasis. Neutral by design — the row's `.status-pill` carries the
sentiment, the sparkline carries only the shape; never tint it to
duplicate the pill. Built from existing tokens; no new token. */
.sparkline {
display: inline-flex; align-items: flex-end; gap: 2px;
width: 64px; height: 26px;
}
.sparkline__bar { flex: 1 1 0; min-height: 2px; background: var(--ink-3); border-radius: 1px; }
.sparkline__bar--muted { background: var(--hairline); }
.sparkline__bar--last { background: var(--ink-2); }
/* ============ RUN STRIP (Admin · Pipelines · issue #107 / #A1) ============
Inline status-square history — the last N automation run outcomes for one
workflow / flow, oldest left, newest right. Sibling of `.sparkline`: same
"micro-viz in a table cell" family, but squares-for-STATUS, not bars-for-
magnitude. Cell tone uses the timeline dot's vocabulary
(`--ok / --fail / --skip / --running`); a bare `--hairline` cell is a slot
with no run. Use for a CI / pipeline / flow run history; for a numeric
trend use `.sparkline`. Built from existing tokens; no new token. */
.run-strip { display: inline-flex; align-items: center; gap: 3px; }
.run-strip__cell { width: 12px; height: 12px; border-radius: 2px; background: var(--hairline); }
.run-strip__cell--ok { background: var(--success); }
.run-strip__cell--fail { background: var(--error); }
.run-strip__cell--skip { background: var(--ink-3); }
.run-strip__cell--running { background: var(--warning); }
/* ============ KV STRIP (Admin · status rows · issue #107 v2) ============
Horizontal labelled mini-KPI strip — a row of N quiet labelled values
inside a `.panel`. Sibling of `.kpi-row` but denser: smaller eyebrow,
smaller value, no card chrome of its own (the wrapping `.panel` carries
the border). Use when N≥3 short facts share one read (R2 backup specs:
bucket / last-backup / size / retention · Circana monthly: period + 4
country totals · ingest-worker telemetry: req / p95 / errors / writes).
An optional trailing `.status-pill` aligns right inside the strip.
The `--lead` modifier marks an opening item that's wider and
visually separated — for the "headline + N satellites" composition.
Built from existing tokens; no new token. */
.kv-strip {
display: flex; align-items: stretch; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
}
.kv-strip__item { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; flex: 1; }
.kv-strip__item--lead {
flex: 0 0 auto; min-width: 200px;
padding-right: var(--space-4);
border-right: 1px solid var(--hairline);
}
.kv-strip__k {
font-family: var(--font-mono-heavy); font-weight: 700;
font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
}
.kv-strip__v {
font-family: var(--font-sans); font-weight: 600;
font-size: 15px; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.kv-strip__v--lg {
/* Larger value variant — used on the `--lead` item so the headline
reads prominent. Wordmark family per the masthead hierarchy. */
font-family: var(--font-wordmark); font-weight: 400;
font-size: 22px; line-height: 1.1;
}
.kv-strip__v.mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.kv-strip__sub {
font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
}
.kv-strip > .status-pill { margin-left: auto; align-self: center; }
@media (max-width: 768px) {
.kv-strip { flex-direction: column; }
.kv-strip__item--lead { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: 0; padding-bottom: var(--space-3); min-width: 0; }
}
/* ============ ACTION TOOLBAR (Admin · quick actions · issue #107 v2) ============
Compact horizontal action row — N inline action slots separated by a
vertical hairline. Replaces a tile-grid of quick actions when each one
is small (one button + optional select + an "every-action audit-logged"
caption): same actions, ~70% less vertical space.
Each `.action-toolbar__item` = a button row (`.action-toolbar__row`) +
an optional last-run caption (`.action-toolbar__last`). Rule 02
(cherry-for-final-only) still applies: only the final action — typically
build / save / send — gets `.btn-primary`; the rest are `.btn-secondary`
/ `.btn-ghost`. Destructive (`.btn-destructive`) appears only inside the
confirm modal that the trigger opens, never on the toolbar itself.
Built from existing tokens; no new token. */
.action-toolbar {
display: flex; align-items: stretch; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--hairline); border-radius: var(--radius-lg);
background: var(--paper);
}
.action-toolbar__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.action-toolbar__row { display: flex; align-items: center; gap: 8px; }
.action-toolbar__last {
font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
}
.action-toolbar__sep { width: 1px; background: var(--hairline); margin: 2px 0; }
@media (max-width: 900px) {
.action-toolbar { flex-wrap: wrap; }
.action-toolbar__sep { display: none; }
}
/* ================================================================
PART C · CUSTOMER HEADER + DATA-TABLE GROUP/BRAND-EDGE + EXPLORER--FIXED
The Open Orders design pass produced four patterns that didn't exist
in the canon. Tracked in PART-C-CANONIZATION.md. Canonized 2026-05-24.
================================================================ */
/* .cust-header — the rich detail-header for an explorer whose detail is
one CUSTOMER (Open Orders direction B). Three zones: identity (logo or
monogram+name) · hairline divider · main (open total + brand bar). */
.cust-header { display: flex; gap: 16px; align-items: stretch; padding: 15px 18px; border-bottom: 1px solid var(--hairline); }
.cust-header__id { flex: 0 0 150px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cust-header__divider { flex: 0 0 1px; background: var(--hairline); }
.cust-header__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cust-header__summary { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.cust-header__amount { font-family: var(--font-sans); font-size: 23px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cust-header__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.cust-header__meta b { color: var(--cherry-deep); font-weight: 500; }
/* Customer identity — either a real logo image (img.cust-logo) or the
monogram fallback (.cust-monogram + .cust-name). The logo library is
a consumer-app deliverable: assets/customer-logos/{custno}.svg, with
monogram fallback when the file is missing. */
img.cust-logo { height: 19px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.cust-monogram { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-md); background: var(--pink-tint); border: 1px solid var(--pink-light); color: var(--pink-text); font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.cust-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); }
/* .dt-group — a group-header inside .data-table: opens a section in
the table (e.g. an SKU table grouped by order_no — the group row
carries order id + request date + status pill + value). */
.dt-group td { padding: 10px 14px 9px; border-top: 2px solid var(--hairline); }
.dt-group:first-child td { border-top: 0; }
.dt-group__row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dt-group__id { font-family: var(--font-mono-heavy); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink); }
.dt-group__date { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.dt-group__date strong { color: var(--ink-2); font-weight: 500; }
.dt-group__val { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* .dt-brand-edge — a 3px left edge on a SKU row tying it to a brand;
colour is data-driven via the --brand-edge custom property, set inline
per row (the chart palette c1-c10 provides the brand colours, matched
to the .cust-header brand bar). */
.dt-brand-edge td:first-child { box-shadow: inset 3px 0 0 var(--brand-edge, transparent); }
/* DEPRECATED — use .atlas-grid + .drawer (RULES §Open Orders A3). */
/* .explorer--fixed — explorer modifier: the body is a fixed-height
rectangle; master and detail scroll internally via .explorer-scroll.
Solves the ragged page-split when the two panes have unequal content. */
.explorer--fixed .explorer-body { height: 444px; }
.explorer--fixed .explorer-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.explorer--fixed .master-head { flex: 0 0 auto; }
/* ============ SALES REVIEW · F-Code.9 family (2026-05-31) ============
Components introduced by the Sales · Overview + Compare + Countries
redesign. All compose existing tokens — no new color / type / radius
needed. Used by:
- .dim-switch : Sales · Compare page-identity dim switcher
(Category / Sub-category / License / Brand)
- .snapshot : 3-up mini KPI strip (Compare top mover / drag /
mix gainer · Overview digest cards) — data-driven,
NOT an insight (see .insight-line / .insight-pair)
- .chartmode : compact mode toggle for chart panel-head top-right
(Stacked / Cumulative / Achievement · $ / YoY ·
Week / Month / Year)
- .corefilter : Compare "Core only" toggle (hide dissolving cats
Skincare / Nail) — chip-style mini-toggle
- .drillcrumb : Compare drill state breadcrumb (← All categories ›
FACE) — appears between dim-switch and content
====================================================================== */
/* --- .dim-switch · page-identity segmented (Compare) -------------------
Sits below the page head, defines what the page is slicing.
Different from .tabs (sub-tab nav) and from .segmented (in-panel mode):
bigger affordance, eyebrow label on the left, ink-dark active state. */
.dim-switch-row {
display: flex; align-items: center; gap: 16px;
padding: 8px 0 16px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 14px;
}
.dim-switch-label {
font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-3); white-space: nowrap;
}
.dim-switch {
display: inline-flex; padding: 3px;
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: var(--paper);
}
.dim-switch__btn {
font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
padding: 7px 14px; border: 0; background: transparent;
color: var(--ink-2); cursor: pointer;
border-radius: 6px;
transition: background var(--motion-base) var(--motion-ease-out), color var(--motion-base);
letter-spacing: -0.005em;
}
.dim-switch__btn:hover {
background: var(--pink-tint); color: var(--ink);
}
.dim-switch__btn.is-active {
background: var(--ink); color: var(--paper);
font-weight: 600;
}
/* --- .corefilter · Core / All chip toggle (Compare) --------------------
Sits to the right of .dim-switch (margin-left: auto), small mini-toggle
to hide dissolving categories. Disabled state when in drilled view. */
.corefilter {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
.corefilter__hint { font-style: italic; color: var(--ink-3); }
.corefilter__toggle {
display: inline-flex; padding: 2px;
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: var(--paper);
}
.corefilter__btn {
font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 10px; border: 0; background: transparent;
color: var(--ink-3); cursor: pointer;
border-radius: 5px;
}
.corefilter__btn.is-active {
background: var(--pink-tint); color: var(--pink-deep);
}
.corefilter__btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* --- .drillcrumb · drill state breadcrumb (Compare D2) ----------------
Appears between dim-switch row and content when user drills into a dim
value. Shows back link + path + drill metadata. Pink-tint bg signals
"you are inside a drill". */
.drillcrumb {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: color-mix(in srgb, var(--pink-tint) 28%, white);
border: 1px solid var(--pink-light);
border-radius: var(--radius-md);
margin-bottom: 14px;
}
.drillcrumb__back {
font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--pink-deep); cursor: pointer; text-decoration: none;
}
.drillcrumb__back:hover { text-decoration: underline; }
.drillcrumb__sep { color: var(--ink-3); opacity: 0.6; }
.drillcrumb__current {
font-family: var(--font-sans); font-size: 14px; font-weight: 600;
color: var(--ink); letter-spacing: -0.01em;
}
.drillcrumb__meta {
margin-left: auto;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
color: var(--ink-2);
}
/* --- .snapshot · 3-up mini KPI strip (Compare + Overview digest) -----
Data-driven 3-up panel sitting above a chart. Different from .insight-
editorial (that's narrative); from .kpi-row (that's headline KPIs);
from .hero-kpi-card (that's sentiment-bordered). Snapshot is "what
moved most" in 3 quick reads — top mover / biggest drag / mix gainer
pattern. All items composed inline with a pink left border (no card
chrome, lives inside a panel). */
.snapshot {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
padding: 14px 16px;
background: color-mix(in srgb, var(--pink-tint) 28%, white);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
}
.snapshot__item {
display: flex; flex-direction: column; gap: 4px;
padding-left: 14px;
border-left: 2px solid var(--pink);
}
.snapshot__item:first-child { padding-left: 0; border-left: 0; }
.snapshot__eye {
font-family: var(--font-mono-heavy); font-size: 9.5px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-3);
}
.snapshot__headline {
font-family: var(--font-sans); font-weight: 600; font-size: 15px;
color: var(--ink);
display: inline-flex; align-items: baseline; gap: 6px;
}
.snapshot__headline .y {
font-family: var(--font-mono); font-weight: 700; font-size: 12px;
}
.snapshot__headline .y--up { color: var(--success-deep); }
.snapshot__headline .y--down { color: var(--cherry-deep); }
.snapshot__headline .y--flat { color: var(--ink-3); }
.snapshot__meta {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--ink-3);
}
/* --- .chartmode · compact mode toggle in chart panel-head -------------
Sits top-right of a chart's panel-head. Stacked when multiple mode
axes (granularity + display mode) coexist. Different from .dim-switch
(page identity) and from .segmented (in-panel filter). Compact mono
uppercase buttons, ink-dark active state. */
.chartmode {
display: inline-flex; padding: 2px;
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: var(--paper);
}
.chartmode__btn {
font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 10px; border: 0; background: transparent;
color: var(--ink-3); cursor: pointer;
border-radius: 5px;
}
.chartmode__btn:hover { color: var(--ink); }
.chartmode__btn.is-active {
background: var(--ink); color: var(--paper);
}
.chartmode-set { display: flex; gap: 6px; align-items: center; }
/* When multiple .chartmode siblings coexist, .chartmode-set wraps them
for consistent gap. Sales · Overview hero uses 2 sets: [Week|Month|Year]
+ [Stacked|Cumul|Achievement]; .metric-select sits separately on the
chart title (left side), not inside .chartmode-set. */
/* --- .digest-card · mini-snapshot card pointing at a deep sub-tab -----
F-Code.9g (Sales review 2026-05-31). Used in 3-up grid on Sales ·
Overview to give a "where to dig" digest — Categories pulse, Countries
pulse, Pipeline pulse — each card has a title + CTA to the deep tab +
3 rows of labeled metrics. Different from .snapshot (which is the
inline 3-up STRIP on Compare/Overview · top mover / drag / mix gainer
— same dim, 3 facets); .digest-card is a CARD with header + CTA
pointing to a different page, each card a different sub-tab digest.
Composes plain table-style rows; no new tokens. */
.digest-card {
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.digest-card__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--hairline);
}
.digest-card__title {
font-family: var(--font-mono-heavy);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
}
.digest-card__cta {
font-family: var(--font-mono-heavy);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pink-deep);
cursor: pointer;
text-decoration: none;
}
.digest-card__cta:hover { text-decoration: underline; }
.digest-card__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
}
.digest-card__row-lbl {
font-family: var(--font-mono-heavy);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.digest-card__row-val {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.digest-card__row-val .y {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
margin-left: 4px;
}
.digest-card__row-val .y--up { color: var(--success-deep); }
.digest-card__row-val .y--down { color: var(--cherry-deep); }
.digest-card__row-val .y--flat { color: var(--ink-3); }
/* --- .projection · EOM/EOQ deterministic projection panel -------------
F-Code.9h (Sales review 2026-05-31). Used on Sales · Overview to
show end-of-month / end-of-quarter projection alongside a trajectory
chart. Deterministic arithmetic (MTD + open ETA + budget pace at
remaining days) — NO ML forecast. 2-column layout: KPI list on left
+ trajectory chart on right. The KPI rows have a label with a quiet
italic hint subtitle + a right-aligned value with a delta below.
Composes existing tokens — no new color / type. */
.projection {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 14px;
}
/* Sales v2 (feedback 2026-06-05): un solo pannello — header (titolo + model-card
a destra) + griglia "3 numeri | chart GRANDE". Il chart (1fr) è molto più largo
della colonna numeri (max 300px), come il mockup; i box interni sono senza
bordo perché vivono dentro un `.panel`. */
.projection__head-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.projection__modelcard {
margin-left: auto; font-family: var(--font-mono);
font-size: 10.5px; color: var(--ink-3); text-align: right;
}
.projection__grid {
display: grid; grid-template-columns: minmax(0, 300px) 1fr;
gap: 22px; align-items: center;
}
@media (max-width: 880px) { .projection__grid { grid-template-columns: 1fr; } }
.projection__kpis {
display: flex;
flex-direction: column;
gap: 18px;
}
.projection__head {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
padding-bottom: 8px;
border-bottom: 1px solid var(--hairline);
}
.projection__kpi {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: baseline;
}
.projection__kpi-lbl {
font-family: var(--font-mono-heavy);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.projection__kpi-hint {
font-family: var(--font-sans);
font-size: 10.5px;
color: var(--ink-3);
display: block;
text-transform: none;
letter-spacing: 0;
margin-top: 2px;
font-weight: 400;
font-style: italic;
}
.projection__kpi-val {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--ink);
text-align: right;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.projection__kpi-delta {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
margin-top: 2px;
}
.projection__kpi-delta--up { color: var(--success-deep); }
.projection__kpi-delta--down { color: var(--cherry-deep); }
.projection__traj { min-width: 0; }
.projection__traj-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.projection__traj-title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.projection__traj-meta {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-3);
}
.projection__traj-foot {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 6px;
}
/* ============ INSIGHT PAIR · insight (ratio/diff/dark) + .figure-strip ============
2-col host pairing a canonical insight (left — .insight-ratio / .insight-diff /
.insight-dark / .insight-viz, the narrative) with a .figure-strip "By the
numbers" (right, the hard numbers). The post-chart insight strip on Sales /
Compare / Stock (and any tab). Insight is display-only inside the pair. */
.insight-pair {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 16px; align-items: stretch;
}
.insight-pair .figure-strip { height: 100%; box-sizing: border-box; }
@media (max-width: 880px) { .insight-pair { grid-template-columns: 1fr; } }
/* ============ INSIGHT — TICKER / DARK / RATIO (Stock pass · approved 2026-06) ============
Headline voice = --font-display (Fraunces, roman 500-560 + italic for emphasis);
body = --font-sans; figures = --font-mono. Tone via .is-down / .is-warn / .is-up.
RULE (RULES.md): an insight never runs alone horizontally — it sits inside
.insight-pair (insight + .figure-strip "by the numbers"). The ONLY standalone
full-width exception is .insight-ticker. Half-width cap = --space-insight-max;
inside .insight-pair the insight fills its column. On 27"+ the column caps and
two halves sit 2-up rather than one stretched strip.
Dark variant: light text via color-mix on --paper/--ink (no literals). */
/* shared bits */
.insight-kicker { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.insight-cta { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-deep); cursor: pointer; white-space: nowrap; }
.insight-body { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.insight-body b { color: var(--ink); font-weight: 600; }
/* TICKER — the standalone exception (one line, full-width, dot = tone) */
.insight-ticker { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--paper); }
.insight-ticker__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: 0 0 8px; background: var(--ink-3); }
.insight-ticker.is-down .insight-ticker__dot { background: var(--cherry); }
.insight-ticker.is-warn .insight-ticker__dot { background: var(--warning); }
.insight-ticker.is-up .insight-ticker__dot { background: var(--success); }
.insight-ticker__eye { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.insight-ticker__txt { font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.insight-ticker__txt b { font-weight: 600; }
.insight-ticker .insight-cta { margin-left: auto; }
/* RATIO — disproportion bars (the form is the insight). Pairs with .figure-strip. */
.insight-ratio { border: 1px solid var(--hairline); border-left: 3px solid var(--cherry); border-radius: var(--radius-md); background: var(--paper); padding: 17px 19px; display: flex; flex-direction: column; max-width: var(--space-insight-max); }
.insight-pair .insight-ratio { max-width: none; }
.insight-ratio.is-warn { border-left-color: var(--warning); }
.insight-ratio__head { font-family: var(--font-display); font-weight: 560; font-size: 22px; line-height: 1.16; letter-spacing: -0.014em; color: var(--ink); margin: 8px 0 18px; }
.insight-ratio__head i { font-style: italic; }
.insight-ratio__row { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.insight-ratio__lab { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-align: right; line-height: 1.4; }
.insight-ratio__lab small { display: block; color: var(--ink-3); font-weight: 500; }
.insight-ratio__fill { height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; padding-left: 12px; }
.insight-ratio__fill--base { background: var(--ink-2); }
.insight-ratio__fill--peak { background: var(--cherry); }
.insight-ratio__pct { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1; color: var(--paper); letter-spacing: -0.02em; }
.insight-ratio__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.insight-ratio__src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
/* DARK STATEMENT — ink panel, "stop and read". Pairs with .figure-strip.
Light text uses color-mix on --paper over --ink — token-based, no literals. */
.insight-dark { background: var(--ink); border-radius: var(--radius-md); padding: 19px 21px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; max-width: var(--space-insight-max); }
.insight-pair .insight-dark { max-width: none; }
.insight-dark .insight-kicker { color: var(--pink-light); }
.insight-dark__head { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.18; letter-spacing: -0.01em; color: var(--paper); margin-top: 11px; }
.insight-dark__head i { font-style: italic; color: color-mix(in srgb, var(--pink-light) 82%, var(--paper)); }
.insight-dark__body { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.62; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); margin-top: 12px; }
.insight-dark__body b { color: var(--paper); font-weight: 600; }
.insight-dark__data { font-family: var(--font-mono); font-size: 10.5px; color: color-mix(in srgb, var(--paper) 52%, var(--ink)); margin-top: 12px; letter-spacing: 0.02em; }
.insight-dark__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.insight-dark__src { font-family: var(--font-mono); font-size: 10px; color: color-mix(in srgb, var(--paper) 45%, var(--ink)); }
.insight-dark .insight-cta { color: var(--pink-light); }
/* VIZ — headline + embedded chart ("show + tell"). The chart slot .insight-viz__chart
holds ANY viz (sparkline by default, but also area / mini-bars / etc.). Pairs with
.figure-strip. .insight-ratio is the ratio-specialised cousin; this is the general one. */
.insight-viz { border: 1px solid var(--hairline); border-left: 3px solid var(--cherry); border-radius: var(--radius-md); background: var(--paper); padding: 17px 19px; display: flex; flex-direction: column; max-width: var(--space-insight-max); }
.insight-pair .insight-viz { max-width: none; }
.insight-viz.is-warn { border-left-color: var(--warning); }
.insight-viz.is-up { border-left-color: var(--success); }
.insight-viz__head { font-family: var(--font-display); font-weight: 560; font-size: 22px; line-height: 1.16; letter-spacing: -0.012em; color: var(--ink); margin: 8px 0 0; }
.insight-viz__head i { font-style: italic; }
.insight-viz__chart { width: 100%; margin: 14px 0 0; display: block; }
.insight-viz__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.insight-viz__src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
/* PAIR REVERSE — figure-strip a sinistra, insight a destra. Per ALTERNARE la
direzione della coppia pagina-su-pagina e dare ritmo all'impaginato (DOM invariato,
solo riassegnazione di colonna). DEFAULT: una sola coppia insight per vista — non
impilare due blocchi pesanti uno sopra l'altro (usa il ticker per un 2° segnale leggero). */
.insight-pair--reverse { grid-template-columns: 1fr 1.4fr; }
.insight-pair--reverse > :first-child { grid-column: 2; }
.insight-pair--reverse > :last-child { grid-column: 1; }
@media (max-width: 880px) {
.insight-pair--reverse { grid-template-columns: 1fr; }
.insight-pair--reverse > :first-child,
.insight-pair--reverse > :last-child { grid-column: auto; }
}
/* ============ MERCHANDISING BOARD — .mz-* (Merch pass · Andrea 2026-06-04) ============
Tray-level planogram for Brand · Merchandising. A single 12-col grid (.mz-board)
on which trays (.mz-tray) and graphic zones (.mz-graphic) are positioned via
grid-column / grid-row — rowspan for a multi-shelf hotspot. The geometry is
data-driven from MERCH.xlsx (silver/merch); never hand-positioned. A tray is a
clickable ENTITY — drill = the canonical .drawer (640px progression-first), the
same family as SKU / Client / Order (Modal review unificata). Performance tint
(.mz-tray.h-*) reads index-vs-unit on success / cherry, coherent with .matrix-heat.
Photo view (.mz-photo) overlays the same geometry on the POG asset — no manual
hotspot mapping. KPI strips inside the drawer stack in .mz-kvbox (hairline wrapper
around canonical .kv-strip). Reference: brand-mockups/merch.html.
Built from existing tokens; no new token. */
.mz-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; }
.mz-controls .spacer { flex: 1; }
/* board (sinistra) + drawer (destra). Il drawer prende PIÙ spazio del board
(la tabella prodotti respira, niente scroll orizzontale); il board resta
contenuto invece di stirarsi. Il drawer ha un min (680px) per far stare la
tabella prodotti senza overflow. Sotto 1280px le due colonne si impilano. */
.mz-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(680px, 1.2fr); gap: 18px; align-items: start; margin-top: 16px; }
/* margin-bottom: 0 — il margine default del .panel sul board lo disallineava dal
drawer. align-items:start (il board resta alla sua altezza naturale, COSTANTE
= stesso planogram per ogni tray) + il drawer capato a quell'altezza via JS
(assets/merch.js syncDrawerHeight) → board e drawer alti uguali e la sezione
NON cambia altezza cambiando tray (no stretch/shrink). */
.mz-layout > * { min-width: 0; margin-bottom: 0; }
@media (max-width: 1280px) { .mz-layout { grid-template-columns: 1fr; } }
/* the wall — one 12-col grid; trays place themselves with grid-area (rowspan for the hotspot) */
.mz-board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px 7px; padding: 12px; background: color-mix(in srgb, var(--ink) 4%, var(--paper)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.mz-graphic { border-radius: var(--radius-md); padding: 16px 14px; text-align: center; background: var(--surface); border: 1px solid color-mix(in srgb, var(--pink) 18%, var(--paper)); z-index: 1; }
.mz-graphic--footer { background: var(--ink); border-color: var(--ink); }
.mz-graphic--hotspot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: var(--font-sans); transition: transform 140ms cubic-bezier(0.23,1,0.32,1), box-shadow 140ms cubic-bezier(0.23,1,0.32,1), border-color 140ms ease; }
@media (hover: hover) and (pointer: fine) {
.mz-graphic--hotspot:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); border-color: var(--pink); }
}
.mz-graphic--hotspot:active { transform: scale(0.97); }
.mz-graphic--hotspot:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mz-graphic--hotspot.is-selected { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); }
.mz-graphic .wm { font-family: var(--font-wordmark); font-size: 18px; color: var(--ink); letter-spacing: 0.01em; }
.mz-graphic--footer .wm { color: var(--paper); }
.mz-graphic .gl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.mz-graphic--footer .gl { color: color-mix(in srgb, var(--paper) 45%, var(--ink)); }
.mz-rail { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, var(--paper)); z-index: 0; margin: -1px 2px; }
.mz-tray { position: relative; z-index: 1; text-align: left; font-family: var(--font-sans); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 8px 9px 9px; cursor: pointer; transition: transform 140ms cubic-bezier(0.23,1,0.32,1), box-shadow 140ms cubic-bezier(0.23,1,0.32,1), border-color 140ms ease; }
@media (hover: hover) and (pointer: fine) {
.mz-tray:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); border-color: var(--pink-light); }
}
.mz-tray:active { transform: scale(0.97); }
.mz-tray:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mz-tray.is-selected { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); } /* pink edge = selected (B10) */
.mz-tray__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mz-tray__id { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 9px; letter-spacing: 0.1em; color: var(--pink-deep); background: var(--pink-tint); padding: 1px 5px; border-radius: 4px; }
.mz-tray__fac { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mz-tray__name { font-family: var(--font-sans); font-weight: 500; font-size: 11px; line-height: 1.25; color: var(--ink); margin-top: 4px; }
.mz-tray__val { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; min-height: 13px; }
.mz-tray__facings { display: flex; gap: 2px; margin-top: 6px; }
.mz-tray__facings i { flex: 1 1 0; max-width: 8px; height: 10px; border-radius: 2px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--pink) 14%, var(--paper)); }
.mz-tray__facings .more { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-3); align-self: center; padding-left: 2px; }
/* performance tint — index vs unit average (coherent with .matrix-heat: green above / cherry below) */
.mz-tray.h-p2 { background: color-mix(in srgb, var(--success) 17%, var(--paper)); }
.mz-tray.h-p1 { background: color-mix(in srgb, var(--success) 8%, var(--paper)); }
.mz-tray.h-n1 { background: color-mix(in srgb, var(--cherry) 7%, var(--paper)); }
.mz-tray.h-n2 { background: color-mix(in srgb, var(--cherry) 15%, var(--paper)); }
/* photo view — POG asset (background-image set inline) + hotspot overlay on the same geometry */
.mz-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); background-size: cover; background-position: center; }
.mz-photo__note { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; text-align: center; padding: 8px 12px; background: color-mix(in srgb, var(--ink) 62%, transparent); z-index: 2; }
.mz-photo__note .t1 { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); }
.mz-photo__note .t2 { font-family: var(--font-mono); font-size: 10.5px; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.mz-photo .mz-board { background: transparent; border: 0; }
.mz-photo .mz-tray { background: color-mix(in srgb, var(--paper) 35%, transparent); border: 1.5px dashed color-mix(in srgb, var(--pink) 55%, var(--paper)); }
.mz-photo .mz-tray .mz-tray__name, .mz-photo .mz-tray .mz-tray__facings, .mz-photo .mz-tray .mz-tray__val { display: none; }
.mz-photo .mz-graphic { opacity: 0.45; }
/* drawer host — the board's right pane; riempie la sua colonna (niente cap di
larghezza), altezza = contenuto del drawer (nessuna scrollbar interna). */
.mz-drawerhost { display: flex; overflow: hidden; }
.mz-drawerhost .drawer { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; max-height: none; }
.mz-drawerhost .d-body { flex: 1; overflow: auto; transition: opacity 160ms ease, filter 160ms ease; }
.mz-drawerhost .d-foot { margin-top: auto; }
.mz-drawerhost.is-swapping .d-body { opacity: 0.45; filter: blur(2px); }
/* Tabelle del drawer: table-layout:fixed + colgroup → la cella clippa e NON si
allarga mai. Ellipsis hardening: i nomi lunghi vanno in "…", non spingono la
colonna (td overflow:hidden + span block/min-width:0/text-overflow:ellipsis
dentro la cella flex .mz-prodcell). */
.mz-drawerhost .kpi-table { table-layout: fixed; width: 100%; }
.mz-drawerhost .kpi-table td { overflow: hidden; }
.mz-drawerhost .kpi-table .sku-thumb { flex: 0 0 36px; }
/* .mz-prodcell — foto prodotto (.sku-thumb 36px, pattern Best/Worst) + nome SKU
in una cella flex; il nome assorbe e va in ellipsis, la foto resta fissa. */
.mz-prodcell { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.mz-prodcell .td-sku-name { min-width: 0; flex: 1 1 0; overflow: hidden; }
.mz-drawerhost .td-sku-name { min-width: 0; }
.mz-drawerhost .td-sku-name span { display: block; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-drawerhost .td-sku-name .sku-code { display: inline-block; }
/* stacked KPI strips inside the drawer — hairline wrapper around canonical .kv-strip */
.mz-kvbox { border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.mz-kvbox .kv-strip + .kv-strip { border-top: 1px solid var(--hairline); }
/* pagination footer row — info left, .paginator-sm right (drawer products + tray league) */
.mz-paginrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mz-paginrow .mz-paginrow__info { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
/* league index bar — mini proportion bar in the $/facing league table */
.mz-idx { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mz-idx__bar { width: 64px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, var(--paper)); overflow: hidden; }
.mz-idx__bar i { display: block; height: 100%; border-radius: 3px; background: var(--pink); }
.mz-idx__bar i.neg { background: var(--cherry); }
/* tray league — la riga del tray selezionato porta il pink edge B10, lo STESSO
marker di selezione del board (.mz-tray.is-selected): selezione condivisa
board ↔ league, sempre visibile anche senza click sulla CTA del drawer. */
.mz-league tbody tr.is-selected td { background: color-mix(in srgb, var(--pink) 5%, var(--paper)); }
.mz-league tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--pink); }
/* lifecycle tag chips — famiglia .mz-tag (colonna Tag della products table del
drawer; derivata dallo Status 2026 assortment + conversion kit in fase di
build silver, NON a mano). Sostituisce .mz-new. Tooltip su ogni chip (title=). */
.mz-tag { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); white-space: nowrap; cursor: help; }
.mz-tag--new { color: var(--pink-deep); background: var(--pink-tint); } /* NEW 26 (kit) / NEW 25 (2nd wave) */
.mz-tag--h { color: var(--info-deep); background: color-mix(in srgb, var(--info) 14%, var(--paper)); } /* H-CODE — nuova formula, codice H attivo */
.mz-tag--hpend { color: var(--warning-deep); background: var(--cream); border: 1px solid var(--open-edge); } /* H-PEND — codice H non ancora attivo */
.mz-tag--del { color: var(--cherry-deep); background: color-mix(in srgb, var(--cherry) 10%, var(--paper)); } /* DEL — phase-out */
@media (prefers-reduced-motion: reduce) {
.mz-tray, .mz-graphic--hotspot, .mz-drawerhost .d-body { transition: none; }
.mz-tray:hover, .mz-tray:active { transform: none; }
}
/* --- .pm-lens — priority-queue lens chip (Stock · Control tower). Tags each row
of the cross-cutting worklist (`.atlas-grid`) with the pressure it belongs to
and doubles as a jump to that tab (`data-goto`). One tone per lens — the lens's
own deep ink on a faint wash of its family: `--ful` Fulfilment / can't ship
(info) · `--age` Ageing / won't sell (warning) · `--inc` Incoming / just landed
(success). The row's Issue stays a SEPARATE trailing `.status-pill`, never
merged into the lens. Mono-heavy uppercase pill. Canonized from
brand-mockups/stock-redesign-B.html (Control Tower B v3 · Andrea 2026-06-22). --- */
.pm-lens { font-family: var(--font-mono-heavy); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; cursor: pointer; }
.pm-lens--ful { color: var(--info-deep); background: color-mix(in srgb, var(--info) 14%, white); } /* Fulfilment — can't ship */
.pm-lens--age { color: var(--warning-deep); background: color-mix(in srgb, var(--warning) 16%, white); } /* Ageing — won't sell */
.pm-lens--inc { color: var(--success-deep); background: color-mix(in srgb, var(--success) 16%, white); } /* Incoming — just landed */
/* ============================================================
LAUNCH LANE (Brand · Innovations V11 · this-month conversion)
Pattern composto: corsia per-brand con barra Pipeline + Replenishment
(.prog-bar canon, repl = teal .prog-bar__seg--repl, open = amber, marker =
pace ink) + chip motion (pipeline pink / replenishment teal) + chip brand-
identità tinted (accent brand) + stato "data incoming" per-brand. Click =
filtra la sezione sul brand (mirror del chip top-bar). Canonizzato da
brand-mockups/innovations-redesign-proposals.html (Andrea 2026-06-24).
convenzione colori: pipe/actual = pink · repl = teal · open = amber · pace = ink. --- */
.pm-lanes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.pm-lanes--focus { grid-template-columns: 1fr; } /* un brand filtrato = full-width */
@media (max-width: 980px) { .pm-lanes { grid-template-columns: 1fr; } }
.pm-lane { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 14px; background: var(--paper); animation: atlasFade .3s ease; }
.pm-lane--clickable { cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; transition: box-shadow .15s ease; }
.pm-lane--clickable:hover { box-shadow: 0 4px 16px rgba(10, 10, 15, 0.08); }
.pm-lanehd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pm-lane__gap { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--cherry-deep); font-weight: 600; }
.pm-barlbl { font-family: var(--font-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 12px 0 5px; }
.pm-barlbl--repl { color: var(--info-deep); }
.pm-mini { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.pm-mini b { color: var(--cherry-deep); }
.pm-motion { font-family: var(--font-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.pm-motion--pipe { background: var(--pink-tint); color: var(--pink-text); }
.pm-motion--repl { background: color-mix(in srgb, var(--info) 18%, white); color: var(--info-deep); }
.pm-brandchip { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.pm-brandchip--wnw { background: color-mix(in srgb, var(--plum) 14%, white); color: var(--plum); }
.pm-brandchip--pf { background: color-mix(in srgb, var(--pink) 16%, white); color: var(--pink-deep); }
.pm-brandchip--lsmk { background: color-mix(in srgb, var(--c9) 16%, white); color: var(--c9); }
.pm-await { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 30px 14px; border: 1px dashed var(--hairline); border-radius: var(--radius-md); margin-top: 6px; }
.pm-await__title { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.pm-await__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.5; max-width: 240px; }
.kpi-card.is-await .kpi-card__value { color: var(--ink-3); } /* awaiting strip */
.kpi-card.is-filtered .kpi-card__clock { color: var(--pink-deep); } /* filtered-state signal */
@keyframes atlasFade { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pm-lane { animation: none; } }
/* ============================================================
MOBILE COMPANION (spec v1 canon · 2026-06-18)
Pattern canonizzati dal prototipo (collaudo iPhone, sprint S1-S8 +
rework spec v1). Sorgente vivente: brand-mockups/atlas-mobile-spec-v1.html
(mappa IA: atlas-mobile-IA-tree.html) · regole: RULES.md §"Mobile
companion" · spec implementazione: ATLAS-MOBILE-HANDOFF.md · pagina
book: mobile.html. Baseline Wave C archiviata in
brand-mockups/_archive/mobile-superseded/atlas-mobile-wavec.html.
Breakpoint: i token --bp-* sono la FONTE DOCUMENTALE; le @media
usano i valori allineati (CSS non valuta var() dentro @media):
phone < 640px · tablet-portrait < 1024px · tablet-lg < 1366px
e in Python/Dash: from brand_tokens import BP_PHONE, BP_TABLET.
============================================================ */
/* --- .m-tabbar — tab-bar flottante GLASS (5 slot: Today Search Inbox
Scan Account). Il vetro è SOLO chrome: il contenuto resta carta
(Rule 1). Shrink allo scroll giù via .is-compact (pattern IG). --- */
.m-tabbar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 58px; border-radius: 29px; border: 1px solid transparent; display: flex; z-index: 55; overflow: hidden;
background: linear-gradient(var(--glass-bg), var(--glass-bg-deep)) padding-box,
linear-gradient(165deg, var(--glass-edge-hi), rgba(255,255,255,0.25) 40%, var(--glass-edge-lo)) border-box;
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
box-shadow: 0 12px 34px rgba(10,10,15,0.13), 0 2px 6px rgba(10,10,15,0.06), inset 0 1px 0 rgba(255,255,255,0.65);
transition: left .28s ease, right .28s ease, height .28s ease, border-radius .28s ease; }
.m-tabbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(120% 90% at 18% -25%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%); } /* speculare */
.m-tabbar.is-compact { height: 46px; left: 36px; right: 36px; border-radius: 23px; }
.m-tab { flex: 1; min-width: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; }
.m-tab.is-active { color: var(--pink-deep); }
.m-tab svg { width: 24px; height: 24px; transition: transform .16s cubic-bezier(.34,1.56,.64,1); }
.m-tab:active svg { transform: scale(.82); }
.m-tabbar.is-compact .m-tab svg { width: 21px; height: 21px; }
/* --- .record-card — la riga-griglia come card touch (sotto --bp-phone
ogni .data-table/.atlas-grid densa diventa uno stack di queste; mai
scroll orizzontale come unica via). Eredita pill/sku-code/sentiment
dal canon tabella; --open = edge ambra book aperto (OPEN treatment). --- */
.record-card { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--paper); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-height: 60px; overflow: hidden; transition: transform .18s ease, background .15s ease; }
.record-card:active { background: var(--pink-tint); transform: scale(.984); }
.record-card--open::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--open-edge); }
.record-card__top { display: flex; align-items: center; gap: 8px; }
.record-card__name { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card__kv { display: flex; gap: 16px; align-items: flex-end; }
.record-card__kv .k { font-family: var(--font-mono-heavy); font-weight: 700; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 1px; }
.record-card__kv .v { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.record-card__kv .v.is-open { color: var(--warning-deep); }
.record-card__kv .v.is-up { color: var(--success-deep); }
.record-card__kv .v.is-down { color: var(--cherry-deep); }
/* --- .novelty-tag — l'etichetta di stato del novelty engine (Today
brief + Inbox): NEW / WORSE / RESOLVED. Il tono segue lo STATO del
segnale, non il sentiment del dato. --- */
.novelty-tag { display: inline-flex; font-family: var(--font-mono-heavy); font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; }
.novelty-tag--new { color: var(--cherry-deep); background: var(--pink-tint); }
.novelty-tag--worse { color: var(--warning-deep); background: var(--cream); }
.novelty-tag--resolved { color: var(--success-deep); background: var(--success-tint); }
/* --- .m-nav — barra di navigazione iOS large-title. Collassata (height 0) in
cima: nessuno spazio vuoto, il titolo grande vive IN PAGINA. Si RIVELA allo
scroll come bar sticky compatta (.is-open) con hairline (.is-scrolled).
Identità combo: Today = wordmark `atlas` centrato, NIENTE ✦ a destra; ogni
altra vista = titolo centrato + ✦ mark a destra. In drill il back è inline
accanto al titolo grande (.m-iback, scrolla via); allo scroll subentra il
back dello slot della .m-nav. Chrome carta (Rule 1) — MAI glass (il glass è
SOLO la tab-bar, R-mob.2). Toggle .is-open/.is-scrolled = scroll listener
(Dash: assets/m_nav.js). --- */
.m-nav { position: relative; flex: 0 0 auto; z-index: 6; display: flex; align-items: center; height: 0; overflow: hidden; padding: 0 8px; background: var(--paper); border-bottom: 1px solid transparent; transition: height var(--motion-pane) var(--motion-ease-standard), border-color var(--motion-base) ease; }
.m-nav.is-open { height: 46px; }
.m-nav.is-scrolled { border-bottom-color: var(--hairline); }
.m-nav__slot { flex: 0 0 44px; display: flex; align-items: center; }
.m-nav__slot--right { justify-content: flex-end; }
.m-nav__back { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); background: none; border: none; cursor: pointer; }
.m-nav__center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--motion-slow) ease; }
.m-nav.is-scrolled .m-nav__center { opacity: 1; }
.m-nav__title { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nav__lockup { display: inline-flex; align-items: center; gap: 6px; }
.m-nav__word { font-family: var(--font-wordmark); font-weight: 400; font-size: 18px; color: var(--pink-deep); line-height: 1; }
.m-nav__mark svg { width: 22px; height: 22px; display: block; }
/* Back INLINE col titolo grande in pagina (drill): nessuna riga riservata, sta
accanto al titolo e scrolla via con esso. */
.m-iback { width: 40px; height: 40px; margin-left: -8px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); background: none; border: none; cursor: pointer; }
/* --- .m-segmented — il segmented MOBILE: stesso look del canon .segmented
(track --surface, pill attiva carta) ma con THUMB SCORREVOLE animato — la
pill bianca TRASLA sotto il segmento attivo invece di accendersi sul posto
(spring = --motion-spring, overshoot morbido). Scroll-x se i segmenti sforano.
Il thumb è posizionato misurando left/width del bottone attivo e scrivendoli
inline (Dash: assets/m_nav.js · mockup: useLayoutEffect). --sm = taglia
secondaria (range sotto un grafico). --- */
.m-segmented { position: relative; display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.m-segmented::-webkit-scrollbar { display: none; }
.m-segmented__thumb { position: absolute; top: 3px; bottom: 3px; left: 0; z-index: 0; border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 1px 2px rgba(10,10,15,0.08); transition: transform var(--motion-pane) var(--motion-spring), width var(--motion-pane) var(--motion-spring); }
.m-segmented button { position: relative; z-index: 1; min-height: 36px; padding: 7px 13px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; color: var(--ink-2); transition: color var(--motion-slow) ease; }
.m-segmented button.is-on { color: var(--ink); }
.m-segmented--sm button { min-height: 28px; padding: 4px 10px; font-size: 11.5px; }
/* --- swipe-to-action (.m-swipe) — la riga del brief Today che si TRASCINA
lateralmente per un'azione: swipe → = Read (la card resta muted fino a
domani), ← = Inbox (archivia, con Undo via toast), tap = apre il record.
Touch events + touch-action:pan-y + lock d'asse (coerente con la gesture canon
R-mob.7; i pointer event muoiono in pointercancel su iOS). __bg = layer azione
svelato dal drag (tinta soft → piena oltre soglia con .is-armed), __fg = la
card che trasla. Cap 10 card. --- */
.m-swipe { position: relative; overflow: hidden; }
.m-swipe__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.m-swipe__action { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono-heavy); font-weight: 700; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0; transition: opacity var(--motion-fast) ease; }
.m-swipe__action--read { color: var(--success-deep); }
.m-swipe__action--inbox { color: var(--cherry-deep); }
.m-swipe__bg[data-dir="read"] { background: var(--success-tint); }
.m-swipe__bg[data-dir="read"] .m-swipe__action--read { opacity: 1; }
.m-swipe__bg[data-dir="inbox"] { background: var(--cherry-tint); }
.m-swipe__bg[data-dir="inbox"] .m-swipe__action--inbox { opacity: 1; }
.m-swipe__bg.is-armed[data-dir="read"] { background: var(--success); }
.m-swipe__bg.is-armed[data-dir="read"] .m-swipe__action--read { color: var(--paper); }
.m-swipe__bg.is-armed[data-dir="inbox"] { background: var(--cherry); }
.m-swipe__bg.is-armed[data-dir="inbox"] .m-swipe__action--inbox { color: var(--paper); }
.m-swipe__fg { position: relative; background: var(--paper); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
/* --- .m-notif — la card-segnale del brief Today (dentro .m-swipe__fg): punto
di severità + .novelty-tag (canon) + soggetto + sorgente + una frase con la
cifra in tono + chevron. .is-read = stato muted post-swipe (resta fino a
domani: dot nascosto, testo e tag attenuati). --- */
.m-notif { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; background: var(--paper); }
.m-notif__dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; }
.m-notif__dot--down { background: var(--cherry); }
.m-notif__dot--warn { background: var(--warning); }
.m-notif__dot--up { background: var(--success); }
.m-notif__body { flex: 1; min-width: 0; }
.m-notif__l1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.m-notif__subj { flex: 0 1 auto; min-width: 0; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-notif__src { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }
.m-notif__l2 { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.m-notif__l2 b { font-variant-numeric: tabular-nums; }
.m-notif__l2 b.is-down { color: var(--cherry-deep); }
.m-notif__l2 b.is-warn { color: var(--warning-deep); }
.m-notif__l2 b.is-up { color: var(--success-deep); }
.m-notif__chev { align-self: center; flex: 0 0 auto; font-family: var(--font-sans); font-size: 18px; color: var(--ink-3); }
.m-swipe__fg.is-read .m-notif__dot { visibility: hidden; }
.m-swipe__fg.is-read .m-notif__subj { color: var(--ink-3); font-weight: 500; }
.m-swipe__fg.is-read .m-notif__l2,
.m-swipe__fg.is-read .m-notif__l2 b { color: var(--ink-3); }
.m-swipe__fg.is-read .novelty-tag { opacity: 0.5; }
/* --- inline-expand card — una list/competitor card che si ARRICCHISCE
IN-PAGINA (accordion, una aperta per volta) invece di aprire il `.drawer`.
Reveal GPU-cheap: `grid-template-rows: 0fr → 1fr` sul `.gf-card__more` con
`overflow:hidden` sul clip → altezza-auto fluida. Il `.drawer` resta per il
detail dei NOSTRI prodotti (SKU/Client/Order). `.gf-card-actions` ospita
prezzo + `.gf-card__add` (＋/✓ NPD) nel footer scheda, MAI overlay.
Mockup canon: brand-mockups/brand-categories-gap-finder-card-expand.html.
Toggle/keyboard = assets/gap_card_expand.js + keyboard_click.js (RULES.md). --- */
.gf-card-actions { display: inline-flex; align-items: center; gap: 10px; }
.gf-card__add { height: 24px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--pink-light); background: var(--paper); color: var(--pink-deep); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: background var(--motion-base) var(--motion-ease-out), border-color var(--motion-base) var(--motion-ease-out), transform var(--motion-base) var(--motion-ease-out); }
.gf-card__add:hover { background: var(--pink-tint); }
.gf-card__add:active { transform: scale(0.94); }
.gf-card__add:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.gf-card__add.is-in { background: var(--pink); border-color: var(--pink); color: var(--paper); }
/* Reveal: grid-rows 0fr↔1fr dà l'altezza-auto (end-state affidabile ovunque).
La TRANSITION è solo su opacity: animare `grid-template-rows` fra fr non è
affidabile (l'fr interpola contro 0 spazio libero e resta bloccato a 0 in
alcuni build Chromium) → l'altezza fa snap e l'opacity fa fade. Pulito e
robusto cross-browser. */
.gf-card__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity var(--motion-medium) var(--motion-ease-out); }
.gf-card__more > .gf-card__more-clip { overflow: hidden; min-height: 0; }
.gf-card.is-expanded .gf-card__more { grid-template-rows: 1fr; opacity: 1; }
.gf-card__more-inner { padding-top: 11px; margin-top: 9px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 11px; }
.gf-card.is-expanded { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), var(--shadow-card-hover); }
@media (prefers-reduced-motion: reduce) {
.m-tabbar, .m-tab svg, .record-card { transition: none; }
.record-card:active { transform: none; }
.gf-card__more, .gf-card__add { transition: none; }
.m-nav, .m-nav__center, .m-segmented__thumb, .m-segmented button, .m-swipe__action { transition: none; }
}
/* ===== AUTH SURFACES (login · magic-link · check-email) =====
Brand-surface screens (eccezione Rule 1). Desktop = editorial su --paper;
phone (≤ --bp-phone) = glass dai token --glass-*. Primary = .btn-primary pink
(mai cherry, Rule 2). Mobile legibilità: title 25px, sub 15.5px, input 16px
(no iOS focus-zoom), target ≥52px. Wordmark Caprasimo SOLO qui (logotype). */
.auth { min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); position: relative; }
.auth__scroll { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.auth__stack { width: 416px; max-width: 100%; position: relative; }
.auth__stack > * + * { margin-top: 16px; }
/* desktop ≥641px: blocco delineato KEYLINE su bianco (border hairline + ombra
leggera + keyline pink 3px in alto). Niente fondo crema/pink — l'accento è la
keyline, non un fill. Mobile resta glass (vedi @media max-width:640px). */
@media (min-width: 641px) {
.auth__stack { background: var(--paper); border: 1px solid var(--hairline);
border-radius: var(--radius-xl); box-shadow: var(--shadow-card-hover);
padding: 40px; overflow: hidden; }
.auth__stack::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--pink); } /* keyline = accento, rispetta i corner via overflow:hidden */
}
.auth__wm { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-wordmark); color: var(--pink); line-height: 1; font-size: 40px; }
.auth__wm svg { width: 26px; height: 26px; color: var(--cherry); } /* le 2 sparkle = cherry */
.auth__mark { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 22px;
background: color-mix(in srgb, var(--pink) 12%, white); color: var(--pink-text); }
.auth__mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.auth__mark--warn { background: color-mix(in srgb, var(--warning) 16%, white); color: var(--warning-deep); } /* link scaduto/usato */
.auth__eyebrow { font-family: var(--font-mono-heavy); font-size: 10.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3-text); }
.auth__title { font-family: var(--font-sans); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.auth__accent { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--pink-text); }
.auth__sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.auth__sub b { color: var(--ink); font-weight: 600; }
.auth__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3-text); margin: 0; }
.auth__foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3-text); }
.auth__form { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.auth__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.auth__link { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--pink-text); background: none; border: 0; cursor: pointer; padding: 6px; text-decoration: none; }
.auth__link:hover { color: var(--pink-deep); text-decoration: underline; }
.auth__link:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }
.auth__btn-block { width: 100%; } /* su .btn .btn-primary .btn-lg */
/* phone ≤ --bp-phone (640px): glass treatment + legibilità */
@media (max-width: 640px) {
.auth { background:
radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--pink-light) 55%, transparent), transparent 60%),
radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--cherry) 22%, transparent), transparent 55%),
var(--surface); }
.auth__scroll { padding: 26px 22px; }
.auth__stack { width: 100%; border-radius: var(--radius-xl);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-edge-hi);
box-shadow: 0 18px 50px var(--glass-edge-lo), inset 0 1px 0 var(--glass-edge-hi);
padding: 30px 24px; }
.auth__wm { font-size: 38px; } .auth__wm svg { width: 25px; height: 25px; }
.auth__title { font-size: 25px; }
.auth__sub { font-size: 15.5px; }
.auth__mark { background: color-mix(in srgb, white 55%, transparent); border: 1px solid var(--glass-edge-hi); }
.auth .input { font-size: 16px; padding: 14px; background: color-mix(in srgb, white 70%, transparent); }
.auth .btn-lg { padding: 16px 22px; font-size: 16px; }
}
/* ============ SELL-OUT LENS (Fase E2 · 2026-07-05) ============
Censimento W2-5: le lenti sell-out (C1 Client · C2 Top Items · C4 Sales
Overview · D2 Compare · D1b Assortment · D3b Innovations) avevano forkato
page-local per lente lo stesso trio di componenti (banner coverage,
toggle switch-lente, legenda scala colore) — `.pm-ti-cov`/`.pm-inn-cov`/
`.pm-cov`, `.pm-*-sotoggle`/`.pm-*-swlbl`, `.pm-leg`/`.pm-st-legend`.
Promossi a canon (single source, comporre da qui — non ridefinire in app).
- `.covbar` — banner "base ristretta ai clienti coperti" (info-edge
a sinistra). `.covbar .k` = eyebrow mono; `.covbar b`
= numeri in evidenza.
- `.lens-toggle` — riga inline "label + switch" della lente sell-out;
`.lens-toggle__label` = etichetta mono-heavy pink;
`.lens-toggle--static` = variante non-cliccabile.
- `.scale-legend` — legenda scala-colore sotto una matrice/heatmap (la
tint È la metrica). `.scale-legend i` = swatch colore.
Gli helper testo quiet/incoming della legenda (`.pm-quiet`/`.pm-inc`)
restano utility app-side (override legittimo host=app).
============================================================ */
.covbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; border: 1px solid var(--hairline);
border-left: 3px solid var(--info);
background: color-mix(in srgb, var(--info) 5%, white);
border-radius: var(--radius-md); margin-bottom: 12px;
font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2);
}
.covbar b { color: var(--ink); font-weight: 600; }
.covbar .k {
font-family: var(--font-mono-heavy); font-size: 9.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--info-deep);
flex-shrink: 0;
}
.lens-toggle {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
flex: 0 0 auto;
}
.lens-toggle--static { cursor: default; }
.lens-toggle__label {
font-family: var(--font-mono-heavy); font-weight: 700; font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep);
}
.scale-legend {
display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
}
.scale-legend i {
display: inline-block; width: 12px; height: 10px; border-radius: 2px;
vertical-align: -1px;
}
| |