/*
  Tattoo Inventory front end.

  Black ink and a flash palette. Traditional American flash and Mexican folk
  work share one colour language — heavy black line, then vermilion, marigold,
  jade and cobalt. That is what sits in an ink tray in either country, so the
  interface takes its colour from the trade rather than from a style.

  Saturated pigment on deep black is where vibrant and luxurious meet: the
  ground is undiluted ink, the pigments are used at full strength and never
  diluted into pastels, and one colour carries one meaning.

  Structure stays disciplined: rule weight is hierarchy, figures are tabular
  and right-aligned. Type is Fraunces for the mark, titles and the large
  figures; IBM Plex Sans for everything that has to stay precise at 12px.
*/

:root {
  /* undiluted ink, and the surfaces lifted out of it */
  --ink: #141110;
  --ink-raise: #1d1917;
  --ink-raise-2: #26201e;
  --bone: #f4efe9;
  --bone-2: #ded5cd;
  --muted: #a1958d;
  --muted-2: #8a7f77;

  /* rules: weight is hierarchy */
  --rule: #2e2724;
  --rule-2: #403733;

  /* the flash palette — one colour, one meaning, never a pastel */
  --vermilion: #d63c28;   /* white button text clears 4.5:1 on this */
  --vermilion-lift: #f2604c;
  --vermilion-deep: #47140f;
  --marigold: #e3a128;
  --marigold-deep: #3d2a08;
  --jade: #26a269;
  --jade-lift: #4ecf95;
  --jade-deep: #0c3323;
  --cobalt: #3d6fe0;
  --cobalt-lift: #9dbaf7;
  --cobalt-deep: #12204a;

  /* aliases the components read */
  --accent: var(--vermilion);
  --accent-2: var(--vermilion-lift);
  --accent-soft: var(--vermilion-deep);
  --ok: var(--jade);
  --ok-wash: var(--jade-deep);
  --warn: var(--marigold);
  --warn-wash: var(--marigold-deep);
  --danger: var(--vermilion);
  --danger-wash: var(--vermilion-deep);
  --tan: var(--marigold);

  /* charts.js reads these by name */
  --paper: var(--ink);
  --paper-2: var(--ink-raise-2);
  --sheet: var(--ink-raise);
  --series-ink: var(--bone);   /* the default chart series: bone line on ink */

  /* categorical series, in fixed order. Validated on the ink surface:
     CVD dE 8.4 worst adjacent pair, normal-vision 22.1, all >= 3:1 contrast.
     The marigold step is darker than the status marigold on purpose - the
     brighter one fails the dark-mode lightness band as a series fill. */
  --cat-1: #d63c28;
  --cat-2: #3d6fe0;
  --cat-3: #bb7a18;
  --cat-4: #26a269;
  --cat-other: #6d635c;

  --r-sm: 3px;
  --r: 6px;
  --r-lg: 12px;

  --display: "Fraunces", Georgia, serif;
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bone);
  background: var(--ink);
  /* no -webkit-font-smoothing here: grayscale AA thins light text on a dark
     ground and makes it look rough. The platform default is heavier and cleaner. */
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--vermilion-lift);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- opening -- */
/* The drawing is black line on white. Inverted it becomes white line on ink,
   which is how white pigment reads on skin, and it puts the opening in the
   same world as everything after it. */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
}
.intro-stage { position: absolute; inset: 0; }
.intro-art {
  position: absolute; left: 50%; top: 50%;
  height: 80vh; aspect-ratio: 1283 / 2371; max-width: 84vw;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}
.intro-img, .intro-lqip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.intro-img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; opacity: 0; transition: opacity .5s; }
.intro-lqip { filter: invert(1) hue-rotate(180deg) blur(14px); mix-blend-mode: screen; opacity: 0; transition: opacity .5s; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.intro-gem { position: absolute; opacity: 0; pointer-events: none; }
.intro-gem svg { width: 100%; height: 100%; display: block; }
.gem-star { animation: twinkle 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.23s); transform-origin: center; transform-box: fill-box; }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.intro.is-ready .intro-lqip, .intro.is-ready .intro-img { opacity: 1; }
.intro.is-3d .intro-img, .intro.is-3d .intro-lqip { opacity: 0; }
.intro.is-3d .intro-canvas { opacity: 1; }
.intro-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 50%, #ffffff 0%, var(--vermilion) 42%, var(--ink) 100%);
}
.intro-brand {
  position: absolute; left: 44px; top: 38px;
  display: flex; flex-direction: column; gap: 7px;
  opacity: 0; transition: opacity .8s .3s;
  pointer-events: none;
}
.intro.is-ready .intro-brand { opacity: 1; }
.intro-brand span { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--bone); }
.intro-brand small { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--vermilion-lift); font-weight: 600; }
.intro-skip {
  position: absolute; right: 32px; bottom: 30px;
  padding: 9px 18px; border-radius: 999px;
  color: var(--muted); font-weight: 500; font-size: 12.5px; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: color .2s, box-shadow .2s;
}
.intro-skip:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--muted-2); }
.intro.is-out { transition: opacity .55s ease; opacity: 0; pointer-events: none; }

.app { min-height: 100%; }
.app.is-revealing { animation: reveal .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes reveal {
  from { transform: scale(1.03); filter: blur(8px); opacity: .4; }
  to { transform: none; filter: blur(0); opacity: 1; }
}

/* ------------------------------------------------------------------ login -- */
.login {
  position: relative; min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background: var(--ink);
  overflow: hidden;
}
.login-art {
  position: absolute; inset: 0;
  background: url("../assets/dragon.webp") right 6vw center / auto 96vh no-repeat;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
  opacity: .22;
  pointer-events: none;
}
@media (min-width: 1100px) {
  .login { justify-items: start; padding-left: 14vw; }
  .login-art { background-position: right 10vw center; }
}
.login-card {
  position: relative;
  width: min(414px, 100%);
  padding: 42px 40px 36px;
  background: var(--ink-raise);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 50px 100px -40px #000;
  display: flex; flex-direction: column; gap: 15px;
}
/* the four pigments, as the card's own edge */
.login-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, var(--vermilion) 0 25%, var(--marigold) 25% 50%, var(--jade) 50% 75%, var(--cobalt) 75% 100%);
}
.login-card h1 {
  font-family: var(--display); margin: 16px 0 0;
  font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.04;
}
.login-card h1 + .muted { margin: -10px 0 6px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.field input {
  height: 46px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); background: var(--ink);
  color: var(--bone); font-weight: 500; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: 0; border-color: var(--vermilion); box-shadow: 0 0 0 3px rgba(224, 67, 47, .22); }
.form-error { padding: 11px 13px; border-radius: var(--r-sm); background: var(--vermilion-deep); color: var(--vermilion-lift); font-weight: 600; font-size: 12.5px; }
.login-demo { margin: 4px 0 0; padding: 13px 15px; border-radius: var(--r-sm); background: var(--cobalt-deep); color: var(--bone-2); font-size: 12.5px; line-height: 1.55; }

/* ----------------------------------------------------------------- brand -- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.logo-tile {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  background: var(--vermilion); color: #fff;
  display: grid; place-items: center;
}
.logo-tile svg { width: 21px; height: 21px; fill: currentColor; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.08; letter-spacing: -.015em; }

/* ----------------------------------------------------------------- shell -- */
.shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 76px 1fr;
  grid-template-areas: "top" "view";
  min-height: 100vh;
}
.topbar {
  grid-area: top;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 60; background: var(--ink);
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; height: 25px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.pill-demo { background: var(--cobalt-deep); color: var(--cobalt-lift); }
.currency {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  font-weight: 600; font-size: 12.5px; cursor: pointer;
  transition: box-shadow .15s;
}
.currency:hover { box-shadow: inset 0 0 0 1px var(--muted-2); }
.currency select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding-right: 18px; font-weight: 600; cursor: pointer; }
.currency select:focus { outline: 0; }
.currency select option, .select select option { background: var(--ink-raise-2); color: var(--bone); }
.currency .chev { position: absolute; right: 10px; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.flag {
  display: inline-grid; place-items: center; width: 25px; height: 17px; border-radius: 2px;
  background: var(--bone); color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  vertical-align: middle; margin-right: 8px; flex: none;
}
.currency .flag { margin-right: 0; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; margin-top: 4px; border-top: 1px solid var(--rule); font-size: 12px; font-weight: 500; color: var(--muted); }
.table-foot .btn { height: 36px; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: box-shadow .15s;
}
.icon-btn:hover { box-shadow: inset 0 0 0 1px var(--muted-2); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--bone-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--vermilion); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--ink);
}
.avatar-wrap { position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--bone); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 15px; display: grid; place-items: center;
}
.menu {
  position: absolute; right: 0; top: 46px; z-index: 20; min-width: 224px;
  background: var(--ink-raise-2); border-radius: var(--r); padding: 7px;
  box-shadow: 0 30px 70px -20px #000, 0 0 0 1px var(--rule-2);
}
.menu-head { display: flex; flex-direction: column; padding: 9px 11px 11px; border-bottom: 1px solid var(--rule-2); margin-bottom: 6px; font-size: 12.5px; }
.menu-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: var(--r-sm); font-weight: 500; font-size: 12.5px; }
.menu-item:hover { background: var(--ink); color: var(--vermilion-lift); }

/* the sections live in a drawer opened by the hamburger */
.rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: 280px; max-width: 86vw;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  padding: 84px 12px 20px;
  background: var(--ink-raise); border-right: 1px solid var(--rule-2);
  transform: translateX(-102%); visibility: hidden;
  transition: transform .22s ease, visibility 0s .22s;
}
.rail.is-open { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 30px 0 80px -20px #000; }
.nav-backdrop { position: fixed; inset: 0; z-index: 110; background: #0009; }
.nav-backdrop[hidden] { display: none; }
.nav-toggle { margin-right: 14px; flex: none; }
.topbar > .brand { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
.rail-gap { flex: 1; min-height: 20px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group + .nav-group { margin-top: 16px; }
/* a group header names a real part of the business, not a decorative label */
.nav-head {
  margin: 0 0 6px; padding: 0 10px;
  font-family: var(--font); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted-2);
}
.nav-item {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 11px;
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--muted); font-size: 13px; font-weight: 500; text-align: left;
  position: relative;
  transition: color .14s, background .14s;
}
.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { color: var(--bone); background: var(--ink-raise); }
.nav-item.is-active { color: var(--bone); background: var(--ink-raise); font-weight: 600; }
.nav-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2px;
  background: var(--vermilion); border-radius: 0 2px 2px 0;
}
/* the count is navigation, not decoration: it sizes the destination */
.nav-count {
  font-size: 11px; font-weight: 500; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-count { color: var(--bone-2); }
.nav-foot .nav-item { font-size: 12.5px; }

.view { grid-area: view; padding: 0 28px 48px; min-width: 0; }

/* ---------------------------------------------------------------- layout -- */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; align-items: start; }
.page-main, .page-side { display: grid; gap: 22px; min-width: 0; }
.page-full { display: grid; gap: 22px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.shops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 20px; }

.page-head {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 30px 0 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule-2);
  flex-wrap: wrap;
}
/* the flash band: the four pigments, as the page's own rule */
.page-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 132px; height: 2px;
  background: linear-gradient(90deg, var(--vermilion) 0 25%, var(--marigold) 25% 50%, var(--jade) 50% 75%, var(--cobalt) 75% 100%);
}
.page-head h1 { font-family: var(--display); margin: 0; font-size: 38px; font-weight: 600; letter-spacing: -.02em; line-height: 1.04; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters .grow { flex: 1; }
.select, .search {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--rule-2);
  font-weight: 500; font-size: 12.5px; position: relative;
  transition: box-shadow .15s;
}
.select:hover, .search:hover { box-shadow: inset 0 0 0 1px var(--muted-2); }
.select select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding-right: 20px; font-weight: 600; cursor: pointer; max-width: 220px; }
.select select:focus { outline: 0; }
.select .chev { position: absolute; right: 10px; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.select .lbl { color: var(--muted); font-weight: 400; }
.search { min-width: 240px; }
.search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; }
.search input { border: 0; background: none; flex: 1; min-width: 0; font-weight: 500; }
.search input:focus { outline: 0; }
.search input::placeholder { color: var(--muted-2); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  font-weight: 500; font-size: 12px; color: var(--muted);
  transition: color .15s, box-shadow .15s, background .15s;
}
.chip:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--muted-2); }
.chip.is-active { background: var(--vermilion); color: #fff; box-shadow: none; font-weight: 600; }

/* ------------------------------------------------------------------ board -- */
/* The dashboard reads top to bottom as a briefing: the balance line, then what
   to act on beside where to act on it, then movement, then the mix. */
.board { display: grid; gap: 22px; }
.board-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
/* both columns run to the same depth; each card closes with a summary rather
   than with empty space */
.board-split > .card { display: flex; flex-direction: column; }
.board-split > .card .table-wrap { flex: 1; }
.board-split > .card .table-foot { margin-top: auto; }

/* the balance line: three figures on one ruled row, not three boxes */
.ledger {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ink-raise);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.ledger-cell { padding: 22px 26px 20px; border-right: 1px solid var(--rule); min-width: 0; }
.ledger-cell:last-child { border-right: 0; }
.ledger-cell h2 {
  margin: 0; font-family: var(--font); font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; color: var(--muted);
}
.ledger-value {
  font-family: var(--display); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  margin-top: 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  color: var(--bone);
}
.ledger-delta {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); display: inline-flex; align-items: center; gap: 4px;
}
.ledger-delta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ledger-warn { color: var(--marigold); }
.ledger-late { color: var(--vermilion-lift); }
.ledger-none { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.ledger-sub { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); }
.ledger-plot { margin-top: 16px; }

/* ranked bars: magnitude on a common baseline, every row directly labelled */
.ranked { display: grid; gap: 2px; }
.rank-row {
  display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(0, 2fr) auto 42px;
  align-items: center; gap: 14px;
  padding: 7px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; transition: background .14s;
}
.rank-row:hover, .rank-row:focus-visible { background: var(--ink); }
.rank-name { font-weight: 500; color: var(--bone-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { height: 10px; border-radius: 2px; background: var(--ink); overflow: hidden; }
.rank-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.rank-val { font-weight: 600; color: var(--bone); white-space: nowrap; }
.rank-share { color: var(--muted); text-align: right; }
.ranked.no-share .rank-row { grid-template-columns: minmax(96px, 1.1fr) minmax(0, 2fr) auto; }

/* ------------------------------------------------------------------ cards -- */
.card {
  background: var(--ink-raise); border-radius: var(--r); padding: 22px 24px 24px;
  box-shadow: inset 0 0 0 1px var(--rule);
  min-width: 0; position: relative;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 18px; padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}
.card-head h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--bone); }
.card-head .tools { display: flex; align-items: center; gap: 4px; }
.tool { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted-2); transition: color .15s, background .15s; }
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover, .tool.is-active { background: var(--ink); color: var(--vermilion); }
.card-link { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
.card-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.card-link:hover { background: var(--ink); color: var(--vermilion); }
.legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone); display: inline-block; }
.legend i.sw-accent { background: var(--cobalt); }
.legend i.sw-hatch { background: repeating-linear-gradient(135deg, var(--bone) 0 1.5px, transparent 1.5px 4px); border-radius: 1px; }
.legend i.sw-grey { background: var(--muted-2); }
.legend i.sw-tan { background: var(--marigold); }

/* the shortfall split: where the missing stock sits, USA against Mexico */
.split { display: flex; height: 46px; border-radius: var(--r-sm); overflow: hidden; gap: 2px; }
.split > div { display: flex; align-items: flex-end; padding: 7px 10px; font-weight: 700; font-size: 12.5px; }
.split .a { background: var(--ink-raise-2); color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-2); }
.split .b { background: var(--cobalt); color: #fff; }
.split-legend { display: flex; gap: 14px; margin-top: 9px; font-size: 11px; font-weight: 500; color: var(--muted); }
.split-legend span { display: inline-flex; align-items: center; }
.split-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.split-legend i.b { background: var(--cobalt); }

/* segmented control */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--rule-2); gap: 2px; }
.seg button { height: 28px; padding: 0 13px; border-radius: 2px; font-weight: 500; font-size: 11.5px; color: var(--muted); transition: color .15s, background .15s; }
.seg button:hover { color: var(--bone); }
.seg button.is-active { background: var(--vermilion); color: #fff; font-weight: 600; }
.seg.seg-ink button.is-active { background: var(--bone); color: var(--ink); }

/* charts */
.chart { width: 100%; overflow: visible; }
.chart text { font-family: var(--font); font-size: 10.5px; fill: var(--muted); font-weight: 500; }
.chart .axis line { stroke: var(--rule-2); stroke-width: 1; }
.chart .lbl-strong { fill: var(--bone); font-weight: 600; }
.chart .lbl-white { fill: var(--ink); font-weight: 600; }
.chart [data-tip] { transition: opacity .12s; cursor: default; }
.chart g.bar:hover rect, .chart g.bar:focus-visible rect { opacity: .82; }
.chart .hit { fill: transparent; }
.chart .slice:hover, .chart .slice:focus-visible { opacity: .85; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chart-table th, .chart-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rule); }
.chart-table th { font-size: 11px; color: var(--muted); font-weight: 600; border-bottom-color: var(--rule-2); }
.chart-table td.num, .chart-table th.num { text-align: right; }
[data-chart="movement"] .chart-body { overflow-x: auto; }
[data-chart="movement"] .chart { min-width: 620px; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); flex-wrap: wrap; }

/* tables: the ruled page */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-size: 11px; color: var(--muted); font-weight: 600;
  padding: 0 12px 11px; border-bottom: 1.5px solid var(--rule-2); white-space: nowrap;
  letter-spacing: .04em;
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table th.num, .table td.num { text-align: right; }
.table td.grow, .table th.grow { white-space: normal; min-width: 180px; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:hover td { background: var(--ink); }
.item { display: flex; align-items: center; gap: 13px; font-weight: 600; }
.item small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.thumb {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--ink-raise-2); color: var(--bone-2); font-size: 10px; font-weight: 700; letter-spacing: .03em;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.t-ink { background: var(--bone); color: var(--ink); }
.thumb.t-accent { background: var(--vermilion); color: #fff; }
.thumb.t-tan { background: var(--marigold-deep); color: var(--marigold); }
.thumb.t-blue { background: var(--cobalt-deep); color: var(--cobalt-lift); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ink-raise-2); color: var(--bone-2); letter-spacing: .02em; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--jade-lift); background: var(--jade-deep); }
.status.low { color: var(--marigold); background: var(--marigold-deep); }
.status.out { color: var(--vermilion-lift); background: var(--vermilion-deep); }
.status.open { color: var(--bone-2); background: var(--ink-raise-2); }
.status.done { color: var(--jade-lift); background: var(--jade-deep); }
.status.hold { color: var(--marigold); background: var(--marigold-deep); }
.pct-red { color: var(--vermilion-lift); font-weight: 600; }
.cover-thin { color: var(--marigold); font-weight: 600; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px; letter-spacing: .01em; transition: background .15s, box-shadow .15s, color .15s; }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-ink { background: var(--ink-raise-2); color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-ink:hover { box-shadow: inset 0 0 0 1px var(--bone-2); color: #fff; }
.btn-accent { background: var(--vermilion); color: #fff; }
.btn-accent:hover { background: var(--vermilion-lift); }
.btn-light { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-light:hover { box-shadow: inset 0 0 0 1px var(--muted-2); }
.btn-block { width: 100%; height: 46px; }
.btn[disabled] { opacity: .5; cursor: wait; }

/* row actions: present only for the people who can use them, and quiet until
   the row is under the pointer so the table still reads as a table */
.row-actions { width: 1%; white-space: nowrap; text-align: right; }
.row-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-grid; place-items: center; color: var(--muted-2);
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.row-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
tr:hover .row-btn, .row-btn:focus-visible { opacity: 1; }
.row-btn:hover { background: var(--ink-raise-2); color: var(--bone); }
.row-btn.is-danger:hover { color: var(--vermilion-lift); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn-danger { background: var(--vermilion); color: #fff; }
.btn-danger:hover { background: var(--vermilion-lift); }
.page-actions { display: flex; justify-content: flex-end; }

/* the change dialog */
.sheet { border: 0; padding: 0; background: none; color: var(--bone); max-width: min(560px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(8, 6, 6, .72); }
.sheet-panel {
  background: var(--ink-raise); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 40px 90px -30px #000;
  display: grid; gap: 16px; padding: 22px 24px 20px; margin: 0;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sheet-head h2 { font-family: var(--display); margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.sheet-close { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
.sheet-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-close:hover { background: var(--ink); color: var(--bone); }
.sheet-intro { margin: -6px 0 0; font-size: 13px; line-height: 1.55; color: var(--bone-2); }
.sheet-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sheet-field { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.sheet-field.is-wide { grid-column: 1 / -1; }
.sheet-field em { font-style: normal; font-weight: 400; color: var(--muted-2); }
.sheet-field input, .sheet-field textarea {
  height: 42px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); background: var(--ink); color: var(--bone);
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
}
.sheet-field textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.sheet-field input:focus, .sheet-field textarea:focus, .sheet-select select:focus { outline: 0; border-color: var(--vermilion); }
.sheet-select { height: 42px; width: 100%; box-shadow: inset 0 0 0 1px var(--rule-2); background: var(--ink); }
.sheet-select select { width: 100%; font-size: 13.5px; font-weight: 500; }
.sheet-field small { font-weight: 400; font-size: 11px; color: var(--muted-2); letter-spacing: 0; line-height: 1.45; }
.sheet-error { font-weight: 500; font-size: 11.5px; color: var(--vermilion-lift); letter-spacing: 0; }
.sheet-banner { margin: 0; padding: 11px 13px; border-radius: var(--r-sm); background: var(--vermilion-deep); color: var(--vermilion-lift); font-size: 12.5px; font-weight: 500; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 560px) { .sheet-body { grid-template-columns: 1fr; } }

/* tiles: a ruled row of figures */
.tile { background: none; padding: 4px 22px 4px 0; border-right: 1px solid var(--rule); }
.tile:last-child { border-right: 0; }
.tiles > .tile + .tile { padding-left: 22px; }
.tile .lbl { font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: .03em; }
.tile .val { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.015em; margin-top: 6px; line-height: 1.02; }
.tile .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* shop cards */
.shop-card h3 { font-family: var(--display); margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 9px; }
.shop-card .flag { font-size: 18px; }
.shop-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--rule); box-shadow: 0 0 0 1px var(--rule); }
.shop-meta div { background: var(--ink-raise); padding: 11px 13px; }
.shop-meta .lbl { font-size: 10.5px; color: var(--muted); font-weight: 500; letter-spacing: .04em; }
.shop-meta .val { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-top: 2px; }
.subbars { margin-top: 18px; display: grid; gap: 9px; }
.subbar { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.subbar .track { height: 6px; border-radius: 999px; background: var(--ink); overflow: hidden; }
.subbar .fill { height: 100%; background: var(--vermilion); border-radius: 999px; }
.subbar .num { text-align: right; color: var(--bone); font-weight: 600; }

/* help page */
.prose { max-width: 66ch; }
.prose h2 { font-family: var(--display); font-size: 23px; font-weight: 600; margin: 32px 0 8px; letter-spacing: -.015em; }
.prose p, .prose li { color: var(--bone-2); line-height: 1.7; }
.prose code { background: var(--ink-raise-2); color: var(--marigold); padding: 2px 6px; border-radius: 2px; font-size: 12px; }

/* tooltip */
.tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--bone); color: var(--ink); border-radius: var(--r-sm); padding: 11px 13px;
  font-size: 11.5px; font-weight: 500; line-height: 1.45; max-width: 264px;
  box-shadow: 0 20px 44px -12px #000;
}
.tip strong { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.tip .row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tip .row i { width: 11px; height: 2px; border-radius: 2px; background: var(--ink); }
.tip .row i.o { background: var(--cobalt); }
.tip .row b { font-weight: 700; }

/* loading */
.loading { display: grid; place-items: center; min-height: 50vh; color: var(--muted); font-weight: 500; gap: 14px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rule-2); border-top-color: var(--vermilion); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .board-split { grid-template-columns: 1fr; }
  .page { grid-template-columns: 1fr; }
  .page-side { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
}
@media (max-width: 900px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ledger-cell:last-child { border-bottom: 0; }
  .rank-row { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) auto; }
  .rank-share { display: none; }
    .tile { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .tiles > .tile + .tile { padding-left: 0; }
  .tile:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .shell { grid-template-rows: 64px 1fr; }
  .topbar { padding: 0 18px; }
  .topbar-right { gap: 8px; }
  .brand-name { display: none; }
  .view { padding: 0 18px 48px; }
  .page-head { padding-top: 22px; }
  .page-head h1 { font-size: 28px; }
  .ledger-value { font-size: 34px; }
  .card-head { flex-wrap: wrap; row-gap: 10px; }
  .card-head h2 { white-space: nowrap; }
  .card-head .legend { flex-basis: 100%; }
  .login-art { background-position: center 30%; background-size: auto 70vh; }
  .login-card { padding: 32px 24px 28px; }
  .login-card h1 { font-size: 32px; }
  .search { min-width: 0; width: 100%; }
  .intro-brand { left: 22px; top: 20px; }
  .intro-art { height: auto; width: 86vw; max-height: 80vh; }
}
@media (prefers-reduced-motion: reduce) {
  .app.is-revealing { animation: none; }
  .intro.is-out { transition: none; }
  .gem-star { animation: none; }
}

/* --------------------------------------------------------------- shop map -- */
.map-card { padding-bottom: 18px; }
/* The map sits in the narrower column, so it takes the full card width with the
   ranked list beneath it. Side by side it collapsed to an unreadable thumbnail. */
.map-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; }
.map-wrap > div:first-child { padding: 4px 8px 0; }
.shop-map { width: 100%; height: auto; display: block; }
.shop-map .dot { fill: var(--rule-2); }
.shop-map .dot-mex { fill: #4a3f3a; }
.pin { cursor: pointer; }
.pin .halo { fill: var(--pin); opacity: .3; transform-origin: 0 0; animation: pin-pulse 2.4s ease-out infinite; }
.pin .ring { fill: var(--ink); }
.pin .core { fill: var(--pin); transition: r .15s; }
.pin:hover .core, .pin:focus-visible .core { r: 6.5; }
.pin .pin-label { font-family: var(--font); font-size: 11.5px; font-weight: 600; fill: var(--bone); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; }
.pin-good { --pin: var(--jade); }
.pin-watch { --pin: var(--marigold); }
.pin-low { --pin: var(--vermilion); }
.pin.is-selected .ring { fill: var(--bone); }
.pin.is-selected .halo { fill: var(--bone); opacity: .28; }
.pin.is-selected .pin-label { fill: var(--vermilion-lift); }
@keyframes pin-pulse { 0% { transform: scale(.5); opacity: .45; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } }
.pin:nth-child(2n) .halo { animation-delay: -.8s; }
.pin:nth-child(3n) .halo { animation-delay: -1.6s; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.map-list li + li button { border-top: 1px solid var(--rule); }
.map-list button {
  width: 100%; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--r-sm); text-align: left; font-weight: 600; font-size: 12px;
  transition: background .15s;
}
.map-list button:hover { background: var(--ink); }
.map-list button.is-active { background: var(--vermilion); color: #fff; }
.map-list button.is-active small { color: rgba(255, 255, 255, .78); }
.map-list button.is-active .num { color: #fff; }
.map-list button.is-active i { background: #fff; }
.map-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--pin, var(--muted-2)); }
.map-list i.good { --pin: var(--jade); } .map-list i.watch { --pin: var(--marigold); } .map-list i.low { --pin: var(--vermilion); }
.map-list small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; letter-spacing: .02em; }
.map-list .num { font-weight: 600; font-size: 12px; }
.map-list .all button { margin-top: 6px; border-top: 1.5px solid var(--rule-2); }
.legend i.sw-good { background: var(--jade); } .legend i.sw-watch { background: var(--marigold); } .legend i.sw-low { background: var(--vermilion); }

/* markers by location type: the hub is a diamond, a studio a circle, Mexico a
   double ring, an event a triangle. Colour still means stock health. */
.pin .ring2 { fill: none; stroke: var(--pin); stroke-width: 1.5; opacity: .8; }
.pin-type-hub .halo { opacity: .38; }
.pin.is-temporary .core { stroke: var(--bone); stroke-width: 1.2; stroke-dasharray: 2 2; }
.marker-icon { width: 18px; height: 18px; flex: none; --pin: var(--muted-2); }
.marker-icon .ring { fill: var(--ink-raise-2); }
.marker-icon.pin-good { --pin: var(--jade); } .marker-icon.pin-watch { --pin: var(--marigold); } .marker-icon.pin-low { --pin: var(--vermilion); }
.legend-types { margin: 8px 0 4px; }
.legend-types span { gap: 5px; }
.map-list button { grid-template-columns: 18px 1fr auto; }
.map-list button.is-active .marker-icon { --pin: #fff; }

/* the fourth ledger figure: expiring lots */
.ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .ledger { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } }
.expiry-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 11.5px; }
.expiry-mini li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.expiry-mini small { display: block; color: var(--muted); font-size: 10.5px; }
.chips-brand { margin: 0 0 16px; }

/* the Locations screen, grouped by type */
.location-group { margin-top: 26px; }
.location-group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.location-group-head .marker-icon { width: 26px; height: 26px; --pin: var(--bone); }
.location-group-head h2 { font-family: var(--display); margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.location-group-head p { margin: 2px 0 0; font-size: 12px; }
.location-card h3 .marker-icon { width: 22px; height: 22px; --pin: var(--bone); }
.location-sub { margin: 6px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.location-share { margin: 12px 0 0; font-size: 11.5px; }

/* live feed pill, pause switch, fire sales, audit */
.pill-live { background: var(--jade-deep); color: var(--jade-lift); }
.pill-live[data-state="reconnecting"] { background: var(--marigold-deep); color: var(--marigold); }
.pill-live[data-state="off"] { background: var(--ink-raise-2); color: var(--muted); }
.pause-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--bone-2); }
.pause-switch i { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); }
.pause-switch.is-paused { background: var(--marigold-deep); color: var(--marigold); box-shadow: none; }
.pause-switch.is-paused i { background: var(--marigold); }
.location-pause { margin-left: auto; }
.sale-group + .sale-group { margin-top: 18px; }
.sale-group h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.sale-item { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sale-main { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.sale-figures { text-align: right; }
.sale-figures small { display: block; color: var(--muted); font-size: 11.5px; }
.sale-discount { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--vermilion-lift); letter-spacing: -.02em; }
.sale-why summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sale-why p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--bone-2); }
.sale-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sale-actions .as-text-btn { margin-left: auto; }
.audit-table code { font-size: 11.5px; color: var(--marigold); background: var(--ink-raise-2); padding: 2px 6px; border-radius: 2px; }
.audit-change { max-width: 340px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.as-text-btn { background: none; border: 0; padding: 0; color: var(--cobalt-lift); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.as-text-btn:hover { text-decoration: underline; }
.select input[type="date"] { background: none; border: 0; color: var(--bone); font: inherit; font-size: 12.5px; }

/* the artist page: one phone-width screen, as if inside the client's own app */
.artist-app { max-width: 440px; margin: 0 auto; background: var(--ink-raise); border: 1px solid var(--rule-2); border-radius: 30px; padding: 22px 18px 26px; box-shadow: 0 30px 60px -30px #000; display: grid; gap: 14px; }
.aa-head h1 { font-family: var(--display); font-size: 28px; margin: 2px 0 6px; font-weight: 600; letter-spacing: -.02em; }
.aa-head p { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.aa-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.aa-card { background: var(--ink); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.aa-card h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.aa-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aa-say { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; }
.aa-say input { height: 42px; border-radius: 12px; border: 0; background: var(--ink-raise-2); padding: 0 12px; font-size: 13.5px; }
.aa-mic { width: 44px; height: 44px; border-radius: 50%; background: var(--vermilion); display: grid; place-items: center; }
.aa-mic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.aa-mic.is-listening { box-shadow: 0 0 0 6px var(--vermilion-deep); }
.aa-mic[disabled] { opacity: .5; }
.aa-hint { margin: 0; font-size: 11.5px; }
.aa-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--jade-deep); color: var(--jade-lift); font-size: 12.5px; font-weight: 500; }
.aa-quote { border: 1px solid var(--vermilion-deep); }
.aa-lines, .aa-orders, .aa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aa-lines li, .aa-orders li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; }
.aa-lines small, .aa-orders small, .aa-list small { display: block; color: var(--muted); font-size: 11px; }
.aa-totals { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12.5px; color: var(--bone-2); border-top: 1px solid var(--rule); padding-top: 8px; }
.aa-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.aa-totals .aa-total { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--bone); }
.aa-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aa-actions .btn { height: 40px; }
.aa-cardline { margin: 0; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.aa-chip { padding: 2px 8px; border-radius: 6px; background: var(--ink-raise-2); font-size: 11px; font-weight: 700; }
.aa-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.aa-price { text-align: right; font-size: 13px; }
.aa-price s { display: block; font-size: 11px; }
.aa-qty { display: inline-flex; align-items: center; gap: 6px; }
.aa-qty button { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-raise-2); font-weight: 700; }
.aa-qty span { min-width: 16px; text-align: center; font-weight: 600; }
.aa-foot { margin: 0; text-align: center; font-size: 11px; }
.hub-room { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
.hub-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hub-orders li { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.hub-orders small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.hub-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .pin .halo { animation: none; opacity: .3; transform: none; } }

/* Store switcher at the top of the sidebar: one store's data at a time. */
.store-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 10px; }
.store-tabs[hidden] { display: none; }
.store-tab { flex: 1; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; opacity: .7; }
.store-tab:hover { opacity: 1; }
.store-tab.is-active { background: rgba(128,128,128,.22); opacity: 1; font-weight: 600; }
.store-sync { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.store-sync span { opacity: .75; }
@media (max-width: 900px) { .store-sync span { display: none; } }
.store-sync[hidden] { display: none; }
.store-sync button { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; cursor: pointer; }
.store-sync button:disabled { opacity: .5; cursor: progress; }
#aa-store { width: 100%; height: 42px; border-radius: 12px; border: 0; background: var(--ink-raise-2); color: inherit; padding: 0 12px; font-size: 13.5px; }