/* HostTarget design tokens — single source of truth for public/index.html
   and public/app.html, so the two stop drifting (they already had done
   once: 3px vs 4px button radius for the identical component).

   Light values are the original hand-tuned palette; dark values are
   hue-matched derivations of the same tokens, checked against WCAG AA
   (4.5:1 body text / 3:1 UI components) for every text-on-background pair
   actually used in the app. Activates via prefers-color-scheme by default,
   overridable per-user via [data-theme] (see toggleTheme() in app.html /
   index.html). */

:root{
  color-scheme: light dark;

  --paper:#F2F4F3;
  --paper-raised:#FFFFFF;
  --ink:#182024;
  --ink-soft:#5B6A72;
  --line:#D8DCD9;
  --line-strong:#7A8983;
  --rust:#AB401D;
  --rust-soft:#F7E7E0;
  --amber:#7A4E0F;
  --amber-soft:#FBEFD9;
  --moss:#3F6B52;
  --moss-soft:#E7EFE9;
  --slate:#3B5B74;
  --slate-soft:#E5EBEF;
  --slate-dark:#28394A;
  --violet:#5B3E9E;
  --violet-soft:#E9E4F5;
  --teal:#1F6C8C;
  --teal-soft:#E4F0F5;
  --grey:#888888;
  --grey-soft:#EEEEEE;
  --on-accent:#FFFFFF;
  --shadow-color:24,32,36;
  --overlay-scrim:rgba(24,32,36,0.5);
  /* Fixed — NOT swapped per theme. The CTA band / brand badge gradient is
     always dark with white text on top; if --slate lightened for dark
     mode fed into that gradient too, the white text's contrast would
     degrade right when dark mode turns on. */
  --accent-band-start:#3B5B74;
  --accent-band-end:#28394A;
  /* Also fixed, same reason — a colorful multi-stop version of the band
     gradient above for surfaces that carry white text (CTA band, brand
     badge). Built from the LIGHT-mode hex values directly rather than
     var() so it can't inherit dark mode's brightened rust/amber/teal
     (those exist to stay readable as text ON --paper; they'd be too
     light for white text on top of them). */
  --accent-brand-fixed: linear-gradient(120deg, #AB401D 0%, #7A4E0F 33%, #1F6C8C 66%, #28394A 100%);

  /* Signature gradients — built from the palette above via var(), so they
     re-resolve automatically per theme without needing their own dark-mode
     overrides. "Coastal" story on purpose: this is a short-term-rental
     product, so sunset/ocean reads on-brand rather than generic SaaS teal/
     purple. Used for hero/CTA accents and illustration fills, never for
     body text backgrounds (keep those on the flat *-soft tokens so contrast
     stays predictable). */
  --gradient-sunset: linear-gradient(135deg, var(--rust) 0%, var(--amber) 100%);
  --gradient-ocean: linear-gradient(135deg, var(--slate) 0%, var(--teal) 100%);
  --gradient-dusk: linear-gradient(135deg, var(--violet) 0%, var(--slate-dark) 100%);
  --gradient-meadow: linear-gradient(135deg, var(--moss) 0%, var(--teal) 100%);
  --gradient-brand: linear-gradient(120deg, var(--rust) 0%, var(--amber) 33%, var(--teal) 66%, var(--slate-dark) 100%);

  --shadow-sm: 0 1px 2px rgba(var(--shadow-color),.06), 0 1px 1px rgba(var(--shadow-color),.04);
  --shadow-md: 0 4px 16px rgba(var(--shadow-color),.08);
  --shadow-lg: 0 24px 48px -12px rgba(var(--shadow-color),.28);

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-display:38px;
  --text-hero:48px;

  --font-display:'Inter',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14181A;
    --paper-raised:#1D2225;
    --ink:#EDEFEE;
    --ink-soft:#93A0A6;
    --line:#33393C;
    --line-strong:#63727A;
    --rust:#E2795A;
    --rust-soft:#3A241D;
    --amber:#D9A441;
    --amber-soft:#3A2E14;
    --moss:#6FAE8B;
    --moss-soft:#1E2E24;
    --slate:#7BA0BC;
    --slate-soft:#20303C;
    --slate-dark:#4A6E8A;
    --violet:#B39DDB;
    --violet-soft:#2A2340;
    --teal:#6FB8D4;
    --teal-soft:#1A2E36;
    --grey:#9A9A9A;
    --grey-soft:#2A2A2A;
    --on-accent:#0F1720;
    --shadow-color:0,0,0;
    --overlay-scrim:rgba(0,0,0,0.65);
    color-scheme: dark;

    --shadow-sm: 0 1px 3px rgba(var(--shadow-color),.4), 0 1px 2px rgba(var(--shadow-color),.3);
    --shadow-md: 0 4px 16px rgba(var(--shadow-color),.45);
    --shadow-lg: 0 24px 48px -12px rgba(var(--shadow-color),.6);
  }
}

:root[data-theme="dark"]{
  --paper:#14181A;
  --paper-raised:#1D2225;
  --ink:#EDEFEE;
  --ink-soft:#93A0A6;
  --line:#33393C;
  --line-strong:#63727A;
  --rust:#E2795A;
  --rust-soft:#3A241D;
  --amber:#D9A441;
  --amber-soft:#3A2E14;
  --moss:#6FAE8B;
  --moss-soft:#1E2E24;
  --slate:#7BA0BC;
  --slate-soft:#20303C;
  --slate-dark:#4A6E8A;
  --violet:#B39DDB;
  --violet-soft:#2A2340;
  --teal:#6FB8D4;
  --teal-soft:#1A2E36;
  --grey:#9A9A9A;
  --grey-soft:#2A2A2A;
  --on-accent:#0F1720;
  --shadow-color:0,0,0;
  --overlay-scrim:rgba(0,0,0,0.65);
  color-scheme: dark;

  --shadow-sm: 0 1px 3px rgba(var(--shadow-color),.4), 0 1px 2px rgba(var(--shadow-color),.3);
  --shadow-md: 0 4px 16px rgba(var(--shadow-color),.45);
  --shadow-lg: 0 24px 48px -12px rgba(var(--shadow-color),.6);
}

:root[data-theme="light"]{
  --paper:#F2F4F3;
  --paper-raised:#FFFFFF;
  --ink:#182024;
  --ink-soft:#5B6A72;
  --line:#D8DCD9;
  --line-strong:#7A8983;
  --rust:#AB401D;
  --rust-soft:#F7E7E0;
  --amber:#7A4E0F;
  --amber-soft:#FBEFD9;
  --moss:#3F6B52;
  --moss-soft:#E7EFE9;
  --slate:#3B5B74;
  --slate-soft:#E5EBEF;
  --slate-dark:#28394A;
  --violet:#5B3E9E;
  --violet-soft:#E9E4F5;
  --teal:#1F6C8C;
  --teal-soft:#E4F0F5;
  --grey:#888888;
  --grey-soft:#EEEEEE;
  --on-accent:#FFFFFF;
  --shadow-color:24,32,36;
  --overlay-scrim:rgba(24,32,36,0.5);
  color-scheme: light;

  --shadow-sm: 0 1px 2px rgba(var(--shadow-color),.06), 0 1px 1px rgba(var(--shadow-color),.04);
  --shadow-md: 0 4px 16px rgba(var(--shadow-color),.08);
  --shadow-lg: 0 24px 48px -12px rgba(var(--shadow-color),.28);
}

*{box-sizing:border-box;}

/* ---- Shared primitives: buttons ---- */
.btn{
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
  border:1.5px solid var(--line-strong);background:var(--paper-raised);color:var(--ink-soft);
  padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--paper-raised);color:var(--ink);border-color:var(--ink);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--slate);color:var(--on-accent);border-color:var(--slate);}
.btn-primary:hover{background:var(--slate-dark);border-color:var(--slate-dark);color:var(--on-accent);}
.btn-ghost{border-color:var(--line);color:var(--ink-soft);}
.btn-ghost:hover{background:var(--slate-soft);color:var(--slate);border-color:var(--slate);}
.btn-sm{padding:6px 11px;font-size:var(--text-xs);}
.btn-lg{padding:13px 26px;font-size:var(--text-base);}
.btn-danger{border-color:var(--rust);color:var(--rust);}
.btn-danger:hover{background:var(--rust);border-color:var(--rust);color:var(--on-accent);}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}

/* ---- Shared: top tab bar ----
   Lived in app.html's own <style> block until the admin portal needed the
   same nav. Two copies of a component this visible is how two pages start
   drifting apart, so it moved here alongside .btn — both pages already
   load this file.

   .tab is cursor:pointer by default; the app's dashboard tabs are
   drag-to-reorder and opt into the grab cursor via [draggable="true"],
   which the admin tabs (fixed order) correctly don't get. */
.tabs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-5);border-bottom:1px solid var(--line);}
.tabs-group{display:flex;gap:2px;}
.tabs-account{display:flex;align-items:center;gap:8px;margin-left:auto;padding-bottom:8px;}
.tab{
  font-family:var(--font-display);font-size:var(--text-md);font-weight:700;letter-spacing:-0.005em;
  padding:13px 20px;border:none;background:none;color:var(--ink-soft);cursor:pointer;
  position:relative;transition:color .15s ease, background .15s ease;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.tab[draggable="true"]{cursor:grab;}
.tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;vertical-align:-3px;}
.tab:hover{color:var(--ink);background:var(--paper-raised);}
.tab.active{color:var(--ink);}
.tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--gradient-sunset);border-radius:2px 2px 0 0;}
/* A count sitting on a tab (open support threads, new reports). */
.tab-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:999px;
  background:var(--rust);color:#fff;font-family:var(--font-mono);font-size:11px;line-height:18px;text-align:center;vertical-align:1px;}

/* 600px, matching the breakpoint these rules already used in app.html —
   moving them here must not change where the app reflows. */
@media(max-width:600px){
  .tabs-group{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;}
  .tabs-group::-webkit-scrollbar{display:none;}
  .tab{flex-shrink:0;}
  .tabs-account{width:100%;margin-left:0;justify-content:flex-end;}
}

/* ---- Shared: focus-visible ---- */
:focus-visible{outline:2px solid var(--slate);outline-offset:2px;}
.ticket:focus-visible,.ledger:focus-visible{outline:none;box-shadow:0 0 0 2px var(--slate);}

/* ---- Shared: theme toggle ---- */
.theme-toggle{font-size:15px;line-height:1;padding:9px 11px;}

/* ---- Shared: icon badges (colorful square/circle tiles behind an SVG
   glyph — feature cards, step markers, empty states). Six palette
   variants so a group of them can rotate through hues instead of
   repeating one accent everywhere. ---- */
.icon-badge{
  width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:var(--shadow-sm);
}
.icon-badge svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.icon-badge.lg{width:56px;height:56px;border-radius:var(--radius-lg);}
.icon-badge.lg svg{width:28px;height:28px;}
.icon-badge.sun{background:var(--gradient-sunset);color:#fff;}
.icon-badge.ocean{background:var(--gradient-ocean);color:#fff;}
.icon-badge.dusk{background:var(--gradient-dusk);color:#fff;}
.icon-badge.meadow{background:var(--gradient-meadow);color:#fff;}
.icon-badge.rust{background:var(--rust-soft);color:var(--rust);}
.icon-badge.amber{background:var(--amber-soft);color:var(--amber);}
.icon-badge.moss{background:var(--moss-soft);color:var(--moss);}
.icon-badge.slate{background:var(--slate-soft);color:var(--slate);}
.icon-badge.violet{background:var(--violet-soft);color:var(--violet);}
.icon-badge.teal{background:var(--teal-soft);color:var(--teal);}

/* ---- Shared: gradient text (headline accents — used sparingly, one
   phrase per page max, never full paragraphs since gradient text on long
   copy hurts readability) ---- */
.text-gradient{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- Shared: soft dot-grid decoration, sits behind hero/CTA art via
   ::before on a positioned ancestor. Opacity kept low so it reads as
   texture, not noise. ---- */
.dot-grid{
  background-image:radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px);
  background-size:16px 16px;
  opacity:.35;
}

/* ---- Shared: cookie consent banner + preference center (cookie-consent.js
   injects this markup on every public page that loads that script) ---- */
@keyframes cookie-banner-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:760px;margin:0 auto;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  animation:cookie-banner-rise .25s ease-out;
}
.cookie-banner-text{flex:1;min-width:220px;font-size:var(--text-sm);color:var(--ink-soft);}
.cookie-banner-text a{color:var(--slate);}
.cookie-banner-actions{display:flex;gap:8px;flex-wrap:wrap;}

.cookie-prefs-overlay{
  position:fixed;inset:0;z-index:900;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
}
.cookie-prefs-modal{
  background:var(--paper-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:480px;width:100%;padding:var(--space-6);
}
.cookie-prefs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);}
.cookie-prefs-head h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin:0;}
.cookie-prefs-close{background:none;border:none;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 6px;}
.cookie-prefs-close:hover{color:var(--ink);}
.cookie-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);}
.cookie-toggle-row:last-of-type{border-bottom:none;}
.cookie-toggle-label{display:flex;flex-direction:column;gap:2px;}
.cookie-toggle-label strong{font-size:var(--text-sm);}
.cookie-toggle-label span{font-size:var(--text-xs);color:var(--ink-soft);max-width:32ch;}
.cookie-toggle{
  flex-shrink:0;width:38px;height:22px;border-radius:12px;background:var(--line-strong);position:relative;cursor:pointer;
  transition:background .15s ease;display:inline-block;
}
.cookie-toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left .15s ease;}
.cookie-toggle.cookie-toggle-on{background:var(--slate);}
.cookie-toggle.cookie-toggle-on .cookie-toggle-knob{left:18px;}
.cookie-toggle.cookie-toggle-locked{background:var(--moss);cursor:not-allowed;opacity:.7;}
.cookie-toggle.cookie-toggle-locked .cookie-toggle-knob{left:18px;}
.cookie-prefs-note{font-size:var(--text-xs);color:var(--ink-soft);margin:var(--space-4) 0 0;}
.cookie-prefs-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:var(--space-5);flex-wrap:wrap;}

@media(max-width:640px){
  .cookie-banner{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:10px;}
  .cookie-banner-actions{justify-content:flex-end;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}