/* ═══════════════════════════════════════════════════════════════════════
   IG1 Docs — design system (phase 24)
   The ig1.com visual language, dependency-free: same token set as the
   portal's dark theme (UI/chart/assets/console.css :root[data-theme="dark"]),
   no webfonts (system stack — Lato-like humanist sans), no runtime CDN.
   ═══════════════════════════════════════════════════════════════════════ */

/* The token layer lives in pkg/ui (ig1-ui.css, loaded before this file).
   This surface declares NO tokens of its own — everything it uses is
   owned by the package, which is what lets the console and the hub share
   one palette. tests/test_pkg_ui.py fails if a token reappears here. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.mono { font-family: var(--mono); }

/* ── Topbar ─────────────────────────────────────────────────────────── */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }

/* The « IG1 Cloud » lockup. BOTH variants now — the hub gained a theme toggle
   on 2026-08-20, so the earlier note here (white hard-coded, because this
   surface had one theme) no longer holds. theme.js swaps the [data-ui-logo]
   img between logo-cloud-black.svg (light) and logo-cloud-white.svg (dark),
   which is the same rule the console follows: the DARK lockup on a light
   ground, the LIGHT lockup on a dark one.
   Sizing is duplicated as a height="34" attribute in the HTML on purpose —
   this file is immutable-cached and the HTML is not, so the markup must not
   depend on this rule having arrived. */
.brand-logo { display: block; height: 34px; width: auto; }

.brand-sub  { color: var(--ink-mute); font-weight: 400; }

.topbar-spacer { flex: 1; }

/* Theme toggle. theme.js paints the icon and wires the click; this only
   dresses it to match .topbar-link beside it. */
.topbar-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.topbar-theme:hover {
  color: var(--ink-strong);
  border-color: var(--line);
  background: var(--accent-a6);
}
.topbar-theme svg { width: 17px; height: 17px; }

.topbar-link {
  color: var(--ink-mute);
  font-size: 0.85rem;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.topbar-link:hover {
  color: var(--ink-strong);
  border-color: var(--line);
  background: var(--lime-a6);
  text-decoration: none;
}

/* ── Landing layout ─────────────────────────────────────────────────── */

.docs-main { max-width: 1080px; margin: 0 auto; padding: 56px 24px 40px; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-400);
  background: var(--lime-a10);
  border: 1px solid var(--lime-a28);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

h1 {
  margin: 0 0 12px;
  color: var(--ink-strong);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lede { max-width: 62ch; margin: 0 0 10px; color: var(--ink-mute); font-size: 1rem; }
.lede strong { color: var(--ink); font-weight: 600; }

.spec-note {
  max-width: 78ch;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime-400);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 0.83rem;
}
.spec-note code { font-family: var(--mono); color: var(--lime-400); font-size: 0.8rem; }
.spec-note a { font-family: var(--mono); font-size: 0.8rem; }

/* ── Service cards ──────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  border-color: var(--lime-a40);
  box-shadow: var(--shadow-pop);
}

.card .accent-line {
  width: 48px;
  height: 4px;
  background: var(--lime-400);
  border-radius: 2px;
}

.card-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--lime-400);
  background: var(--lime-a10);
  border: 1px solid var(--lime-a28);
  border-radius: 6px;
  padding: 2px 8px;
}

.card h2 {
  margin: 2px 0 0;
  color: var(--ink-strong);
  font-size: 1.12rem;
  font-weight: 700;
}

.card p { margin: 0; color: var(--ink-mute); font-size: 0.86rem; flex: 1; }

.card-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.card-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--lime-400);
  color: var(--accent-on);
  font-weight: 700;
  font-size: 0.83rem;
  border: 1px solid var(--lime-400);
}
.btn-primary:hover {
  background: var(--lime-500);
  border-color: var(--lime-500);
  text-decoration: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.83rem;
}
.btn-ghost:hover {
  border-color: var(--lime-400);
  background: var(--lime-a6);
  text-decoration: none;
}

/* Unlinked card (no OpenAPI surface — e.g. the MCP tool service) */
.card.card-disabled { opacity: 0.62; }
.card.card-disabled:hover { border-color: var(--line); box-shadow: none; }
.card-disabled .card-tag {
  color: var(--ink-mute);
  background: transparent;
  border-color: var(--line);
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.docs-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.78rem;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.docs-footer a { color: var(--ink-mute); }
.docs-footer a:hover { color: var(--lime-400); }

/* ── Guide pages (phase 35 — the developer hub) ─────────────────────── */

/* Compose with .docs-main: <main class="docs-main guide-main"> */
.guide-main { max-width: 880px; }

.guide-main h2 {
  margin: 36px 0 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-strong);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.guide-main h2:first-of-type { margin-top: 26px; padding-top: 0; border-top: 0; }

.guide-main h3 {
  margin: 24px 0 8px;
  color: var(--ink-strong);
  font-size: 1.0rem;
  font-weight: 700;
}

.guide-main p, .guide-main li { color: var(--ink-mute); font-size: 0.92rem; }
.guide-main p { margin: 10px 0; max-width: 76ch; }
.guide-main p strong, .guide-main li strong { color: var(--ink); font-weight: 600; }
.guide-main ul, .guide-main ol { margin: 8px 0; padding-left: 22px; }
.guide-main li { margin: 4px 0; }
.guide-main li::marker { color: var(--lime-600); }

/* Inline code in prose; pre blocks are the example surface. */
.guide-main code {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--lime-400);
  background: var(--lime-a6);
  border: 1px solid var(--lime-a16);
  border-radius: 5px;
  padding: 1px 5px;
}

.guide-main pre {
  margin: 12px 0;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime-600);
  border-radius: 8px;
  overflow-x: auto;
}
.guide-main pre code {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.62;
  white-space: pre;
}

/* Reference tables (command groups, tiers, exit codes, the MCP catalog). */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.85rem;
}
.docs-table th {
  text-align: left;
  color: var(--ink-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.docs-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mute);
  vertical-align: top;
}
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table td:first-child { white-space: nowrap; }

/* Callouts — .callout is neutral, .warn amber, .danger red. */
.callout {
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime-400);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 0.85rem;
  max-width: 78ch;
}
.callout strong { color: var(--ink); font-weight: 600; }
.callout code { font-size: 0.8em; }
.callout.warn { border-left-color: var(--warn); }
.callout.danger { border-left-color: var(--err); }
.callout p { margin: 4px 0; }

/* Tier chips (the phase-26 blast-radius model: 0 read / 1 operate / 2 destructive). */
.tier {
  display: inline-block;
  min-width: 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  border-radius: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  color: var(--ink-mute);
}
.tier.t0 { color: var(--ok);   border-color: var(--ok-bd);   background: var(--ok-bg); }
.tier.t1 { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.tier.t2 { color: var(--err);  border-color: var(--err-bd);  background: var(--err-bg); }

/* Equal example columns (the quickstart's three first-class surfaces). */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.cols-3 .col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.cols-3 .col h3 { margin: 0 0 4px; font-size: 0.95rem; }
.cols-3 .col .col-sub { margin: 0 0 6px; font-size: 0.78rem; color: var(--ink-faint); }
.cols-3 .col pre { margin: 8px 0 0; }
.cols-3 .col pre code { font-size: 0.72rem; }

/* Prev/next navigation between guides. */
.guide-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.guide-nav a { color: var(--ink-mute); }
.guide-nav a:hover { color: var(--lime-400); }

/* Section sub-heads on the hub landing (Guides / Live API references). */
.section-head { margin: 46px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin: 0; color: var(--ink-strong); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.section-head .sub { color: var(--ink-faint); font-size: 0.8rem; }

/* The four-surfaces positioning strip on the landing. */
.surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}
.surfaces .surface-chip {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--lime-400);
  background: var(--lime-a6);
  border: 1px solid var(--lime-a16);
  border-radius: 8px;
  padding: 6px 12px;
}
.surfaces .surface-eq { color: var(--ink-faint); align-self: center; font-family: var(--mono); }

/* ── Redoc pages ────────────────────────────────────────────────────── */

body.redoc-page { background: var(--bg); }
body.redoc-page .docs-topbar { position: sticky; }
.redoc-title { color: var(--ink-strong); font-weight: 700; font-size: 0.95rem; }
.redoc-title .crumb { color: var(--ink-faint); font-weight: 400; }
redoc, #redoc { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   Narrow screens
   ───────────────────────────────────────────────────────────────────────
   THIS FILE HAD NO MEDIA QUERY AT ALL until 2026-08-21. The hub was built
   desktop-only, and on a 375 px phone NINE of the eleven guide pages
   scrolled sideways: mcp.html laid out 844 px of content in a 375 px
   viewport, migrating-from-aws.html 617 px, networking.html 854 px. A page
   that scrolls horizontally is not "a bit tight" — every vertical swipe
   drifts the text off-screen, and the reader spends the session dragging
   it back.

   Three causes, three fixes, in the order they contribute:

   1. REFERENCE TABLES. A command table (name, flags, description) is wide
      by nature and must not be narrowed — a wrapped flag column is worse
      than a scroll. It scrolls INSIDE its own container instead of taking
      the page with it. The container is a wrapper <div class="table-scroll">
      in the markup rather than `display:block` on the <table>: changing a
      table's display drops its semantics for some screen readers, and this
      is a reference surface where the row/column relationship IS the
      content. Same shape the console already uses for .data-table.

   2. LONG MONOSPACE TOKENS. Tool names, ARNs, kubeconfig paths and
      s3:// URLs have no space to break at, so one token sets the page's
      minimum width. They may break anywhere — a wrapped identifier is
      still readable; a page you must drag is not.

   3. THE TOPBAR. Fixed 24 px padding plus every link plus the theme
      toggle exceeded 375 px on its own.
   ═══════════════════════════════════════════════════════════════════════ */

/* Applies at every width: the wrapper is inert until the table is wider
   than the column, which can happen on a laptop too. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0;
}
.table-scroll > .docs-table { margin: 0; }

/* Chrome, Firefox and Safari now make an overflowing scroll container
   keyboard-focusable on their own, so the part past the edge is reachable
   without a pointer. No tabindex is added here: it would be redundant where
   that behaviour exists and would add 32 tab stops to mcp.html where it does
   not. The outline is defined so that focus, when it lands, is visible. */
.table-scroll:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .docs-topbar { height: auto; min-height: 56px; padding: 8px 14px; flex-wrap: wrap; row-gap: 6px; }
  .topbar-spacer { flex-basis: 100%; height: 0; }
  .docs-main { padding: 32px 16px 32px; }
  .docs-footer { padding: 22px 16px 32px; }
}

@media (max-width: 560px) {
  /* An identifier that cannot break sets the page's minimum width. Breaking
     it anywhere keeps the page inside the viewport; `break-word` alone is
     not enough, because it will not break inside a run with no break
     opportunity at all. */
  .guide-main code,
  .guide-main .mono,
  .docs-table .mono,
  .docs-table code { overflow-wrap: anywhere; word-break: break-word; }

  .docs-topbar { gap: 10px; }
  .topbar-link { font-size: 0.8rem; }
  .brand-logo { height: 28px; }
  .docs-main { padding: 26px 14px 28px; }
}