/* Dovetail Tracker subsite: "dark studio". Navy and orange from the app icon, Sora headings, Inter body.
   Independent of the BiteSite site.css: every class is prefixed dt-. */

:root {
  --dt-bg: #0F1629;
  --dt-bg-alt: #141D36;
  --dt-surface: #1A2442;
  --dt-surface-hi: #22305A;
  --dt-line: #2A3760;
  --dt-text: #F2F4FA;
  --dt-text-soft: #C6CCDD;
  --dt-muted: #8C95B2;
  --dt-orange: #F58A2C;
  --dt-orange-hi: #FFA04A;
  --dt-orange-lo: #E86F12;
  --dt-orange-ink: #2A1300;
  --dt-white-bar: #F4F1EC;
  --dt-radius: 16px;
  --dt-font-head: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--dt-bg);
  color: var(--dt-text);
  font: 17px/1.65 var(--dt-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--dt-font-head); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
img { max-width: 100%; height: auto; }

a { color: var(--dt-orange-hi); text-underline-offset: 3px; }
a:hover { color: var(--dt-text); }
:focus-visible { outline: 2px solid var(--dt-orange-hi); outline-offset: 3px; border-radius: 4px; }

kbd {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--dt-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--dt-surface);
  font: 14px var(--dt-font-body);
  white-space: nowrap;
}

.dt-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .dt-wrap { padding: 0 32px; } }
.dt-narrow { max-width: 820px; }

.dt-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--dt-orange); color: var(--dt-orange-ink); border-radius: 8px; }
.dt-skip:focus { left: 8px; }

/* --- Buttons --- */

.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--dt-orange-hi), var(--dt-orange-lo));
  color: var(--dt-orange-ink);
  font: 600 15px/1.2 var(--dt-font-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(245, 138, 44, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dt-btn:hover { color: var(--dt-orange-ink); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(245, 138, 44, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.dt-btn-sm { padding: 8px 16px; font-size: 14px; }
.dt-btn-lg { padding: 15px 28px; font-size: 17px; }
.dt-btn-icon { width: 18px; height: 18px; }
.dt-btn-ghost { background: transparent; color: var(--dt-text); border-color: var(--dt-line); box-shadow: none; }
.dt-btn-ghost:hover { color: var(--dt-text); background: var(--dt-surface); box-shadow: none; }
.dt-btn.is-disabled { background: var(--dt-surface); color: var(--dt-muted); border-color: var(--dt-line); box-shadow: none; cursor: default; transform: none; }

.dt-link { font-weight: 600; text-decoration: none; }

/* --- Header and footer --- */

.dt-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 22, 41, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(42, 55, 96, 0.6);
}
.dt-header-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.dt-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dt-text); text-decoration: none; font: 600 18px var(--dt-font-head); letter-spacing: -0.01em; }
.dt-brand:hover { color: var(--dt-text); }
.dt-nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.dt-nav a { color: var(--dt-text-soft); text-decoration: none; }
.dt-nav a:hover, .dt-nav a[aria-current="page"] { color: var(--dt-text); }
.dt-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--dt-orange); text-decoration-thickness: 2px; text-underline-offset: 8px; }

@media (max-width: 640px) {
  .dt-header-inner { flex-wrap: wrap; gap: 4px 16px; padding-top: 10px; padding-bottom: 10px; }
  .dt-brand span { font-size: 16px; }
  .dt-header .dt-btn { margin-left: auto; }
  .dt-nav { order: 3; width: 100%; margin-left: 0; gap: 20px; }
}

.dt-footer { margin-top: 0; padding: 56px 0 32px; background: #0B1122; border-top: 1px solid var(--dt-line); color: var(--dt-muted); font-size: 15px; }
.dt-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.dt-footer-brand { max-width: 360px; }
.dt-footer-brand .dt-brand { margin-bottom: 12px; }
.dt-footer-brand a:not(.dt-brand) { color: var(--dt-text-soft); }
.dt-footer-cols { display: flex; gap: 64px; }
.dt-footer-cols div { display: flex; flex-direction: column; gap: 8px; }
.dt-footer-cols a { color: var(--dt-text-soft); text-decoration: none; }
.dt-footer-cols a:hover { color: var(--dt-orange-hi); }
.dt-footer-heading { margin: 0 0 4px; color: var(--dt-text); font-weight: 600; }
.dt-footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--dt-line); font-size: 13px; }
.dt-footer-legal p { margin: 0 0 6px; }

/* --- Shared section pieces --- */

.dt-eyebrow { margin: 0 0 12px; color: var(--dt-orange); font: 600 13px var(--dt-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.dt-lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--dt-text-soft); max-width: 720px; }
.dt-section { padding: 88px 0; }
.dt-section-alt { background: var(--dt-bg-alt); }
.dt-section-lead { max-width: 680px; color: var(--dt-text-soft); font-size: 18px; margin-bottom: 40px; }
.dt-small { color: var(--dt-muted); font-size: 15px; }
.dt-meta { margin: 18px 0 0; color: var(--dt-muted); font-size: 14px; }
@media (max-width: 640px) { .dt-section { padding: 64px 0; } }

.dt-shot { margin: 0; }
.dt-shot img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--dt-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* The dovetail motif (see joint() in views.js). */
.dt-joint { display: block; width: 100%; max-width: 420px; height: auto; }
.dt-bar-a { fill: var(--dt-orange); }
.dt-bar-b { fill: var(--dt-white-bar); }
.dt-joint-wide { max-width: 760px; margin: 0 0 48px; opacity: 0.95; }

/* --- Landing page --- */

.dt-hero {
  position: relative;
  padding: 80px 0 0;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(245, 138, 44, 0.22), transparent 70%),
    radial-gradient(700px 400px at 90% 30%, rgba(60, 90, 180, 0.25), transparent 70%),
    var(--dt-bg);
  text-align: center;
  overflow: hidden;
}
.dt-hero-inner { display: flex; flex-direction: column; align-items: center; }
.dt-hero-icon { width: 112px; height: 112px; margin-bottom: 24px; filter: drop-shadow(0 16px 32px rgba(245, 138, 44, 0.35)); }
.dt-hero h1 { max-width: 900px; }
.dt-hero .dt-lead { margin: 0 auto 32px; }
.dt-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dt-hero-shot { margin-top: 64px; max-width: 1240px; }
.dt-hero-shot .dt-shot img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }

.dt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.dt-card { padding: 28px; background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: var(--dt-radius); }
.dt-card p { margin: 0; color: var(--dt-text-soft); }
.dt-callout { margin: 32px 0 0; font: 600 20px/1.4 var(--dt-font-head); color: var(--dt-text); }

.dt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.dt-step { position: relative; padding: 28px; background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: var(--dt-radius); }
.dt-step p:last-child { margin: 0; color: var(--dt-text-soft); }
.dt-step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--dt-orange);
  color: var(--dt-orange-ink);
  font: 700 16px var(--dt-font-head);
}
.dt-step-who { margin: 0 0 4px; color: var(--dt-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.dt-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; margin-top: 40px; }
.dt-principle { padding-top: 20px; border-top: 3px solid var(--dt-orange); }
.dt-principle h3 { font-size: 24px; }
.dt-principle p { color: var(--dt-text-soft); margin: 0; }

.dt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-bottom: 56px; }
.dt-feature-group ul { list-style: none; margin: 0; padding: 0; }
.dt-feature-group li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--dt-text-soft); font-size: 16px; }
.dt-feature-group li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 4px; background: var(--dt-orange); }

.dt-shot-pair { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 24px; align-items: center; }
@media (max-width: 760px) {
  .dt-shot-pair { grid-template-columns: 1fr; }
  .dt-shot-tall { max-width: 300px; margin: 0 auto; }
}

.dt-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dt-timing p { color: var(--dt-text-soft); }
.dt-stats { display: grid; gap: 16px; margin: 0; }
.dt-stats > div { padding: 20px 24px; background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: var(--dt-radius); }
.dt-stats dt { color: var(--dt-muted); font-size: 14px; }
.dt-stats dd { margin: 2px 0; font: 700 44px/1.1 var(--dt-font-head); color: var(--dt-orange-hi); letter-spacing: -0.02em; }
.dt-stats dd span { margin-left: 4px; font-size: 20px; color: var(--dt-text-soft); }
.dt-stats p { margin: 0; color: var(--dt-muted); font-size: 14px; }

.dt-producers { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.dt-producers p { color: var(--dt-text-soft); }
@media (max-width: 900px) {
  .dt-timing, .dt-producers { grid-template-columns: 1fr; gap: 40px; }
}

.dt-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 40px; border-radius: var(--dt-radius); overflow: hidden; border: 1px solid var(--dt-line); background: #000; }
.dt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dt-download {
  text-align: center;
  background: radial-gradient(800px 400px at 50% 100%, rgba(245, 138, 44, 0.18), transparent 70%), var(--dt-bg);
}
.dt-download-inner { display: flex; flex-direction: column; align-items: center; }
.dt-download .dt-joint { max-width: 300px; margin-bottom: 32px; }
.dt-download .dt-section-lead { margin: 0 auto 28px; }
.dt-reqs { list-style: none; margin: 32px 0 24px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dt-reqs li { padding: 6px 14px; border: 1px solid var(--dt-line); border-radius: 999px; color: var(--dt-text-soft); font-size: 14px; }

/* --- Inner pages --- */

.dt-page-header { padding-top: 72px; padding-bottom: 40px; }
.dt-page-header h1 { font-size: clamp(34px, 5vw, 52px); }
main > .dt-wrap:last-child, main > .dt-guide { padding-bottom: 96px; }

.dt-prose { color: var(--dt-text-soft); }
.dt-prose h2 { margin-top: 40px; font-size: 26px; color: var(--dt-text); }
.dt-prose strong { color: var(--dt-text); }
.dt-prose ul, .dt-prose ol { padding-left: 22px; margin: 0 0 16px; }
.dt-prose li { margin-bottom: 8px; }
.dt-prose li::marker { color: var(--dt-orange); }

.dt-guide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.dt-guide-body { max-width: 760px; }
.dt-guide-body > h2 { margin: 16px 0 28px; padding-top: 8px; }
.dt-guide-body > h2:not(:first-child) { margin-top: 64px; }
.dt-guide-steps { counter-reset: step; }
.dt-guide-step { counter-increment: step; }
.dt-guide-step .dt-step-num::before { content: counter(step); }
.dt-guide-step { padding: 0 0 28px 0; margin-bottom: 28px; border-bottom: 1px solid var(--dt-line); }
.dt-guide-step h3 { display: flex; align-items: center; gap: 14px; }
.dt-guide-step h3 .dt-step-num { flex: none; margin: 0; width: 30px; height: 30px; font-size: 14px; }
.dt-guide-step .dt-prose { padding-left: 44px; }
.dt-toc { position: sticky; top: 92px; padding: 20px; background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: var(--dt-radius); font-size: 14px; }
.dt-toc-title { margin: 0 0 12px; color: var(--dt-muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.dt-toc-heading { margin: 12px 0 6px; font-weight: 600; }
.dt-toc-heading a { color: var(--dt-text); text-decoration: none; }
.dt-toc ol { margin: 0; padding-left: 20px; color: var(--dt-muted); }
.dt-toc li { margin-bottom: 4px; }
.dt-toc ol a { color: var(--dt-text-soft); text-decoration: none; }
.dt-toc a:hover { color: var(--dt-orange-hi); }
/* The performer's starting point (guideStartPicker in views.js) hides the other path's steps, in the guide
   and its table of contents. Hidden steps don't count, so the step numbers and list numbers stay in order. */
.dt-start { margin: 0 0 56px; padding: 0; border: 0; min-width: 0; }
.dt-start legend { margin-bottom: 16px; padding: 0; font: 600 20px var(--dt-font-head); color: var(--dt-text); }
.dt-start-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.dt-start-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 28px 20px;
  text-align: center;
  background: var(--dt-surface);
  border: 2px solid var(--dt-line);
  border-radius: var(--dt-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dt-start-option:hover { border-color: var(--dt-muted); transform: translateY(-2px); }
/* The radio itself is hidden but still focusable and announced; the tile shows its state. */
.dt-start-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dt-start-option:has(input:focus-visible) { outline: 2px solid var(--dt-orange-hi); outline-offset: 3px; }
.dt-start-option:has(input:checked) {
  border-color: var(--dt-orange);
  background: linear-gradient(180deg, rgba(245, 138, 44, 0.16), rgba(245, 138, 44, 0.04)), var(--dt-surface);
  box-shadow: 0 10px 30px rgba(245, 138, 44, 0.18);
}
.dt-start-option:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dt-orange);
  color: var(--dt-orange-ink);
  font: 700 14px/1 var(--dt-font-body);
}
.dt-start-icon { width: 52px; height: 52px; margin-bottom: 8px; fill: none; stroke: var(--dt-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dt-start-option:has(input:checked) .dt-start-icon { stroke: var(--dt-orange-hi); }
.dt-start-option strong { font: 600 18px/1.3 var(--dt-font-head); color: var(--dt-text); }
.dt-start-hint { color: var(--dt-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 560px) { .dt-start-option { min-height: 150px; } }
.dt-guide:has(.dt-start input[value="bounce"]:checked) [data-path="project"],
.dt-guide:has(.dt-start input[value="project"]:checked) [data-path="bounce"] { display: none; }

@media (max-width: 900px) {
  .dt-guide { grid-template-columns: 1fr; gap: 32px; }
  .dt-toc { position: static; }
  .dt-guide-step .dt-prose { padding-left: 0; }
}

.dt-table-wrap { overflow-x: auto; margin-bottom: 32px; border: 1px solid var(--dt-line); border-radius: var(--dt-radius); }
.dt-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dt-table th, .dt-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--dt-line); vertical-align: top; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table th { background: var(--dt-surface); color: var(--dt-muted); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.dt-table td { color: var(--dt-text-soft); }

.dt-faq { margin-bottom: 32px; border-top: 1px solid var(--dt-line); }
.dt-faq details { border-bottom: 1px solid var(--dt-line); }
.dt-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font: 600 19px/1.35 var(--dt-font-head);
  letter-spacing: -0.01em;
}
.dt-faq summary::-webkit-details-marker { display: none; }
.dt-faq summary::after { content: '+'; flex: none; color: var(--dt-orange); font: 400 28px/1 var(--dt-font-body); transition: transform 0.2s ease; }
.dt-faq details[open] summary::after { transform: rotate(45deg); }
.dt-faq summary:hover { color: var(--dt-orange-hi); }
.dt-faq .dt-prose { padding: 0 0 20px; max-width: 700px; }

.dt-release { padding: 32px; margin-bottom: 24px; background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: var(--dt-radius); }
.dt-release h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 28px; }
.dt-release-meta { color: var(--dt-muted); font-size: 15px; }
.dt-release ul { margin: 0 0 24px; padding-left: 22px; color: var(--dt-text-soft); }
.dt-release li { margin-bottom: 6px; }
.dt-release li::marker { color: var(--dt-orange); }
.dt-badge { padding: 3px 10px; border-radius: 999px; background: rgba(245, 138, 44, 0.15); color: var(--dt-orange-hi); font: 600 13px var(--dt-font-body); letter-spacing: 0; }
@media (max-width: 640px) { .dt-release { padding: 24px 20px; } }