/* One look for the hub (Sam, 3 Nov 2026: "everything still looks and feels like its two tools merged together").
   The pages the hub draws come from the price tracker (.tk, tracker.css) and the reporting dashboard (.dk, dashboard.css),
   whose styles differ in small ways. This sheet, loaded last, sets the shared ones to one Ambassador design-system look:
   Quicksand, square boxes, Allium headings, the same tiles, cards, inputs and tabs. Only in the hub: the tools' own sites
   never load it, and it changes no layout or behaviour, only how things look. tracker.css and dashboard.css scope their
   rules with :where(), so these single-class rules win without !important. */

/* Body text: one size and weight (the dashboard's was 14px / 500, the tracker's 15px / 400) */
.dk { font-family: "Quicksand", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; }

/* Section headings: one size, spacing and colour */
.tk h2, .dk h2 { font-size: 14px; font-weight: 600; letter-spacing: .18em; color: var(--heading); }
.tk h3, .dk h3 { letter-spacing: .1em; }

/* Tiles: separate square boxes with a hairline border, as the dashboard's (the tracker's were joined in one grid) */
.tk .stats { gap: 12px; background: none; border: 0; }
.tk .stat { border: 1px solid #E2D9E3; padding: 14px 16px; gap: 2px; }
.tk .stat .k, .dk .tile-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tk .stat .v, .dk .tile-value { font-size: 28px; font-weight: 600; line-height: 1.15; color: var(--heading); font-variant-numeric: tabular-nums; }
.dk .tile { padding: 14px 16px; }
@media (max-width: 700px) { .tk .stat .v, .dk .tile-value { font-size: 22px; } }

/* Inputs and selects: one border colour (Abalone). Never their font, size or weight: Chrome on Windows closes an open
   dropdown when its text redraws (Sam, 3 Nov 2026: every dropdown closed at once after those were set here). */
.tk select, .dk select,
.tk input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.dk input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { border-color: #D0BFB0; border-radius: 0; }

/* File pickers (Uploads): a hub button, not the browser's grey one */
.tk input[type="file"], .dk input[type="file"] { font: inherit; font-size: 14px; color: var(--muted); }
.tk input[type="file"]::file-selector-button, .dk input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 12px; padding: 7px 14px; border: 1px solid var(--allium); border-radius: 0;
  background: #fff; color: var(--allium); cursor: pointer;
}
.tk input[type="file"]::file-selector-button:hover, .dk input[type="file"]::file-selector-button:hover { background: var(--pearl); }

/* Tabs and badges: square, like every other box (the dashboard's were rounded pills) */
.dk .subtabs a, .dk .ch-pills a { border-radius: 0; border-color: var(--allium); color: var(--allium); }
.dk .subtabs a.on, .dk .ch-pills a.on { background: var(--allium); border-color: var(--allium); color: #fff; }
.dk .fc-pill, .dk .cw-pass, .dk .src-tag { border-radius: 0; }
/* Forecasts' own page row repeats the hub's switch above it (Bookings ahead · Season fill · Spend planner) */
.dk .fc-nav { display: none; }

/* Notes and call-outs: the same Pearl band */
.dk .controls { background: var(--pearl); }

@media (prefers-color-scheme: dark) {
  .tk .stat { border-color: #4a3a4f; }
  .tk input[type="file"]::file-selector-button, .dk input[type="file"]::file-selector-button { background: transparent; color: var(--heading); border-color: var(--heading); }
  .tk select, .dk select,
  .tk input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .dk input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { border-color: #5f4b63; }
  .dk .subtabs a, .dk .ch-pills a { border-color: var(--heading); color: var(--heading); }
  .dk .subtabs a.on, .dk .ch-pills a.on { background: var(--heading); color: #1c1420; }
}