/* ============================================================================
   FROOTCITY — SPLASH, AUTH, LAUNCHER & APP-SPECIFIC SURFACES
   ========================================================================= */

/* ------------------------------------------------------------------ SPLASH */
#splash {
  position: fixed; inset: 0; z-index: var(--fc-z-splash);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(165deg, var(--fc-green-400) 0%, var(--fc-green-500) 34%, var(--fc-green-700) 100%);
}
#splash.is-out { animation: splashOut calc(var(--fc-m-slow) * 1.1) var(--fc-ease-in) forwards; }
@keyframes splashOut { to { opacity: 0; transform: scale(1.09); visibility: hidden; } }
.sp-glow {
  position: absolute; width: 150vmax; height: 150vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%);
  animation: spGlow calc(var(--fc-m-epic) * 2.2) var(--fc-ease-out) forwards; opacity: 0;
}
@keyframes spGlow { 30% { opacity: .9; } 100% { opacity: .25; transform: scale(1.25); } }
.sp-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--fc-s-5); }
.sp-mark {
  width: 152px; height: 152px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 24px 70px -18px rgba(30,60,10,.55), 0 0 0 10px rgba(255,255,255,.22);
  animation: spMark calc(var(--fc-m-epic) * .9) var(--fc-ease-spring) both;
}
@keyframes spMark { from { transform: scale(.42) translateY(26px); opacity: 0; } }
.sp-mark img { width: 108px; height: 108px; animation: spLogo calc(var(--fc-m-epic) * .8) var(--fc-ease-out) var(--fc-m-quick) both; }
@keyframes spLogo { from { opacity: 0; transform: scale(.7) rotate(-9deg); } }
.sp-mark::after {
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.85); opacity: 0;
  animation: spRing calc(var(--fc-m-epic) * 1.4) var(--fc-ease-out) calc(var(--fc-m-slow) * 1.1) 2;
}
@keyframes spRing { 0% { opacity:.85; transform:scale(1) } 100% { opacity:0; transform:scale(1.42) } }
.sp-word {
  font-family: var(--fc-font-display); font-size: 40px; font-weight: 400;
  letter-spacing: .11em; color: #fff; text-shadow: 0 3px 18px rgba(30,60,10,.35);
  display: flex;
}
.sp-word span { animation: spLetter calc(var(--fc-m-slow) * 1.1) var(--fc-ease-spring) both; display: inline-block; }
@keyframes spLetter { from { opacity: 0; transform: translateY(20px) rotateX(-70deg); } }
.sp-tag {
  font-size: var(--fc-t-sm); letter-spacing: .42em; text-transform: uppercase; color: rgba(255,255,255,.94);
  font-weight: var(--fc-w-semi); animation: spTag calc(var(--fc-m-slow) * 1.25) var(--fc-ease-out) calc(var(--fc-m-epic) * .95) both; padding-left: .42em;
}
@keyframes spTag { from { opacity: 0; letter-spacing: .12em; } }
.sp-line { font-size: 13px; color: rgba(255,255,255,.9); font-weight: var(--fc-w-medium);
  animation: spTag calc(var(--fc-m-slow) * 1.25) var(--fc-ease-out) calc(var(--fc-m-epic) * 1.25) both; text-align:center; }
/* The fill is driven from JS by real warm-up progress, not by a keyframe:
   scaleX so it never touches layout. If there is no warm-up work to do, the
   bar is removed rather than animated over nothing. */
.sp-bar { width: 132px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden;
  animation: spTag calc(var(--fc-m-slow) * .9) var(--fc-ease-out) calc(var(--fc-m-epic) * 1.1) both; }
.sp-bar > i { display:block; height:100%; width:100%; background:#fff; border-radius:99px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fc-m-quick) var(--fc-ease-out); }

/* Produce settling around the mark. Real catalogue products, each rendered
   from its own colour spec — they arrive and stay, rather than raining past. */
.sp-fruit {
  position: absolute; opacity: 0; margin-left: -20px; margin-top: -20px;
  filter: drop-shadow(0 10px 16px rgba(20,40,10,.35));
  animation: spFruit calc(var(--fc-m-epic) * 1.4) var(--fc-ease-spring) both;
}
@keyframes spFruit {
  0%   { opacity: 0; transform: translateY(-56px) scale(.55) rotate(-16deg); }
  60%  { opacity: 1; }
  100% { opacity: .95; transform: translateY(0) scale(1) rotate(0deg); }
}
/* Beat six: a freshness pulse travels out through the mark once the wordmark
   has landed. One pulse, not a loop. */
.sp-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,198,63,.55) 0%, rgba(140,198,63,0) 70%);
  opacity: 0; animation: spPulse var(--fc-m-epic) var(--fc-ease-out) calc(var(--fc-m-epic) * 1.05) both;
}
@keyframes spPulse {
  0% { opacity: 0; transform: scale(.85); }
  35% { opacity: .95; }
  100% { opacity: 0; transform: scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Land on the finished frame rather than sitting at frame zero. */
  .sp-fruit { opacity: .95; transform: none; }
  .sp-bar > i { transform: scaleX(1); }
  .sp-mark::before { opacity: 0; }
}

.sp-scene { position: absolute; inset: 0; pointer-events: none; }

/* Composed still lifes (FC.three.scene): square sprites on one ground line. */
.fc-scene { position: relative; overflow: hidden; height: 96px; }
.fc-scene-item { position: absolute; width: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.fc-scene-d2 { z-index: 1; filter: blur(.5px); opacity: .92; }
.fc-scene-d1 { z-index: 2; }
.fc-scene-d0 { z-index: 3; }

/* Mascots: scanned people as figurines. They arrive from below and breathe;
   the live ones also turn to follow the pointer (viewer.js). */
.fc-mascot { position: relative; animation: mascotIn var(--fc-m-slow) var(--fc-ease-out) both; }
.fc-mascot canvas, .fc-mascot img { width: 100%; height: 100%; display: block; }
.fc-mascot > img.fc3d-still { animation: mascotBreathe calc(var(--fc-m-epic) * 3.3) var(--fc-ease) infinite alternate; }
@keyframes mascotIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes mascotBreathe { to { transform: translateY(-2px); } }
.state-art--3d { width: 132px; height: 132px; }
/* Pip hosts (spec §3.5): var host = FC.h('div.pip--md'); FC.three.mascot(host,'pip',{clip}).
   Square-ish, ground line on the bottom edge; the film canvas fills the box. */
.pip--sm, .pip--md, .pip--lg, .pip--xl { position: relative; display: block; flex: none; margin: 0 auto; }
.pip--sm { width: 64px; height: 72px; }
.pip--md { width: 112px; height: 132px; }
.pip--lg { width: 160px; height: 176px; }
.pip--xl { width: 220px; height: 240px; }
.pip--sm > canvas, .pip--md > canvas, .pip--lg > canvas, .pip--xl > canvas,
.pip--sm > img, .pip--md > img, .pip--lg > img, .pip--xl > img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; }
.auth-greeter { width: 120px; height: 152px; margin: var(--fc-s-3) auto 0; }
.launch-obj--person { width: 112px; height: 132px; }

/* The basket as an object: the crate behind, the last line in front, live. */
.cart-hero { display: flex; align-items: center; gap: var(--fc-s-3); }
.cart-hero-scene { position: relative; width: 112px; height: 96px; flex: none; }
.cart-hero-scene > img.fc3d-still { position: absolute; left: 0; bottom: 0; width: 96px; height: 96px; }
.cart-hero-obj { position: absolute; right: 0; top: 0; width: 84px; height: 84px; }
.cart-hero-obj canvas, .cart-hero-obj img { width: 100%; height: 100%; display: block; }
.fc3d-still.is-pending { opacity: 0; }
.fc3d-still { transition: opacity var(--fc-m-quick) var(--fc-ease); }

/* Depth in the splash still life: front fruit sharp and above the disc's
   glow, the back row a touch softer and dimmer, as a lens would have it. */
.sp-fruit--d0 { z-index: 3; }
.sp-fruit--d1 { z-index: 2; }
.sp-fruit--d2 { z-index: 1; filter: blur(.6px) saturate(.94); }

/* The 3D brand mark inside the splash disc. The SVG underneath is the poster
   and the fallback; the canvas sits on top of it and fades in with the mark. */
.sp-mark.has-3d img { opacity: 0; }
.sp-mark3d { position: absolute; inset: 8px; border-radius: 50%; overflow: hidden; }
.sp-mark3d canvas { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- LAUNCHER */
.launch-head { display: flex; align-items: center; gap: var(--fc-s-4); }
.launch-obj { width: 88px; height: 88px; flex: 0 0 auto; }
.launch-head b { font-weight: var(--fc-w-bold); color: var(--txt-1); font-variant-numeric: tabular-nums; }

/* One motion signature per application, on hover and focus only. Each moves the
   way the work it stands for moves: the van travels, the scale settles, the
   crate lands, the dial turns. Transform only — nothing here touches layout. */
.applet .applet-ic { transition: transform var(--fc-m-quick) var(--fc-ease-spring); }
.applet:hover .applet-ic,
.applet:focus-visible .applet-ic                        { transform: translateY(-2px); }
.applet[data-app="delivery"]:hover .applet-ic,
.applet[data-app="delivery"]:focus-visible .applet-ic   { transform: translateX(4px); }
.applet[data-app="store"]:hover .applet-ic,
.applet[data-app="store"]:focus-visible .applet-ic      { transform: rotate(-7deg); }
.applet[data-app="mandi"]:hover .applet-ic,
.applet[data-app="mandi"]:focus-visible .applet-ic      { transform: translateY(3px) scale(.96); }
.applet[data-app="admin"]:hover .applet-ic,
.applet[data-app="admin"]:focus-visible .applet-ic      { transform: rotate(32deg); }
.applet[data-app="b2b"]:hover .applet-ic,
.applet[data-app="b2b"]:focus-visible .applet-ic        { transform: translateY(-5px); }
.applet[data-app="horeca"]:hover .applet-ic,
.applet[data-app="horeca"]:focus-visible .applet-ic     { transform: scale(1.09); }
.applet[data-app="support"]:hover .applet-ic,
.applet[data-app="support"]:focus-visible .applet-ic    { transform: scale(1.05) rotate(-4deg); }
.applet[data-app="command"]:hover .applet-ic,
.applet[data-app="command"]:focus-visible .applet-ic    { transform: scale(1.07); }
.applet[data-app="customer"]:hover .applet-ic,
.applet[data-app="customer"]:focus-visible .applet-ic   { transform: translateY(-4px) scale(1.04); }
/* A tile the role cannot open does not respond. That silence is the signal,
   and it has to hold under focus too or the keyboard reads locked as open. */
.applet.is-locked:hover .applet-ic,
.applet.is-locked:focus-visible .applet-ic { transform: none; }

/* -------------------------------------------------------------------- AUTH */
.auth-hero { position: relative; padding: var(--fc-s-8) var(--fc-s-5) var(--fc-s-6); text-align: center; }
.auth-mark { width: 76px; height: 76px; margin: 0 auto var(--fc-s-4); border-radius: var(--fc-r-xl); display: grid; place-items: center;
  background: #fff; box-shadow: 0 14px 36px -12px rgba(30,60,10,.4); }
.auth-mark img { width: 56px; height: 56px; }
.auth-title { font-family: var(--fc-font-display); font-size: var(--fc-t-3xl); letter-spacing: -.02em; line-height: 1.15; }
.auth-sub { font-size: var(--fc-t-sm); color: var(--txt-2); margin-top: 8px; max-width: 32ch; margin-inline: auto; line-height: var(--fc-lh-loose); }

/* Demo account picker — the "all logins on the login screen" surface */
.acct {
  display: flex; align-items: center; gap: var(--fc-s-3); width: 100%; text-align: left;
  padding: 12px var(--fc-s-3); border-radius: var(--fc-r-md);
  transition: transform var(--fc-m-fast) var(--fc-ease-out), background var(--fc-m-fast) var(--fc-ease-out);
  border: 1px solid transparent;
}
.acct:hover { background: var(--on-glass-chip); border-color: var(--glass-stroke-lo); }
.acct:active { transform: scale(var(--fc-press)); }
.acct-n { font-size: var(--fc-t-sm); font-weight: var(--fc-w-semi); line-height: 1.3; }
.acct-r { font-size: var(--fc-t-2xs); color: var(--txt-3); margin-top: 2px; letter-spacing:.02em; }
.acct-go { margin-left: auto; color: var(--txt-3); flex: none; transition: transform var(--fc-m-fast) var(--fc-ease-out); }
.acct:hover .acct-go { transform: translateX(3px); color: var(--accent); }
.cred { font-family: var(--fc-font-mono); font-size: var(--fc-t-2xs); background: var(--on-glass-chip); padding: 2px 6px; border-radius: 5px; }

/* App tile in launcher */
.applet {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--fc-s-4);
  border-radius: var(--fc-r-lg); text-align: left; overflow: hidden;
  transition: transform var(--fc-m-quick) var(--fc-ease-out), box-shadow var(--fc-m-quick) var(--fc-ease-out);
}
.applet:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
.applet:active { transform: scale(var(--fc-press)); }
.applet-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.applet-ic .applet-obj { width: 40px; height: 40px; object-fit: contain; }
.applet h3 { font-size: var(--fc-t-md); font-weight: var(--fc-w-bold); letter-spacing: -.015em; }
.applet p { font-size: var(--fc-t-xs); color: var(--txt-3); line-height: 1.45; }
.applet .lock { position: absolute; top: 12px; right: 12px; color: var(--txt-3); }
.applet.is-locked { opacity: .5; }
.applet-no { position:absolute; right: 12px; bottom: 10px; font-family: var(--fc-font-mono); font-size: 30px;
  font-weight: 700; color: var(--txt-1); opacity: .055; letter-spacing:-.04em; }

/* ------------------------------------------------------------ HOME (customer) */
.hero {
  position: relative; border-radius: var(--fc-r-xl); overflow: hidden; min-height: 178px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--fc-s-5);
  color: #fff;
}
.hero > .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero > .hero-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(15deg, rgba(10,26,6,.86) 4%, rgba(10,26,6,.34) 52%, rgba(10,26,6,.06) 100%); }
.hero > * { position: relative; z-index: 2; }
.hero h2 { font-family: var(--fc-font-display); font-size: var(--fc-t-2xl); line-height: 1.16; letter-spacing: -.02em; }
.hero p { font-size: var(--fc-t-sm); opacity: .92; margin-top: 6px; max-width: 30ch; }

.locbar { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.locbar .pin { color: var(--fc-green-600); margin-top: 2px; flex: none; }
.locbar .l1 { font-size: var(--fc-t-sm); font-weight: var(--fc-w-bold); display: flex; align-items: center; gap: 4px; letter-spacing: -.01em; }
.locbar .l2 { font-size: var(--fc-t-xs); color: var(--txt-3); line-height: 1.35; }

/* Ripeness rail cards */
.ripcard { position: relative; border-radius: var(--fc-r-lg); padding: var(--fc-s-4); overflow: hidden; text-align: left; min-height: 118px; display:flex; flex-direction:column; justify-content:space-between; }
.ripcard-glow { position: absolute; width: 120px; height: 120px; border-radius: 50%; filter: blur(38px); opacity: .55; right: -30px; top: -30px; }
.ripcard h3 { font-size: var(--fc-t-md); font-weight: var(--fc-w-bold); letter-spacing: -.015em; position: relative; }
.ripcard p { font-size: var(--fc-t-xs); color: var(--txt-3); margin-top: 3px; position: relative; line-height: 1.4; }
.ripcard .n { font-size: var(--fc-t-2xl); font-weight: var(--fc-w-bold); letter-spacing: -.03em; position: relative; }

/* Product detail gallery */
.pdp-gal { position: relative; aspect-ratio: 1/1; border-radius: var(--fc-r-xl); overflow: hidden; }
.pdp-gal .slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.pdp-gal .slides > div { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 8%; }
.pdp-gal .slides img { width: 100%; height: 100%; object-fit: contain; }
.pdp-gal { background: #fff; }
[data-surface="night"] .pdp-gal { background: rgba(255,255,255,.07); }
.pdp-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.pdp-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--txt-3); opacity: .4; transition-property: var(--fc-tx); transition-duration: var(--fc-m-quick); transition-timing-function: var(--fc-ease-out); }
.pdp-dots i.on { opacity: 1; width: 18px; background: var(--fc-green-600); }

/* Nutrition bars */
.nutri { display: grid; gap: 10px; }
.nutri-row { display: grid; grid-template-columns: 88px 1fr 58px; align-items: center; gap: 10px; font-size: var(--fc-t-xs); }
.nutri-bar { height: 6px; border-radius: 99px; background: var(--on-glass-chip); overflow: hidden; }
.nutri-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fc-green-400), var(--fc-green-700)); transition: width var(--fc-m-slow) var(--fc-ease-out); }

/* Slot picker */
.slot {
  padding: 12px var(--fc-s-3); border-radius: var(--fc-r-md); border: 1.5px solid var(--line);
  text-align: center; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); background: var(--field);
}
.slot:hover:not(:disabled) { border-color: var(--fc-green-400); }
.slot[aria-pressed="true"] { border-color: var(--fc-green-600); background: rgba(140,198,63,.14); box-shadow: 0 0 0 3px rgba(140,198,63,.14); }
.slot:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.slot .st { font-size: var(--fc-t-sm); font-weight: var(--fc-w-bold); letter-spacing: -.01em; }
.slot .ss { font-size: var(--fc-t-2xs); color: var(--txt-3); margin-top: 2px; }

/* Payment method row */
.pay { display: flex; align-items: center; gap: var(--fc-s-3); padding: 12px var(--fc-s-4); border-radius: var(--fc-r-md);
  border: 1.5px solid var(--line); width: 100%; text-align: left; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); background: var(--field); }
.pay[aria-pressed="true"] { border-color: var(--fc-green-600); background: rgba(140,198,63,.10); }
.pay .pi { width: 36px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.pay .tick { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--line); display: grid; place-items: center; flex: none; }
.pay[aria-pressed="true"] .tick { background: var(--fc-green-600); border-color: var(--fc-green-600); color: #fff; }

/* ---------------------------------------------------------- OPS SURFACES */
.ops-head { display: flex; align-items: center; gap: var(--fc-s-3); padding: calc(var(--fc-safe-top) + 12px) var(--fc-s-4) 12px; flex: none; }
.ops-tile {
  padding: var(--fc-s-4); border-radius: var(--fc-r-lg); text-align: left; position: relative; overflow: hidden;
  transition: transform var(--fc-m-fast) var(--fc-ease-out);
}
.ops-tile:active { transform: scale(var(--fc-press)); }
.ops-tile .n { font-size: var(--fc-t-3xl); font-weight: var(--fc-w-bold); letter-spacing: -.04em; line-height: 1; }
.ops-tile .l { font-size: var(--fc-t-xs); color: var(--txt-3); margin-top: 5px; }

/* Big ops action buttons (gloves-on, one-handed) */
.ops-btn {
  display: flex; align-items: center; gap: var(--fc-s-3); width: 100%; padding: var(--fc-s-5) var(--fc-s-4);
  border-radius: var(--fc-r-lg); font-size: var(--fc-t-lg); font-weight: var(--fc-w-bold);
  min-height: 68px; transition: transform var(--fc-m-fast) var(--fc-ease-out);
}
.ops-btn:active { transform: scale(var(--fc-press)); }

/* Pick list row */
.pick { display: flex; align-items: center; gap: var(--fc-s-3); padding: var(--fc-s-3); border-radius: var(--fc-r-md); width: 100%; text-align: left; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); }
.pick.is-done { opacity: .5; }
.pick.is-done .pick-n { text-decoration: line-through; }
.pick-box { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--line); display: grid; place-items: center; flex: none; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); }
.pick.is-done .pick-box { background: var(--fc-green-600); border-color: var(--fc-green-600); color: #fff; }
.pick-n { font-size: var(--fc-t-md); font-weight: var(--fc-w-semi); }
.pick-q { font-size: var(--fc-t-xs); color: var(--txt-3); }
.pick img { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* Scanner viewport */
.scanner { position: relative; aspect-ratio: 4/3; border-radius: var(--fc-r-lg); overflow: hidden; background: var(--fc-ink-900); }
.scan-grid { position: absolute; inset: 0; opacity: .25;
  background-image: linear-gradient(rgba(140,198,63,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(140,198,63,.4) 1px, transparent 1px);
  background-size: 26px 26px; }
.scan-win { position: absolute; inset: 18% 12%; border-radius: var(--fc-r-md); box-shadow: 0 0 0 999px rgba(0,0,0,.42); }
.scan-win::before, .scan-win::after { content:""; position:absolute; width: 26px; height: 26px; border: 3px solid var(--fc-green-400); }
.scan-win::before { top:-1px; left:-1px; border-right:0; border-bottom:0; border-radius: 8px 0 0 0; }
.scan-win::after { bottom:-1px; right:-1px; border-left:0; border-top:0; border-radius: 0 0 8px 0; }
.scan-laser { position: absolute; left: 12%; right: 12%; height: 2px; background: var(--fc-green-400);
  box-shadow: 0 0 14px 3px rgba(140,198,63,.8); animation: laser calc(var(--fc-m-epic) * 1.7) var(--fc-ease) infinite; }
@keyframes laser { 0%,100% { top: 20%; } 50% { top: 78%; } }

/* Weight readout */
.scale { text-align: center; padding: var(--fc-s-5); border-radius: var(--fc-r-lg); }
.scale .val { font-family: var(--fc-font-mono); font-size: 46px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.scale .unit { font-size: var(--fc-t-lg); color: var(--txt-3); margin-left: 4px; }
.scale.is-live .val { animation: weigh calc(var(--fc-m-medium) * 1.2) var(--fc-ease-out); }
@keyframes weigh { from { opacity: .3; transform: translateY(-4px); } }

/* Route stop card */
.stop { display: flex; gap: var(--fc-s-3); padding: var(--fc-s-4); border-radius: var(--fc-r-lg); text-align: left; width: 100%; }
.stop-no { width: 30px; height: 30px; border-radius: 50%; background: var(--fc-ink-900); color: #fff; display: grid; place-items: center; font-size: var(--fc-t-sm); font-weight: var(--fc-w-bold); flex: none; }
[data-surface="night"] .stop-no { background: #fff; color: var(--fc-ink-900); }
.stop.is-next .stop-no { background: var(--fc-green-600); color: var(--accent-ink); }
.stop.is-done { opacity: .55; }
.stop.is-done .stop-no { background: var(--fc-success); color: #fff; }

/* Grade selector (mandi) */
.grade { padding: var(--fc-s-4) var(--fc-s-2); border-radius: var(--fc-r-md); border: 2px solid var(--line); text-align: center; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); }
.grade[aria-pressed="true"] { border-color: var(--fc-green-500); background: rgba(140,198,63,.14); transform: scale(1.02); }
.grade .g { font-size: var(--fc-t-2xl); font-weight: var(--fc-w-bold); letter-spacing: -.03em; line-height: 1; }
.grade .d { font-size: var(--fc-t-2xs); color: var(--txt-3); margin-top: 5px; }

/* Admin / command layout */
.deck { display: flex; height: 100%; min-height: 0; }
.deck-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.deck-top { display: flex; align-items: center; gap: var(--fc-s-4); padding: var(--fc-s-3) var(--fc-s-5); border-bottom: 1px solid var(--line-soft); flex: none;
  background: var(--glass-fill); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 20; }
.deck-body { flex: 1 1 auto; overflow-y: auto; padding: var(--fc-s-5); }
@media (max-width: 900px) {
  .deck { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--line-soft);
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    gap: 8px; padding: 8px var(--fc-s-4); scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  /* The group wrappers have to dissolve, or the buttons keep stacking inside
     them and the "horizontal" sidebar is a full-height column. */
  .sidebar > div { display: contents; }
  .side-sec { display: none; }
  .side-item { width: auto; flex: none; white-space: nowrap; padding: 8px var(--fc-s-4); }
  .side-item .tail { margin-left: 6px; }
  .deck-body { padding: var(--fc-s-4); }
  /* Console chrome wraps rather than crushing at phone width. */
  .deck-top { flex-wrap: wrap; gap: var(--fc-s-2) var(--fc-s-3); padding: var(--fc-s-3) var(--fc-s-4); }
  .deck-top > .grow { flex: 1 1 100%; order: -1; min-width: 0; }
  .deck-top .seg button { padding: 6px 12px; }
}

/* Chart surfaces */
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .axis-t { fill: var(--txt-3); font-size: 9.5px; font-family: var(--fc-font-sans); }
.chart .bar { transition: opacity var(--fc-m-fast) var(--fc-ease-out); }
.chart .bar:hover { opacity: .78; }
.chart .ln { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { opacity: .16; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fc-t-xs); color: var(--txt-2); }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* Heatmap */
.heat { display: grid; gap: 3px; }
.heat i { aspect-ratio: 1/1; border-radius: 3px; }

/* Support console split */
.split { display: grid; grid-template-columns: 320px 1fr; gap: var(--fc-s-4); min-height: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Ticket row */
.tick-row { padding: var(--fc-s-3); border-radius: var(--fc-r-md); width: 100%; text-align: left; transition: background var(--fc-m-fast) var(--fc-ease-out); border-left: 3px solid transparent; }
.tick-row:hover { background: var(--on-glass-chip); }
.tick-row.is-sel { background: var(--on-glass-chip); border-left-color: var(--accent); }
.tick-row.p-urgent { border-left-color: var(--fc-danger); }
.tick-row.p-high { border-left-color: var(--fc-warn); }

/* Chat bubbles */
.bub { max-width: 78%; padding: 10px 12px; border-radius: 16px; font-size: var(--fc-t-sm); line-height: 1.45; }
.bub--in { background: var(--on-glass-chip); border-bottom-left-radius: 5px; align-self: flex-start; }
.bub--out { background: var(--fc-green-600); color: var(--accent-ink); border-bottom-right-radius: 5px; align-self: flex-end; }
.bub--note { background: rgba(232,162,28,.16); align-self: center; font-size: var(--fc-t-xs); max-width: 92%; text-align: center; }
.bub-t { font-size: var(--fc-t-2xs); color: var(--txt-3); margin-top: 3px; }

/* Basket / hamper preview */
.hamper { position: relative; border-radius: var(--fc-r-lg); overflow: hidden; aspect-ratio: 4/3;
  background: linear-gradient(155deg, rgba(200,155,60,.20), rgba(200,155,60,.05)); display: grid; place-items: center; }
.hamper .fruits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 76%; }
.hamper .fruits img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }

/* Language picker */
.lang { display: block; width: 100%; padding: var(--fc-s-4); border-radius: var(--fc-r-lg); border: 1.5px solid var(--line); text-align: center; transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); }
.lang[aria-pressed="true"] { border-color: var(--fc-green-600); background: rgba(140,198,63,.12); transform: scale(1.02); }
.lang .native { font-size: var(--fc-t-2xl); font-weight: var(--fc-w-bold); line-height: 1.25; }
.lang .en { font-size: var(--fc-t-xs); color: var(--txt-3); margin-top: 4px; }

/* Permission prompt art */
.perm-art { width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center; margin: 0 auto;
  background: linear-gradient(150deg, var(--fc-green-300), var(--fc-green-600)); color: #fff;
  box-shadow: 0 18px 44px -16px rgba(94,158,30,.7); animation: permIn var(--fc-m-slow) var(--fc-ease-spring); }
@keyframes permIn { from { transform: scale(.7) rotate(-8deg); opacity: 0; } }

/* Dev bar */
#devbar {
  position: fixed; right: var(--fc-s-3); top: 50%; transform: translateY(-50%);
  z-index: var(--fc-z-top);
  display: flex; flex-direction: column-reverse; gap: 6px; padding: 6px;
  border-radius: var(--fc-r-pill);
  background: var(--glass-fill-hard); border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#devbar { opacity: .58; transition: opacity var(--fc-m-quick) var(--fc-ease-out); }
#devbar:hover, #devbar:focus-within, #devbar.is-open { opacity: 1; }
#devbar button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--txt-2); transition-property: var(--fc-tx); transition-duration: var(--fc-m-fast); transition-timing-function: var(--fc-ease-out); }
#devbar button:hover { background: var(--on-glass-chip); color: var(--txt-1); }
#devbar button.is-on { background: var(--fc-green-600); color: #fff; }
#devbar > button:last-child { background: var(--fc-green-600); color: #fff; }
#devbar > button:last-child:hover { background: var(--fc-green-700); color: #fff; }
#devbar > div { display: flex; }
@media (max-width: 560px) { #devbar { right: var(--fc-s-2); transform: translateY(-50%) scale(.92); } }
@media (min-width: 900px) { #devbar { right: var(--fc-s-5); } }

/* The cut-away control on the product gallery. Only rendered for the archetypes
   that actually carry internal geometry, so it never promises an interior the
   model does not have. */
.pdp-cut { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.pdp-anat {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2;
  font-size: var(--fc-t-2xs); line-height: var(--fc-lh-snug); color: var(--txt-2);
  background: var(--glass-fill-hard); border-radius: var(--fc-r-sm);
  padding: 6px 8px;
}