/* ============================================================
   Certification Study Pack — presentation layer.

   Priorities, in order: readable body text, quiet chrome,
   everything else. The HTML fragments remain the source of
   truth; this styles the HTML they ship.
   ============================================================ */

:root {
  /* warm neutrals rather than pure white/grey — easier on the eye
     over a long reading session */
  --bg:            #fcfcfa;
  --bg-sunken:     #f5f4f0;
  --bg-raised:     #ffffff;
  --bg-hover:      #eceae4;
  --text:          #1f1e1c;
  --text-muted:    #5f5d57;
  --text-faint:    #908d85;
  --border:        #e6e3dc;
  --border-strong: #d2cec4;
  --accent:        #1a5fb4;
  --accent-soft:   #e8eff8;
  --azure:         #1a5fb4;
  --aws:           #b26a00;
  --code-bg:       #f3f2ee;

  /* reading measure for prose; tables and code may run wider */
  --measure:   63ch;
  --content-w: 880px;

  --sidebar-w: 274px;
  --topbar-h:  54px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans", Ubuntu, Cantarell, Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #16181c;
    --bg-sunken:     #1c1f24;
    --bg-raised:     #1c1f24;
    --bg-hover:      #23272e;
    --text:          #e6e4e0;
    --text-muted:    #a8a49c;
    --text-faint:    #7b776f;
    --border:        #2a2e35;
    --border-strong: #3a3f47;
    --accent:        #8ab4f8;
    --accent-soft:   #1b2735;
    --azure:         #8ab4f8;
    --aws:           #e8a33d;
    --code-bg:       #1b1e23;
  }
}
:root[data-theme="dark"] {
  --bg:            #16181c;
  --bg-sunken:     #1c1f24;
  --bg-raised:     #1c1f24;
  --bg-hover:      #23272e;
  --text:          #e6e4e0;
  --text-muted:    #a8a49c;
  --text-faint:    #7b776f;
  --border:        #2a2e35;
  --border-strong: #3a3f47;
  --accent:        #8ab4f8;
  --accent-soft:   #1b2735;
  --azure:         #8ab4f8;
  --aws:           #e8a33d;
  --code-bg:       #1b1e23;
}

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

/* 106.25% of the user's base size = 17px by default. Setting it here rather
   than on body means rem is anchored to the reading size, so the heading
   scale holds together and a raised browser font size still scales it. */
html { font-size: 106.25%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-underline-offset: 2px; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- topbar: deliberately plain ---------- */

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-spacer { flex: 1; }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand-mark {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round;
}

.iconbtn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-faint); cursor: pointer;
  transition: background .13s, color .13s;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text); }
.iconbtn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#menuBtn { display: grid; }

.ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun  { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: block; }
}
:root[data-theme="dark"]  .ico-sun  { display: none; }
:root[data-theme="dark"]  .ico-moon { display: block; }
:root[data-theme="light"] .ico-sun  { display: block; }
:root[data-theme="light"] .ico-moon { display: none; }

.search-wrap { position: relative; display: flex; align-items: center; }
#search {
  width: 190px; height: 34px;
  padding: 0 28px 0 11px;
  font: inherit; font-size: 14px;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid transparent; border-radius: 6px;
  transition: border-color .13s, background .13s;
}
#search:focus {
  outline: none;
  border-color: var(--border-strong); background: var(--bg-raised);
}
.search-hint {
  position: absolute; right: 9px; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  border: 1px solid var(--border-strong); border-radius: 3px;
  padding: 0 4px; line-height: 15px;
}
#search:focus ~ .search-hint { display: none; }

/* ---------- layout ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  max-width: 1500px; margin: 0 auto;
}

body.nav-closed .shell   { grid-template-columns: minmax(0, 1fr); }
body.nav-closed .sidebar { display: none; }

.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--border);
}
.sidebar-inner { padding: 22px 14px 56px; }

.main { min-width: 0; padding: 0 64px 100px; }
/* the reading column centres in the space left by the sidebar, instead of
   being pinned to it with a third rail balancing the other side */
.main > * { margin-left: auto; margin-right: auto; }

/* ---------- sidebar nav ---------- */

.track { margin-bottom: 30px; }

.track-head {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px; margin-bottom: 10px;
}
.track-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.track-az  .track-dot { background: var(--azure); }
.track-aws .track-dot { background: var(--aws); }
.track-title {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap;
}

.navlink {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--text-muted); text-decoration: none;
  font-size: 14px; line-height: 1.5;
  transition: background .12s, color .12s;
}
.navlink:hover { background: var(--bg-hover); color: var(--text); }
.navlink.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.track-aws .navlink.active { color: var(--aws); }

.navlink .num {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  flex: none; width: 18px;
}
.navlink.active .num { color: inherit; }
.navlink .label { flex: 1; min-width: 0; }
.navlink .weight { font-size: 10.5px; color: var(--text-faint); flex: none; }
.navlink.read .label { color: var(--text-faint); }
.navlink.read::after {
  content: "✓"; position: absolute; right: 9px; top: 5px;
  font-size: 11px; color: #4a8c68;
}
.navlink.read .weight { display: none; }

.nav-sep { height: 1px; background: var(--border); margin: 10px 10px; }

/* ---------- the document ----------
   Prose is held to a comfortable measure. Tables and code are
   allowed to run wider, because most tables here are 2–3 columns
   and forcing them into the prose measure only creates scrollbars. */

.doc {
  max-width: var(--content-w);
  padding-top: 40px;
}
.doc[aria-busy="true"] { opacity: .5; transition: opacity .1s; }

.doc > h1, .doc > h2, .doc > h3, .doc > h4,
.doc > p, .doc > ul, .doc > ol,
.doc > blockquote, .doc > details, .doc > hr {
  max-width: var(--measure);
}

.loading, .error { color: var(--text-faint); font-size: 15px; padding: 40px 0; }
.error { color: #b3261e; }

/* headings — clear hierarchy, no decoration */
.doc h1, .doc h2, .doc h3, .doc h4 {
  line-height: 1.3;
  text-wrap: balance;
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}
.doc h1 {
  font-size: 2rem; font-weight: 700; letter-spacing: -.021em;
  margin: 0 0 24px;
}
.doc h2 {
  font-size: 1.45rem; font-weight: 650; letter-spacing: -.013em;
  margin: 76px 0 20px; padding-bottom: 0;
}
.doc h3 { font-size: 1.18rem; font-weight: 650; margin: 46px 0 13px; }
/* same size as body, so it separates by weight and colour instead of
   being a heading smaller than the text under it */
.doc h4 {
  font-size: 1rem; font-weight: 650; margin: 32px 0 10px;
  color: var(--text-muted); letter-spacing: .005em;
}

/* the standfirst under each title */
.doc h1 + p { font-size: 1.08em; color: var(--text-muted); line-height: 1.65; }

/* absolutely positioned so it never nudges the heading out of alignment
   with the body text below it */
.doc h2, .doc h3, .doc h4 { position: relative; }
.anchor {
  position: absolute; left: -1.05em; top: 0;
  color: var(--text-faint); text-decoration: none;
  opacity: 0; transition: opacity .12s; font-weight: 400;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: .5; }

.doc p { margin: 0 0 24px; text-wrap: pretty; }
.doc ul, .doc ol { margin: 0 0 22px; padding-left: 24px; }
.doc li { margin-bottom: 9px; padding-left: 2px; }
.doc li > ul, .doc li > ol { margin: 8px 0 0; }
.doc li::marker { color: var(--text-faint); }
.doc strong { font-weight: 650; }
.doc em { font-style: italic; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 60px 0; }
.doc img { max-width: 100%; height: auto; }

/* code */
.doc code {
  font-family: var(--mono); font-size: .87em;
  background: var(--code-bg); color: var(--text);
  padding: .14em .36em; border-radius: 4px;
  word-break: break-word;
}
.doc pre {
  max-width: var(--content-w);
  margin: 0 0 22px; padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px; overflow-x: auto;
  font-size: 14.5px; line-height: 1.62;
}
.doc pre code { background: none; padding: 0; font-size: inherit; word-break: normal; }

/* syntax tokens — muted, so code reads as text not decoration */
.hljs-comment, .hljs-quote                               { color: var(--text-faint); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal,
.hljs-built_in, .hljs-name                               { color: #9c3d54; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet     { color: #2b6b4f; }
.hljs-number, .hljs-meta                                 { color: #8a5a20; }
.hljs-title, .hljs-section, .hljs-function               { color: #1a5fb4; }
.hljs-attribute, .hljs-variable, .hljs-template-variable { color: #6b4ba8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-selector-tag,
  :root:not([data-theme="light"]) .hljs-literal,
  :root:not([data-theme="light"]) .hljs-built_in,
  :root:not([data-theme="light"]) .hljs-name             { color: #e58ca5; }
  :root:not([data-theme="light"]) .hljs-string,
  :root:not([data-theme="light"]) .hljs-attr,
  :root:not([data-theme="light"]) .hljs-symbol,
  :root:not([data-theme="light"]) .hljs-bullet           { color: #8ecfaa; }
  :root:not([data-theme="light"]) .hljs-number,
  :root:not([data-theme="light"]) .hljs-meta             { color: #e0b070; }
  :root:not([data-theme="light"]) .hljs-title,
  :root:not([data-theme="light"]) .hljs-section,
  :root:not([data-theme="light"]) .hljs-function         { color: #8ab4f8; }
  :root:not([data-theme="light"]) .hljs-attribute,
  :root:not([data-theme="light"]) .hljs-variable,
  :root:not([data-theme="light"]) .hljs-template-variable{ color: #b9a3e3; }
}
:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-selector-tag,
:root[data-theme="dark"] .hljs-literal,
:root[data-theme="dark"] .hljs-built_in,
:root[data-theme="dark"] .hljs-name                      { color: #e58ca5; }
:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-attr,
:root[data-theme="dark"] .hljs-symbol,
:root[data-theme="dark"] .hljs-bullet                    { color: #8ecfaa; }
:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-meta                      { color: #e0b070; }
:root[data-theme="dark"] .hljs-title,
:root[data-theme="dark"] .hljs-section,
:root[data-theme="dark"] .hljs-function                  { color: #8ab4f8; }
:root[data-theme="dark"] .hljs-attribute,
:root[data-theme="dark"] .hljs-variable,
:root[data-theme="dark"] .hljs-template-variable         { color: #b9a3e3; }

/* tables — plain rules, no fills, so dense data stays scannable */
.table-scroll {
  max-width: var(--content-w);
  overflow-x: auto;
  margin: 0 0 24px;
}
.doc table {
  width: 100%; border-collapse: collapse;
  font-size: 15px; line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.doc thead th {
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--text-muted);
  padding: 8px 16px 8px 0; white-space: nowrap;
  border-bottom: 1.5px solid var(--border-strong);
}
.doc tbody td {
  padding: 10px 16px 10px 0; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.doc tbody tr:last-child td { border-bottom: 0; }
.doc table th:last-child, .doc table td:last-child { padding-right: 0; }
.doc table code { font-size: .85em; }

/* callouts — one calm treatment, distinguished only by the rule colour */
.doc blockquote {
  margin: 28px 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}
.doc blockquote > :last-child { margin-bottom: 0; }
.doc blockquote strong { color: var(--text); }
.doc blockquote.callout-trap { border-left-color: var(--text-faint); }

/* the cold open each guide starts with — set apart by rhythm, not colour */
.doc .coldopen {
  max-width: var(--measure);
  margin: 0 0 42px; padding: 0 0 0 22px;
  border-left: 2px solid var(--border);
  font-size: 1.05em; color: var(--text-muted);
}
.doc .coldopen > :last-child { margin-bottom: 0; }
.doc .coldopen strong { color: var(--text); }

/* ---------- self-check questions ----------
   Shaped like the real paper: a stem, four lettered options, and the answer
   folded away so you commit before you look. */

.doc ol.quiz { list-style: none; counter-reset: q; padding-left: 0; margin: 0 0 8px; }
.doc ol.quiz > li {
  counter-increment: q; position: relative;
  padding-left: 2.5em; margin: 0 0 42px;
}
.doc ol.quiz > li::before {
  content: counter(q) "."; position: absolute; left: 0; top: 0;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.doc ol.quiz > li > p:first-of-type { margin-bottom: 14px; }

.doc ol.quiz .opts { list-style: none; counter-reset: opt; padding-left: 0; margin: 0 0 16px; }
.doc ol.quiz .opts > li {
  counter-increment: opt; position: relative;
  padding-left: 2.1em; margin: 0 0 8px;
}
.doc ol.quiz .opts > li::before {
  content: counter(opt, upper-alpha); position: absolute; left: 0; top: 0;
  color: var(--text-faint); font-weight: 650;
}
/* "select TWO" and friends */
.doc ol.quiz .pick {
  font-size: 13px; color: var(--text-faint);
  letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 12px;
}
.doc ol.quiz details { margin: 0; }
.doc ol.quiz details .why { color: var(--text-muted); }

/* self-check answers */
.doc details {
  margin: 0 0 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.doc details + details { margin-top: -15px; border-top: 0; }
.doc summary {
  cursor: pointer; padding: 12px 0;
  font-weight: 600; font-size: 15px; color: var(--text-muted);
  list-style: none; user-select: none;
}
.doc summary::-webkit-details-marker { display: none; }
.doc summary::before {
  content: "›"; display: inline-block; width: 1.1em;
  transition: transform .14s; font-size: 1.15em; line-height: 1;
}
.doc details[open] > summary::before { transform: rotate(90deg); }
.doc details[open] > summary { color: var(--text-muted); }
.doc details > :not(summary):last-child { padding-bottom: 14px; }

/* diagrams — rendered from language-mermaid code blocks in the content */
.doc .diagram {
  max-width: var(--content-w);
  margin: 0 0 26px;
  padding: 8px 0 12px;
  text-align: center;
  overflow-x: auto;
}
.doc .diagram svg { max-width: 100%; height: auto; }
/* a diagram immediately after a heading belongs to it */
.doc h3 + .diagram, .doc h4 + .diagram { margin-top: 4px; }
/* shown only if mermaid cannot load, so the source is never lost */
.doc pre.diagram-fallback { opacity: .75; }

/* weight badges in the service index */
.badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  white-space: nowrap;
}
.badge-core { color: var(--text);       font-weight: 650; }
.badge-know { color: var(--text-muted); font-weight: 550; }
.badge-name { color: var(--text-faint); font-weight: 400; }
.badge-rare { color: var(--text-faint); font-weight: 400; opacity: .7; }

/* ---------- table of contents ----------
   A disclosure under the title. Closed by default, because a list of section
   names is something you go looking for, not something you read past. */

.toc { max-width: var(--measure); margin: 0 0 34px; }
.toc-box { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.toc-box > summary {
  cursor: pointer; padding: 11px 0; list-style: none; user-select: none;
  font-size: 13px; color: var(--text-muted);
  display: flex; align-items: baseline; gap: 10px;
}
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::before {
  content: "›"; display: inline-block; width: .9em;
  transition: transform .14s; font-size: 1.15em; line-height: 1;
}
.toc-box[open] > summary::before { transform: rotate(90deg); }
.toc-count { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.toc-links {
  columns: 2; column-gap: 34px;
  padding: 2px 0 16px 1.4em;
}
.toc-links a {
  display: block; break-inside: avoid;
  padding: 4px 0; color: var(--text-muted); text-decoration: none;
  font-size: 13.5px; line-height: 1.45;
}
.toc-links a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 700px) { .toc-links { columns: 1; } }

/* ---------- pager ---------- */

.pager {
  display: flex; gap: 20px; max-width: var(--measure);
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.pager a {
  flex: 1; min-width: 0; display: block;
  text-decoration: none; color: var(--text);
}
.pager a.next { text-align: right; margin-left: auto; }
.pager .dir { display: block; font-size: 12px; color: var(--text-faint); margin-bottom: 2px; }
.pager .ttl {
  font-size: 15px; font-weight: 600; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.pager a:hover .ttl { text-decoration: underline; }

/* mark-as-read */
.readbar { display: flex; max-width: var(--measure); margin-top: 40px; }
.readbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; font: inherit; font-size: 14px;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer;
  transition: color .13s, border-color .13s;
}
.readbtn:hover { color: var(--text); border-color: var(--text-faint); }
.readbtn[aria-pressed="true"] { color: #4a8c68; border-color: #4a8c68; }

/* ---------- search ---------- */

.search-results { max-width: var(--measure); padding-top: 40px; }
.search-meta { color: var(--text-faint); font-size: 14px; margin-bottom: 20px; }
.sr-item {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
}
.sr-item:hover .sr-head { text-decoration: underline; }
.sr-doc { font-size: 12px; color: var(--text-faint); margin-bottom: 3px; }
.sr-head { font-weight: 650; font-size: 15px; color: var(--accent); margin-bottom: 4px; }
.sr-snip { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.sr-snip mark, .sr-head mark {
  background: transparent; color: var(--text); font-weight: 650;
  border-bottom: 2px solid var(--accent);
}

/* ---------- load progress ---------- */

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 100;
  background: var(--border-strong); width: 0;
  transition: width .25s ease, opacity .25s;
}

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .main { padding: 0 44px 100px; }
}

@media (max-width: 880px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .brand-text { display: none; }

  .main { padding: 0 20px 80px; }
  .doc { padding-top: 28px; }
  .doc h1 { font-size: 1.7rem; }
  .doc h2 { font-size: 1.3rem; margin-top: 44px; }
  /* on a phone the viewport is the measure */
  .doc > h1, .doc > h2, .doc > h3, .doc > h4, .doc > p,
  .doc > ul, .doc > ol, .doc > blockquote, .doc > details,
  .doc .coldopen, .pager, .readbar, .search-results, .toc { max-width: 100%; }

  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 55;
    width: min(86vw, var(--sidebar-w));
    background: var(--bg);
    transform: translateX(-102%);
    transition: transform .2s ease;
  }
  body.nav-open .sidebar { transform: none; }
  .scrim { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 54; background: rgba(0,0,0,.4); }

  .anchor { display: none; }
  #search { width: 116px; }
  .search-hint { display: none; }
  .pager { flex-direction: column; gap: 16px; }
  .pager a.next { text-align: left; }
}

@media print {
  .topbar, .sidebar, .toc, .pager, .readbar, .scrim, .progress-bar { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .doc, .doc > * { max-width: 100% !important; }
  .doc details { border: 0; }
  .doc summary { color: inherit; }
}