/* Beach Intelligence demo shell. Keep brand tokens aligned with styles.css. */
:root {
  --bg-rgb:3,16,20; --panel-rgb:12,45,63; --surface-rgb:8,26,32; --fg-rgb:238,244,244;
  --aqua-rgb:65,208,196; --gold-rgb:242,179,60; --red-rgb:226,96,84;
  --shadow-rgb:0,0,0; --on-accent-rgb:3,37,31; --demo-logo-primary:none; --demo-logo-reversed:block;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --sans:"Manrope",system-ui,sans-serif; --serif:var(--sans); --mono:"JetBrains Mono",ui-monospace,monospace;
  --fg-dim:rgba(var(--fg-rgb),.84); --fg-faint:rgba(var(--fg-rgb),.76);
  --demo-bg:rgb(var(--bg-rgb)); --demo-fg:rgb(var(--fg-rgb)); --demo-accent:rgb(var(--aqua-rgb));
  --demo-border:rgba(var(--fg-rgb),.2); --demo-field-border:rgba(var(--fg-rgb),.5);
  color-scheme:dark;
}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg-rgb:238,244,244; --panel-rgb:255,255,255; --surface-rgb:255,255,255; --fg-rgb:8,31,42;
  --aqua-rgb:8,118,109; --gold-rgb:137,93,19; --red-rgb:178,56,44; --shadow-rgb:8,31,42; --on-accent-rgb:255,255,255;
  --demo-logo-primary:block; --demo-logo-reversed:none; color-scheme:light;
}}
:root[data-theme="light"]{
  --bg-rgb:238,244,244; --panel-rgb:255,255,255; --surface-rgb:255,255,255; --fg-rgb:8,31,42;
  --aqua-rgb:8,118,109; --gold-rgb:137,93,19; --red-rgb:178,56,44; --shadow-rgb:8,31,42; --on-accent-rgb:255,255,255;
  --demo-logo-primary:block; --demo-logo-reversed:none; color-scheme:light;
}
body{font-size:16px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600}
a{color:var(--demo-accent)}
:focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px}
.demo-header{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;padding:16px 24px;background:var(--demo-bg);color:var(--demo-fg);border-bottom:1px solid var(--demo-border)}
.demo-brand{display:flex;align-items:center;min-height:44px;flex:none}
.demo-brand img{width:144px;height:40px;object-fit:contain}
.demo-brand__primary{display:var(--demo-logo-primary)}
.demo-brand__reversed{display:var(--demo-logo-reversed)}
.demo-header__copy{flex:1;min-width:220px;margin:0;font-size:.875rem;line-height:1.5;color:var(--fg-dim)}
.demo-header__copy strong{display:block;color:var(--demo-fg);font-weight:600}
.demo-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.demo-header__actions a,.demo-header__actions button{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:.875rem}
.demo-header__actions button{background:none;border:0;color:var(--fg-dim);cursor:pointer;text-decoration:underline}
.demo-theme{display:flex;align-items:center;gap:8px;font-size:.875rem}
.demo-theme select{min-height:44px;max-width:128px;padding:8px;border:1px solid var(--demo-field-border);border-radius:8px;background:var(--demo-bg);color:var(--demo-fg)}
.btn,.btn--sm,.btn--icon,.top__out,.top__menu,.theme-opt{min-height:44px;min-width:44px}
.theme-opt{width:44px;height:44px}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.composer textarea{min-height:44px;font-size:1rem;border-color:var(--demo-field-border)}
.card__head,.card__foot{padding:16px 24px;gap:12px;flex-wrap:wrap}
.card__body{padding:24px}
.card__body--flush{padding:0}
.field,.form{gap:12px}
.btn-row{gap:12px}
.top{padding:16px 24px;gap:16px}
@media(max-width:600px){
  .demo-header{padding:16px;gap:12px}
  .demo-header__copy{flex-basis:100%;min-width:0}
  .demo-header__actions{width:100%;justify-content:space-between}
  .card__head,.card__foot,.card__body{padding:16px}
  .card__body--flush{padding:0}
  .top{padding:12px 16px;gap:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/jetbrainsmono-latin.woff2?v=20260902a") format("woff2")}

@media(max-width:600px){.demo-brand img{width:112px;height:32px}.demo-header__copy{flex:1;flex-basis:0;min-width:140px;font-size:.8125rem}.demo-header__actions{gap:8px}.demo-header__actions a,.demo-header__actions button,.demo-theme{font-size:.75rem}.demo-theme{gap:4px}.demo-theme select{max-width:80px;padding:8px 4px}}