/* ── Caryvane help — stylesheet ───────────────────────────────────────────────
   Documentation, not marketing. The marketing site is navy end to end because it is scanned for
   a minute; this is read for twenty and printed and pasted into tickets, so the reading column is
   light by default and the brand navy carries the furniture (masthead, nav, code). Dark mode is
   honoured where the reader has asked the OS for it.

   The reader we are designing for: detail-minded, in a hurry, task-oriented. Everything below
   serves being SCANNED first and READ second — short measure, loud headings, visible steps,
   copyable commands, and callouts that stop someone shipping a mistake. */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, pre { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; }

:root {
  --paper:      #ffffff;
  --paper-2:    #f5f7fa;
  --ink:        #16203a;
  --ink-muted:  #4c5a72;
  --ink-faint:  #71809a;
  --rule:       #e2e8f0;
  --rule-firm:  #cbd5e1;

  /* The brand, unchanged from the marketing site — this is the same product. */
  --navy:       #10162a;
  --accent:     #276084;   /* steel: the link/heading accent that works on white */
  --sky:        #6fcbec;   /* the mark's sky: for dark surfaces */
  --brass:      #b3801f;

  --ok-bg:      #eef7ff;  --ok-edge:   #276084;
  --warn-bg:    #fff8e6;  --warn-edge: #b3801f;
  --stop-bg:    #fdecec;  --stop-edge: #c0392b;

  --shadow: 0 1px 2px rgba(16,22,42,.06), 0 8px 24px -16px rgba(16,22,42,.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #10162a;  --paper-2:   #18203a;
    --ink:       #eaf0f8;  --ink-muted: #a6b8cd;  --ink-faint: #7d8fa8;
    --rule:      #232d4a;  --rule-firm: #35446a;
    --accent:    #6fcbec;
    --ok-bg:     #13263a;  --warn-bg:   #2b2416;  --stop-bg:  #2e1a1a;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, ui-serif, Georgia, serif; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--accent); color: #fff; padding: 10px 16px; }

/* ── Masthead + search ──────────────────────────────────────────────────── */
header.top {
  background: var(--navy); color: #fff;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topin {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 12px clamp(16px, 3vw, 28px);
}
.brand { display: flex; align-items: baseline; gap: 10px; color: #fff; text-decoration: none; }
.brand .name {
  font-size: 18px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-family: "Avenir Next", Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif;
}
.brand .sub { font-size: 13px; color: #a6b8cd; font-style: italic;
  font-family: "Iowan Old Style", Palatino, Georgia, serif; }
.brand:hover { text-decoration: none; }
.toplinks { display: flex; gap: 18px; font-size: 14.5px; margin-left: auto; }
.toplinks a { color: #cfe0ee; }

/* Search is the primary navigation for a reader in a hurry, so it sits in the masthead on every
   page rather than on a search page nobody visits. */
.searchwrap { position: relative; flex: 1 1 320px; min-width: 240px; }
#q {
  width: 100%; padding: 9px 12px 9px 34px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-firm); border-radius: 6px;
}
#q::placeholder { color: var(--ink-faint); }
#q:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: var(--sky); }
.searchwrap::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px;
  transform: translateY(-50%); pointer-events: none; opacity: .55;
  background: currentColor; color: var(--ink-faint);
  -webkit-mask: no-repeat center/14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
          mask: no-repeat center/14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.slash {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-faint); border: 1px solid var(--rule-firm);
  border-radius: 4px; padding: 1px 6px; pointer-events: none;
}
#q:focus ~ .slash { display: none; }

.results { display: none; }
.results.open {
  display: block; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 68vh; overflow-y: auto; z-index: 30;
}
.rhit { display: block; padding: 11px 14px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.rhit:last-child { border-bottom: none; }
.rhit:hover, .rhit:focus { background: var(--paper-2); text-decoration: none; outline: none; }
.rpage { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.rhead { display: block; font-size: 15.5px; font-weight: 600; color: var(--accent); margin: 1px 0 2px; }
.rtext { display: block; font-size: 13.5px; color: var(--ink-muted); }
.rhit mark { background: rgba(111,203,236,.32); color: inherit; border-radius: 2px; padding: 0 1px; }
.rnote { padding: 14px; font-size: 14.5px; color: var(--ink-muted); }

/* ── Page shell ─────────────────────────────────────────────────────────── */
.shell {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 44px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px);
}
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

nav.side { padding: 28px 0; border-right: 1px solid var(--rule); align-self: start; position: sticky; top: 61px; }
@media (max-width: 900px) { nav.side { position: static; border-right: none; border-bottom: 1px solid var(--rule); } }
nav.side h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 20px 0 7px;
}
nav.side h4:first-child { margin-top: 0; }
nav.side a { display: block; padding: 4px 0; font-size: 14.5px; color: var(--ink-muted); }
nav.side a:hover { color: var(--accent); }
nav.side a[aria-current="page"] { color: var(--accent); font-weight: 600; }

main { padding: 30px 0 72px; min-width: 0; }
/* 72ch: long enough for a command line, short enough to read at speed. */
main p, main ul, main ol, main .lede { max-width: 72ch; }

h1 { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0 0 12px; }
.lede { font-size: 18px; color: var(--ink-muted); margin: 0 0 30px; }
h2 {
  font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em;
  margin: 42px 0 12px; padding-top: 10px; border-top: 1px solid var(--rule); scroll-margin-top: 76px;
}
h3 { font-size: 18.5px; font-weight: 600; margin: 26px 0 8px; scroll-margin-top: 76px; }
main p { margin: 0 0 14px; }
main ul, main ol { margin: 0 0 16px; padding-left: 22px; }
main li { margin: 5px 0; }

/* A heading you can link someone to — the reason a colleague's link lands on the right step. */
.anchor { color: var(--ink-faint); font-weight: 400; margin-left: 8px; opacity: 0; font-size: .8em; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }

/* ── Steps: the task, numbered, impossible to lose your place in ─────────── */
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 18px 44px; margin: 0;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 28px; text-align: center;
}
ol.steps > li::after {
  content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--rule);
}
ol.steps > li:last-child::after { display: none; }
ol.steps > li > strong:first-child { display: block; margin-bottom: 2px; }

/* ── Code ───────────────────────────────────────────────────────────────── */
code {
  font-size: .9em; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 4px; padding: 1px 5px;
}
pre {
  background: var(--navy); color: #eaf0f8; border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; font-size: 14px; line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

/* ── Callouts: the thing that stops someone shipping a mistake ───────────── */
.note, .warn, .stop {
  border-left: 3px solid; border-radius: 4px; padding: 13px 16px; margin: 0 0 18px; max-width: 72ch;
  font-size: 15.5px;
}
.note { background: var(--ok-bg);   border-color: var(--ok-edge); }
.warn { background: var(--warn-bg); border-color: var(--warn-edge); }
.stop { background: var(--stop-bg); border-color: var(--stop-edge); }
.note p:last-child, .warn p:last-child, .stop p:last-child { margin-bottom: 0; }
.note strong, .warn strong, .stop strong { display: block; margin-bottom: 3px; }

/* ── Tables: reference data, scannable, never sideways-scrolling the page ── */
.tablewrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--rule); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--paper-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
tr:last-child td { border-bottom: none; }
td code { white-space: nowrap; }

/* ── Cards: the landing page's "where do I start" ────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin: 0 0 28px; max-width: none; }
.card {
  display: block; padding: 18px 20px; border: 1px solid var(--rule-firm); border-radius: 8px;
  color: var(--ink); background: var(--paper);
}
.card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 5px; font-size: 17px; color: var(--accent); }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.foot {
  border-top: 1px solid var(--rule); margin-top: 40px;
  padding: 26px clamp(16px, 3vw, 28px); font-size: 14px; color: var(--ink-faint);
}
.footin { max-width: 1180px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  header.top, nav.side, .results { display: none; }
  .shell { display: block; }
  body { font-size: 11pt; }
  pre { border: 1px solid #ccc; background: #f6f6f6; color: #000; }
}