/* The Refractory — design system.
 *
 * White/light workspace, fine neutral borders, generous whitespace, strong
 * black/white contrast. Every accent colour is drawn from the refraction
 * gradient in the logo's R (magenta -> periwinkle -> cyan -> lime), so the
 * app and the mark read as one thing:
 *   - violet (the gradient's magenta side, deepened for contrast) carries
 *     primary actions, selection, focus and key progress;
 *   - teal (the cyan, deepened) means good / done / live;
 *   - magenta means "look at this" - warnings that are not errors;
 *   - red stays red for errors, because nothing in the mark means "broken".
 * The full gradient itself is used sparingly: a hairline at most, never on buttons
 * or text people must read. Feature panels (Home's collection value, the card
 * page's price) use flat --lab-purple-subtle instead.
 */

:root {
  --lab-bg: #f7f7f8;
  --lab-surface: #ffffff;
  --lab-surface-raised: #fbfbfc;
  --lab-text: #111113;
  --lab-text-muted: #6f6f78;
  --lab-text-faint: #96969e;
  --lab-border: rgba(17, 17, 19, 0.10);
  --lab-border-strong: rgba(17, 17, 19, 0.16);

  /* Sampled from logos/rccicon.png, top of the R to its foot. */
  --brand-magenta: #de16ed;
  --brand-periwinkle: #7a7ce8;
  --brand-cyan: #16dde3;
  --brand-lime: #bfe937;
  --brand-green: #4fe7a7;
  --brand-gradient: linear-gradient(115deg, var(--brand-magenta) 0%,
    var(--brand-periwinkle) 36%, var(--brand-cyan) 68%, var(--brand-lime) 100%);
  /* The same, washed out, for a tinted panel background. */
  --brand-wash: linear-gradient(115deg, rgba(222, 22, 237, 0.07) 0%,
    rgba(122, 124, 232, 0.06) 40%, rgba(22, 221, 227, 0.06) 75%, rgba(191, 233, 55, 0.06) 100%);

  /* "purple" is kept as the name so every existing rule follows; the value
     is the violet between the logo's magenta and periwinkle. */
  --lab-purple: #7b2ff2;
  --lab-purple-hover: #6a1fe0;
  --lab-purple-active: #5a14c8;
  --lab-purple-subtle: #f3ecff;

  /* The sign-in screen's field of card slots, small, for the white app. */
  --slots-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48'%3E%3Crect x='3' y='3' width='30' height='42' rx='3' fill='none' stroke='%237b2ff2' stroke-opacity='0.55'/%3E%3C/svg%3E");
  --slots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48'%3E%3Crect x='3' y='3' width='30' height='42' rx='3' fill='none' stroke='%23111113' stroke-opacity='0.09'/%3E%3C/svg%3E");

  --lab-success: #0b7f86;
  --lab-success-subtle: #e3f8f8;
  --lab-warning: #b0129a;
  --lab-warning-subtle: #fbe8f8;
  --lab-danger: #c62839;

  --lab-radius: 6px;
  --lab-radius-sm: 4px;
  --lab-nav-width: 232px;
  --lab-nav-breakpoint: 900px;

  /* Onest, self-hosted (scripts/fetch_display_font.py), the font Fish Audio
     uses. Satoshi and General Sans were named here before but never loaded,
     so every machine fell back to its system font. */
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Headings and short labels only - never body text or tables.
     Space Grotesk was drawn from Space Mono, so it sits naturally beside the
     JetBrains Mono carrying the labels and SKUs, and it stays technical
     without the squared-off, heavy letterforms that read as robotic.
     Change the family here and everywhere follows. Self-hosted; see
     scripts/fetch_display_font.py. */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --lab-bg: #0a0a0b;
  --lab-surface: #111113;
  --lab-surface-raised: #171719;
  --lab-text: #f7f7f8;
  --lab-text-muted: #acacb5;
  --lab-text-faint: #75757e;
  --lab-border: rgba(255, 255, 255, 0.11);
  --lab-border-strong: rgba(255, 255, 255, 0.18);

  --brand-wash: linear-gradient(115deg, rgba(222, 22, 237, 0.12) 0%,
    rgba(122, 124, 232, 0.09) 40%, rgba(22, 221, 227, 0.08) 75%, rgba(191, 233, 55, 0.07) 100%);

  --lab-purple: #9a5cff;
  --lab-purple-hover: #ac7bff;
  --lab-purple-active: #bd99ff;
  --lab-purple-subtle: #261b3d;

  --slots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48'%3E%3Crect x='3' y='3' width='30' height='42' rx='3' fill='none' stroke='%23ffffff' stroke-opacity='0.08'/%3E%3C/svg%3E");

  --slots-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48'%3E%3Crect x='3' y='3' width='30' height='42' rx='3' fill='none' stroke='%239a5cff' stroke-opacity='0.55'/%3E%3C/svg%3E");

  --lab-success: #2fe0e0;
  --lab-success-subtle: #0f2a2c;
  --lab-warning: #f065e6;
  --lab-warning-subtle: #33142f;
  --lab-danger: #ff6b7a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lab-bg);
  color: var(--lab-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lab-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--lab-purple);
  outline-offset: 2px;
  border-radius: var(--lab-radius-sm);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: -0.01em;
}

/* -- layout ------------------------------------------------------------- */

.lab-shell {
  display: grid;
  grid-template-columns: var(--lab-nav-width) 1fr;
  min-height: 100vh;
}

.lab-nav {
  background: var(--lab-surface);
  border-right: 1px solid var(--lab-border);
  padding: 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* The mark and the name, then a rule. Without the rule the lockup read as the
   first item in the menu rather than as the thing the menu belongs to. */
.lab-nav__head {
  padding: 20px 10px 18px;
  margin: 0 -12px;
  padding-left: 22px;
  padding-right: 22px;
  border-bottom: 1px solid var(--lab-border);
}
.lab-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}
.lab-brand:hover { text-decoration: none; }
.lab-brand:hover .lab-brand__name { color: var(--lab-purple); }
.lab-brand .lab-mark { height: 40px; }

/* The wordmark ships in two tones because inverting one in CSS would take the
   gradient R with it. See scripts/prepare_brand_assets.py. */
.lab-wordmark { display: block; width: 100%; max-width: 172px; height: auto; }
.lab-mark { display: block; width: auto; height: 26px; }
.lab-wordmark--dark, .lab-mark--dark { display: none; }
[data-theme="dark"] .lab-wordmark--light,
[data-theme="dark"] .lab-mark--light { display: none; }
[data-theme="dark"] .lab-wordmark--dark,
[data-theme="dark"] .lab-mark--dark { display: block; }

/* The mark beside the application name. Spans, so the whole lockup can sit
   inside one anchor. */
.lab-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.lab-lockup .lab-mark { height: 30px; flex: none; }
.lab-lockup__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lab-brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.lab-brand__tagline {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--lab-text-muted);
  margin: 3px 0 0;
  line-height: 1.35;
}
.lab-brand__sub {
  display: block;
  font-size: 11px;
  color: var(--lab-text-faint);
  font-style: italic;
  margin: 2px 0 0;
}

.lab-nav__group { display: flex; flex-direction: column; gap: 1px; }

/* Every group after the first is fenced off by a rule rather than by more
   whitespace, which at this width just made the column look unfinished. */
.lab-nav__group + .lab-nav__group {
  border-top: 1px solid var(--lab-border);
  padding-top: 20px;
  margin-top: -2px;
}

/* Mono at its natural weight, widely tracked. The display face at 600 was
   heavier than the links it was labelling, which put the emphasis in the
   wrong place. */
.lab-nav__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--lab-text-faint);
  padding: 0 10px 6px;
}
.lab-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--lab-radius-sm);
  font-size: 14px;
  color: var(--lab-text);
  text-decoration: none;
}
.lab-nav__link:hover { background: var(--lab-surface-raised); text-decoration: none; }
.lab-nav__link[aria-current="page"] {
  background: var(--lab-purple-subtle);
  color: var(--lab-purple);
  font-weight: 500;
}
.lab-nav__link--muted { color: var(--lab-text-faint); }
.lab-nav__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lab-text-faint);
}

/* Stroked, sized in the box and coloured from the text, so an icon takes the
   state of the link it belongs to - muted, current, hovered - for free. */
.lab-nav__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.lab-nav__link[aria-current="page"] .lab-nav__icon { opacity: 1; }

.lab-nav__footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lab-border);
}
.lab-nav__footer form { display: flex; }

.lab-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--lab-radius-sm);
  color: var(--lab-text);
  text-decoration: none;
  min-width: 0;
}
.lab-user:hover { background: var(--lab-surface-raised); text-decoration: none; }
.lab-user[aria-current="page"] { background: var(--lab-purple-subtle); }

.lab-user__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* The colour is set per user from the template; white sits on all six. */
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lab-user__name {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-user__out {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--lab-radius-sm);
  background: none;
  color: var(--lab-text-faint);
  cursor: pointer;
}
.lab-user__out:hover { background: var(--lab-surface-raised); color: var(--lab-text); }

.lab-main { display: flex; flex-direction: column; min-width: 0; }

/* A slim bar: the page name small, its one-line summary beside it, actions
   on the right. It stays put while the page scrolls. */
.lab-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 32px;
  border-bottom: 1px solid var(--lab-border);
  background: color-mix(in srgb, var(--lab-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lab-header__titles { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.lab-header__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-wrap: balance;
}
.lab-header__meta {
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--lab-border);
  font-size: 13px;
  color: var(--lab-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-header__actions { display: flex; align-items: center; gap: 8px; }

.lab-content { padding: 28px 32px 64px; }

/* -- components --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--lab-radius);
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-surface);
  color: var(--lab-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--lab-surface-raised); text-decoration: none; }
/* Primary buttons carry the sign-in button's chromatic offset: a pixel of
   cyan and magenta at rest, pulling a little further apart on hover. */
.btn--primary {
  background: var(--lab-purple);
  border-color: var(--lab-purple);
  color: #fff;
  box-shadow:
    1px 0 0 0 var(--brand-cyan),
    -1px 0 0 0 var(--brand-magenta);
  transition: box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}
.btn--primary:hover {
  background: var(--lab-purple-hover);
  border-color: var(--lab-purple-hover);
  box-shadow:
    2px 0 0 0 var(--brand-cyan),
    3px 1px 0 0 var(--brand-green),
    -2px 0 0 0 var(--brand-magenta),
    -3px -1px 0 0 var(--brand-magenta);
}
.btn--primary[disabled], .btn--primary[aria-disabled="true"] { box-shadow: none; }
.btn--primary:active { background: var(--lab-purple-active); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--small { min-height: 28px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.card {
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: 10px;
}
.card__header {
  padding: 18px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.card__body { padding: 14px 20px 18px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat {
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  padding: 16px 18px;
}
.stat__label {
  font-size: 12px;
  color: var(--lab-text-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat--attention .stat__value { color: var(--lab-warning); }
.stat--error .stat__value { color: var(--lab-danger); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--lab-text-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--lab-border);
  white-space: nowrap;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--lab-border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--lab-surface-raised); }
.table-wrap { overflow-x: auto; }

/* A block of explanation. Distinct from .badge, which is a pill: pills are
   sized by their content, so a paragraph in one renders as a large ellipse. */
.notice {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--lab-border-strong);
  border-radius: var(--lab-radius);
  background: var(--lab-surface-raised);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  margin: 0 0 8px;
}
.notice:last-child { margin-bottom: 0; }
.notice--warning { border-color: var(--lab-warning); color: var(--lab-warning); }
.notice--danger { border-color: var(--lab-danger); color: var(--lab-danger); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--lab-border-strong);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge--purple { background: var(--lab-purple-subtle); border-color: transparent; color: var(--lab-purple); }
.badge--success { color: var(--lab-success); }
.badge--warning { color: var(--lab-warning); }
.badge--danger { color: var(--lab-danger); }
.badge--muted { color: var(--lab-text-muted); }

.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--lab-text-muted);
}
.empty__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--lab-text);
  margin: 0 0 6px;
}
.empty__body { font-size: 14px; margin: 0 0 18px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: 13px; font-weight: 500; }
.field__hint { font-size: 12px; color: var(--lab-text-muted); }
.field__error { font-size: 13px; color: var(--lab-danger); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], input[type="tel"], input[type="url"],
select, textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  min-height: 36px;
  border: 1px solid var(--lab-border-strong);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
  color: var(--lab-text);
  width: 100%;
}

.messages { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.messages li {
  padding: 10px 14px;
  border: 1px solid var(--lab-border-strong);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
  font-size: 14px;
}
.messages .error { border-color: var(--lab-danger); color: var(--lab-danger); }
.messages .success { border-color: var(--lab-success); color: var(--lab-success); }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar form { display: flex; gap: 8px; align-items: center; }
.toolbar input[type="search"], .toolbar select { width: auto; min-width: 180px; }

/* -- chromatic offset ----------------------------------------------------- */

/* A misregistered-print edge: the same shape stamped a pixel or two out in
   each of the subtractive and additive primaries. Borrowed from lambda.ai,
   built from the three colours in our own mark rather than their palette, so
   it reads as the Refracted gradient coming apart rather than as a copy.

   box-shadow rather than stacked elements: it costs no markup, cannot be
   selected or read out, and the browser composites it on the GPU. */
.chroma {
  box-shadow:
    1px 0 0 0 var(--brand-cyan),
    2px 1px 0 0 var(--brand-green),
    -1px 0 0 0 var(--brand-magenta),
    -2px -1px 0 0 var(--brand-magenta);
}
.chroma:hover {
  box-shadow:
    2px 0 0 0 var(--brand-cyan),
    3px 1px 0 0 var(--brand-green),
    -2px 0 0 0 var(--brand-magenta),
    -3px -1px 0 0 var(--brand-magenta);
}

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

/* The sign-in screen is dark whatever the theme - it is the one screen with no
   work on it, so it can carry the brand - but the panel on it is white, and
   the mark inside the panel stays black. */
.auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0b0b0c;
  color: #e9e9ec;
}

.auth__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Graph paper, faded out at the edges so it has no visible boundary. */
.auth__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 100%);
}

/* The slot field. A pattern in user-space units, so one tile is the same size
   on a phone and on an ultrawide - nothing here scales with the viewport. */
.auth__slots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The slot outline only. Styling `.auth__slots rect` would also hit the rect
   that paints the pattern, and a CSS `fill` beats the `fill="url(#...)"`
   presentation attribute on it - which leaves the whole field invisible. */
.auth__slot {
  fill: none;
  stroke: rgba(255, 255, 255, 0.075);
  stroke-width: 1;
}
/* Faded out toward the edges so the field has no visible boundary and the eye
   is left in the middle, where the panel is. */
.auth__slots {
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 0%, transparent 100%);
}

/* The light under the bed, so the slots nearest the panel read as lit. Sized
   in viewport units from the centre, so it lands in the same place on any
   screen shape. */
.auth__lamp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 150vw);
  height: min(1100px, 150vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(123, 47, 242, 0.13) 0%,
    rgba(22, 221, 227, 0.05) 38%,
    transparent 68%
  );
}

.auth__panel { width: 100%; max-width: 392px; }

/* Square corners, like the rest of this borrowed language. */
.auth__card {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.auth__card .card__body { padding: 34px 32px 32px; }

.auth__brand {
  text-align: center;
  margin-bottom: 26px;
}
/* Black mark on a white panel: the artwork as drawn, not an inversion of it. */
.auth__brand .lab-mark--light { display: block; margin: 0 auto; height: 54px; }
.auth__brand .lab-mark--dark { display: none; }

.auth__name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #111113;
  margin: 14px 0 0;
}
.auth__tagline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #74747f;
  margin: 9px 0 0;
  line-height: 1.6;
  /* Two even lines rather than a long one and an orphan. */
  text-wrap: balance;
}

/* The panel is white in both themes, so it does not inherit the dark tokens
   the rest of the application would hand it. */
.auth__card .field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6f6f78;
}
.auth__card input[type="text"],
.auth__card input[type="email"],
.auth__card input[type="password"] {
  border-radius: 0;
  border-color: rgba(17, 17, 19, 0.22);
  background: #fff;
  color: #111113;
}
.auth__card input:focus {
  border-color: var(--lab-purple);
  outline: none;
  box-shadow: 0 0 0 2px rgba(123, 47, 242, 0.16);
}

.auth__division {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

.auth__submit {
  width: 100%;
  border-radius: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Each element arrives a beat after the one above it, once. --in is the
   position in the queue, set per element in the template. */
.auth__in {
  animation: auth-in 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--in) * 70ms);
}
@keyframes auth-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__in { animation: none; }
}

/* -- phone chrome -------------------------------------------------------- */

/* Both hidden until the breakpoint; the drawer only exists on narrow screens. */
.lab-topbar { display: none; }
.lab-scrim { display: none; }

.lab-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: -9px; /* optical: aligns the bars with the content edge */
  flex: none;
  border: 0;
  border-radius: var(--lab-radius);
  background: none;
  color: var(--lab-text);
  cursor: pointer;
}
.lab-topbar__toggle:hover { background: var(--lab-surface-raised); }

/* Three bars from one element: the middle is the box, the others pseudo. */
.lab-topbar__bars,
.lab-topbar__bars::before,
.lab-topbar__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.lab-topbar__bars { position: relative; }
.lab-topbar__bars::before,
.lab-topbar__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.lab-topbar__bars::before { top: -6px; }
.lab-topbar__bars::after { top: 6px; }

.lab-topbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--lab-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.lab-topbar__brand:hover { text-decoration: none; }
.lab-topbar__brand .lab-mark { height: 22px; }

/* -- accessibility helpers ----------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Off screen until focused. With the nav in a drawer on phones, the first tab
   stop otherwise lands in the menu button on every page. */
.lab-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 9px 14px;
  border-radius: var(--lab-radius);
  background: var(--lab-purple);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.lab-skip:focus { transform: none; text-decoration: none; }

/* -- responsive ---------------------------------------------------------- */

/* Keep in step with --lab-nav-breakpoint, which nav.js reads. */
@media (max-width: 900px) {
  /* Rows sized explicitly. The shell is min-height:100vh, and with implicit
     auto rows the leftover height is shared between them - which quietly grew
     the top bar to a fifth of the screen. */
  .lab-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .lab-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 8px 18px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: var(--lab-surface);
    border-bottom: 1px solid var(--lab-border);
  }

  /* The drawer. Off canvas rather than stacked above the content, which is
     what this used to do: the nav pushed every page down by its own height
     and the actual page started below the fold. */
  .lab-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(84vw, 300px);
    height: 100%;
    height: 100dvh;
    padding: 20px 12px calc(20px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--lab-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transform: translateX(-100%);
    /* visibility, not just transform, so a closed drawer is out of the tab
       order instead of being focusable off the side of the screen. */
    visibility: hidden;
    transition: transform 180ms ease, visibility 180ms;
  }
  [data-nav-open] .lab-nav { transform: none; visibility: visible; }

  .lab-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 10, 11, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  [data-nav-open] .lab-scrim { opacity: 1; pointer-events: auto; }

  /* Stop the page behind the drawer scrolling under the finger. */
  html[data-nav-open],
  html[data-nav-open] body { overflow: hidden; }

  /* Comfortable thumb targets once the links are the whole screen wide. */
  .lab-nav__link { padding: 11px 10px; }

  /* You cannot scan the screen you are holding, so the button that skips the
     QR code moves above it. */
  .pair { display: flex; flex-direction: column; }
  .pair__direct { order: -1; margin: 0 0 16px; }
  .pair__code { margin-top: 0; }

  .lab-header { flex-wrap: wrap; padding: 8px 18px; }
  .lab-header__actions { flex-wrap: wrap; }
  .lab-header__actions .status-pill { display: none; }
  .lab-content { padding: 18px 18px calc(64px + env(safe-area-inset-bottom)); }

  /* 16px is the threshold below which iOS Safari zooms the page on focus and
     leaves it zoomed. Nothing else here needs the larger text. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="date"],
  input[type="tel"], input[type="url"], select, textarea { font-size: 16px; }

  .toolbar { gap: 6px; }
  .toolbar input[type="search"], .toolbar select { min-width: 0; flex: 1 1 160px; }
}

/* Anything laid out in fixed columns has to become one column on a phone.
   Declared by attribute so page-level inline grids are covered too. */
@media (max-width: 620px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .lab-header__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-nav, .lab-scrim { transition: none; }
}

/* ------------------------------------------------------------ app screens
   Home, Scans, Review and Inventory lead with the cards themselves: photo
   tiles, a few plain numbers, one obvious button. */

.scan-form { display: contents; }
.btn--big { min-height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; border-radius: 10px; }

.section { margin-top: 28px; }
.section:first-child { margin-top: 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
.section__link { font-size: 14px; }
.section__intro { margin: 0 0 16px; font-size: 14px; color: var(--lab-text-muted); }

/* Status pill: a softer badge for tiles and rows. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--lab-surface);
  color: var(--lab-text-muted);
  box-shadow: 0 0 0 1px var(--lab-border);
}
.pill--purple { background: var(--lab-purple-subtle); color: var(--lab-purple); box-shadow: none; }
.pill--success { background: var(--lab-success-subtle); color: var(--lab-success); box-shadow: none; }
.pill--warning { background: var(--lab-warning-subtle); color: var(--lab-warning); box-shadow: none; }
.pill--danger { color: var(--lab-danger); }

/* Card tiles. Card photos are 63:88, so the frame is too. Each photo sits on
   a light grey mat with a soft ring, the same frame as Most valuable on Home. */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 14px;
}
.tiles--compact { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 18px 14px; }
.tiles--compact .tile__photo { padding: 7px; }
.tiles--compact .tile__title { font-size: 13px; }
.tile__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--lab-text);
  text-decoration: none;
}
.tile__link:hover { text-decoration: none; }
.tile__link:hover .tile__title { color: var(--lab-purple); }
.tile__photo {
  position: relative;
  display: flex;
  aspect-ratio: 63 / 88;
  max-width: 100%;
  padding: 9px;
  border-radius: 8px;
  background: var(--lab-bg);
  box-shadow: inset 0 0 0 1px var(--lab-border-strong);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.tile__link:hover .tile__photo { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--lab-border-strong), 0 8px 24px rgba(17, 17, 19, 0.10); }
/* Zoomed a touch so the scanner's thin border around the card falls outside the
   frame; the card page still shows the whole photo. */
.tile__img { flex: 1; min-width: 0; overflow: hidden; border-radius: 3px; }
.tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); }
.tile__empty { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--lab-surface); }
.tile__placeholder { width: 28px; height: 28px; fill: none; stroke: var(--lab-text-faint); stroke-width: 1.4; }
.tile__photo .pill { position: absolute; left: 14px; bottom: 14px; }
.tile__owner {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lab-surface);
  box-shadow: 0 0 0 1px var(--lab-border-strong);
  color: var(--lab-text);
  font-size: 10px;
  font-weight: 600;
}
.tile__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px; }
.tile__title, .tile__set { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__title { font-size: 14px; font-weight: 500; line-height: 20px; transition: color 0.15s; }
.tile__set { font-size: 13px; line-height: 18px; color: var(--lab-text-muted); }
.tile__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.tile__value { font-size: 16px; line-height: 22px; font-weight: 500; }
.tile__gain { font-size: 12px; color: var(--lab-success); font-variant-numeric: tabular-nums; }
.tile__gain.is-down { color: var(--lab-warning); }
.tile__meta { font-size: 12px; color: var(--lab-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A pill button. */
.chip {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-surface);
  color: var(--lab-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { text-decoration: none; border-color: var(--lab-text-faint); }
.chip[aria-current="true"] { background: var(--lab-text); border-color: var(--lab-text); color: var(--lab-bg); }
/* Scans: one big call to action, then past scans as photo rows. */
.scan-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  margin-bottom: 28px;
  border-radius: 16px;
  background: var(--lab-purple-subtle);
}
.scan-hero__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.scan-hero__body { margin: 0; font-size: 14px; color: var(--lab-text-muted); max-width: 46ch; }
.scan-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.scan-hero__alt { font-size: 14px; color: var(--lab-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.batches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.batch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  color: var(--lab-text);
  text-decoration: none;
}
.batch:hover { border-color: var(--lab-border-strong); text-decoration: none; }
.batch__photos { display: flex; flex: none; min-width: 44px; }
.batch__photos img {
  width: 44px;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 5px;
  border: 2px solid var(--lab-surface);
  background: var(--lab-surface-raised);
}
.batch__photos img + img { margin-left: -18px; }
.batch__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.batch__title { font-weight: 600; font-size: 15px; }
.batch__meta { font-size: 13px; color: var(--lab-text-muted); }
.other-ways { margin-top: 32px; font-size: 14px; color: var(--lab-text-muted); }
.other-ways summary { cursor: pointer; }
.other-ways p { max-width: 52ch; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.pager__label { font-size: 13px; color: var(--lab-text-muted); }

@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tile__photo { padding: 7px; }
  .tile__photo .pill { left: 11px; bottom: 11px; padding: 2px 6px; font-size: 10px; }
  .tile__photo .ctags { left: 11px; top: 11px; right: 11px; }
  .tile__owner { right: 11px; bottom: 11px; width: 20px; height: 20px; }
  .tile__title, .tiles--compact .tile__title { font-size: 12px; }
  .tile__meta { font-size: 11px; }
  .scan-hero { flex-direction: column; align-items: stretch; text-align: left; }
  .scan-hero .btn { width: 100%; }
  .scan-hero__actions { align-items: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__photo { transition: none; }
}

/* ------------------------------------------------------------------- home */

/* Home reads top to bottom: what the collection is worth and what needs you,
   where every card is, what is valuable and wanted, what moved, what
   happened, then sales. Quiet panels; violet only for actions and the value
   line, teal for money in and done. */

.home { display: grid; gap: 18px; }
.home__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.home__row--top { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.panel {
  min-width: 0;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
}
.panel__title { margin: 0 0 12px; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.panel__meta { font-size: 12px; color: var(--lab-text-faint); }
.panel__link { font-size: 13px; }
.panel__empty { margin: 8px 0 0; font-size: 13px; color: var(--lab-text-faint); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--lab-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--lab-text-muted);
  white-space: nowrap;
}
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--lab-success); box-shadow: 0 0 0 3px var(--lab-success-subtle); }

.segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--lab-bg); border: 1px solid var(--lab-border); }
.segmented a { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--lab-text-muted); text-decoration: none; white-space: nowrap; }
.segmented a:hover { color: var(--lab-text); text-decoration: none; }
.segmented a[aria-current="true"] { background: var(--lab-surface); color: var(--lab-text); box-shadow: 0 0 0 1px var(--lab-border); }

/* Collection value */
.worth__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.worth__top .panel__title { margin: 0; }
.worth__value { margin: 4px 0 0; font-size: 36px; line-height: 44px; font-weight: 500; }
.worth__value small { margin-right: 2px; font-size: 18px; font-weight: 500; color: var(--lab-text-muted); }
.worth__change { margin: 4px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.worth__change b { font-weight: 600; color: var(--lab-success); font-variant-numeric: tabular-nums; }
.worth__change b.is-down { color: var(--lab-danger); }
.worth__line { position: relative; margin-top: 14px; min-height: 140px; }
.worth__svg { display: block; overflow: visible; }
.worth__grid { stroke: var(--lab-border); stroke-width: 1; }
.worth__stroke { fill: none; stroke: var(--lab-purple); stroke-width: 2; stroke-linejoin: round; }
.worth__fill-top { stop-color: var(--lab-purple); stop-opacity: 0.18; }
.worth__fill-bottom { stop-color: var(--lab-purple); stop-opacity: 0; }
.worth__end { fill: var(--lab-purple); stroke: var(--lab-surface); stroke-width: 3; }
.worth__cursor { stroke: var(--lab-border-strong); stroke-width: 1; }
.worth__axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--lab-text-faint); }
.worth__tip {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--lab-text);
  color: var(--lab-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.worth__tip[hidden] { display: none; }
.worth__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lab-border); font-size: 13px; color: var(--lab-text-muted); }
.meter { display: inline-flex; align-items: center; gap: 10px; }
.meter i { position: relative; width: 120px; height: 4px; border-radius: 4px; background: var(--lab-border); overflow: hidden; }
.meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--lab-purple); }

/* Needs you */
.needs { list-style: none; margin: 0; padding: 0; }
.needs li + li { border-top: 1px solid var(--lab-border); }
.needs a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 2px; color: var(--lab-text); text-decoration: none; }
.needs a:hover { text-decoration: none; }
.needs a:hover .needs__go { color: var(--lab-purple); transform: translateX(2px); }
.needs__n { padding: 4px 0; border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; background: var(--lab-purple-subtle); color: var(--lab-purple); }
.needs__n--success { background: var(--lab-success-subtle); color: var(--lab-success); }
.needs__n--warning { background: var(--lab-warning-subtle); color: var(--lab-warning); }
.needs__n--danger { background: color-mix(in srgb, var(--lab-danger) 12%, transparent); color: var(--lab-danger); }
.needs__text { min-width: 0; }
.needs__title { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.needs__note { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--lab-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs__go { color: var(--lab-text-faint); transition: transform 0.15s, color 0.15s; }

/* Where every card is */
.pipe { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; background: var(--lab-border); }
.pipe span { min-width: 6px; }
.pipe--review { background: var(--lab-text-faint); }
.pipe--price { background: var(--lab-warning); }
.pipe--list { background: color-mix(in srgb, var(--lab-purple) 45%, var(--lab-surface)); }
.pipe--listed { background: var(--lab-purple); }
.pipe--ship { background: var(--lab-success); }
.pipe--sold { background: color-mix(in srgb, var(--lab-success) 45%, var(--lab-surface)); }
.stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 14px; }
.stage { display: flex; flex-direction: column; padding: 8px 10px 4px; border-left: 1px solid var(--lab-border); color: var(--lab-text); text-decoration: none; }
.stage:first-child { border-left: 0; padding-left: 0; }
.stage:hover { text-decoration: none; }
.stage:hover .stage__n { color: var(--lab-purple); }
.stage__name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lab-text-muted); }
.stage__name i { width: 8px; height: 8px; border-radius: 2px; }
.stage__n { margin-top: 2px; font-size: 24px; line-height: 32px; font-weight: 500; transition: color 0.15s; }
.stage__note { font-size: 12px; line-height: 16px; color: var(--lab-text-muted); }

/* Most valuable: one row, as many cards as fit the width. Each photo sits
   in a dark frame, like a card in a top loader. */
.tops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  column-gap: 14px;
  overflow: hidden;
}
.top { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--lab-text); text-decoration: none; }
.top:hover { text-decoration: none; }
.top:hover .top__name { color: var(--lab-purple); }
.top__photo {
  position: relative;
  aspect-ratio: 63 / 88;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 7px;
  border-radius: 8px;
  background: var(--lab-bg);
  box-shadow: inset 0 0 0 1px var(--lab-border-strong);
}
.top__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.top__rank { position: absolute; top: 11px; right: 11px; padding: 1px 6px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--lab-border); color: #111113; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.top__photo .ctags { position: absolute; left: 11px; top: 11px; right: 36px; }
.top__name { font-size: 13px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top__price { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--lab-text-muted); }
.top__state { font-size: 12px; color: var(--lab-text-faint); }

/* Collector badges on a card photo: solid, so they read over any picture. */
.ctags { display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; }
.ctag {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(17, 17, 19, 0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ctag--yg { background: #e2261c; }
.ctag--rc { background: #111113; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.ctag--parallel { background: #7b2ff2; }
.ctag--serial { background: #0b7f86; }
.ctag--auto { background: #b0129a; }
.ctag--graded { background: #fff; color: #111113; }
.tile__photo .ctags { position: absolute; left: 14px; top: 14px; right: 14px; }

/* eBay interest */
.interest { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.interest th { padding: 0 0 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--lab-text-faint); }
.interest th:not(:first-child) { width: 76px; }
.interest td { padding: 9px 0; border-top: 1px solid var(--lab-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interest td a { color: var(--lab-text); }
.interest .r { text-align: right; }
.interest .is-hot { color: var(--lab-warning); font-weight: 600; }
.hint { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--lab-purple-subtle); font-size: 13px; }

/* Price movers */
.movers { list-style: none; margin: 0; padding: 0; }
.movers li { display: flex; flex-direction: column; }
.movers li + li { border-top: 1px solid var(--lab-border); }
.movers form { margin: -4px 0 8px; }
.movers .linkbtn { font-size: 12px; }
.movers a { display: grid; grid-template-columns: minmax(0, 1fr) 72px 56px; gap: 12px; align-items: center; padding: 9px 0; color: var(--lab-text); text-decoration: none; }
.movers a:hover { text-decoration: none; }
.movers a:hover .movers__name { color: var(--lab-purple); }
.movers__who { min-width: 0; }
.movers__name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movers__note { display: block; font-size: 12px; line-height: 16px; color: var(--lab-text-muted); }
.movers__line svg { display: block; }
.movers__stroke { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.movers__stroke.is-up { stroke: var(--lab-success); }
.movers__stroke.is-down { stroke: var(--lab-danger); }
.movers__dot.is-up { fill: var(--lab-success); }
.movers__dot.is-down { fill: var(--lab-danger); }
.movers__pct { text-align: right; font-size: 14px; line-height: 20px; font-weight: 500; }
.movers__pct.is-up { color: var(--lab-success); }
.movers__pct.is-down { color: var(--lab-danger); }

/* Activity */
.feed { position: relative; list-style: none; margin: 0; padding: 0; }
.feed::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 1px; background: var(--lab-border); }
.feed li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 0; font-size: 14px; color: var(--lab-text-muted); }
.feed i { position: relative; z-index: 1; width: 9px; height: 9px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--lab-text-faint); box-shadow: 0 0 0 3px var(--lab-surface); }
.feed--success i { background: var(--lab-success); }
.feed--purple i { background: var(--lab-purple); }
.feed b { font-weight: 500; color: var(--lab-text); }
.feed time { font-size: 12px; color: var(--lab-text-faint); white-space: nowrap; }

/* Sales and profit */
.sales { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.sales__label { margin: 0 0 8px; font-size: 12px; color: var(--lab-text-muted); }

.chart { position: relative; min-height: 168px; }
.chart__svg { display: block; overflow: visible; }
.chart__grid { stroke: var(--lab-border); stroke-width: 1; }
.chart__zero { stroke: var(--lab-border-strong); stroke-width: 1; }
.chart__tick { fill: var(--lab-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart__bar { fill: var(--lab-purple); }
.chart__bar--down { fill: var(--lab-danger); }
.chart__hit { fill: transparent; }
.chart__hit.is-active { fill: var(--lab-text); fill-opacity: 0.04; }
.chart__tip {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--lab-text);
  color: var(--lab-bg);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.chart__tip[hidden] { display: none; }
.chart__tip strong { font-size: 14px; }
.chart__tip span { opacity: 0.7; }

/* -------------------------------------------------------- inventory list */

.viewswitch { align-self: flex-start; display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--lab-surface); border: 1px solid var(--lab-border); }
.viewswitch__btn { display: flex; padding: 6px 8px; border-radius: 7px; color: var(--lab-text-muted); }
.viewswitch__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.viewswitch__btn[aria-current="true"] { background: var(--lab-text); color: var(--lab-bg); }
.rows { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--lab-surface); border: 1px solid var(--lab-border); overflow: hidden; }
.rows li + li { border-top: 1px solid var(--lab-border); }
.row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; color: var(--lab-text); text-decoration: none; }
.row:hover { background: var(--lab-surface-raised); text-decoration: none; }
.row__photo { flex: none; width: 36px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: var(--lab-surface-raised); border: 1px solid var(--lab-border); }
.row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.row__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__hint { font-weight: 400; color: var(--lab-text-faint); }
.row__meta { font-size: 12px; color: var(--lab-text-faint); }
.row__value { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Inventory: the summary, the filter panel, then cards or category cards. */
.inv { display: flex; flex-direction: column; gap: 18px; }
.inv-summary { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 28px; align-items: start; }
.inv-summary .panel__title { margin-bottom: 4px; }
.inv-summary__value { margin: 0; font-size: 32px; line-height: 40px; font-weight: 500; }
.inv-summary__gain { margin: 2px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.inv-summary__gain b { font-weight: 500; color: var(--lab-success); }
.inv-summary__gain b.is-down { color: var(--lab-warning); }
.inv-summary__stages { min-width: 0; padding-top: 6px; }
.inv-summary .stages { margin-top: 12px; }
.inv-summary .stage { padding-bottom: 2px; }
.inv-summary .stage[aria-current="true"] .stage__n { color: var(--lab-purple); }
.inv-summary .stage[aria-current="true"] .stage__name { color: var(--lab-text); font-weight: 500; }

.inv-filters { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.inv-filters__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.inv-filters__search {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-surface-raised);
  color: var(--lab-text);
  font: inherit;
  font-size: 14px;
}
.inv-filters__views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-filters__label { font-size: 12px; color: var(--lab-text-muted); }
.inv-filters .segmented a { padding: 5px 12px; font-size: 13px; }
.inv-filters .viewswitch { align-self: center; margin-left: 4px; }
.inv-filters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.inv-filters__set { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-filters__clear { font-size: 13px; }
.inv-filters__sort { margin-left: auto; }
.inv-filters.is-auto .inv-filters__apply { display: none; }

/* A filter chip: a checkbox label, a menu or a link, all one shape. */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-surface);
  color: var(--lab-text);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.fchip:hover { border-color: var(--lab-text-faint); text-decoration: none; }
.fchip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fchip:has(input:checked), .fchip.is-on { background-color: var(--lab-purple-subtle); border-color: var(--lab-purple); color: var(--lab-purple); }
.fchip:has(input:focus-visible) { outline: 2px solid var(--lab-purple); outline-offset: 2px; }
/* Its own chevron, so the arrow sits inside the pill with room to the edge. */
.fchip--select {
  flex: none;
  width: auto;
  padding: 0 30px 0 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236f6f78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.fchip--remove::after { content: "×"; font-size: 15px; opacity: 0.7; }

.inv-result { margin: 0; padding: 0 2px; font-size: 13px; color: var(--lab-text-muted); }
.inv-result b { font-weight: 500; color: var(--lab-text); }

/* Category cards: a fanned stack of the group's top photos beside its totals. */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cat { display: flex; gap: 18px; height: 100%; padding: 16px 18px; border-radius: 10px; background: var(--lab-surface); border: 1px solid var(--lab-border); color: var(--lab-text); text-decoration: none; transition: border-color 0.15s; }
.cat:hover { border-color: var(--lab-purple); text-decoration: none; }
.cat--rest { background: transparent; border-style: dashed; }
/* align-self keeps the card's shape: stretched to the row's height, the stack
   grew taller than a card whenever the name wrapped. */
.cat__stack { position: relative; flex: none; align-self: flex-start; width: 76px; aspect-ratio: 63 / 88; margin-left: 4px; }
.cat__photo { position: absolute; inset: 0; padding: 5px; border-radius: 6px; background: var(--lab-bg); box-shadow: inset 0 0 0 1px var(--lab-border-strong); }
.cat__photo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
.cat__photo:nth-last-child(3) { transform: rotate(-7deg) translateX(-6px); opacity: 0.6; }
.cat__photo:nth-last-child(2) { transform: rotate(4deg) translateX(5px); opacity: 0.85; }
.cat__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat__name { font-size: 16px; line-height: 22px; font-weight: 500; }
.cat__count { font-size: 13px; color: var(--lab-text-muted); }
.cat__mix { display: flex; flex-wrap: wrap; gap: 4px; }
.cat__mix span { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--lab-border); font-size: 11px; color: var(--lab-text-muted); }
/* The value sits with the name and count, so it never floats below a gap
   when a group has fewer tags than its neighbours. */
.cat__value { margin: 2px 0 1px; font-size: 20px; line-height: 26px; font-weight: 500; }
.cat__mix { margin-top: 4px; }

@media (max-width: 900px) {
  .inv-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inv-summary .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .inv-summary .stage:nth-child(4) { border-left: 0; padding-left: 0; }
  .inv-filters__sort { margin-left: 0; }
  /* iOS zooms into fields under 16px. */
  .inv-filters__search, .fchip--select { font-size: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .tiles--compact { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

@media (max-width: 1100px) {
  .home__row, .home__row--top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .stage:nth-child(4) { border-left: 0; padding-left: 0; }
  .tops { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .sales { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .row { gap: 10px; padding: 10px 12px; }
  .row .pill { padding: 2px 6px; font-size: 10px; }
  .worth__value { font-size: 30px; line-height: 38px; }
  .stage__n { font-size: 20px; line-height: 28px; }
}

/* -------------------------------------------------------------- card pages
   One card, photo first: the card detail and review screens. */

.cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cardpage {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.cardpage__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The detail page stops growing on wide screens; past this, panels only got
   emptier, not more useful. */
.cardpage--detail { max-width: 1240px; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.cardpage__notes { margin: 12px 0 0; font-size: 14px; }

.gallery { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The photo sits on a white mat, inset on every side, so the rounded frame
   reads as a deliberate border rather than gaps around the image. */
.gallery__main {
  display: block;
  aspect-ratio: 63 / 88;
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
.gallery__main--empty { display: flex; align-items: center; justify-content: center; color: var(--lab-text-faint); font-size: 14px; }
.gallery__thumbs { display: flex; gap: 10px; }
.gallery__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lab-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.gallery__thumb img {
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--lab-surface);
}
.gallery__thumb[aria-pressed="true"] { color: var(--lab-text); font-weight: 600; }
.gallery__thumb[aria-pressed="true"] img { border-color: var(--lab-purple); }
.photo-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-left: 3px solid var(--lab-warning);
  font-size: 13px;
  line-height: 1.45;
  color: var(--lab-text-muted);
  overflow-wrap: break-word;
}
.photo-note strong { color: var(--lab-text); }

/* A photo with something to check gets a small "i" on its thumbnail; the
   note itself opens in a popover rather than sitting under the gallery. */
.gallery__item { position: relative; }
.photoflag {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--lab-bg);
  background: var(--lab-warning);
  color: #fff;
  font: 600 12px/1 var(--font-display);
  font-style: italic;
  cursor: pointer;
}
.gallery__lead { position: relative; }
.gallery__lead .photoflag { top: 10px; right: 10px; width: 26px; height: 26px; font-size: 14px; }
.photoflag:hover { filter: brightness(1.1); }
.flagpop {
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid var(--lab-border);
  border-radius: 14px;
  background: var(--lab-surface);
  color: var(--lab-text);
  box-shadow: 0 24px 60px rgba(17, 17, 19, 0.18);
}
.flagpop::backdrop { background: rgba(10, 10, 11, 0.25); }
.flagpop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.flagpop__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.flagpop__text { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--lab-text-muted); }
.flagpop__text:last-child { margin-bottom: 0; }
.flagpop__close { min-height: 28px; padding: 0 10px; font-size: 13px; }

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel__head .panel__title { margin: 0; }

/* The value panel: the price on the same black-to-violet feature panel as
   Home's collection value, with the supporting numbers on white beneath it. */
.valuehero {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--lab-border);
  background: var(--lab-surface);
}
/* On the card page the price is a light violet block set inside the white
   panel, outlined in the deeper violet, with a margin of white around it. */
.valuehero__top { padding: 22px 24px 20px; }
.valuehero .valuehero__top {
  margin: 8px 8px 0;
  padding: 18px 20px 16px;
  border-radius: 11px;
  border: 1.5px solid var(--lab-purple);
  background: var(--lab-purple-subtle);
  color: var(--lab-text);
  text-align: left;
}
.valuehero .valuehero__top .eyebrow, .valuehero .valuehero__top .valuehero__note { color: var(--lab-text-muted); }
.valuehero p { margin: 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lab-text-muted);
}
.valuehero__value {
  margin-top: 4px !important;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.valuehero__note { margin-top: 6px !important; font-size: 13px; color: var(--lab-text-muted); }
/* Cost, gain and range sit together under the value, left-aligned, rather
   than pushed to the panel's far edge where the eye never reaches them. */
.valuehero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 16px 24px 18px;
}
.valuehero__stats dt { font-size: 12px; color: var(--lab-text-muted); }
.valuehero__stats dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.valuehero__stats .is-empty { font-weight: 500; color: var(--lab-text-faint); }
.valuehero__sub { white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--lab-text-muted); }
.valuehero__stats .is-empty a { font-size: 13px; }
.soldbox p { margin: 0; }
.soldbox { border-color: var(--lab-success); background: var(--lab-success-subtle); }

/* What the card is and where it is, as two spec sheets side by side. Label
   left, value right, one per line: a short column scans faster than a wide
   grid that stretches five words across a 1600px screen. */
.specgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.specgrid__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.specs { margin: 0; }
.specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--lab-border);
}
.specs > div:first-child { border-top: 0; padding-top: 2px; }
.specs dt { flex: none; font-size: 13px; color: var(--lab-text-muted); }
.specs dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.specs .is-empty { font-weight: 400; color: var(--lab-text-faint); }

/* The system's own view of the card: SKU, state, stock counts. Always shown,
   but quiet: one line of small mono chips at the foot of the page. */
.recordbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 2px 0;
  font-size: 12px;
  color: var(--lab-text-muted);
}
.recordbar__title { margin-right: 4px; }
.recordbar__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lab-surface);
  box-shadow: 0 0 0 1px var(--lab-border);
  max-width: 100%;
}
.recordbar__item b { min-width: 0; overflow-wrap: anywhere; font-weight: 500; color: var(--lab-text); font-family: var(--font-mono); font-size: 11.5px; }

.is-up { color: var(--lab-success); }
.is-down { color: var(--lab-danger); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 20px; margin: 0; }
.facts dt { font-size: 12px; color: var(--lab-text-faint); }
.facts dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.facts--small dd { font-size: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.techbox { font-size: 13px; color: var(--lab-text-muted); }
.techbox summary { cursor: pointer; padding: 4px 2px; }
.techbox .facts { margin-top: 12px; }

/* Review: each suggestion is a big tappable choice. */
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.choice:hover { border-color: var(--lab-text-faint); }
.choice:has(input:checked) { border-color: var(--lab-purple); background: var(--lab-purple-subtle); box-shadow: 0 0 0 1px var(--lab-purple); }
.choice input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--lab-purple); }
.choice__img { flex: none; width: 44px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--lab-surface-raised); }
.choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.choice__meta { font-size: 13px; color: var(--lab-text-muted); }
.choice__notes { display: block; margin-top: 4px; font-size: 12px; color: var(--lab-text-muted); opacity: .85; }
.choice .tags { margin-top: 6px; }
.decide { margin-top: 8px; }
.decide__other { margin-top: 10px; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--lab-text-muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--lab-text); }
.byhand { padding: 0; }
.byhand__summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.byhand__summary::-webkit-details-marker { display: none; }
.byhand__summary .panel__title { margin: 0; }
.byhand__summary .panel__title::before { content: "+ "; color: var(--lab-text-faint); }
.byhand[open] .byhand__summary .panel__title::before { content: "− "; }
.byhand__hint { font-size: 13px; color: var(--lab-text-faint); }
.byhand__body { padding: 0 18px 18px; }

@media (max-width: 900px) {
  .cardpage { grid-template-columns: 1fr; }
  .gallery { position: static; }
  /* A price check answers "what's it worth?": on a phone the value comes
     first and the photo, already seen in the scanner, follows it. */
  .cardpage--check .gallery { order: 2; }
  .gallery__main, .gallery__lead { width: 100%; max-width: 300px; margin: 0 auto; }
  .gallery__lead .gallery__main { max-width: none; }
  .gallery__thumbs { justify-content: center; }
}
@media (max-width: 1180px) {
  .specgrid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .valuehero__top { padding: 18px 18px 16px; }
  .valuehero__stats { padding: 14px 18px 16px; }
  .valuehero__value { font-size: 40px; }
  .gallery__main, .gallery__lead { max-width: 240px; }
  .gallery__lead .gallery__main { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .choice, .btn--primary { transition: none; }
}

/* -- Listing preview ------------------------------------------------------ */
.checks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks__list + .checks__list { margin-top: 8px; }
.checks__item { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.checks__item::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; }
.checks__item--block::before { background: var(--lab-danger); }
.checks__item--warn::before { background: var(--lab-warning); }
.checks__ok { margin: 0; color: var(--lab-success); }
.checks__ok + .checks__list { margin-top: 12px; }
.checks__setup { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--lab-border); font-size: 13px; color: var(--lab-text-muted); }

.condpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.condpick__opt {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--lab-border); border-radius: 10px; background: var(--lab-surface);
  color: var(--lab-text); font: inherit; cursor: pointer;
}
.condpick__opt:hover { border-color: var(--lab-text-faint); }
.condpick__opt[aria-pressed="true"] { border-color: var(--lab-purple); background: var(--lab-purple-subtle); box-shadow: 0 0 0 1px var(--lab-purple); }
.condpick__label { font-size: 14px; font-weight: 600; }
.condpick__hint { font-size: 12px; color: var(--lab-text-muted); line-height: 1.35; }

.ebay__kicker { margin: 0 0 6px; font-size: 12px; color: var(--lab-text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.ebay__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ebay__price { margin: 10px 0 14px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.ebay__lines { margin: 0; display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--lab-border); }
.ebay__lines div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 14px; }
/* Item specifics read as a table, two pairs a row, like eBay's own. */
.ebay__specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--lab-border);
}
.ebay__specs div {
  display: grid;
  grid-template-columns: minmax(110px, 40%) 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--lab-border);
}
@media (max-width: 720px) { .ebay__specs { grid-template-columns: 1fr; } }
.ebay dt { color: var(--lab-text-muted); }
.ebay dd { margin: 0; overflow-wrap: anywhere; }
.ebay__sub { margin: 18px 0 10px; font-size: 15px; font-weight: 600; }
.ebay__desc { font-size: 14px; line-height: 1.55; color: var(--lab-text); }
.ebay__desc h2 { font-size: 16px; margin: 0 0 8px; }
.ebay__desc p { margin: 0 0 8px; }
.ebay__desc table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.ebay__desc th, .ebay__desc td { text-align: left; padding: 4px 16px 4px 0; vertical-align: top; }
.ebay__desc th { font-weight: 500; color: var(--lab-text-muted); }

.editlisting__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.editlisting__actions { display: flex; gap: 8px; }
.field__count { float: right; font-weight: 400; color: var(--lab-text-faint); }
.check { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; font-size: 14px; }
.check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--lab-purple); }
.rebuild { margin-top: -4px; }

@media (max-width: 620px) {
  .editlisting__row { grid-template-columns: 1fr; }
  .ebay__lines div, .ebay__specs div { grid-template-columns: 110px 1fr; }
}
.panel__note { margin-left: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--lab-text-muted); }
.ebay__note { color: var(--lab-text-muted); font-size: 13px; }



/* -- Channels ---------------------------------------------------------------- */
.channel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.channel__name { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.channel__meta { margin: 4px 0 0; font-size: 14px; color: var(--lab-text-muted); }
.channel__note { margin: 16px 0 0; font-size: 14px; color: var(--lab-text-muted); overflow-wrap: anywhere; }
.channel__actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.endlisting > summary { list-style: none; cursor: pointer; }
.endlisting > summary::-webkit-details-marker { display: none; }
.endlisting[open] { flex-basis: 100%; }
.cardpage .channel__actions { flex-wrap: wrap; }
.channel + .techbox { margin-top: 16px; }

.legal { max-width: 680px; margin: 0 auto; padding: 48px 16px; font-size: 15px; line-height: 1.6; }
.legal h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 16px; }
.legal h2 { font-size: 17px; margin: 28px 0 8px; }

/* eBay store setup */
.store { margin-top: 16px; }
.store__facts { margin-top: 16px; }
.store__edit { margin-top: 16px; }
.store__edit > summary { list-style: none; display: inline-flex; }
.store__edit > summary::-webkit-details-marker { display: none; }
.store__edit[open] > summary { display: none; }
.store__form { max-width: 560px; }
.store__returns { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.store__row { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 12px; }
@media (max-width: 640px) { .store__row { grid-template-columns: 1fr; } }
.store .notice { margin-top: 16px; }
.store__tier { border: 0; padding: 0; margin: 0 0 16px; }
.store__pair { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; }
.store__pair .field { margin-bottom: 4px; }
.store__toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.store__toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lab-purple); }
.store__from { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.store__from input { width: 72px; }
@media (max-width: 640px) { .store__pair { grid-template-columns: 1fr; } }

/* Listing page: photos, then the work, then the eBay preview. On wide screens
   the preview gets its own column instead of sitting under everything. */
.cardpage--listing { max-width: 1240px; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.listwork, .listpreview { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1440px) {
  .cardpage--listing { max-width: 1840px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .cardpage--listing .cardpage__info {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px; align-items: start;
  }
  .listpreview { position: sticky; top: 24px; }
}
.listside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The price box sits under the photos here, so a sticky gallery would slide
   over it on scroll. The photos scroll with the column instead. */
.listside .gallery { position: static; }
.listside .valuehero__value.is-empty { font-size: 28px; color: var(--lab-text-muted); }
.listside .valuehero__stats dd { font-size: 15px; }
.checks__label { margin: 16px 0 8px; }
.checks__list + .checks__label { margin-top: 16px; }
.checks__note { margin: 0; font-size: 14px; color: var(--lab-text-muted); }
.checks--ok .panel__head { margin-bottom: 4px; }
@media (max-width: 900px) { .cardpage--listing { grid-template-columns: minmax(0, 1fr); } }
.pricebox__row { display: flex; gap: 10px; align-items: stretch; }
.pricebox__input {
  display: flex; align-items: center; gap: 6px; flex: 0 1 240px; white-space: nowrap;
  padding: 0 12px; border: 1px solid var(--lab-border-strong); border-radius: var(--lab-radius);
  background: var(--lab-surface); font-size: 20px; font-weight: 600;
}
.pricebox__input span { color: var(--lab-text-muted); }
.pricebox__input input { border: 0; padding: 8px 0; font-size: 20px; font-weight: 600; min-width: 0; flex: 1; background: transparent; box-shadow: none; }
.pricebox__input input:focus { outline: none; }
.pricebox__input:focus-within { border-color: var(--lab-purple); box-shadow: 0 0 0 1px var(--lab-purple); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pick {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--lab-border-strong); border-radius: var(--lab-radius);
  background: var(--lab-surface); color: var(--lab-text); font: inherit;
}
.pick:hover { border-color: var(--lab-purple); background: var(--lab-purple-subtle); }
.pick__label { font-size: 12px; color: var(--lab-text-muted); }
.pick__amount { font-size: 16px; font-weight: 600; }
.pick__note { font-size: 12px; color: var(--lab-text-faint); }
.pricebox__market { margin: 12px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.pricebox__offers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lab-border); }
.pricebox__offers .check { margin: 0; }
.pricebox__floor { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pricebox__money { display: inline-flex; align-items: center; gap: 4px; }
.pricebox__money input { width: 90px; }
.pricebox__steps { display: flex; gap: 6px; }
.pricebox__steps .chip { cursor: pointer; font: inherit; font-size: 13px; }
.pricebox .field__hint { margin: 8px 0 0; }
.hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--lab-purple); background: var(--lab-purple-subtle); }
.hint__text { margin: 0; font-size: 14px; flex: 1 1 320px; }
.editlisting__flags { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 4px; }
.editlisting__flags .check { margin: 0; }
.editlisting .field__hint { margin: 6px 0 16px; }

/* -- Orders ---------------------------------------------------------------- */
.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.order { display: flex; flex-direction: column; gap: 16px; }
.order__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order__when { font-size: 13px; color: var(--lab-text-muted); }
.order__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.order__item { display: flex; align-items: center; gap: 12px; }
.order__thumb img { display: block; width: 44px; height: 60px; object-fit: cover; border-radius: 4px; }
.order__title { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.order__title a { color: inherit; text-decoration: none; }
.order__title .mono { font-size: 12px; font-weight: 400; color: var(--lab-text-muted); }
.order__price { font-weight: 600; white-space: nowrap; }
.order__grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.order__label { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--lab-text-muted); }
.order__address { font-style: normal; line-height: 1.5; user-select: all; }
.order__note { margin: 8px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.order__money { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 160px; }
.order__money div { display: flex; justify-content: space-between; gap: 16px; }
.order__money dt { color: var(--lab-text-muted); }
.order__money dd { margin: 0; font-variant-numeric: tabular-nums; }
.order__net { padding-top: 4px; margin-top: 2px; border-top: 1px solid var(--lab-border); font-weight: 600; }
.order__net dt { color: inherit; }
.order__review { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.order__review p { margin: 0; }
.order__ship { display: flex; gap: 8px; flex-wrap: wrap; }
.order__ship input { flex: 1; min-width: 160px; }
@media (max-width: 520px) { .order__grid { grid-template-columns: 1fr; } }
.order__ship select { flex: 0 0 auto; width: auto; }
.order__print { margin-top: 10px; }

/* -- Valuations ------------------------------------------------------------ */

.row__note { flex: none; font-size: 12px; color: var(--lab-text-faint); }
.row__value--soft { color: var(--lab-text-muted); font-weight: 500; }
.row__value { min-width: 56px; text-align: right; }
.rows--prices .pill { min-width: 104px; justify-content: center; }
.rows--prices .row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .rows--prices .row__note, .rows--prices .row__meta .mono { display: none; }
  .rows--prices .pill { min-width: 0; }
}

/* Pricing a card: the suggestion and its approval on the left, the sales it
   came from on the right. */
.pricepage { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pricepage__side, .pricepage__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.valuehero__currency { font-size: 15px; font-weight: 500; color: var(--lab-text-muted); }
.pricepage__approved { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.pricepage__approved strong { font-size: 22px; }
.pricepage__approved span { font-size: 12px; color: var(--lab-text-faint); }
.pricepage__method { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 14px; }
.pricepage__method .field { flex: 1 1 100%; }
.pricepage__explain { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--lab-text-muted); }
.panel > .pricepage__explain:last-child { margin: 12px 0 0; }
.panel .table-wrap { margin: 0 -20px -18px; border-top: 1px solid var(--lab-border); }
.panel .table th:first-child, .panel .table td:first-child { padding-left: 20px; }
.panel .table th:last-child, .panel .table td:last-child { padding-right: 20px; }
.panel .empty { padding: 32px 12px 16px; }
.table__sub { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--lab-text-faint); }
.table__sub--block { display: block; margin: 4px 0 0; }
.comps__date { white-space: nowrap; color: var(--lab-text-muted); }
.comps__price { white-space: nowrap; font-weight: 600; }
.comps__title { min-width: 180px; }
.table__sub.is-sale { color: var(--lab-success); }
.comps__action { text-align: right; }
.comp--excluded td { opacity: 0.55; }
.comp--excluded .comps__title > span { text-decoration: line-through; }

@media (max-width: 900px) {
  .pricepage { grid-template-columns: 1fr; }
}
.profile { max-width: 520px; }
/* ------------------------------------------------------------ price check
   The raw value leads in the card page's value panel; the grades a slab
   would fetch sit beneath as tiles, two across even on a phone, so PSA 10
   and PSA 9 read side by side. */

.grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grade {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--lab-border);
  background: var(--lab-surface-raised);
}
.grade p { margin: 0; }
.grade__value {
  margin-top: 2px !important;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.grade--empty .grade__value { color: var(--lab-text-faint); }
.grade__meta { margin-top: 2px !important; font-size: 13px; color: var(--lab-text-muted); }
.grade__note { margin-top: 6px !important; font-size: 12px; color: var(--lab-warning); }
/* A file input wrapped in a button-styled label: the label is the target. */
label.btn { cursor: pointer; }
label.btn:focus-within { outline: 2px solid var(--lab-purple); outline-offset: 2px; }
/* A row that is a form button rather than a link. */
button.row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.rows .badge { flex: none; }

/* A count beside each tab on Listings and Valuations. */
.segmented__n { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--lab-text-faint); }
.segmented a[aria-current="true"] .segmented__n { color: var(--lab-text-muted); }

/* Settings */
.settings { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.settings__note { margin: 0 0 16px; color: var(--lab-text-muted); }
.settings__scan .row__text { flex: 1; min-width: 0; }
.settings__scan .row__note { color: var(--lab-text-muted); font-size: 13px; text-align: right; max-width: 280px; }
.settings__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; margin-bottom: 20px; }
.settings__list { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.settings__confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.settings__confirm .field { margin-bottom: 0; flex: 0 1 280px; }
.settings__danger { border-color: color-mix(in srgb, var(--lab-danger) 35%, var(--lab-border)); }
.btn--danger { color: var(--lab-danger); }
.btn--danger:hover { border-color: var(--lab-danger); }
.btn--danger-solid { background: var(--lab-danger); border-color: var(--lab-danger); color: #fff; }
.btn--danger-solid:hover { background: color-mix(in srgb, var(--lab-danger) 85%, #000); }
.cardpage__delete { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--lab-text-muted); font-size: 13px; }

/* Storage */
.storage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.storage__main, .storage__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.storage__row { padding-left: calc(16px + var(--depth, 0) * 24px); }
.storage__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--lab-purple) 10%, transparent); color: var(--lab-purple); }
.storage__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.storage__count { flex: none; white-space: nowrap; }
.storage__row .row__value { min-width: 72px; text-align: right; }
.storage__stats { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.storage__stats .eyebrow { margin: 0 0 4px; }
.storage__big { margin: 0; font-size: 28px; line-height: 34px; font-weight: 500; }
.storage__cards { border: 0; border-radius: 0; margin: 0 -20px; }
.storage__cards .row { gap: 12px; }
.storage__cards input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--lab-purple); }
.storage__cards a { color: inherit; text-decoration: none; }
.storage__move { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.storage__move .field__label { margin: 0; }
.storage__move select { flex: 1 1 200px; max-width: 360px; }
.storage__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.storage__form .btn { width: 100%; }
.storage__edit summary { cursor: pointer; list-style: none; }
.storage__edit summary::-webkit-details-marker { display: none; }
.storage__edit summary::after { content: "Show"; float: right; font-size: 13px; font-weight: 400; color: var(--lab-text-muted); }
.storage__edit[open] summary { margin-bottom: 16px; }
.storage__edit[open] summary::after { content: "Hide"; }
.storage__delete { margin-top: 12px; }
@media (max-width: 960px) {
  .storage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .storage__row .row__value { min-width: 0; }
  .storage__count { display: none; }
}
.stored { display: flex; justify-content: flex-end; gap: 8px; }
.stored select { max-width: 220px; min-height: 30px; padding: 2px 8px; font-size: 14px; text-align: right; }
.stored.is-auto .btn { display: none; }
.order__where { font-size: 12px; font-weight: 500; color: var(--lab-purple); }
.batchbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.batchbox .field__label { margin: 0; }
.batchbox select { flex: 1 1 200px; }
.batchbox .field__hint { flex-basis: 100%; }

/* Card page: correcting the card's details in place. */
.cardedit { margin: 4px 0 12px; }
.cardedit > summary { list-style: none; display: inline-block; }
.cardedit > summary::-webkit-details-marker { display: none; }
.cardedit[data-hint="team"] > summary { color: var(--lab-purple); }
.cardedit__form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lab-border); }
.cardedit__form .editlisting__flags { margin-bottom: 12px; }
.cardedit__form .field__hint { margin: 0 0 12px; }

/* -------------------------------------------------------------- analytics
   One lens over every panel: the chips up top are the filters, each row
   drills in. Violet is the collection (value, cards); teal is money that
   came in (sales). Bars sit on a hairline track so short ones still read. */

.an { display: grid; gap: 18px; }

.an-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; }
.an-lens__label { color: var(--lab-text); font-weight: 500; }
.an-lens__hint { color: var(--lab-text-faint); }
.an-lens__clear { margin-left: 2px; }
.an-lens__cards { margin-left: auto; }
.an-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 11px; border-radius: 999px;
  background: var(--lab-purple-subtle); color: var(--lab-purple);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lab-purple) 35%, transparent);
  font-weight: 500;
}
.an-chip span { font-size: 15px; line-height: 1; opacity: 0.6; }
.an-chip:hover { text-decoration: none; }
.an-chip:hover span { opacity: 1; }

.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0; }
.an-kpi { min-width: 0; padding: 2px 20px; border-left: 1px solid var(--lab-border); }
.an-kpi:first-child { border-left: 0; }
.an-kpi p { margin: 0; }
.an-kpi__label { font-size: 13px; color: var(--lab-text-muted); }
.an-kpi__value { margin-top: 2px !important; font-size: 28px; line-height: 36px; font-weight: 500; }
.an-kpi__value.is-up { color: var(--lab-success); }
.an-kpi__value.is-down { color: var(--lab-danger); }
.an-kpi__value.is-muted { color: var(--lab-text-faint); }
.an-kpi__note { font-size: 12px; line-height: 16px; color: var(--lab-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.an-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.an-head .panel__title { margin: 0; }
.an-head__titles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.an-rank { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--lab-text-faint); }
.an-foot { margin: 12px 0 0; font-size: 12px; color: var(--lab-text-faint); }
.an-lead { margin: -4px 0 12px; font-size: 14px; color: var(--lab-text-muted); }
.an-lead b { color: var(--lab-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* A bar on a hairline track; --w is its share of the longest row. */
.an-row__bar, .an-bands__bar, .an-traits__bar, .an-sales__bar { position: relative; height: 8px; border-radius: 4px; background: var(--lab-border); overflow: hidden; }
.an-row__bar i, .an-bands__bar i, .an-traits__bar i, .an-sales__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 2px; border-radius: 4px; background: var(--lab-purple); transition: width 0.3s; }
.an-sales__bar i { background: var(--lab-success); }
.an-bands__bar.is-muted i { background: var(--lab-text-faint); }

/* The breakdown */
.an-rows { list-style: none; margin: 0; padding: 0; }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; }
.an-row + .an-row { border-top: 1px solid var(--lab-border); }
.an-row__main {
  display: grid; grid-template-columns: 22px 26px minmax(0, 1.2fr) minmax(80px, 1fr) 84px 44px;
  gap: 12px; align-items: center; padding: 8px 6px 8px 0; border-radius: 6px;
  color: var(--lab-text); text-decoration: none;
}
a.an-row__main:hover { text-decoration: none; background: var(--lab-surface-raised); }
a.an-row__main:hover .an-row__name { color: var(--lab-purple); }
a.an-row__main:hover .an-row__bar i { background: var(--lab-purple-hover); }
.an-row__rank { font-size: 12px; color: var(--lab-text-faint); text-align: right; }
.an-row__photo { width: 26px; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: var(--lab-bg); box-shadow: inset 0 0 0 1px var(--lab-border); }
.an-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.an-row__text { min-width: 0; }
.an-row__name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.an-row__note { display: block; font-size: 12px; line-height: 16px; color: var(--lab-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row__value { font-size: 15px; font-weight: 500; text-align: right; }
.an-row__share { font-size: 12px; color: var(--lab-text-faint); text-align: right; }
.an-row__cards { display: flex; justify-content: center; padding: 8px 0; color: var(--lab-text-faint); }
.an-row__cards svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.an-row__cards:hover { color: var(--lab-purple); }
.an-row--other .an-row__name { color: var(--lab-text-muted); font-weight: 400; }
.an-row--other .an-row__photo { visibility: hidden; }

/* Value bands and traits */
.an-bands, .an-traits { list-style: none; margin: 0; padding: 0; }
.an-bands a, .an-traits a, .an-traits li > span {
  display: grid; gap: 12px; align-items: center; padding: 8px 0;
  color: var(--lab-text); text-decoration: none;
}
.an-bands li + li, .an-traits li + li { border-top: 1px solid var(--lab-border); }
.an-bands a { grid-template-columns: 104px minmax(0, 1fr) 40px 40px; }
.an-traits a, .an-traits li > span { grid-template-columns: 112px minmax(0, 1fr) 72px 40px; }
.an-bands a:hover, .an-traits a:hover { text-decoration: none; }
.an-bands a:hover .an-bands__label, .an-traits a:hover .an-traits__label { color: var(--lab-purple); }
.an-bands__label, .an-traits__label { font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: color 0.15s; }
.an-traits__label small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--lab-text-faint); }
.an-bands__n, .an-traits__avg { font-size: 14px; font-weight: 500; text-align: right; }
.an-bands__share, .an-traits__x { font-size: 12px; color: var(--lab-text-faint); text-align: right; }
.an-traits__x { color: var(--lab-purple); font-weight: 600; }

/* Each set's best card */
.an-sets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-auto-rows: 0; grid-template-rows: auto; column-gap: 14px; overflow: hidden;
}
.an-set { display: flex; flex-direction: column; min-width: 0; color: var(--lab-text); text-decoration: none; }
.an-set:hover { text-decoration: none; }
.an-set:hover .an-set__name { color: var(--lab-purple); }
.an-set .top__photo .ctags { right: 11px; }
.an-set__set { font-size: 11px; line-height: 16px; font-family: var(--font-mono); color: var(--lab-text-faint); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-set__name { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.an-set__price { font-size: 14px; line-height: 20px; font-weight: 500; }
.an-set__note { font-size: 12px; color: var(--lab-text-faint); }

/* Listed the longest */
.an-slow a { grid-template-columns: minmax(0, 1fr) auto; }
.an-slow__days { font-size: 16px; font-weight: 500; text-align: right; }
.an-slow__days small { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--lab-text-faint); }

/* What sells */
.an-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--lab-border); border-bottom: 1px solid var(--lab-border); }
.an-stats div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--lab-border); }
.an-stats div:first-child { border-left: 0; padding-left: 0; }
.an-stats dt { font-size: 12px; color: var(--lab-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-stats dd { margin: 2px 0 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.an-stats dd.is-down { color: var(--lab-danger); }
.an-sold { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.chart--teal .chart__bar { fill: var(--lab-success); }
.an-sales { list-style: none; margin: 0; padding: 0; }
.an-sales li + li { border-top: 1px solid var(--lab-border); }
.an-sales a, .an-sales li > span { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(48px, 1fr) 72px; gap: 12px; align-items: center; padding: 7px 0; color: var(--lab-text); text-decoration: none; }
.an-sales a:hover { text-decoration: none; }
.an-sales a:hover .an-sales__name { color: var(--lab-purple); }
.an-sales__text { min-width: 0; }
.an-sales__name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-sales__note { display: block; font-size: 12px; line-height: 16px; color: var(--lab-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-sales__value { font-size: 14px; font-weight: 500; text-align: right; }

@media (max-width: 1100px) {
  .an-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
  .an-stats div:nth-child(5) { border-left: 0; padding-left: 0; }
  .an-sold { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .an-kpi:nth-child(3) { border-left: 0; }
}
@media (max-width: 620px) {
  .an-lens__cards { margin-left: 0; width: 100%; }
  .an-head .segmented, .an-rank { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .an-rank > span:first-child { display: none; }
  .an-sales a, .an-sales li > span { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 6px; }
  .an-sales__bar { grid-column: 1 / 3; grid-row: 2; height: 6px; }
  /* Two rows of set cards, not one. */
  .an-sets { grid-auto-rows: auto; row-gap: 18px; }
  .an-set:nth-child(n + 5) { display: none; }
  .an-kpi { padding: 2px 14px; }
  .an-kpi__value { font-size: 22px; line-height: 30px; }
  .an-row__main { grid-template-columns: 26px minmax(0, 1fr) 74px; gap: 10px; }
  .an-row__rank, .an-row__share { display: none; }
  .an-row__bar { grid-column: 2 / 4; grid-row: 2; height: 6px; margin-top: -2px; }
  .an-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .an-stats div:nth-child(5) { border-left: 0; }
  .an-stats div:nth-child(even) { border-left: 1px solid var(--lab-border); padding-left: 12px; }
  .an-bands a { grid-template-columns: 92px minmax(0, 1fr) 32px 36px; gap: 10px; }
  .an-traits a, .an-traits li > span { grid-template-columns: 96px minmax(0, 1fr) 64px 34px; gap: 10px; }
  .an-sets { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* -------------------------------------------------------- bundle these
   Suggested lots: the title and price up top, the cards as a strip of
   small photos. Shares the Analytics summary row. */

.bundle__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.bundle__titles { min-width: 0; }
.bundle__titles .panel__title { margin: 2px 0 0; }
.bundle__theme { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lab-purple); }
.bundle__meta { margin: 2px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.bundle__price { display: flex; flex-direction: column; align-items: flex-end; flex: none; padding: 8px 14px; border-radius: 8px; background: var(--lab-purple-subtle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lab-purple) 35%, transparent); }
.bundle__ask { font-size: 24px; line-height: 30px; font-weight: 500; color: var(--lab-text); }
.bundle__ask-note { font-size: 12px; color: var(--lab-text-muted); }
.bundle__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 12px; list-style: none; margin: 0; padding: 0; }
.bundle__card { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--lab-text); text-decoration: none; }
.bundle__card:hover { text-decoration: none; }
.bundle__card:hover .bundle__name { color: var(--lab-purple); }
.bundle__photo { position: relative; aspect-ratio: 63 / 88; margin-bottom: 6px; padding: 5px; border-radius: 6px; background: var(--lab-bg); box-shadow: inset 0 0 0 1px var(--lab-border-strong); }
.bundle__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.bundle__photo .ctags { position: absolute; left: 8px; top: 8px; right: 8px; }
.bundle__photo .ctag { font-size: 9px; }
.bundle__name { font-size: 12px; line-height: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle__value { font-size: 12px; color: var(--lab-text-muted); }
.bundle__value small { font-family: var(--font-sans); color: var(--lab-warning); }
.bundle__left { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bundle__left a { color: var(--lab-text); }
.bundle__left .num { color: var(--lab-text-faint); }

@media (max-width: 620px) {
  .bundle__head { flex-direction: column; gap: 10px; }
  .bundle__price { flex-direction: row; align-items: baseline; gap: 8px; }
  .bundle__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
}

/* -- Photo tools on the card page ----------------------------------------- */
.phototools { font-size: 14px; }
.phototools > summary { list-style: none; display: inline-block; }
.phototools[open] > summary { margin-bottom: 10px; }
.phototools__busy { margin: 0 0 8px; color: var(--lab-text-muted); }
.phototools__row, .phototools__replace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--lab-border); }
.phototools__face { min-width: 52px; font-weight: 500; }
.phototools__group { display: inline-flex; gap: 4px; }
.phototools .segmented button { padding: 3px 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; color: var(--lab-text-muted); white-space: nowrap; cursor: pointer; }
.phototools .segmented button:hover { color: var(--lab-text); }
.phototools .segmented button[aria-current="true"] { background: var(--lab-surface); color: var(--lab-text); box-shadow: 0 0 0 1px var(--lab-border); }
.phototools__replace input[type="file"] { flex: 1 1 160px; min-width: 0; font-size: 13px; }
.phototools__replace select { font: inherit; font-size: 13px; }
.phototools__note { margin: 6px 0 0; font-size: 12px; color: var(--lab-text-muted); }

.cropper { max-width: min(920px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--lab-border); border-radius: 16px; background: var(--lab-surface); color: var(--lab-text); }
.cropper::backdrop { background: rgb(0 0 0 / 0.55); }
.cropper__title { margin: 0 0 4px; font-weight: 600; }
.cropper__hint { margin: 0 0 12px; font-size: 13px; color: var(--lab-text-muted); }
/* Clipped so the shade around the box stays on the photo; the handles sit just
   inside the box's corners for that reason. */
.cropper__stage { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; touch-action: none; user-select: none; }
.cropper__stage img { display: block; max-width: 100%; max-height: 68vh; }
.cropper__box { position: absolute; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45); outline: 2px solid #fff; cursor: move; }
.cropper__box span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--lab-purple); }
.cropper__box [data-handle="nw"] { left: -2px; top: -2px; cursor: nwse-resize; }
.cropper__box [data-handle="ne"] { right: -2px; top: -2px; cursor: nesw-resize; }
.cropper__box [data-handle="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; }
.cropper__box [data-handle="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; }
.cropper__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Horizontal cards: shown whole in the upright frames, and the card page's
   large photo turns its frame to match. */
img.is-landscape { object-fit: contain !important; transform: none !important; }
.gallery__main:has(img.is-landscape) { aspect-ratio: 88 / 63; }

/* bundle these: owner and ready/all switches, the partner split */
.bundle__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.bundle__split { margin: 4px 0 0; font-size: 13px; color: var(--lab-text-muted); }
.bundle__split .num { color: var(--lab-success); }
.bundle__divider { margin-top: 8px; }
.bundle__divider .an-lead { margin: 2px 0 0; }
.bundle__more { margin: 0; font-size: 14px; color: var(--lab-text-muted); }

/* lots: make, take out, the list of lots */
.bundle__price form { margin-top: 8px; }
.bundle__make { width: 100%; }
.bundle__remove { margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--lab-text-muted); cursor: pointer; }
.bundle__remove:hover { color: var(--lab-purple); }
.lotlist { list-style: none; margin: 0; padding: 0; }
.lotlist__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lab-border); }
.lotlist__row:first-child { border-top: 0; }
.lotlist__row a { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--lab-text); }
.lotlist__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lotlist__meta { font-size: 12px; color: var(--lab-text-muted); }
.lotlist__price { min-width: 56px; text-align: right; }
@media (max-width: 640px) {
  .bundle__price form { margin: 0 0 0 auto; }
  .bundle__make { width: auto; }
}

/* Ledger: costs, card purchases and payouts, with each partner's balance. */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ledger__main, .ledger__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* The Ledger's own page: one column of full-width sections; Add opens in a dialog. */
.ledger--home { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.ledger-grid { display: grid; gap: 18px; align-items: start; }
.ledger-grid > .panel { margin: 0; min-width: 0; }
.ledger-grid--charts { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; }
.ledger-grid--stock { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ledger-periods a { padding: 5px 12px; font-size: 13px; }
.ledger-kpis { margin: 0; }
.ledger .notice { margin: 0; }

.ledger-partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ledger-partner { padding: 16px 18px; border-radius: 10px; border: 1px solid var(--lab-border); background: var(--lab-surface-raised); }
.ledger-partner__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ledger-partner__name { font-size: 15px; font-weight: 600; }
.ledger-partner__link { font-size: 12px; color: var(--lab-text-muted); }
.ledger-partner__owed { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 14px; padding: 12px 14px; border-radius: 8px; background: var(--lab-purple-subtle); border: 1px solid color-mix(in srgb, var(--lab-purple) 30%, transparent); }
.ledger-partner__owed .eyebrow { margin: 0; color: var(--lab-purple); }
.ledger-partner__big { font-size: 28px; line-height: 34px; font-weight: 500; }
.ledger-partner__lines { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ledger-partner__lines div { display: flex; justify-content: space-between; gap: 12px; }
.ledger-partner__lines dt { color: var(--lab-text-muted); }
.ledger-partner__lines dd { margin: 0; font-weight: 600; }
.ledger-partner__lines .is-sub { padding-left: 12px; font-size: 12px; }
.ledger-partner__lines .is-sub dt, .ledger-partner__lines .is-sub dd { color: var(--lab-text-faint); font-weight: 400; }
.ledger-partner__lines .is-down { color: var(--lab-danger); }

.ledger-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ledger-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; align-items: center; gap: 14px; font-size: 13px; }
.ledger-bars li > .num { text-align: right; font-weight: 600; }
.ledger-bars__track { height: 8px; border-radius: 999px; background: var(--lab-bg); overflow: hidden; }
.ledger-bars__track span { display: block; height: 100%; width: var(--w); min-width: 4px; border-radius: inherit; background: var(--lab-purple); }
.ledger-bars li:first-child .ledger-bars__track span { background: var(--lab-success); }

.ledger-entries .an-head { margin-bottom: 12px; }
.ledger-entries .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ledger-entries .empty { padding: 32px 16px; }
.ledger-entries .inv-result { margin-top: 10px; }
.ledger-rows .row { gap: 14px; }
.ledger-rows .row[aria-current="true"] { background: var(--lab-purple-subtle); }
.ledger-rows__date { flex: none; width: 48px; white-space: nowrap; font-size: 12px; color: var(--lab-text-faint); }
.ledger-rows .row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.ledger-rows .row__value { min-width: 84px; text-align: right; }
.ledger-rows__clip { width: 14px; height: 14px; fill: none; stroke: var(--lab-text-muted); stroke-width: 1.8; }
.ledger-tag { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; background: var(--lab-bg); color: var(--lab-text-muted); }
.ledger-tag--purple { background: var(--lab-purple-subtle); color: var(--lab-purple); }
.ledger-tag--teal { background: var(--lab-success-subtle); color: var(--lab-success); }

.ledger-add > summary { list-style: none; cursor: default; }
.ledger-add > summary::-webkit-details-marker { display: none; }
.ledger-kind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; margin-bottom: 18px; border-radius: 10px; background: var(--lab-bg); border: 1px solid var(--lab-border); }
.ledger-kind label { position: relative; }
.ledger-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ledger-kind span { display: block; padding: 7px 6px; border-radius: 8px; font-size: 13px; text-align: center; color: var(--lab-text-muted); white-space: nowrap; }
.ledger-kind input:checked + span { background: var(--lab-surface); color: var(--lab-text); font-weight: 600; box-shadow: 0 0 0 1px var(--lab-border), 0 1px 2px rgba(17, 17, 19, 0.06); }
.ledger-kind input:focus-visible + span { outline: 2px solid var(--lab-purple); outline-offset: 1px; }
.ledger-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ledger-pair:not(:has(> .field:not([hidden]) ~ .field:not([hidden]))) { grid-template-columns: 1fr; }
.ledger-form [hidden] { display: none !important; }
.ledger-file { font-size: 13px; }
.ledger-notes { margin: -4px 0 16px; }
.ledger-notes summary { cursor: pointer; font-size: 13px; color: var(--lab-text-muted); }
.ledger-notes[open] summary { margin-bottom: 8px; }
.ledger-notes .field { margin: 0; }
.ledger-delete { margin-top: 10px; }

.ledger-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ledger-subs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.ledger-subs li + li { border-top: 1px solid var(--lab-border); }
.ledger-subs a { display: flex; flex-direction: column; min-width: 0; color: var(--lab-text); text-decoration: none; }
.ledger-subs__name { font-size: 14px; font-weight: 600; }
.ledger-subs__meta { font-size: 12px; color: var(--lab-text-faint); }
.ledger-subs .num { font-weight: 600; white-space: nowrap; }
.ledger-subs small { font-weight: 400; color: var(--lab-text-faint); }
.ledger-subs__empty { margin: 0; font-size: 13px; color: var(--lab-text-muted); }

.ledger-facts .eyebrow { margin: 0; }
.ledger-facts__amount { margin: 4px 0 14px; font-size: 32px; line-height: 40px; font-weight: 500; }
.ledger-facts .facts { margin: 0; }
.ledger-facts__stop { margin-top: 14px; }
.ledger-receipt__none { margin: 0; font-size: 13px; color: var(--lab-text-muted); }
.ledger-receipt__photo { display: block; max-width: 420px; border-radius: 8px; overflow: hidden; border: 1px solid var(--lab-border); background: var(--lab-bg); }
.ledger-receipt__photo img { display: block; width: 100%; height: auto; }
.ledger-cards { margin: 0 -20px 16px; border-left: 0; border-right: 0; border-radius: 0; }
.ledger-cards .row { padding: 10px 20px; }
.ledger-cards .row__text { color: inherit; text-decoration: none; }
.ledger-cards__remove { font-size: 12px; color: var(--lab-text-muted); }
.ledger-addcards { display: flex; flex-direction: column; gap: 6px; }
.ledger-addcards__row { display: flex; gap: 8px; }
.ledger-addcards__row textarea { flex: 1; min-height: 36px; resize: vertical; }

@media (max-width: 960px) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger-grid--charts, .ledger-grid--stock { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ledger-periods { overflow-x: auto; max-width: 100%; }
  .ledger-bars li { grid-template-columns: 110px minmax(0, 1fr) 80px; gap: 10px; }
  .ledger-rows__date { width: 44px; font-size: 11px; }
  .ledger-rows .row { gap: 10px; padding: 10px 12px; }
  .ledger-rows .row__value { min-width: 0; }
  .ledger-partner__big { font-size: 24px; line-height: 30px; }
}
.ledger-subscriptions { gap: 18px; }
.ledger-subs__count { font-size: 18px; }
.ledger-tag--low { background: var(--lab-warning-subtle); color: var(--lab-warning); vertical-align: 1px; }
.ledger-count { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ledger-count .field { margin: 0; flex: 1 1 120px; }
.ledger-uses .row__value.is-found { color: var(--lab-success); }
.ledger-facts__unit { font-size: 16px; font-weight: 400; color: var(--lab-text-muted); }

/* Ledger: the Add button and its dialog */
.ledger-add-btn { display: inline-flex; align-items: center; gap: 6px; }
.ledger-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ledger-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 20px; border: 1px solid var(--lab-border); border-radius: 16px; background: var(--lab-surface); color: var(--lab-text); box-shadow: 0 24px 64px rgba(17, 17, 19, 0.22); }
.ledger-dialog::backdrop { background: rgb(10 10 11 / 0.45); backdrop-filter: blur(2px); }
.ledger-dialog__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ledger-dialog__head .panel__title { margin: 0; }
.ledger-dialog__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--lab-text-muted); cursor: pointer; }
.ledger-dialog__close:hover { background: var(--lab-bg); color: var(--lab-text); }
@media (max-width: 620px) {
  .ledger-dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}

/* Ledger: money in and out by month */
.ledger-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--lab-text-muted); }
.ledger-legend li { display: flex; align-items: center; gap: 6px; }
.ledger-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ledger-legend .is-in { background: var(--lab-success); }
.ledger-legend .is-out { background: var(--lab-purple); }
.ledger-legend .is-profit { width: 14px; height: 2px; border-radius: 1px; background: var(--lab-text); }
.ledger-flow { position: relative; min-height: 200px; }
.ledger-flow .chart__svg { display: block; overflow: visible; }
.ledger-flow__in { fill: var(--lab-success); }
.ledger-flow__out { fill: var(--lab-purple); }
.ledger-flow__line { fill: none; stroke: var(--lab-text); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ledger-flow__dot { fill: var(--lab-surface); stroke: var(--lab-text); stroke-width: 1.75; }
.ledger-flow__dot.is-down { stroke: var(--lab-danger); }
.ledger-flow .chart__tip span { display: block; }

/* Ledger: where the money went, as a ring */
.ledger-donut { display: flex; align-items: center; gap: 22px; }
.ledger-donut__ring { --ring: var(--lab-border); position: relative; flex: none; width: 152px; height: 152px; border-radius: 50%; background: conic-gradient(var(--ring)); }
.ledger-donut__ring::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--lab-surface); }
.ledger-donut__middle { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ledger-donut__middle .num { font-size: 20px; font-weight: 600; }
.ledger-donut__middle small { font-size: 11px; color: var(--lab-text-faint); }
.ledger-donut__keys { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ledger-donut__keys li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ledger-donut__keys i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--lab-border)); }
.ledger-donut__keys span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-donut__keys .num { font-weight: 600; }
@media (max-width: 420px) {
  .ledger-donut { flex-direction: column; align-items: stretch; }
  .ledger-donut__ring { align-self: center; }
}

/* Ledger: supplies as stock meters */
.ledger-stock { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ledger-stock__item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--lab-border); border-radius: 10px; background: var(--lab-surface-raised); color: var(--lab-text); text-decoration: none; }
.ledger-stock__item:hover { border-color: var(--lab-border-strong); }
.ledger-stock__top, .ledger-stock__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ledger-stock__name { font-size: 14px; font-weight: 600; }
.ledger-stock__count { font-size: 18px; font-weight: 600; white-space: nowrap; }
.ledger-stock__count small { font-size: 12px; font-weight: 400; color: var(--lab-text-faint); }
.ledger-stock__meter { height: 8px; border-radius: 999px; background: var(--lab-bg); overflow: hidden; }
.ledger-stock__meter i { display: block; height: 100%; width: var(--w); min-width: 3px; border-radius: inherit; background: var(--lab-success); }
.ledger-stock__item.is-low .ledger-stock__meter i { background: var(--lab-warning); }
.ledger-stock__meta { font-size: 12px; color: var(--lab-text-faint); }
.ledger-stock__meta .num { color: var(--lab-text-muted); font-weight: 600; }
.ledger-partner__owed.is-owes { background: var(--lab-bg); border-color: var(--lab-border-strong); }
.ledger-partner__owed.is-owes .eyebrow { color: var(--lab-text-muted); }