/* Clear Sky tokens as CSS variables for the Clear Sky component bundle (ds/clear-sky/components/bundle.css).
   Values from the Clear Sky tokens.json. Light theme only. Fonts are self-hosted; @font-face lives in fonts.css. */
:root {
  --background: #FAF8F4;
  --surface: #FFFFFF;
  --text: #1C2733;
  --text-secondary: #4F5B67;
  --primary: #1D5A96;
  --on-primary: #FFFFFF;
  --accent: #9A5B00;
  --tint: #E3ECF5;
  --line: #D8DDE3;
  --focus-ring: var(--primary);
  --link: var(--primary);

  --font-display: Literata, Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --content-max: 1100px;
  --measure: 70ch;
  --gutter-phone: 16px;
  --gutter-desktop: 32px;
  --target-min: 44px;

  --border-hairline: 1px;
  --border-control: 2px;
}

/* Skip link: hidden until it receives keyboard focus. */
.site-skip {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  padding: 10px 16px; background: var(--surface); color: var(--primary);
  border: 2px solid var(--primary); border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none;
}
.site-skip:focus { top: 12px; }

/* Bulleted lists inside running text. */
.site-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.site-list li::marker { color: var(--text-secondary); }

/* Screenshot links open the full image; no hover effects beyond the focus ring. */
.site-shot { display: block; border-radius: var(--radius-md); }
.site-shot img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }

.site-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Tools page: "How these tools work" card ----------
   Full width above the tool grid. Body text stays at the standard 17px body size.
   The list runs in two columns from 720px up and one column below. */
.howto-card { display: flex; flex-direction: column; gap: var(--space-4); }
.howto-card__title { margin: 0; font-size: 22px; line-height: 1.3; }
.howto-card__intro { margin: 0; max-width: var(--measure); }
.howto-list { margin: 0; padding-left: 22px; }
.howto-list li { margin: 0 0 var(--space-3); break-inside: avoid; }
.howto-list li:last-child { margin-bottom: 0; }
.howto-list li::marker { color: var(--text-secondary); }
.howto-card__more { margin: 0; font-weight: 600; }
@media (min-width: 720px) {
  .howto-list { columns: 2; column-gap: var(--space-12); }
}
@media (max-width: 719px) {
  .howto-card { padding: var(--space-5); }
}

/* ---------- Tool card additions ---------- */
.tool-card__howto { margin: 0; }
.tool-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
.tool-card__links a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; }

/* ---------- Tool page: "How to use it" steps ---------- */
.howto-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.howto-steps__title { margin: 0; font-size: 22px; line-height: 1.3; }
.steps { margin: 0; padding-left: 26px; max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-3); }
.steps li::marker { color: var(--text-secondary); font-weight: 700; }
.steps__note { margin: 0; max-width: var(--measure); color: var(--text-secondary); }