/* 2.0.2: the one Food Order Hub look, shared by the public website, the takeaway dashboard, your platform dashboard,
   the login pages and onboarding, so they read as one product. Tokens only plus a few base components (fh-*);
   each area's own stylesheet builds on these. Not loaded on takeaways' ordering pages (those use their template). */
:root {
  --fh-teal-950: #05221F; --fh-teal-900: #072D2A; --fh-teal-800: #0A3F3B; --fh-teal-700: #0E5751; --fh-teal-600: #147068;
  --fh-teal-300: #8EC9BE; --fh-teal-100: #D5ECE6; --fh-teal-50: #EEF6F3;
  --fh-accent: #FF7A30; --fh-accent-600: #F2661A; --fh-accent-100: #FFE3D2; --fh-accent-50: #FFF4EC;
  --fh-ink: #0F2220; --fh-ink-2: #3B4F4C; --fh-ink-3: #5F7370; --fh-line: #DCE5E2; --fh-line-2: #C8D5D1;
  --fh-bg: #F7F7F6; --fh-surface: #FFFFFF; --fh-mist: #F4F7F6; --fh-ok: #1D7A46; --fh-bad: #B42318; --fh-warn: #9A5B00;
  --fh-r-sm: 8px; --fh-r: 12px; --fh-r-lg: 18px; --fh-r-pill: 999px;
  --fh-shadow-1: 0 1px 2px rgba(7, 45, 42, .06), 0 2px 8px rgba(7, 45, 42, .05);
  --fh-shadow-2: 0 2px 6px rgba(7, 45, 42, .07), 0 18px 40px -16px rgba(7, 45, 42, .30);
  --fh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fh-font-display: 'Inter Display', 'Inter', system-ui, sans-serif;
  --fh-focus: 0 0 0 3px rgba(20, 112, 104, .35);
}
.fh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--fh-r-pill); font: 600 .9375rem/1 var(--fh-font); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.fh-btn:focus-visible { outline: none; box-shadow: var(--fh-focus); }
.fh-btn-primary { background: var(--fh-teal-700); color: #fff; } .fh-btn-primary:hover { background: var(--fh-teal-800); }
.fh-btn-accent { background: var(--fh-accent); color: #1F1206; } .fh-btn-accent:hover { background: var(--fh-accent-600); }
.fh-btn-ghost { background: var(--fh-surface); color: var(--fh-ink); border-color: var(--fh-line-2); } .fh-btn-ghost:hover { border-color: var(--fh-teal-600); }
.fh-card { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-r-lg); box-shadow: var(--fh-shadow-1); }
.fh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--fh-r-pill); font: 600 .75rem/1.4 var(--fh-font); background: var(--fh-teal-50); color: var(--fh-teal-700); }
.fh-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.05rem/1 var(--fh-font-display); color: var(--fh-ink); text-decoration: none; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .fh-btn { transition: none; } }

/* ---------- 2.0.2 Builder C: the platform owner's page editor (Website CMS, /master/website, public/master-website.js).
   Page list on the left, the chosen page's sections on the right; one column on phones. Only .cms-* classes. */
.cms { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.cms-nav { position: sticky; top: 16px; display: grid; gap: 2px; padding: 10px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-r-lg); box-shadow: var(--fh-shadow-1); }
.cms-group { margin: 10px 10px 4px; font: 700 .75rem/1.2 var(--fh-font); letter-spacing: .06em; text-transform: uppercase; color: var(--fh-ink-3); }
.cms-group:first-child { margin-top: 4px; }
.cms-nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--fh-r-sm); background: none; font: 500 .9375rem/1.2 var(--fh-font); color: var(--fh-ink-2); text-align: left; cursor: pointer; }
.cms-nav-btn:hover { background: var(--fh-mist); color: var(--fh-ink); }
.cms-nav-btn:focus-visible { outline: none; box-shadow: var(--fh-focus); }
.cms-nav-btn[aria-current='true'] { background: var(--fh-teal-50); color: var(--fh-teal-800); font-weight: 600; }
.cms-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fh-accent); }
.cms-nav .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cms-main { min-width: 0; }
.cms-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cms-pane-head h2 { margin: 0 0 4px; font: 700 1.35rem/1.2 var(--fh-font-display); letter-spacing: -.01em; }
.cms-pane-head h2:focus { outline: none; }
.cms-pane-head p { margin: 0; max-width: 60ch; }
.cms-pane-head code { font-size: .85em; padding: 0 .3em; border-radius: 4px; background: var(--fh-mist); }
.cms-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: .75rem; }
.cms-sec-head h3 { margin: 0; font: 650 1.05rem/1.3 var(--fh-font); }
.cms-show { margin: 0; font-size: .9rem; }
.cms-off .cms-fields { opacity: .55; }
.cms-off .cms-sec-head h3::after { content: ' · hidden'; font-weight: 500; color: var(--fh-ink-3); }
.cms-field textarea { min-height: 4.5em; }
.cms-reset { margin-top: .4rem; }
.cms-add { margin-top: .75rem; }
.cms-flat { margin: 0; }
.cms-actions { justify-content: flex-end; }
@media (max-width: 899px) {
  .cms { grid-template-columns: minmax(0, 1fr); }
  .cms-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .cms-group { flex: 1 0 100%; margin: 6px 4px 0; }
  .cms-nav-btn { width: auto; min-height: 44px; border: 1px solid var(--fh-line); border-radius: var(--fh-r-pill); }
  .cms-actions { justify-content: stretch; }
  .cms-actions .btn { flex: 1 1 auto; }
}