@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   FeedBacko.me — styles.css
   ALL design tokens + base element defaults + shared component
   classes. Flattened from the DS token layer under
   extracted/_ds/feedbacko-me-design-system-5a8c37e8.../tokens/
   in order: fonts, colors, typography, spacing, base — then the
   app base section (ported feedbacko-ui.css classes + chrome).
   Font note: "Hanken Grotesk" is a stand-in for the proprietary
   brand typeface — replace with the licensed font when available.
   NOTE: never write a glob path with an asterisk-slash inside a
   CSS comment — it closes the comment and eats the next rule.
   ============================================================ */

/* ============================================================
   FeedBacko.me — Color tokens
   Brand DEEP TEAL + warm-near-black neutrals + teal tints.
   OWNER REBRAND (2026-07-10): the brand accent switched from green to the
   deep teal of the widget design system (docs/design-sources/widgets/,
   signature #0D9488). Token NAMES keep the --green-* prefix so the 70+
   consumer files need no edits — treat "green" as "brand accent".
   ============================================================ */

:root {
  /* ---- Brand accent scale (deep teal; names kept for compatibility) ---- */
  --green-50:  #F1FAF7;   /* lightest teal tint — callout panels, pill bg */
  --green-100: #CFE8E3;   /* empty-star tint / soft borders */
  --green-200: #A7E8DF;   /* duotone tint */
  --green-300: #5EEAD4;
  --green-400: #2DD4BF;   /* accent on dark surfaces */
  --green-500: #0D9488;   /* ★ core brand teal — logo, primary accent */
  --green-600: #0B7D73;   /* hover / pressed brand teal */
  --green-700: #0F766E;   /* text links on white */
  --green-800: #115E59;
  --green-900: #134E4A;   /* deep teal — "Get insights" / emphasis buttons */

  /* ---- Neutrals (warm near-black → white) ---- */
  --ink:       #10100F;   /* headings, primary text, primary buttons */
  --gray-900:  #1C1C1B;
  --gray-800:  #2E2E2C;
  --gray-700:  #4A4F55;   /* body / secondary text */
  --gray-600:  #5C636B;
  --gray-500:  #767C83;   /* tertiary text, placeholders */
  --gray-400:  #9AA0A6;
  --gray-300:  #D2D5D8;   /* strong borders, input borders */
  --gray-200:  #E5E7E9;   /* default hairline borders, dividers */
  --gray-100:  #F1F2F3;   /* chip bg, subtle fills */
  --gray-50:   #F7F8F8;   /* page section backgrounds */
  --white:     #FFFFFF;

  /* ---- Functional ---- */
  --red-600:   #C8242B;   /* required asterisk, destructive, errors */
  --amber-500: #E8A800;   /* "Best Places to Work" trophy accents */
  --star:      #10100F;   /* filled rating star (FeedBacko.me uses ink) */
  --star-empty:#C9CDD1;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Brand */
  --color-brand:          var(--green-500);
  --color-brand-hover:    var(--green-600);
  --color-brand-deep:     var(--green-900);

  /* Text */
  --text-primary:    var(--ink);
  --text-secondary:  var(--gray-700);
  --text-tertiary:   var(--gray-500);
  --text-inverse:    var(--white);
  --text-link:       var(--green-700);
  --text-on-brand:   var(--white);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-brand-tint: var(--green-50);
  --surface-overlay: rgba(16, 16, 15, 0.55);

  /* Borders */
  --border-subtle:   var(--gray-200);
  --border-default:  var(--gray-300);
  --border-focus:    var(--ink);

  /* Buttons — primary (filled black, the FeedBacko.me default CTA) */
  --button-primary-bg:       var(--ink);
  --button-primary-bg-hover: #2B2B29;
  --button-primary-fg:       var(--white);

  /* Buttons — brand (kelly green, e.g. Continue with Google) */
  --button-brand-bg:         var(--green-500);
  --button-brand-bg-hover:   var(--green-600);
  --button-brand-fg:         var(--white);

  /* Buttons — emphasis (deep forest green, e.g. Get insights) */
  --button-deep-bg:          var(--green-900);
  --button-deep-bg-hover:    #07301F;
  --button-deep-fg:          var(--white);

  /* Buttons — secondary (outline on white) */
  --button-secondary-bg:       var(--white);
  --button-secondary-bg-hover: var(--gray-50);
  --button-secondary-fg:       var(--ink);
  --button-secondary-border:   var(--gray-300);

  /* Controls */
  --control-bg:        var(--white);
  --control-border:    var(--gray-300);
  --control-placeholder: var(--gray-500);
  --switch-on:         var(--green-500);
  --switch-off:        var(--gray-300);

  /* Status */
  --status-error:    var(--red-600);
  --status-success:  var(--green-500);
}

/* ============================================================
   FeedBacko.me — Typography tokens
   One primary family (Hanken Grotesk substitute) across display,
   UI and body, differentiated by weight. Mono for code/figures.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Type scale (px) ----
     FeedBacko.me leans on big confident headings + a steady 16px body. */
  --text-display: 56px;  /* marketing hero */
  --text-4xl: 40px;      /* page titles */
  --text-3xl: 32px;      /* section headings */
  --text-2xl: 26px;      /* card / modal titles */
  --text-xl:  22px;      /* sub-headings */
  --text-lg:  18px;      /* lead text, large labels */
  --text-base:16px;      /* body default */
  --text-sm:  14px;      /* secondary / meta */
  --text-xs:  12px;      /* captions, legal */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;   /* display */
  --leading-snug:    1.25;  /* headings */
  --leading-normal:  1.4;   /* sub-headings */
  --leading-relaxed: 1.55;  /* body copy */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;  /* large display / headings */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;   /* small caps / eyebrows */

  /* ============================================================
     Semantic text roles
     ============================================================ */
  --font-hero:    var(--weight-bold) var(--text-display)/var(--leading-tight) var(--font-display);
  --font-h1:      var(--weight-bold) var(--text-4xl)/var(--leading-snug) var(--font-display);
  --font-h2:      var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --font-h3:      var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --font-h4:      var(--weight-bold) var(--text-xl)/var(--leading-normal) var(--font-display);
  --font-lead:    var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans);
  --font-body:    var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --font-body-strong: var(--weight-semibold) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --font-meta:    var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-caption: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --font-button:  var(--weight-semibold) var(--text-base)/1 var(--font-sans);
}

/* ============================================================
   FeedBacko.me — Spacing, radii, shadows, borders, layout
   4px base grid. Generous, airy spacing; subtle elevation.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* inputs, small buttons */
  --radius-lg:   12px;  /* buttons, callout panels */
  --radius-xl:   16px;  /* cards, modals */
  --radius-2xl:  20px;
  --radius-pill: 999px; /* chips, toggles, search bars, badges */
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-thin:  1px;
  --border-med:   1.5px;
  --border-thick: 2px;

  /* ---- Elevation (soft, low-contrast; FeedBacko.me leans on borders) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 16, 15, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 16, 15, 0.08), 0 1px 2px rgba(16, 16, 15, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 16, 15, 0.10);
  --shadow-lg: 0 12px 40px rgba(16, 16, 15, 0.16);   /* modals, popovers */
  --shadow-focus: 0 0 0 3px rgba(12, 170, 65, 0.30); /* brand focus ring */

  /* ---- Layout ---- */
  --container-max: 1280px;     /* product max width */
  --container-narrow: 720px;   /* forms, single-column flows */
  --header-height: 72px;
  --rail-width: 300px;         /* left/right product rails */
  --gutter: 24px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
}

/* ============================================================
   FeedBacko.me — base element defaults & helpers
   Light, non-invasive resets so specimen cards and kits inherit
   the brand voice without a CSS framework.
   ============================================================ */

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

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

  /* FeedBacko ships a single light theme (the DS defines no dark tokens). Declare it,
     so a dark-mode browser paints the canvas and native form controls light instead of
     rendering ink text on its own dark background. */
  color-scheme: light;
  background: var(--surface-page);
}

body {
  margin: 0;
  font: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

button {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Focus ring — brand green via --shadow-focus, everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Utility helpers (optional, prefixed to avoid clashes) ---- */
.gd-eyebrow {
  font: var(--font-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* === app base === */

/* Amber badge pair from feedbacko-ui.css — no amber-tint token exists
   in the DS scale (--amber-500 is the trophy accent), kept verbatim. */
:root {
  --fb-amber-fg: #B07D22;
  --fb-amber-bg: #FBF4E9;
}

body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
}

/* Brand wordmark: FeedBacko in ink, ".me" in brand green. */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.wordmark .me {
  color: var(--color-brand);
}

/* ---- Page chrome ---- */
.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--gutter);
}

/* Sidebar + content grid; minmax(0,1fr) so wide content can shrink. */
.layout-rail {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  gap: var(--gutter);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30; /* below .fb-ddoverlay (40) / .fb-ddpanel (50) */
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--gutter);
  background: var(--white);
  border-bottom: var(--border-thin) solid var(--border-subtle);
}

/* ---- Shared components ported from feedbacko-ui.css (exact look) ---- */

/* Card surface — one radius, one padding everywhere. */
.fb-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px 22px;
}

/* Status pill — tone modifier classes carry the colors. */
.fb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.fb-badge--green { background: var(--green-50); color: var(--green-900); }
.fb-badge--amber { background: var(--fb-amber-bg); color: var(--fb-amber-fg); }
.fb-badge--red   { background: #FCEBEA; color: var(--red-600); } /* red tint has no DS token */
.fb-badge--gray  { background: var(--gray-100); color: var(--text-secondary); }
.fb-badge--brand { background: var(--surface-brand-tint); color: var(--green-900); }

/* Glassdoor-style dropdown — grayish rounded borders, green (brand)
   selection highlight, never the browser's native popup. */
.fb-dd { position: relative; display: inline-block; }

/* Trigger (closed state) — mirrors the input/select chrome */
.fb-ddtrigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 38px; padding: 0 11px 0 12px;
  background: var(--white);
  border: 1px solid var(--border-default);   /* grayish, not black */
  border-radius: 10px;                        /* slightly rounded */
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-primary); cursor: pointer; outline: none; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-ddtrigger:hover { border-color: var(--gray-400); }
.fb-ddtrigger.open,
.fb-ddtrigger:focus-visible {
  border-color: var(--color-brand);                       /* green focus */
  box-shadow: 0 0 0 3px var(--surface-brand-tint);
}
.fb-ddlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-ddchev { flex: none; display: flex; color: var(--text-tertiary); transition: transform .18s ease; }
.fb-dd.open .fb-ddchev { transform: rotate(180deg); }

/* Click-away catcher */
.fb-ddoverlay { position: fixed; inset: 0; z-index: 40; background: transparent; }

/* Options panel (open state) — popover shadow kept verbatim, no DS
   token matches this two-layer recipe. */
.fb-ddpanel {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: 300px;
  background: var(--white);
  border: 1px solid var(--border-subtle);     /* grayish hairline */
  border-radius: 12px;                         /* rounded */
  box-shadow: 0 14px 32px -10px rgba(16,16,15,.24), 0 0 0 1px rgba(16,16,15,.02);
  padding: 5px; z-index: 50; max-height: 288px; overflow-y: auto;
  animation: fbDdIn .13s ease;
}
@keyframes fbDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.fb-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
}
.fb-opt:hover {                                 /* green hover, not blue */
  background: var(--surface-brand-tint);
  color: var(--green-900);
}
.fb-opt[aria-selected="true"] {                 /* green selected, not blue */
  background: var(--surface-brand-tint);
  color: var(--green-900);
  font-weight: 700;
}
.fb-optcheck { flex: none; display: flex; color: var(--color-brand); }

/* Custom date picker */
.fb-dp-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; padding: 0 11px 0 12px; background: var(--white); border: 1px solid var(--border-default); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; outline: none; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.fb-dp-trigger:hover { border-color: var(--gray-400); }
.fb-dp-trigger.open, .fb-dp-trigger:focus-visible { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--surface-brand-tint); }
.fb-dp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-dp-label.ph { color: var(--text-tertiary); font-weight: 500; }
.fb-dp-ico { flex: none; display: flex; color: var(--text-tertiary); }
.fb-dp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 256px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: 0 14px 32px -10px rgba(16,16,15,.24), 0 0 0 1px rgba(16,16,15,.02); padding: 12px; animation: fbDdIn .13s ease; }
.fb-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fb-dp-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.fb-dp-nav { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit; }
.fb-dp-nav:hover { background: var(--gray-100); }
.fb-dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.fb-dp-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); padding: 3px 0; }
.fb-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fb-dp-grid > span { height: 30px; }
.fb-dp-day { height: 30px; border-radius: 8px; border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.fb-dp-day:hover { background: var(--surface-brand-tint); color: var(--green-900); }
.fb-dp-day.today { box-shadow: inset 0 0 0 1.5px var(--border-default); }
.fb-dp-day.sel { background: var(--color-brand); color: var(--white); }
.fb-dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.fb-dp-foot-btn { border: none; background: none; color: var(--color-brand); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 2px 4px; }

/* === app chrome (FBK.ui shells — see public/app/core/ui.jsx; tokens only) === */

/* Wordmark inside FBK.ui shells; ".me" gets brand color in ui.jsx markup. */
.fbk-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* Consumer top bar — sticky (not fixed) so main content needs no offset. */
.fbk-topbar {
  position: sticky;
  top: 0;
  z-index: 30; /* below .fb-ddoverlay (40) / .fb-ddpanel (50) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--gutter);
  background: var(--white);
  border-bottom: var(--border-thin) solid var(--border-subtle);
}
.fbk-topbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.fbk-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Shell root; business/consumer/admin variant classes are page-CSS hooks. */
.fbk-shell {
  min-height: 100vh;
  background: var(--surface-page);
}

/* Sidebar column (business/admin). Width is structural in ui.jsx. */
.fbk-sidenav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--white);
  border-right: var(--border-thin) solid var(--border-subtle);
}
.fbk-sidenav-brand {
  display: block;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}
.fbk-sidenav-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fbk-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.fbk-nav-item:hover { background: var(--gray-50); color: var(--text-primary); }
.fbk-nav-item svg { flex: none; }
.fbk-nav-item-active,
.fbk-nav-item-active:hover {
  background: var(--surface-brand-tint);
  color: var(--green-900);
}
.fbk-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbk-nav-badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-brand-tint);
  color: var(--green-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
}

/* Main content wells. */
.fbk-shell-main { padding: var(--gutter); }
.fbk-consumer-main { width: 100%; padding: var(--gutter); }

/* ConfirmDialog body copy. */
.fbk-confirm-body {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Prices always come from the payload; tabular digits keep tables aligned. */
.fbk-price {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* === country tag ===
   The DS CountryFlag atom emits `.fb-flag.fi.fi-<code>` expecting the external flag-icons
   sprite sheet. We ship no external CSS, so collapse it and render FBK.ui.CountryTag instead. */
.fb-flag { display: none; }

.fbk-country {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  height: 20px;
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

/* Self-hosted country flag (FBK.ui.CountryTag) — real flag from ds/flags/<cc>.svg,
   rounded with a hairline so light flags keep an edge on white. Falls back to
   .fbk-country when the asset is missing. */
.fbk-flag-img {
  display: inline-block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: var(--border-thin) solid var(--border-subtle);
  vertical-align: middle;
}

/* === source badge (FBK.ui.SourceBadge) ===
   Whether a resolved setting value is the platform default or a business override
   (owner decision #2). Platform default = muted/neutral; "Set by you" = brand-tinted. */
.fbk-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  height: 20px;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}
.fbk-source-badge--platform {
  background: var(--surface-subtle);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.fbk-source-badge--business {
  background: var(--surface-brand-tint);
  border-color: var(--green-200);
  color: var(--green-900);
}

/* Render-error fallback (FBK.ui.ErrorBoundary) — centred in the viewport. */
.fbk-boundary {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
}

/* === admin env strip (FBK.ui.AdminShell) ===
   The active env (test|prod) is session-global and scopes EVERY admin write, so it
   is shown on every admin page with the signed-in identity + a sign-out. `test` is
   amber-tinted and `prod` carries a red live-warning ribbon, so the two lanes can
   never be confused. Tokens only. */
.fbk-adminenv-block {
  max-width: 1080px; /* matches the admin content well (.adm-wrap) */
  margin-bottom: var(--space-5);
}
.fbk-adminenv {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.fbk-adminenv--test {
  background: var(--fb-amber-bg);
  border-color: var(--amber-500);
}
.fbk-adminenv-ident { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fbk-adminenv-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fbk-adminenv-who { min-width: 0; }
.fbk-adminenv-role {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fbk-adminenv-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fbk-adminenv-spacer { flex: 1 1 auto; }
.fbk-adminenv-switch { display: flex; align-items: center; gap: var(--space-2); }
.fbk-adminenv-swlabel {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fbk-adminenv-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: var(--border-thin) solid var(--border-subtle);
}
.fbk-adminenv-segbtn {
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 5px var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.fbk-adminenv-segbtn:disabled { cursor: default; }
.fbk-adminenv-segbtn:not(.is-on):hover { color: var(--text-primary); }
.fbk-adminenv-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: currentColor; }
.fbk-adminenv-segbtn--test.is-on { background: var(--amber-500); color: var(--ink); }
.fbk-adminenv-segbtn--prod.is-on { background: var(--red-600); color: var(--text-inverse); }
.fbk-adminenv-logout {
  border: var(--border-thin) solid var(--border-default);
  background: var(--white);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: 7px var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fbk-adminenv-logout:hover { background: var(--surface-subtle); }

.fbk-adminenv-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  padding: 9px var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.fbk-adminenv-note svg { flex: none; }
.fbk-adminenv-note--test {
  background: var(--fb-amber-bg);
  color: var(--fb-amber-fg);
  border: var(--border-thin) solid var(--amber-500);
}
.fbk-adminenv-note--prod {
  background: color-mix(in srgb, var(--red-600) 8%, var(--white));
  color: var(--red-600);
  border: var(--border-thin) solid color-mix(in srgb, var(--red-600) 30%, var(--white));
}

/* Shared inline-error surface (env-switch failure + any FBK.ui inline error). */
.fbk-inline-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red-600) 8%, var(--white));
  border: var(--border-thin) solid color-mix(in srgb, var(--red-600) 30%, var(--white));
  color: var(--red-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.fbk-inline-error-icon { flex: none; margin-top: 1px; }

@media (max-width: 640px) {
  .fbk-adminenv { align-items: flex-start; }
  .fbk-adminenv-spacer { flex-basis: 100%; height: 0; }
}