/* Sessions 2026 guidelines, pp. 8-13. Core brand colors are exact; surface tints are UI derivatives.
   Delta chips retain semantic green/red. This file styles only the isolated Sessions preview. */
:root{
 --sessions-orange:#F78D1E;--sessions-light-orange:#FBB35D;--sessions-bone:#F9F6EE;--sessions-green:#26533D;
 --bg:var(--sessions-bone);--bg-2:#F5F2E9;--panel:#F0ECE2;--card:#FFFFFF;--card-solid:#FFFFFF;
 --ink:#26251F;--ink-2:#151811;--body:#5C6056;--muted:#5C6056;--subtle:#686D62;
 --line:rgba(38,53,32,.12);--line-2:#DDDCCD;--glass-border:rgba(38,53,32,.15);
 --blue:#964400;--blue-deep:#713A13;--teal:#38738B;--purple:#883477;
 --soft-blue:rgba(247,141,30,.13);--soft-teal:rgba(91,124,153,.12);--soft-amber:rgba(247,141,30,.16);
 --cta:var(--sessions-orange);--cta-ink:#20180E;--cta-hover:var(--sessions-light-orange);
 --premium-accent:var(--sessions-orange);--premium-sheen:rgba(247,141,30,.10);
 --overlay:rgba(249,246,238,.96);--th:#F6F3EA;--row-hover:rgba(247,141,30,.065);
 --you:linear-gradient(90deg,rgba(247,141,30,.16),rgba(247,141,30,.025));
 --shadow:0 1px 3px rgba(54,49,35,.03),0 8px 22px rgba(54,49,35,.04);
 --shadow-hover:0 12px 30px rgba(96,69,34,.11);
 --dial-track:#D6D5C8;--dial-tick:#999E90;--dial-value:var(--sessions-green);
 --bar-blue:linear-gradient(90deg,#F78D1E,#FBB35D);--tint-blue:rgba(247,141,30,.22);
 --bar-purple:linear-gradient(90deg,#5B7C99,#779EB3);--tint-teal:rgba(91,124,153,.18);
 --bar-amber:linear-gradient(90deg,#F78D1E,#FBB35D);--tint-amber:rgba(247,141,30,.19);
 --tint-green:rgba(0,166,80,.15);--m1:var(--sessions-orange);--m2:var(--sessions-light-orange);
}
:root[data-theme="dark"]{
 --bg:#131614;--bg-2:#1B211D;--panel:#242B24;--card:#202621;--card-solid:#202621;
 --ink:var(--sessions-bone);--ink-2:#FFFFFF;--body:#BDC5B9;--muted:#BDC5B9;--subtle:#A0AC9C;
 --line:rgba(214,223,199,.12);--line-2:#3C473C;--glass-border:rgba(214,223,199,.15);
 --blue:var(--sessions-orange);--blue-deep:var(--sessions-light-orange);--teal:#9CBDD0;--purple:#CDA9D3;
 --soft-blue:rgba(247,141,30,.13);--soft-teal:rgba(119,158,179,.12);--soft-amber:rgba(247,141,30,.15);
 --cta:var(--sessions-orange);--cta-ink:#20180E;--cta-hover:var(--sessions-light-orange);
 --premium-sheen:rgba(247,141,30,.14);--overlay:rgba(19,22,20,.97);
 --th:#282F27;--row-hover:rgba(247,141,30,.07);--dial-track:#4A5548;--dial-tick:#84917F;
 --dial-value:var(--sessions-bone);--tint-blue:rgba(247,141,30,.23);--tint-teal:rgba(119,158,179,.23);
 --shadow:0 2px 4px rgba(0,0,0,.10),0 14px 30px rgba(0,0,0,.10);
 --shadow-hover:0 14px 34px rgba(0,0,0,.20);
}
body{background:radial-gradient(ellipse at 85% 0%,rgba(247,141,30,.045),transparent 40%),var(--bg)}
.top{border-bottom-color:var(--line-2);box-shadow:0 8px 25px -18px rgba(0,0,0,.25)}
.brand-emblem{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#211E18;border:1px solid var(--sessions-orange);box-shadow:0 0 0 4px rgba(247,141,30,.08);flex:none}
.brand-emblem img{width:34px;height:34px}.wordmark b{font-weight:700}.wordmark small{color:var(--blue)}
.eyebrow{color:var(--blue);letter-spacing:.1em}.store-name{font-weight:600}
.dock .range-seg{border-color:var(--line-2);background:var(--bg-2)}
.dock .range-seg button.on{background:var(--sessions-orange);color:#211A11;box-shadow:0 3px 8px rgba(139,76,14,.16);font-weight:650}
#exportBtn{box-shadow:0 3px 13px rgba(247,141,30,.14);font-weight:700}
.id-card{background:linear-gradient(105deg,rgba(247,141,30,.11),transparent 45%),var(--card);border-color:var(--line-2);border-left:3px solid var(--sessions-orange)}
.id-card .state-badge.lg{background:var(--sessions-green);border:1px solid rgba(247,141,30,.5);border-radius:18px;box-shadow:0 5px 20px rgba(38,83,61,.14)}
.id-card .id-title{font-size:22px}.brand-chip.sessions{background:var(--soft-blue);color:var(--blue)}
.kpi{background:radial-gradient(ellipse at 100% 0%,rgba(247,141,30,.15),transparent 58%),var(--card);border-color:var(--line-2);border-top:2px solid var(--sessions-orange);min-height:232px;padding-top:16px}
.kpi .ico{width:33px;height:33px;top:13px;right:15px;border-radius:10px;background:var(--sessions-orange)!important;color:#211A11!important;box-shadow:0 3px 12px rgba(247,141,30,.15)}
.kpi .ico .ic{width:19px;height:19px}.kpi .lbl{padding-right:37px;font-size:10px;letter-spacing:.04em;min-height:28px;color:var(--ink)}
.kpi .val{font-weight:600;margin-top:7px}.kpi .delta{font-size:11px;padding:4px 7px}.kpi .delta i{font-size:10px}
.kpi .ref{font-size:11px;line-height:1.6}.kpi .who{font-size:11px;line-height:1.5}.kpi .rank-chip{font-weight:600}
.kpi .meter{height:5px;background:var(--dial-track)}.kpi .meter i{background:linear-gradient(90deg,var(--sessions-orange),var(--sessions-light-orange))}
.kpi .meter-lbl{font-size:10px;color:var(--muted)}
/* Ruixen Progressive Flux-inspired fill; width is still the existing comparison value. */
#kpis .meter{height:6px;border-radius:999px;isolation:isolate;background:var(--dial-track)}
#kpis .meter i{position:relative;width:var(--w,0);border-radius:inherit;transform-origin:left;transition:none;background:linear-gradient(90deg,#F78D1E 0%,#FBB35D 60%,#FFD399 100%);box-shadow:0 0 9px rgba(247,141,30,.22)}
#kpis .meter i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 15%,rgba(255,248,226,.8) 48%,transparent 80%);background-size:220% 100%;opacity:0;pointer-events:none}
#kpis .meter b{z-index:1}
.count{display:inline-block;font-variant-numeric:tabular-nums lining-nums}
#strip .summary-value .count,#strip .summary-value .count span{font:inherit;letter-spacing:inherit}
.count-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes pulse-meter-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse-meter-flux{0%,100%{background-position:200% 0;opacity:0}15%{opacity:.65}65%{background-position:-100% 0;opacity:.65}80%{background-position:-100% 0;opacity:0}}
@media(prefers-reduced-motion:no-preference){
 #kpis .kpi:not(.inview) .meter i{transform:scaleX(0)}
 #kpis .kpi.inview .meter i{animation:pulse-meter-fill 1.65s cubic-bezier(.2,.7,.2,1) both}
 #kpis .kpi.inview .meter i::after{animation:pulse-meter-flux 3.6s 1.1s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){#kpis .meter i{transform:none;animation:none}#kpis .meter i::after{display:none}}
/* The percentage in the dial is the primary visual value. Keep the existing counter for assistive tech. */
.kpi-gauge .count{position:absolute!important;width:1px!important;min-width:0!important;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kpi-gauge .val{min-height:0}.kpi-gauge .gauge.sessions-dial{width:100%;max-width:174px;height:auto;margin:0 auto;overflow:visible;flex:none}
.sessions-dial path{fill:none;stroke-linecap:round}
.sessions-dial .dial-track{stroke:var(--dial-track);stroke-width:2}
.sessions-dial .g-red,.sessions-dial .g-amber,.sessions-dial .g-green{stroke-width:3;stroke-linecap:butt;opacity:.75}
.sessions-dial .g-red{stroke:var(--bad)}.sessions-dial .g-amber{stroke:var(--sessions-orange)}.sessions-dial .g-green{stroke:var(--good)}
.sessions-dial .dial-progress{stroke:var(--sessions-orange);stroke-width:3;filter:drop-shadow(0 0 5px rgba(247,141,30,.35))}
.sessions-dial .dial-tick{stroke:var(--dial-tick);stroke-width:1}.sessions-dial .dial-tick.major{stroke-width:1.5}
.sessions-dial .dial-label{fill:var(--muted);font-size:10px;font-weight:550;font-family:inherit}
.sessions-dial .dial-value{font-family:inherit;fill:var(--dial-value);font-size:34px;font-weight:550;letter-spacing:-1.5px}
.sessions-dial .dial-caption{fill:var(--muted);font-size:8px;font-weight:500;letter-spacing:1px}
.sessions-dial .dial-dot{fill:var(--sessions-light-orange)}.sessions-dial .dial-halo{fill:var(--sessions-orange);opacity:.4;filter:blur(5px)}
.sessions-dial .dial-pointer{fill:var(--sessions-orange)}.sessions-dial .dial-network{stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.9}
:root[data-theme="dark"] .sessions-dial .dial-value{filter:drop-shadow(0 0 12px rgba(247,141,30,.16))}
.strip{padding:18px 0;border-bottom-color:var(--line-2)}.strip .chip .ic{color:var(--blue)}.strip .chip b{font-size:23px}.strip .chip span{font-size:11px}
.sh-ico.section-art{width:56px;height:56px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;flex:none}
.section-art>svg,.section-art>img{width:56px;height:56px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.sh-l{gap:15px}.sec-head h3{font-size:21px;font-weight:600;letter-spacing:-.035em}.card.wide h3{font-size:18px}
.card.wide{border-color:var(--line-2);padding:20px 22px}.card.wide:not(.collapsed)>.sec-head.inner{margin:-20px -22px 22px;padding:18px 22px}
.card.wide.collapsed{background:linear-gradient(95deg,rgba(247,141,30,.075),transparent 45%),var(--card)}
.sh-toggle{color:var(--blue);border-color:var(--line-2)}.sh-toggle:hover{border-color:var(--sessions-orange)}
.meta-pill{color:var(--muted);font-size:11px}.meta-pill .ic{color:var(--blue)}
.card-head{min-height:42px}.card-head h4{font-size:14px;font-weight:550}.card-head h4 .ic{width:27px;height:27px;padding:6px;background:var(--soft-blue);border-radius:8px;flex:none;color:var(--blue)}
.rank-row .tcard{background:linear-gradient(135deg,rgba(247,141,30,.04),transparent 45%),var(--card)}
.rank-row .rk.r1{background:var(--sessions-orange);color:#211A11;box-shadow:0 0 0 3px var(--soft-blue)}
tr.you td.rank .rk{background:var(--sessions-orange);color:#211A11}tr.you td:first-child{border-left-color:var(--sessions-orange)}
.cols h4 .ic{color:var(--blue)}.tblock{background:var(--bg-2);border-color:var(--line-2)}
thead th{color:var(--muted)}.tblock td{line-height:1.55}.tbl-wrap{border-color:var(--line)}
:root:not([data-theme="dark"]) .card{box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .kpi{background:radial-gradient(ellipse at 100% 0%,rgba(247,141,30,.12),transparent 60%),#FFFFFF}
:root:not([data-theme="dark"]) .id-card{background:linear-gradient(105deg,rgba(247,141,30,.12),transparent 55%),#FFFFFF}
:root:not([data-theme="dark"]) .cb .pbar i{opacity:.85}
:root:not([data-theme="dark"]) .sessions-dial .dial-progress{filter:none;stroke-width:3.5}
:root:not([data-theme="dark"]) .sessions-dial .dial-halo{opacity:.17}
.loader-bar{background:linear-gradient(90deg,#F78D1E,#FBB35D,#F78D1E);background-size:200% 100%;box-shadow:0 0 12px rgba(247,141,30,.2)}
.pulse-line{stroke:var(--sessions-orange);filter:drop-shadow(0 2px 6px rgba(247,141,30,.2))}
#gate>svg rect{fill:var(--sessions-orange)}#gate>svg path{stroke:#211A11}
@keyframes sessions-dial-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.inview .sessions-dial{animation:sessions-dial-in .7s .1s ease both}}
@media(min-width:761px) and (max-width:1150px){.kpi{min-height:238px}.kpi-gauge .gauge.sessions-dial{max-width:166px}}
@media(max-width:760px){
 .brand-emblem{width:34px;height:34px}.brand-emblem img{width:27px;height:27px}.logo{gap:8px;padding-right:12px}.brand{gap:12px}.eyebrow{font-size:8px;letter-spacing:.04em}
 .kpi,.kpi:nth-child(n+4){min-height:236px;padding:14px 13px}.kpi .ico{width:27px;height:27px;right:11px;top:14px}.kpi .ico .ic{width:16px;height:16px}.kpi .lbl{font-size:9px;min-height:35px;padding-right:28px}.kpi .val{font-size:32px}.kpi .delta{font-size:10px}.kpi .delta i{font-size:9px}.kpi .who,.kpi .ref{font-size:10px}.kpi-gauge .gauge.sessions-dial{max-width:168px;min-width:0}.kpi:last-child{min-height:224px}.kpi:last-child .gauge.sessions-dial{max-width:172px}
 .sh-ico.section-art,.section-art>svg,.section-art>img{width:44px;height:44px}.sh-l{gap:11px}.sec-head h3{font-size:19px}.card.wide h3{font-size:16px;line-height:1.45}.card.wide{padding:18px 14px}.card.wide:not(.collapsed)>.sec-head.inner{margin:-18px -14px 18px;padding:18px 14px}.meta-pill{font-size:10px}
}
/* Both dials share a visual baseline, even when the store comparison wraps. */
.kpi-gauge{display:grid;grid-template-rows:auto 1fr auto auto;gap:6px}

/* Darryl, 2026-09-10: "Line-up these items too. Maybe on the bottom of the card?"
   The delta chip and the rank sat under the big number on a flat card and directly under the label on a dial
   card, so they were never at the same height. The middles of these cards genuinely differ - a number, a dial,
   a row of stars - so no offset from the top can line them up. The bottom edge is the one line every card
   shares. .kpi-foot is the last child of every card and .kpi-tail takes the slack above it, so the chips sit
   on the same baseline whatever is above them. The reserved height keeps a card with no chip from riding up. */
.kpi{justify-content:flex-start}
/* Every card the same height, so the bottom-flush foot lines up across BOTH grid rows. Without this the
   3-up row and the 2-up row size independently and the chips in row 2 sit 23px lower than row 1. */
#kpis{grid-auto-rows:1fr}
.kpi-tail{margin-top:auto}
.kpi-foot{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-height:22px;margin-top:6px}
.kpi-foot .stars-line{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.kpi-foot .stars-line .stars{font-size:12px}
/* Darryl, 2026-09-10: "We should also centre the numbers in those top cards, the speedo is centred already."
   Only the big value moves - the label, the footnote and the foot stay left, which is exactly how a dial card
   already reads, so the row lines up instead of each card centring a different amount of itself. */
.kpi:not(.kpi-gauge) .val{justify-content:center;text-align:center}
/* the star sitting inside "5* reviews since ..." has to be text-sized, not icon-sized */
.ref .ic-inline{width:1.05em;height:1.05em;vertical-align:-.16em;margin:0 1px;color:var(--sessions-orange)}
/* the icon set draws outlines; this one sits beside the filled rating stars on the same card, so fill it */
.ref .ic-inline svg{fill:currentColor;stroke-width:1}
/* On a phone the card is half the width and the chip plus the rank wrap on some cards and not others, which
   puts the chips back out of line by 22px. Stack them there instead, from a fixed top, so every foot is the
   same height whether or not it carries a rank. */
@media(max-width:760px){.kpi-foot{flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:4px;min-height:42px}}
.kpi-foot:empty{display:none}
.kpi-foot .who{margin-top:0;white-space:normal}
.kpi-foot .delta{margin:0}
.kpi-gauge .gauge.sessions-dial{align-self:start}   /* pinned: centred, it drifted down whenever the card grew, so the flat numbers could never catch it */
@keyframes sessions-arc{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sessions-dial .dial-progress{stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){.inview .dial-progress{animation:sessions-arc 1s cubic-bezier(.2,.75,.2,1) both}}
@media(max-width:760px){.kpi-gauge{grid-template-rows:auto 1fr minmax(28px,auto);gap:7px}.sessions-dial .dial-label{font-size:11px}.sessions-dial .dial-value{font-size:34px}.sessions-dial .dial-caption{font-size:9px}}

/* Categories are metadata, not actions: quiet labels with legible, consistent glyphs. */
.cat{
 gap:7px;padding:4px 8px;border:1px solid rgba(38,83,61,.13);border-radius:5px;
 background:rgba(38,83,61,.035);color:#485047;font-size:11px;font-weight:500;
 line-height:16px;letter-spacing:0;vertical-align:middle;box-shadow:none;
}
.cat .ic{
 width:14px;height:14px;padding:0;border-radius:0;flex:0 0 14px;
 background:none;color:#964400;
}
:root[data-theme="dark"] .cat{background:rgba(249,246,238,.025);border-color:rgba(249,246,238,.10);color:#D5DCD1}
:root[data-theme="dark"] .cat .ic{color:#FBB35D}

/* Restrained material treatment: matched optical size, quiet framing, no badge glow. */
.sh-ico.section-art{
 display:grid;place-items:center;width:64px;height:64px;border-radius:17px;
 border:1px solid rgba(38,53,32,.08);background:linear-gradient(145deg,#FFFFFF,#F0EDE5);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(40,45,32,.035);
}
.section-art>img{width:49px;height:49px;object-fit:contain;filter:saturate(.82) drop-shadow(0 2px 2px rgba(0,0,0,.12));transition:transform .22s ease}
#cannHead .section-art>img{filter:saturate(.8) brightness(1.12) drop-shadow(0 2px 2px rgba(0,0,0,.10))}
:root[data-theme="dark"] .sh-ico.section-art{border-color:rgba(249,246,238,.07);background:linear-gradient(145deg,#323A32,#252D26);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 8px rgba(0,0,0,.08)}
:root[data-theme="dark"] #cannHead .section-art>img{filter:saturate(.8) brightness(1.4) drop-shadow(0 2px 2px rgba(0,0,0,.14))}
.card.wide.collapsed{background:var(--card);border-color:var(--line);padding:17px 22px;box-shadow:0 2px 4px rgba(0,0,0,.025)}
.card.wide.collapsed:hover{background:var(--card);border-color:rgba(247,141,30,.32)}
.card.wide .sh-l{gap:17px}.card.wide h3{font-size:17px;line-height:1.4;font-weight:550;letter-spacing:-.025em}
.card.wide .sh-r .meta-pill{border:0;background:none;padding:4px 6px;color:var(--muted)}
.card.wide .sh-toggle{border-color:var(--line);color:var(--muted);background:transparent}
.card.wide .sh-toggle:hover{color:var(--blue);background:var(--soft-blue)}
.id-card .state-badge.lg{display:grid;place-items:center;background:none;border:0;border-radius:0;box-shadow:none;width:56px;height:56px;flex:none}
.id-card .state-badge.lg img{width:51px;height:51px;object-fit:contain;filter:saturate(.82) drop-shadow(0 2px 2px rgba(0,0,0,.1))}
.brand-emblem{background:linear-gradient(145deg,#334C3D,#1D3125);border:1px solid rgba(251,179,93,.7);box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.12)}
.brand-emblem img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.card.wide.collapsed:hover .section-art>img{transform:translateY(-2px)}}
@media(max-width:760px){
 .sh-ico.section-art{width:54px;height:54px;border-radius:14px}.section-art>img{width:42px;height:42px}
 .card.wide.collapsed{padding:17px 16px}.card.wide .sh-l{gap:13px}.card.wide h3{font-size:15px;line-height:1.45}
 .card.wide .sh-r .meta-pill{padding:3px 0}.card.wide .sh-r{column-gap:12px}
 .id-card .state-badge.lg,.id-card .state-badge.lg img{width:48px;height:48px}
}

/* Grid view read as washed out (Ravi, 2026-09-08: "everything seems dehighlighted"). Two real causes,
   not a taste call.
   1. dataBar() has always passed a --edge colour for "a solid leading edge" and NO rule anywhere ever
      drew it. Every bar was a flat low-alpha wash with nothing marking where the value lands - mud in
      dark, close to invisible in light.
   2. The tints sit at 15-23% alpha and the fill was damped again by an opacity on top, so the green
      profit bars in particular disappeared into the card.
   The fill now carries its own alpha and gets the edge it was always being handed. */
:root{--tint-blue:rgba(247,141,30,.34);--tint-amber:rgba(247,141,30,.30);--tint-green:rgba(0,166,80,.26);--tint-teal:rgba(91,124,153,.30);--tint-red:rgba(194,62,92,.24)}
:root[data-theme="dark"]{--tint-blue:rgba(247,141,30,.30);--tint-amber:rgba(247,141,30,.28);--tint-green:rgba(64,190,151,.26);--tint-teal:rgba(119,158,179,.28);--tint-red:rgba(240,131,156,.24)}
.cb .pbar i,:root:not([data-theme="dark"]) .cb .pbar i{opacity:1;background:var(--bar);box-shadow:inset -2px 0 0 var(--edge)}

/* the column heads, the table type and the lower rank chips had all drifted a shade too light to scan */
thead th{color:var(--body)}
.tblock td{font-size:12px}
td.rank .rk{background:var(--line-2);color:var(--ink)}

/* Product-category miniatures: readable labels with decorative, cached 3D artwork. */
.cat{gap:8px;padding:2px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:11.5px;font-weight:500;line-height:1.35;white-space:normal;text-align:left}
:root[data-theme="dark"] .cat{background:transparent;border:0;color:var(--ink)}
.cat-art{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border-radius:8px;background:rgba(38,83,61,.035);border:1px solid rgba(38,83,61,.06)}
.cat-art img{width:28px;height:28px;display:block;object-fit:contain;filter:saturate(.88);pointer-events:none}
:root[data-theme="dark"] .cat-art{background:rgba(249,246,238,.045);border-color:rgba(249,246,238,.065)}
:root[data-theme="dark"] .cat-art img{filter:saturate(.88) brightness(1.08)}
.cat-label{min-width:0;overflow-wrap:anywhere}  /* no category art since 2026-10-09 (Darryl), so no indent to line up with it */
@media(max-width:760px){.cat{font-size:11px;gap:7px}.cat-art{width:28px;height:28px;flex-basis:28px}.cat-art img{width:24px;height:24px}}

/* Numeric tables: quiet type, aligned digits, and clearance from the bar edge. */
.rank-row th,.tblock th,.fs th{
 font-size:11px;font-weight:550;line-height:1.4;letter-spacing:.005em;
 text-transform:none;color:var(--muted);vertical-align:middle;
}
.rank-row td.num,.tblock td.num,.fs td.num{
 font-size:12.5px;font-weight:500;line-height:1.5;letter-spacing:0;
 font-variant-numeric:lining-nums tabular-nums;
}
.cb{padding:0 6px;min-height:24px;display:grid;grid-template-columns:minmax(16px,1fr) minmax(48px,max-content);gap:10px;align-items:center}
.cb .pbar{position:relative;left:auto;top:auto;transform:none;width:100%;height:18px;grid-column:1;grid-row:1}
.cb b{grid-column:2;grid-row:1;white-space:nowrap;text-align:right}
.cb b{
 font-size:12.5px;font-weight:500;line-height:1.5;letter-spacing:0;
 font-variant-numeric:lining-nums tabular-nums;text-shadow:none;
 font-feature-settings:"tnum" 1,"lnum" 1;
}
@media(max-width:760px){.rank-row td.num,.tblock td.num,.fs td.num,.cb b{font-size:12px}.cb{gap:8px}}

.rank-row th.num{width:132px!important}
@media(max-width:760px){.rank-row th.num{width:124px!important}}

/* Small, consistent financial cues; the formatted value remains selectable text. */
.money-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;vertical-align:middle}
.currency-mark{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px}
.currency-mark img{display:block;width:18px;height:18px;object-fit:contain}
.currency-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.margin-value{display:inline-grid;justify-items:end;gap:5px;min-width:54px;vertical-align:middle;line-height:1.25}
.margin-track{width:54px;height:3px;display:block;overflow:hidden;border-radius:3px;background:rgba(38,83,61,.12)}
.margin-track i{display:block;height:100%;border-radius:3px;background:var(--sessions-orange)}
:root[data-theme="dark"] .margin-track{background:rgba(249,246,238,.14)}
.kpi .ico.kpi-art{width:44px;height:44px;top:13px;right:12px;border:0;border-radius:0;background:transparent!important;box-shadow:none}
.kpi-art img{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(38,53,32,.12));transition:transform .22s ease}
.kpi .lbl{padding-right:46px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.kpi:hover .kpi-art img{transform:translateY(-2px) rotate(-3deg)}}
@media(max-width:760px){.kpi .ico.kpi-art{width:36px;height:36px;top:13px;right:9px}.kpi-art img{width:36px;height:36px}.kpi .lbl{padding-right:37px}}

/* Keep Pulse's original SVG, colors, bezel and sizing; apply only the Y-axis turn. */
@keyframes pulse-logo-turn{from{transform:perspective(400px) rotateY(0deg)}to{transform:perspective(400px) rotateY(360deg)}}
@media(prefers-reduced-motion:no-preference){.brand-emblem{animation:pulse-logo-turn 12.566s linear infinite;transform-origin:center}}
@media(prefers-reduced-motion:reduce){.brand-emblem{animation:none;transform:none}}

/* Secondary summary: a consistent label/value/context hierarchy in compact cards. */
#strip{gap:12px;padding:0;margin:20px 0 30px;border:0;align-items:stretch}
#strip .summary-card{
 display:grid;grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:auto auto auto;
 column-gap:8px;row-gap:4px;padding:15px 16px!important;border:1px solid var(--line);
 border-radius:14px;background:linear-gradient(135deg,rgba(247,141,30,.035),transparent 65%),var(--card);
 box-shadow:0 2px 5px rgba(25,40,30,.025);align-content:start;min-width:0;
}
#strip .summary-art{grid-column:2;grid-row:1/4;align-self:center;display:block;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}
#strip .summary-label{grid-column:1;grid-row:1;display:flex;align-items:center;gap:5px;color:var(--body);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:0}
#strip .summary-value{grid-column:1;grid-row:2;font-size:25px;font-weight:550;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--ink)}
#strip .summary-context{grid-column:1;grid-row:3;font-size:10px;line-height:1.4;color:var(--muted)}
/* Darryl, 2026-09-10: markdown reads green under 5%, orange to 8%, red above. The value carries the colour
   and a hairline runs down the card edge, so it is legible without relying on the number's colour alone. */
#strip .summary-card.tone-good .summary-value{color:var(--good)}
#strip .summary-card.tone-warn .summary-value{color:var(--amber)}
#strip .summary-card.tone-bad  .summary-value{color:var(--bad)}
/* styles.css carries `.strip .chip span{color:var(--muted)}`, and the animated counter the eye actually
   reads is a span inside the chip - so it matched that rule and repainted itself grey no matter how
   specific the tone rule above was. Specificity on the PARENT never beats a rule that matches the CHILD.
   Ravi, 2026-09-15: "Can we change font colour as well?" - it was set, and then overwritten one level in.
   Only toned cards inherit: an unjudged number stays muted, which is what keeps the coloured ones loud. */
#strip .summary-card.tone-good .summary-value .count,
#strip .summary-card.tone-good .summary-value .count span,
#strip .summary-card.tone-warn .summary-value .count,
#strip .summary-card.tone-warn .summary-value .count span,
#strip .summary-card.tone-bad  .summary-value .count,
#strip .summary-card.tone-bad  .summary-value .count span{color:inherit}
#strip .summary-card[class*="tone-"]{position:relative;overflow:hidden}
#strip .summary-card[class*="tone-"]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
#strip .summary-card.tone-good::after{background:var(--good)}
#strip .summary-card.tone-warn::after{background:var(--amber)}
#strip .summary-card.tone-bad::after{background:var(--bad)}
#strip .summary-info{display:inline-flex;grid-column:auto;flex:0 0 13px;cursor:help;font-size:inherit;line-height:1}
#strip .summary-info .ic{width:12px;height:12px;color:var(--muted);grid-row:auto}
#strip .summary-info:focus-visible{outline:2px solid var(--sessions-orange);outline-offset:3px;border-radius:50%}
:root[data-theme="dark"] #strip .summary-card{background:linear-gradient(135deg,rgba(247,141,30,.045),transparent 65%),var(--card);border-color:rgba(249,246,238,.10);box-shadow:inset 0 1px 0 rgba(249,246,238,.025)}
@media(max-width:1100px) and (min-width:761px){#strip{gap:8px}#strip .summary-card{padding:13px 12px!important;grid-template-columns:minmax(0,1fr) 30px}#strip .summary-art{width:30px;height:30px}#strip .summary-value{font-size:23px}}
@media(max-width:760px){
 #strip{gap:10px;margin:16px 0 25px;grid-template-columns:repeat(2,minmax(0,1fr))}
 #strip .summary-card{padding:13px!important;grid-template-columns:minmax(0,1fr) 32px}
 #strip .summary-art{width:32px;height:32px}#strip .summary-value{font-size:24px}
 #strip .summary-card:last-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto 32px;column-gap:12px}
 #strip .summary-card:last-child .summary-label{grid-column:1;grid-row:1}
 #strip .summary-card:last-child .summary-context{grid-column:1;grid-row:2}
 #strip .summary-card:last-child .summary-value{grid-column:2;grid-row:1/3;align-self:center}
 #strip .summary-card:last-child .summary-art{grid-column:3;grid-row:1/3}
}

/* Darryl, 2026-09-10: "could probably balance this better. span the text horizontal and then make it not so
   tall". The rows were a two-column grid with the address spanning both, so the card always needed two text
   rows and "2% online" sat alone in the right column with a hole beside it. One horizontal line instead, and
   the title column sizes to its own content so "Brantford (Lynden)" stops wrapping onto a second line. */
.id-card{grid-template-columns:auto minmax(0,1fr);min-height:0;gap:20px}
.id-card .id-rows{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px}
.id-card .id-row{grid-column:auto!important}
.id-card .id-title{line-height:1.25;white-space:nowrap}
@media(max-width:900px){.id-card .id-title{white-space:normal}}

/* Darryl, 2026-09-10: "do you think we can line-up the numbers on the same space all the way across? speedo
   are low, others are high". The dial's number is baked into the arc at 111/157 of its own viewBox, so it can
   only sit as high as the arc lets it - raising it further runs the dial into the card label. The flat numbers
   come down to meet it instead. --flat-val-drop is that distance, measured per breakpoint because the dial's
   height follows its width (height = width x 157/240, number at 111/157 of that). Change the dial size and
   this has to be re-measured with it. */
:root{--flat-val-drop:57px}
@media(min-width:761px) and (max-width:1150px){:root{--flat-val-drop:53px}}
@media(max-width:760px){:root{--flat-val-drop:54px}}
.kpi:not(.kpi-gauge) .val{margin-top:calc(7px + var(--flat-val-drop))}

/* Darryl, 2026-09-10: cards show ten rows, the rest is one click away. The button is the whole width of the
   table foot so it reads as "there is more below this", not as a stray icon in the corner. */
.tb-more-row{display:flex;justify-content:center;padding:8px 0 2px}
.tb-more{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;letter-spacing:.02em;
  padding:7px 14px;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--muted);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.tb-more:hover,.tb-more:focus-visible{color:var(--sessions-orange);border-color:var(--sessions-orange);background:var(--card-solid)}
.tb-more .ic{width:12px;height:12px}
.fs-box .tb-more-row{display:none}

/* The full-screen panel was taller than the space it sits in: .fs-box capped itself at calc(100vh - 48px)
   while .fs gives it 65px of padding on top and 30px underneath (95px). With 50 rows the panel always hits
   that cap, so it overflowed its own container by 47px and rode ~23px higher than intended, far enough for
   the fixed Close button to land on its top-right corner. 100% is the grid area it was always meant to fill. */
.fs-box{max-height:100%}


/* ---- section tabs (Darryl, 2026-09-14: Overview plus four tabs, one section on screen at a time) ---- */
.tabbar{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin:0 0 16px;
        border-bottom:1px solid var(--line, rgba(255,255,255,.08));position:sticky;top:var(--top-h,0);
        background:var(--bg, #111);z-index:8;padding-top:6px}
.tabbar button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
               font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
               color:var(--muted, #8b8b8b);padding:10px 14px;border-radius:8px 8px 0 0;margin-bottom:-1px;
               display:inline-flex;align-items:center;gap:8px;transition:color .15s,background .15s}
.tabbar button:hover{color:var(--ink, #eee)}
.tabbar button[aria-selected="true"]{color:var(--ink, #eee);border-bottom-color:var(--accent, #F78D1E);
                                     background:var(--card, rgba(255,255,255,.03))}
.tabbar button .ic{width:16px;height:16px;flex:none}
.tabbar button .tb-n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted, #8b8b8b);
                     background:var(--card, rgba(255,255,255,.06));border-radius:999px;padding:2px 7px;line-height:1.4}
.tabbar button[aria-selected="true"] .tb-n{color:var(--accent, #F78D1E)}
@media (max-width:760px){
  .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar button{white-space:nowrap;padding:10px 12px;font-size:13.5px}
}
/* in tab mode a section is either the whole view or not rendered at all - no half-open cards */
#dash .card.wide[hidden]{display:none}
#dash .card.wide.tabbed{margin-top:0}
#dash .card.wide.tabbed > .sec-head .sh-toggle{display:none}

/* ---------------------------------------------------------------- Oldest Stock group headings
   Darryl, 2026-09-17: accessories on top, cannabis below, each group A-Z. The heading spans the whole
   grid row so the two groups read as two blocks, not as an interleaved list of category cards. */
#ageTables .age-group{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:6px 0 -6px;padding-bottom:9px;border-bottom:1px solid var(--line-2);
  font:600 12px/1 var(--font,inherit);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
#ageTables .age-group:not(:first-child){margin-top:24px}
#ageTables .age-group .ic{width:17px;height:17px;color:var(--sessions-orange)}
#ageTables .age-group span{margin-left:auto;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:11px;color:var(--subtle)}
#ageTables.focus .age-group{display:none}   /* focus view shows one table at a time; a group heading has nothing to head */

/* ---------------------------------------------------------------- Month-to-date target bar
   Darryl, 2026-09-17: "a progress bar spanning the width above the 5 cards and below where it shows store
   name & address, which tracks progress towards this month's revenue target." Revenue from Cova, target
   from his Monthly Sales Plan workbook. The notch on the track is where an even pace would be today. */
.month-bar{padding:15px 20px 16px;display:grid;gap:10px;border-left:3px solid var(--sessions-orange)}
.month-bar .mb-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.month-bar .mb-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--body)}
.month-bar .mb-title .ic{width:16px;height:16px;color:var(--sessions-orange);flex:none}
.month-bar .mb-title b{color:var(--ink);font-size:14px;font-weight:650;white-space:nowrap}
.month-bar .mb-title span{color:var(--subtle);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.month-bar .mb-value{font-size:19px;font-weight:650;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.month-bar .mb-value span{font-weight:500;font-size:14px;color:var(--subtle)}
.month-bar .mb-value b{margin-left:10px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:650;background:var(--soft-amber);color:var(--blue)}
.month-bar .mb-track{position:relative;height:10px;border-radius:999px;background:var(--dial-track);overflow:visible}
.month-bar .mb-track i{display:block;height:100%;width:var(--w,0);border-radius:inherit;background:linear-gradient(90deg,var(--sessions-orange),var(--sessions-light-orange));
  box-shadow:0 0 10px rgba(247,141,30,.25);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.month-bar .mb-track.mb-ahead i{background:linear-gradient(90deg,var(--sessions-green),#3E7A5B);box-shadow:0 0 10px rgba(38,83,61,.25)}
.month-bar .mb-track b{position:absolute;top:-4px;left:var(--mark,50%);width:2px;height:18px;border-radius:1px;background:var(--ink);opacity:.38}
.month-bar .mb-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--subtle)}
.month-bar .mb-foot span:first-child{color:var(--body);font-weight:550}
.month-bar .mb-track.mb-behind ~ .mb-foot span:first-child{color:var(--blue)}
@media(max-width:760px){
  .month-bar{padding:14px 15px 15px}
  .month-bar .mb-value{font-size:17px}
  .month-bar .mb-foot{font-size:10px}
  .month-bar .mb-foot span:last-child{display:none}   /* the provenance line is desktop detail, not phone detail */
}
@media(prefers-reduced-motion:reduce){.month-bar .mb-track i{transition:none}}

/* ---------------------------------------------------------------- Aged cannabis (Darryl, 2026-09-17)
   Flower / Pre-Rolls / Infused Pre-Rolls: 30% off at nine months, 50% at twelve. Every other cannabis
   category: 25% at eighteen. The pill sits beside the product it applies to; "in Nd" warns a row that is
   inside its last sixty days of being fresh. Accessories never carry one - they have no package date. */
.aged-pill{display:inline-block;margin:4px 0 0;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;
  letter-spacing:.02em;line-height:1.5;white-space:nowrap;vertical-align:middle}
.aged-pill.aged-25{background:var(--soft-amber);color:var(--amber)}
.aged-pill.aged-30{background:var(--soft-red);color:var(--bad)}
.aged-pill.aged-50{background:var(--bad);color:#FFF}
.aged-pill.aged-soon{background:var(--panel);color:var(--subtle);font-weight:600;border:1px dashed var(--line-2)}
:root[data-theme="dark"] .aged-pill.aged-50{color:#1A1410}

/* the Aged Inventory card opens the Oldest Stock tab, so it is a real button and has to look like the
   cards either side of it rather than like a form control */
#strip .summary-link{font:inherit;color:inherit;text-align:left;cursor:pointer;appearance:none;
  transition:border-color .18s,box-shadow .18s,transform .18s}
#strip .summary-link:hover{border-color:var(--sessions-orange);box-shadow:0 6px 18px rgba(247,141,30,.13);transform:translateY(-1px)}
#strip .summary-link:focus-visible{outline:2px solid var(--sessions-orange);outline-offset:2px}
#strip .summary-link .summary-context{display:flex;align-items:center;gap:3px}
#strip .summary-go{width:12px;height:12px;opacity:.75;flex:none}
#strip .summary-link:hover .summary-go{opacity:1;color:var(--sessions-orange)}
@media(prefers-reduced-motion:reduce){#strip .summary-link:hover{transform:none}}
/* the Markdown column: pill left of Days Old, a quiet dash when a row has earned nothing */
#ageTables .aged-pill{margin:0}
#ageTables .aged-none{color:var(--subtle);opacity:.55}

/* Shrinkage card (Darryl, 2026-09-30): six summary cards. One row from 1280px, two rows of three between phone and
   1280, three rows of two on phones - so the phone rule that stretches the last card across the row stands down.
   The dollars sit in brackets beside the % while the card is wide enough and drop under it when it is not. */
#strip .summary-card:has(.shrink-dollars){container-type:inline-size}
#strip .summary-value .shrink-dollars{font-size:.6em;font-weight:500;letter-spacing:0;color:var(--body);margin-left:5px;grid-column:auto}
@container (max-width:220px){#strip .summary-value .shrink-dollars{display:block;margin-left:0;font-size:.56em;line-height:1.35}}
#strip .summary-context .shrink-flag{color:var(--bad);font-weight:600;font-size:inherit;line-height:inherit;grid-column:auto}
@media(min-width:1280px){#strip.strip-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1279px) and (min-width:761px){#strip.strip-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 #strip.strip-6 .summary-card:last-child{grid-column:auto;grid-template-columns:minmax(0,1fr) 32px;column-gap:8px}
 #strip.strip-6 .summary-card:last-child .summary-label{grid-column:1;grid-row:1}
 #strip.strip-6 .summary-card:last-child .summary-value{grid-column:1;grid-row:2;align-self:auto}
 #strip.strip-6 .summary-card:last-child .summary-context{grid-column:1;grid-row:3}
 #strip.strip-6 .summary-card:last-child .summary-art{grid-column:2;grid-row:1/4}
}