/* JLink brand, light theme ("light is for work"). Tokens from the JLink brand guide. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap");

:root {
  --surface: #F7F9FC;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEF3FA;
  --text: #06101F;
  --text-muted: #3D5068;
  --text-faint: #5A6E87;
  --border: #D5DEEA;
  --border-strong: #768BA5;
  --action: #06101F;
  --on-action: #EEF3FA;
  --amber: #FFB547;
  --accent: #9C5A00;
  --positive: #0A66B5;
  --danger: #B3261E;
  --focus: #0A66B5;
  --ink: #06101F;
  --radius-md: 12px;
}
:root.dark {
  --surface: #06101F;
  --surface-raised: #0A1A2F;
  --surface-sunken: #0E2240;
  --text: #EEF3FA;
  --text-muted: #9DB2CA;
  --text-faint: #6F86A3;
  --border: #1C3657;
  --border-strong: #28497A;
  --action: #EEF3FA;
  --on-action: #06101F;
  --accent: #FFB547;
  --positive: #7CC8FF;
  --danger: #FF8A7A;
  --focus: #FFB547;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 400 15px/1.5 Archivo, system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
/* No line may end a paragraph with one or two stranded words. */
p, li, td, .lede, .hint, .caption, .muted, .faint { text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; font-stretch: 125%; margin: 0; }
h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 21px; line-height: 1.15; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; font-stretch: 100%; }
a { color: var(--positive); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }

.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 125%; font-size: 17px; }
.brand img { width: 30px; height: 30px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: 13px; }
.caption { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-muted); }
.tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); font-size: 14px; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.error { color: var(--danger); }

button, .button {
  font: 700 15px/1.5 Archivo, system-ui, sans-serif;
  border-radius: 999px;
  padding: 9px 20px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
button:active, .button:active { transform: scale(0.98); }
button.main, .button.main { background: var(--action); color: var(--on-action); border-color: var(--action); }
button.main:hover, .button.main:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
button:disabled { opacity: 0.5; cursor: default; }

input[type=text], textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  width: 100%;
}
textarea { resize: vertical; }

.card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
.md h2 { margin: 28px 0 8px; }
.md h3 { margin: 20px 0 4px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md > :first-child { margin-top: 0; }