/* Shene POS — design system: tokens, base, components.
   Light and dark themes; the viewer's choice (data-theme) wins over the OS. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* The look follows the "glass over a warm room" design: frosted panels over a
   soft, blurred room scene, black pills for the main actions, and one accent
   colour (yellow unless the person picks another, see theme.js) for
   highlights. Surfaces are see-through, so the scene shows through them. */
:root {
  color-scheme: light;
  --bg: #e4dacb;
  /* big frosted panels (the back office, the till's cart and rail) */
  --glass: rgba(255, 255, 255, 0.34);
  --glass-strong: rgba(250, 247, 241, 0.88);
  --glass-border: rgba(255, 255, 255, 0.62);
  --blur: blur(26px) saturate(140%);
  /* cards inside them, inputs, buttons */
  --surface: rgba(255, 255, 255, 0.7);
  --surface-hover: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.42);
  --surface-3: rgba(255, 255, 255, 0.58);
  --tint: rgba(70, 55, 30, 0.07);
  --surface-solid: #f6f2ea;
  --surface-inverse: #1c1b19;
  --border: rgba(90, 70, 40, 0.1);
  --border-strong: rgba(90, 70, 40, 0.18);
  --ink: #1c1b19;
  --ink-2: #48453f;
  --ink-3: #69655d;
  --ink-inverse: #ffffff;

  /* The accent colour. Each person can pick another (data-accent, see
     theme.js); every other brand shade is mixed from --brand. */
  --brand: #f4c93d;
  --brand-hover: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-ink: #745700;
  --brand-soft: color-mix(in srgb, var(--brand) 22%, #fff);
  --brand-soft-2: color-mix(in srgb, var(--brand) 38%, #fff);
  --brand-glow: color-mix(in srgb, var(--brand) 35%, transparent);
  --on-brand: #1c1b19;

  --good: #18772f;
  --good-soft: #d6f0d4;
  --warn: #8a5300;
  --warn-soft: #fbecc8;
  --bad: #b8282e;
  --bad-soft: #f8dedd;
  --info: #1d5fb8;
  --info-soft: #dde9f8;

  /* charts (dataviz reference palette, validated) */
  --chart-surface: rgba(255, 255, 255, 0.55);
  --grid: rgba(90, 70, 40, 0.12);
  --axis: rgba(90, 70, 40, 0.25);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --r-xs: 10px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(60, 40, 10, 0.05);
  --shadow-sm: 0 2px 8px rgba(60, 40, 10, 0.07);
  --shadow: 0 10px 30px rgba(60, 40, 10, 0.1);
  --shadow-lg: 0 30px 80px rgba(60, 40, 10, 0.22);
  --ring: 0 0 0 3px var(--brand-glow);

  /* the room behind the glass: window light, plants, sofa, wooden table */
  --scene:
    radial-gradient(34% 42% at 80% 16%, rgba(255, 251, 240, 0.95), transparent 70%),
    radial-gradient(30% 36% at 34% 8%, rgba(226, 202, 160, 0.7), transparent 70%),
    radial-gradient(18% 42% at 4% 42%, rgba(116, 134, 86, 0.6), transparent 70%),
    radial-gradient(14% 30% at 96% 58%, rgba(132, 146, 92, 0.5), transparent 70%),
    radial-gradient(60% 24% at 50% 70%, rgba(240, 233, 220, 0.95), transparent 72%),
    radial-gradient(24% 18% at 52% 92%, rgba(146, 104, 66, 0.55), transparent 70%),
    radial-gradient(20% 16% at 16% 88%, rgba(214, 200, 176, 0.9), transparent 70%),
    linear-gradient(180deg, #e9dfcf 0%, #dccfba 58%, #cbbda5 100%);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rail: 84px;
}

/* Accent colours people can choose (white text stays readable on each). */
:root[data-accent] { --on-brand: #ffffff; --brand-ink: color-mix(in srgb, var(--brand) 86%, #000); --brand-soft: color-mix(in srgb, var(--brand) 12%, #fff); --brand-soft-2: color-mix(in srgb, var(--brand) 22%, #fff); }
:root[data-accent='orange'] { --brand: #cf4a0b; }
:root[data-accent='green'] { --brand: #13803f; }
:root[data-accent='blue'] { --brand: #1f62d6; }
:root[data-accent='purple'] { --brand: #6d3fd6; }
:root[data-accent='red'] { --brand: #c42a3c; }
:root[data-accent='teal'] { --brand: #0b7a84; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #171512;
    --glass: rgba(28, 26, 23, 0.5);
    --glass-strong: rgba(32, 30, 27, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --surface: rgba(255, 255, 255, 0.07);
    --surface-hover: rgba(255, 255, 255, 0.13);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(255, 255, 255, 0.09);
    --tint: rgba(255, 255, 255, 0.06);
    --surface-solid: #211f1c;
    --surface-inverse: #f3efe7;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --ink: #f3efe7;
    --ink-2: #c8c2b7;
    --ink-3: #a29c91;
    --ink-inverse: #1c1b19;
    --brand-ink: color-mix(in srgb, var(--brand) 62%, #fff);
    --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent);
    --brand-soft-2: color-mix(in srgb, var(--brand) 30%, transparent);
    --good: #5fd27a;
    --good-soft: rgba(95, 210, 122, 0.15);
    --warn: #f0b429;
    --warn-soft: rgba(240, 180, 41, 0.15);
    --bad: #ff7b7b;
    --bad-soft: rgba(255, 107, 107, 0.15);
    --info: #7cb3f5;
    --info-soft: rgba(106, 168, 242, 0.15);
    --chart-surface: rgba(255, 255, 255, 0.06);
    --grid: rgba(255, 255, 255, 0.08);
    --axis: rgba(255, 255, 255, 0.16);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
    --scene:
      radial-gradient(34% 42% at 80% 16%, rgba(196, 150, 84, 0.32), transparent 70%),
      radial-gradient(30% 36% at 34% 8%, rgba(120, 92, 56, 0.35), transparent 70%),
      radial-gradient(18% 42% at 4% 42%, rgba(70, 86, 52, 0.45), transparent 70%),
      radial-gradient(14% 30% at 96% 58%, rgba(70, 84, 50, 0.4), transparent 70%),
      radial-gradient(60% 24% at 50% 70%, rgba(84, 74, 60, 0.45), transparent 72%),
      radial-gradient(24% 18% at 52% 92%, rgba(110, 72, 40, 0.45), transparent 70%),
      linear-gradient(180deg, #24201b 0%, #1a1714 60%, #141210 100%);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #171512;
  --glass: rgba(28, 26, 23, 0.5);
  --glass-strong: rgba(32, 30, 27, 0.9);
  --glass-border: rgba(255, 255, 255, 0.09);
  --surface: rgba(255, 255, 255, 0.07);
  --surface-hover: rgba(255, 255, 255, 0.13);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.09);
  --tint: rgba(255, 255, 255, 0.06);
  --surface-solid: #211f1c;
  --surface-inverse: #f3efe7;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ink: #f3efe7;
  --ink-2: #c8c2b7;
  --ink-3: #a29c91;
  --ink-inverse: #1c1b19;
  --brand-ink: color-mix(in srgb, var(--brand) 62%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent);
  --brand-soft-2: color-mix(in srgb, var(--brand) 30%, transparent);
  --good: #5fd27a;
  --good-soft: rgba(95, 210, 122, 0.15);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, 0.15);
  --bad: #ff7b7b;
  --bad-soft: rgba(255, 107, 107, 0.15);
  --info: #7cb3f5;
  --info-soft: rgba(106, 168, 242, 0.15);
  --chart-surface: rgba(255, 255, 255, 0.06);
  --grid: rgba(255, 255, 255, 0.08);
  --axis: rgba(255, 255, 255, 0.16);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --scene:
    radial-gradient(34% 42% at 80% 16%, rgba(196, 150, 84, 0.32), transparent 70%),
    radial-gradient(30% 36% at 34% 8%, rgba(120, 92, 56, 0.35), transparent 70%),
    radial-gradient(18% 42% at 4% 42%, rgba(70, 86, 52, 0.45), transparent 70%),
    radial-gradient(14% 30% at 96% 58%, rgba(70, 84, 50, 0.4), transparent 70%),
    radial-gradient(60% 24% at 50% 70%, rgba(84, 74, 60, 0.45), transparent 72%),
    radial-gradient(24% 18% at 52% 92%, rgba(110, 72, 40, 0.45), transparent 70%),
    linear-gradient(180deg, #24201b 0%, #1a1714 60%, #141210 100%);
}

/* "Plain" background (Appearance), and devices that ask for less
   transparency: a flat background and no frosting, which is also lighter
   work for slow tills. */
:root[data-scene='plain'] { --scene: linear-gradient(var(--bg), var(--bg)); --glass: var(--surface-solid); --blur: none; }
@media (prefers-reduced-transparency: reduce) {
  :root { --scene: linear-gradient(var(--bg), var(--bg)); --glass: var(--surface-solid); --blur: none; }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body, #app, .view { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  isolation: isolate;
  color: var(--ink);
  font: 400 14px/1.45 var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* The room scene stays still behind everything, however the page scrolls. */
body::before {
  content: ''; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
  background: var(--scene); filter: blur(18px);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--ring); }
::selection { background: var(--brand-soft-2); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll { overflow: auto; overscroll-behavior: contain; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon.sm { width: 16px; height: 16px; }
.icon.lg { width: 24px; height: 24px; }
.icon.xl { width: 32px; height: 32px; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  --btn-border: var(--glass-border);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--btn-border); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.06s, box-shadow 0.15s;
  user-select: none;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary { --btn-bg: var(--surface-inverse); --btn-ink: var(--ink-inverse); --btn-border: var(--surface-inverse); }
.btn.primary:hover { background: var(--surface-inverse); box-shadow: 0 8px 20px rgba(28, 27, 25, 0.22); }
.btn.accent { --btn-bg: var(--brand); --btn-ink: var(--on-brand); --btn-border: var(--brand); }
.btn.accent:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* The accent dot inside a black pill ("+ New product"). */
.btn.primary:not(.icon-only):not(.charge) > .icon:first-child {
  width: 26px; height: 26px; padding: 5px; margin-left: -10px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
}
.btn.primary.sm:not(.icon-only) > .icon:first-child { width: 22px; height: 22px; padding: 4px; margin-left: -7px; }
.btn.dark { --btn-bg: var(--surface-inverse); --btn-ink: var(--ink-inverse); --btn-border: var(--surface-inverse); }
.btn.dark:hover { opacity: 0.9; background: var(--surface-inverse); }
.btn.ghost { --btn-bg: transparent; --btn-border: transparent; }
.btn.ghost:hover { background: var(--surface); }
.btn.danger { --btn-bg: var(--bad-soft); --btn-ink: var(--bad); --btn-border: transparent; }
.btn.danger:hover { filter: brightness(0.97); background: var(--bad-soft); }
.btn.soft { --btn-bg: var(--brand-soft); --btn-ink: var(--brand-ink); --btn-border: transparent; }
.btn.soft:hover { background: var(--brand-soft-2); }
.btn.sm { height: 32px; padding: 0 13px; font-size: 13px; }
.btn.lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn.xl { height: 64px; padding: 0 26px; font-size: 18px; }
.btn.block { width: 100%; }
.btn.icon-only { width: 40px; padding: 0; }
.btn.icon-only.sm { width: 32px; }

/* ---------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: var(--surface-hover); }
.select option { background: var(--surface-solid); color: var(--ink); }
.input.lg { height: 52px; font-size: 16px; border-radius: var(--r); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.input-wrap > .input { padding-left: 42px; }
.input-wrap > .suffix { position: absolute; right: 10px; }
.input-wrap.plain > .input { padding-left: 12px; padding-right: 46px; }
.select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
/* On/off switch: a button with role="switch" and aria-checked. */
.switch {
  flex: none; position: relative; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background 0.15s; cursor: pointer;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform 0.15s;
}
.switch[aria-checked='true'] { background: var(--surface-inverse); box-shadow: none; }
.switch[aria-checked='true']::after { background: var(--brand); }
.switch[aria-checked='true']::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.switch:focus-visible { box-shadow: var(--ring); outline: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-error {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad); font-weight: 500; font-size: 13.5px;
}

/* segmented control */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--glass-border);
  overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button { flex: none; }
.segmented button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap; transition: color 0.2s;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed='true'] { background: var(--surface-inverse); color: var(--ink-inverse); }
@media (max-width: 480px) {
  .segmented { display: flex; width: 100%; }
  .segmented button { flex: 1 1 auto; padding: 0 6px; font-size: 12.5px; }
}
/* Phones zoom in on a field with small text when it is tapped, pushing the rest
   of the screen away. At 16px they don't. */
@media (max-width: 860px) {
  .input:not(.lg), .select, textarea { font-size: 16px; }
}

/* ------------------------------------------------------ cards & surfaces */

.card {
  background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* The dark card (like the till's cart): its own light-on-dark tokens. */
.card.dark, .dark-glass {
  --ink: #f5f1e9; --ink-2: #cdc7bc; --ink-3: #a39d92; --ink-inverse: #1c1b19;
  --surface: rgba(255, 255, 255, 0.08); --surface-hover: rgba(255, 255, 255, 0.14);
  --surface-2: rgba(255, 255, 255, 0.05); --surface-3: rgba(255, 255, 255, 0.1); --tint: rgba(255, 255, 255, 0.07);
  --surface-inverse: #f5f1e9; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.1);
  --brand-ink: color-mix(in srgb, var(--brand) 62%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent);
  --brand-soft-2: color-mix(in srgb, var(--brand) 30%, transparent);
  --good: #5fd27a; --good-soft: rgba(95, 210, 122, 0.15); --bad: #ff8a8a; --bad-soft: rgba(255, 107, 107, 0.15);
  color-scheme: dark; color: var(--ink);
  background: rgba(30, 28, 25, 0.86); border-color: rgba(255, 255, 255, 0.08);
}
.card-pad { padding: 22px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px 0; }
.card-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* Small round white button in a card's corner (↗ in the design). */
.round-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-hover); color: var(--ink); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xs); transition: transform 0.15s, background 0.15s;
}
.round-btn:hover { transform: translate(1px, -1px); text-decoration: none; }
.round-btn .icon { width: 16px; height: 16px; }
.card-body { padding: 16px 22px 22px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.badge.dark { background: var(--surface-inverse); color: var(--ink-inverse); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.brand { background: var(--brand); color: var(--on-brand); }
.badge .icon { width: 13px; height: 13px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--surface); color: var(--ink-2);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.chip .count {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-3); font-size: 11.5px;
  display: inline-grid; place-items: center;
}
.chip:hover { background: var(--surface-hover); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--ink-inverse); }
.chip[aria-pressed='true'] .count { background: rgba(255, 255, 255, 0.16); color: inherit; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  background: var(--brand); color: var(--on-brand);
}
.avatar.lg { width: 64px; height: 64px; font-size: 20px; }

.divider { height: 1px; background: var(--border); margin: 12px 0; }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 48px 20px; text-align: center; color: var(--ink-3);
}
.empty .icon { width: 40px; height: 40px; stroke-width: 1.5; color: var(--ink-3); }
.empty h3 { color: var(--ink); font-size: 16px; }

.kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
}

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-3); background: transparent;
  padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--surface-2); }
.table tbody tr.clickable td { transition: background 0.12s; }
.table .r { text-align: right; }
.table td.r, .table td .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  background: rgba(40, 30, 15, 0.22); backdrop-filter: blur(6px);
  animation: fade 0.15s ease-out;
}
.modal {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur);
  animation: pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.modal.wide { width: min(880px, 100%); }
.modal.xwide { width: min(1040px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 8px; }
.modal-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
.modal-body { padding: 12px 22px 20px; overflow: auto; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; border-top: 1px solid var(--border); }
/* On a phone: a sheet from the bottom, within the height left by the browser's
   own bars (dvh), with buttons wide enough for a thumb. */
@media (max-width: 640px) {
  .modal-backdrop { padding: 8px; place-items: end center; }
  .modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal-head { padding: 16px 16px 6px; }
  .modal-body { padding: 10px 16px 16px; }
  .modal-foot { padding: 12px 16px 16px; }
  .modal-foot .btn { flex: 1 1 auto; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ------------------------------------------------------------------ toast */

.toasts {
  position: fixed; z-index: 80; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 999px;
  background: var(--surface-inverse); color: var(--ink-inverse);
  box-shadow: var(--shadow-lg); font-weight: 500; pointer-events: auto;
  animation: pop 0.18s ease-out;
}
.toast.good .icon { color: #5bd65b; }
/* At the top on a phone: at the bottom it covers the cart, the menu and whatever
   button comes next. */
@media (max-width: 860px) { .toasts { top: 10px; bottom: auto; width: calc(100vw - 24px); } }
.toast.bad .icon { color: #ff7b7b; }

/* ------------------------------------------------------------------ keypad */

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button {
  height: 60px; border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--surface); font-size: 22px; font-weight: 500;
  transition: background 0.1s, transform 0.06s;
}
.keypad button:hover { background: var(--surface-hover); }
.keypad button:active { background: var(--brand); color: var(--on-brand); transform: scale(0.97); }
.keypad button .icon { margin: auto; }

.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 8px 0 20px; }
.pin-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-strong); transition: all 0.1s;
}
.pin-dots span.on { background: var(--surface-inverse); border-color: var(--surface-inverse); transform: scale(1.1); }
.pin-dots.shake { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ------------------------------------------------------------ status pill */

.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--glass-border);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.online { background: var(--good-soft); color: var(--good); }
.pill.offline { background: var(--warn-soft); color: var(--warn); }
.pill.syncing { background: var(--info-soft); color: var(--info); }

/* ------------------------------------------------------------- stat tiles */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; }
.stat .label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stat .label .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--surface-hover); color: var(--ink); }
.stat .value { margin-top: 12px; font-size: 30px; font-weight: 350; letter-spacing: -0.03em; }
.stat .foot { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }

/* ----------------------------------------------------------------- skeleton */

.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3), var(--surface-hover), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ auth */

.auth {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; padding: 14px;
}
/* Left: a dark glass card with the pitch. Right: the form on frosted glass. */
.auth-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px; border-radius: var(--r-xl); color: #f5f1e9;
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 65%),
    rgba(28, 27, 25, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); backdrop-filter: var(--blur);
}
.auth-art .pattern { position: absolute; inset: 0; opacity: 0.08; pointer-events: none; }
.auth-art h1 { position: relative; font-size: 44px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; max-width: 520px; }
.auth-art p { position: relative; margin-top: 14px; font-size: 16px; opacity: 0.8; max-width: 460px; }
.auth-art .brand { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.auth-art .features { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.auth-art .feature {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px;
}
.auth-art .feature .icon { flex: none; color: var(--brand); }
.auth-form {
  display: flex; flex-direction: column; justify-content: center; padding: 40px; overflow: auto;
  border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur); box-shadow: var(--shadow);
}
.auth-form .inner { width: min(420px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.auth-form h2 { font-size: 32px; font-weight: 400; letter-spacing: -0.03em; }
.auth-form .code-input { font-size: 28px; font-weight: 600; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-form .code-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.auth-form .code-mark .icon { width: 26px; height: 26px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #1c1b19;
}
.logo-mark.brand-bg { background: var(--surface-inverse); color: var(--brand); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; padding: 0; }
  .auth-art { display: none; }
  .auth-form { padding: 24px 16px; border-radius: 0; border: 0; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- misc utilities */

.center-screen { height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.panel { width: min(460px, 100%); padding: 28px; }
.title-lg { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.list-reset { list-style: none; margin: 0; padding: 0; }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.page-loading { display: grid; place-items: center; height: 100%; color: var(--ink-3); }

/* Elements hidden with the hidden attribute stay hidden whatever their class. */
[hidden] { display: none !important; }

/* Accent colour picker */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.swatch {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px;
  border: 1px solid var(--glass-border); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 13.5px;
}
.swatch:hover { background: var(--surface-hover); }
.swatch[aria-pressed='true'] { background: var(--surface-inverse); color: var(--ink-inverse); border-color: var(--surface-inverse); }
.swatch-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
@media (max-width: 420px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Type-to-find list */
.picker { display: flex; flex-direction: column; gap: 6px; }
.picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.picker-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; min-width: 0;
  border: 1px solid var(--glass-border); border-radius: var(--r); background: var(--surface); text-align: left;
}
.picker-item:hover, .picker-item:focus-visible { border-color: var(--brand); background: var(--surface-hover); }
.picker-title { font-weight: 650; max-width: 100%; }
.picker-detail { font-size: 12.5px; color: var(--ink-3); max-width: 100%; }
.picker-empty { font-size: 13px; color: var(--ink-3); padding: 4px 2px; }

/* Customers: rows in the till's picker, and the credit box on the payment screen. */
.customer-list { max-height: 40vh; overflow: auto; }
.customer-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px;
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); background: var(--surface);
}
.customer-row:hover, .customer-row:focus-visible { border-color: var(--brand); background: var(--surface-hover); }
.credit-box {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); background: var(--surface-2);
}
.adhoc summary { cursor: pointer; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------ motion (motion.js) */
/* Everything moving lives here, and only for people who haven't asked their
   device for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .m-enter { animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--enter-delay, 0ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(8px); } }

  /* charts build themselves */
  .chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 35ms + 150ms); }
  @keyframes grow-up { from { transform: scaleY(0); } }
  .stack { animation: wipe-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.15s; }
  @keyframes wipe-in { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
  .split-bar { animation: grow-x 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .meter > span { transform-origin: left; animation: grow-x 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.2s; }
  @keyframes grow-x { from { transform: scaleX(0); } }

  /* the receipt feeds out of the printer, a line at a time (receipt.js) */
  .printer-spinner { animation: printer-spin 0.8s linear infinite; }
  @keyframes printer-spin { to { transform: rotate(360deg); } }
  .printer[data-stage='processing'] .receipt { transform: translateY(calc(-100% - 12px)); }
  .printer[data-stage='printing'] .receipt { animation: printer-feed 1.75s linear both; }
  @keyframes printer-feed {
    0% { transform: translateY(calc(-100% - 12px)); }
    7.5%, 10.5% { transform: translateY(-91%); }
    18%, 21% { transform: translateY(-81%); }
    28.5%, 31.5% { transform: translateY(-70%); }
    39%, 42% { transform: translateY(-58%); }
    49.5%, 52.5% { transform: translateY(-45%); }
    60%, 63% { transform: translateY(-32%); }
    70.5%, 73.5% { transform: translateY(-20%); }
    81%, 84% { transform: translateY(-10%); }
    91.5%, 94.5% { transform: translateY(-3%); }
    100% { transform: translateY(0); }
  }

  /* the theme spreads in a circle (motion.js revealFrom) */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { z-index: 2; }
}

/* The welcome before signing in (pages/welcome.js): the shop's roller shutter,
   with the sign on it. It only runs for people who haven't asked for less motion.
   Steel stays dark in both themes, so its colours are its own. */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  color: #f5f1e9; cursor: pointer; user-select: none;
  background:
    radial-gradient(70% 50% at 50% 44%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%),
    repeating-linear-gradient(180deg, #2e2b27 0 15px, #3a3731 15px 17px, #1b1917 17px 20px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.intro-sign { display: flex; flex-direction: column; align-items: center; padding: 0 20px 40px; text-align: center; }
.intro-mark {
  position: relative; width: 84px; height: 84px; margin-bottom: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  animation: intro-pop 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both 0.1s;
}
.intro-mark .icon { width: 40px; height: 40px; }
.intro-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand);
  animation: intro-ring 1s ease-out both 0.45s;
}
.intro-word { display: flex; font-size: clamp(60px, 15vw, 112px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.1; }
.intro-letter { display: block; animation: intro-letter 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 60ms + 450ms); }
.intro-shop { margin-top: 6px; font-size: clamp(15px, 2.4vw, 19px); font-weight: 500; letter-spacing: 0.01em; opacity: 0.8; animation: intro-fade 0.6s ease-out both 1s; }
.intro-line {
  width: 120px; height: 3px; margin-top: 18px; border-radius: 999px; background: var(--brand); transform-origin: left;
  animation: intro-line 0.95s cubic-bezier(0.4, 0, 0.2, 1) both 1.15s;
}
/* The bottom rail of the shutter, with its handle. */
.intro-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4a463f, #26241f); border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.intro-handle { width: 84px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
/* It gives a little as it is taken hold of, then rolls up. Taps reach the
   sign-in screen from the moment it starts to move. */
.intro.lifting { pointer-events: none; animation: intro-lift 0.85s cubic-bezier(0.6, 0, 0.2, 1) both; }
.intro.lifting .intro-sign { animation: intro-out 0.3s ease-in both; }
@keyframes intro-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes intro-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes intro-letter { from { opacity: 0; transform: translateY(45%); filter: blur(6px); } }
@keyframes intro-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes intro-line { from { transform: scaleX(0); } }
@keyframes intro-lift { 0% { transform: translateY(0); } 14% { transform: translateY(1.5%); } 100% { transform: translateY(-106%); } }
@keyframes intro-out { to { opacity: 0; } }

/* Sliding highlight behind the chosen button of a segmented control. */
.segmented.has-pill { position: relative; }
.segmented.has-pill button { position: relative; z-index: 1; }
.segmented.has-pill button[aria-pressed='true'] { background: transparent; box-shadow: none; }
.seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--surface-inverse); box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}