/* ==========================================================================
   mocks.css: the shared product-mock kit for the content pages.
   Loaded after landing.css on every rendered page. landing.css already holds
   the home's mock system (.appwin, .aw-*, .vt, .xl, .iv-*, .phone-frame, .wlp,
   .fan); this file adds the POS-page kit that used to live inline on each POS
   page (.qtab, .ht, .wl2, .rcp, .gtab), the primitives the placeholders need
   (.tgl switch, .dlg dialog shell, .ai-tile) and the .mk helpers, all on the
   site's tokens. Fragments in docs/content/visuals/ use only these classes.
   ========================================================================== */

/* ---------- .viz: the frame every visual fragment renders in ----------
   Restates the hero window's token bridge (landing.css .appwin,.xl) so any
   kit component renders at product scale outside the window, and keeps the
   light product palette even inside a dark chapter. */
.viz{position:relative;width:100%;display:grid;place-items:center;text-align:left;
  --paper:#F5F5F9;--surface:#FFFFFF;--paper-2:#EFEFF4;--paper-3:#E7E7EF;
  --ink:#32304F;--ink-2:#6B6985;--ink-3:#8787AB;
  --hairline:rgb(50 48 79 / .12);--hairline-soft:rgb(50 48 79 / .09);color:var(--ink);
  --gold:#E89608;--blue:#2369F5;--blue-tint:#EAF1FE;--green-ink:#009F79;
  --s:.82;
  --f-body:calc(14px * var(--s));--f-value:calc(26px * var(--s));
  --lh-body:calc(20px * var(--s));--lh-value:calc(24px * var(--s));
  --tr-value:calc(-.26px * var(--s));
  --sp-2:calc(2px * var(--s));--sp-4:calc(4px * var(--s));--sp-8:calc(8px * var(--s));
  --sp-10:calc(10px * var(--s));--sp-12:calc(12px * var(--s));--sp-16:calc(16px * var(--s));
  --sp-20:calc(20px * var(--s));
  --ic:calc(16px * var(--s));--rad-8:calc(8px * var(--s));--rad-12:calc(12px * var(--s));
  --div-h:calc(27px * var(--s));--hd-h:calc(24px * var(--s))}
.viz>*{max-width:100%}
.hero-art .viz{width:min(520px,100%)}
/* home components that assume the window: freed to stand alone */
.viz .aw-scene{position:relative;inset:auto;opacity:1;visibility:visible;padding:0}
.viz .aw-modal{position:relative;inset:auto;pointer-events:auto}
.viz .aw-modal__dim{display:none}
.viz .aw-panel{position:relative;inset:auto;width:min(449px,100%);height:auto;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--hairline)}
.viz .aw-modal__ctl{display:none}
.viz .fan{margin-top:0}
.viz .phone-frame{margin-inline:auto}
/* a full-width window composition, shrunk to the frame (design at home scale, set --zoom);
   the phone step scales it again so a 520px design fits a 343px frame */
.viz--zoom>*{zoom:var(--zoom,.44)}
/* on phones every mock is shown as a scaled-down desktop screen, not reflowed,
   the same choice the home makes for its app window; phone frames stay as they are */
@media (max-width:600px){.viz>*:not(.phone-frame){zoom:.66}}
/* non-zoomed roots fill the frame instead of shrink-wrapping in the grid */
.viz>.appwin,.viz>.viz--pair,.viz>.mk,.viz>.ht,.viz>.vt,.viz>.xl{width:100%}
/* the selected row, table and history */
.vt__r.is-on,.ht__r.is-on{background:var(--paper-2)}
/* the product typography the home scopes to .appwin, restated for the frame:
   numerals in Source Sans semibold, micro-labels in Source Sans, not the serif */
.viz .aw-kpis b,.viz .aw-val b,.viz .aw-stats b,.viz .aw-mkt__g b,.viz .aw-week b,.viz .aw-panel__id h5,.viz .aw-panel__id .aw-h5{font-family:var(--font-text);font-weight:600;letter-spacing:-.01em}
.viz .aw-card__t u,.viz .aw-kpis em,.viz .aw-val em,.viz .aw-stats em,.viz .aw-mkt__g em,.viz .aw-week em,.viz .aw-tbl__h,.viz .aw-tbl__f,.viz .aw-log__h,.viz .dw,.viz .aw-ratio .h{font-family:var(--font-text)}
.viz .aw-week em,.viz .aw-stats em{font-size:.6563rem;letter-spacing:.06em}
/* a history table that ends where a sheet footer begins: one hairline, not two */
.ht .ht__r:has(+ .xl__foot){border-bottom:0}
/* centered cell helper for counts and short numbers */
.ht .mid,.vt .mid{text-align:center}
/* two mocks side by side (the compare hero, phone plus desktop) */
.viz--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start;place-items:stretch}
@media (max-width:600px){.viz--pair{grid-template-columns:1fr}}
/* one mock overlapping another (a dialog over a table, a card over a page) */
.viz--stack{display:grid}
.viz--stack>*{grid-area:1/1}
.viz--stack>.over{align-self:end;justify-self:end;margin:0 -12px -12px 0;z-index:2}

/* ---------- POS kit (promoted from the POS pages' inline styles) ---------- */
.cellmini{width:min(430px,100%)}
.cellmini .vt__h,.cellmini .vt__r{grid-template-columns:minmax(0,1.7fr) .6fr .7fr}

/* Quantity and locations tab (Figma nav tokens) */
.qtab{--qnav50:#F5F4FA;--qnav100:#E8E7F0;width:min(500px,100%);background:var(--qnav50);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.qtab__tabs{display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-4) 0;background:var(--surface);border-bottom:1px solid var(--hairline);font-size:.8125rem;color:var(--ink-3)}
.qtab__tabs span{padding-bottom:var(--space-2)}
.qtab__tabs .on{color:var(--burgundy);font-weight:600;border-bottom:2px solid var(--burgundy)}
.qtab__stats{display:flex;padding:var(--space-4) var(--space-4) var(--space-2)}
.qtab__stats>div{padding:0 var(--space-4);border-left:1px solid var(--hairline)}
.qtab__stats>div:first-child{padding-left:0;border-left:0}
.qtab__stats b{display:block;font-size:1rem;font-variant-numeric:tabular-nums}
.qtab__stats span{font-size:.6875rem;color:var(--ink-3)}
.qtab__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--space-3) var(--space-4);padding:18px;background:var(--surface);border:0;border-radius:16px;box-shadow:0 1px 3px rgb(0 0 0 / .05)}
.qtab__path{display:inline-flex;align-items:center;gap:5px;background:var(--qnav100);border-radius:var(--r-pill);padding:7px 14px;font-size:.8125rem;color:var(--ink)}
.qtab__path i{font-style:normal;color:var(--ink-3)}
.qtab__ctrl{display:flex;align-items:center;gap:var(--space-2)}
.qtab__step{display:inline-flex;align-items:center;justify-content:space-between;min-width:150px;background:var(--qnav100);color:var(--ink);border-radius:var(--r-pill);padding:9px 18px;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.qtab__step i{font-style:normal;font-weight:700;opacity:.85}
.qtab__cl{background:var(--qnav100);border-radius:var(--r-pill);padding:9px 16px;min-width:64px;text-align:center;font-size:.875rem;color:var(--ink);font-variant-numeric:tabular-nums}
.qtab__cl u{text-decoration:none;color:var(--ink-3)}
.qtab__more{color:var(--ink-3)}
.qtab__add{display:flex;align-items:center;gap:8px;padding:4px var(--space-4) var(--space-5);color:var(--burgundy);font-size:.9375rem;font-weight:700}
.qtab__add b{font-size:1.2rem;font-weight:700;line-height:1}
/* the tab body as a plain surface (Pricing, Wine list, Details tabs) */
.qtab__body{padding:var(--space-4);display:grid;gap:var(--space-3)}

/* history table; retemplate the columns with an inline grid-template-columns */
.ht{width:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;font-size:.8125rem}
.ht__h,.ht__r{display:grid;grid-template-columns:66px 78px 20px minmax(0,1fr) 50px 64px;gap:var(--space-2);padding:10px var(--space-3) 10px var(--space-4);align-items:center}
.ht__h{font-size:.6563rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--hairline)}
.ht__r{border-bottom:1px solid var(--hairline)}
.ht__r:last-child{border-bottom:0}
.ht .chip{display:inline-block;padding:2px 7px;border-radius:var(--r-pill);background:rgb(190 44 85 / .12);color:var(--burgundy);font-size:.625rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;justify-self:start}
.ht .chip--add{background:#DCEFE7;color:#1B5E3F}
.ht .chip--rem{background:#F7DDE5;color:#9C1F45}
.ht .chip--buy{background:#DFEAFF;color:#1F3B7A}
.ht__r>span>b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht .num{text-align:right;font-variant-numeric:tabular-nums}
.ht .ph{color:var(--ink-3)}
.ht__bar{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-4);border-bottom:1px solid var(--hairline);background:var(--paper)}
.ht__bar b{font-weight:600}

/* wine list: PDF paper crop, static, an optional card overlaid */
.wl2{position:relative;width:min(560px,100%);margin-inline:auto;margin-bottom:var(--space-4)}
.wl2__stage{position:relative;overflow:hidden;height:352px;padding:32px 48px 0}
.wl2__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:76px;background:linear-gradient(180deg,rgb(23 22 22 / 0) 0%,rgb(23 22 22 / .05) 55%,rgb(23 22 22 / .14) 100%);pointer-events:none}
.wl2__page{position:relative;background:var(--surface);box-shadow:0 16px 40px rgb(23 22 22 / .09);padding:var(--space-6) var(--space-6) var(--space-4)}
.wl2__page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(0 0 0 / .25) 0%,rgb(0 0 0 / .20) 2%,rgb(0 0 0 / .10) 11%,rgb(0 0 0 / .05) 19%,rgb(0 0 0 / .02) 33%,rgb(0 0 0 / 0) 50%)}
.wl2__h{text-align:center;font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 0 var(--space-4)}
.wl2__region{display:grid;grid-template-columns:1fr auto;align-items:end;padding:12px 0 4px;border-bottom:1.5px solid var(--ink);font-size:.6875rem}
.wl2__region>span>b{font-weight:700}
.wl2__region i{font-style:normal;color:var(--ink-3);padding:0 4px}
.wl2__cols{display:grid;grid-template-columns:44px 56px;text-align:right;font-size:.5938rem;font-weight:700}
.wl2__row{display:grid;grid-template-columns:minmax(0,1.05fr) 34px minmax(0,1fr) 44px 56px;gap:var(--space-2);align-items:baseline;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:.6875rem}
.wl2__row b{font-weight:700}
.wl2__row u{text-decoration:none;color:var(--ink-2)}
.wl2__row span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl2__row s{text-decoration:none;font-variant-numeric:tabular-nums;text-align:right}
.wl2__row--sync s:last-child{color:var(--burgundy);font-weight:700}
.wl2__row--gone{opacity:.35;text-decoration:line-through}
.wl2__pos{position:absolute;right:-16px;bottom:-6px;width:min(280px,88%);z-index:2}
.wl2__pos .wl2__cap{font-size:.625rem;color:rgb(255 255 255 / .55);padding:8px 2px 0}
.wl2__qr{position:absolute;right:var(--space-6);top:var(--space-6);width:56px;height:56px;display:grid;gap:2px;justify-items:center;font-size:.5rem;color:var(--ink-3);text-align:center}
.wl2__qr img{width:56px;height:56px;display:block}
@media (max-width:600px){.wl2__pos{position:static;margin:12px 0 0 auto}}

/* recipe card with deduction badges (static) */
.rcp{width:min(430px,100%);margin-inline:auto;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--space-4) var(--space-5)}
.rcp__h{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--hairline)}
.rcp__h b{font-weight:600}
.rcp__chip{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:rgb(190 44 85 / .12);color:var(--burgundy);font-size:.6563rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rcp__sold{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:8px 0;border-bottom:1px solid var(--hairline);font-size:.8125rem;color:var(--ink-2)}
.rcp__sold b{font-weight:600;color:var(--ink)}
.rcp__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-3);align-items:baseline;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:.875rem}
.rcp__row b{font-weight:500}
.rcp__row span{color:var(--ink-3);font-size:.8125rem}
.rcp__row em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:700;font-size:.6875rem;color:var(--burgundy);background:rgb(190 44 85 / .1);border-radius:var(--r-pill);padding:2px 9px}
.rcp__foot{padding-top:var(--space-3);font-size:.6875rem;color:var(--ink-3)}
/* the recipe dialog's signature: uppercase category in red above the wine name */
.rcp__cat{display:block;font-size:.5938rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--burgundy)}

/* at a glance: two directional tables, lanes between (used by the POS-flow visuals) */
.gtab{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:var(--space-4);align-items:stretch;max-width:1080px;margin:var(--space-6) auto 0}
.viz .gtab{margin:0}
.gtab__card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column}
.gtab__rows{margin-bottom:auto}
.gtab__card--pos{background:var(--cellar);color:#fff;border-color:transparent;box-shadow:var(--shadow-raise)}
.gtab__card--pos .gtab__t{border-bottom-color:rgb(255 255 255 / .14)}
.gtab__card--pos .gtab__r{border-bottom-color:rgb(255 255 255 / .1)}
.gtab__card--pos .gtab__r b{color:#fff}
.gtab__card--pos .gtab__r span{color:rgb(255 255 255 / .72)}
.gtab__card--pos .gtab__r i{color:rgb(255 255 255 / .85)}
.gtab__t{display:flex;align-items:center;gap:var(--space-2);font-size:.9375rem;padding-bottom:var(--space-3);border-bottom:1px solid var(--hairline)}
.gtab__t b{font-weight:700}
.gtab__t i{font-style:normal;color:var(--burgundy);font-weight:700;font-size:1.05rem}
.gtab__r{display:grid;grid-template-columns:minmax(0,.95fr) 18px minmax(0,1fr);gap:var(--space-2);align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:.875rem}
.gtab__r:last-child{border-bottom:0;padding-bottom:4px}
.gtab__r b{font-weight:600;color:var(--ink)}
.gtab__r i{font-style:normal;color:var(--burgundy)}
.gtab__r span{color:var(--ink-2)}
.gtab__note{margin:var(--space-3) 0 0;font-size:.875rem;color:var(--ink-2)}
.gtab__mid{display:grid;align-content:center;gap:var(--space-5)}
.gtab__lane{position:relative;display:block;height:3px;background:rgb(190 44 85 / .3)}
.gtab__lane--in{background:var(--hairline-strong)}
.gtab__lane--in::after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:var(--ink)}
.gtab__lane--out::after{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-right-color:var(--burgundy)}
.gtab__dot{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;margin-top:-4px}
.gtab__lane--in .gtab__dot{background:var(--ink);animation:gfin 1.6s linear infinite}
.gtab__lane--out .gtab__dot{background:var(--burgundy);animation:gfout 1.6s linear infinite .8s}
@keyframes gfin{0%{left:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}
@keyframes gfout{0%{left:calc(100% - 6px);opacity:0}15%{opacity:1}85%{opacity:1}100%{left:-4px;opacity:0}}
@media (max-width:960px){
  .gtab{grid-template-columns:1fr;max-width:560px}
  .gtab__mid{grid-auto-flow:column;justify-content:center;gap:var(--space-8);padding:4px 0}
  .gtab__lane{width:2px;height:36px}
  .gtab__lane--in::after{right:auto;top:auto;left:50%;bottom:-8px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
  .gtab__lane--out::after{left:50%;top:-8px;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--burgundy)}
  .gtab__dot{left:50%;margin-left:-4px;margin-top:0;animation:none}
}
.g2__facts{display:flex;justify-content:center;gap:var(--space-3);align-items:center;margin-top:var(--space-6);color:var(--ink-3);font-size:.875rem}
.g2__facts i{font-style:normal}
@media (prefers-reduced-motion: reduce){.gtab__dot{animation:none;display:none}}

/* ---------- primitives the placeholders need ---------- */
/* toggle switch, product style: 32x20, burgundy track when on */
.tgl{position:relative;display:inline-block;width:32px;height:20px;border-radius:var(--r-pill);background:var(--hairline-strong);vertical-align:middle;flex:none}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .25)}
.tgl.on{background:var(--burgundy)}
.tgl.on::after{left:14px}
.tgl--sm{width:26px;height:16px}
.tgl--sm::after{width:12px;height:12px}
.tgl--sm.on::after{left:12px}

/* dialog shell: dark blurred scrim with a centered panel */
.dlg{position:relative;display:grid;place-items:center;width:100%;padding:var(--space-6) var(--space-5);background:rgb(23 22 22 / .42);border-radius:var(--r-lg);overflow:hidden}
.dlg--over{position:absolute;inset:0;border-radius:inherit}
.dlg__panel{position:relative;z-index:1;width:min(420px,100%);background:var(--surface);color:var(--ink);border-radius:10px;box-shadow:var(--shadow-float);padding:var(--space-5);font-size:.8125rem;display:grid;gap:var(--space-3)}
.dlg__panel--wide{width:min(520px,100%)}
.dlg__t{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:.9375rem;font-weight:600}
.dlg__t i{font-style:normal;color:var(--ink-3);font-weight:400}
.dlg__p{color:var(--ink-2);margin:0}
.dlg__foot{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}
.dlg__foot .aw-btn{height:34px;font-size:.8125rem}

/* AI gradient icon tile (cellar chat): 1px ring, 45deg red to lilac to blue */
.ai-tile{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);color:var(--burgundy);flex:none}
.ai-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(45deg,#E23B6D,#8B5AAA,#2369F5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ai-tile .ph{font-size:1.1rem}

/* ---------- .mk helpers: generic product chrome for forms, dialogs, lists ---------- */
.mk{width:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;font-size:.8125rem;color:var(--ink)}
.mk--w{width:min(520px,100%)}
.mk__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px var(--space-4);border-bottom:1px solid var(--hairline);background:var(--surface)}
.mk__bar b{font-weight:600}
.mk__bar .ph{color:var(--ink-3)}
.mk__body{padding:var(--space-4);display:grid;gap:var(--space-3)}
.mk__body--tight{padding:var(--space-3) var(--space-4)}
.mk .caps{font-size:.6563rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.mk__grid{display:grid;gap:var(--space-3)}
.mk__grid--2{grid-template-columns:1fr 1fr}
.mk__grid--3{grid-template-columns:1fr 1fr 1fr}
.mk__field{display:grid;gap:4px;min-width:0}
.mk__field label{font-size:.6875rem;color:var(--ink-3)}
.mk__field .val{background:var(--paper-2);border-radius:8px;padding:8px 10px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk__field .val--sel{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mk__field .val--sel .ph{color:var(--ink-3)}
.mk__field .val--empty{color:var(--ink-3)}
.mk__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:8px 0;border-bottom:1px solid var(--hairline)}
.mk__row:last-child{border-bottom:0}
.mk__row b{font-weight:600}
.mk__row .sub{display:block;font-size:.6875rem;color:var(--ink-3)}
.mk__seg{display:inline-flex;background:var(--paper-2);border-radius:var(--r-pill);padding:3px;gap:2px;font-size:.6875rem;font-weight:600}
.mk__seg span{padding:4px 10px;border-radius:var(--r-pill);color:var(--ink-3)}
.mk__seg .on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.mk__tabs{display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-4) 0;border-bottom:1px solid var(--hairline);font-size:.8125rem;color:var(--ink-3)}
.mk__tabs span{padding-bottom:var(--space-2);white-space:nowrap}
.mk__tabs .on{color:var(--burgundy);font-weight:600;border-bottom:2px solid var(--burgundy)}
.mk__banner{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;font-size:.8125rem;line-height:1.35}
.mk__banner .ph{flex:none;font-size:1rem}
.mk__banner--blue{background:#DFEAFF;color:#1F3B7A}
.mk__banner--orange{background:#FCE7CE;color:#7A4A12}
.mk__banner--green{background:#DCEFE7;color:#1B5E3F}
.mk__banner--red{background:#F7DDE5;color:#9C1F45}
.mk__note{font-size:.6875rem;color:var(--ink-3);line-height:1.4}
.mk__pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:.6563rem;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.mk__pill--up{background:#FBE1E8;color:#9C1F45}
.mk__pill--down{background:#DCEFE7;color:#1B5E3F}
.mk__pill--pro{background:#FBEFD4;color:#8A5A00}
.mk__pill--ink{background:var(--paper-2);color:var(--ink-2)}
.mk__pill--dark{background:var(--ink);color:#fff}
.mk .tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1E9E6A;color:#fff;font-size:.6rem;flex:none}
.mk .tick--off{background:transparent;border:1.5px solid var(--hairline-strong);color:transparent}
.mk__chips{display:flex;flex-wrap:wrap;gap:6px}
.mk__chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper-2);font-size:.6875rem;font-weight:600;color:var(--ink-2)}
.mk__chip--on{background:var(--ink);color:#fff}
.mk__chip--go{background:var(--burgundy);color:#fff}
.mk__tip{position:relative;display:inline-block;background:#2E2C46;color:#fff;font-size:.6563rem;padding:5px 8px;border-radius:6px;white-space:nowrap}
.mk__tip::before{content:"";position:absolute;left:12px;top:-4px;border:4px solid transparent;border-bottom-color:#2E2C46;border-top:0}
.mk__menu{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;box-shadow:var(--shadow-float);padding:6px;display:grid;gap:2px;font-size:.8125rem;min-width:180px}
.mk__menu span{padding:7px 10px;border-radius:6px;display:flex;align-items:center;gap:8px}
.mk__menu .on{background:var(--paper-2);font-weight:600}
.mk__menu .ph{color:var(--ink-3)}
.mk__drop{border:1.5px dashed var(--hairline-strong);border-radius:var(--r-lg);padding:var(--space-6) var(--space-4);text-align:center;display:grid;gap:6px;justify-items:center;color:var(--ink-2);background:var(--paper)}
.mk__drop b{color:var(--ink)}
.mk__list{display:grid}
.mk__li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:10px var(--space-4);border-bottom:1px solid var(--hairline)}
.mk__li:last-child{border-bottom:0}
.mk__li .sw{width:26px;height:34px;border-radius:6px;display:grid;place-items:center;overflow:hidden}
.mk__li .sw img{height:30px;width:auto;mix-blend-mode:multiply}
.mk__li b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk__li .sub{font-size:.6875rem;color:var(--ink-3)}
.mk__li .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk__kpis{display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.mk__kpis div{display:grid;gap:2px}
.mk__kpis b{font-size:1rem;font-variant-numeric:tabular-nums;font-weight:600}
.mk__kpis span{font-size:.6563rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mk__phone{display:grid;gap:8px;padding:12px;background:var(--surface);height:100%}
.mk__muted{color:var(--ink-3)}
.mk__flag{width:14px;height:10px;object-fit:cover;border-radius:2px;vertical-align:-1px;margin-right:4px}