/* GuestRep design tokens — shared by the website and both panels. */
/* Schibsted Grotesk (SIL Open Font License), self-hosted: no third-party requests. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;

  /* Neutral surfaces (panel language: white cards on a light grey page). */
  --paper:      #F7F7F8;
  --surface:    #FFFFFF;
  --surface-2:  #F1F1F3;
  --side-bg:    #FBFBFC;
  --ink:        #17181C;
  --text:       #2C2D33;
  --muted:      #6A6C75;
  --line:       #E6E6E9;
  --line-strong:#D3D4D9;

  /* Brand orange: fills use --sea, orange text uses --sea-strong. */
  --sea:        #F07C1E;
  --sea-hover:  #E2690B;
  --sea-strong: #B4500A;
  --sea-soft:   #FDEDE0;
  --on-sea:     #17181C;
  --link:       #2463EB;
  --sun:        #F07C1E;
  --sun-soft:   #FEF3E8;

  --pos:        #13804B;
  --pos-soft:   #E5F5EC;
  --neg:        #D02F2F;
  --neg-soft:   #FCE9E9;
  --mid:        #A66300;
  --mid-soft:   #FDF1DC;

  /* Platform identities for charts: vivid, validated for colour-blind separation. */
  --p-google:       #2F7CF6;
  --p-tripadvisor:  #0E9F62;
  --p-holidaycheck: #8B5CF6;
  --p-booking:      #E46F12;

  --shadow-1: 0 1px 2px rgba(23, 24, 28, .05);
  --shadow-2: 0 8px 28px rgba(23, 24, 28, .10);
  --focus:    0 0 0 3px rgba(240, 124, 30, .40);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #111113;
    --surface:    #1B1B1F;
    --surface-2:  #26262B;
    --side-bg:    #151518;
    --ink:        #F2F2F4;
    --text:       #D8D8DD;
    --muted:      #9B9CA5;
    --line:       #2C2C32;
    --line-strong:#3C3C43;
    --sea:        #F5923A;
    --sea-hover:  #FFA552;
    --sea-strong: #F9A65E;
    --sea-soft:   #3A2414;
    --on-sea:     #1A1206;
    --link:       #79A6FF;
    --sun:        #F5923A;
    --sun-soft:   #33231A;
    --pos:        #3FC383;
    --pos-soft:   #15301F;
    --neg:        #F47373;
    --neg-soft:   #3A1C1C;
    --mid:        #E7A84A;
    --mid-soft:   #3A2C14;
    --p-google:       #4C8DF6;
    --p-tripadvisor:  #1FA867;
    --p-holidaycheck: #9375F5;
    --p-booking:      #DE6F1F;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 12px 34px rgba(0, 0, 0, .5);
    --focus:    0 0 0 3px rgba(245, 146, 58, .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #111113;
  --surface:    #1B1B1F;
  --surface-2:  #26262B;
  --side-bg:    #151518;
  --ink:        #F2F2F4;
  --text:       #D8D8DD;
  --muted:      #9B9CA5;
  --line:       #2C2C32;
  --line-strong:#3C3C43;
  --sea:        #F5923A;
  --sea-hover:  #FFA552;
  --sea-strong: #F9A65E;
  --sea-soft:   #3A2414;
  --on-sea:     #1A1206;
  --link:       #79A6FF;
  --sun:        #F5923A;
  --sun-soft:   #33231A;
  --pos:        #3FC383;
  --pos-soft:   #15301F;
  --neg:        #F47373;
  --neg-soft:   #3A1C1C;
  --mid:        #E7A84A;
  --mid-soft:   #3A2C14;
  --p-google:       #4C8DF6;
  --p-tripadvisor:  #1FA867;
  --p-holidaycheck: #9375F5;
  --p-booking:      #DE6F1F;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 34px rgba(0, 0, 0, .5);
  --focus:    0 0 0 3px rgba(245, 146, 58, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  font-feature-settings: "tnum" 0;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Shared form controls */
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink); }
.field small { color: var(--muted); font-size: 12.5px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sea); box-shadow: var(--focus); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: 8px;
  font-weight: 600; font-size: 14px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--sea); color: var(--on-sea); }
.btn-primary:hover { background: var(--sea-hover); color: var(--on-sea); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--sea); color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); }
.btn-danger:hover { background: var(--neg-soft); }
.btn-sm { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

.notice { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.notice-ok { border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); background: var(--pos-soft); color: var(--ink); }
.notice-error { border-color: color-mix(in srgb, var(--neg) 35%, var(--line)); background: var(--neg-soft); color: var(--ink); }
.notice-info { border-color: color-mix(in srgb, var(--sea) 30%, var(--line)); background: var(--sea-soft); color: var(--ink); }

.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--sea); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }