/* cookie-consent.css — TokenCompass skin for vanilla-cookieconsent v3.

   Layered over /vendor/cookieconsent/cookieconsent.css, which must load first.
   The library scopes everything to #cc-main and reads its own --cc-* custom
   properties from there, so re-declaring them on that selector is the whole
   theme; no rule here overrides library layout.

   The palette is hard-coded rather than taken from the pages' --tc-* tokens on
   purpose. The marketing pages inline a Deep-surface token subset, /deck and
   /decks/branch each carry their own :root override (paper/ink/rust and
   Polestar respectively), and a consent dialog that changed colour depending
   on which page raised it would read as a bug. It looks the same everywhere.

   Brand rules this follows, from CLAUDE.md:
     · CTAs are bone on deep. Copper/rust is interactive + critical only and
       never becomes a fill — so the accept button is bone, not copper, and
       copper appears only on links and focus rings.
     · Borders over shadows. Square corners, hairline rules, no drop shadows.
     · Mono, uppercase, wide tracking for chrome; Inter Tight for prose.
*/

#cc-main {
  /* Deep surface, matching /, /demo and /404 */
  --cc-bg: #0E1A2B;
  --cc-primary-color: #F5EEDE;
  --cc-secondary-color: rgba(245, 238, 222, 0.70);

  --cc-font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Square, like the form fields on /demo */
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 0;
  --cc-pm-toggle-border-radius: 0;
  --cc-modal-margin: 20px;
  --cc-modal-transition-duration: 0.2s;

  /* Primary = bone on deep. The one filled control. */
  --cc-btn-primary-bg: #F5EEDE;
  --cc-btn-primary-color: #0E1A2B;
  --cc-btn-primary-border-color: #F5EEDE;
  --cc-btn-primary-hover-bg: #FFFFFF;
  --cc-btn-primary-hover-color: #0E1A2B;
  --cc-btn-primary-hover-border-color: #FFFFFF;

  /* Secondary = hairline outline, no fill. Same visual weight as primary, so
     "Essential only" is never the quieter option. */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #F5EEDE;
  --cc-btn-secondary-border-color: rgba(245, 238, 222, 0.38);
  --cc-btn-secondary-hover-bg: rgba(245, 238, 222, 0.08);
  --cc-btn-secondary-hover-color: #F5EEDE;
  --cc-btn-secondary-hover-border-color: #F5EEDE;

  /* Toggles stay bone rather than copper — a copper toggle would be an accent
     used as a fill, which the brand rules rule out. */
  --cc-toggle-on-bg: #F5EEDE;
  --cc-toggle-on-knob-bg: #0E1A2B;
  --cc-toggle-off-bg: rgba(245, 238, 222, 0.22);
  --cc-toggle-off-knob-bg: #0E1A2B;
  --cc-toggle-readonly-bg: rgba(245, 238, 222, 0.12);
  --cc-toggle-readonly-knob-bg: rgba(245, 238, 222, 0.55);
  --cc-toggle-readonly-knob-icon-color: #0E1A2B;
  --cc-toggle-enabled-icon-color: #0E1A2B;
  --cc-toggle-disabled-icon-color: #F5EEDE;

  /* Raised panels use --tc-deep-2 */
  --cc-cookie-category-block-bg: #14233A;
  --cc-cookie-category-block-border: rgba(245, 238, 222, 0.18);
  --cc-cookie-category-block-hover-bg: #182A44;
  --cc-cookie-category-block-hover-border: rgba(245, 238, 222, 0.30);
  --cc-cookie-category-expanded-block-bg: #0E1A2B;
  --cc-cookie-category-expanded-block-hover-bg: #14233A;

  --cc-separator-border-color: rgba(245, 238, 222, 0.18);
  --cc-section-category-border: rgba(245, 238, 222, 0.18);

  --cc-footer-bg: #0E1A2B;
  --cc-footer-color: rgba(245, 238, 222, 0.50);
  --cc-footer-border-color: rgba(245, 238, 222, 0.18);

  /* Copper is for links, and only links. */
  --cc-link-color: #D4825F;

  --cc-overlay-bg: rgba(14, 26, 43, 0.72);

  --cc-webkit-scrollbar-bg: rgba(245, 238, 222, 0.18);
  --cc-webkit-scrollbar-hover-bg: rgba(245, 238, 222, 0.30);

  /* Below the deck gate's 999999 overlay, so a locked deck stays locked. */
  --cc-z-index: 99999;
}

/* Borders over shadows — the library ships a soft drop shadow on both modals. */
#cc-main .cm,
#cc-main .pm {
  box-shadow: none;
  border: 1px solid rgba(245, 238, 222, 0.18);
}

/* Titles follow the pages: Newsreader, light. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* Buttons are chrome, so mono/uppercase/tracked like every other label here. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

#cc-main .pm__section-title {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Copper focus ring, matching input:focus on /demo. */
#cc-main button:focus-visible,
#cc-main a:focus-visible {
  outline: 1px solid #D4825F;
  outline-offset: 2px;
}

/* ── the footer trigger ───────────────────────────────────────────────────
   Consent has to be as easy to withdraw as it was to give, so every page that
   loads this file carries a "Cookie settings" control in its footer. It is a
   <button> rather than an <a> because it performs an action rather than
   navigating; these rules strip the UA button styling so it sits in the mono
   footer row as if it were one of the links beside it. Kept here rather than
   in each page's <style> block so the three marketing footers cannot drift. */
.foot-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.foot .linkish {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}

.foot .linkish:hover {
  color: var(--tc-bone, #F5EEDE);
}

/* ── the corner trigger ───────────────────────────────────────────────────
   Injected by cookie-consent.js (suppress with data-widget="false"). There is
   no interrupting banner under opt-out, so this is the whole of the visible
   surface: the disclosure and the switches are always one click away, and
   nothing flashes over the hero on first paint.

   Deliberately quiet. It sits at 0.42 opacity until hovered or focused, which
   is enough to find when you are looking for it and easy to ignore when you
   are not. Square with a hairline border, like everything else here — no pill,
   no shadow, no accent fill. */
#tc-cookie-widget {
  position: fixed;
  left: 20px;
  /* Clears the home indicator on phones; falls back to plain 20px elsewhere. */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 99998;           /* one under #cc-main, so the modal covers it */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;

  appearance: none;
  background: #0E1A2B;
  border: 1px solid rgba(245, 238, 222, 0.28);
  border-radius: 0;
  color: #F5EEDE;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 160ms cubic-bezier(.4, 0, .2, 1),
              border-color 160ms cubic-bezier(.4, 0, .2, 1);
}

#tc-cookie-widget svg {
  width: 17px;
  height: 17px;
  display: block;
}

#tc-cookie-widget:hover,
#tc-cookie-widget:focus-visible {
  opacity: 1;
  border-color: rgba(245, 238, 222, 0.65);
}

#tc-cookie-widget:focus-visible {
  outline: 1px solid #D4825F;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #tc-cookie-widget { transition: none; }
}

/* ── controls hidden, temporarily ─────────────────────────────────────────
   Owner's call, 2026-09-18: the consent UI is not being shown yet. The
   machinery underneath still runs exactly as before — the library loads,
   preferences are honoured, and deck-stage.js still asks tcConsent before it
   stores anything — but neither visible control is rendered.

   Deleting this one block brings both back. Nothing else needs changing:
   the markup, the injected trigger and the JS are all still in place.

   ⚠️ While this block is live there is **no way for a visitor to change
   their preferences**, and "always one click away" is precisely what makes
   the opt-out model defensible. Remove it before the site is promoted. */
#tc-cookie-widget,
.foot .linkish { display: none; }