/*
 * Copyright (c) 2026 Circle Internet Services, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 * SPDX-License-Identifier: MIT
 */

/* A man-page-like reference: a sticky command nav on the left and a single
   readable content column. Palette mirrors the CLI's OAuth landing page
   (internal/oauth/page.html): navy by default, light via prefers-color-scheme. */

:root {
  --bg: #1a2035;
  --surface: #222b3e;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --fg: #e8edf7;
  --heading: #ffffff;
  --muted: #7b8db5;
  --accent: #6ea8fe;
  --accent-hover: #9cc4ff;
  /* Readable text on top of an --accent fill. The dark theme's accent is a light
     blue, so it needs dark text; the light theme (below) flips this to white. */
  --on-accent: #0b1020;
  --code-bg: rgba(255, 255, 255, 0.06);

  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sidebar-w: 17rem;
  --measure: 48rem;
  --content-w: 70rem;
  --nav-h: 3.25rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9;
    --surface: #f0f3fa;
    --border: rgba(0, 0, 0, 0.10);
    --border-strong: rgba(0, 0, 0, 0.16);
    --fg: #2b3757;
    --heading: #1a2035;
    --muted: #5a6b8a;
    --accent: #1a5fd0;
    --accent-hover: #0b47ab;
    --on-accent: #ffffff;
    --code-bg: rgba(26, 32, 53, 0.06);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---- Layout ----------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

/* ---- Sidebar / command nav -------------------------------------------- */

/* The mobile nav toggle, button and backdrop are hidden on wide screens;
   the mobile media query at the bottom reveals and wires them up. */
.nav-toggle, .nav-toggle-btn, .nav-backdrop { display: none; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* When the shared top navbar is present (reference page), the sticky sidebar
   parks just below it rather than sliding underneath. */
.has-site-nav .sidebar {
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
}

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block;
  padding: 0.22rem 0.5rem;
  border-radius: 5px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc a:hover { background: var(--code-bg); color: var(--heading); text-decoration: none; }

/* Four levels: top sections ("Getting started", "Reference"), then command
   groups (CI / Management / ...), then commands, then subcommands — each a
   little deeper and quieter than the last. Selectors are depth-exact (child
   combinators) so commands and subcommands don't collapse to one indent. */
.toc > ul > li > a {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--heading);
}
.toc > ul > li > ul > li > a {
  padding-left: 1.2rem;
  font-weight: 600;
}
.toc > ul > li > ul > li > ul > li > a {
  padding-left: 2.2rem;
  font-weight: 400;
}
.toc > ul > li > ul > li > ul > li > ul > li > a {
  padding-left: 3.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.toc > ul > li > ul > li > ul > li > ul > li > a:hover { color: var(--heading); }
.toc :target { color: var(--accent); }

/* ---- Content ---------------------------------------------------------- */

.content-col { min-width: 0; }

.content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 2rem 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mono);
  color: var(--heading);
  line-height: 1.25;
  scroll-margin-top: 1rem;
}
h1 { font-size: 1.7rem; margin: 4rem 0 1.25rem; }
h2 {
  font-size: 1.2rem;
  margin: 3.75rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-strong);
}
h3 { font-size: 1.02rem; margin: 1.9rem 0 0.4rem; }

/* No leading gap before the very first heading on the page. */
.content > :first-child { margin-top: 0; padding-top: 0; }
h4 { font-size: 0.95rem; margin: 1.5rem 0 0.35rem; color: var(--muted); }

p { margin: 0.5rem 0 1rem; }

code, kbd, pre { font-family: var(--mono); font-size: 0.86em; }
code {
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
h1 code, h2 code, h3 code, h4 code { background: none; padding: 0; }

/* Fenced code blocks. Always dark — palette taken from the CLI's OAuth page
   (internal/oauth/page.html) — with a rounded border that reads on either a
   light or dark page background. Fixed colors (not the themed vars) so the
   block stays dark in light mode. */
.highlight {
  --cb-bg: #1a2035;
  --cb-fg: #e8edf7;
  --cb-border: #3b4664;
  --cb-muted: #7b8db5;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
}
.highlight pre { margin: 0; background: none; }
.highlight code {
  background: none;
  padding: 0;
  color: var(--cb-fg);
  font-size: 0.82rem;
  line-height: 1.5;
}
/* Comments quietened to the palette's muted tone. */
.highlight .c, .highlight .c1, .highlight .cm { color: var(--cb-muted); font-style: italic; }

/* Flag tables. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
th {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
td:first-child { white-space: nowrap; font-family: var(--mono); }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--measure);
  margin: 2rem auto 0;
  padding: 1rem 2rem 2.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---- Narrow screens: off-canvas nav reachable wherever you scroll ----- */

@media (max-width: 52rem) {
  .layout { grid-template-columns: 1fr; }

  /* Keep content clear of the fixed toggle button at the top-left. */
  .content { padding-top: 1.5rem; }
  .content-col { padding-top: 3.5rem; }

  /* Fixed hamburger button: stays put on screen at any scroll position. */
  .nav-toggle-btn {
    display: flex;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 30;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  /* Hamburger icon: the middle bar plus two pseudo-element bars. Animates to
     an X when the nav is open. */
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    display: block;
    width: 1.25rem;
    height: 2px;
    background: var(--heading);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .nav-toggle-bars::before { position: absolute; top: -6px; left: 0; }
  .nav-toggle-bars::after  { position: absolute; top:  6px; left: 0; }

  /* Visually-hidden but focusable checkbox holds the open/closed state so the
     toggle works with no JavaScript and is operable from the keyboard. */
  .nav-toggle {
    display: block;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    opacity: 0;
    z-index: 31;
    cursor: pointer;
  }

  /* Off-canvas sidebar: slides in from the left over the content. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: min(20rem, 85vw);
    z-index: 25;
    padding-top: 4rem;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .toc { max-height: none; }

  /* Dimming backdrop behind the open panel; tapping it closes the nav. */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  /* Open state. */
  .nav-toggle:checked ~ .layout .sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* Visible focus ring on the (invisible) checkbox, drawn on the button. */
  .nav-toggle:focus-visible ~ .nav-toggle-btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

/* ===== Shared top navbar ================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 0 1.5rem;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--heading);
  font-weight: 700;
}
.site-brand:hover { text-decoration: none; }
.site-brand svg { width: 1.5rem; height: 1.5rem; fill: var(--heading); flex: none; }
.site-brand-name { font-family: var(--mono); font-size: 0.95rem; }

.site-nav-links { display: flex; align-items: center; gap: 1.4rem; }
.site-nav-links a { color: var(--fg); font-size: 0.9rem; font-weight: 500; }
.site-nav-links a:hover { color: var(--heading); text-decoration: none; }

/* ===== Landing page ===================================================== */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.5rem;
  align-items: center;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 3.75rem 1.5rem 3rem;
}
.hero-text h1 {
  font-size: 2.6rem;
  margin: 0 0 0.4rem;
}
.tagline {
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--heading);
  margin: 0 0 1rem;
}
.lede {
  font-size: 1.02rem;
  max-width: 34rem;
  margin: 0 0 1.7rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* The freeze-captured SVG already carries its own window border, rounded
   corners, drop shadow, and surrounding margin — so no extra framing here. */
.hero-art img {
  width: 100%;
  height: auto;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--heading);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
}
.btn:hover { text-decoration: none; border-color: var(--accent); color: var(--heading); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

/* ---- Install section --------------------------------------------------- */

.install {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.install-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;
}
/* Override the man-page <h2> rule (top border + large margins) in this context. */
.install-inner h2 {
  margin: 0 0 0.4rem;
  padding-top: 0;
  border-top: none;
}
.install-lede { color: var(--muted); margin-top: 0; }
.install-more { color: var(--muted); font-size: 0.92rem; margin-top: 1.75rem; }

/* Pure-CSS OS tabs: hidden radios drive which panel shows. */
.os-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.os-tablist {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-strong);
  margin: 1.5rem 0 1.5rem;
}
.os-tablist label {
  padding: 0.55rem 1rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--muted);
}
.os-tablist label:hover { color: var(--heading); }

.os-panel { display: none; }
.os-panel h3 { margin-top: 1.4rem; }
.os-panel h3:first-child { margin-top: 0; }

#os-mac:checked ~ .os-tablist label[for="os-mac"],
#os-win:checked ~ .os-tablist label[for="os-win"],
#os-linux:checked ~ .os-tablist label[for="os-linux"] {
  color: var(--heading);
  border-bottom-color: var(--accent);
}
#os-mac:checked ~ .os-panels .os-panel--mac,
#os-win:checked ~ .os-panels .os-panel--win,
#os-linux:checked ~ .os-panels .os-panel--linux { display: block; }

/* Keyboard focus ring drawn on the active tab's label. */
#os-mac:focus-visible ~ .os-tablist label[for="os-mac"],
#os-win:focus-visible ~ .os-tablist label[for="os-win"],
#os-linux:focus-visible ~ .os-tablist label[for="os-linux"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Landing footer (mirrors circleci.com) ---------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
}
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--fg);
}
.site-footer-legal a { color: var(--fg); }
.site-footer-legal a:hover { color: var(--heading); text-decoration: none; }

.site-footer-social { display: flex; align-items: center; gap: 1.1rem; }
.site-footer-social a { display: inline-flex; color: var(--fg); }
.site-footer-social a:hover { color: var(--heading); }
.site-footer-social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ===== Narrow screens: landing + navbar ================================= */

@media (max-width: 52rem) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: 2.25rem;
  }
  .hero-text h1 { font-size: 2rem; }
  .tagline { font-size: 1.15rem; }
  .hero-art { order: -1; }

  .site-nav-inner { padding: 0 1rem; }
  .site-nav-links { gap: 0.9rem; }
  .site-nav-links a { font-size: 0.85rem; }

  /* On the reference page the command-nav hamburger sits below the navbar so
     the two never overlap. (The landing page has no hamburger.) */
  .has-site-nav .nav-toggle-btn,
  .has-site-nav .nav-toggle { top: calc(var(--nav-h) + 0.6rem); }
}

/* Very narrow: drop the wordmark so the nav links always fit beside the logo. */
@media (max-width: 26rem) {
  .site-brand-name { display: none; }
}