/* The product pages' stylesheet: tools.html, type.html and notes.html.
   index.html still owns its own 1,444 line block and is untouched by this file.

   These rules lived inline and byte-identical in two pages. Adding a third copy for
   Pinned Notes is what turned a duplication into a fault, so they were lifted here once
   rather than pasted again. Nothing was changed on the way out: the two pages rendered
   from this exact text before it moved.
*/
/* Tokens copied from index.html, which is the only place they live today. There is no shared
   stylesheet on this site yet, so the alternative was to refactor the 1,444 line block that
   index.html owns, on a page that had nothing to do with this change. */
:root {
  color-scheme: light dark;

  --indigo: #232C6B;
  --ink: #141A3A;
  --amber: #F5A524;

  /* light palette (complete, defined on bare :root) */
  --bg: #F3F4FA;
  --bg-panel: #FFFFFF;
  --bg-band: #232C6B;
  --fg: #141A3A;
  --fg-2: #454D80;
  /* #6C7299 measured 4.25:1 against this page's ground, under WCAG AA for normal text
     (WEB-09). Five points darker on every channel, which keeps the hue exactly and clears the
     floor at 4.56 on the page and 5.01 on a panel. Captions and secondary labels are set in
     this, so it is the colour the smallest text on the site uses. */
  --fg-3: #676D94;
  --line: rgba(20, 26, 58, 0.14);
  --line-2: rgba(20, 26, 58, 0.26);
  --down: #141A3A;
  --up: #F5A524;
  --up-text: #8A5A00;
  --band-fg: #FFFFFF;
  --band-fg-2: rgba(255, 255, 255, 0.66);
  --band-line: rgba(255, 255, 255, 0.20);
  --bar-bg: rgba(248, 249, 253, 0.86);
  --bar-fg: #141A3A;
  --bar-line: rgba(20, 26, 58, 0.16);
  --grid: rgba(20, 26, 58, 0.10);
  --shadow: 0 1px 2px rgba(20, 26, 58, .05), 0 18px 44px -22px rgba(20, 26, 58, .28);

  /* 68 on desktop, 56 on a phone. The mark below is sized against this, not fixed: a 22px
     lockup in a 58px bar read as an afterthought rather than as the anchor of the page. */
  --rail-h: 68px;
  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 56px);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141A3A;
    --bg-panel: rgba(35, 44, 107, 0.42);
    --bg-band: #232C6B;
    --fg: #FFFFFF;
    --fg-2: #BCC3E8;
    --fg-3: #8E96C6;
    --line: rgba(255, 255, 255, 0.14);
    --line-2: rgba(255, 255, 255, 0.28);
    --down: #FFFFFF;
    --up: #F5A524;
    --up-text: #F5A524;
    --band-fg: #FFFFFF;
    --band-fg-2: rgba(255, 255, 255, 0.66);
    --band-line: rgba(255, 255, 255, 0.20);
    --bar-bg: rgba(20, 26, 58, 0.72);
    --bar-fg: #FFFFFF;
    --bar-line: rgba(255, 255, 255, 0.16);
    --grid: rgba(255, 255, 255, 0.09);
    --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 24px 60px -26px rgba(0, 0, 0, .70);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.skip {
  position: absolute; left: -9999px;
  background: var(--bg-panel); color: var(--fg); padding: 12px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

header.rail {
  height: var(--rail-h); display: flex; align-items: center;
  border-bottom: 1px solid var(--line); background: var(--bg-panel);
}
.rail-in { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.lockup { height: 26px; width: auto; display: block; }
.on-dark { display: none; }
.rail-status {
  font-size: 13px; color: var(--fg-3); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}

h1 { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.01em; margin: 48px 0 12px; }
h3 { font-size: 17px; margin: 0 0 4px; }
p { margin: 0 0 14px; max-width: 62ch; }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--fg-2); max-width: 60ch; }
.muted { color: var(--fg-3); font-size: 14px; }

main { padding-block: clamp(40px, 7vw, 80px) 80px; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; text-decoration: none;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  background: var(--ink); color: #fff;
}
.btn.secondary { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.panel {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.note {
  border-left: 3px solid var(--amber); padding: 4px 0 4px 16px; margin: 22px 0;
  color: var(--fg-2);
}

kbd {
  font: 13px/1 var(--mono); background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px;
  padding: 4px 7px; white-space: nowrap;
}
table { border-collapse: collapse; width: 100%; margin: 8px 0 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--fg-3); font-weight: 600; font-size: 13px; }
.scroller { overflow-x: auto; }

footer { border-top: 1px solid var(--line); padding-block: 28px; margin-top: 60px; }
.f-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.f-meta { color: var(--fg-3); font-size: 14px; margin: 0; }
.f-nav { margin-left: auto; display: flex; gap: 18px; }
.f-nav a, .f-meta a { color: var(--fg-2); }

@media (prefers-color-scheme: dark) {
  .on-light { display: none; }
  .on-dark { display: block; }
}