/* Bebas Neue: the wordmark's face (vendor/fonts, from @fontsource/bebas-neue). */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'),
       url('/vendor/fonts/bebas-neue-latin-400-normal.woff') format('woff');
}

/* ── Tarmac Spec — public subpage layer ──
   Loaded last on every entrylane.app page other than the homepage (shows
   directory, guides, case studies, contact, onboarding, sign-in, legal,
   tutorials, profiles, 404). Those pages predate the redesign and run on
   three older token sets — kinetic.css (light), guide.css (carbon) and the
   site chrome (site-chrome.css) — plus a few page-inline sets. This file
   points every one of them at the Tarmac scheme tokens (tarmac-tokens.css),
   so the pages follow the visitor's scheme without their markup changing.
   Selectors are html[data-scheme] so they outrank each page's :root. */

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

html[data-scheme] {
  color-scheme: dark;
}
html[data-mode="light"] { color-scheme: light; }
html[data-scheme] {

  /* kinetic.css — surfaces were light; now the dark Tarmac stack */
  --surface-bright:   var(--cont);
  --surface-low:      var(--low);
  --surface-mid:      var(--cont);
  --surface-high:     var(--high);
  --surface-highest:  var(--highest);
  --surface-card:     var(--low);
  --surface-dark:     var(--low);
  --surface-darker:   var(--lowest);
  --on-surface:       var(--text);
  --on-surface-muted: var(--variant);
  --on-surface-dim:   var(--muted);
  --on-dark:          var(--text);
  --on-dark-muted:    var(--variant);
  --on-dark-dim:      var(--muted);
  --primary:          var(--accent);
  --primary-deep:     var(--accent);
  --primary-soft:     var(--glow-lo);
  --primary-ink:      var(--soft);
  --on-primary:       var(--on-accent);
  --warning:          var(--accent);
  --danger:           #ff8a80;
  --border:           rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-dark:      rgba(255, 255, 255, 0.08);
  --shadow-stamp:        0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-stamp-accent: 0 0 28px var(--glow);
  --shadow-stamp-dark:   0 10px 30px rgba(0, 0, 0, 0.5);
  --glow-focus:          0 0 0 3px var(--glow-lo);
  --font-headline:    'Space Grotesk', system-ui, sans-serif;
  --font-display:     'Space Grotesk', system-ui, sans-serif;
  --font-label:       'Space Grotesk', system-ui, sans-serif;
  --font-body:        'Chivo', system-ui, sans-serif;

  /* guide.css / case-study.css */
  --bg:           var(--surface);
  --panel:        var(--low);
  --accent-press: var(--accent);
  --ink:          var(--text);
  --body-copy:    var(--variant);
  --line:         rgba(255, 255, 255, 0.08);

  /* site-chrome.css */
  --sc-accent:      var(--accent);
  --sc-accent-soft: var(--pale);
  --sc-ink:         var(--text);
  --sc-ink-70:      var(--variant);
  --sc-ink-55:      var(--muted);
  --sc-line:        rgba(255, 255, 255, 0.07);
  --sc-line-strong: rgba(255, 255, 255, 0.14);
  --sc-bar-bg:      var(--hdr-bg);
  --sc-foot-bg:     var(--lowest);

  /* page-inline sets (shows directory, contact, 404, profile) */
  --canvas:       var(--surface);
  --panel-border: rgba(255, 255, 255, 0.08);
  --lp-cream:     var(--text);
  --lp-cream-70:  var(--variant);
  --lp-cream-55:  var(--muted);
}

/* ── Base ── */
html[data-scheme] body {
  background-color: var(--surface);
  color: var(--text);
  font-family: 'Chivo', system-ui, sans-serif;
}
html[data-scheme] ::selection { background: var(--accent); color: var(--on-accent); }

/* Display type: Space Grotesk, tight, like the homepage. Many of these pages
   name Archivo Black directly, so this wins with !important. */
html[data-scheme] :is(h1, h2, h3, .h-xl, .h-hero, .h-lg, .h-md, .g-title, .cs-title) {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
html[data-scheme] :is(.sc-kw-entry, .sc-kw-lane, .kw-entry, .kw-lane) {
  font-family: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
html[data-scheme] :is(.sc-kw-lane, .kw-lane) { color: var(--accent) !important; }

/* Body copy and controls that name Archivo directly → Chivo. */
html[data-scheme] :is(p, li, td, th, label, input, textarea, select, button:not(.sc-menu), .btn, .body, .body-lg, .body-sm) {
  font-family: 'Chivo', system-ui, sans-serif;
}

/* Kinetic "stamped" solid offsets read as a hard edge on dark; use soft lift. */
html[data-scheme] .btn-primary:hover,
html[data-scheme] .btn:hover { box-shadow: 0 0 28px var(--glow); }

/* ── Site chrome ── */
/* Opaque on its own layer, like the homepage bar (iOS Safari otherwise
   paints scrolling content through or over a blurred sticky bar). */
html[data-scheme] .sc-header { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); border-bottom-color: transparent; background: linear-gradient(var(--hdr-bg), var(--hdr-bg)), var(--lowest); -webkit-backdrop-filter: none; backdrop-filter: none; transform: translateZ(0); }
/* The bar's links and button are styled in site-chrome.css on the tokens. */
html[data-scheme] .sc-cta { box-shadow: 0 0 22px var(--glow); }
html[data-scheme] .sc-cta--ghost { box-shadow: none; }
html[data-scheme] .sc-footer { background: linear-gradient(180deg, transparent, var(--lowest) 100px); border-top-color: transparent; }

/* Inputs follow the dark stack. */
html[data-scheme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background-color: var(--lowest);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-scheme] :is(input, textarea)::placeholder { color: var(--muted); }
html[data-scheme] :is(input, select, textarea):focus { border-color: var(--accent); outline: none; }

/* Light mode: soften the heavy dark-theme shadows the old pages carry. */
html[data-mode="light"] .sc-header { box-shadow: 0 1px 0 rgba(20, 16, 30, 0.06), 0 6px 20px rgba(20, 16, 30, 0.06); }
html[data-mode="light"] :is(.sc-kw-lane, .kw-lane) { color: var(--accent-text, var(--accent)) !important; }
html[data-mode="light"] .sc-cta--ghost { border-color: rgba(20, 16, 30, 0.18); }
html[data-mode="light"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background-color: #fff; border-color: rgba(20, 16, 30, 0.16);
}

/* ── Page heroes: the carbon-fiber photo band with its angled pinstripes and
   accent glow, as these pages always had, re-tinted to the visitor's
   scheme. The band stays dark in both modes, so text inside it uses the
   night ink regardless of mode. ── */
html[data-scheme] :is(.dir-hero, .contact-hero) {
  --text: #f5f2f9; --variant: #d8d0e6; --muted: #a99fbe;
  --low: rgba(20, 18, 26, 0.88); --lowest: #0e0c12; --cont: #1e1b24; --high: #28242f;
  /* Re-declared here: aliases set on <html> resolved against the mode's ink. */
  --lp-cream: #f5f2f9; --lp-cream-70: #d8d0e6; --lp-cream-55: #a99fbe;
  --on-surface: #f5f2f9; --on-surface-muted: #d8d0e6; --ink: #f5f2f9; --body-copy: #d8d0e6;
  --pale: color-mix(in srgb, var(--accent) 25%, #ffffff);
  background:
    linear-gradient(115deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.74) 58%, rgba(10,10,11,0.5) 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
    url('/images/hero-carbon.jpg') center/cover no-repeat !important;
}
@media (max-width: 760px) {
  html[data-scheme] :is(.dir-hero, .contact-hero) {
    background:
      linear-gradient(115deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.74) 58%, rgba(10,10,11,0.5) 100%),
      repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
      url('/images/hero-carbon-1200.jpg') center/cover no-repeat !important;
  }
}
html[data-scheme] :is(.dir-hero, .contact-hero)::after {
  background:
    radial-gradient(ellipse 60% 45% at 85% 30%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 55%, transparent) 70%, var(--surface) 96%) !important;
}
html[data-mode="light"] :is(.dir-hero, .contact-hero)::after {
  background:
    radial-gradient(ellipse 60% 45% at 85% 20%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--surface) 100%) !important;
}
/* Light mode: white forged carbon (the homepage's light hero texture) instead of
   the dark band, so the hero text goes back to the day ink. `inherit` hands
   each token back the page's own light value. */
html[data-mode="light"] :is(.dir-hero, .contact-hero) {
  --text: inherit; --variant: inherit; --muted: inherit;
  --low: inherit; --lowest: inherit; --cont: inherit; --high: inherit;
  --lp-cream: inherit; --lp-cream-70: inherit; --lp-cream-55: inherit;
  --on-surface: inherit; --on-surface-muted: inherit; --ink: inherit; --body-copy: inherit; --pale: inherit;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--surface) 70%, transparent) 0%, color-mix(in srgb, var(--surface) 25%, transparent) 60%, transparent 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
    url('/images/hero-forged-light.jpg') center/cover no-repeat !important;
}
@media (max-width: 760px) {
  html[data-mode="light"] :is(.dir-hero, .contact-hero) {
    background:
      linear-gradient(115deg, color-mix(in srgb, var(--surface) 70%, transparent) 0%, color-mix(in srgb, var(--surface) 25%, transparent) 60%, transparent 100%),
      repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
      url('/images/hero-forged-light-1200.jpg') center/cover no-repeat !important;
  }
}
html[data-scheme] .legal-hero {
  --text: #f5f2f9; --variant: #d8d0e6; --muted: #a99fbe;
  --lp-cream: #f5f2f9; --lp-cream-70: #d8d0e6; --lp-cream-55: #a99fbe; --on-surface: #f5f2f9; --on-surface-muted: #d8d0e6;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    #15151a !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme] body { background-color: var(--surface) !important; }
/* kinetic.css sets html, body { height: 100% }, which caps body at one
   screen; the sticky header then scrolls away once you pass that height.
   Let body grow with its content. */
html[data-scheme] body { height: auto !important; min-height: 100vh; }
html[data-scheme] .legal-body code { background: var(--cont); }
html[data-scheme] .contact-card { background: var(--low); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
html[data-scheme] :is(.searchbar, .radius-opt:not(.is-on)) { background-color: var(--low); color: var(--variant); }
html[data-scheme] .radius-opt.is-on { color: var(--on-accent); }
html[data-mode="light"] .contact-card { box-shadow: 0 1px 2px rgba(20, 16, 30, 0.06), 0 10px 28px rgba(20, 16, 30, 0.08); }

/* ── Date/time picker (flatpickr) on the Tarmac stack ──
   flatpickr.min.css hard-codes a white calendar with #393939 ink, and the
   generic input rule above turned the month/year/hour/minute boxes inside it
   black — a white grid with black holes. Repaint the whole popover on the
   tokens: tonal surfaces, accent only on the selected day and the weekday
   row, and the inner controls transparent so they read as part of the card. */
html[data-scheme] .flatpickr-calendar {
  background: var(--low);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  font-family: 'Chivo', system-ui, sans-serif;
}
html[data-mode="light"] .flatpickr-calendar { border-color: rgba(20, 16, 30, 0.12); box-shadow: 0 12px 32px rgba(20, 16, 30, 0.14); }
html[data-scheme] .flatpickr-calendar.arrowTop:before, html[data-scheme] .flatpickr-calendar.arrowTop:after,
html[data-scheme] .flatpickr-calendar.arrowBottom:before, html[data-scheme] .flatpickr-calendar.arrowBottom:after { display: none; }
html[data-scheme] .flatpickr-months, html[data-scheme] .flatpickr-month,
html[data-scheme] .flatpickr-weekdays, html[data-scheme] .flatpickr-days,
html[data-scheme] .flatpickr-time { background: transparent; color: var(--text); }
html[data-scheme] .flatpickr-months .flatpickr-month { height: 44px; }
html[data-scheme] .flatpickr-months .flatpickr-prev-month,
html[data-scheme] .flatpickr-months .flatpickr-next-month { color: var(--variant); fill: var(--variant); height: 44px; padding: 12px; }
html[data-scheme] .flatpickr-months .flatpickr-prev-month svg,
html[data-scheme] .flatpickr-months .flatpickr-next-month svg { fill: var(--variant); }
html[data-scheme] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-scheme] .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent-text); }
html[data-scheme] .flatpickr-current-month { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; padding-top: 8px; color: var(--text); }
/* The month <select> and year <input> sit flush in the header: no box. */
/* !important: the generic input rule above carries four :not() attribute
   selectors, so it out-ranks any plain class selector here. */
html[data-scheme] .flatpickr-calendar :is(input, select, .flatpickr-monthDropdown-months, input.cur-year) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
html[data-scheme] .flatpickr-current-month .flatpickr-monthDropdown-months { font: inherit; color: var(--text); appearance: auto; }
html[data-scheme] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--low); color: var(--text); }
html[data-scheme] .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
html[data-scheme] .flatpickr-current-month input.cur-year:hover,
html[data-scheme] .flatpickr-current-month input.cur-year:focus { background-color: var(--cont) !important; }
html[data-scheme] .flatpickr-current-month input.cur-year { font: inherit; font-weight: 700; color: var(--text); }
html[data-scheme] .numInputWrapper span { border-color: rgba(255, 255, 255, 0.12); }
html[data-scheme] .numInputWrapper span:hover { background: var(--cont); }
html[data-scheme] .numInputWrapper span.arrowUp:after { border-bottom-color: var(--variant); }
html[data-scheme] .numInputWrapper span.arrowDown:after { border-top-color: var(--variant); }
html[data-scheme] span.flatpickr-weekday { color: var(--accent-text); font-weight: 600; background: transparent; }
html[data-scheme] .flatpickr-day { color: var(--text); border-radius: 4px; border-color: transparent; }
html[data-scheme] .flatpickr-day:hover, html[data-scheme] .flatpickr-day:focus { background: var(--cont); border-color: var(--cont); color: var(--text); }
html[data-scheme] .flatpickr-day.prevMonthDay, html[data-scheme] .flatpickr-day.nextMonthDay,
html[data-scheme] .flatpickr-day.flatpickr-disabled { color: var(--muted); opacity: 0.55; }
html[data-scheme] .flatpickr-day.today { border-color: var(--accent); }
html[data-scheme] .flatpickr-day.today:hover { background: var(--accent); color: var(--on-accent); }
html[data-scheme] .flatpickr-day.selected, html[data-scheme] .flatpickr-day.selected:hover,
html[data-scheme] .flatpickr-day.startRange, html[data-scheme] .flatpickr-day.endRange {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 22px var(--glow);
}
/* Time row: a tonal band under the grid, controls transparent inside it. */
html[data-scheme] .flatpickr-time { border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--cont); }
html[data-mode="light"] .flatpickr-time { border-top-color: rgba(20, 16, 30, 0.1); }
html[data-scheme] .flatpickr-time input, html[data-scheme] .flatpickr-time .flatpickr-time-separator,
html[data-scheme] .flatpickr-time .flatpickr-am-pm { color: var(--text); background: transparent; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
html[data-scheme] .flatpickr-time input:hover, html[data-scheme] .flatpickr-time input:focus,
html[data-scheme] .flatpickr-time .flatpickr-am-pm:hover, html[data-scheme] .flatpickr-time .flatpickr-am-pm:focus { background-color: var(--high) !important; color: var(--text) !important; }
html[data-scheme] .flatpickr-time .numInputWrapper:hover { background: transparent; }
html[data-scheme] .fp-clear { background: var(--low); border-color: rgba(255, 255, 255, 0.14); color: var(--variant); }
html[data-scheme] .fp-clear:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-scheme] .fp-done-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--cont); padding-top: 0; }
html[data-mode="light"] .fp-done-bar { border-top-color: rgba(20, 16, 30, 0.1); }
html[data-scheme] .fp-done { background: var(--accent); color: var(--on-accent); border-radius: 4px; font-family: 'Chivo', system-ui, sans-serif; }
html[data-scheme] .fp-done:hover { box-shadow: 0 0 22px var(--glow); filter: none; }