/* ============================================================
   RAISE Seller portal — design system
   ------------------------------------------------------------
   The seller (Supply) surface is the first place the new RAISE
   Brand Color System lands. The buyer + admin surfaces keep their
   current palettes for now; this file is fully self-contained and
   scoped under `.sl`, so nothing here leaks into them.

   Structure:
     1. Brand palette      — raw brand hexes as --rz-* (global :root,
                              values only, applied by nobody until a
                              surface opts in). Reusable when the buyer
                              adopts the system later.
     2. Semantic tokens    — --sl-* under `.sl`: canvas / ink / lines /
                              roles mapped from the palette.
     3. Base + layout      — shell, topbar, sidebar, main.
     4. Components         — typography, buttons, cards, forms, table,
                              badges, flashes, misc.
   ============================================================ */

/* ── 1. Brand palette (RAISE Brand Color System) ─────────────── */
:root {
  --rz-plum:      #5A2E45;   /* Deep Wine Plum  · Brand / Premium        */
  --rz-dusty:     #7B4A63;   /* Dusty Plum      · Data / Intelligence    */
  --rz-teal:      #008F91;   /* RAISE Teal      · Revenue / Opportunity  */
  --rz-champagne: #E5B45A;   /* Champagne Gold  · Premium / Value        */
  --rz-bordeaux:  #8F1238;   /* Deep Bordeaux   · Depth / Wine           */
  --rz-ivory:     #F7F3EC;   /* Soft Ivory      · Background             */
  --rz-black:     #161412;   /* RAISE Black     · Text                   */
  --rz-grey:      #C8BFB8;   /* Warm Grey       · Neutral                */

  /* Derived shades — hovers / deep variants (kept in-family). */
  --rz-plum-deep:      #452336;
  --rz-dusty-deep:     #633B4F;
  --rz-teal-deep:      #007173;
  --rz-teal-bright:    #0AA1A3;
  --rz-champagne-deep: #C9973E;
  --rz-bordeaux-deep:  #740E2D;
  --rz-ivory-2:        #FBF9F5;  /* lighter panel tint  */
  --rz-ivory-sink:     #EFE9DE;  /* recessed / hover fill */
}

/* ── 2. Semantic tokens (seller scope) ───────────────────────── */
/* Border-box everywhere on the seller surface — without this, inputs
   (width:100% + padding + border) overflow their container on the
   right and stick to the card frame. The base template has no global
   reset for these. */
.sl, .sl *, .sl *::before, .sl *::after { box-sizing: border-box; }

.sl {
  /* Type */
  --sl-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sl-sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sl-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Canvas + surfaces */
  --sl-bg:        var(--rz-ivory);
  --sl-surface:   #FFFFFF;
  --sl-surface-2: var(--rz-ivory-2);
  --sl-sink:      var(--rz-ivory-sink);

  /* Ink */
  --sl-ink:    var(--rz-black);
  --sl-ink-2:  #4A403C;                 /* body copy — warm dark   */
  --sl-muted:  #8A7F79;                 /* meta / labels           */
  --sl-on-dark: var(--rz-ivory);        /* text on plum/teal fills */

  /* Lines */
  --sl-line:   rgba(22, 20, 18, 0.11);
  --sl-line-2: rgba(22, 20, 18, 0.06);
  --sl-ring:   rgba(0, 143, 145, 0.28); /* focus ring — teal       */

  /* Roles (mapped to the brand's recommended use) */
  --sl-brand:        var(--rz-plum);        /* Brand / Premium      */
  --sl-brand-deep:   var(--rz-plum-deep);
  --sl-brand-tint:   rgba(90, 46, 69, 0.09);
  --sl-data:         var(--rz-dusty);       /* Data / Intelligence  */
  --sl-data-tint:    rgba(123, 74, 99, 0.10);
  --sl-revenue:      var(--rz-teal);        /* Revenue / Opportunity*/
  --sl-revenue-deep: var(--rz-teal-deep);
  --sl-revenue-tint: rgba(0, 143, 145, 0.10);
  --sl-value:        var(--rz-champagne);   /* Premium / Value      */
  --sl-value-deep:   var(--rz-champagne-deep);
  --sl-value-tint:   rgba(229, 180, 90, 0.16);
  --sl-wine:         var(--rz-bordeaux);    /* Depth / Wine · danger*/
  --sl-wine-deep:    var(--rz-bordeaux-deep);
  --sl-wine-tint:    rgba(143, 18, 56, 0.09);
  --sl-neutral:      var(--rz-grey);        /* Neutral              */

  /* Status aliases */
  --sl-accent:  var(--sl-revenue);      /* links, focus, primary CTA accent */
  --sl-ok:      var(--rz-teal);
  --sl-warn:    var(--rz-champagne);
  --sl-danger:  var(--rz-bordeaux);
  --sl-info:    var(--rz-dusty);

  /* Elevation — warm-tinted */
  --sl-shadow-sm: 0 1px 2px rgba(22, 20, 18, 0.05), 0 1px 1px rgba(22, 20, 18, 0.04);
  --sl-shadow:    0 2px 6px rgba(22, 20, 18, 0.05), 0 16px 38px -20px rgba(22, 20, 18, 0.24);
  --sl-shadow-lg: 0 10px 28px rgba(22, 20, 18, 0.09), 0 34px 74px -28px rgba(22, 20, 18, 0.30);

  /* Shape */
  --sl-radius:    12px;
  --sl-radius-lg: 18px;
  --sl-radius-pill: 999px;

  color: var(--sl-ink);
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(90, 46, 69, 0.05) 0%, transparent 55%),
    var(--sl-bg);
  font-family: var(--sl-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 3. Layout ───────────────────────────────────────────────── */
.sl-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar — ivory glass with the brand wordmark. */
.sl-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(247, 243, 236, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--sl-line);
}
.sl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sl-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--sl-ink);
  text-decoration: none;
}
.sl-brand__mark { height: 26px; width: auto; display: block; }
.sl-topbar__meta {
  font-family: var(--sl-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
.sl-topbar__actions { display: inline-flex; align-items: center; gap: 8px; }
.sl-topbar__actions .sl-chip {
  padding: 9px 26px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.sl-topbar__actions a.sl-chip:hover { border-color: var(--sl-muted); background: var(--sl-surface-2); }

/* Body split — sidebar + main. */
.sl-body {
  flex: 1;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 36px;
  width: 100%;
  padding: 28px 40px 56px;
}
@media (max-width: 900px) {
  .sl-body { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px 32px; }
}

.sl-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  /* 27 items overflow the viewport — cap the height to what's visible
     and let the sidebar scroll on its own instead of running off-screen. */
  max-height: calc(100vh - 88px - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-sm);
}
@media (max-width: 900px) {
  .sl-sidebar { position: static; max-height: none; overflow: visible; }
}
.sl-nav-eyebrow {
  font-family: var(--sl-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sl-muted);
  padding: 12px 20px 6px;
}
/* Collapsible group: the eyebrow doubles as a <summary> toggle. */
.sl-navgroup { display: block; }
.sl-navgroup > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sl-navgroup > summary::-webkit-details-marker { display: none; }
.sl-navgroup > summary:hover { color: var(--sl-ink-2); }
.sl-navgroup > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  opacity: 0.7;
}
.sl-navgroup[open] > summary::after { transform: rotate(45deg); }
.sl-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sl-ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.sl-nav-link:hover { color: var(--sl-ink); background: var(--sl-sink); }
/* Continuous 1–27 index in front of each item. */
.sl-nav-num {
  flex: none;
  min-width: 17px;
  font-family: var(--sl-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--sl-muted);
  text-align: right;
}
.sl-nav-link.is-active .sl-nav-num { color: var(--sl-brand); }
/* Modules still to come — visible in the IA but inert and de-emphasised. */
.sl-nav-link--soon { color: var(--sl-muted); cursor: default; }
.sl-nav-link--soon:hover { background: transparent; color: var(--sl-muted); }
.sl-nav-link.is-active {
  color: var(--sl-brand);
  font-weight: 600;
  background: var(--sl-brand-tint);
  border-left-color: var(--sl-brand);
}
.sl-nav-link__icon { width: 17px; height: 17px; flex: none; }

/* Anchor sub-menu (Realize report sections) nested under a nav item. */
.sl-subnav { list-style: none; margin: 2px 0 6px; padding: 0; }
.sl-subnav-link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 20px 6px 30px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--sl-muted);
  text-decoration: none;
  transition: color .12s, background .12s;
}
.sl-subnav-link:hover { color: var(--sl-brand); background: var(--sl-sink); }
.sl-subnav-num {
  flex: none;
  min-width: 14px;
  font-family: var(--sl-mono);
  font-size: 10px;
  font-weight: 600;
}

.sl-main { min-width: 0; }
.sl-container {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sl-container--narrow { max-width: 560px; margin: 0 auto; }
.sl-container--wide   { max-width: none; }

/* Centered single-panel (auth / activation) surface. */
.sl-center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* ── 4a. Typography ──────────────────────────────────────────── */
.sl-head { display: flex; flex-direction: column; gap: 6px; }
.sl-eyebrow {
  font-family: var(--sl-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sl-brand);
}
.sl-title {
  font-family: var(--sl-serif);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--sl-ink);
  margin: 0;
}
.sl-h2 {
  font-family: var(--sl-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--sl-ink);
  margin: 0;
}
.sl-lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sl-ink-2);
  margin: 0;
  max-width: 68ch;
}
.sl-muted { color: var(--sl-muted); }

/* ── 4b. Buttons ─────────────────────────────────────────────── */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  font-family: var(--sl-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--sl-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .2s, transform .12s;
}
.sl-btn:active { transform: translateY(1px); }
.sl-btn svg { width: 15px; height: 15px; }

.sl-btn--primary {
  color: var(--sl-on-dark);
  background: var(--sl-brand);
  box-shadow: 0 10px 24px -14px rgba(90, 46, 69, 0.75);
}
.sl-btn--primary:hover { background: var(--sl-brand-deep); }

.sl-btn--accent {
  color: #FFFFFF;
  background: var(--sl-revenue);
  box-shadow: 0 10px 24px -14px rgba(0, 143, 145, 0.7);
}
.sl-btn--accent:hover { background: var(--sl-revenue-deep); }

.sl-btn--gold {
  color: var(--rz-black);
  background: var(--sl-value);
  box-shadow: 0 10px 24px -14px rgba(229, 180, 90, 0.7);
}
.sl-btn--gold:hover { background: var(--sl-value-deep); }

.sl-btn--ghost {
  color: var(--sl-ink);
  background: var(--sl-surface);
  border-color: var(--sl-line);
  box-shadow: var(--sl-shadow-sm);
}
.sl-btn--ghost:hover { border-color: var(--sl-muted); background: var(--sl-surface-2); }

.sl-btn--danger {
  color: #FFFFFF;
  background: var(--sl-wine);
}
.sl-btn--danger:hover { background: var(--sl-wine-deep); }

.sl-btn--block { width: 100%; }
.sl-btn--lg { padding: 14px 28px; font-size: 15px; }
.sl-btn:disabled, .sl-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Quiet text link */
.sl-link {
  color: var(--sl-revenue-deep);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.sl-link:hover { color: var(--sl-revenue); border-bottom-color: currentColor; }

/* ── 4c. Cards ───────────────────────────────────────────────── */
.sl-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-sm);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sl-card--pad-lg { padding: 30px 32px; }
.sl-card__head { display: flex; flex-direction: column; gap: 6px; }
.sl-card__title { font-family: var(--sl-serif); font-weight: 600; font-size: 19px; color: var(--sl-ink); margin: 0; }
.sl-card__lede  { font-size: 13px; line-height: 1.55; color: var(--sl-ink-2); margin: 0; }
.sl-card__foot  { font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-muted); padding-top: 4px; }

/* ── 4d. Forms ───────────────────────────────────────────────── */
.sl-form { display: flex; flex-direction: column; gap: 16px; }
.sl-field { display: flex; flex-direction: column; gap: 6px; }
.sl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
@media (max-width: 640px) { .sl-grid-2 { grid-template-columns: 1fr; gap: 16px; } }

.sl-label {
  font-family: var(--sl-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
.sl-input, .sl-textarea, .sl-select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--sl-sans);
  font-size: 15px;
  color: var(--sl-ink);
  background: var(--sl-surface);
  /* Crisper than --sl-line so adjacent fields read as distinct boxes
     (two-column rows were blurring together at the lighter weight). */
  border: 1px solid rgba(22, 20, 18, 0.20);
  border-radius: var(--sl-radius);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.sl-input::placeholder, .sl-textarea::placeholder { color: var(--sl-muted); }
.sl-input:focus, .sl-textarea:focus, .sl-select:focus {
  border-color: var(--sl-revenue);
  box-shadow: 0 0 0 3px var(--sl-ring);
}
.sl-textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.sl-input:disabled, .sl-input[readonly] {
  background: var(--sl-sink);
  color: var(--sl-muted);
  cursor: not-allowed;
}
.sl-select {
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sl-muted) 50%),
    linear-gradient(135deg, var(--sl-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.sl-hint { font-size: 12px; color: var(--sl-muted); }
.sl-error { font-size: 12px; color: var(--sl-wine); }

/* File upload — the native control restyled to sit with the inputs.
   The button half is a teal chip; the filename sits to its right. */
.sl-file {
  width: 100%;
  font-family: var(--sl-sans);
  font-size: 14px;
  color: var(--sl-ink-2);
}
.sl-file::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  font-family: var(--sl-sans);
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--sl-revenue);
  border: 0;
  border-radius: var(--sl-radius-pill);
  cursor: pointer;
  transition: background .15s;
}
.sl-file::file-selector-button:hover { background: var(--sl-revenue-deep); }
.sl-file-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sl-revenue-deep);
}
.sl-fieldset { border: 0; margin: 0; padding: 0; }

/* Icon-badge fields (social links, API/FTP, product media) share ONE
   implementation — see ".sl-social-row / .sl-ftp-row" further down. */

.sl-dob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-phone { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
.sl-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-family: var(--sl-mono);
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--sl-brand);
  border-radius: 8px;
}
.sl-section-head { display: flex; align-items: center; gap: 12px; }

/* Sub-heading inside a section (e.g. "Responsible person"). */
.sl-subhead {
  margin: 18px 0 -2px;
  font-family: var(--sl-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-muted);
}

/* Small info affordance next to a label — hover/focus shows the note. */
.sl-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  font-family: var(--sl-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--sl-brand);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
}

/* ─── Icon-badge fields — ONE implementation ────────────────────────
   A teal badge sits flush against a rounded LEFT corner of the field.
   Used by company social links (.sl-social-row), the API/FTP field and
   product media (.sl-ftp-row). The badge is a real box, absolutely
   positioned top:0/bottom:0, so it is ALWAYS exactly the field's height
   (it can't be taller); the field gets left padding to clear it.

   The icon element is absolutely positioned top:0/bottom:0, so it is
   ALWAYS exactly the field's height; the field gets left padding to
   clear it. All icons are inline single-colour glyphs (currentColor).  */
.sl-social-row, .sl-ftp-row { position: relative; }

.sl-social-ico, .sl-ftp-ico {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.sl-social-ico svg, .sl-ftp-ico svg { display: block; }

/* Social links: white glyph on a teal badge. */
.sl-social-ico {
  width: 58px;
  color: #FFFFFF;
  background: var(--sl-revenue);
  border-radius: var(--sl-radius) 0 0 var(--sl-radius);
}
.sl-social-ico svg { width: 22px; height: 22px; }
.sl-social-row .sl-input { padding-left: 74px; }

/* API/FTP: a teal badge behind the glyph. */
.sl-ftp-ico {
  width: 58px;
  color: var(--sl-value);
  background: var(--sl-revenue);
  border-radius: var(--sl-radius) 0 0 var(--sl-radius);
}
.sl-ftp-ico svg { width: 24px; height: 24px; }
.sl-ftp-row .sl-input { padding-left: 74px; }

/* Product media (file inputs): a bordered box with a PLAIN glyph — no
   teal badge, since the file's own "Choose files" button is already
   teal and a badge would double up. */
.sl-ftp-row .sl-file {
  width: 100%;
  padding: 13px 14px 13px 52px;
  background: var(--sl-surface);
  border: 1.5px solid var(--sl-line);
  border-radius: var(--sl-radius);
}
.sl-ftp-row .sl-file::file-selector-button { margin-right: 12px; }
.sl-ftp-row:has(.sl-file) .sl-ftp-ico {
  width: 46px;
  background: transparent;
  color: var(--sl-revenue);
}

/* Multi-select chips (aroma profile) — checkboxes styled as toggles. */
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip-check { cursor: pointer; user-select: none; }
.sl-chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sl-chip-check span {
  display: inline-block;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--sl-ink-2);
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-pill);
  transition: background .12s, border-color .12s, color .12s;
}
.sl-chip-check:hover span { border-color: var(--sl-muted); }
.sl-chip-check input:checked + span {
  color: var(--sl-brand);
  font-weight: 600;
  background: var(--sl-brand-tint);
  border-color: var(--sl-brand);
}
.sl-chip-check input:focus-visible + span { box-shadow: 0 0 0 3px var(--sl-ring); }

/* Uploaded image thumbnails with a remove control. */
.sl-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.sl-thumb {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sl-line);
  background: var(--sl-surface-2);
}
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-thumb__rm {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  color: #FFFFFF; background: rgba(22, 20, 18, 0.6);
  font-size: 13px; line-height: 1;
}
.sl-thumb__rm:hover { background: var(--sl-wine); }
.sl-readonly {
  font-family: var(--sl-mono);
  font-size: 14px;
  color: var(--sl-muted);
  padding: 11px 14px;
  background: var(--sl-sink);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
}

/* Pricing tier rows + the seasonal-upsale reference grid. */
.sl-tier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.sl-details {
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 0 16px;
}
.sl-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 0;
  font-family: var(--sl-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
.sl-details > summary::-webkit-details-marker { display: none; }
.sl-details[open] > summary { color: var(--sl-brand); }
.sl-upsale-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0 16px;
}
@media (max-width: 760px) { .sl-upsale-grid { grid-template-columns: repeat(2, 1fr); } }
.sl-upsale {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sl-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--sl-ink-2);
}
.sl-upsale__pct {
  flex: none;
  font-weight: 600; font-size: 11px;
  color: #FFFFFF; background: var(--sl-revenue);
  border-radius: var(--sl-radius-pill);
  padding: 2px 9px;
}

.sl-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--sl-ink-2);
  cursor: pointer;
}
.sl-checkbox input { accent-color: var(--sl-brand); width: 16px; height: 16px; }

/* ── 4e. Table ───────────────────────────────────────────────── */
.sl-table { width: 100%; border-collapse: collapse; }
.sl-table thead th {
  font-family: var(--sl-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sl-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sl-line);
}
.sl-table tbody td { padding: 12px; border-bottom: 1px solid var(--sl-line-2); vertical-align: middle; font-size: 14px; color: var(--sl-ink); }
.sl-table tbody tr:last-child td { border-bottom: none; }
.sl-table tbody tr:hover td { background: rgba(22, 20, 18, 0.02); }
.sl-table .sl-col-right { text-align: right; }

/* ── 4f. Badges (mapped to the palette's recommended roles) ──── */
.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: var(--sl-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--sl-radius-pill);
  line-height: 1.4;
}
.sl-badge--brand   { color: var(--sl-brand);        background: var(--sl-brand-tint); }
.sl-badge--data    { color: var(--sl-data);         background: var(--sl-data-tint); }
.sl-badge--revenue { color: var(--sl-revenue-deep); background: var(--sl-revenue-tint); }
.sl-badge--value   { color: var(--sl-value-deep);   background: var(--sl-value-tint); }
.sl-badge--wine    { color: var(--sl-wine);         background: var(--sl-wine-tint); }
.sl-badge--neutral { color: var(--sl-ink-2);        background: rgba(200, 191, 184, 0.30); }

/* ── 4g. Flashes / alerts ────────────────────────────────────── */
.sl-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--sl-radius);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.sl-flash--ok     { color: var(--rz-teal-deep);     background: var(--sl-revenue-tint); border-color: rgba(0, 143, 145, 0.28); }
.sl-flash--warn   { color: var(--sl-value-deep);    background: var(--sl-value-tint);   border-color: rgba(201, 151, 62, 0.34); }
.sl-flash--danger { color: var(--sl-wine-deep);     background: var(--sl-wine-tint);    border-color: rgba(143, 18, 56, 0.28); }
.sl-flash--info   { color: var(--sl-data);          background: var(--sl-data-tint);    border-color: rgba(123, 74, 99, 0.26); }

/* ── 4h. Misc ────────────────────────────────────────────────── */
.sl-divider { height: 1px; background: var(--sl-line); border: 0; margin: 4px 0; }
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sl-ink-2);
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-pill);
}
.sl-stat { display: flex; flex-direction: column; gap: 3px; }
.sl-stat__num { font-family: var(--sl-serif); font-weight: 600; font-size: 30px; color: var(--sl-ink); line-height: 1; }
.sl-stat__label { font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-muted); }
.sl-empty { text-align: center; color: var(--sl-muted); padding: 32px 0; font-size: 14px; }

/* ─────────────────────────────────────────────────────────────────
   #7 Online Tastings builder
   ───────────────────────────────────────────────────────────────── */
.sl-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sl-input--lg { font-size: 17px; padding: 15px 16px; }

.sl-tag {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sl-revenue-deep);
  background: var(--sl-revenue-tint);
  border-radius: var(--sl-radius-pill);
}
.sl-link--danger { color: var(--sl-danger); }

/* Three columns — wines · buyers · promotion. */
.sl-tasting-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .sl-tasting-grid { grid-template-columns: 1fr; } }

.sl-pick { padding: 0; overflow: hidden; }
.sl-pick-head {
  padding: 14px 18px;
  font-family: var(--sl-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: var(--sl-revenue);
}
.sl-pick-list { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.sl-pick-row { display: flex; align-items: center; gap: 12px; }
.sl-pick-name {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--sl-ink);
  background: var(--sl-surface);
  border: 1.5px solid var(--sl-revenue);
  border-radius: var(--sl-radius);
}

/* Teal ✓ / champagne ✕ toggle — a styled checkbox. */
.sl-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.sl-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sl-toggle__box {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sl-radius);
  background: var(--sl-value);
  transition: background 140ms ease;
}
.sl-toggle__box::after { content: '\2715'; color: #FFFFFF; font-size: 18px; font-weight: 700; line-height: 1; }
.sl-toggle input:checked + .sl-toggle__box { background: var(--sl-revenue); }
.sl-toggle input:checked + .sl-toggle__box::after { content: '\2713'; }
.sl-toggle input:focus-visible + .sl-toggle__box { outline: 2px solid var(--sl-accent); outline-offset: 2px; }
.sl-toggle--static .sl-toggle__box { background: var(--sl-revenue); cursor: default; }
.sl-toggle--static .sl-toggle__box::after { content: '\2713'; }

/* Promotion rows carry a price + blurb. */
.sl-promo { display: flex; flex-direction: column; gap: 8px; }
.sl-promo + .sl-promo { padding-top: 12px; border-top: 1px solid var(--sl-line); }
.sl-promo-top { display: grid; grid-template-columns: 1fr auto 42px; gap: 10px; align-items: center; }
.sl-promo-name { font-weight: 600; font-size: 14px; color: var(--sl-ink); }
.sl-promo-price {
  font-family: var(--sl-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-revenue-deep);
  white-space: nowrap;
}
.sl-promo-blurb { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--sl-muted); }

/* Summary bar. */
.sl-tasting-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--sl-surface-2);
  border-radius: var(--sl-radius-lg);
}
.sl-tasting-total { font-size: 15px; color: var(--sl-muted); }
.sl-tasting-total strong { margin-left: 10px; font-family: var(--sl-serif); font-size: 22px; color: var(--sl-ink); }

/* ─────────────────────────────────────────────────────────────────
   Dashboard welcome band — company logo + identity, to feel at home
   ───────────────────────────────────────────────────────────────── */
.sl-welcome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 22px 26px;
  margin-bottom: 26px;
  background:
    radial-gradient(130% 140% at 0% 0%, var(--sl-brand-tint) 0%, transparent 46%),
    var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-sm);
}
/* Top row of the welcome band: company id (logo + text) on the left,
   the seller's personal avatar standalone on the far right. */
.sl-welcome__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.sl-welcome__id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.sl-welcome__mark { position: relative; flex: none; }
/* Personal cluster on the right: greeting + the seller's avatar. */
.sl-welcome__you { display: flex; align-items: center; gap: 14px; flex: none; }
.sl-welcome__you .sl-eyebrow { text-align: right; white-space: nowrap; }
/* Seller's personal photo — standalone round avatar on the far-right
   edge of the welcome band, opposite the company logo. */
.sl-welcome__avatar {
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sl-surface-2);
  border: 2.5px solid var(--sl-surface);
  box-shadow: var(--sl-shadow-sm);
}
.sl-welcome__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sl-sans);
  font-weight: 700;
  font-size: 34px;
  color: #FFFFFF;
  background: var(--sl-revenue);
}
.sl-welcome__logo {
  width: 180px;
  height: 180px;
  flex: none;
  object-fit: contain;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 8px;
  box-shadow: var(--sl-shadow-sm);
}
.sl-welcome__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--sl-serif);
  font-weight: 600;
  font-size: 34px;
  color: #FFFFFF;
  background: var(--sl-brand);
  border-color: transparent;
}
.sl-welcome__text { min-width: 0; }
.sl-welcome__name {
  margin: 2px 0 4px;
  font-family: var(--sl-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  color: var(--sl-ink);
}
.sl-welcome__meta { margin: 0; font-size: 14px; color: var(--sl-muted); }
.sl-welcome__meta .sl-link { font-size: inherit; }
.sl-welcome__since {
  margin: 8px 0 0;
  font-family: var(--sl-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sl-muted);
}
.sl-welcome__stats { display: flex; gap: 30px; padding-right: 4px; }

.sl-title--sm { font-size: 22px; }