/* -------------------------------------------------------------------------------------------------
   secure-development-standards site.

   One hand-written stylesheet, no theme CSS, no web fonts, no CDN. Light and dark are both real:
   the palette lives in custom properties and prefers-color-scheme swaps it.

   ONE PAGE RUNS SCRIPT, and this comment used to say none did. _includes/standards-selector.html
   carries an inline style block and an inline script for the interactive selector on the standards
   routing page. It is scoped to .ssel, it declares its own local fallbacks for every custom
   property below so a saved file:// copy still reads correctly, and it only ever hides and reorders
   content that is already in the served HTML. Nothing else on the site has a script, and the
   narrow-screen nav below still refuses one on purpose -- see the note at the media query. Both
   statements here were corrected in the commit that made them false; a false comment about a
   control is precisely the defect these documents are about.

   The documents this styles carry long PowerShell command lines and wide tables, so the layout is
   built so that WIDE CONTENT SCROLLS ITSELF rather than widening the page. That is why the content
   grid track is minmax(0, 1fr) and not 1fr -- a bare 1fr track takes its minimum size from its
   content, so one long <pre> would push the whole document sideways on a phone. Nothing here uses
   overflow-x: hidden on the body to paper over that: hiding the symptom would also hide the next
   element that overflows.
   ------------------------------------------------------------------------------------------------- */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-code: #f4f5f7;
  --fg: #1f2328;
  --fg-muted: #596069;
  --border: #d7dce1;
  --border-strong: #b9c0c8;
  --accent: #0b5fa5;
  --accent-soft: #eaf1f8;
  --focus: #0b5fa5;

  --code-comment: #6a737d;
  --code-string: #0a6640;
  --code-keyword: #8a3b0b;
  --code-literal: #0b5fa5;

  /* MEASURED, NOT CHOSEN BY EYE, and `ch` is why the old value read wider than it looked. `ch` is
     the advance width of "0", which in this stack is wider than the average lowercase letter, so
     78ch rendered as 85 average characters on a 1280px viewport -- ten above the 75 that typographic
     guidance treats as the top of the comfortable range. 66ch measures at roughly 72. Re-measure
     against a real paragraph rather than trusting the unit: append a hidden nowrap span of a-z to a
     paragraph, divide its width by 26, and divide the paragraph width by that. */
  --measure: 66ch;
  --content-max: 62rem;
  --sidebar-width: 15rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --bg-soft: #1b1f25;
    --bg-code: #1b1f25;
    --fg: #d6dbe1;
    --fg-muted: #98a1ab;
    --border: #2b313a;
    --border-strong: #3b434e;
    --accent: #82b6e8;
    --accent-soft: #1d2733;
    --focus: #82b6e8;

    --code-comment: #8a939d;
    --code-string: #8fd0a8;
    --code-keyword: #e0a878;
    --code-literal: #9ec9ef;
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

/* Focus is always visible, and never removed. Keyboard navigation of a 14-document sidebar is the
   normal case here, not an accessibility afterthought. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.site-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-repo-link {
  font-size: 0.875rem;
}

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

.layout {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

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

.site-nav {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.75rem 0 2rem;
  font-size: 0.9rem;
  border-right: 1px solid var(--border);
  padding-right: 1rem;
}

.nav-heading {
  margin: 1.5rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0;
}

.nav-link {
  display: block;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.4;
}

.nav-link:hover {
  background: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The current page is marked by weight, colour AND a rule, so it survives a greyscale screen and a
   colour-blind reader. No glyph is used as the marker. */
.nav-link.is-current {
  font-weight: 600;
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.nav-link.is-external {
  color: var(--fg-muted);
}

.nav-link.is-external:hover {
  color: var(--accent);
}

/* ---------- content ---------- */

.page {
  min-width: 0;
  padding: 1.75rem 0 4rem;
}

.page-content {
  max-width: var(--content-max);
  overflow-wrap: break-word;
}

/* Prose gets a comfortable measure; code blocks and tables are allowed the full column, because
   squeezing a wide table to 78ch only means scrolling it further. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > dl,
.page-content > blockquote,
.page-content > h1,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > h5,
.page-content > h6 {
  max-width: var(--measure);
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  line-height: 1.25;
  overflow-wrap: break-word;
  scroll-margin-top: 1rem;
}

.page-content h1 {
  margin: 0 0 1.25rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page-content h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.page-content h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 650;
}

.page-content h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.page-content h5,
.page-content h6 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.page-content p {
  margin: 0 0 1rem;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.page-content li {
  margin: 0.25rem 0;
}

.page-content li > ul,
.page-content li > ol {
  margin: 0.25rem 0;
}

.page-content blockquote {
  margin: 1.25rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
}

.page-content blockquote > :last-child {
  margin-bottom: 0;
}

.page-content hr {
  height: 0;
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content strong {
  font-weight: 650;
}

/* ---------- code ---------- */

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

.page-content code {
  font-size: 0.875em;
  overflow-wrap: break-word;
}

/* Inline code only. The :not() keeps this off the <code> inside a highlighted block, which would
   otherwise get a second background and a second border. */
.page-content :not(pre) > code {
  padding: 0.12em 0.35em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: break-spaces;
}

.page-content pre {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  max-width: 100%;
  overflow-x: auto;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 4;
}

.page-content pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
  white-space: pre;
}

/* Rouge wraps each block in .highlighter-rouge > .highlight > pre. Cap the wrapper so a long
   command line cannot widen the column. */
.page-content .highlighter-rouge,
.page-content .highlight {
  max-width: 100%;
}

.page-content .highlight {
  background: none;
}

.page-content .highlight pre {
  margin: 0;
}

.page-content div.highlighter-rouge {
  margin: 0 0 1.25rem;
}

.page-content div.highlighter-rouge > .highlight > pre {
  margin: 0;
}

/* A restrained Rouge palette. Deliberately few classes: the point is to make comments recede and
   strings readable, not to repaint the code. */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs,
.highlight .cd,
.highlight .cp {
  color: var(--code-comment);
  font-style: italic;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr {
  color: var(--code-string);
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .kv {
  color: var(--code-keyword);
}

.highlight .nb,
.highlight .nt,
.highlight .nv,
.highlight .na,
.highlight .vg,
.highlight .vi,
.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo {
  color: var(--code-literal);
}

/* Rouge marks anything its lexer cannot place as .err, and the stock themes give that a red
   background. These documents are full of shell fragments that lex imperfectly, so a wall of red
   would be noise about the highlighter rather than information about the code. */
.highlight .err {
  color: inherit;
  background: none;
}

/* ---------- tables ---------- */

/* kramdown emits a bare <table> with no wrapper element, and nothing wraps one after the fact, so
   the table itself is made the scroll container. width: max-content lets it size to its content and
   max-width caps it at the column, which is what makes it scroll instead of the page.

   This used to be justified by a claim that nothing on the site ran a script, which is no longer
   true -- _includes/standards-selector.html runs one on the standards routing page. The rule stands
   anyway, and now on a better reason: the only script on the site is scoped to one component and
   does not touch tables, and a table on any of the other twenty pages would still be unwrapped. Do
   not "fix" this by having the selector's script wrap tables globally; that would make the layout
   of every page depend on a script the page does not otherwise need. */
.page-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.page-content th,
.page-content td {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.page-content th {
  background: var(--bg-soft);
  font-weight: 650;
}

.page-content tbody tr:nth-child(even) td {
  background: var(--bg-soft);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.site-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.footer-line {
  margin: 0;
}

/* ---------- on-this-page contents ---------- */

/* Built at build time by _layouts/default.html, not by a script, for the reason stated at the narrow
   screens comment below: the list has to be complete in the served HTML.

   It is deliberately quiet. This block sits between a reader and the document they asked for, so it
   is set at the small size, without the accent, and reads as apparatus rather than as content. The
   left rule is the only thing marking it, matching the sidebar's current-page treatment. */
.page-toc {
  margin: 1.75rem 0 2.5rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
  max-width: var(--measure);
}

.page-toc-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Two columns on a wide viewport: a fourteen-heading list is otherwise a screen of its own, which
     is the scrolling problem this block exists to shorten. `columns` is used rather than a grid
     because the items are a single flow whose order stays top-to-bottom within each column, and it
     collapses to one column on its own when the width is not there. */
  columns: 2;
  column-gap: 2rem;
}

.page-toc-list li {
  margin: 0 0 0.3rem;
  /* Keeps a wrapped two-line entry from being split across the column break. */
  break-inside: avoid;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.page-toc-list a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-toc-list a:hover,
.page-toc-list a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- narrow screens ---------- */

/* Under roughly 900px the sidebar stops being a sidebar and becomes a top nav: one column, groups
   laid out as wrapped rows above the content. No script here, no toggle -- a collapsed menu that
   needs JavaScript is one more thing that can be wired and inert.

   That refusal still stands, and the selector on the standards routing page is not an exception
   to it. The nav was refused because script would have been THE ONLY WAY TO REACH THE LINKS. The
   selector is allowed because the answer it filters is complete before any script runs. If a future
   feature cannot say that second sentence about itself, it does not get a script either. */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 1rem;
  }

  .site-nav {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 1rem 0 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .nav-heading {
    margin: 1rem 0 0.3rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }

  .nav-link {
    margin-left: 0;
    padding: 0.2rem 0.5rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-soft);
  }

  .nav-link.is-current {
    border-left: 0;
    border-bottom-color: var(--accent);
  }

  .page {
    padding: 1.5rem 0 3rem;
  }

  .page-content h1 {
    font-size: 1.6rem;
  }

  .page-content h2 {
    font-size: 1.25rem;
    margin-top: 2.25rem;
  }

  /* One column on a phone. Two columns of jump links at this width produce entries two or three
     words wide, and this is the viewport where the contents block earns the most: the longest
     document is 37 screens here against 26 on a desktop. */
  .page-toc-list {
    columns: 1;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .page-content pre {
    font-size: 0.8rem;
    padding: 0.7rem 0.75rem;
  }
}

/* ---------- print ---------- */

@media print {
  .site-nav,
  .site-header,
  .site-footer,
  .skip-link {
    display: none;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .page-content {
    max-width: none;
  }

  .page-content pre {
    white-space: pre-wrap;
    word-break: break-word;
  }

  a {
    color: inherit;
  }
}