/* ============================================================
   Cartline — app-specific components.
   Loaded after app.css. Uses only the tokens defined there:
   solid fills, hairline borders, no gradients, no blur, no glow.
   0 accent · 1 topbar extras · 2 storefront · 3 cart · 4 checkout
   5 order board · 6 order detail · 7 tables + inventory · 8 summary
   ============================================================ */

/* == 0. accent ==
   Cartline's accent is terracotta, not the kit's yellow. app.css is the shared
   kit copy and is never edited; the token NAMES stay exactly as the kit
   declares them so every rule in it keeps working, and only the VALUES change
   here. The structure is unchanged too: --amber / --amber-fill is a FILL,
   --amber-deep and --amber-darker are the readable shades on white,
   --amber-soft and --amber-line are the tint and hairline for selected states,
   --on-amber is what sits on top of the fill.

   One consequence follows from the hue and cannot be avoided: yellow is a
   light fill and carried ink text, terracotta is a dark one and carries white.
   #FFFFFF on #C24A1C is 4.89:1; the ink it replaces would have been 3.63:1.
   Everywhere a full surface is painted in the brand — the tone sidebar, the
   phone-preview ground — the deeper shade #A74018 is used instead, because
   white reaches 6.20:1 there and the quiet mono labels clear AA at 4.98:1,
   which they cannot manage on #C24A1C.

   Contrast on white: --amber-deep 6.23:1, --amber-darker 9.10:1.
   In the dark palette on --surface: --amber-deep 8.41:1, --amber-darker
   11.16:1. Solid colours throughout — no gradients, no blur, no glow. */
:root{
  --hover:#FEF6F0;
  --amber:#C24A1C;       --amber-deep:#9E4718;   --amber-darker:#7A330E;
  --amber-fill:#C24A1C;  --amber-fill-hi:#A74018;
  --amber-soft:#FCEDE3;  --amber-line:#F0C6A8;   --on-amber:#FFFFFF;
}
[data-theme="dark"]{
  --hover:#2B1E15;
  --amber-soft:#2E1B10;  --amber-line:#4F2D19;
  --amber-deep:#F2A268;  --amber-darker:#F7C5A2;
}
/* the kit selects with ink on the fill, which yellow could carry and
   terracotta cannot — the selection takes --on-amber like every other fill */
::selection{background:var(--amber-fill);color:var(--on-amber)}

/* == 1. topbar extras == */
.faceswitch{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.faceswitch button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.faceswitch button+button{border-left:1px solid var(--line-2)}
.faceswitch button svg{width:15px;height:15px}
.faceswitch button:hover{background:var(--hover);color:var(--ink)}
.faceswitch button.is-on{background:var(--amber-fill);color:var(--on-amber)}
.cartbtn{position:relative}
.cartbtn__count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:var(--night);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center}
.topbar__store{display:flex;flex-direction:column;line-height:1.2;min-width:0}

/* == 2. storefront == */
.shopbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.catrow{display:flex;gap:7px;flex-wrap:wrap}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:16px}
.prod{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;font:inherit;color:inherit}
.prod:hover{border-color:var(--amber-line)}
.prod__body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod__name{font-weight:600;font-size:14px;line-height:1.3}
.prod__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.prod__price{font-family:var(--mono);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}
.prod--off{opacity:.62}

/* A product is pictured either by its photograph or, when it has none, by the
   solid colour tile carrying its initials. Both occupy the same box so the
   grid stays even whichever one a product gets. */
.tile{position:relative;overflow:hidden;height:104px;display:grid;place-items:center;border-bottom:1px solid var(--line);font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.06em}
.tile--lg{height:150px;border:1px solid var(--line);border-radius:var(--r);font-size:30px}
.tile--sm{height:40px;width:40px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;flex:none}
.tone-1{background:var(--amber-soft);color:var(--amber-deep);border-color:var(--amber-line)}
.tone-2{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.tone-3{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.tone-4{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.tone-5{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.tone-6{background:var(--surface-2);color:var(--muted);border-color:var(--line-2)}

/* Every photograph is the product cut out of its shot — a transparent PNG with
   no background of its own — so the app's white surface is the background and
   a tall bottle and a wide plate read as one set. It is contained rather than
   cropped and centred both ways with even padding. It stays a quiet part of
   the card: the name and the price still lead. If the file ever fails to load
   the img is dropped and .tile--photo comes off, so the colour tile shows again.

   drop-shadow follows the PNG's alpha, so it draws under the object itself
   rather than around a box — that is what grounds a cut-out on the surface and
   stops it floating. This is the one blur the design rules allow: it is the
   product's own shadow, not a surface treatment, so it stays low-opacity and
   tightly blurred, and it never goes on the card. */
.tile--photo{background:var(--surface);border-color:var(--line);color:transparent}
.tile__img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;object-fit:contain;object-position:center center;display:block;filter:drop-shadow(0 3px 4px rgba(23,24,26,.17))}
.tile--lg .tile__img{width:126px;height:126px;filter:drop-shadow(0 5px 7px rgba(23,24,26,.16))}
.tile--sm .tile__img{width:32px;height:32px;filter:drop-shadow(0 1px 1.5px rgba(23,24,26,.18))}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.qty button{width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.qty button:hover{background:var(--hover)}
.qty button svg{width:14px;height:14px}
.qty output{min-width:30px;text-align:center;font-family:var(--mono);font-size:13px;font-weight:600;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:28px}

/* == 3. cart drawer == */
.cartline{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.cartline:last-of-type{border-bottom:0}
.cartline__main{flex:1;min-width:0}
.cartline__name{font-weight:600;font-size:13.5px}
.totals{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.totals__row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0;color:var(--muted)}
.totals__row strong{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.totals__row--grand{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-size:15px;color:var(--ink);font-weight:600}
.totals__row--grand strong{font-size:16px}
.drawer__foot{border-top:1px solid var(--line);padding:14px 16px;flex:none;background:var(--surface)}
.codebox{display:flex;gap:8px;margin-top:12px}

/* == 4. checkout == */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.steps__item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}
.steps__item.is-on{border-color:var(--amber-line);background:var(--amber-soft);color:var(--ink)}
.steps__item.is-done{color:var(--ink)}
.steps__n{width:20px;height:20px;border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700;flex:none}
.steps__item.is-on .steps__n{background:var(--amber-fill);border-color:var(--amber-fill);color:var(--on-amber)}
.steps__item.is-done .steps__n{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.payopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.payopt{border:1px solid var(--line-2);border-radius:var(--r);padding:12px;background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:inherit}
.payopt:hover{border-color:var(--amber-line);background:var(--hover)}
.payopt.is-on{border-color:var(--amber);background:var(--amber-soft)}
.payopt__k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em}
.paystate{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface-2)}
.receipt{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px;max-width:520px}
.receipt__no{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.02em}
.bigcheck{width:40px;height:40px;border-radius:var(--r);background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok);display:grid;place-items:center;flex:none}
.bigcheck svg{width:22px;height:22px}

/* == 5. order board == */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.col{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);display:flex;flex-direction:column;min-height:140px}
.col__head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line)}
.col__head h3{font-size:13px;flex:1}
.col__body{padding:10px;display:flex;flex-direction:column;gap:10px}
.ocard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:11px 12px;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;font:inherit;color:inherit}
.ocard__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:4px}
.ocard__no{font-family:var(--mono);font-weight:600;font-size:13px;white-space:nowrap}
.ocard__items{font-size:12.5px;color:var(--muted);line-height:1.45}
.ocard__foot{display:flex;align-items:center;gap:8px;row-gap:8px;justify-content:space-between;flex-wrap:wrap}
.ocard__foot .btnrow{flex-wrap:nowrap;margin-left:auto}
.ocard--stale{border-color:var(--warn-line);background:var(--warn-soft)}
.colempty{border:1px dashed var(--line-2);border-radius:var(--r);padding:18px 12px;text-align:center;color:var(--faint);font-size:12.5px}

/* == 6. order detail == */
.kv{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:6px 12px;font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.kv dd{color:var(--ink)}
.track{display:flex;gap:6px;flex-wrap:wrap}
.track__s{flex:1;min-width:74px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 9px;background:var(--surface);font-size:12px;color:var(--muted)}
.track__s.is-done{background:var(--amber-soft);border-color:var(--amber-line);color:var(--ink);font-weight:600}
.track__s.is-off{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.track__t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint);margin-top:3px}

/* == 7. tables + inventory == */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters .select{width:auto;min-width:150px}
.stockcell{display:flex;align-items:center;gap:8px}
.stockcell .qty{flex:none}
.nowrap{white-space:nowrap}
.rowbtns{display:flex;gap:6px;justify-content:flex-end}
.codecell{font-family:var(--mono);font-weight:600;letter-spacing:.04em}

/* == 8. summary == */
.daypick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:2px;flex:none;border:1px solid var(--line)}
.split{display:flex;height:12px;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--line)}
.split i{display:block;height:100%}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gutter)}

/* a plain marked list for prose panels — same square amber marker the
   assistant uses for its lists, so the two read as one language */
.ticks{margin:6px 0 0;padding-left:0}
.ticks li{position:relative;padding-left:16px;margin-top:5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;background:var(--amber);border-radius:1px}

/* == 8b. brand sidebar ==
   The kit builds its tone sidebar for a light yellow ground: it paints ink on
   the fill, hairlines it with dark rgba, and re-pins the light palette inside
   the subtree in dark mode because yellow stays a light surface. Terracotta is
   the opposite — a dark surface — so the whole subtree flips once, for both
   themes, and the dark-mode special case disappears with it.

   The ground is the deeper brand shade: white on #A74018 is 6.20:1 and the
   quiet mono labels reach 4.98:1, neither of which holds on #C24A1C. Re-
   pinning --ink and friends inside the subtree is what makes the kit's own
   rules land correctly; only the handful that hard-code a colour, or that
   would put white on the white active row, are restated below. */
.side[data-tone="amber"],
[data-theme="dark"] .side[data-tone="amber"]{
  --ink:#FFFFFF;         --ink-2:#FAEFE9;        --muted:#F5E3D9;
  --faint:#F5E3D9;
  --bg:#FFFFFF;          --surface:#FFFFFF;      --surface-2:#FFFFFF;
  --line:rgba(255,255,255,.26); --line-2:rgba(255,255,255,.34);
  --hover:rgba(255,255,255,.14);
  --amber-deep:#9E4718;  --amber-darker:#F7C5A2;
  background:var(--amber-fill-hi);border-right-color:#8C3512;
}
.side[data-tone="amber"] .side__brand,
.side[data-tone="amber"] .side__foot,
.side[data-tone="amber"] .navgroup+.navgroup{border-color:rgba(255,255,255,.26)}
/* the mark inverts on the brand ground: white tile, terracotta glyph, 6.20:1 */
.side[data-tone="amber"] .mark{background:#FFFFFF;color:var(--amber-fill-hi)}
.side[data-tone="amber"] .navlink:hover{background:rgba(255,255,255,.14)}
/* the active row is the page ground brought into the sidebar, so it is the one
   place in here that keeps ink — 17.8:1 on white */
.side[data-tone="amber"] .navlink.is-active{background:#FFFFFF;color:#17181A}
.side[data-tone="amber"] .navlink.is-active svg{color:var(--amber-deep)}
.side[data-tone="amber"] .btn,
.side[data-tone="amber"] .side__brandbtns .btn{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.5);color:#17181A}
.side[data-tone="amber"] .btn:hover,
.side[data-tone="amber"] .side__brandbtns .btn:hover{background:#FFFFFF;border-color:#FFFFFF}
/* the kit's focus ring is --amber, which disappears into the terracotta */
.side[data-tone="amber"] :focus-visible{outline-color:#FFFFFF}

/* == sidebar footer link out ==
   The one dark element in the sidebar, so it reads as a way out of the demo
   whether the sidebar is terracotta or white. White on #17181A is 15.9:1. The
   selectors carry the .side prefix because the brand sidebar restyles .btn
   at two levels of specificity and would otherwise wash this one out. */
.side .sitelink,
.side[data-tone="amber"] .sitelink{background:var(--night);border-color:var(--night);color:#fff;text-decoration:none}
.side .sitelink:hover,
.side[data-tone="amber"] .sitelink:hover{background:var(--night-2);border-color:var(--night-2);color:#fff}
.side .sitelink svg{color:#fff}
/* two controls in one 248px row leave about 110px each; the kit's default
   14px side padding truncates "nasvih.in" to an ellipsis, so tighten it */
.side__foot .side__pair .btn{padding-left:9px;padding-right:9px;gap:6px}
.shell.is-rail .side__foot .side__pair .btn{padding-left:0;padding-right:0}
/* the footnote is --faint; on the terracotta ground the subtree's --ink-2
   (#FAEFE9, 5.5:1) is the readable one. */
.side[data-tone="amber"] .hint{color:var(--ink-2)}

/* == 9. topbar tools: device preview, notifications, dark mode == */
.topbar__tools{display:flex;align-items:center;gap:8px}
/* the device toggle borrows the storefront/operations switch shape so the two
   groups in the topbar read as one control language. Icon only: the labels are
   carried by title and aria-label. */
.devicesw button{padding:7px 11px}
.devicesw button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aboutbtn svg{width:16px;height:16px}

/* notifications: a bell with an unread count and a panel hung under it */
.notifwrap{position:relative;display:inline-flex}
.notifpanel{position:absolute;top:calc(100% + 10px);right:0;z-index:45;width:min(380px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 96px));display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3)}
.notifpanel__head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
.notifpanel__foot{padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2);margin:0;flex:none}
.notiflist{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.notiflist .empty{padding:26px 16px}
.notif{display:flex;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:2px}
.notif.is-unread{border-color:var(--amber-line);background:var(--amber-soft)}
.notif__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 9px;border:0;border-radius:var(--r-sm);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.notif__main:hover{background:var(--hover)}
.notif__top{display:flex;align-items:center;gap:8px}
.notif__when{font-size:10.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.notif__title{font-weight:600;font-size:13.5px;line-height:1.35}
.notif__body{font-size:12.5px;color:var(--muted);line-height:1.45}
.notif__read{flex:none;width:30px;height:30px;padding:0;margin-top:5px}

/* == 10. phone preview ==
   The app inside an iframe at 390 × 844, in a dark bezel on the brand ground.
   The frame is a real viewport, so the app's own breakpoints do the work.
   Like the sidebar this is a full brand surface, so it takes the deeper shade
   and white text: 6.20:1 for the title, 5.48:1 for the note. */
.devicepv{position:fixed;inset:0;z-index:78;display:flex;flex-direction:column;align-items:center;padding:18px 16px 30px;overflow:auto;background:var(--amber-fill-hi);color:#FFFFFF}
.devicepv__bar{width:100%;max-width:900px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.devicepv__id{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.devicepv__name{font-size:18px;font-weight:700;letter-spacing:-.02em}
.devicepv__size{font-size:11px;letter-spacing:.08em;color:#FAEFE9}
.devicepv__note{width:100%;max-width:74ch;font-size:12.5px;line-height:1.5;color:#FAEFE9;margin-bottom:16px}
.devicepv .btn{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.5);color:#17181A}
.devicepv .btn:hover{background:#fff;border-color:#fff}
.devicepv :focus-visible{outline-color:#FFFFFF}
.devicepv__fit{flex:none}
.phone{position:relative;width:416px;padding:13px;border-radius:46px;background:#101114;border:1px solid rgba(23,24,26,.4);box-shadow:var(--shadow-3);transform-origin:top center}
.phone__screen{width:390px;height:844px;border:0;border-radius:34px;background:var(--bg);display:block}
.phone__speaker{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:54px;height:4px;border-radius:2px;background:#33363B}
.phone__bar{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:118px;height:4px;border-radius:2px;background:#33363B}

/* == 11. worked examples in the About modal == */
.exlist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ex{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:10px 12px}
.ex__ask{font-size:12.5px;font-weight:600;color:var(--ink)}
.ex__out{margin-top:3px}

/* == 12. dark mode ==
   The brand surfaces need nothing here. #C24A1C is a dark fill in either
   theme, so the sidebar and the phone surround carry white text in both and
   are set once, in §8b and §10, rather than corrected per theme. Under the
   yellow this section was mostly the opposite correction: yellow stayed a
   light surface in the dark, and every rule painting on it had to pin the
   light ink values back by hand.

   What does not follow the palette swap is the product cut-outs. Their drop
   shadow is ink at low alpha, which is invisible on a dark surface, so the
   dark theme uses a deeper black — the photographs still sit on the card
   rather than float over it. */
[data-theme="dark"] .tile__img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.62))}
[data-theme="dark"] .tile--lg .tile__img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.6))}
[data-theme="dark"] .tile--sm .tile__img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.66))}

/* == responsive == */
@media (max-width:1080px){ .board{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Under 760px the topbar has no room for a phone preview, and the device it is
   running on already is the phone. The framed copy hides it at every width. */
@media (max-width:760px){ .devicesw{display:none} }
.is-framed .devicesw{display:none}
@media (max-width:1080px){
  .aboutbtn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .aboutbtn{width:34px;height:34px;padding:7px}
}
@media (max-width:900px){
  .topbar__store{display:none}
  /* Below 900px the sidebar is a full-width drawer, so an icon rail makes no
     sense. .shell.is-rail out-specifies the kit's media query, so the class is
     never applied down here (see applyPrefs in main.js) and the control that
     sets it is hidden — this rule is the belt to that braces. */
  .shell.is-rail{grid-template-columns:minmax(0,1fr)}
  .railbtn{display:none}
}
@media (max-width:640px){
  .board{grid-template-columns:minmax(0,1fr)}
  .payopts{grid-template-columns:minmax(0,1fr)}
  .prods{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .faceswitch button span{display:none}
  .faceswitch button{padding:7px 10px}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dd{margin-bottom:6px}
  /* the panel is wider than the topbar has room for, so it becomes a sheet
     pinned under the bar rather than a popover hanging off the bell */
  /* the sheet stops short of the assistant launcher rather than running under it */
  .notifpanel{position:fixed;top:calc(var(--bar) + 6px);left:8px;right:8px;width:auto;max-height:calc(100vh - var(--bar) - 96px)}
  .topbar__tools{gap:4px}
  .devicepv{padding:14px 10px 22px}
}
@media (max-width:390px){ .prods{grid-template-columns:minmax(0,1fr)} }

/* == 13. narrow-width corrections ==
   Everything below is about the app being tapped on a phone rather than
   clicked on a desk. No colour, type or spacing language changes here — only
   the sizes and the overflow behaviour that a 320–430px viewport needs. */

/* The sidebar becomes a fixed drawer below 900px and it covers the burger that
   opened it, so on a touch screen there was no way back out of it — Escape is
   the only close, and a phone has no Escape key. This is the ground to tap. */
.sidescrim{display:none}
@media (max-width:900px){
  .sidescrim{position:fixed;inset:0;background:rgba(23,24,26,.42);z-index:64;border:0;padding:0;margin:0;cursor:pointer}
  .side.is-open+.sidescrim{display:block}
}

/* The kit puts modals and drawers on a scrim at z-index 60, one step under the
   sidebar drawer at 65. Above 900px the sidebar is a static column and the two
   never meet; below it "Reset demo data" lives inside the drawer, so its
   confirmation opened behind the panel that asked for it. Everything that
   rides the scrim moves together, so the drawers keep their own order. */
.scrim{z-index:66}

/* A table in a horizontal scroller has somewhere to go, so its cells should
   stay on one line. Without this the table shrinks to its minimum content
   width instead of scrolling: "CL-1129" breaks after the hyphen, "12 / 200"
   stacks over three lines and the ledger is unreadable at phone width. */
@media (max-width:640px){
  .tablewrap--scroll table.data th,
  .tablewrap--scroll table.data td{white-space:nowrap}
}

/* Fourteen trading hours across a phone-width card leave about 22px a column,
   which truncates every value above its bar to "₹4…". The chart scrolls
   sideways instead; columns still grow to fill when the series is short. */
@media (max-width:640px){
  .bars{overflow-x:auto;overflow-y:hidden}
  .bars__col{flex:1 0 46px}
}

/* Toasts are pinned bottom-right, which on a phone is exactly where the cart
   drawer's Checkout button, the confirmation actions and the assistant
   launcher all sit. Above the fold they collide with nothing. */
@media (max-width:640px){
  .toasts{top:calc(var(--bar) + 8px);bottom:auto;left:12px;right:12px;align-items:stretch}
  .toast{max-width:none}
}

/* Tap targets. The kit sizes its controls for a pointer; these lift the ones
   that fall short of about 44px on a touch screen without changing any of
   their proportions above 900px. */
@media (max-width:900px){
  .topbar{gap:8px;padding:0 12px}
  .btn{min-height:40px}
  .btn--sm{min-height:32px}
  .btn--icon{height:40px}
  .tab{min-height:40px}
  .chip{min-height:40px}
  .navlink{padding-top:10px;padding-bottom:10px}
  .faceswitch button{min-height:40px}
  .qty button{width:38px;height:38px}
  .qty output{line-height:38px}
  /* the two icon controls on the sidebar brand row stay square and small —
     they must never be wider than the rail they also live in */
  .side__brandbtns .btn{width:36px;height:36px;min-height:0}
  .notif__read{width:36px;height:36px;min-height:0}
  /* an order number is the only way into the detail drawer, so give the run
     of text a full row's worth of height to be hit */
  .linkish{display:inline-block;padding:5px 0}
}

/* == right to left ========================================================
   Cartline's own rules that name a physical side. The kit sheet mirrors the
   shell; these mirror the storefront, the board and the notification panel. */

[dir="rtl"] .faceswitch button+button{border-left:0;border-right:1px solid var(--line-2)}
[dir="rtl"] .cartbtn__count{right:auto;left:-5px}
[dir="rtl"] .prod,[dir="rtl"] .payopt,[dir="rtl"] .ocard,[dir="rtl"] .notif__main{text-align:right}
[dir="rtl"] .ocard__foot .btnrow{margin-left:0;margin-right:auto}
[dir="rtl"] .notif__when{margin-left:0;margin-right:auto}
[dir="rtl"] .ticks{padding-right:0}
[dir="rtl"] .ticks li{padding-left:0;padding-right:16px}
[dir="rtl"] .ticks li::before{left:auto;right:2px}
[dir="rtl"] .notifpanel{right:auto;left:0}
[dir="rtl"] .side[data-tone="amber"]{border-right-color:var(--line);border-left-color:#8C3512}
/* The order number, the SKU and the money column are Latin runs inside an
   Arabic table — keep them ranged the way their own script reads. */
[dir="rtl"] .receipt__no,[dir="rtl"] .codecell{direction:ltr;text-align:right}

@media (max-width:900px){
  [dir="rtl"] .notifpanel{left:8px;right:8px}
}