/* ECTLogger documentation site
   Matches the application's Material UI palette so the docs and the app do not
   look like two different products. */

:root {
  --primary: #1976d2;
  --primary-dark: #1565c0;
  --primary-light: #42a5f5;
  --secondary: #dc004e;
  --background: #e8eef4;
  --surface: #ffffff;
  --surface-alt: #f5f7fa;
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --border: rgba(0, 0, 0, 0.12);
  --annotate: #e53935;
  --shadow-1: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
  --shadow-2: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
  --content-width: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
}

/* ========== HEADER (matches the app's MUI AppBar) ========== */

header {
  background: var(--primary);
  color: white;
  padding: 0 24px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
  position: sticky;
  top: 0;
  z-index: 1100;
}

.header-content {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

header h1 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.0075em;
  margin: 0;
}

header a {
  color: white;
  text-decoration: none;
}

.header-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-links a {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02857em;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.header-links a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.btn-outlined {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-outlined:hover {
  border-color: white;
  background-color: rgba(255, 255, 255, 0.08);
}

/* Sidebar toggle, only visible on narrow screens */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ========== MAIN ========== */

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px;
}

.content-card {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  padding: 24px 32px;
  /* A bare URL, a long callsign list, or an inline code span with no space in
     it is one word as far as line breaking is concerned, and at phone width a
     single one of them is wide enough to scroll the page sideways. break-word
     only breaks a word that would not fit on a line of its own, so ordinary
     prose is unaffected. */
  overflow-wrap: break-word;
}

/* ========== TYPOGRAPHY ========== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: var(--text-primary);
  line-height: 1.3;
}

h1 { font-size: 2.125rem; margin-top: 0; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

p { margin-bottom: 1em; }

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

ul, ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

li { margin-bottom: 0.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ========== CODE ========== */

code {
  font-family: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.875em;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1em;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  color: inherit;
}

/* ========== TABLES ========== */

.table-scroll {
  overflow-x: auto;
  margin-bottom: 1em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

tr:hover { background-color: rgba(0, 0, 0, 0.04); }

blockquote {
  border-left: 4px solid var(--primary);
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: rgba(25, 118, 210, 0.04);
  color: var(--text-secondary);
}

img[src*="shields.io"] { margin-right: 4px; }

/* ========== FIGURES ==========
   Screenshots are generated by scripts/docs-screenshots/capture.mjs. The red
   annotation boxes are drawn into the PNG at capture time, so nothing here
   needs to position an overlay. */

figure {
  margin: 1.5em 0;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
}

figure.inline-figure img {
  box-shadow: none;
}

figcaption {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}

/* A partial capture of one control, shown at its natural size inside a
   sentence-sized block rather than blown up to the column width.

   min(), not a bare 420px: this selector is more specific than the `figure img`
   rule above, so a plain `max-width: 420px` replaced the 100% cap rather than
   adding to it. On a phone the article column is about 330px wide, so every
   one of these figures hung 90px off the right edge and scrolled the whole
   page sideways -- reported 2026-09-19 against the sign-in figure in the
   first-check-in tutorial, which was the first figure a new reader ever met. */
figure.control-figure img {
  max-width: min(420px, 100%);
}

/* ========== CALLOUTS ==========
   A shape and a word, never color alone (WCAG 1.4.1). */

.callout {
  border-left: 4px solid var(--primary);
  background: rgba(25, 118, 210, 0.06);
  padding: 12px 16px;
  margin: 1.25em 0;
  border-radius: 0 4px 4px 0;
}

.callout > :last-child { margin-bottom: 0; }

.callout-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.callout.warning {
  border-left-color: #ed6c02;
  background: rgba(237, 108, 2, 0.08);
}

.callout.warning .callout-label { color: #b35300; }

.callout.danger {
  border-left-color: var(--annotate);
  background: rgba(229, 57, 53, 0.08);
}

.callout.danger .callout-label { color: #b71c1c; }

/* ========== DOCS LAYOUT (sidebar + article) ========== */

.docs-shell {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.docs-sidebar {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  padding: 16px;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}

.docs-sidebar h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 0;
  padding: 0;
  margin: 16px 0 6px;
}

.docs-sidebar h2:first-of-type { margin-top: 8px; }

.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.docs-sidebar li { margin: 0; }

.docs-sidebar a {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.docs-sidebar a:hover {
  background: rgba(25, 118, 210, 0.08);
  text-decoration: none;
}

.docs-sidebar a.current {
  background: rgba(25, 118, 210, 0.12);
  color: var(--primary-dark);
  font-weight: 500;
}

.docs-sidebar .section-link {
  font-weight: 500;
}

/* ========== SEARCH ========== */

.docs-search { margin-bottom: 8px; position: relative; }

.docs-search input {
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text-primary);
}

.docs-search input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.search-results li { padding: 0; }

.search-results a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
}

.search-results .result-title {
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
}

.search-results .result-section {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.search-empty {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 8px 10px;
}

/* ========== ARTICLE META ========== */

.breadcrumb {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.breadcrumb a { color: var(--text-secondary); }

.page-kind {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  margin-bottom: 12px;
}

.page-summary {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin-bottom: 1.5em;
}

.page-footer {
  margin-top: 2.5em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.page-nav {
  margin-top: 2em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-nav a {
  font-size: 0.875rem;
  max-width: 48%;
}

.page-nav .nav-dir {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ========== PATH CARDS (docs home and landing page) ========== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 1.5em 0;
}

.path-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  color: var(--text-primary);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.path-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-2);
  border-color: var(--primary-light);
}

.path-card .card-eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.path-card .card-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.path-card .card-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ========== LANDING PAGE ========== */

.layout-landing main { max-width: none; padding: 0; }

.landing-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 56px 24px;
}

.landing-hero {
  background: linear-gradient(160deg, #0d47a1 0%, #1976d2 60%, #2196f3 100%);
  color: white;
}

.landing-hero .landing-section { padding-top: 64px; padding-bottom: 64px; }

.landing-hero h1 {
  font-size: 2.75rem;
  font-weight: 500;
  max-width: 20ch;
  margin-bottom: 16px;
  color: white;
}

.landing-hero .lede {
  font-size: 1.25rem;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  min-height: 44px;
  line-height: 20px;
}

.btn-primary {
  background: white;
  color: var(--primary-dark);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover { text-decoration: none; background: #f2f6fb; }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: white;
}

.btn-ghost:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1); }

.hero-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: block;
}

.landing-section.alt { background: transparent; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature h3 {
  font-size: 1.0625rem;
  margin-top: 0;
  margin-bottom: 6px;
}

.feature p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.section-lede {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 70ch;
  margin-bottom: 2em;
}

.landing-cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.landing-cta .btn-primary {
  background: var(--primary);
  color: white;
}

.landing-cta .btn-primary:hover { background: var(--primary-dark); }

.landing-cta .btn-ghost {
  border-color: var(--primary);
  color: var(--primary);
}

.landing-cta .btn-ghost:hover { background: rgba(25, 118, 210, 0.08); }

/* ========== FOOTER ========== */

footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

footer a { color: var(--text-secondary); }

.footer-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ========== THEME TOGGLE ========== */

.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}

.theme-toggle:hover {
  border-color: white;
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .theme-toggle,
.dark-mode .theme-toggle {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 980px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    display: none;
  }

  .docs-sidebar.open { display: block; }

  .nav-toggle { display: block; }
}

@media (max-width: 768px) {
  .header-content { height: 56px; }

  header h1 { font-size: 1.1rem; }

  .header-links { gap: 8px; }

  .header-links a { padding: 6px 12px; font-size: 0.75rem; }

  main, .docs-shell { padding: 16px; }

  .content-card { padding: 16px 20px; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }

  .landing-hero h1 { font-size: 2rem; }
  .landing-hero .lede { font-size: 1.0625rem; }
  .landing-section { padding: 40px 16px; }
  .page-nav a { max-width: 100%; }

  /* A phone column is about 330px wide, and almost no table of ours fits in
     that. Making the table its own scroll box means the columns keep their
     widths and the reader swipes the table sideways, instead of the whole
     page sliding out from under the text. .table-scroll does this explicitly
     for tables wide enough to need it on a desktop too, but every table needs
     it at this width, and a rule that has to be remembered per page is one
     that gets forgotten: docs/net-managers/scripts-and-announcements/ and
     docs/ROADMAP/ were both missing the wrapper and both scrolled sideways on
     a phone in 2026-09. A table that does have the wrapper simply ends up with
     a scroller that never has to do anything, which costs nothing. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  /* The Home link is redundant with the logo, and the row has to fit. */
  .header-links a.hide-narrow { display: none; }
}

/* ========== DARK MODE ========== */

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --primary: #90caf9;
    --primary-dark: #42a5f5;
    --background: #121212;
    --surface: #1e1e1e;
    --surface-alt: #262626;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --border: rgba(255, 255, 255, 0.12);
    --annotate: #ff6b67;
  }

  :root:not(.light-mode) header { background: #1e1e1e; }
  :root:not(.light-mode) code { background-color: rgba(255, 255, 255, 0.08); }
  :root:not(.light-mode) tr:hover { background-color: rgba(255, 255, 255, 0.04); }
  :root:not(.light-mode) blockquote { background-color: rgba(144, 202, 249, 0.08); }
  :root:not(.light-mode) .callout { background: rgba(144, 202, 249, 0.10); }
  :root:not(.light-mode) .callout-label { color: var(--primary); }
  :root:not(.light-mode) .callout.warning { background: rgba(255, 167, 38, 0.12); border-left-color: #ffa726; }
  :root:not(.light-mode) .callout.warning .callout-label { color: #ffb74d; }
  :root:not(.light-mode) .callout.danger { background: rgba(255, 107, 103, 0.12); }
  :root:not(.light-mode) .callout.danger .callout-label { color: #ff8a80; }
  :root:not(.light-mode) .docs-sidebar a { color: var(--text-primary); }
  :root:not(.light-mode) .docs-sidebar a:hover { background: rgba(144, 202, 249, 0.12); }
  :root:not(.light-mode) .docs-sidebar a.current { background: rgba(144, 202, 249, 0.18); color: var(--primary); }
  :root:not(.light-mode) .path-card { background: #232323; }
  :root:not(.light-mode) .landing-cta { background: #1a1a1a; }
  :root:not(.light-mode) .landing-cta .btn-primary { background: var(--primary); color: #0d1b2a; }
  :root:not(.light-mode) .light-only { display: none !important; }
  :root:not(.light-mode) .dark-only { display: block !important; }
}

:root.dark-mode {
  --primary: #90caf9;
  --primary-dark: #42a5f5;
  --background: #121212;
  --surface: #1e1e1e;
  --surface-alt: #262626;
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.12);
  --annotate: #ff6b67;
}

:root.dark-mode header { background: #1e1e1e; }
:root.dark-mode code { background-color: rgba(255, 255, 255, 0.08); }
:root.dark-mode tr:hover { background-color: rgba(255, 255, 255, 0.04); }
:root.dark-mode blockquote { background-color: rgba(144, 202, 249, 0.08); }
:root.dark-mode .callout { background: rgba(144, 202, 249, 0.10); }
:root.dark-mode .callout-label { color: var(--primary); }
:root.dark-mode .callout.warning { background: rgba(255, 167, 38, 0.12); border-left-color: #ffa726; }
:root.dark-mode .callout.warning .callout-label { color: #ffb74d; }
:root.dark-mode .callout.danger { background: rgba(255, 107, 103, 0.12); }
:root.dark-mode .callout.danger .callout-label { color: #ff8a80; }
:root.dark-mode .docs-sidebar a { color: var(--text-primary); }
:root.dark-mode .docs-sidebar a:hover { background: rgba(144, 202, 249, 0.12); }
:root.dark-mode .docs-sidebar a.current { background: rgba(144, 202, 249, 0.18); color: var(--primary); }
:root.dark-mode .path-card { background: #232323; }
:root.dark-mode .landing-cta { background: #1a1a1a; }
:root.dark-mode .landing-cta .btn-primary { background: var(--primary); color: #0d1b2a; }
:root.dark-mode .light-only { display: none !important; }
:root.dark-mode .dark-only { display: block !important; }

.dark-only { display: none; }
.light-only { display: block; }

/* Visually hidden, still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}