/* AIS Trail: styles for the subpages (docs, legal, ...). One commented block per area. */

/* ===== docs: /docs/* pages (owner: docs area) =====
   The docs layout of the content spec, section 4 (prod/spec_work/doc.css), scoped to main.at-docs so it cannot change any
   other page that loads this file. Built by prod/docs/build.py; scoping by prod/docs/scope_css.py. No max-width on text. */
.at-docs { --at-bg: #000; --at-card: #0f0f0f; --at-line: #1a1a1a; --at-text-2: rgba(255,255,255,.8); --at-text-3: rgba(255,255,255,.62);
  --at-acc: rgb(43,255,234); --at-acc-rgb: 43,255,234; --at-nav-h: 72px;
  --at-ink: #fff; --at-hover: rgba(255,255,255,.04); --at-code-bg: rgba(255,255,255,.06); --at-code-ink: rgba(255,255,255,.9); --at-th: var(--at-card);
  --at-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --at-sans: Inter, "Inter Placeholder", system-ui, sans-serif;
  --at-serif: "Bespoke Serif", "Bespoke Serif Placeholder", Georgia, serif; }
.at-docs .at-nav-trigger { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.at-page.at-docs { position: relative; display: block; flex: none; width: 100%; background: var(--at-bg); padding: calc(var(--at-nav-h) + 56px) 0 96px; }
.at-docs .at-doc { width: min(1136px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
.at-docs .at-doc-nav { position: sticky; top: calc(var(--at-nav-h) + 24px); max-height: calc(100vh - var(--at-nav-h) - 48px); overflow-y: auto; scrollbar-width: thin; font: 500 14px/1.3 var(--at-sans); }
.at-docs .at-doc-nav-h { margin: 0 0 8px; font: 600 12px/1.2 var(--at-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--at-text-3); }
.at-docs .at-doc-nav ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 2px; }
.at-docs .at-doc-nav a { display: block; padding: 6px 12px; border-radius: 10px; color: var(--at-text-2); text-decoration: none; }
.at-docs .at-doc-nav a:hover { color: var(--at-ink); background: var(--at-hover); }
.at-docs .at-doc-nav a[aria-current="page"] { color: var(--at-acc); background: rgba(var(--at-acc-rgb), .06); }
.at-docs .at-doc-nav .at-doc-toc { margin: 4px 0 8px 12px; padding-left: 12px; border-left: 1px solid var(--at-line); }
.at-docs .at-doc-toc a { padding: 4px 8px; font-size: 13px; color: var(--at-text-3); }
.at-docs .doc { min-width: 0; font: 500 16px/1.6 var(--at-sans); color: var(--at-text-2); }
.at-docs .doc .eyebrow { margin: 0 0 12px; font: 500 14px/1.2 var(--at-sans); color: var(--at-acc); }
.at-docs .doc h1 { margin: 0 0 16px; font: 500 48px/1.15 var(--at-serif); letter-spacing: -.96px; color: var(--at-ink); }
.at-docs .doc .lead { margin: 0 0 32px; font: 500 18px/1.55 var(--at-sans); }
.at-docs .doc h2 { margin: 56px 0 16px; font: 500 30px/1.2 var(--at-serif); letter-spacing: -.6px; color: var(--at-ink); }
.at-docs .doc h3 { margin: 32px 0 12px; font: 600 18px/1.35 var(--at-sans); color: var(--at-ink); }
.at-docs .doc h1, .at-docs .doc h2, .at-docs .doc h3, .at-docs .doc section[id] { scroll-margin-top: calc(var(--at-nav-h) + 24px); }
.at-docs .doc p { margin: 0 0 16px; }
.at-docs .doc ul { margin: 0 0 16px; padding-left: 20px; }
.at-docs .doc li { margin: 0 0 8px; }
.at-docs .doc li::marker { color: var(--at-acc); }
.at-docs .doc strong { color: var(--at-ink); font-weight: 600; }
.at-docs .doc a { color: var(--at-ink); text-decoration: underline; text-decoration-color: rgba(var(--at-acc-rgb), .6); text-underline-offset: 3px; }
.at-docs .doc a:hover { color: var(--at-acc); }
.at-docs .doc a:focus-visible, .at-docs .at-doc-nav a:focus-visible { outline: 2px solid var(--at-acc); outline-offset: 2px; border-radius: 6px; }
.at-docs .doc code { font: 500 .875em/1.4 var(--at-mono); color: var(--at-ink); background: var(--at-code-bg); border: 1px solid var(--at-line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.at-docs .doc pre.code { margin: 0 0 20px; padding: 20px 24px; background: var(--at-card); border: 1px solid var(--at-line); border-radius: 16px; overflow-x: auto; }
.at-docs .doc pre.code code { display: block; padding: 0; border: 0; background: none; font: 400 13.5px/1.65 var(--at-mono); color: var(--at-code-ink); white-space: pre; overflow-wrap: normal; }
.at-docs .doc mark { background: rgba(var(--at-acc-rgb), .16); color: var(--at-acc); border-radius: 4px; padding: 0 2px; }
.at-docs .doc mark.dup { background: none; color: var(--at-text-3); text-decoration: line-through; }
.at-docs .doc .note, .at-docs .doc blockquote { margin: 0 0 20px; padding: 12px 16px; border-left: 2px solid var(--at-acc); border-radius: 0 12px 12px 0; }
.at-docs .doc .note { background: rgba(var(--at-acc-rgb), .05); }
.at-docs .doc blockquote { background: var(--at-card); color: var(--at-ink); }
.at-docs .doc .muted { font-size: 14px; color: var(--at-text-3); }
.at-docs .doc .table-scroll { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--at-line); border-radius: 16px; }
.at-docs .doc table { width: 100%; border-collapse: collapse; font: 500 14px/1.45 var(--at-sans); }
.at-docs .doc th, .at-docs .doc td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--at-line); }
.at-docs .doc thead th { background: var(--at-th); font-weight: 600; color: var(--at-ink); white-space: nowrap; }
.at-docs .doc tbody th { color: var(--at-ink); font-weight: 600; }
.at-docs .doc tr:last-child > td, .at-docs .doc tr:last-child > th { border-bottom: 0; }
.at-docs .doc .endpoint { margin: 0 0 40px; padding-top: 8px; border-top: 1px solid var(--at-line); }
.at-docs .doc .endpoint h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 15px/1.4 var(--at-mono); }
.at-docs .doc .endpoint h3 code { padding: 0; border: 0; background: none; font-size: 15px; }
.at-docs .doc .verb, .at-docs .doc .err h3 .code { flex: none; font: 600 11px/1 var(--at-mono); padding: 5px 8px; border-radius: 6px; background: rgba(var(--at-acc-rgb), .16); color: var(--at-acc); }
.at-docs .doc .summary { color: var(--at-ink); font-weight: 600; }
.at-docs .doc .statuses { font-size: 14px; color: var(--at-text-3); }
.at-docs .doc .err { padding: 4px 0 8px; border-top: 1px solid var(--at-line); }
.at-docs .doc .err h3 { display: flex; align-items: center; gap: 10px; font: 600 17px/1.35 var(--at-sans); }
.at-docs .doc .source { margin: 0 0 32px; }
@media (max-width: 1199.98px) {
  .at-docs .at-doc { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 809.98px) {
  .at-docs { --at-nav-h: 64px; }
  .at-page.at-docs { padding-top: calc(var(--at-nav-h) + 32px); }
  .at-docs .at-doc { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .at-docs .at-doc-nav { position: static; max-height: none; overflow-y: visible; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .at-docs .at-doc-nav-h, .at-docs .at-doc-nav .at-doc-toc { display: none; }
  .at-docs .at-doc-nav ul { display: flex; gap: 8px; margin: 0; }
  .at-docs .at-doc-nav a { white-space: nowrap; border: 1px solid var(--at-line); }
  .at-docs .doc h1 { font-size: 36px; letter-spacing: -.72px; }
  .at-docs .doc h2 { font-size: 24px; margin-top: 44px; }
  .at-docs .doc pre.code { padding: 16px; border-radius: 14px; }
  .at-docs .doc pre.code code { font-size: 12.5px; }
}

/* docs: previous / next page and the "Suggest an edit" line at the end of every docs page */
.at-docs .doc .at-doc-foot { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--at-line); }
.at-docs .doc .at-doc-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.at-docs .doc .at-doc-pn a { display: block; padding: 18px 22px; border: 1px solid var(--at-line); border-radius: 16px; background: var(--at-card); color: var(--at-ink); text-decoration: none; font: 500 20px/1.25 var(--at-serif); letter-spacing: -.2px; transition: border-color .2s ease, color .2s ease; }
.at-docs .doc .at-doc-pn a span { display: block; margin: 0 0 6px; font: 500 13px/1.2 var(--at-sans); letter-spacing: 0; color: var(--at-text-3); }
.at-docs .doc .at-doc-pn a:hover { border-color: rgba(var(--at-acc-rgb), .45); color: var(--at-acc); }
.at-docs .doc .at-doc-pn .at-pn-next { grid-column: 2; text-align: right; }
.at-docs .doc .at-doc-fb { margin: 0; font-size: 14px; color: var(--at-text-3); }
/* docs: the plan table's cells are short values; keep each on one line (the table scrolls inside its frame when narrow) */
.at-docs .doc table.limits th, .at-docs .doc table.limits td { white-space: nowrap; }
@media (max-width: 809.98px) {
  .at-docs .doc .at-doc-pn { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .at-docs .doc .at-doc-pn .at-pn-next { grid-column: auto; }
  .at-docs .doc .at-doc-pn a { padding: 14px 16px; font-size: 17px; }
}
/* ===== end docs ===== */

/* ===== legal: /legal/terms/ and /legal/privacy/ =====
   The docs/legal layout of the content spec (section 4), scoped to main.at-legal so it cannot change any other page.
   Tokens --at-acc and --at-acc-rgb come from site.css. No max-width on text: .at-doc sets the measure. */
.at-legal { --at-bg: #000; --at-card: #0f0f0f; --at-line: #1a1a1a; --at-text-2: rgba(255, 255, 255, .8); --at-text-3: rgba(255, 255, 255, .62); --at-nav-h: 72px;
  --at-ink: #fff; --at-hover: rgba(255, 255, 255, .04); --at-code-bg: rgba(255, 255, 255, .06); --at-th: var(--at-card);
  --at-sans: Inter, "Inter Placeholder", system-ui, sans-serif; --at-serif: "Bespoke Serif", "Bespoke Serif Placeholder", Georgia, serif; }
.at-legal .at-nav-trigger { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.at-page.at-legal { position: relative; display: block; flex: none; width: 100%; background: var(--at-bg); padding: calc(var(--at-nav-h) + 56px) 0 96px; }
.at-legal .at-doc { width: min(1136px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }

/* side nav: docs + legal, sticky; the current page lists its sections */
.at-legal .at-doc-nav { position: sticky; top: calc(var(--at-nav-h) + 24px); max-height: calc(100vh - var(--at-nav-h) - 48px); overflow-y: auto; scrollbar-width: thin; font: 500 14px/1.3 var(--at-sans); }
.at-legal .at-doc-nav-h { margin: 0 0 8px; font: 600 12px/1.2 var(--at-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--at-text-3); }
.at-legal .at-doc-nav ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 2px; }
.at-legal .at-doc-nav a { display: block; padding: 6px 12px; border-radius: 10px; color: var(--at-text-2); text-decoration: none; }
.at-legal .at-doc-nav a:hover { color: var(--at-ink); background: var(--at-hover); }
.at-legal .at-doc-nav a[aria-current="page"] { color: var(--at-acc); background: rgba(var(--at-acc-rgb), .06); }
.at-legal .at-doc-nav .at-doc-toc { margin: 4px 0 8px 12px; padding-left: 12px; border-left: 1px solid var(--at-line); }
.at-legal .at-doc-toc a { padding: 4px 8px; font-size: 13px; color: var(--at-text-3); }

/* article */
.at-legal .doc { min-width: 0; font: 500 16px/1.6 var(--at-sans); color: var(--at-text-2); }
.at-legal .doc .eyebrow { margin: 0 0 12px; font: 500 14px/1.2 var(--at-sans); color: var(--at-acc); }
.at-legal .doc h1 { margin: 0 0 16px; font: 500 48px/1.15 var(--at-serif); letter-spacing: -.96px; color: var(--at-ink); }
.at-legal .doc h2 { margin: 56px 0 16px; font: 500 30px/1.2 var(--at-serif); letter-spacing: -.6px; color: var(--at-ink); }
.at-legal .doc h1, .at-legal .doc h2 { scroll-margin-top: calc(var(--at-nav-h) + 24px); }
.at-legal .doc p { margin: 0 0 16px; }
.at-legal .doc ul { margin: 0 0 16px; padding-left: 20px; }
.at-legal .doc li { margin: 0 0 8px; }
.at-legal .doc li::marker { color: var(--at-acc); }
.at-legal .doc strong { color: var(--at-ink); font-weight: 600; }
.at-legal .doc a { color: var(--at-ink); text-decoration: underline; text-decoration-color: rgba(var(--at-acc-rgb), .6); text-underline-offset: 3px; }
.at-legal .doc a:hover { color: var(--at-acc); }
.at-legal .doc a:focus-visible, .at-legal .at-doc-nav a:focus-visible { outline: 2px solid var(--at-acc); outline-offset: 2px; border-radius: 6px; }
.at-legal .doc .muted { font-size: 14px; color: var(--at-text-3); }

@media (max-width: 1199.98px) { .at-legal .at-doc { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; } }
@media (max-width: 809.98px) {
  .at-legal { --at-nav-h: 64px; }
  .at-page.at-legal { padding-top: calc(var(--at-nav-h) + 32px); }
  .at-legal .at-doc { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .at-legal .at-doc-nav { position: static; max-height: none; overflow-y: visible; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .at-legal .at-doc-nav-h, .at-legal .at-doc-nav .at-doc-toc { display: none; }
  .at-legal .at-doc-nav ul { display: flex; gap: 8px; margin: 0; }
  .at-legal .at-doc-nav ul:last-of-type { order: -1; }   /* legal pills first, so the current page is visible without scrolling the row */
  .at-legal .at-doc-nav a { white-space: nowrap; border: 1px solid var(--at-line); }
  .at-legal .doc h1 { font-size: 36px; letter-spacing: -.72px; }
  .at-legal .doc h2 { font-size: 24px; margin-top: 44px; }
}
/* ===== end legal ===== */

/* ===== legal drafts: placeholders, draft notice, h3, code and tables on /legal/* (owner area, 2026-10-09) =====
   .at-ph marks a value only the owner can supply or a point for legal review, e.g. [Company legal name]; find them all by
   searching the page source for class="at-ph". .at-draft is the "Draft pending legal review" notice.
   Remove both from the pages when the texts are final; this block can stay. No max-width on text. */
.at-legal .doc .at-draft { margin: 0 0 28px; padding: 12px 16px; border: 1px dashed rgba(var(--at-acc-rgb), .5); border-radius: 12px; background: rgba(var(--at-acc-rgb), .05); font-size: 14px; line-height: 1.5; color: var(--at-text-2); }
.at-legal .doc .at-draft strong { color: var(--at-acc); }
.at-legal .doc .at-ph { color: var(--at-ink); background: rgba(var(--at-acc-rgb), .08); border-radius: 4px; padding: 0 2px; text-decoration: underline dashed rgba(var(--at-acc-rgb), .85); text-decoration-thickness: 1px; text-underline-offset: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.at-legal .doc h3 { margin: 28px 0 8px; font: 600 18px/1.35 var(--at-sans); color: var(--at-ink); }
.at-legal .doc h2 + h3 { margin-top: 0; }
.at-legal .doc code { font: 500 .875em/1.4 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--at-ink); background: var(--at-code-bg); border: 1px solid var(--at-line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.at-legal .doc a code { background: none; border: 0; padding: 0; }
.at-legal .doc .table-scroll { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--at-line); border-radius: 16px; }
.at-legal .doc table { width: 100%; border-collapse: collapse; font: 500 14px/1.5 var(--at-sans); }
.at-legal .doc th, .at-legal .doc td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--at-line); }
.at-legal .doc thead th { background: var(--at-th); font-weight: 600; color: var(--at-ink); white-space: nowrap; }
.at-legal .doc tbody tr:last-child > td { border-bottom: 0; }
@media (max-width: 809.98px) {
  .at-legal .doc h3 { font-size: 17px; }
  /* tables become one card per row; each cell shows its column name from data-label */
  .at-legal .doc .at-stack { overflow: visible; border: 0; border-radius: 0; }
  .at-legal .doc .at-stack table, .at-legal .doc .at-stack tbody, .at-legal .doc .at-stack tr, .at-legal .doc .at-stack td { display: block; width: 100%; }
  .at-legal .doc .at-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .at-legal .doc .at-stack tr { margin: 0 0 12px; padding: 8px 0; border: 1px solid var(--at-line); border-radius: 14px; background: var(--at-card); }
  .at-legal .doc .at-stack td { padding: 6px 16px; border: 0; }
  .at-legal .doc .at-stack td::before { content: attr(data-label); display: block; margin: 0 0 2px; font: 600 11px/1.3 var(--at-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--at-text-3); }
}
/* ===== end legal drafts ===== */

/* ===== release review (2026-10-09): inline code in table cells, stacked coverage table on /docs/sources/ =====
   Inline code in a table cell stays on one line, so identifiers such as resolution or /v1/vessels/search never break
   mid-word; a table wider than its frame scrolls inside .table-scroll instead. The stacked .at-stack tables only hold
   short codes. On phones, a docs table marked .at-stack becomes one card per row, as on /legal/*. */
.at-docs .doc td code, .at-docs .doc th code, .at-legal .doc td code, .at-legal .doc th code { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 809.98px) {
  .at-docs .doc .at-stack { overflow: visible; border: 0; border-radius: 0; }
  .at-docs .doc .at-stack table, .at-docs .doc .at-stack tbody, .at-docs .doc .at-stack tr, .at-docs .doc .at-stack td { display: block; width: 100%; }
  .at-docs .doc .at-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .at-docs .doc .at-stack tr { margin: 0 0 12px; padding: 8px 0; border: 1px solid var(--at-line); border-radius: 14px; background: var(--at-card); }
  .at-docs .doc .at-stack td { padding: 6px 16px; border: 0; }
  .at-docs .doc .at-stack td::before { content: attr(data-label); display: block; margin: 0 0 2px; font: 600 11px/1.3 var(--at-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--at-text-3); }
}
/* ===== end release review ===== */

/* ===== light theme (2026-10-10): docs and legal pages =====
   assets/theme.js puts data-theme="light" on <html> (from the shared "ais_theme" cookie) before the first paint; then only the
   tokens above change, the layout stays the same. Same family as the live map's and the dashboard's light theme: page #F4F6F6,
   cards, tables and code blocks white with #E3E7E8 hairlines, text #0A0A0A / #333A3D / #5F686C, accent #08766D. Small text is
   >= 4.5:1 on the page and on cards. The dark theme (the default) is unchanged. */
html[data-theme="light"] .at-docs, html[data-theme="light"] .at-legal {
  --at-bg: #F4F6F6; --at-card: #FFFFFF; --at-line: #E3E7E8; --at-text-2: #333A3D; --at-text-3: #5F686C;
  --at-acc: #08766D; --at-acc-rgb: 8, 118, 109;
  --at-ink: #0A0A0A; --at-hover: #E9EEEE; --at-code-bg: #EAEEEF; --at-code-ink: #0A0A0A; --at-th: #F7F9F9; }
/* current page in the side nav, highlights and badges: a darker accent on a pale teal fill (AA) */
html[data-theme="light"] .at-docs .at-doc-nav a[aria-current="page"], html[data-theme="light"] .at-legal .at-doc-nav a[aria-current="page"] { background: #E2F5F3; color: #06655D; }
html[data-theme="light"] .at-docs .doc mark { background: #E2F5F3; color: #06655D; }
html[data-theme="light"] .at-docs .doc .verb, html[data-theme="light"] .at-docs .doc .err h3 .code { background: #E2F5F3; color: #06655D; }
html[data-theme="light"] .at-docs .doc .note { background: #EEF8F7; }
html[data-theme="light"] .at-legal .doc .at-draft { background: #EEF8F7; }
html[data-theme="light"] .at-legal .doc .at-draft strong { color: #06655D; }
html[data-theme="light"] .at-legal .doc .at-ph { background: #E2F5F3; }
/* tables are white cards on the light page (in dark the page shows through, as before); phone cards (.at-stack) keep their rows */
html[data-theme="light"] .at-docs .doc .table-scroll, html[data-theme="light"] .at-legal .doc .table-scroll { background: var(--at-card); }
@media (max-width: 809.98px) {
  html[data-theme="light"] .at-docs .doc .at-stack, html[data-theme="light"] .at-legal .doc .at-stack { background: none; }
}
/* ===== end light theme ===== */