/* Skin: a black canvas, tonal surfaces, and hairlines. */
:root {
  color-scheme: dark;
  --canvas: #000000;
  --text: #ffffff;
  --secondary: #9a9a9a;
  --surface: #0d0d0d;
  --inset: #161616;
  --divider: #242424;
  --border: #2e2e2e;
  --pressed: #d8d8d8;
  --destructive: #e5484d;
}

body {
  background: var(--canvas);
  color: var(--text);
}

::selection {
  background: var(--text);
  color: var(--canvas);
}

a,
button,
textarea,
input {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 5px;
}

.c-skip-link {
  background: var(--text);
  color: var(--canvas);
  border-radius: 999px;
}

.c-masthead,
.c-first-answer,
.c-footer {
  border-color: var(--divider);
  border-style: solid;
  border-width: 0;
}

.c-masthead {
  border-bottom-width: 1px;
}

.c-first-answer,
.c-footer {
  border-top-width: 1px;
}

.c-masthead-note,
.c-eyebrow,
.c-hero-intro,
.c-secondary,
.c-rail-note,
.c-date-note,
.c-sheet-intro,
.c-worksheet-status {
  color: var(--secondary);
}

.c-button {
  border: 1px solid transparent;
  border-radius: 999px;
}

.c-button-primary {
  color: var(--canvas);
  background: var(--text);
}

.c-button-primary:hover,
.c-button-primary:active {
  background: var(--pressed);
}

.c-button-quiet {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}

.c-button-quiet:hover,
.c-button-quiet:active {
  background: var(--inset);
}

.c-question-link {
  color: var(--secondary);
  border-bottom: 1px solid var(--divider);
}

.c-question-link > span {
  color: var(--secondary);
}

.c-question-link::before {
  background: transparent;
}

.c-question-link:hover,
.c-question-link:focus-visible {
  color: var(--text);
  background: var(--surface);
}

body:not(:has(.c-guide-layout :target)) .c-question-link[href="#start"],
body:has(#start:target) .c-question-link[href="#start"],
body:has(#answers:target) .c-question-link[href="#answers"],
body:has(#evidence:target) .c-question-link[href="#evidence"],
body:has(#care:target) .c-question-link[href="#care"],
body:has(#cautions:target) .c-question-link[href="#cautions"],
body:has(#cost:target) .c-question-link[href="#cost"],
body:has(#questions:target) .c-question-link[href="#questions"],
body:has(#sources:target) .c-question-link[href="#sources"] {
  color: var(--text);
  background: var(--surface);
}

body:not(:has(.c-guide-layout :target)) .c-question-link[href="#start"]::before,
body:has(#start:target) .c-question-link[href="#start"]::before,
body:has(#answers:target) .c-question-link[href="#answers"]::before,
body:has(#evidence:target) .c-question-link[href="#evidence"]::before,
body:has(#care:target) .c-question-link[href="#care"]::before,
body:has(#cautions:target) .c-question-link[href="#cautions"]::before,
body:has(#cost:target) .c-question-link[href="#cost"]::before,
body:has(#questions:target) .c-question-link[href="#questions"]::before,
body:has(#sources:target) .c-question-link[href="#sources"]::before {
  background: var(--text);
}

.c-guide-section + .c-guide-section,
.c-source-list li + li,
.c-carry-list li {
  border-top: 1px solid var(--divider);
}

.c-answer-list li::marker {
  color: var(--secondary);
}

.c-note,
.c-urgent-note,
.c-sources-box,
.c-cost-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.c-check-link {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
}

.c-check-link:hover,
.c-check-link:active {
  background: var(--inset);
}

.c-cost-row {
  border-top: 1px solid var(--divider);
}

.c-cost-row:hover,
.c-cost-row:has(input:checked) {
  background: var(--inset);
}

.c-cost-row > span > span {
  color: var(--secondary);
}

.c-cost-row input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.c-cost-row input:checked {
  border-color: var(--text);
  background: var(--text);
  color: var(--canvas);
}

.c-cost-row input:checked::before {
  content: "✓";
}

.c-worksheet-result {
  border-top: 1px solid var(--divider);
}

.c-text-button {
  border: 0;
  color: var(--secondary);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.c-text-button:hover {
  color: var(--destructive);
}

.c-copy-field {
  background: var(--inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.c-source-link > span > span,
.c-source-link > span:last-child,
.c-footer p {
  color: var(--secondary);
}

.c-source-link:hover strong,
.c-footer-link:hover,
.c-wordmark:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (max-width: 800px) {
  .c-question-tabs {
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
  }

  .c-question-link {
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .c-question-link::before {
    left: -1px;
  }
}