/*
  The one stylesheet of betterwindowsservices.donislawdev.com.

  EVERY VALUE IS A TOKEN ON :root AND THE PAGES USE NAMES, which is the same rule the window
  keeps (CLAUDE.md, GUI rules 1, 5, 7 and 12): a colour, a size or a distance appears here once
  and nowhere else, so changing the look of the site is a change in one place.

  THE COLOURS ARE THE WINDOW'S OWN, read out of src/Bws.Gui/Themes/Colours.xaml and
  Surfaces.xaml on 2026-09-22, so the site looks like the product rather than like a template.
  Each one was measured with tools/contrast/contrast.ps1 before it was used for text - the
  ratio stands beside it. WCAG 2.2 asks 4.5:1 for text and 3:1 for interface parts.

  The site is dark and stays dark whatever the visitor's system is set to, like the window
  (README, "Honest limits"). No script, no font from anybody's server, nothing tracked.
*/

:root {
  color-scheme: dark;

  /* Surfaces - Surfaces.xaml, and the background WPF UI paints the window with. */
  --bg: #202020;                 /* the window                                         */
  --bg-code: #262626;            /* SurfaceCommandBox                                  */
  --bg-card: #343434;            /* SurfacePanel                                       */
  --bg-hover: #454545;           /* SurfaceHover                                       */
  --edge: #4A4A4A;               /* SurfacePanelEdge                                   */
  --rule: #333333;               /* SurfaceRowLine                                     */
  --selected: #3F7099;           /* SurfaceSelected, 3.09 on the window                */
  --focus: #D6D6D6;              /* FocusRing                                          */

  /* Text - Colours.xaml. */
  --text: #FFFFFF;               /* 16.29 on the window, 12.45 on a card               */
  --text-2: #A0A0A0;             /* TextSubdued - 6.23 on the window, 4.76 on a card   */

  /* Meanings - Colours.xaml. Used only where the site says the same thing the window does. */
  --running: #6CCB5F;            /* 8.03 on the window, 6.13 on a card                 */
  --warning: #FFB900;            /* 9.46 on the window, 7.23 on a card                 */
  --untrusted: #F1707A;          /* 5.69 on the window                                 */
  --unknown: #9E9E9E;            /* 6.08 on the window                                 */
  --mark-automatic: #B58CD9;     /* StartAutomatic, 5.99                               */
  --mark-manual: #C9A45E;        /* StartManual, 6.95                                  */

  /* Actions - Surfaces.xaml. White on the action blue reads 5.07. */
  --action: #1B72B8;
  --action-hover: #1C66A1;
  --action-pressed: #1C5B8D;

  /* Links: the window's StartBoot blue - 6.49 on the window, 4.96 on a card. */
  --link: #7FA6D9;

  /* The bean, src/bws.ico - 3.82 on the window, so it is never used for text. */
  --brand: #368B3D;

  /* The one highlighted phrase in a heading. */
  --accent: var(--running);

  /* Type. The window uses the system face, and so does the site - nothing is downloaded. */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --fs-0: 0.8125rem;             /* 13px - eyebrows, table heads, footnotes             */
  --fs-1: 0.9375rem;             /* 15px - code, captions, small print                  */
  --fs-2: 1.0625rem;             /* 17px - body                                         */
  --fs-3: 1.25rem;               /* 20px - lede, card titles                            */
  --fs-4: 1.5rem;                /* 24px - h3                                           */
  --fs-5: 2rem;                  /* 32px - h2                                           */
  --fs-6: clamp(2rem, 1.1rem + 2.8vw, 3.125rem);      /* h1                            */
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --measure: 68ch;               /* the longest a paragraph is allowed to run           */

  /* Space, on a 4px grid. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  /* Shape and size. */
  --radius: 6px;
  --radius-lg: 12px;
  --page-width: 1120px;
  --gutter: var(--s-5);
  --header-height: 3.5rem;
  --control-height: 2.75rem;
  --icon: 1.75rem;
  --dot: 0.625rem;
}

/* ---- Base --------------------------------------------------------------------------- */

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

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 100%;
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--fs-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-6); }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); }

p, ul, ol, table, pre, figure, blockquote { margin: 0; }

p + p, p + ul, ul + p, p + ol, ol + p, p + pre, pre + p, pre + pre, ul + pre, pre + ul, p + table, table + p, p + figure, figure + p {
  margin-top: var(--s-4);
}

p, li { max-width: var(--measure); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover { color: var(--text); }

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

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

code {
  background: var(--bg-code);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

/* Code inside a heading takes the heading's size and loses its box - a 15px box in a 50px
   line reads as a mistake, and the face alone says "this is what you type". */
h1 code, h2 code, h3 code, h4 code {
  font-size: 0.92em;
  font-weight: 600;
  background: none;
  padding: 0;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  line-height: 1.5;
  tab-size: 4;
}

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

/* Program OUTPUT may wrap - a long summary line is still the same line. Commands never wrap,
   because a wrapped command is one that cannot be copied. */
pre.wrap-lines, pre.wrap-lines code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Colour inside a code block - the same meanings the window's plan sheet uses. */
.c { color: var(--text-2); }            /* a comment, an annotation                      */
.k { color: var(--running); }           /* the command being typed                        */
.w { color: var(--warning); }           /* a warning line                                 */
.d { color: var(--untrusted); }         /* something that changed                         */
.m { color: var(--text-2); }            /* muted structural text                          */

strong { font-weight: 600; }
em { font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

img, svg { display: block; max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Page frame ------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  background: var(--action);
  color: var(--text);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
}

.skip:focus { top: var(--s-2); }

/* ---- Header ----------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.brand img, .brand svg { width: var(--icon); height: var(--icon); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  color: var(--text-2);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  white-space: nowrap;
  font-size: var(--fs-1);
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--bg-hover);
}

.site-nav .lang {
  border: 1px solid var(--edge);
  margin-left: var(--s-2);
}

/* ---- Buttons ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-height);
  padding: 0 var(--s-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--fs-2);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--action); color: var(--text); }
.btn-primary:hover { background: var(--action-hover); color: var(--text); }
.btn-primary:active { background: var(--action-pressed); }

.btn-secondary { background: transparent; color: var(--text); border-color: var(--edge); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ---- Sections --------------------------------------------------------------------- */

main { flex: 1; }

.band { padding-block: var(--s-8); }
.band + .band { border-top: 1px solid var(--rule); }
.band-tight { padding-block: var(--s-7); }

.eyebrow {
  display: block;
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

.band h2 + p, .band h2 + .lede { margin-top: var(--s-4); }
.band h2 + .grid, .band p + .grid, .band h2 + .split, .band .lede + .split,
.band p + .split, .band h2 + pre, .band p + .cards, .band .lede + .cards, .band .lede + pre,
.band .lede + .compare, .band .lede + .grid { margin-top: var(--s-6); }

.lede {
  font-size: var(--fs-3);
  color: var(--text-2);
  max-width: var(--measure);
}

.lede strong, .lede code { color: var(--text); }

.more {
  display: inline-block;
  margin-top: var(--s-5);
  font-weight: 600;
}

.band .actions, .table-wrap + p, pre + .actions { margin-top: var(--s-5); }
.table-wrap + p { margin-top: var(--s-4); }

.more::after { content: " \2192"; }

/* ---- Hero ------------------------------------------------------------------------- */

.hero { padding-block: var(--s-8) var(--s-8); }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}

/* A grid item's minimum width is its content's unless told otherwise, and the mock window's
   unwrapped cells would push the column - and the page - wider than a phone. */
.hero .wrap > * { min-width: 0; }

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lede { margin-top: var(--s-5); }
.hero .actions { margin-top: var(--s-6); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-1);
}

.trust li { display: flex; align-items: center; gap: var(--s-2); max-width: none; }

.trust li::before {
  content: "";
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--running);
  flex: none;
}

/* ---- Grids and cards -------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--s-4);
}

/* Four short cards in one row where the page is wide enough. */
.grid-quarters { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.card h3, .card h4 {
  font-size: var(--fs-3);
  margin-bottom: var(--s-2);
}

.card p { color: var(--text-2); font-size: var(--fs-2); }
.card p code { color: var(--text); }
.card p strong { color: var(--text); }

.card-quiet { background: transparent; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

/* A list of walls or points where the lead words carry the meaning. */
.points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.points li {
  padding-left: var(--s-5);
  position: relative;
  max-width: none;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--edge);
}

.points-alarm li::before { background: var(--untrusted); }
.points-ok li::before { background: var(--running); }
.points li strong { color: var(--text); }
.points li { color: var(--text-2); }

/* ---- Tables ----------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}

th {
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

td { color: var(--text-2); }
td:first-child { color: var(--text); white-space: nowrap; }
td code { color: var(--text); }
tr:last-child td { border-bottom: 0; }

.compare td .yes { color: var(--running); font-weight: 600; }
.compare td .no { color: var(--text-2); }
.compare td .part { color: var(--warning); }

/* ---- The mock window in the hero -------------------------------------------------- */

.shot {
  background: var(--bg-code);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--fs-1);
  box-shadow: 0 var(--s-6) var(--s-8) rgba(0, 0, 0, 0.45);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font-size: var(--fs-0);
}

.shot-bar img, .shot-bar svg { width: 1rem; height: 1rem; }
.shot-bar .scope { margin-left: auto; }

.shot-search {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) var(--s-4) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--font-mono);
}

.shot-search .count { margin-left: auto; color: var(--text-2); font-family: var(--font); }

.shot-list {
  width: calc(100% - 2 * var(--s-4));
  margin: var(--s-3) var(--s-4) 0;
  font-size: var(--fs-0);
}

.shot-list th, .shot-list td { padding: var(--s-2) var(--s-2); }
.shot-list th { white-space: nowrap; font-size: var(--fs-0); }
.shot-list td:first-child { font-family: var(--font-mono); }
.shot-list td:nth-child(2) { white-space: normal; }
.shot-list td:nth-child(3), .shot-list td:nth-child(4) { white-space: nowrap; }
.shot-list tr[aria-selected="true"] td { background: var(--selected); color: var(--text); }
.shot-list tr[aria-selected="true"] td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.shot-list tr[aria-selected="true"] td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.dot, .ring {
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  margin-right: var(--s-2);
  vertical-align: middle;
}

.dot-stopped { background: var(--unknown); }
.dot-running { background: var(--running); }
.ring-automatic { border: 2px solid var(--mark-automatic); }
.ring-manual { border: 2px solid var(--mark-manual); }

.shot-plan {
  margin: var(--s-3) var(--s-4) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.shot-plan h3 {
  font-size: var(--fs-1);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.shot-plan ol {
  margin: 0;
  padding-left: var(--s-5);
  font-family: var(--font-mono);
  color: var(--text-2);
}

.shot-plan ol li { max-width: none; }
.shot-plan ol li span { color: var(--text); }
.shot-plan .warn { color: var(--warning); margin-top: var(--s-2); font-size: var(--fs-0); }
.shot-plan .cmd {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-code);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  color: var(--running);
  overflow-x: auto;
  white-space: nowrap;
}

.shot-plan .buttons {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.shot-plan .buttons span {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
  font-size: var(--fs-0);
  border: 1px solid var(--edge);
}

.shot-plan .buttons .go { background: var(--action); border-color: var(--action); color: var(--text); }

figcaption {
  margin-top: var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-1);
}

/* ---- Prose pages ------------------------------------------------------------------ */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-7); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose pre, .prose .table-wrap, .prose table { max-width: none; }

.page-title { padding-block: var(--s-8) var(--s-6); }
.page-title .lede { margin-top: var(--s-4); }

.wide { max-width: none; }

/* A definition-style row: a term and its meaning, as the FAQ and the reference use it. */
.qa { display: grid; gap: var(--s-5); }
.qa h3 { font-size: var(--fs-3); }
.qa h3 + p { margin-top: var(--s-2); }

/* ---- Notes ------------------------------------------------------------------------ */

.note {
  border-left: 3px solid var(--warning);
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-3) var(--s-4);
  color: var(--text-2);
  max-width: var(--measure);
}

.note strong { color: var(--text); }

/* ---- Footer ----------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-7) var(--s-6);
  color: var(--text-2);
  font-size: var(--fs-1);
}

.footer-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6);
}

.footer-groups h2 {
  font-size: var(--fs-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

.footer-groups ul { list-style: none; padding: 0; }
.footer-groups li + li { margin-top: var(--s-2); }
.footer-groups a { color: var(--text); text-decoration: none; }
.footer-groups a:hover { text-decoration: underline; }

.footer-legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
}

.footer-legal p { max-width: none; }

/* ---- Small screens ---------------------------------------------------------------- */

@media (max-width: 56rem) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s-6); }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .band { padding-block: var(--s-7); }
  .site-header .wrap { flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); }
  .site-nav { margin-left: 0; width: 100%; }
}

@media (max-width: 36rem) {
  :root { --gutter: var(--s-4); }
  .hero { padding-block: var(--s-7); }
  .btn { width: 100%; }
  th, td { padding: var(--s-2) var(--s-3); }
  .shot-list th:nth-child(4), .shot-list td:nth-child(4) { display: none; }
  .shot-bar .scope { display: none; }
}

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