/* ============================================================
   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. Canvas values ────────────────────────────────────────
   The clay canvas only. The six Clay x Wine role colours are declared
   once as --sl-* below (DESIGN.md §1); there is no separate brand
   layer to keep in step. */
:root {
  --rz-ivory:      #F7F3EC;   /* Soft Ivory  · canvas                  */
  --rz-ivory-2:    #FBF9F5;   /*             · lighter panel tint      */
  --rz-ivory-sink: #EFE9DE;   /*             · recessed / hover fill   */
  --rz-black:      #161412;   /* RAISE Black · text                    */
  --rz-grey:       #C8BFB8;   /* Warm Grey   · neutral                 */
}

/* On seller pages the body itself goes ivory, overriding app.css's
   near-black default — otherwise it flashes dark on reload and shows
   through on overscroll. */
body:has(> .sl) { background-color: var(--rz-ivory); }

/* ── 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);
  /* Two desaturated sages for stacked table headers: the group band
     sits on mist, the column row on veil. Surface values, not palette
     roles — they tint a header, they never carry meaning. Sampled from
     the published Order List sheet. */
  --sl-sage-mist: #BEC7BA;   /* group / band header row */
  --sl-sage-veil: #DDDED3;   /* column header row       */

  /* 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(110, 70, 88, 0.28); /* focus ring — plum       */

  /* Roles — Clay x Wine (DESIGN.md §1). One definition each: these are
     the values the portal resolves to. */
  --sl-brand:        #6E4658;               /* Dusty Wine Plum      */
  --sl-brand-deep:   #573648;
  --sl-brand-tint:   rgba(110, 70, 88, 0.10);
  --sl-data:         #6E4658;               /* Data / Intelligence  */
  --sl-data-tint:    rgba(110, 70, 88, 0.10);
  --sl-revenue:      #6F8578;               /* Vine Sage · positive */
  --sl-revenue-deep: #5C7266;
  --sl-revenue-tint: rgba(111, 133, 120, 0.12);
  --sl-value:        #E3CD9E;               /* Champagne Cream      */
  --sl-value-deep:   #A9873F;
  --sl-value-tint:   rgba(227, 205, 158, 0.28);
  --sl-wine:         #A34E52;               /* Marsala · danger     */
  --sl-wine-deep:    #8A3F45;
  --sl-wine-tint:    rgba(163, 78, 82, 0.10);

  /* Status aliases */
  --sl-accent:  var(--sl-revenue);      /* links, focus, primary CTA accent */
  --sl-ok:      var(--sl-revenue);
  --sl-warn:    #C9A257;
  --sl-danger:  var(--sl-wine);
  --sl-info:    var(--sl-data);

  /* 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;
  /* Solid colour first: paints instantly (and matches the texture) so the
     dark app.css body never shows through while the image downloads. */
  background-color: var(--sl-bg);
  /* Papercraft vineyard scene — a single composition, so it covers the
     viewport (no tiling); anchored to the bottom so the terraced rows
     stay in view and the crop eats sky instead. */
  background-image: url("../images/clay-bg-light-nZQ1Lk_.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  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: 6px 29px;
  background: var(--sl-glass-chrome);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  border-bottom: 1px solid var(--sl-line);
}
.sl-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  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; }
/* Sits under the wordmark, tracked to its width so the two read as one
   lockup rather than a logo with a caption. */
.sl-brand__sub {
  align-self: stretch;
  font-family: var(--sl-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  /* --rzb-gold is declared on .rzb and the topbar sits outside it — and
     realize-bai.css is not even loaded on every seller page — so the
     literal carries it there. */
  color: var(--rzb-gold, #701F30);
  text-align: right;
}
.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: 12px; }
.sl-topbar__left { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
/* Greeting lives on the right; the avatar floats fixed in the top-right
   corner (bigger, prominent). Clear space so the greeting never slides
   under the fixed avatar. */
.sl-topbar__right { display: inline-flex; align-items: center; gap: 14px; margin-right: 72px; }
.sl-topbar__welcome {
  font-family: var(--sl-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sl-brand);
  white-space: nowrap;
}
.sl-topbar__avatar-link {
  position: fixed;
  top: 4px;
  right: 20px;
  z-index: 30;
  display: inline-flex;
  line-height: 0;
  border-radius: 50%;
  text-decoration: none;
}
.sl-topbar__avatar {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--sl-surface-2); border: 2px solid var(--sl-surface);
  box-shadow: 0 2px 12px rgba(22, 20, 18, 0.18);
}
.sl-topbar__avatar--initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sl-sans); font-weight: 700; font-size: 22px;
  color: #FFFFFF; background: var(--sl-revenue);
}
.sl-topbar__avatar-link:hover .sl-topbar__avatar { transform: translateY(-1px); }
@media (max-width: 640px) {
  .sl-topbar__welcome { display: none; }
  .sl-topbar__right { margin-right: 60px; }
}
.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: 232px minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  padding: 28px 40px 56px;
  transition: grid-template-columns .22s cubic-bezier(.2,.7,.2,1);
}
.sl-body.is-nav-collapsed,
.sl-body:has(.sl-sidebar.is-collapsed) { grid-template-columns: 72px minmax(0, 1fr); }
@media (max-width: 900px) {
  .sl-body,
  .sl-body.is-nav-collapsed { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px 32px; }
}

/* ── Foldable sidebar (icon rail) ────────────────────────────── */
.sl-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  min-height: calc(100vh - 88px - 56px);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  overflow: hidden;
  background: rgba(247, 243, 236, 0.42);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-radius: 22px;
  box-shadow: 0 22px 48px -24px rgba(22,20,18,.42), 0 5px 14px -8px rgba(22,20,18,.16);
}
@media (max-width: 900px) {
  .sl-sidebar { position: static; min-height: 0; }
}
.sln-top { display: flex; justify-content: flex-end; padding: 2px 4px 12px; }
.sl-sidebar.is-collapsed .sln-top { justify-content: center; }
.sln-toggle {
  width: 38px; height: 38px; flex: none; border: 0; background: none; cursor: pointer;
  border-radius: 10px; color: var(--sl-muted); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.sln-toggle:hover { color: var(--sl-ink); background: var(--sl-sink); }

.sln { display: flex; flex-direction: column; gap: 4px; }
.sln-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--sl-line-2); }

.sln-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  font-family: var(--sl-sans); font-size: 14px; font-weight: 500;
  color: var(--sl-ink-2); text-decoration: none; white-space: nowrap; overflow: hidden;
  border: 0; width: 100%; text-align: left; cursor: pointer;
  transition: color .15s, background .15s;
}
.sln-link:hover { color: var(--sl-ink); background: var(--sl-sink); }
.sln-link.is-active { color: var(--sl-brand); background: var(--sl-brand-tint); font-weight: 600; }
.sln-icon { flex: none; width: 24px; text-align: center; font-size: 16px; color: var(--sl-muted); }
.sln-link:hover .sln-icon,
.sln-link.is-active .sln-icon { color: var(--sl-brand); }
.sln-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sln-link--btn { background: none; }
.sln-signout { margin: 0; }

/* collapsed rail */
.sl-sidebar.is-collapsed { padding: 12px 8px; }
.sl-sidebar.is-collapsed .sln-link { justify-content: center; gap: 0; padding: 11px 0; }
.sl-sidebar.is-collapsed .sln-label { display: none; }
.sl-sidebar.is-collapsed .sln-icon { width: auto; font-size: 17px; }
.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); }
/* Per-field AI generate — icon-only button tucked into the textarea's
   inner top-right corner (product editor Content card). */
.sl-ai-host { position: relative; }
.sl-ai-host .sl-textarea { padding-right: 44px; }
.sl-ai-btn {
  position: absolute; top: -5px; right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 37px; height: 37px; border-radius: 11px; cursor: pointer;
  color: var(--sl-brand);
  background: var(--sl-brand-tint, rgba(0, 143, 145, 0.10));
  border: 1px solid color-mix(in srgb, var(--sl-brand) 26%, transparent);
  transition: background .15s, color .15s, border-color .15s, opacity .15s, transform .15s;
}
.sl-ai-btn svg { width: 15px; height: 15px; }
.sl-ai-btn i { font-size: 14px; }
.sl-ai-btn:hover { background: var(--sl-brand); color: #fff; border-color: var(--sl-brand); transform: translateY(-1px); }
.sl-ai-btn.is-loading { opacity: .8; cursor: default; }
.sl-ai-btn.is-loading svg, .sl-ai-btn.is-loading i { animation: sl-ai-spin 1.1s linear infinite; }
.sl-ai-btn.is-error { background: #8F1238; color: #fff; border-color: #8F1238; }
.sl-ai-btn:disabled { cursor: default; }
@keyframes sl-ai-spin { to { transform: rotate(360deg); } }
/* Brief highlight when an AI-generated value lands in a field. */
.sl-ai-pop { animation: sl-ai-pop .5s ease-out; }
@keyframes sl-ai-pop {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-brand) 55%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sl-brand) 0%, transparent); }
}

/* Account-level meta link (Activity log) above sign out. */
.sl-nav-meta { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--sl-line-2); }
/* Sign out — pinned at the bottom of the sidebar. */
.sl-nav-signout { margin-top: 2px; padding-top: 6px; }
.sl-nav-signout-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 18px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--sl-sans); font-size: 13.5px; font-weight: 500;
  color: var(--sl-muted);
  transition: color .15s, background .15s;
}
.sl-nav-signout-btn:hover { color: var(--sl-ink); background: var(--sl-sink); }
.sl-nav-signout-btn svg { width: 17px; height: 17px; flex: none; }
.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,
.sl-nav-link.is-current {
  color: var(--sl-brand);
  font-weight: 600;
  background: var(--sl-brand-tint);
  border-left-color: var(--sl-brand);
}
.sl-nav-link.is-current .sl-nav-num { 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;
  border-radius: 22px;
  background: var(--sl-glass-panel);
  backdrop-filter: blur(30px) saturate(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  padding: 28px 32px 36px;
}
.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;
}
/* Same matte-glass panel behind the card as .sl-main gives the app pages. */
.sl-center > .sl-container {
  border-radius: 22px;
  background: var(--sl-glass-panel);
  backdrop-filter: blur(30px) saturate(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  padding: 32px 36px 40px;
}

/* ── 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 ───────────────────────────────────────────────── */
/* Clay card — matte sage→cream tile with a cream corner pin, no border. */
.sl-card {
  --sl-ink:   #2A2E29;
  --sl-ink-2: #4C514B;
  --sl-muted: #8A8F86;
  position: relative;
  background: linear-gradient(150deg, #BEC5BC 0%, #E5E2D8 42%);
  border: 0;
  border-radius: 26px;
  box-shadow: -13px 11px 15px -4px rgba(120, 122, 112, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 24px 26px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sl-card:nth-of-type(even) { background: linear-gradient(150deg, #CFD3C8 0%, #E5E2D8 50%); }
/* Cream corner pin. On a card WITHOUT a heading it sits in the corner;
   on a card with one it rides on the title's own line (below), so it
   lines up with the text instead of guessing a top offset that only
   matches one padding variant. */
.sl-card::before {
  content: ''; position: absolute; top: 22px; left: 24px;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6EFE2 0%, #E4D8C3 55%, #CDBFA6 100%);
  box-shadow: 2px 3px 6px rgba(120, 110, 92, 0.42), inset -2px -2px 4px rgba(150, 138, 116, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.85);
}
.sl-card:has(.sl-card__title)::before { display: none; }
.sl-card__title::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 18px; height: 18px; margin-right: 12px;
  position: relative; top: -0.06em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6EFE2 0%, #E4D8C3 55%, #CDBFA6 100%);
  box-shadow: 2px 3px 6px rgba(120, 110, 92, 0.42), inset -2px -2px 4px rgba(150, 138, 116, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.85);
}
.sl-card--pad-lg { padding: 30px 32px; }
/* Pin clearance on a card with no title. A titled card puts the pin on
   the title's own line; a card that opens straight into a form or a
   field would otherwise run its first label underneath it, so those
   give the pin a line to itself. */
.sl-card:not(:has(.sl-card__title)):has(> .sl-form:first-child),
.sl-card:not(:has(.sl-card__title)):has(> .sl-field:first-child),
.sl-card:not(:has(.sl-card__title)):has(> .sl-flash:first-child),
.sl-card:not(:has(.sl-card__title)):has(> .sl-fieldset:first-child) { padding-top: 56px; }
/* Pick cards carry no padding of their own, so their head is indented
   past the pin instead — the same move .rzb-card-head makes. */
.sl-pick .sl-pick-head { padding-left: 34px; }
.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: minmax(0, 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: #232a24;
  background: #a7bbad;
  border: 0;
  border-radius: var(--sl-radius-pill);
  cursor: pointer;
  transition: background .15s;
}
.sl-file::file-selector-button:hover { background: color-mix(in srgb, #a7bbad 90%, #000); }
.sl-file-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sl-revenue-deep);
}
/* Inline "Remove" for an uploaded logo / photo (profile only). */
.sl-file-remove {
  margin-left: 8px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sl-danger, #8F1238);
  text-decoration: underline;
  cursor: pointer;
}
.sl-file-remove:hover { opacity: 0.8; }
.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; }
/* A from–to pair with a separator, e.g. promotion validity. */
.sl-daterange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.sl-daterange__sep { color: var(--sl-muted); }
@media (max-width: 560px) { .sl-daterange { grid-template-columns: minmax(0, 1fr); } .sl-daterange__sep { display: none; } }
.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: dark glyph on a sage badge (matches the accent button). */
.sl-social-ico {
  width: 58px;
  color: #232a24;
  background: #a7bbad;
  border-radius: 13px 0 0 13px;   /* matches the clay field radius */
}
.sl-social-ico svg { width: 22px; height: 22px; }
.sl-social-row .sl-input { padding-left: 74px; }

/* API/FTP: a sage badge behind the glyph. */
.sl-ftp-ico {
  width: 58px;
  color: #232a24;
  background: #a7bbad;
  border-radius: 13px 0 0 13px;   /* matches the clay field 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, minmax(0, 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; }
/* Bottle-image thumbnail in the first column. */
.sl-row-thumb-col { width: 46px; }
.sl-row-thumb {
  width: 34px; height: 44px; object-fit: contain; display: block;
  border-radius: 5px; background: var(--sl-sink);
}
.sl-row-thumb--empty { background: var(--sl-sink); }
/* Catalogue search bar. */
.sl-search { display: flex; gap: 10px; align-items: stretch; margin: 0 0 16px; max-width: 560px; }
.sl-search__input { flex: 1; }
.sl-search__btn { flex: none; }
.sl-search__clear { align-self: center; color: var(--sl-muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.sl-search__clear:hover { color: var(--sl-ink); }

/* ── 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(--sl-revenue-deep); background: var(--sl-revenue-tint); border-color: rgba(111, 133, 120, 0.34); }
.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(163, 78, 82, 0.30); }
.sl-flash--info   { color: var(--sl-data);          background: var(--sl-data-tint);    border-color: rgba(110, 70, 88, 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: minmax(0, 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
   ───────────────────────────────────────────────────────────────── */
/* Dashboard: content + a vertical welcome column inside the main panel,
   split by a thin vertical rule (no separate panel). */
.sl-dash { display: grid; grid-template-columns: minmax(0, 1fr) 268px; align-items: start; }
.sl-dash__main { grid-column: 1; grid-row: 1; min-width: 0; padding-right: 30px; }
.sl-dash__rail {
  grid-column: 2; grid-row: 1; min-width: 0;
  position: sticky; top: 100px; align-self: start;
  padding-left: 26px; border-left: 1px solid var(--sl-line);
}
@media (max-width: 1000px) {
  .sl-dash { grid-template-columns: minmax(0, 1fr); }
  .sl-dash__main { padding-right: 0; }
  .sl-dash__rail {
    grid-column: 1; grid-row: 2; position: static;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--sl-line); padding-top: 20px; margin-top: 22px;
  }
}

/* Top band split into an 80/20 pair: company identity + a stats card.
   In the welcome column it stacks vertically instead. */
.sl-welcome-split {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 26px;
}
.sl-dash__rail .sl-welcome-split { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 0; }
.sl-dash__rail .sl-welcome {
  min-width: 0; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0;
}
.sl-dash__rail .sl-welcome__id { flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.sl-dash__rail .sl-welcome__logo { width: 96px; height: 96px; }
.sl-dash__rail .sl-welcome__text { min-width: 0; }
.sl-dash__rail .sl-welcome__name { font-size: 23px; word-break: break-word; color: #F6F3EC; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.sl-dash__rail .sl-welcome__meta { color: rgba(246,243,236,0.9); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sl-dash__rail .sl-welcome__meta .sl-link { color: rgba(246,243,236,0.9); }
.sl-dash__rail .sl-welcome__since { color: rgba(246,243,236,0.74); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sl-dash__rail .sl-stat__label { color: #F6F3EC; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sl-dash__rail .sl-stat__num { color: #F6F3EC; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sl-dash__rail .sl-stat--points .sl-stat__num { color: #EBD29A; }
.sl-dash__rail .sl-stat--points .sl-stat__label { color: #F6F3EC; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sl-dash__rail .sl-stat__ico { color: rgba(246,243,236,0.82); }
.sl-dash__rail .sl-stat--points { border-top-color: rgba(255,255,255,0.18); }
.sl-dash__rail { border-left-color: rgba(255,255,255,0.16); }
@media (max-width: 900px) {
  .sl-welcome-split { grid-template-columns: minmax(0, 1fr); }
}
.sl-welcome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 22px 26px;
  background:
    radial-gradient(130% 140% at 0% 0%, var(--sl-brand-tint) 0%, transparent 46%),
    var(--sl-glass);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid var(--sl-glass-border);
  border-radius: var(--sl-radius-lg);
  box-shadow: 0 20px 42px -26px rgba(22, 20, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sl-welcome--stats { justify-content: center; }
/* 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; }
/* Stacked rows for the 20% stats card: number + label per row. */
.sl-welcome__stats--rows { flex-direction: column; gap: 16px; padding-right: 0; }
.sl-stat--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.sl-stat__lead { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.sl-stat__ico { display: inline-flex; flex: none; color: var(--sl-brand); }
.sl-stat__ico svg { width: 18px; height: 18px; display: block; }
.sl-stat--row .sl-stat__num { font-size: 20px; }
/* Points — the gamified metric, set apart with a divider + gold accent. */
.sl-stat--points { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--sl-line-2); }
.sl-stat--points .sl-stat__ico { color: var(--sl-value, #E5B45A); }
.sl-stat--points .sl-stat__label { color: var(--sl-ink); font-weight: 600; }
.sl-stat--points .sl-stat__num { color: var(--sl-value-deep, #C7902F); }

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

/* ══ Claymorphism — muted flat colour fills, soft rounded ══════
   Buttons, menu items and fields carry a flat, muted RAISE-palette
   fill (mixed toward warm grey) with a soft, low drop shadow and a
   gentle pressed state. Flat colour first, minimal 3D. */
.sl {
  --sl-clay-raise: -11px 11px 7px -9px rgba(22, 20, 18, .34), inset 0 1px 0 rgba(255, 255, 255, .4);
  --sl-clay-press: inset 0 2px 6px rgba(22,20,18,.20);
  /* Clay sand — the one muted fill still in use (nav toggle hover). */
  --sl-mut-sand: #EAE3D6;
  /* frosted-glass surfaces over the vineyard */
  --sl-glass:        rgba(250, 247, 241, 0.72);   /* content cards          */
  --sl-glass-chrome: rgba(247, 243, 236, 0.64);   /* topbar + sidebar       */
  --sl-glass-panel:  rgba(240, 233, 223, 0.28);   /* main content panel     */
  --sl-glass-border: rgba(255, 255, 255, 0.50);
  --sl-nav:          #F7F3EC;                       /* sidebar menu-item fill */
  --sl-nav-active:   #4e595a;                       /* active menu item */
}

/* Buttons — flat muted fills */
.sl-btn { box-shadow: var(--sl-clay-raise); border-color: transparent; }
.sl-btn:hover { transform: translateY(-1px); }
.sl-btn:active { transform: translateY(1px); box-shadow: var(--sl-clay-press); }
/* Button palette by role (Clay × Wine proposal, /design-system):
   primary = Dusty Wine Plum, accent = Vine Sage, gold = Champagne
   Cream, danger = Marsala, ghost = ivory. */
.sl-btn--primary { background: #6E4658; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.12); }
.sl-btn--primary:hover { background: #573648; }
.sl-btn--accent  { background: #9DB3A6; color: #232a24; }
.sl-btn--accent:hover { background: #8CA396; }
.sl-btn--gold    { background: #E3CD9E; color: #3a3327; }
.sl-btn--gold:hover { background: #D3B97F; }
.sl-btn--danger  { background: #A34E52; color: #fff; }
.sl-btn--danger:hover { background: #8A3F45; }
.sl-btn--ghost   { background: #EFE9DE; color: #3a3327; border-color: transparent; }
.sl-btn--ghost:hover { background: color-mix(in srgb, #EFE9DE 90%, #000); border-color: transparent; }

/* Per-field AI generate — round flat matte clay button: solid slate,
   soft shadow underneath, no dome/gloss. */
.sl-ai-btn {
  color: #fff;
  background: #5d6567;
  border-color: transparent;
  border-radius: 50%;
  box-shadow: 0 6px 12px -4px rgba(22, 20, 18, 0.35), 0 1px 3px rgba(22, 20, 18, 0.14);
}
.sl-ai-btn:hover {
  background: color-mix(in srgb, #5d6567 90%, #000);
  color: #fff; border-color: transparent;
  transform: translateY(-1px);
}
.sl-ai-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px -2px rgba(22, 20, 18, 0.28);
}
.sl-ai-btn.is-error { background: #b06a4a; border-color: transparent; }

/* Aroma-profile tag chips — clay toggles: raised sand when off,
   pressed sage (accent role) when selected. */
.sl-chip-check span {
  background: var(--sl-mut-sand);
  border-color: transparent;
  box-shadow: var(--sl-clay-raise);
}
.sl-chip-check:hover span { border-color: transparent; background: color-mix(in srgb, var(--sl-mut-sand) 92%, #000); }
.sl-chip-check input:checked + span {
  color: #232a24;
  background: #9DB3A6;
  border-color: transparent;
  box-shadow: var(--sl-clay-press);
}

/* Form fields — flat, soft-rounded, muted */
.sl-input, .sl-textarea, .sl-select {
  border-radius: 13px;
  background: var(--sl-surface);
  color: var(--sl-ink);
  border-color: var(--sl-line);
  box-shadow: none;
}
.sl-input:focus, .sl-textarea:focus, .sl-select:focus {
  border-color: var(--sl-brand);
  box-shadow: 0 0 0 3px var(--sl-brand-tint);
}

/* Menu buttons (sidebar) — flat muted clay rows */
/* Menu items — same sand as the sidebar, raised by a soft downward shadow. */
.sln-link {
  border-radius: 15px;
  background: var(--sl-nav);
  color: var(--sl-ink-2);
  box-shadow: 0 5px 12px -4px rgba(22,20,18,.16), 0 1px 3px rgba(22,20,18,.07);
}
.sln-link:hover {
  background: var(--sl-nav); color: var(--sl-ink); transform: translateY(-1px);
  box-shadow: 0 10px 20px -6px rgba(22,20,18,.22), 0 2px 5px rgba(22,20,18,.08);
}
.sln-link:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(22,20,18,.14); }
.sln-link.is-active {
  background: var(--sl-nav-active); color: #fff;
  box-shadow: 0 8px 16px -6px rgba(40,52,52,.55), 0 1px 3px rgba(22,20,18,.12);
}
.sln-link.is-active .sln-icon { color: #fff; }
.sln-arrow { margin-left: auto; flex: none; color: var(--sl-muted); font-size: 12px; opacity: .55; transition: transform .15s, opacity .15s, color .15s; }
.sln-link:hover .sln-arrow { transform: translateX(2px); opacity: 1; }
.sln-link.is-active .sln-arrow { color: #fff; opacity: .9; }
.sl-sidebar.is-collapsed .sln-arrow { display: none; }
.sln-foot .sln-link { background: var(--sl-nav); }
.sln-toggle:hover { background: var(--sl-mut-sand); }

/* ── 12. Small screens ───────────────────────────────────────────
   Appended last so these win over the desktop rules above without
   needing inflated selectors. Below 900px the sidebar stops being a
   grid column and becomes a drawer over the page. */
.sl-navopen {
  display: none;
  width: 40px; height: 40px;
  flex: none;
  align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--sl-ink-2);
  background: none;
  border: 0; border-radius: 11px;
  cursor: pointer;
}
.sl-navopen:hover { color: var(--sl-ink); background: var(--sl-sink); }
.sl-navscrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(22, 20, 18, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sl-navscrim[hidden] { display: none; }

@media (max-width: 900px) {
  .sl-navopen { display: inline-flex; }

  /* One column, whatever the desktop collapse state persisted. The
     :has() rule above outranks .is-nav-collapsed, so both are named. */
  .sl-body,
  .sl-body.is-nav-collapsed,
  .sl-body:has(.sl-sidebar.is-collapsed) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 14px 12px 28px;
  }

  /* The aside itself is the drawer — no second markup path to keep in
     step with the desktop nav. */
  .sl-body .sl-sidebar,
  .sl-body .sl-sidebar.is-collapsed {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: min(282px, 82vw);
    min-height: 0;
    padding: 18px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(247, 243, 236, 0.97);
    border-radius: 0 22px 22px 0;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.2, .7, .2, 1);
  }
  .sl-body .sl-sidebar.is-open { transform: none; }

  /* A drawer is never a rail: undo the collapsed presentation so a
     persisted desktop collapse cannot leave labels hidden. */
  .sl-sidebar.is-collapsed .sln-link { justify-content: flex-start; gap: 12px; padding: 11px 12px; }
  .sl-sidebar.is-collapsed .sln-label { display: block; }
  .sl-sidebar.is-collapsed .sln-icon { width: 24px; font-size: 16px; }
  .sl-sidebar.is-collapsed .sln-arrow { display: block; }
  .sln-top { display: none; }

  .sl-main { padding: 20px 16px 28px; border-radius: 18px; }

  .sl-topbar { padding: 6px 12px; gap: 8px; }
  .sl-topbar__left { gap: 6px; }
  .sl-topbar__meta { display: none; }
  .sl-brand { font-size: 18px; }
  .sl-brand__mark { height: 22px; }
  .sl-topbar__avatar-link { top: 7px; right: 12px; }
  .sl-topbar__avatar { width: 42px; height: 42px; border-width: 1.5px; }
  .sl-topbar__avatar--initials { font-size: 17px; }
  .sl-topbar__right { margin-right: 50px; }

  /* Wide content must scroll inside itself, never the page body. */
  .sl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sl-scroll-x > table { min-width: 560px; }
}

@media (max-width: 560px) {
  .sl-body,
  .sl-body.is-nav-collapsed,
  .sl-body:has(.sl-sidebar.is-collapsed) { padding: 12px 8px 24px; }
  .sl-main { padding: 16px 12px 22px; border-radius: 16px; }
}

/* Coarse pointers need a real target size on the nav and icon buttons. */
@media (pointer: coarse) {
  .sln-link { padding: 13px 12px; }
  .sl-navopen, .sln-toggle { width: 44px; height: 44px; }
}

/* Stacked under the content the welcome rail no longer sits over the
   dark backdrop it was inverted for, so its white ink lands on ivory.
   Matches the 1000px breakpoint that moves it. */
@media (max-width: 1000px) {
  .sl-dash__rail .sl-welcome__name,
  .sl-dash__rail .sl-stat__num,
  .sl-dash__rail .sl-stat__label { color: var(--sl-ink); text-shadow: none; }
  .sl-dash__rail .sl-welcome__meta,
  .sl-dash__rail .sl-welcome__meta .sl-link,
  .sl-dash__rail .sl-welcome__since,
  .sl-dash__rail .sl-stat__ico { color: var(--sl-ink-2); text-shadow: none; }
  .sl-dash__rail .sl-stat--points .sl-stat__num,
  .sl-dash__rail .sl-stat--points .sl-stat__label { color: var(--sl-value-deep); text-shadow: none; }
  .sl-dash__rail,
  .sl-dash__rail .sl-stat--points { border-color: var(--sl-line); }
}