/* ============================================================
   A Week From Wednesday — document pages
   ------------------------------------------------------------
   Styles for the legal documents (EULA, Privacy, Refund, Terms)
   and the help guide. Deliberately SEPARATE from the marketing
   page's stylesheet: the landing page is designed on its own and
   gets its own styles.css, and these pages must keep working
   unchanged when it is redesigned.

   The tokens and document typography are lifted verbatim from
   the BigCap stylesheet so every CTRL Colab product's legal
   pages read as one family. Accent hue is the only deliberate
   difference (see --accent below).
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --bg:          #0E1116; /* page background */
  --bg-deep:     #0B0E13; /* footer */
  --bg-alt:      #10141b; /* inset / mock chrome */
  --panel:       #161B24; /* cards / sections */
  --panel-2:     #1D2430; /* raised elements */
  --panel-3:     #141922; /* large feature cards */
  --line:        #283041; /* borders, dividers */
  --text:        #E6E9EF; /* primary text */
  --muted:       #8A93A6; /* secondary text — 6.13:1 on --bg */
  --muted-2:     #B8BFCE; /* brighter secondary text */
  --accent:      #C9822E; /* primary CTA / fills / borders — amber, not BigCap's blue */
  --accent-2:    #A66620; /* CTA gradient bottom / hover */
  --warn:        #F0B429; /* notices */
  --danger:      #FF5D5D; /* errors */
  --success:     #3DDC84; /* live/session indicators */

  /* Accent, lightened for *text* on dark surfaces. Measured against --bg:
     --accent itself is 6.05:1, so it already clears WCAG AA for body text —
     this brighter tint (9.07:1) is for emphasis and link hover, not a fix
     for a contrast failure. Fills and borders keep the pure accent. */
  --accent-link: #E5A857; /* 9.07:1 on --bg */
  --focus:       #F2CE96; /* 12.65:1 on --bg; reads against dark bg and amber fills */

  /* Accent tints (derived from --accent) */
  --accent-30:   rgba(201, 130, 46, 0.30);
  --accent-33:   rgba(201, 130, 46, 0.33); 
  --accent-35:   rgba(201, 130, 46, 0.35);
  --accent-40:   rgba(201, 130, 46, 0.40); 
  --accent-45:   rgba(201, 130, 46, 0.45);
  --accent-53:   rgba(201, 130, 46, 0.53); 

  /* Effects */
  --accent-gradient: linear-gradient(180deg, var(--accent), var(--accent-2));
  --shadow-btn-sm:   0 4px 16px  var(--accent-35);
  --shadow-btn:      0 8px 30px  var(--accent-45);
  --shadow-btn-xl:   0 0 40px    var(--accent-35);
  --shadow-card:     0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-float:    0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-mascot:   0 24px 48px rgba(0, 0, 0, 0.50);
  /* `closest-side` is deliberate: the ending shape lands on the nearest
     edge of the box, so the wash is guaranteed to have reached full
     transparency by every edge whatever the hero's size or aspect ratio.
     A `farthest-corner` gradient (the default) overshoots the near edge
     and gets sliced off there. */
  --hero-glow: radial-gradient(ellipse closest-side at 60% 40%, rgba(201, 130, 46, 0.18), transparent);
  /* Text halos for the privacy band (text over an image) */
  --halo:    0 2px 10px rgba(14, 17, 22, 0.95), 0 0 22px rgba(14, 17, 22, 0.90);
  --halo-lg: 0 2px 12px rgba(14, 17, 22, 0.95), 0 0 28px rgba(14, 17, 22, 0.90), 0 0 46px rgba(14, 17, 22, 0.80);

  /* Typography */
  --font-sans: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid type scale. Each ramp runs from its small-phone size at
     320px to the original desktop size at 1280px, then holds. */
  --fs-hero:      clamp(2.125rem,  1.625rem + 2.50vw, 3.625rem); /* 34 → 58 */
  --fs-download:  clamp(1.75rem,   1.417rem + 1.67vw, 2.75rem);  /* 28 → 44 */
  --fs-section:   clamp(1.625rem,  1.417rem + 1.04vw, 2.25rem);  /* 26 → 36 */
  --fs-privacy:   clamp(1.5rem,    1.292rem + 1.04vw, 2.125rem); /* 24 → 34 */
  --fs-formats:   clamp(1.5rem,    1.333rem + 0.83vw, 2rem);     /* 24 → 32 */
  --fs-card:      clamp(1.1875rem, 1.125rem + 0.31vw, 1.375rem); /* 19 → 22 */
  --fs-spotlight: clamp(1.3125rem, 1.25rem  + 0.31vw, 1.5rem);   /* 21 → 24 */
  --fs-hero-sub:  clamp(1rem,      0.938rem + 0.31vw, 1.1875rem);/* 16 → 19 */
  --fs-lead:      clamp(1rem,      0.950rem + 0.16vw, 1.0625rem);/* 16 → 17 */
  --fs-btn-xl:    clamp(1rem,      0.917rem + 0.42vw, 1.25rem);  /* 16 → 20 */

  /* Radii */
  --radius-sm:   7px;
  --radius:     10px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* Layout. The gutter is fluid (16px on a small phone → 40px from
     1280px up) and never smaller than a display cutout inset. */
  --container:      1200px;
  --container-wide: 1140px; /* docs layout */
  --container-mid:  1100px; /* privacy band */
  --container-text:  780px; /* long-form legal copy */
  --gutter: max(
    clamp(1rem, 0.5rem + 2.5vw, 2.5rem),
    env(safe-area-inset-left),
    env(safe-area-inset-right)
  );
  --nav-h: 4rem; /* header height — drawer offset + anchor scroll offset */

  /* Minimum comfortable touch target (WCAG 2.2 AA target size) */
  --tap: 44px;
}

/* ---------- Base / reset ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keeps text zoom and OS font-size scaling working. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Offset in-page anchor targets so they clear the sticky header */
:target,
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* The mascots are decorative art deliberately positioned to bleed
     past their sections. `clip` (not `hidden`) contains that bleed
     WITHOUT creating a scroll container — which would otherwise break
     `position: sticky` on the header. Every layout that could
     genuinely overflow has been fixed at source; this is only here
     for the intentional off-canvas artwork. */
  overflow-x: clip;
}

/* Scroll lock while the navigation drawer is open. The padding replaces
   the width the hidden scrollbar was occupying, so the page behind the
   drawer does not jump sideways. */
html.nav-open {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
}

::selection { background: var(--accent-33); }

.screen {
  min-height: 100vh;
  min-height: 100svh; /* small-viewport unit: no jump as browser chrome moves */
}

h1, h2, h3, p, ul { margin: 0; }

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* <picture> is a source-selection wrapper, not a box — this keeps every
   existing `.some__image` layout rule applying to the <img> itself. */
picture { display: contents; }

/* Visible, high-contrast focus ring everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}
/* `:focus`, not `:focus-visible` — a skip link is only ever reached by
   keyboard or assistive tech, and it must reveal itself the moment it
   takes focus. */
.skip-link:focus { transform: none; }

/* ---------- Legal / document pages (EULA, Trust & Privacy) ---------- */

/* The nav bar itself. Every document page (EULA, privacy, refund, terms, help,
   buy) marks its header up as `.site-nav`, and nothing defined it — so the bar
   had no layout and the brand link fell back to the browser's default link
   blue, on six pages, including the one where someone types their card
   details. The `.doc-nav__*` children below were styled; their container never
   was. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  max-width: var(--container-wide, 1040px);
  margin: 0 auto;
  padding: 18px 20px;
}
.site-nav a { text-decoration: none; }
/* Colour is set HERE and not on .doc-nav__brand alone, because the brand is an
   <a> wrapping two spans: without an explicit colour on the anchor the spans
   inherit the UA's link blue no matter what the spans themselves say. */
.doc-nav__brand,
.doc-nav__brand:visited { color: var(--text); }
.doc-nav__brand strong { font-weight: 600; }
.site-nav__by { color: var(--muted); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .doc-nav__brand:hover strong { color: var(--accent-link); }
}

.doc-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.doc-nav__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent-link);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .doc-nav__back:hover { text-decoration: underline; }
}
/* `width: auto` matters now that the markup carries width/height
   attributes: without it the intrinsic 677px width wins and the logo
   renders as a 300×75 slab instead of 96×24. */
.doc-nav__logo {
  height: 24px;
  width: auto;
  max-width: 300px;
  display: block;
}
.doc {
  max-width: var(--container-text);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block:
    clamp(2.5rem, 1.833rem + 3.33vw, 4.5rem)   /* 40 → 72 */
    clamp(3.5rem, 2.667rem + 4.17vw, 6rem);    /* 56 → 96 */
  font-size: 15px;
  line-height: 1.7;
}
/* line-height is set because the page default is body leading (1.7), which is
   invisible on a one-line title and reads as two separate headings the moment
   one wraps — 36px type with 61px of leading. */
.doc__title { margin: 0 0 8px; font-size: var(--fs-section); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.doc h2 { margin: 40px 0 12px; font-size: clamp(1.1875rem, 1.146rem + 0.21vw, 1.3125rem); font-weight: 700; }
.doc h3 { margin: 24px 0 10px; font-size: clamp(1rem, 0.979rem + 0.10vw, 1.0625rem); font-weight: 700; }
.doc p { margin: 0 0 16px; color: var(--muted-2); }
.doc p:last-child { margin-bottom: 0; }
.doc ul,
.doc ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--muted-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc a { color: var(--accent-link); text-decoration: none; }
.doc code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  /* Long paths like %APPDATA%\BigCap must not push the page wide. */
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .doc a:hover { text-decoration: underline; }
}

/* Dimmer, all-caps notices (e.g. the EULA "IMPORTANT" preamble) */
.doc p.doc__important { color: var(--muted); }

/* Document metadata band under the title */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 36px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--muted);
}
.doc-meta strong { color: var(--text); }

/* Quoted copy that must stay word-for-word identical to another surface —
   the privacy policy quotes the marketing page's trust line back at itself. */
.doc blockquote {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel);
  color: var(--text);
}

/* ---------- Legal drafts ----------
   Both of these are scaffolding for documents that have not been through
   counsel yet, and both are meant to be deleted at sign-off: the banner as
   a block, the [TK] spans as they are each resolved. They are styled to be
   impossible to miss for exactly that reason. */
.legal-draft {
  margin: 0 0 32px;
  padding: 16px 20px;
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(240, 180, 41, 0.08);
  font-size: 14px;
  color: var(--muted-2);
}
.legal-draft strong { color: var(--warn); }
.tk {
  border-radius: 4px;
  padding: 1px 6px;
  background: rgba(240, 180, 41, 0.14);
  color: var(--warn);
  font-size: 0.94em;
  overflow-wrap: anywhere;
}

/* Cross-links to the other three documents, above the fine print */
.doc__siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 20px;
  font-size: 14px;
}

/* Closing fine print */
.doc__rule { border: none; border-top: 1px solid var(--line); margin: 48px 0 24px; }
.doc p.doc__fine { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.doc p.doc__fine:last-child { margin-bottom: 0; }
.doc p.doc__fine--italic { font-style: italic; }

/* ---------- Documentation page ---------- */
.docs-layout {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block:
    clamp(2rem, 1.5rem + 2.5vw, 3.5rem)        /* 32 → 56 */
    clamp(3.5rem, 2.667rem + 4.17vw, 6rem);    /* 56 → 96 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* Table of contents.
   Below 80rem it is a collapsed disclosure so eleven links do not
   push the guide off screen; from 80rem it is the sticky sidebar.
   `open` is the markup default, so with JS disabled the desktop
   sidebar is still correct. */
.docs-toc__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.docs-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  list-style: none;
}
.docs-toc__summary::-webkit-details-marker { display: none; }
.docs-toc__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.docs-toc__panel[open] > .docs-toc__summary::after { transform: translateY(2px) rotate(-135deg); }
.docs-toc__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-toc__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) {
  .docs-toc__link:hover { color: var(--text); border-left-color: var(--accent); }
}

/* Content column reuses .doc typography; drop the .doc container framing */
.docs-content { max-width: none; margin: 0; padding: 0; }

/* Screenshot figures */
.docs-figure { margin: 24px 0; }
.docs-figure img {
  display: block;
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.docs-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Small "(default)" annotation next to a heading */
.doc-inline-note { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Callouts (tips / notices) */
.callout {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
}
.callout strong { color: var(--text); }
.callout--warn { border-left-color: var(--warn); }

/* Tables — scroll the table, never the page. The wrapper is
   focusable (see markup) so it can also be scrolled from a keyboard. */
.docs-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 20px 0;
  border-radius: var(--radius-sm);
}
.docs-table-wrap:focus-visible { outline-offset: 0; }
/* Shared with the legal documents, which table their third-party components. */
.docs-content table,
.doc table {
  width: 100%;
  min-width: 30rem; /* below this, columns crush — scroll instead */
  border-collapse: collapse;
  font-size: 14px;
}
.docs-content th,
.docs-content td,
.doc th,
.doc td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.docs-content thead th,
.doc thead th { background: var(--panel); color: var(--text); font-weight: 700; }
.docs-content tbody td,
.doc tbody td { color: var(--muted-2); }



/* ============================================================
   Breakpoints
   ============================================================ */

@media (min-width: 30rem) {
  .site-nav__by { display: block; }
}

/* Docs: a sticky sidebar instead of a disclosure, once there is room. */
@media (min-width: 80rem) {
  .docs-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }
  .docs-toc {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
  .docs-toc__panel { border: none; background: none; }
  .docs-toc__summary { padding: 0 0 14px; min-height: 0; }
  .docs-toc__summary::after { display: none; }
  .docs-toc__list {
    padding: 0;
    border-left: 1px solid var(--line);
  }
  .docs-toc__link {
    min-height: 0;
    margin-left: -1px;
    padding: 6px 0 6px 16px;
    border-radius: 0;
    font-size: 13px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* `!important` is warranted: this must beat every component transition
     without duplicating each of them here. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}