/* ==========================================================================
   FoodChaser — portal design system
   Implements STYLE-GUIDE.md (FoodChaserBrandandMarketing v1.0) for the web
   portal, using the same `.fc-*` vocabulary as the marketing page so every
   FoodChaser web surface reads as one product.

   Depends on: foodchaser-tokens.css (the --fc-* custom properties). Load that
   FIRST. Never hardcode a colour, radius or size in a view — if a value is
   missing here, add it here (STYLE-GUIDE.md §1.6).

   FoodChaser is dark-only by design. There is no light theme.

   Contents
     1  Base + typography
     2  Layout scaffolding
     3  Brand bar and navigation
     4  Buttons
     5  Forms
     6  Cards, panels, tiles
     7  Chips, pills, badges, status
     8  Avatars and identity
     9  The signature components: feed post, find card, TTL bar
    10  Tables and data
    11  Empty, loading, error states
    12  Modals, drawers, toasts
    13  Tabs and pagination
    14  Photography and placeholders
    15  Utilities
    16  Bootstrap reconciliation
    17  Motion and reduced motion
    18  Kendo UI reconciliation
    19  Legacy bridge
    20  Promoted components
    21  Chrome extras
   ========================================================================== */


/* ==========================================================================
   1  Base + typography
   ========================================================================== */

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

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

body.fc,
body.fc-app {
  margin: 0;
  background: var(--fc-bg);
  color: var(--fc-on);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-body);
  line-height: var(--fc-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The page ground is never pure black and never light. A photo must be the
   brightest thing on screen (STYLE-GUIDE.md §1.2). */
.fc-app h1, .fc-app h2, .fc-app h3, .fc-app h4, .fc-app h5, .fc-app h6 {
  font-family: var(--fc-font-display);
  color: var(--fc-on);
  margin: 0;
  font-weight: 700;
}

.fc-app h1 { font-size: var(--fc-h1); line-height: var(--fc-lh-tight);  letter-spacing: var(--fc-track-display); font-weight: 800; }
.fc-app h2 { font-size: var(--fc-h2); line-height: 1.14;                letter-spacing: var(--fc-track-heading); font-weight: 800; }
.fc-app h3 { font-size: var(--fc-h3); line-height: var(--fc-lh-snug);   letter-spacing: -0.4px; }
.fc-app h4 { font-size: var(--fc-text-heading); line-height: var(--fc-lh-snug); font-weight: 600; }
.fc-app h5 { font-size: var(--fc-text-body); line-height: var(--fc-lh-snug); font-weight: 600; }

.fc-app p { margin: 0 0 var(--fc-space-3); }
.fc-app p:last-child { margin-bottom: 0; }

.fc-app a { color: var(--fc-pink-soft); text-decoration: none; transition: color var(--fc-dur-state) var(--fc-ease); }
.fc-app a:hover,
.fc-app a:focus { color: var(--fc-pink-soft); text-decoration: underline; }

.fc-app hr { border: 0; border-top: var(--fc-border) solid var(--fc-outline); margin: var(--fc-space-6) 0; }

.fc-app code, .fc-app kbd, .fc-app pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Keyboard focus is always visible — 2px pink outline (STYLE-GUIDE.md §2.6). */
/* Outline only — never a border-radius here, or it squares off the pill
   buttons and circular avatars for as long as they hold focus. */
.fc-app :focus-visible {
  outline: 2px solid var(--fc-pink-soft);
  outline-offset: 2px;
}

::selection { background: rgba(232, 23, 123, 0.32); color: var(--fc-white); }

/* Scrollbars, so the chrome stays dark end to end. */
.fc-app * { scrollbar-color: var(--fc-outline) transparent; scrollbar-width: thin; }
.fc-app *::-webkit-scrollbar { width: 10px; height: 10px; }
.fc-app *::-webkit-scrollbar-track { background: transparent; }
.fc-app *::-webkit-scrollbar-thumb { background: var(--fc-outline); border-radius: 999px; border: 2px solid var(--fc-bg); }
.fc-app *::-webkit-scrollbar-thumb:hover { background: var(--fc-outline-hover); }

/* ---- Type roles ---------------------------------------------------------- */

.fc-display  { font-family: var(--fc-font-display); font-size: var(--fc-text-display); font-weight: 600; line-height: var(--fc-lh-snug); }
.fc-title    { font-family: var(--fc-font-display); font-size: var(--fc-text-title);   font-weight: 600; line-height: var(--fc-lh-snug); letter-spacing: -0.5px; }
.fc-heading  { font-family: var(--fc-font-display); font-size: var(--fc-text-heading); font-weight: 600; line-height: var(--fc-lh-snug); }
.fc-body     { font-size: var(--fc-text-body); color: var(--fc-muted); line-height: var(--fc-lh-loose); }
.fc-lede     { font-size: 17px; color: var(--fc-muted); line-height: var(--fc-lh-normal); }
.fc-meta     { font-size: var(--fc-text-caption); color: var(--fc-muted); }
.fc-micro    { font-size: var(--fc-text-micro); font-weight: 600; color: var(--fc-subtle); }

/* Eyebrow: the live-dot pill. The dot pulse is the ONLY looping animation in
   the system and is reserved for "live right now" (STYLE-GUIDE.md §9). */
/* An eyebrow hugs its text. Both properties are needed: `align-self` stops it
   stretching in a flex column, and `justify-self` stops it stretching as a
   grid item — which is what the auth card is, and why it rendered as a
   full-bleed bar there. */
.fc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  justify-self: start;
  font-size: 12px; font-weight: 700; letter-spacing: var(--fc-track-eyebrow); text-transform: uppercase;
  color: var(--fc-pink-soft);
  background: rgba(232, 23, 123, 0.11);
  border: var(--fc-border) solid rgba(232, 23, 123, 0.32);
  border-radius: var(--fc-radius-full);
  padding: 7px 15px;
}
.fc-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fc-pink);
  box-shadow: 0 0 0 0 rgba(232, 23, 123, 0.7);
  animation: fcPulse var(--fc-dur-pulse) infinite;
}
@keyframes fcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 23, 123, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 23, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 23, 123, 0); }
}

.fc-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: var(--fc-track-kicker); text-transform: uppercase;
  color: var(--fc-subtle); margin-bottom: var(--fc-space-3);
}

.fc-pink   { color: var(--fc-pink-soft); }
.fc-yellow { color: var(--fc-yellow); }
.fc-tag    { color: var(--fc-pink-soft); font-weight: 500; }


/* ==========================================================================
   2  Layout scaffolding
   ========================================================================== */

.fc-wrap {
  width: 100%;
  max-width: var(--fc-content-max);
  margin: 0 auto;
  padding: 0 var(--fc-gutter);
}
.fc-wrap-narrow { max-width: 760px; }
.fc-wrap-wide   { max-width: 1440px; }

.fc-sec { padding: var(--fc-space-10) 0; }
.fc-sec-tight { padding: var(--fc-space-8) 0; }

/* The standard portal page: brand bar, then content. */
.fc-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.fc-page-body { flex: 1 1 auto; padding: var(--fc-space-7) 0 var(--fc-space-9); }

/* Page header inside the content area: title left, actions right. */
.fc-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fc-space-5);
  flex-wrap: wrap;
  margin-bottom: var(--fc-space-6);
  padding-bottom: var(--fc-space-5);
  border-bottom: var(--fc-border) solid var(--fc-outline);
}
.fc-page-head .fc-page-title { font-family: var(--fc-font-display); font-size: var(--fc-text-display); font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; }
.fc-page-head .fc-page-sub { color: var(--fc-muted); font-size: var(--fc-text-body); margin-top: 6px; }
.fc-page-head .fc-page-actions { display: flex; gap: var(--fc-space-3); flex-wrap: wrap; }

/* Content shell with a left rail (dashboards, settings). */
.fc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--fc-space-7); align-items: start; }
.fc-shell-wide { grid-template-columns: 288px minmax(0, 1fr); }

/* Generic responsive grids. */
.fc-grid   { display: grid; gap: var(--fc-space-5); }
.fc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Two-column feed layout: the stream, plus a sticky discovery rail. */
.fc-feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--fc-space-7); align-items: start; }
.fc-feed-rail { position: sticky; top: var(--fc-space-6); display: grid; gap: var(--fc-space-5); }

@media (max-width: 1080px) {
  .fc-feed-layout,
  .fc-shell, .fc-shell-wide { grid-template-columns: minmax(0, 1fr); }
  .fc-feed-rail { position: static; }
  .fc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-sec { padding: var(--fc-space-9) 0; }
}
@media (max-width: 620px) {
  .fc-grid-2, .fc-grid-3, .fc-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .fc-wrap { padding: 0 16px; }
}


/* ==========================================================================
   3  Brand bar and navigation

   The yellow brand bar is the strongest brand signal in the product. Every
   page that has a header uses it (STYLE-GUIDE.md §5).
   ========================================================================== */

.fc-brandbar {
  background: var(--fc-yellow);
  color: var(--fc-on-yellow);
  position: relative;
  z-index: 40;
}
.fc-brandbar-inner {
  max-width: var(--fc-content-max);
  margin: 0 auto;
  padding: 0 var(--fc-gutter);
  min-height: 60px;
  display: flex; align-items: center; gap: var(--fc-space-5);
}
.fc-brandbar a { color: var(--fc-on-yellow); }

/* The header lockup: symbol at 40px with a 10px radius, 12px gap, wordmark.
   Do not restack or reverse (STYLE-GUIDE.md §3.2). */
.fc-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.fc-lockup:hover { text-decoration: none; }
.fc-lockup img.fc-mark { width: 40px; height: 40px; border-radius: 10px; display: block; }
.fc-lockup img.fc-wordmark { height: 22px; display: block; }
.fc-lockup .fc-wordtype {
  font-family: var(--fc-font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -0.6px;
  color: var(--fc-on-yellow);
  white-space: nowrap;
}

/* Primary nav sits on the brand bar. Ink type on yellow, 12.3:1. */
.fc-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--fc-space-4); flex: 1 1 auto; }
.fc-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-radius: var(--fc-radius-full);
  font-size: 14px; font-weight: 600;
  color: rgba(35, 31, 32, 0.78);
  white-space: nowrap;
  transition: background var(--fc-dur-state) var(--fc-ease), color var(--fc-dur-state) var(--fc-ease);
}
.fc-nav a i { font-size: 14px; }
.fc-nav a:hover { background: rgba(35, 31, 32, 0.10); color: var(--fc-on-yellow); text-decoration: none; }
.fc-nav a.active {
  background: var(--fc-on-yellow);
  color: var(--fc-yellow);
}
.fc-nav a.active:hover { background: var(--fc-on-yellow); color: var(--fc-yellow); }

.fc-brandbar-end { display: flex; align-items: center; gap: var(--fc-space-2); margin-left: auto; flex: 0 0 auto; }

/* Icon button on the brand bar: 44x44 touch target, radius 22. */
.fc-iconbtn {
  width: var(--fc-touch-target); height: var(--fc-touch-target);
  border-radius: var(--fc-radius-icon);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fc-on-yellow); font-size: 16px;
  transition: background var(--fc-dur-state) var(--fc-ease);
}
.fc-iconbtn:hover { background: rgba(35, 31, 32, 0.12); }
.fc-iconbtn-dark { color: var(--fc-on); }
.fc-iconbtn-dark:hover { background: var(--fc-overlay); }

/* Unread count on an icon button. */
.fc-iconbtn { position: relative; }
.fc-iconbtn .fc-dot {
  position: absolute; top: 7px; right: 7px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--fc-pink-deep); color: var(--fc-white);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--fc-yellow);
}
.fc-iconbtn-dark .fc-dot { border-color: var(--fc-bg); }

/* Mobile: nav collapses behind a toggle. */
.fc-nav-toggle { display: none; }
@media (max-width: 940px) {
  .fc-nav-toggle { display: inline-flex; }
  .fc-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    margin: 0; padding: var(--fc-space-3) var(--fc-gutter) var(--fc-space-4);
    background: var(--fc-yellow);
    border-top: var(--fc-border) solid rgba(35, 31, 32, 0.14);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
    display: none;
  }
  .fc-nav.open { display: flex; }
  .fc-nav a { height: 46px; justify-content: flex-start; border-radius: var(--fc-radius-control); }
}

/* ---- Left rail nav ------------------------------------------------------- */

.fc-rail {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  padding: var(--fc-space-3);
  display: grid; gap: 2px;
}
.fc-rail-group {
  font-size: var(--fc-text-micro); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--fc-subtle);
  padding: var(--fc-space-4) var(--fc-space-3) var(--fc-space-2);
}
.fc-rail a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px var(--fc-space-3);
  border-radius: var(--fc-radius-control);
  color: var(--fc-muted); font-size: 14.5px; font-weight: 500;
  transition: background var(--fc-dur-state) var(--fc-ease), color var(--fc-dur-state) var(--fc-ease);
}
.fc-rail a i { width: 18px; text-align: center; font-size: 15px; color: var(--fc-subtle); transition: color var(--fc-dur-state) var(--fc-ease); }
.fc-rail a:hover { background: var(--fc-overlay); color: var(--fc-on); text-decoration: none; }
.fc-rail a:hover i { color: var(--fc-pink); }
.fc-rail a.active { background: rgba(232, 23, 123, 0.12); color: var(--fc-on); font-weight: 600; }
.fc-rail a.active i { color: var(--fc-pink); }
.fc-rail a .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--fc-subtle); }

/* ---- Bottom tab bar (mobile, mirrors the app) ---------------------------- */

.fc-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  background: var(--fc-raised);
  border-top: var(--fc-border) solid var(--fc-outline);
  padding-bottom: env(safe-area-inset-bottom);
}
/* The app sets the inactive label to OnSurfaceFaint and the active one to
   BrandPink. Both are legal in the app at its label size, but on the web this
   label is 9px: faint would be 3.8:1 and pink 4.32:1, and neither passes. The
   label therefore takes --fc-subtle / --fc-pink-soft, and the *icon* keeps the
   full BrandPink, where the threshold is 3:1 for a non-text graphic. Same
   read, no failure. */
.fc-tabbar a {
  flex: 1; text-align: center; padding: 9px 0 11px;
  font-size: var(--fc-text-micro); letter-spacing: 0.3px; color: var(--fc-subtle);
  text-decoration: none;
}
.fc-tabbar a i, .fc-tabbar a svg { display: block; font-size: 15px; margin: 0 auto 4px; }
.fc-tabbar a.active { color: var(--fc-pink-soft); }
.fc-tabbar a.active i, .fc-tabbar a.active svg { color: var(--fc-pink); }
.fc-tabbar a:hover { text-decoration: none; }
@media (max-width: 760px) {
  .fc-tabbar { display: flex; }
  .fc-has-tabbar .fc-page-body { padding-bottom: 84px; }
}

/* ---- Footer -------------------------------------------------------------- */

.fc-footer {
  border-top: var(--fc-border) solid var(--fc-outline);
  background: var(--fc-bg);
  padding: var(--fc-space-8) 0 var(--fc-space-7);
  color: var(--fc-muted);
  font-size: 14px;
}
.fc-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--fc-space-7); }
.fc-footer h5 {
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-micro); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--fc-subtle); margin-bottom: var(--fc-space-4);
}
.fc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-footer a { color: var(--fc-muted); }
.fc-footer a:hover { color: var(--fc-pink-soft); text-decoration: none; }
.fc-footer-legal {
  margin-top: var(--fc-space-7);
  padding-top: var(--fc-space-5);
  border-top: var(--fc-border) solid var(--fc-outline);
  display: flex; justify-content: space-between; gap: var(--fc-space-4); flex-wrap: wrap;
  font-size: var(--fc-text-caption); color: var(--fc-subtle);
}
@media (max-width: 860px) { .fc-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fc-footer-grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   4  Buttons

   Pink means act (STYLE-GUIDE.md §1.3). One primary button per screen.
   Primary fill is --fc-pink-deep so white 15px type reaches 5.6:1 (§2.6).
   ========================================================================== */

.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-body);
  line-height: 1;
  padding: 15px 26px;
  min-height: var(--fc-control-height);
  border-radius: var(--fc-radius-full);
  border: var(--fc-border) solid transparent;
  background: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fc-dur-press) var(--fc-ease),
              box-shadow var(--fc-dur-press) var(--fc-ease),
              background var(--fc-dur-press) var(--fc-ease),
              border-color var(--fc-dur-press) var(--fc-ease),
              color var(--fc-dur-press) var(--fc-ease);
}
.fc-btn:hover, .fc-btn:focus { text-decoration: none; }
.fc-btn i { font-size: 16px; }

.fc-btn-primary { background: var(--fc-pink-deep); color: var(--fc-white); box-shadow: var(--fc-shadow-cta); }
.fc-btn-primary:hover,
.fc-btn-primary:focus { background: var(--fc-pink-hover); color: var(--fc-white); transform: translateY(-2px); box-shadow: var(--fc-shadow-cta-hover); }

.fc-btn-ghost { background: transparent; color: var(--fc-on); border-color: var(--fc-outline); }
.fc-btn-ghost:hover,
.fc-btn-ghost:focus { border-color: var(--fc-pink); color: var(--fc-pink-soft); transform: translateY(-2px); }

.fc-btn-secondary { background: var(--fc-overlay); color: var(--fc-on); }
.fc-btn-secondary:hover, .fc-btn-secondary:focus { background: var(--fc-overlay-hover); color: var(--fc-on); transform: translateY(-2px); }

.fc-btn-danger { background: transparent; color: var(--fc-danger); border-color: var(--fc-danger); }
.fc-btn-danger:hover, .fc-btn-danger:focus { background: rgba(255, 77, 72, 0.12); color: var(--fc-danger); }

/* Yellow is identity, never a button (STYLE-GUIDE.md §1.3) — the one
   exception is a brand-bar-adjacent CTA where yellow IS the brand statement,
   so it is opt-in and carries ink type at 12.3:1. */
.fc-btn-brand { background: var(--fc-yellow); color: var(--fc-on-yellow); font-weight: 700; }
.fc-btn-brand:hover, .fc-btn-brand:focus { background: var(--fc-yellow-hover); color: var(--fc-on-yellow); transform: translateY(-2px); }

.fc-btn-link { background: none; border: 0; min-height: 0; padding: 0; color: var(--fc-pink-soft); box-shadow: none; }
.fc-btn-link:hover { text-decoration: underline; transform: none; }

.fc-btn-sm  { padding: 10px 18px; min-height: 40px; font-size: 13.5px; }
.fc-btn-lg  { padding: 18px 34px; min-height: 58px; font-size: 16.5px; }
.fc-btn-block { display: flex; width: 100%; }

.fc-btn[disabled], .fc-btn.disabled {
  background: var(--fc-overlay); color: var(--fc-faint); border-color: transparent;
  box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none;
}

.fc-btn-row { display: flex; gap: var(--fc-space-3); flex-wrap: wrap; align-items: center; }

/* Equal-weight paired actions (find card, confirmations). Same size, never
   the same colour — the affirmative one is solid (STYLE-GUIDE.md §6.4). */
.fc-btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fc-space-2); }
.fc-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border-radius: var(--fc-radius-control);
  border: var(--fc-border) solid var(--fc-outline);
  background: transparent; color: var(--fc-on);
  font-size: 12.5px; font-weight: 600; font-family: var(--fc-font-body);
  cursor: pointer;
  transition: background var(--fc-dur-press) var(--fc-ease), border-color var(--fc-dur-press) var(--fc-ease);
}
.fc-mini:hover { border-color: var(--fc-pink); color: var(--fc-on); text-decoration: none; }
.fc-mini.solid { background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); color: var(--fc-white); }
.fc-mini.solid:hover { background: var(--fc-pink-hover); border-color: var(--fc-pink-hover); color: var(--fc-white); }


/* ==========================================================================
   5  Forms

   Field: SurfaceRaised fill, 1px Outline, radius 14, height 50 (§6.8).
   ========================================================================== */

.fc-form { display: grid; gap: var(--fc-space-5); }
.fc-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-space-4); }
@media (max-width: 620px) { .fc-form-row { grid-template-columns: minmax(0, 1fr); } }

.fc-field { display: grid; gap: 7px; }
.fc-label {
  font-size: var(--fc-text-caption); font-weight: 600; color: var(--fc-on);
  letter-spacing: 0.1px;
}
.fc-label .req { color: var(--fc-pink-soft); margin-left: 3px; }
.fc-help { font-size: var(--fc-text-caption); color: var(--fc-subtle); line-height: 1.5; }

.fc-input, .fc-select, .fc-textarea {
  width: 100%;
  height: var(--fc-field-height);
  padding: 0 var(--fc-space-4);
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  color: var(--fc-on);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-body);
  transition: border-color var(--fc-dur-state) var(--fc-ease), box-shadow var(--fc-dur-state) var(--fc-ease);
  appearance: none;
}
.fc-textarea { height: auto; min-height: 120px; padding: 14px var(--fc-space-4); line-height: 1.6; resize: vertical; }

.fc-input::placeholder, .fc-textarea::placeholder { color: var(--fc-faint); }
.fc-input:hover, .fc-select:hover, .fc-textarea:hover { border-color: var(--fc-outline-hover); }
.fc-input:focus, .fc-select:focus, .fc-textarea:focus {
  outline: none;
  border-color: var(--fc-pink);
  box-shadow: 0 0 0 3px rgba(232, 23, 123, 0.18);
}
.fc-input[disabled], .fc-select[disabled], .fc-textarea[disabled] {
  background: var(--fc-overlay); color: var(--fc-faint); cursor: not-allowed;
}

.fc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A7A7AE' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--fc-space-4) center;
  background-size: 11px;
  padding-right: 42px;
}
.fc-select option { background: var(--fc-raised); color: var(--fc-on); }

/* Input with a leading glyph — search, location, money. */
.fc-input-group { position: relative; }
.fc-input-group > i {
  position: absolute; left: var(--fc-space-4); top: 50%; transform: translateY(-50%);
  color: var(--fc-subtle); font-size: 14px; pointer-events: none;
}
.fc-input-group .fc-input { padding-left: 42px; }
.fc-input-group.trailing > i { left: auto; right: var(--fc-space-4); }
.fc-input-group.trailing .fc-input { padding-left: var(--fc-space-4); padding-right: 42px; }

/* Search field — pill, because search is discovery, not data entry. */
.fc-search .fc-input { border-radius: var(--fc-radius-full); }

/* Checkbox and radio. */
.fc-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 14.5px; color: var(--fc-muted); }
.fc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-check .box {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px;
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: 6px;
  background: var(--fc-raised);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--fc-dur-state) var(--fc-ease), border-color var(--fc-dur-state) var(--fc-ease);
}
.fc-check .box::after {
  content: ''; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid var(--fc-white); border-bottom: 2px solid var(--fc-white);
  transform: rotate(-45deg) scale(0.6); opacity: 0;
  transition: opacity var(--fc-dur-press) var(--fc-ease), transform var(--fc-dur-press) var(--fc-ease);
}
.fc-check input:checked + .box { background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); }
.fc-check input:checked + .box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.fc-check input:focus-visible + .box { outline: 2px solid var(--fc-pink-soft); outline-offset: 2px; }
.fc-check.radio .box { border-radius: 50%; }
.fc-check.radio .box::after { width: 8px; height: 8px; margin: 0; border: 0; border-radius: 50%; background: var(--fc-white); transform: scale(0.4); }
.fc-check.radio input:checked + .box::after { transform: scale(1); }

/* Toggle — used for the composer's "this spot is open right now" switch, which
   is always opt-in and never implied (BRAND.md §2). */
.fc-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.fc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch .track {
  width: 46px; height: 27px; border-radius: 999px;
  background: var(--fc-overlay); border: var(--fc-border) solid var(--fc-outline);
  position: relative; transition: background var(--fc-dur-state) var(--fc-ease), border-color var(--fc-dur-state) var(--fc-ease);
}
.fc-switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--fc-muted);
  transition: transform var(--fc-dur-state) var(--fc-ease), background var(--fc-dur-state) var(--fc-ease);
}
.fc-switch input:checked + .track { background: rgba(232, 23, 123, 0.32); border-color: var(--fc-pink); }
.fc-switch input:checked + .track::after { transform: translateX(19px); background: var(--fc-pink); }
.fc-switch input:focus-visible + .track { outline: 2px solid var(--fc-pink-soft); outline-offset: 2px; }

/* Validation. Errors go below the field, never in the placeholder (§6.8). */
.fc-error, .field-validation-error, .validation-summary-errors {
  color: var(--fc-danger);
  font-size: var(--fc-text-caption);
  line-height: 1.5;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.fc-input.input-validation-error,
.fc-select.input-validation-error,
.fc-textarea.input-validation-error,
.fc-input.fc-invalid { border-color: var(--fc-danger); box-shadow: 0 0 0 3px rgba(255, 77, 72, 0.14); }
.validation-summary-valid { display: none; }

/* File / photo upload — the photo is mandatory on a report, so make the
   dropzone read as the primary act, not an afterthought. */
.fc-drop {
  border: 1.5px dashed var(--fc-outline);
  border-radius: var(--fc-radius-card);
  background: var(--fc-raised);
  padding: var(--fc-space-7) var(--fc-space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fc-dur-state) var(--fc-ease), background var(--fc-dur-state) var(--fc-ease);
}
.fc-drop:hover, .fc-drop.dragover { border-color: var(--fc-pink); background: rgba(232, 23, 123, 0.06); }
.fc-drop i { font-size: 26px; color: var(--fc-pink); display: block; margin-bottom: var(--fc-space-3); }
.fc-drop .t { font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-body); }
.fc-drop .s { color: var(--fc-subtle); font-size: var(--fc-text-caption); margin-top: 5px; }


/* ==========================================================================
   6  Cards, panels, tiles

   Separation comes from SurfaceRaised against Surface plus a 1px outline.
   Cards do not get drop shadows on dark (STYLE-GUIDE.md §5).
   ========================================================================== */

.fc-card {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  padding: var(--fc-space-4) var(--fc-space-4) 14px;
}
.fc-card-pad { padding: var(--fc-space-6); }
.fc-card-flush { padding: 0; overflow: hidden; }

.fc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-4);
  padding: var(--fc-space-5) var(--fc-space-6);
  border-bottom: var(--fc-border) solid var(--fc-outline);
}
.fc-card-head h3, .fc-card-head h4 { font-size: 17.5px; font-weight: 700; }
.fc-card-body { padding: var(--fc-space-6); }
.fc-card-foot {
  padding: var(--fc-space-4) var(--fc-space-6);
  border-top: var(--fc-border) solid var(--fc-outline);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--fc-space-3);
}

/* Panel — the larger container, 22px radius (§5). */
.fc-panel {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-panel);
  overflow: hidden;
}

/* Feature tile — hover lift with a pink border, for anything clickable. */
.fc-tile {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-tile);
  padding: 28px;
  display: block;
  color: inherit;
  transition: border-color var(--fc-dur-state) var(--fc-ease), transform var(--fc-dur-state) var(--fc-ease);
}
.fc-tile:hover { border-color: rgba(232, 23, 123, 0.55); transform: translateY(-3px); text-decoration: none; color: inherit; }
.fc-tile .ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 23, 123, 0.13); color: var(--fc-pink);
  font-size: 19px; margin-bottom: 18px;
}
.fc-tile h3 { font-size: 17.5px; font-weight: 700; }
.fc-tile p { color: var(--fc-muted); font-size: 14.5px; line-height: 1.68; margin-top: 10px; }
.fc-tile .new { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--fc-yellow); margin-left: 8px; vertical-align: middle; }

/* Stat dial — one number, one label. Numbers beat adjectives (BRAND.md §8). */
.fc-dials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fc-space-5); }
.fc-dial {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-tile);
  padding: var(--fc-space-5) var(--fc-space-6);
}
.fc-dial .n {
  font-family: var(--fc-font-display);
  font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1;
  color: var(--fc-pink);
}
.fc-dial .l { font-size: 12.5px; color: var(--fc-muted); margin-top: 8px; line-height: 1.45; }
.fc-dial .d { font-size: var(--fc-text-micro); font-weight: 700; margin-top: 8px; }
.fc-dial .d.up { color: var(--fc-success); }
.fc-dial .d.down { color: var(--fc-danger); }
.fc-dial.yellow .n { color: var(--fc-yellow); }
@media (max-width: 900px) { .fc-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fc-dials { grid-template-columns: minmax(0, 1fr); } }

/* Highlight panel — the one place a pink/yellow wash is permitted, for a
   vendor callout or an upsell. Never behind body copy (§2.5). */
/* A flat pink tint, not a gradient. The pink-to-yellow ramp is the TTL bar's
   and reusing it as decoration destroys the "time running out" reading it
   carries there (STYLE-GUIDE.md §2.5). */
.fc-callout {
  background: rgba(232, 23, 123, 0.09);
  border: var(--fc-border) solid rgba(232, 23, 123, 0.28);
  border-radius: var(--fc-radius-panel);
  padding: var(--fc-space-7);
}
.fc-callout h3 { font-size: 25px; font-weight: 700; letter-spacing: -0.4px; }
.fc-callout p { color: var(--fc-muted); font-size: 15.5px; line-height: var(--fc-lh-loose); margin-top: 12px; max-width: 640px; }

/* Hero band for signed-out and landing surfaces. */
.fc-hero {
  position: relative;
  padding: var(--fc-space-10) 0;
  background:
    radial-gradient(820px 460px at 12% -10%, rgba(232, 23, 123, 0.22), transparent 64%),
    radial-gradient(700px 420px at 88% 4%, rgba(255, 222, 89, 0.08), transparent 62%),
    var(--fc-bg);
  border-bottom: var(--fc-border) solid var(--fc-outline);
}
.fc-hero h1 em { font-style: normal; color: var(--fc-pink); }
.fc-hero .fc-lede { font-size: 19px; max-width: 540px; }
.fc-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }


/* ==========================================================================
   7  Chips, pills, badges, status

   A find's state carries a label, never a hue alone (STYLE-GUIDE.md §2.6).
   ========================================================================== */

.fc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--fc-radius-full);
  background: var(--fc-overlay);
  color: var(--fc-muted);
  border: var(--fc-border) solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap;
}
.fc-chip i { font-size: 10px; }
.fc-chip-sq { border-radius: var(--fc-radius-chip); }

/* Interactive chip — the hashtag / cuisine filter row. This is the main
   discovery affordance on the web feed. */
.fc-chip-btn {
  cursor: pointer;
  border-color: var(--fc-outline);
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--fc-muted);
  transition: border-color var(--fc-dur-state) var(--fc-ease), color var(--fc-dur-state) var(--fc-ease), background var(--fc-dur-state) var(--fc-ease);
}
.fc-chip-btn:hover { border-color: var(--fc-pink); color: var(--fc-on); text-decoration: none; }
.fc-chip-btn.on { background: rgba(232, 23, 123, 0.14); border-color: rgba(232, 23, 123, 0.5); color: var(--fc-pink-soft); }

.fc-chip-row { display: flex; gap: var(--fc-space-2); flex-wrap: wrap; align-items: center; }
.fc-chip-scroll {
  display: flex; gap: var(--fc-space-2); overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.fc-chip-scroll::-webkit-scrollbar { display: none; }

/* State chips. Reported -> Live -> Fading -> Closed, always in that order. */
.fc-chip-live   { background: rgba(59, 208, 122, 0.16); color: var(--fc-success); border-color: rgba(59, 208, 122, 0.4); }
.fc-chip-fading { background: rgba(255, 197, 61, 0.10); color: var(--fc-warning); border-color: rgba(255, 197, 61, 0.35); }
.fc-chip-report { background: rgba(255, 222, 89, 0.10); color: var(--fc-yellow);  border-color: rgba(255, 222, 89, 0.35); }
.fc-chip-closed { background: var(--fc-overlay); color: var(--fc-subtle); border-color: var(--fc-outline); }
.fc-chip-danger { background: rgba(255, 77, 72, 0.12); color: var(--fc-danger); border-color: rgba(255, 77, 72, 0.38); }
.fc-chip-pink   { background: rgba(232, 23, 123, 0.13); color: var(--fc-pink-soft); border-color: rgba(232, 23, 123, 0.4); }
.fc-chip-vendor { background: rgba(255, 222, 89, 0.12); color: var(--fc-yellow); border-color: rgba(255, 222, 89, 0.38); }

/* Distance chip over a photo: scrim plus blur so type stays legible (§6.3). */
.fc-chip-dist {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--fc-on-scrim);
  border-color: rgba(255, 255, 255, 0.14);
}

/* The presence pill — the app's badge signature, carried over verbatim:
   11px semibold uppercase, BrandYellow on translucent black, radius 9. It sits
   on the photo, so the scrim is part of the component. The app suppresses the
   pill entirely when a post has no live place; do the same here rather than
   painting an empty chip (STYLE-GUIDE.md §6.3). */
.fc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: var(--fc-radius-chip);
  background: var(--fc-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--fc-yellow);
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap;
}
.fc-pill-dist { color: var(--fc-white); letter-spacing: 0.2px; }

/* The countdown clock. Yellow, 11px bold, never wraps (§6.3). */
.fc-clock { font-size: 11px; font-weight: 700; color: var(--fc-yellow); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-clock i { margin-right: 5px; }

.fc-badge-new {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--fc-on-yellow); background: var(--fc-yellow);
  padding: 3px 7px; border-radius: 5px;
}


/* ==========================================================================
   8  Avatars and identity
   ========================================================================== */

.fc-avatar {
  width: var(--fc-avatar); height: var(--fc-avatar);
  border-radius: 50%;
  background: var(--fc-grad-avatar);
  color: var(--fc-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  flex: 0 0 auto;
  overflow: hidden;
  text-transform: uppercase;
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-avatar-38 { width: 38px; height: 38px; font-size: 14px; }
.fc-avatar-52 { width: 52px; height: 52px; font-size: 18px; }
.fc-avatar-80 { width: 80px; height: 80px; font-size: 27px; }
.fc-avatar-120 { width: 120px; height: 120px; font-size: 40px; }

/* A ring marks a chaser who is out right now. */
.fc-avatar-live { box-shadow: 0 0 0 2px var(--fc-bg), 0 0 0 4px var(--fc-pink); }

.fc-avatar-stack { display: inline-flex; }
.fc-avatar-stack .fc-avatar { margin-left: -9px; box-shadow: 0 0 0 2px var(--fc-raised); }
.fc-avatar-stack .fc-avatar:first-child { margin-left: 0; }

/* Identity line: avatar, handle, place and distance. */
.fc-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fc-who .n { font-size: 13px; font-weight: 600; color: var(--fc-on); line-height: var(--fc-lh-snug); }
.fc-who .s { font-size: 11px; color: var(--fc-subtle); }
.fc-who .n a { color: inherit; }


/* ==========================================================================
   9  The signature components

   The feed post and the find card are what make this look like FoodChaser
   and not a dashboard. Both are lifted from the app (STYLE-GUIDE.md §6.4–6.5).
   ========================================================================== */

/* ---- Feed post ----------------------------------------------------------- */

.fc-post {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  overflow: hidden;
  margin-bottom: var(--fc-space-4);
  transition: border-color var(--fc-dur-state) var(--fc-ease);
}
.fc-post:hover { border-color: var(--fc-outline-hover); }
.fc-post-head { display: flex; align-items: center; gap: 9px; padding: 11px var(--fc-space-3); }
.fc-post-head .fc-post-more { margin-left: auto; color: var(--fc-subtle); background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.fc-post-head .fc-post-more:hover { color: var(--fc-on); }

.fc-post-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;               /* feed photos are 4:5 or 1:1 (§8) */
  background: var(--fc-grad-photo);
  overflow: hidden;
}
.fc-post-photo.square { aspect-ratio: 1 / 1; }
.fc-post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-post-photo .glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: rgba(232, 23, 123, 0.5);
}
.fc-post-photo .fc-chip { position: absolute; }
.fc-post-photo .fc-chip.tl { top: 10px; left: 10px; }
.fc-post-photo .fc-chip.tr { top: 10px; right: 10px; }
.fc-post-photo .fc-chip.br { bottom: 10px; right: 10px; }
.fc-post-photo .fc-chip.bl { bottom: 10px; left: 10px; }

.fc-post-actions {
  display: flex; align-items: center; gap: var(--fc-space-4);
  padding: 11px var(--fc-space-3) 5px;
  font-size: 14px; color: var(--fc-muted);
}
.fc-post-actions button, .fc-post-actions a {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: inherit; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  transition: color var(--fc-dur-press) var(--fc-ease), transform var(--fc-dur-press) var(--fc-ease);
}
.fc-post-actions button:hover, .fc-post-actions a:hover { color: var(--fc-on); text-decoration: none; }
/* A liked heart is BrandPink, but the count beside it is 12.5px text and pink
   would be 4.32:1. Colour the glyph, leave the number readable. */
.fc-post-actions .liked, .fc-post-actions .saved { color: var(--fc-muted); }
.fc-post-actions .liked:hover, .fc-post-actions .saved:hover { color: var(--fc-on); }
.fc-post-actions .liked i, .fc-post-actions .liked svg { color: var(--fc-pink); }
.fc-post-actions .saved i, .fc-post-actions .saved svg { color: var(--fc-yellow); }
.fc-post-actions .spacer { margin-left: auto; }

.fc-post-cap { padding: 0 var(--fc-space-3) 12px; font-size: 13px; color: var(--fc-muted); line-height: 1.55; }
.fc-post-cap b { color: var(--fc-on); font-weight: 600; }
.fc-post-cap a.tag { color: var(--fc-pink-soft); }

.fc-post-comments { padding: 0 var(--fc-space-3) 12px; display: grid; gap: 7px; }
.fc-post-comment { font-size: 12.5px; color: var(--fc-muted); line-height: 1.5; }
.fc-post-comment b { color: var(--fc-on); font-weight: 600; }

/* ---- Find card — the signature component --------------------------------- */

.fc-find {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  padding: 14px;
}
.fc-find-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fc-find-name { font-family: var(--fc-font-display); font-size: 14px; font-weight: 700; line-height: var(--fc-lh-snug); }
.fc-find-meta { font-size: 11px; color: var(--fc-subtle); margin-top: 3px; }

/* TTL bar: 5px, radius 999, track SurfaceOverlay, fill pink -> yellow.
   Width = remaining / ceiling. This gradient is used here and NOWHERE else
   (STYLE-GUIDE.md §2.5). Width transitions on refresh, not continuously. */
.fc-ttl {
  height: 5px; border-radius: var(--fc-radius-full);
  background: var(--fc-overlay);
  margin-top: var(--fc-space-3);
  overflow: hidden;
}
.fc-ttl > span {
  display: block; height: 100%; border-radius: var(--fc-radius-full);
  background: var(--fc-grad-ttl);
  transition: width 400ms var(--fc-ease);
}
.fc-find .fc-btn-pair { margin-top: var(--fc-space-3); }

/* ---- Discovery rail widgets ---------------------------------------------- */

.fc-widget {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  padding: var(--fc-space-4);
}
.fc-widget-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-3);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-micro); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--fc-subtle);
  margin-bottom: var(--fc-space-4);
}
.fc-widget-title a { font-size: var(--fc-text-micro); letter-spacing: 0.4px; }

/* A person to follow / a spot to try. */
.fc-suggest { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.fc-suggest + .fc-suggest { border-top: var(--fc-border) solid var(--fc-outline); }
.fc-suggest .m { min-width: 0; flex: 1; }
.fc-suggest .m .n { font-size: 13.5px; font-weight: 600; color: var(--fc-on); }
.fc-suggest .m .s { font-size: 11px; color: var(--fc-subtle); }
.fc-suggest .fc-mini { height: 32px; padding: 0 12px; font-size: 12px; }

/* Trending hashtag list. */
.fc-trend { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fc-space-3); padding: 8px 0; }
.fc-trend + .fc-trend { border-top: var(--fc-border) solid var(--fc-outline); }
.fc-trend .t { font-size: 14px; font-weight: 600; color: var(--fc-pink-soft); }
.fc-trend .c { font-size: 11px; color: var(--fc-subtle); }

/* Photo mosaic — a profile grid or a "what people are eating" strip. The food
   is the interface, so let the photos run edge to edge with a 2px gutter. */
.fc-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: var(--fc-radius-card); overflow: hidden; }
.fc-mosaic a { display: block; aspect-ratio: 1 / 1; background: var(--fc-grad-photo); position: relative; }
.fc-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--fc-dur-state) var(--fc-ease); }
.fc-mosaic a:hover img { transform: scale(1.04); }
.fc-mosaic a .fc-chip { position: absolute; bottom: 6px; left: 6px; }


/* ==========================================================================
   10  Tables and data
   ========================================================================== */

.fc-table-wrap {
  min-width: 0;
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
  overflow: hidden;
}
.fc-table-scroll { overflow-x: auto; }

.fc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-table th {
  text-align: left;
  padding: 13px var(--fc-space-4);
  background: var(--fc-overlay);
  color: var(--fc-subtle);
  font-size: var(--fc-text-micro); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
  border-bottom: var(--fc-border) solid var(--fc-outline);
}
.fc-table th a { color: inherit; }
.fc-table td {
  padding: 14px var(--fc-space-4);
  color: var(--fc-muted);
  border-bottom: var(--fc-border) solid var(--fc-outline);
  vertical-align: middle;
}
.fc-table tbody tr:last-child td { border-bottom: 0; }
.fc-table tbody tr { transition: background var(--fc-dur-state) var(--fc-ease); }
.fc-table tbody tr:hover { background: rgba(255, 255, 255, 0.028); }
.fc-table td.strong, .fc-table td b { color: var(--fc-on); font-weight: 600; }
.fc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-table td.actions { text-align: right; white-space: nowrap; }
.fc-table caption { caption-side: top; text-align: left; padding: var(--fc-space-4); color: var(--fc-subtle); font-size: var(--fc-text-caption); }

/* Toolbar above a table: search, filters, actions. */
.fc-toolbar {
  display: flex; align-items: center; gap: var(--fc-space-3); flex-wrap: wrap;
  margin-bottom: var(--fc-space-4);
}
.fc-toolbar .fc-search { flex: 1 1 240px; max-width: 380px; }
.fc-toolbar .grow { flex: 1 1 auto; }

/* Key/value list for detail panes. */
.fc-kv { display: grid; gap: 0; }
.fc-kv > div {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--fc-space-4);
  padding: 12px 0;
  border-bottom: var(--fc-border) solid var(--fc-outline);
  font-size: 14px;
}
.fc-kv > div:last-child { border-bottom: 0; }
.fc-kv dt, .fc-kv .k { color: var(--fc-subtle); font-size: var(--fc-text-caption); }
.fc-kv dd, .fc-kv .v { margin: 0; color: var(--fc-on); }
@media (max-width: 560px) { .fc-kv > div { grid-template-columns: minmax(0, 1fr); gap: 3px; } }


/* ==========================================================================
   11  Empty, loading, error states

   Every list carries an empty panel: title, one line of body, at most one
   action. Matter-of-fact, one action (BRAND.md §8, STYLE-GUIDE.md §5).
   ========================================================================== */

.fc-empty {
  text-align: center;
  padding: var(--fc-space-9) var(--fc-space-5);
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
}
.fc-empty .ic {
  width: 62px; height: 62px; border-radius: 18px;
  background: rgba(232, 23, 123, 0.13); color: var(--fc-pink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: var(--fc-space-5);
}
.fc-empty h4 { font-size: var(--fc-text-heading); font-weight: 600; }
.fc-empty p { color: var(--fc-muted); font-size: var(--fc-text-body); margin: 10px auto 0; max-width: 420px; line-height: var(--fc-lh-normal); }
.fc-empty .fc-btn { margin-top: var(--fc-space-6); }

/* Skeletons — a shimmer where content will land, so a slow list does not
   look broken. Never a spinner replacing content already on screen (§6.7). */
.fc-skel { background: var(--fc-overlay); border-radius: 8px; position: relative; overflow: hidden; }
.fc-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  transform: translateX(-100%);
  animation: fcShimmer 1.4s infinite;
}
@keyframes fcShimmer { to { transform: translateX(100%); } }
.fc-skel-line { height: 12px; margin-bottom: 8px; }
.fc-skel-photo { aspect-ratio: 4 / 5; border-radius: var(--fc-radius-card); }

/* Full-screen HUD scrim with a centred indicator. */
.fc-hud {
  position: fixed; inset: 0; z-index: 90;
  background: var(--fc-scrim);
  display: flex; align-items: center; justify-content: center;
}
.fc-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(232, 23, 123, 0.25);
  border-top-color: var(--fc-pink);
  animation: fcSpin 800ms linear infinite;
}
@keyframes fcSpin { to { transform: rotate(360deg); } }

/* Inline notices. Own an error we caused; explain a refusal, never scold. */
.fc-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px var(--fc-space-4);
  border-radius: var(--fc-radius-control);
  border: var(--fc-border) solid var(--fc-outline);
  background: var(--fc-raised);
  font-size: 14px; color: var(--fc-muted); line-height: 1.55;
}
.fc-note i { margin-top: 2px; font-size: 14px; }
.fc-note b { color: var(--fc-on); font-weight: 600; display: block; margin-bottom: 2px; }
.fc-note-ok    { border-color: rgba(59, 208, 122, 0.38); background: rgba(59, 208, 122, 0.08); }
.fc-note-ok i  { color: var(--fc-success); }
.fc-note-warn  { border-color: rgba(255, 197, 61, 0.34); background: rgba(255, 197, 61, 0.07); }
.fc-note-warn i { color: var(--fc-warning); }
.fc-note-bad   { border-color: rgba(255, 77, 72, 0.36); background: rgba(255, 77, 72, 0.08); }
.fc-note-bad i { color: var(--fc-danger); }
.fc-note-info i { color: var(--fc-pink); }


/* ==========================================================================
   12  Modals, drawers, toasts
   ========================================================================== */

.fc-modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: var(--fc-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--fc-space-5);
}
.fc-modal {
  width: 100%; max-width: 520px;
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-panel);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  max-height: calc(100vh - 2 * var(--fc-space-5));
  display: flex; flex-direction: column;
}
.fc-modal-lg { max-width: 760px; }
.fc-modal-head {
  display: flex; align-items: center; gap: var(--fc-space-4);
  padding: var(--fc-space-5) var(--fc-space-6);
  border-bottom: var(--fc-border) solid var(--fc-outline);
}
.fc-modal-head h4 { font-size: var(--fc-text-title); font-weight: 600; letter-spacing: -0.4px; }
.fc-modal-head .fc-iconbtn { margin-left: auto; }
.fc-modal-body { padding: var(--fc-space-6); overflow-y: auto; }
.fc-modal-foot {
  padding: var(--fc-space-4) var(--fc-space-6) var(--fc-space-5);
  border-top: var(--fc-border) solid var(--fc-outline);
  display: flex; justify-content: flex-end; gap: var(--fc-space-3); flex-wrap: wrap;
}
@media (max-width: 560px) {
  .fc-modal-foot { flex-direction: column-reverse; }
  .fc-modal-foot .fc-btn { width: 100%; }
}

.fc-toasts { position: fixed; z-index: 110; bottom: var(--fc-space-6); right: var(--fc-space-6); display: grid; gap: 10px; max-width: 380px; }
.fc-toast {
  background: var(--fc-overlay);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  padding: 13px var(--fc-space-4);
  color: var(--fc-on); font-size: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  display: flex; gap: 11px; align-items: flex-start;
}
.fc-toast i { margin-top: 2px; }
.fc-toast-ok i { color: var(--fc-success); }
.fc-toast-bad i { color: var(--fc-danger); }

/* Dropdown menu. */
.fc-menu {
  background: var(--fc-overlay);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.fc-menu a, .fc-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  border-radius: 9px;
  color: var(--fc-muted); font-size: 14px; text-align: left;
}
.fc-menu a i, .fc-menu button i { width: 16px; text-align: center; color: var(--fc-subtle); }
.fc-menu a:hover, .fc-menu button:hover { background: rgba(255, 255, 255, 0.055); color: var(--fc-on); text-decoration: none; }
.fc-menu .sep { height: 1px; background: var(--fc-outline); margin: 6px 4px; }
.fc-menu .danger { color: var(--fc-danger); }
.fc-menu .danger i { color: var(--fc-danger); }


/* ==========================================================================
   13  Tabs and pagination
   ========================================================================== */

.fc-tabs {
  display: flex; gap: 4px;
  border-bottom: var(--fc-border) solid var(--fc-outline);
  margin-bottom: var(--fc-space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.fc-tabs::-webkit-scrollbar { display: none; }
.fc-tabs a {
  padding: 13px var(--fc-space-4);
  color: var(--fc-muted);
  font-size: 14.5px; font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--fc-dur-state) var(--fc-ease), border-color var(--fc-dur-state) var(--fc-ease);
}
.fc-tabs a:hover { color: var(--fc-on); text-decoration: none; }
.fc-tabs a.active { color: var(--fc-on); border-bottom-color: var(--fc-pink); }

/* Segmented control — the feed/map switch. */
.fc-seg {
  display: inline-flex;
  background: var(--fc-overlay);
  border-radius: var(--fc-radius-full);
  padding: 4px;
  gap: 2px;
}
.fc-seg a {
  padding: 8px 18px;
  border-radius: var(--fc-radius-full);
  font-size: 13.5px; font-weight: 600;
  color: var(--fc-muted);
}
.fc-seg a:hover { color: var(--fc-on); text-decoration: none; }
.fc-seg a.active { background: var(--fc-pink-deep); color: var(--fc-white); }

.fc-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--fc-space-6); }
.fc-pager a, .fc-pager span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fc-radius-control);
  border: var(--fc-border) solid var(--fc-outline);
  color: var(--fc-muted); font-size: 13.5px; font-weight: 600;
}
.fc-pager a:hover { border-color: var(--fc-pink); color: var(--fc-on); text-decoration: none; }
.fc-pager .active { background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); color: var(--fc-white); }
.fc-pager .gap { border-color: transparent; }

/* Breadcrumb. */
.fc-crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--fc-text-caption); color: var(--fc-subtle); margin-bottom: var(--fc-space-4); }
.fc-crumbs a { color: var(--fc-subtle); }
.fc-crumbs a:hover { color: var(--fc-pink-soft); text-decoration: none; }
.fc-crumbs .sep { opacity: 0.5; }


/* ==========================================================================
   14  Photography and placeholders

   When no photo exists: the pink-brown gradient field with a centred food
   glyph. Never a grey box, never a broken-image icon (STYLE-GUIDE.md §8).
   ========================================================================== */

.fc-photo {
  position: relative;
  display: block;
  background: var(--fc-grad-photo);
  border-radius: var(--fc-radius-card);
  overflow: hidden;
}
.fc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-photo-45 { aspect-ratio: 4 / 5; }
.fc-photo-11 { aspect-ratio: 1 / 1; }
.fc-photo-169 { aspect-ratio: 16 / 9; }
.fc-photo .glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: rgba(232, 23, 123, 0.5);
}
/* Any type sitting on a photograph needs a scrim (§2.6). */
.fc-photo-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12) 52%, transparent);
  pointer-events: none;
}
.fc-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--fc-space-4);
  z-index: 1;
}
.fc-photo-caption .t { font-family: var(--fc-font-display); font-weight: 700; font-size: 16px; color: var(--fc-white); }
.fc-photo-caption .s { font-size: 12px; color: rgba(255, 255, 255, 0.78); margin-top: 3px; }

img.fc-fluid { max-width: 100%; height: auto; display: block; }


/* ==========================================================================
   15  Utilities

   Deliberately small. Layout belongs in the component, not in the markup.
   ========================================================================== */

.fc-row     { display: flex; align-items: center; gap: var(--fc-space-3); }
.fc-row-top { display: flex; align-items: flex-start; gap: var(--fc-space-3); }
.fc-col     { display: grid; gap: var(--fc-space-3); }
.fc-between { display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-4); }
.fc-wrap-flex { flex-wrap: wrap; }
.fc-push    { margin-left: auto; }
.fc-center  { text-align: center; }
.fc-right   { text-align: right; }
.fc-nowrap  { white-space: nowrap; }
.fc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fc-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.fc-mt-0 { margin-top: 0; }
.fc-mt-2 { margin-top: var(--fc-space-2); }
.fc-mt-3 { margin-top: var(--fc-space-3); }
.fc-mt-4 { margin-top: var(--fc-space-4); }
.fc-mt-5 { margin-top: var(--fc-space-5); }
.fc-mt-6 { margin-top: var(--fc-space-6); }
.fc-mt-7 { margin-top: var(--fc-space-7); }
.fc-mb-0 { margin-bottom: 0; }
.fc-mb-3 { margin-bottom: var(--fc-space-3); }
.fc-mb-4 { margin-bottom: var(--fc-space-4); }
.fc-mb-5 { margin-bottom: var(--fc-space-5); }
.fc-mb-6 { margin-bottom: var(--fc-space-6); }
.fc-mb-7 { margin-bottom: var(--fc-space-7); }

.fc-muted  { color: var(--fc-muted); }
.fc-subtle { color: var(--fc-subtle); }
.fc-strong { color: var(--fc-on); font-weight: 600; }
.fc-tabular { font-variant-numeric: tabular-nums; }

.fc-hide { display: none !important; }
.fc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 760px) { .fc-hide-sm { display: none !important; } }
@media (min-width: 761px) { .fc-only-sm { display: none !important; } }

.fc-divider { height: 1px; background: var(--fc-outline); margin: var(--fc-space-5) 0; }


/* ==========================================================================
   16  Bootstrap reconciliation

   The portal carries Bootstrap. Rather than fight it view by view, repoint its
   surface, control and type colours at the tokens. Covers both the Bootstrap 3
   and Bootstrap 4/5 class vocabularies, since only one will be present.
   ========================================================================== */

.fc-app .container, .fc-app .container-fluid { max-width: var(--fc-content-max); }

/* Type and links */
.fc-app .text-muted { color: var(--fc-muted) !important; }
.fc-app .text-secondary { color: var(--fc-subtle) !important; }
.fc-app .text-dark { color: var(--fc-on) !important; }
.fc-app .text-primary { color: var(--fc-pink-soft) !important; }
.fc-app .text-danger { color: var(--fc-danger) !important; }
.fc-app .text-success { color: var(--fc-success) !important; }
.fc-app .text-warning { color: var(--fc-warning) !important; }

/* Surfaces */
.fc-app .bg-white, .fc-app .bg-light { background-color: var(--fc-raised) !important; }
.fc-app .bg-dark { background-color: var(--fc-bg) !important; }
.fc-app .border, .fc-app .border-top, .fc-app .border-bottom,
.fc-app .border-left, .fc-app .border-right,
.fc-app .border-start, .fc-app .border-end { border-color: var(--fc-outline) !important; }

/* Panels (bs3) and cards (bs4/5) */
.fc-app .panel, .fc-app .card, .fc-app .list-group-item, .fc-app .well {
  background-color: var(--fc-raised);
  border-color: var(--fc-outline);
  color: var(--fc-on);
  border-radius: var(--fc-radius-card);
}
.fc-app .panel-heading, .fc-app .card-header, .fc-app .card-footer {
  background-color: transparent;
  border-color: var(--fc-outline);
  color: var(--fc-on);
}
.fc-app .panel-title, .fc-app .card-title { font-family: var(--fc-font-display); font-weight: 600; }
.fc-app .card-text, .fc-app .panel-body { color: var(--fc-muted); }

/* Controls */
.fc-app .form-control, .fc-app .form-select, .fc-app .custom-select {
  background-color: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  color: var(--fc-on);
  height: var(--fc-field-height);
  padding: 0 var(--fc-space-4);
  box-shadow: none;
  font-size: var(--fc-text-body);
}
.fc-app textarea.form-control { height: auto; padding: 14px var(--fc-space-4); }
.fc-app .form-control::placeholder { color: var(--fc-faint); }
.fc-app .form-control:focus, .fc-app .form-select:focus {
  background-color: var(--fc-raised);
  border-color: var(--fc-pink);
  color: var(--fc-on);
  box-shadow: 0 0 0 3px rgba(232, 23, 123, 0.18);
}
.fc-app .form-control[disabled] { background-color: var(--fc-overlay); color: var(--fc-faint); }
/* A readonly field's value is content the user must read: --fc-muted (7.8:1),
   not the decorative --fc-faint (3.8:1). Only [disabled] earns faint. */
.fc-app .form-control[readonly] { background-color: var(--fc-overlay); color: var(--fc-muted); }
.fc-app .form-label, .fc-app label { color: var(--fc-on); font-size: var(--fc-text-caption); font-weight: 600; }
.fc-app .input-group-text, .fc-app .input-group-addon {
  background: var(--fc-overlay); border-color: var(--fc-outline); color: var(--fc-subtle);
}
.fc-app .form-check-input { background-color: var(--fc-raised); border-color: var(--fc-outline); }
.fc-app .form-check-input:checked { background-color: var(--fc-pink-deep); border-color: var(--fc-pink-deep); }
.fc-app .form-check-label { color: var(--fc-muted); font-weight: 400; }

/* Buttons — map Bootstrap's intents onto the FoodChaser set. */
.fc-app .btn {
  border-radius: var(--fc-radius-full);
  font-family: var(--fc-font-display);
  font-weight: 600;
  padding: 13px 24px;
  border: var(--fc-border) solid transparent;
  box-shadow: none;
  transition: transform var(--fc-dur-press) var(--fc-ease), background var(--fc-dur-press) var(--fc-ease),
              border-color var(--fc-dur-press) var(--fc-ease), color var(--fc-dur-press) var(--fc-ease);
}
.fc-app .btn-primary, .fc-app .btn-info {
  background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); color: var(--fc-white);
  box-shadow: var(--fc-shadow-cta);
}
.fc-app .btn-primary:hover, .fc-app .btn-primary:focus,
.fc-app .btn-info:hover, .fc-app .btn-info:focus {
  background: var(--fc-pink-hover); border-color: var(--fc-pink-hover); color: var(--fc-white); transform: translateY(-2px);
  box-shadow: var(--fc-shadow-cta-hover);
}
.fc-app .btn-secondary, .fc-app .btn-default, .fc-app .btn-light {
  background: var(--fc-overlay); border-color: var(--fc-outline); color: var(--fc-on);
}
.fc-app .btn-secondary:hover, .fc-app .btn-default:hover, .fc-app .btn-light:hover {
  background: var(--fc-overlay-hover); border-color: var(--fc-outline-hover); color: var(--fc-on);
}
.fc-app .btn-success { background: rgba(59, 208, 122, 0.16); border-color: rgba(59, 208, 122, 0.45); color: var(--fc-success); }
.fc-app .btn-success:hover { background: rgba(59, 208, 122, 0.24); color: var(--fc-success); }
.fc-app .btn-warning { background: rgba(255, 197, 61, 0.14); border-color: rgba(255, 197, 61, 0.42); color: var(--fc-warning); }
.fc-app .btn-warning:hover { background: rgba(255, 197, 61, 0.22); color: var(--fc-warning); }
.fc-app .btn-danger { background: transparent; border-color: var(--fc-danger); color: var(--fc-danger); }
.fc-app .btn-danger:hover { background: rgba(255, 77, 72, 0.14); color: var(--fc-danger); }
.fc-app .btn-link { color: var(--fc-pink-soft); box-shadow: none; }
.fc-app .btn-outline-primary { background: transparent; border-color: var(--fc-outline); color: var(--fc-on); }
.fc-app .btn-outline-primary:hover { border-color: var(--fc-pink); background: transparent; color: var(--fc-pink-soft); }
.fc-app .btn-sm { padding: 9px 16px; font-size: 13px; }
.fc-app .btn-lg { padding: 17px 32px; font-size: 16.5px; }
.fc-app .btn.disabled, .fc-app .btn[disabled] {
  background: var(--fc-overlay); border-color: transparent; color: var(--fc-faint); box-shadow: none; transform: none;
}

/* Tables */
.fc-app .table { color: var(--fc-muted); border-color: var(--fc-outline); --bs-table-bg: transparent; }
.fc-app .table > thead th, .fc-app .table > thead > tr > th {
  background: var(--fc-overlay);
  color: var(--fc-subtle);
  border-color: var(--fc-outline);
  font-size: var(--fc-text-micro); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.fc-app .table > tbody > tr > td, .fc-app .table > tbody > tr > th {
  border-color: var(--fc-outline); color: var(--fc-muted); vertical-align: middle;
}
.fc-app .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, 0.02); color: var(--fc-muted); }
.fc-app .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.035); color: var(--fc-on); }
.fc-app .table-bordered, .fc-app .table-bordered > * > * > * { border-color: var(--fc-outline); }

/* Nav, tabs, pills */
.fc-app .nav-tabs { border-bottom-color: var(--fc-outline); }
.fc-app .nav-tabs > li > a, .fc-app .nav-tabs .nav-link {
  color: var(--fc-muted); border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-weight: 600;
}
.fc-app .nav-tabs > li.active > a, .fc-app .nav-tabs .nav-link.active {
  color: var(--fc-on); background: transparent; border: 0; border-bottom: 2px solid var(--fc-pink);
}
.fc-app .nav-pills .nav-link { color: var(--fc-muted); border-radius: var(--fc-radius-full); }
.fc-app .nav-pills .nav-link.active { background: var(--fc-pink-deep); color: var(--fc-white); }
.fc-app .navbar { background: var(--fc-yellow); border: 0; border-radius: 0; }
.fc-app .navbar-brand, .fc-app .navbar-nav > li > a { color: var(--fc-on-yellow); }

/* Modals */
.fc-app .modal-content {
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-panel);
  color: var(--fc-on);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.fc-app .modal-header, .fc-app .modal-footer { border-color: var(--fc-outline); }
.fc-app .modal-title { font-family: var(--fc-font-display); font-weight: 600; }
.fc-app .modal-backdrop, .modal-backdrop.in, .modal-backdrop.show { background: #000; }
.fc-app .close, .fc-app .btn-close { color: var(--fc-muted); opacity: 1; text-shadow: none; filter: invert(1) grayscale(1) brightness(1.6); }

/* Dropdowns */
.fc-app .dropdown-menu {
  background: var(--fc-overlay);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  padding: 6px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.fc-app .dropdown-menu > li > a, .fc-app .dropdown-item {
  color: var(--fc-muted); border-radius: 9px; padding: 9px 12px;
}
.fc-app .dropdown-menu > li > a:hover, .fc-app .dropdown-item:hover, .fc-app .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.055); color: var(--fc-on);
}
.fc-app .dropdown-divider, .fc-app .dropdown-menu .divider { background: var(--fc-outline); border-color: var(--fc-outline); }

/* Alerts, badges, progress */
.fc-app .alert {
  border-radius: var(--fc-radius-control);
  border: var(--fc-border) solid var(--fc-outline);
  background: var(--fc-raised);
  color: var(--fc-muted);
}
.fc-app .alert-success { border-color: rgba(59, 208, 122, 0.38); background: rgba(59, 208, 122, 0.08); color: var(--fc-success); }
.fc-app .alert-info    { border-color: rgba(232, 23, 123, 0.35); background: rgba(232, 23, 123, 0.08); color: var(--fc-pink-soft); }
.fc-app .alert-warning { border-color: rgba(255, 197, 61, 0.34); background: rgba(255, 197, 61, 0.07); color: var(--fc-warning); }
.fc-app .alert-danger  { border-color: rgba(255, 77, 72, 0.36); background: rgba(255, 77, 72, 0.08); color: var(--fc-danger); }
.fc-app .badge, .fc-app .label {
  border-radius: var(--fc-radius-full); padding: 4px 10px;
  background: var(--fc-overlay); color: var(--fc-muted);
  font-size: 11px; font-weight: 600;
}
.fc-app .badge-primary, .fc-app .bg-primary, .fc-app .label-primary { background: var(--fc-pink-deep) !important; color: var(--fc-white); }
.fc-app .badge-success, .fc-app .bg-success, .fc-app .label-success { background: rgba(59, 208, 122, 0.18) !important; color: var(--fc-success); }
.fc-app .badge-danger, .fc-app .bg-danger, .fc-app .label-danger { background: rgba(255, 77, 72, 0.16) !important; color: var(--fc-danger); }
.fc-app .badge-warning, .fc-app .bg-warning, .fc-app .label-warning { background: rgba(255, 197, 61, 0.16) !important; color: var(--fc-warning); }
.fc-app .progress { background: var(--fc-overlay); border-radius: var(--fc-radius-full); height: 8px; box-shadow: none; }
.fc-app .progress-bar { background: var(--fc-pink); }

/* Pagination */
.fc-app .pagination > li > a, .fc-app .page-link {
  background: transparent; border-color: var(--fc-outline); color: var(--fc-muted);
}
.fc-app .pagination > li > a:hover, .fc-app .page-link:hover {
  background: var(--fc-overlay); border-color: var(--fc-pink); color: var(--fc-on);
}
.fc-app .pagination > .active > a, .fc-app .page-item.active .page-link {
  background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); color: var(--fc-white);
}

/* Autofill: Chrome paints a light-blue field otherwise. */
.fc-app input:-webkit-autofill,
.fc-app input:-webkit-autofill:hover,
.fc-app input:-webkit-autofill:focus,
.fc-app textarea:-webkit-autofill,
.fc-app select:-webkit-autofill {
  -webkit-text-fill-color: var(--fc-on);
  -webkit-box-shadow: 0 0 0 1000px var(--fc-raised) inset;
  caret-color: var(--fc-on);
  transition: background-color 9999s ease-out;
}


/* ==========================================================================
   17  Motion and reduced motion

   Motion confirms a tap or reveals state; it never entertains
   (STYLE-GUIDE.md §9). The token file also disables the pulse and hover lift.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fc-app *, .fc-app *::before, .fc-app *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .fc-eyebrow .dot { animation: none !important; }
  .fc-skel::after { animation: none !important; }
  .fc-btn:hover, .fc-tile:hover, .fc-mini:hover { transform: none !important; }
}

@media print {
  .fc-brandbar, .fc-tabbar, .fc-footer, .fc-page-actions, .fc-toolbar { display: none !important; }
  body.fc-app { background: var(--fc-white); color: #000; }
  .fc-card, .fc-panel, .fc-table-wrap { border-color: #ccc; background: var(--fc-white); }
}


/* ==========================================================================
   18  Kendo UI reconciliation

   The portal renders Kendo UI 2020.1 grids, dropdowns, switches and date
   pickers with the kendo.bootstrap theme, which is light and teal. Untouched,
   every grid and dropdown in the product stays a different product. Kendo
   widgets are injected into <body>, not inside .fc-app, so these selectors are
   deliberately unscoped and use !important — the theme stylesheet loads after
   ours and is not overridable any other way without a build step.
   ========================================================================== */

.k-widget, .k-header, .k-content, .k-popup, .k-list-container, .k-animation-container {
  background-color: var(--fc-raised) !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-on) !important;
  font-family: var(--fc-font-body) !important;
}
.k-widget { border-radius: var(--fc-radius-control) !important; }

/* Inputs, pickers, dropdowns */
.k-textbox, .k-input, .k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap, .k-multiselect-wrap {
  background: var(--fc-raised) !important;
  background-image: none !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-on) !important;
  border-radius: var(--fc-radius-control) !important;
  box-shadow: none !important;
}
.k-dropdown-wrap.k-state-hover, .k-picker-wrap.k-state-hover,
.k-numeric-wrap.k-state-hover, .k-multiselect-wrap.k-state-hover { border-color: var(--fc-outline-hover) !important; }
.k-dropdown-wrap.k-state-focused, .k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused, .k-multiselect-wrap.k-state-focused,
.k-textbox:focus, .k-input:focus {
  border-color: var(--fc-pink) !important;
  box-shadow: 0 0 0 3px rgba(232, 23, 123, 0.18) !important;
}
.k-input::placeholder, .k-textbox::placeholder { color: var(--fc-faint) !important; }
.k-select, .k-icon, .k-i-arrow-s, .k-i-arrow-60-down { color: var(--fc-muted) !important; background: transparent !important; }

/* Lists and selection — pink, never teal */
.k-list > .k-item, .k-list-optionlabel { color: var(--fc-muted) !important; }
.k-list > .k-item:hover, .k-list > .k-item.k-state-hover {
  background: rgba(255, 255, 255, 0.055) !important; color: var(--fc-on) !important;
}
.k-list > .k-item.k-state-selected, .k-state-selected, .k-state-selected:link {
  background: var(--fc-pink-deep) !important;
  border-color: var(--fc-pink-deep) !important;
  color: var(--fc-white) !important;
}
.k-state-focused { border-color: var(--fc-pink) !important; box-shadow: none !important; }
.k-multiselect-wrap .k-button {
  background: var(--fc-overlay) !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-on) !important;
  border-radius: var(--fc-radius-chip) !important;
}

/* Grid */
.k-grid { border-color: var(--fc-outline) !important; border-radius: var(--fc-radius-card) !important; overflow: hidden; }
.k-grid-header, .k-grid-header-wrap, .k-grid-footer {
  background: var(--fc-overlay) !important;
  border-color: var(--fc-outline) !important;
}
.k-grid-header th.k-header, .k-grid-header .k-header > .k-link {
  background: transparent !important;
  color: var(--fc-subtle) !important;
  border-color: var(--fc-outline) !important;
  font-size: var(--fc-text-micro) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.k-grid td, .k-grid tbody td {
  background: transparent !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-muted) !important;
}
.k-grid tbody tr { background: transparent !important; }
.k-grid tbody tr.k-alt, .k-grid tbody tr.k-alt > td { background: rgba(255, 255, 255, 0.02) !important; }
.k-grid tbody tr:hover > td, .k-grid tbody tr.k-state-hover > td {
  background: rgba(255, 255, 255, 0.04) !important; color: var(--fc-on) !important;
}
.k-grid-toolbar, .k-grid-pager, .k-pager-wrap {
  background: var(--fc-raised) !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-muted) !important;
}
.k-pager-wrap .k-link { color: var(--fc-muted) !important; border-color: transparent !important; border-radius: 9px !important; }
.k-pager-wrap .k-link:hover { background: var(--fc-overlay) !important; color: var(--fc-on) !important; }
.k-pager-wrap .k-state-selected { background: var(--fc-pink-deep) !important; color: var(--fc-white) !important; }

/* Switch — the app's switch is pink when on */
.k-switch-on .k-switch-container { background: rgba(232, 23, 123, 0.32) !important; border-color: var(--fc-pink) !important; }
.k-switch-on .k-switch-handle { background: var(--fc-pink) !important; border-color: var(--fc-pink) !important; }
.k-switch-off .k-switch-container { background: var(--fc-overlay) !important; border-color: var(--fc-outline) !important; }
.k-switch-off .k-switch-handle { background: var(--fc-muted) !important; border-color: var(--fc-outline) !important; }
.k-switch-label-on, .k-switch-label-off { color: var(--fc-on) !important; }

/* Buttons, tabs, windows, calendar */
.k-button {
  background: var(--fc-overlay) !important;
  background-image: none !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-on) !important;
  border-radius: var(--fc-radius-control) !important;
  font-family: var(--fc-font-display) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.k-button:hover { background: var(--fc-overlay-hover) !important; border-color: var(--fc-outline-hover) !important; }
.k-button.k-primary { background: var(--fc-pink-deep) !important; border-color: var(--fc-pink-deep) !important; color: var(--fc-white) !important; }
.k-button.k-primary:hover { background: var(--fc-pink-hover) !important; border-color: var(--fc-pink-hover) !important; }
.k-tabstrip-items .k-item { background: transparent !important; border-color: transparent !important; }
.k-tabstrip-items .k-item.k-state-active { background: transparent !important; border-bottom: 2px solid var(--fc-pink) !important; }
.k-tabstrip-items .k-link { color: var(--fc-muted) !important; }
.k-tabstrip-items .k-item.k-state-active .k-link { color: var(--fc-on) !important; }
.k-window, .k-window-content { background: var(--fc-raised) !important; color: var(--fc-on) !important; }
.k-window-titlebar { background: var(--fc-overlay) !important; border-color: var(--fc-outline) !important; color: var(--fc-on) !important; }
.k-overlay { background: #000 !important; opacity: 0.65 !important; }
.k-calendar, .k-calendar .k-content { background: var(--fc-raised) !important; color: var(--fc-on) !important; }
.k-calendar .k-link { color: var(--fc-muted) !important; }
.k-calendar .k-today .k-link { color: var(--fc-yellow) !important; }
.k-calendar .k-state-selected .k-link { background: var(--fc-pink-deep) !important; color: var(--fc-white) !important; border-radius: 8px !important; }
.k-tooltip { background: var(--fc-overlay) !important; color: var(--fc-on) !important; border-color: var(--fc-outline) !important; }
.k-loading-mask .k-loading-image { color: var(--fc-pink) !important; }

/* Editor. The content area is an iframe with its own document, unreachable
   from this sheet at any specificity — and it should stay light on purpose:
   it is a WYSIWYG canvas for canned messages that render on a light ground, so
   a dark editing surface would misrepresent the output. It is framed here as a
   deliberate document canvas rather than left as a bare white panel. Only the
   chrome around it is themed. */
.k-editor {
  border-color: var(--fc-outline) !important;
  border-radius: var(--fc-radius-control) !important;
  overflow: hidden;
  background: var(--fc-overlay) !important;
}
.k-editor .k-editable-area, .k-editor .k-content {
  border-color: var(--fc-outline) !important;
  padding: 3px !important;   /* the canvas reads as paper inside the frame */
}
.k-editor-toolbar, .k-toolbar {
  background: var(--fc-overlay) !important;
  background-image: none !important;
  border-color: var(--fc-outline) !important;
}
.k-editor-toolbar .k-tool, .k-toolbar .k-tool {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fc-muted) !important;
}
.k-editor-toolbar .k-tool:hover, .k-toolbar .k-tool:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-on) !important;
}
.k-editor-toolbar .k-tool.k-state-selected, .k-editor-toolbar .k-tool.k-state-active {
  background: var(--fc-pink-deep) !important; border-color: var(--fc-pink-deep) !important; color: var(--fc-white) !important;
}
.k-tool-group { border-color: var(--fc-outline) !important; }

/* Numeric spin buttons — kendo.bootstrap paints the spinner cell with a light
   gradient that the generic .k-icon rule does not reach. */
.k-numeric-wrap .k-select, .k-numerictextbox .k-select {
  background: var(--fc-overlay) !important;
  background-image: none !important;
  border-color: var(--fc-outline) !important;
}
.k-numeric-wrap .k-select .k-link { background: transparent !important; color: var(--fc-muted) !important; }
.k-numeric-wrap .k-select .k-link:hover { background: rgba(255, 255, 255, 0.055) !important; color: var(--fc-on) !important; }

/* Date-time picker's time column. §18's calendar rules do not cover it, and
   the admin challenge screens lean on it heavily. */
.k-datetime-wrap, .k-time-list-wrapper, .k-time-list, .k-time-container {
  background: var(--fc-raised) !important; color: var(--fc-on) !important;
}
.k-time-header, .k-time-list-wrapper .k-title {
  background: var(--fc-overlay) !important;
  border-color: var(--fc-outline) !important;
  color: var(--fc-subtle) !important;
}
.k-time-list .k-item { color: var(--fc-muted) !important; }
.k-time-list .k-item:hover { background: rgba(255, 255, 255, 0.055) !important; color: var(--fc-on) !important; }
.k-time-list .k-item.k-state-selected { background: var(--fc-pink-deep) !important; color: var(--fc-white) !important; }
.k-datetime-buttongroup .k-button { border-radius: var(--fc-radius-chip) !important; }


/* ==========================================================================
   19  Legacy bridge

   `common.css` grew out of two earlier forks and the views lean on its class
   names heavily. These aliases keep every existing view rendering on-brand
   without editing a thousand markup sites. They are a migration aid, not part
   of the system: when a view is touched, move it onto the §1–15 components and
   drop the legacy class.
   ========================================================================== */

.fc-app .btn-pink   { background: var(--fc-pink-deep); border-color: var(--fc-pink-deep); color: var(--fc-white); }
.fc-app .btn-pink:hover, .fc-app .btn-pink:focus { background: var(--fc-pink); border-color: var(--fc-pink); color: var(--fc-white); }
.fc-app .btn-yellow { background: var(--fc-yellow); border-color: var(--fc-yellow); color: var(--fc-on-yellow); font-weight: 700; }
.fc-app .btn-yellow:hover, .fc-app .btn-yellow:focus { background: var(--fc-yellow-hover); border-color: var(--fc-yellow-hover); color: var(--fc-on-yellow); }
.fc-app .btn-dark   { background: var(--fc-overlay); border-color: var(--fc-outline); color: var(--fc-on); }
.fc-app .btn-dark:hover { background: var(--fc-overlay-hover); color: var(--fc-on); }

.fc-app .text-pink  { color: var(--fc-pink-soft) !important; }
.fc-app .text-yellow { color: var(--fc-yellow) !important; }
.fc-app .bg-pink    { background-color: var(--fc-pink-deep) !important; color: var(--fc-white) !important; }
.fc-app .bg-yellow  { background-color: var(--fc-yellow) !important; color: var(--fc-on-yellow) !important; }
.fc-app .gold       { color: var(--fc-yellow) !important; }
.fc-app .grey       { color: var(--fc-subtle) !important; }
.fc-app .grey-line, .fc-app hr.grey-line { border-top-color: var(--fc-outline) !important; background: transparent !important; }
.fc-app .white-box, .fc-app .box, .fc-app .rounded-box {
  background: var(--fc-raised) !important;
  border: var(--fc-border) solid var(--fc-outline) !important;
  color: var(--fc-on) !important;
  border-radius: var(--fc-radius-card) !important;
  box-shadow: none !important;
}


/* ==========================================================================
   20  Promoted components

   Each of these was built independently in two or more page sheets during the
   reskin, which is the signal that it belongs here instead. A page sheet that
   still carries a local copy should point at these and drop it.
   ========================================================================== */

/* ---- Empty-state illustration ------------------------------------------- */
/* `.fc-empty .ic` holds a glyph in a 62px chip. The brand also ships four
   `empty-*.svg` illustrations, and STYLE-GUIDE.md §5 wants them at half
   opacity so the title, not the drawing, is what the eye lands on. */
.fc-empty-art {
  width: 200px; max-width: 100%; height: auto;
  display: block;
  margin: 0 auto var(--fc-space-5);
  opacity: 0.5;
}

/* ---- Contained photo placeholder ---------------------------------------- */
/* `.fc-photo img` is `object-fit: cover`, which is right for a photograph and
   wrong for artwork: the 4:5 `photo-placeholder.svg` inside a 16:9 frame must
   letterbox, not crop. Same for a vendor logo, which arrives at any shape. */
.fc-photo .fc-photo-ph,
.fc-plate img {
  object-fit: contain;
  padding: var(--fc-space-5);
}

/* A plate is a container for artwork of unknown shape and unknown ground —
   a vendor logo, a directory badge, an account avatar in a list row. */
.fc-plate {
  display: flex; align-items: center; justify-content: center;
  background: var(--fc-overlay);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  overflow: hidden;
}
.fc-plate img { width: 100%; height: 100%; display: block; padding: var(--fc-space-2); }
.fc-plate-76 { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 14px; }
.fc-plate-52 { width: 52px; height: 52px; flex: 0 0 52px; }
.fc-plate-38 { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; }

/* ---- On-photo control ---------------------------------------------------- */
/* A control sitting on a photograph needs its own ground — the photo behind it
   is unknowable, so the scrim is part of the component (STYLE-GUIDE.md §2.6). */
.fc-photo-act {
  position: absolute; top: var(--fc-space-2); right: var(--fc-space-2); z-index: 1;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--fc-border) solid rgba(255, 255, 255, 0.14);
  border-radius: var(--fc-radius-full);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--fc-on-scrim);
  cursor: pointer; font-size: 13px;
  transition: background var(--fc-dur-press) var(--fc-ease), color var(--fc-dur-press) var(--fc-ease);
}
.fc-photo-act:hover, .fc-photo-act:focus { background: rgba(0, 0, 0, 0.78); color: var(--fc-pink-soft); text-decoration: none; }
.fc-photo-act.on { color: var(--fc-pink); }

/* ---- Chart container ---------------------------------------------------- */
/* Chart.js with `maintainAspectRatio: false` needs a sized parent, and three
   portal surfaces render charts. */
.fc-chartbox { position: relative; min-height: 320px; height: 320px; }
.fc-chartbox-tall { min-height: 420px; height: 420px; }
@media (max-width: 620px) {
  .fc-chartbox, .fc-chartbox-tall { min-height: 260px; height: 260px; }
}

/* ---- Inline loader ------------------------------------------------------ */
/* `.fc-hud` is a fixed full-screen scrim — right for a blocking wait, wrong
   for a panel that is still filling. */
.fc-loading {
  display: flex; align-items: center; justify-content: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-8) 0;
  color: var(--fc-subtle); font-size: var(--fc-text-caption);
}
.fc-loading-col { flex-direction: column; gap: var(--fc-space-4); padding: var(--fc-space-9) var(--fc-space-5); }

/* ---- Lockup on a dark ground -------------------------------------------- */
/* `.fc-lockup .fc-wordtype` is ink, which is correct on the yellow brand bar
   and invisible on a card. */
.fc-lockup-dark .fc-wordtype { color: var(--fc-on); }
.fc-lockup-dark img.fc-mark { border-radius: 10px; }

/* ---- Icon-only control, table size -------------------------------------- */
/* `.fc-mini` is text-shaped; a grid row's action buttons are square. Still
   meets the 44px target via padding on the row, and carries an aria-label. */
.fc-iconbtn-sm {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: 9px;
  background: transparent; color: var(--fc-muted);
  cursor: pointer; font-size: 12px;
  transition: border-color var(--fc-dur-press) var(--fc-ease), color var(--fc-dur-press) var(--fc-ease);
}
.fc-iconbtn-sm:hover, .fc-iconbtn-sm:focus { border-color: var(--fc-pink); color: var(--fc-on); text-decoration: none; }
.fc-iconbtn-sm.danger:hover { border-color: var(--fc-danger); color: var(--fc-danger); }

/* ---- Stripe card field -------------------------------------------------- */
/* Stripe mounts an iframe, so it cannot inherit the field chrome — the wrapper
   has to supply it, and centre the iframe vertically. The iframe's own type
   colours are set in JS from these same tokens via getComputedStyle. */
.fc-stripe-field {
  display: flex; align-items: center;
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-control);
  padding: 0 var(--fc-space-4);
  min-height: var(--fc-field-height);
}
.fc-stripe-field > * { width: 100%; }

/* ---- Grid cell content -------------------------------------------------- */
/* Kendo column templates are strings, so a view cannot reach them with a page
   sheet's descendant selector and every one of them had grown its own inline
   `style` attribute — five thumbnail sizes and four input widths across the
   app. These are the one size for each. */
.fc-grid-thumb {
  display: block;
  width: auto; max-width: 100px; height: 72px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--fc-radius-chip);
  background-color: var(--fc-overlay);
}
.fc-grid-thumb-sm { height: 46px; max-width: 64px; }
/* An input edited in place: full-bleed minus a hair, so the cell border reads. */
.fc-grid-edit { width: calc(100% - 6px); }
/* A denser grid is legitimate on an internal tool; an arbitrary point size is
   not (Gamification's vendor grid ran at 9pt). */
.fc-grid-dense .k-grid, .fc-grid-dense.k-grid { font-size: var(--fc-text-caption); }

/* ---- Measure and flex utilities ----------------------------------------- */
/* §15 has the margin scale but nothing for max-width or flex-grow, which is
   what pushed views toward inline `style` attributes in the first place. */
/* Measures are the vendor sheet's values, which are the ones markup uses. */
.fc-measure-sm { max-width: 520px; }
.fc-measure-md { max-width: 640px; }
.fc-measure-lg { max-width: 760px; }
.fc-measure-center { margin-left: auto; margin-right: auto; }
.fc-fill  { flex: 1 1 auto; min-width: 0; }
.fc-fixed { flex: 0 0 auto; }
.fc-btn-row-end { display: flex; gap: var(--fc-space-3); flex-wrap: wrap; justify-content: flex-end; }
/* Two different things wanted the name `.fc-field-inline`. The one in markup is
   a field pushed to a card head's trailing edge, so it keeps the name; the
   label-beside-input row is `.fc-field-row`. */
.fc-field-inline { margin-left: auto; min-width: 180px; flex: 0 0 auto; }
.fc-field-row { display: flex; align-items: center; gap: var(--fc-space-3); }
.fc-inline-block { display: inline-block; }
.fc-wrap-flush { padding-left: 0; padding-right: 0; }


/* ==========================================================================
   21  Chrome extras

   Added by the chrome pass: the pieces the shared layouts need that §3 did
   not already carry — the account menu that hangs off the brand bar, the
   heading the onboarding bar shows where a signed-in page shows nav, and the
   footer's brand column.
   ========================================================================== */

/* ---- Account menu on the brand bar -------------------------------------- */

.fc-usermenu { position: relative; }
.fc-usermenu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--fc-touch-target);
  padding: 0 var(--fc-space-3) 0 6px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--fc-radius-full);
  color: var(--fc-on-yellow);
  transition: background var(--fc-dur-state) var(--fc-ease);
}
.fc-usermenu-btn:hover { background: rgba(35, 31, 32, 0.12); }
.fc-usermenu-btn > i { font-size: 12px; color: rgba(35, 31, 32, 0.66); }
.fc-usermenu-id { display: grid; text-align: left; min-width: 0; line-height: var(--fc-lh-snug); }
.fc-usermenu-name {
  font-family: var(--fc-font-body);
  font-size: 14px; font-weight: 600;
  color: var(--fc-on-yellow);
  white-space: nowrap;
}
.fc-usermenu-sub {
  font-size: var(--fc-text-micro); font-weight: 600;
  letter-spacing: var(--fc-track-eyebrow); text-transform: uppercase;
  color: rgba(35, 31, 32, 0.68);
  white-space: nowrap;
}
.fc-usermenu .fc-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; }
@media (max-width: 620px) { .fc-usermenu-id { display: none; } }

/* ---- Brand-bar heading (onboarding / invite bar) ------------------------ */

.fc-brandbar-heading {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-heading); font-weight: 700; letter-spacing: -0.3px;
  color: var(--fc-on-yellow);
  margin: 0 auto;
}

/* ---- Footer brand column ------------------------------------------------ */

.fc-footer-mark { width: 40px; height: 40px; border-radius: 10px; display: block; }
.fc-footer-brand p { margin: var(--fc-space-4) 0 0; max-width: 34ch; color: var(--fc-muted); }