/* Pengolin design layer, loaded after every other stylesheet.
   Created by Pengolin based on the values of the Digital Agency Design System (DADS); not made by the Digital Agency.
   tokens  : github.com/digital-go-jp/design-tokens examples/tokens.css (MIT, Copyright (c) 2023 Digital Agency)
   button / input / link : github.com/digital-go-jp/design-system-example-components-html (MIT)
   guidance: https://design.digital.go.jp/dads/ (typography, color, spacing, layout, button, input text)
   Licenses and credits: /licenses.html */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/fonts/NotoSansJP-wght.woff2") format("woff2"), url("/assets/fonts/NotoSansJP-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  /* DADS primitive colors */
  --dads-light-blue-50: #f0f9ff; --dads-light-blue-100: #dcf0ff; --dads-light-blue-200: #c0e4ff; --dads-light-blue-300: #97d3ff;
  --dads-light-blue-900: #0055ad; --dads-light-blue-1000: #00428c; --dads-light-blue-1200: #00234b;
  --dads-blue-900: #0017c1; --dads-blue-1000: #00118f; --dads-magenta-900: #8b008b; --dads-orange-800: #c74700;
  --dads-yellow-300: #ffd43d; --dads-red-50: #fdeeee; --dads-red-800: #ec0000; --dads-red-900: #ce0000; --dads-red-1000: #a90000;
  --dads-orange-50: #ffeee2; --dads-orange-900: #ac3e00; --dads-green-50: #e6f5ec; --dads-green-800: #197a4b;
  --dads-purple-50: #f1eafa; --dads-purple-800: #5c10be;
  --dads-gray-50: #f2f2f2; --dads-gray-100: #e6e6e6; --dads-gray-300: #b3b3b3; --dads-gray-420: #949494; --dads-gray-600: #666666;
  --dads-gray-800: #333333; --dads-gray-900: #1a1a1a;
  /* Pengolin variables mapped onto DADS values (key color: light blue) */
  --bg: #ffffff; --surface: #ffffff; --surface-2: var(--dads-gray-50);
  --ink: var(--dads-gray-900); --ink-soft: var(--dads-gray-600); --line: var(--dads-gray-420);
  --brand: var(--dads-light-blue-900); --brand-soft: var(--dads-light-blue-50); --brand-ink: #ffffff;
  --accent: var(--dads-light-blue-900); --focus: #000000;
  --sev-critical: var(--dads-red-1000); --sev-high: var(--dads-red-900); --sev-medium: var(--dads-orange-900);
  --sev-low: var(--dads-light-blue-1000); --sev-info: var(--dads-gray-600); --ok: var(--dads-green-800);
  --radius: 12px; --shadow: none;
  --font: "Noto Sans JP", sans-serif;
  --mono: "Noto Sans Mono", ui-monospace, Consolas, monospace;
}

/* Typography: Std-16N-170 body; headings Std-36B-140 / 24B-150 / 20B-150 / 18B-160 (phone: 28B-150 / 20B-150 / 18B-160) */
body { font-family: var(--font); font-size: 1rem; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink); background: var(--bg); }
h1, h2, h3, h4 { font-weight: 700; color: inherit; }
h1 { font-size: 2.25rem; line-height: 1.4; letter-spacing: 0.01em; }
h2 { font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.02em; }
h3 { font-size: 1.25rem; line-height: 1.5; letter-spacing: 0.02em; }
h4 { font-size: 1.125rem; line-height: 1.6; letter-spacing: 0.02em; }
.page-head h1, .legal h1, .guide-intro h1, body.exact-home .hero h1, body.friendly-home .hero h1 { font-size: 2.25rem; line-height: 1.4; letter-spacing: 0.01em; font-weight: 700; }
.friendly-home h2, .friendly-home #why h2, .friendly-home .closing-cta h2, .legal h2 { font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.02em; font-weight: 700; }
.friendly-home #pricing + section h2, .finding-head h3, .flow-track h3, .plan h2, .plan h3, body.home .feature h3, .tv-title, .guide-card h3 { font-size: 1.25rem; line-height: 1.5; }
.tv-steps h3, .map-counts h3, .finder h2, .card-group h2, .other-section h2, .empty-state h2, body.home .flow-visual h4, #sec-household h4 { font-size: 1.125rem; line-height: 1.6; }
.tv-steps h3 { line-height: 28px; }
p, li, dd, td { letter-spacing: 0.02em; }
.container.legal { line-height: 1.7; }
small, .small { font-size: 0.875rem; line-height: 1.7; }
/* Reading text that the older sheets set below body size. */
body.friendly-home .hero .sub, body.exact-home .hero .sub { font-size: 1.125rem; line-height: 1.6; color: var(--ink); max-width: 30em; }
body.home .feature p, body.home .flow-visual p, details.faq p, .card-scope, .next-step, .intro-copy, .friendly-home .closing-cta p, .other-news a, table { font-size: 1rem; }
@media (max-width: 767.98px) {
  h1, .page-head h1, .legal h1, .guide-intro h1, body.exact-home .hero h1, body.friendly-home .hero h1 { font-size: 1.75rem; line-height: 1.5; }
  h2, .friendly-home h2, .friendly-home #why h2, .friendly-home .closing-cta h2, .legal h2 { font-size: 1.25rem; }
  h3, .finding-head h3, .flow-track h3, .plan h2, .plan h3, body.home .feature h3, .tv-title, .guide-card h3 { font-size: 1.125rem; line-height: 1.6; }
  body.friendly-home .hero .sub, body.exact-home .hero .sub { font-size: 1rem; line-height: 1.7; }
}

/* Links (DADS link): the class-free a rule stays below any component colour. */
a { color: var(--dads-blue-1000); text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; }
a:where(:visited) { color: var(--dads-magenta-900); }
a:where(:active) { color: var(--dads-orange-800); }
@media (hover: hover) { a:where(:hover) { color: var(--dads-blue-900); text-decoration-thickness: 0.1875rem; } }

/* Focus (DADS): 4px black outline, 2px offset, 2px Yellow-300 ring; text links also get a Yellow-300 background. */
:focus-visible { outline: 0.25rem solid #000 !important; outline-offset: 0.125rem !important; box-shadow: 0 0 0 0.125rem var(--dads-yellow-300) !important; }
a:not(.btn):focus-visible, .tv-back:focus-visible, .reset-button:focus-visible { background-color: var(--dads-yellow-300) !important; color: #000 !important; border-radius: 0.25rem; }
[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* Buttons (DADS button md: min 96x48, radius 8, padding 8/16, bold 16, line-height 1) */
.btn {
  min-width: 6rem; min-height: 3rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 4px double transparent;
  background: var(--dads-light-blue-900); color: #fff; font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.02em; text-decoration: none; text-underline-offset: 0.1875rem; box-shadow: none; filter: none; gap: 0.5rem;
}
.btn:active { background: var(--dads-light-blue-1200); color: #fff; text-decoration: underline; }
.btn-secondary { background: #fff; color: var(--dads-light-blue-900); border: 1px solid currentcolor; }
.btn-secondary:active { background: var(--dads-light-blue-300); color: var(--dads-light-blue-1200); }
/* Low-emphasis action: DADS text button. */
.btn-ghost { background: transparent; color: var(--dads-light-blue-900); border: 0; text-decoration: underline; text-decoration-thickness: 0.0625rem; }
.btn-ghost:active { background: var(--dads-light-blue-100); color: var(--dads-light-blue-1200); }
.btn-danger { background: var(--dads-red-900); color: #fff; border: 4px double transparent; }
.btn-danger:active { background: var(--dads-red-1000); }
@media (hover: hover) {
  .btn:hover { background: var(--dads-light-blue-1000); color: #fff; text-decoration: underline; text-decoration-thickness: 0.0625rem; filter: none; }
  .btn-secondary:hover { background: var(--dads-light-blue-200); color: var(--dads-light-blue-1000); }
  .btn-ghost:hover { background: var(--dads-light-blue-50); color: var(--dads-light-blue-1000); text-decoration-thickness: 0.1875rem; }
  .btn-danger:hover { background: var(--dads-red-1000); color: #fff; }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--dads-gray-300); color: var(--dads-gray-50); border-color: transparent; opacity: 1; filter: none; text-decoration: none; cursor: default; }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"] { background: #fff; color: var(--dads-gray-300); border-color: currentcolor; }
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { background: transparent; color: var(--dads-gray-300); }
/* The one grey-out for pressed buttons and links (Lz.busy disables buttons; press-once.js / the resend link set aria-disabled on links). */
a[aria-disabled="true"] { pointer-events: none; }
a[aria-disabled="true"]:not(.btn) { color: var(--dads-gray-300); text-decoration: none; cursor: default; }
@media (forced-colors: active) { .btn:disabled, .btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; } a[aria-disabled="true"]:not(.btn) { color: GrayText; } }
/* lg: min 136x56, padding 12/16 */
.btn-lg { min-width: 8.5rem; min-height: 3.5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 1rem; }
/* sm: min 80x36, radius 6, padding 2/12, 44px target through ::after */
.btn-sm { position: relative; min-width: 5rem; min-height: 2.25rem; padding: 0.125rem 0.75rem; border-radius: 0.375rem; font-size: 1rem; }
.btn-sm::after { content: ""; position: absolute; inset: 0; margin: auto; height: 2.75rem; }
.btn > span[aria-hidden="true"] { margin-left: 0.5rem; font-size: 1.25rem; font-weight: 400; line-height: 1; }

/* Header and footer */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .logo { color: var(--ink); }
.site-header .nav a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; font-size: 1rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-header .nav a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration-thickness: 0.1875rem; }
@media (hover: hover) { .site-header .nav a:not(.btn):hover { color: var(--ink); text-decoration-thickness: 0.1875rem; } }
body .site-header .nav a.btn, body .site-header .nav a.btn:focus, body .site-header .nav a.btn:focus-visible, body .site-header .nav a.btn[aria-current="page"] { background: var(--dads-light-blue-900); border-color: transparent; color: #fff; text-decoration: none; }
body .site-header .nav a.btn:hover { background: var(--dads-light-blue-1000); border-color: transparent; color: #fff; text-decoration: underline; text-underline-offset: 0.1875rem; }
body .site-header .nav a.btn:active { background: var(--dads-light-blue-1200); border-color: transparent; color: #fff; }
.site-header .nav-toggle { min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1rem; border: 1px solid currentcolor; border-radius: 0.5rem; color: var(--ink); background: #fff; font-weight: 700; }
.site-footer { background: var(--dads-gray-50); color: var(--dads-gray-800); border-top: 1px solid var(--line); font-size: 0.875rem; }
.site-footer a { color: var(--dads-gray-800); text-decoration: underline; text-underline-offset: 0.1875rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.skip-link { color: var(--ink); border: 1px solid currentcolor; border-radius: 0.5rem; }

/* Surfaces */
.card, .finding, details.faq, .steps li, .count-box, .news-day, .news-item, .news-empty, .news-cta, .map-counts > li { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; background: #fff; }
.card { padding: 24px; }
.notice { border-left: 4px solid var(--dads-light-blue-900); background: var(--dads-light-blue-50); border-radius: 8px; padding: 16px; color: var(--ink); }
.notice-warn { border-left-color: var(--dads-orange-900); background: var(--dads-orange-50); }
.notice-danger { border-left-color: var(--dads-red-900); background: var(--dads-red-50); }
.ai-block { border-left: 4px solid var(--dads-purple-800); background: var(--dads-purple-50); border-radius: 8px; }
.section-alt { background: var(--dads-gray-50); border-color: var(--line); }
.danger-zone { border-color: var(--dads-red-900); }
.hero { background: linear-gradient(180deg, var(--dads-light-blue-50) 0%, #fff 100%); }
details.faq summary, details.more > summary, .finding details > summary, .card > details > summary { display: list-item; min-height: 2.75rem; padding-block: 0.5rem; color: var(--dads-light-blue-900); font-weight: 700; }
details.faq summary { color: var(--ink); }
details.faq summary:hover, details.more > summary:hover, .card > details > summary:hover { text-decoration: underline; }
.news-cta, .source-box { background: var(--dads-light-blue-50); }
.steps li::before, .step-num { background: var(--dads-light-blue-900); }

/* Badges and chips: white text keeps >= 4.5:1 on every DADS colour below. */
.badge { font-size: 0.875rem; line-height: 1.6; padding: 0 8px; }
.badge-ai, body.home .badge-ai { background: var(--dads-purple-800); }
.badge-ok { background: var(--dads-green-800); }
.badge-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.chip { font-size: 0.875rem; }
.chip-wait { background: var(--dads-orange-50); color: var(--dads-orange-900); }
.chip-ok { background: var(--dads-green-50); color: var(--dads-green-800); }
.grade-badge-a, .grade-scale .scale-chip.grade-badge-a { background: var(--dads-green-800); }
.grade-badge-b, .grade-scale .scale-chip.grade-badge-b { background: var(--dads-light-blue-900); }
.grade-badge-c, .grade-scale .scale-chip.grade-badge-c { background: var(--dads-light-blue-1000); }
.grade-badge-d, .grade-scale .scale-chip.grade-badge-d { background: var(--dads-orange-900); }
.grade-badge-e, .grade-scale .scale-chip.grade-badge-e { background: var(--dads-red-900); }
.grade-badge-f, .grade-scale .scale-chip.grade-badge-f { background: var(--dads-red-1000); }
.grade-scale .scale-chip { width: 24px; height: 24px; font-size: 0.875rem; }
.grade-scale .scale-current { background: var(--dads-gray-50); }
.grade-scale .scale-current:has(.grade-badge-a) { border-left-color: var(--dads-green-800); }
.grade-scale .scale-current:has(.grade-badge-b) { border-left-color: var(--dads-light-blue-900); }
.grade-scale .scale-current:has(.grade-badge-c) { border-left-color: var(--dads-light-blue-1000); }
.grade-scale .scale-current:has(.grade-badge-d) { border-left-color: var(--dads-orange-900); }
.grade-scale .scale-current:has(.grade-badge-e) { border-left-color: var(--dads-red-900); }
.grade-scale .scale-current:has(.grade-badge-f) { border-left-color: var(--dads-red-1000); }
.grade-scale .scale-observed { border-left-color: var(--dads-gray-600); }
.grade-scale .scale-observed .scale-mark { color: var(--dads-gray-600); }
.status-pending, .status-queued, .status-running, .status-checking { color: var(--dads-orange-900); }

/* Layout: gutter = 2 x body text (32px) on desktop */
.grid, body.home .dual-grid, body.home .report-layout { gap: 32px; }
@media (max-width: 767.98px) {
  .grid, body.home .dual-grid, body.home .report-layout { gap: 16px; }
  .card { padding: 16px; }
}

/* Top page (home.css / brand.css / reference.css) */
/* Hero: copy and picture sit side by side while both fit and stack otherwise, so no extra breakpoint is needed. */
.exact-home .reference-hero-main { display: flex; flex-wrap: wrap; align-items: center; min-height: 0; }
.exact-home .hero-copy { flex: 1 1 32rem; width: auto; max-width: none; padding: 64px 0 24px; }
.exact-home .hero-second { white-space: normal; }
.exact-home .reference-visual { position: relative; flex: 1.4 1 26rem; width: auto; max-width: 48rem; top: auto; right: auto; margin: 0 auto; opacity: 1; }
.exact-home .reference-visual::after { display: none; }
.exact-home .quick-links, .friendly-home .quick-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.exact-home .site-header .nav, .site-header .nav { gap: 4px 16px; justify-content: flex-end; }
@media (max-width: 767.98px) { .exact-home .hero-copy { padding-top: 32px; } }
body.exact-home .hero h1, body.friendly-home .hero h1 { color: var(--ink); font-family: var(--font); }
.exact-home .hero h1 em, .friendly-home .hero h1 span, .exact-home .hero h1 .hero-second em { color: var(--dads-light-blue-900); }
.exact-home .hero h1 .hero-second { color: var(--ink); }
body.exact-home .hero .eyebrow, body.friendly-home .hero .eyebrow { color: var(--dads-light-blue-900); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; }
.exact-home .hero .eyebrow::before, .exact-home .hero .eyebrow::after { background: var(--dads-light-blue-900); }
.exact-home .hero .btn, .friendly-home .hero .btn, .friendly-home .closing-cta .btn {
  min-width: 8.5rem; min-height: 3.5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 4px double transparent;
  background: var(--dads-light-blue-900); color: #fff; font-size: 1rem; font-weight: 700; box-shadow: none; justify-content: center;
}
.exact-home .hero .btn > span, .friendly-home .btn > span { margin-left: 1rem; font-size: 1.25rem; font-weight: 400; }
.exact-home .hero .reference-secondary, .friendly-home .hero .btn-secondary, .exact-home .hero .btn-secondary#home-retry { background: #fff; color: var(--dads-light-blue-900); border: 1px solid currentcolor; font-size: 1rem; }
.exact-home .hero .btn:active, .friendly-home .hero .btn:active, .friendly-home .closing-cta .btn:active { background: var(--dads-light-blue-1200); color: #fff; text-decoration: underline; }
@media (hover: hover) {
  .exact-home .hero .btn:hover, .friendly-home .hero .btn:hover, .friendly-home .closing-cta .btn:hover { background: var(--dads-light-blue-1000); color: #fff; text-decoration: underline; }
  .exact-home .hero .reference-secondary:hover, .friendly-home .hero .btn-secondary:hover { background: var(--dads-light-blue-200); color: var(--dads-light-blue-1000); }
}
.exact-home [data-cta][aria-disabled="true"], .friendly-home [data-cta][aria-disabled="true"], body.home .cta .btn[aria-disabled="true"], body.home .dual-cta .btn[aria-disabled="true"] {
  background: var(--dads-gray-300); color: var(--dads-gray-50); border-color: transparent; opacity: 1; box-shadow: none; text-decoration: none; }
.exact-home .hero-pricing p, .friendly-home .hero-pricing p { color: var(--dads-gray-600); font-size: 0.875rem; }
.exact-home .hero-pricing strong, .friendly-home .hero-pricing strong { color: var(--ink); font-size: 0.875rem; font-weight: 700; }
.exact-home .hero-pricing .paid-note, .friendly-home .hero-pricing .paid-note { font-size: 0.875rem; }
.friendly-home .hero-pricing a { color: var(--dads-blue-1000); }
.exact-home .hero-scope, .exact-home .hero-status, .friendly-home .hero-scope, .friendly-home .hero-status { color: var(--dads-gray-600); font-size: 0.875rem; line-height: 1.7; }
.friendly-home .hero-status[data-state="error"] { color: var(--dads-orange-900); }
.exact-home .quick-links a, .friendly-home .quick-links a { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: none; color: var(--ink); }
.exact-home .quick-links strong, .friendly-home .quick-links strong { color: var(--ink); font-size: 1.125rem; }
.exact-home .quick-links small, .friendly-home .quick-links small { color: var(--dads-gray-600); font-size: 0.875rem; line-height: 1.7; }
.exact-home .quick-links b, .friendly-home .quick-links b { color: var(--dads-light-blue-900); }
.exact-home .quick-links img, .friendly-home .quick-links img { background: var(--dads-light-blue-50); }
@media (hover: hover) {
  .exact-home .quick-links a:hover, .friendly-home .quick-links a:hover { border-color: var(--dads-light-blue-900); background: var(--dads-light-blue-50); }
  .friendly-home .quick-links a:hover strong { text-decoration: underline; text-underline-offset: 0.1875rem; }
}
.friendly-home .section-label { color: var(--dads-light-blue-900); font-size: 0.875rem; font-weight: 700; }
.friendly-home h2, body.home .feature h3, body.home .flow-visual h3, body.home .flow-visual h4, body.home .dual-card h3 { color: var(--ink); }
.friendly-home .report-sample { border-color: var(--line); border-radius: var(--radius); box-shadow: none; }
.friendly-home #why { background: var(--dads-light-blue-50); }
.friendly-home #why p, .friendly-home .closing-cta p { color: var(--ink); }
.friendly-home .flow-visual > li, body.home .flow-visual > li { border-color: var(--line); border-radius: var(--radius); box-shadow: none; }
.friendly-home .fv-mark, body.home .fv-mark { background: var(--dads-light-blue-100); color: var(--dads-light-blue-1000); }
.friendly-home .fv-ai, body.home .fv-ai { background: var(--dads-purple-50); color: var(--dads-purple-800); }
.friendly-home .fv-fix, body.home .fv-fix { background: var(--dads-green-50); color: var(--dads-green-800); }
body.home .fv-tags li { background: #fff; border-color: var(--line); color: var(--ink); }
body.home .flow-visual > li:not(:last-child)::after { color: var(--dads-light-blue-900); }
.friendly-home .scope-note { border-left: 4px solid var(--dads-light-blue-900); }
.friendly-home #ai { background: #fff; border-color: var(--line); }
.friendly-home #manage { background: var(--dads-gray-50); border-color: var(--line); }
.friendly-home .manage-grid li, body.home .manage-grid li { border: 1px solid var(--line); border-top: 4px solid var(--dads-light-blue-900); border-radius: var(--radius); background: #fff; }
body.home .manage-grid strong, body.home .price-steps strong, body.home .dual-why strong { color: var(--ink); }
.friendly-home .price-steps li, body.home .price-steps li { border-color: var(--line); border-radius: var(--radius); background: #fff; }
.friendly-home .price-steps li:first-child { background: var(--dads-light-blue-50); border-color: var(--dads-light-blue-900); }
.friendly-home .price-steps .amount, body.home .price-steps .amount { color: var(--dads-light-blue-1000); }
body.friendly-home .closing-cta { background: var(--dads-light-blue-50); border-top: 1px solid var(--line); }
body.home .dual-outside .dual-word { color: var(--dads-light-blue-900); }
body.home .dual-inside .dual-word { color: var(--dads-green-800); }
body.home .dual-outside .dual-tag .badge, body.home .flow-track-outside h3 .badge { background: var(--dads-light-blue-900); }
body.home .dual-inside .dual-tag .badge, body.home .flow-track-inside h3 .badge { background: var(--dads-green-800); }
body.home .flow-track { border-left-color: var(--dads-light-blue-900); }
body.home .flow-track-inside { border-left-color: var(--dads-green-800); }
body.home .dual-why { border-left: 4px solid var(--dads-light-blue-900); }
body.home .hero h1 { color: var(--ink); }
body.home .hero-facts { color: var(--dads-gray-600); }

/* News (news.css / actions.css) */
.news-eyebrow, .guide-intro .eyebrow { color: var(--dads-light-blue-900); font-size: 0.875rem; font-weight: 700; }
.news-wrap h1, .news-item h3, .guide-intro h1, .finder h2, .card-group h2, .guide-card h3, .other-section h2, .empty-state h2 { color: var(--ink); }
.action-preview { background: #fff; color: var(--ink); }
.action-preview .finder, .guide-card, .other-news, .empty-state, #error-message:not([hidden]) { border-color: var(--line); border-radius: var(--radius); }
.original-day { border-color: var(--line); border-radius: var(--radius); background: var(--dads-light-blue-50); }
.edition span { background: var(--dads-light-blue-100); color: var(--dads-light-blue-1000); }
.intro-copy, .edition, .scope-note, .filter-status p, .group-count, .card-target, .card-scope, .card-details, .other-section > p, .other-section h2 span, .original-day p, .empty-state p, .prototype-tag { color: var(--dads-gray-600); }
.card-scope, .intro-copy { color: var(--ink); }
.target-button { border-color: var(--line); color: var(--ink); font-size: 1rem; font-weight: 700; }
.target-button[aria-pressed="true"] { background: var(--dads-light-blue-900); border-color: var(--dads-light-blue-900); color: #fff; }
.target-button[aria-pressed="true"] .target-empty { color: var(--dads-light-blue-1000); background: #fff; }
.target-empty, .action-count.is-empty { color: var(--dads-gray-600); background: var(--dads-gray-50); font-size: 0.875rem; }
.action-button { border-color: var(--line); background: #fff; color: var(--ink); }
.action-button[data-action="check"], .action-button[data-action="know"] { background: #fff; }
.action-button[aria-pressed="true"] { border-color: var(--dads-light-blue-900); box-shadow: inset 0 0 0 1px var(--dads-light-blue-900); background: var(--dads-light-blue-50); }
.action-count { color: var(--dads-light-blue-900); }
@media (hover: hover) { .target-button:hover, .action-button:hover { border-color: var(--dads-light-blue-900); } }
.next-step { background: var(--dads-light-blue-50); border-left: 4px solid var(--dads-light-blue-900); color: var(--ink); }
.card-links a, .card-details .source-url, .original-day a, .other-news a, .reset-button, .tv-back { color: var(--dads-blue-1000); }
.card-details summary { color: var(--ink); }
.card-details dt, .version-list strong { color: var(--ink); }
.version-list li, .other-news li, .card-details { border-color: var(--dads-gray-100); }
.map-scroll { border-color: var(--line); }

/* Forms (DADS input text md: height 48, border 1px Gray-600, radius 8, padding 12/16) */
.field label, .map-filter label { font-weight: 700; color: var(--ink); }
.field .hint, .hint { font-size: 1rem; color: var(--dads-gray-600); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select, textarea, .map-filter input {
  min-height: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--dads-gray-600); border-radius: 0.5rem;
  background: #fff; color: var(--dads-gray-900); font-family: var(--font); font-size: 1rem; line-height: 1; letter-spacing: 0.02em;
}
textarea { line-height: 1.7; }
select { line-height: 1.7; padding-block: 0.5rem; }
::placeholder { color: #767676; opacity: 1; }
@media (hover: hover) { :is(input, select, textarea):not([readonly]):not(:disabled):hover { border-color: #000; } }
input[readonly] { border-style: dashed; background: var(--dads-gray-50); }
:is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) { border-color: var(--dads-red-800); }
:is(input, select, textarea):disabled { border-color: var(--dads-gray-300); background: var(--dads-gray-50); color: var(--dads-gray-420); }
.form-error { color: var(--dads-red-900); }
.form-ok { color: var(--dads-green-800); }
/* Checkbox: 24px box, the whole label is the 44px target. */
.checkbox { align-items: center; min-height: 2.75rem; cursor: pointer; }
.checkbox input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--dads-light-blue-900); }
.consent-box { border: 2px solid var(--dads-light-blue-900); border-radius: 0.5rem; background: var(--dads-light-blue-50); }
.consent-box:has(input:checked) { border-color: var(--dads-green-800); background: var(--dads-green-50); }
/* Tabs: 44px tall, 4px key-colour bar on the selected tab. */
.tabs { border-bottom: 1px solid var(--line); }
.tabs button { min-height: 2.75rem; padding: 0.5rem 1rem; color: var(--ink); font-weight: 700; border-bottom: 4px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--dads-light-blue-900); border-bottom-color: var(--dads-light-blue-900); }
@media (hover: hover) { .tabs button:hover { text-decoration: underline; text-underline-offset: 0.1875rem; } }
.tv-option { border: 1px solid var(--line); border-radius: 0.5rem; min-height: 3rem; }
.tv-option-sub { font-size: 1rem; color: var(--dads-gray-600); }
@media (hover: hover) { .tv-option:hover { border-color: var(--dads-light-blue-900); background: var(--dads-light-blue-50); } }
.tv-limit, .instructions, .facts { background: var(--dads-gray-50); }
.tv-steps > li::before { background: var(--dads-light-blue-100); color: var(--dads-light-blue-1000); }
.section-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); color: var(--dads-blue-1000); font-size: 1rem; }

/* Tables: header row in Gray-600 bold. On phones a cell wraps but never below 5em (main's overflow-wrap: anywhere
   let columns shrink to one character); wider tables scroll sideways inside .table-wrap. */
th { color: var(--dads-gray-600); font-weight: 700; font-size: 0.875rem; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
@media (max-width: 767.98px) {
  th, td { padding: 8px 12px; }
  .table-wrap th, .table-wrap td:has(.btn, .badge, .status) { white-space: nowrap; }
  .table-wrap td { min-width: 5em; overflow-wrap: normal; }
  .table-wrap td.mono { min-width: 12em; overflow-wrap: anywhere; }
  .table-wrap { border-inline: 1px solid var(--dads-gray-100); }
}

/* My page and result views */
.page-head .status { background: var(--dads-gray-50); }
.flow-steps .is-current::before, body:has(#sec-verify:not([hidden])) .fs-verify::before, body:has(#sec-scan:not([hidden])) .fs-consent::before { background: var(--dads-light-blue-900); border-color: var(--dads-light-blue-900); }
.flow-steps li::before { border-color: var(--dads-gray-420); }
.danger-zone details > summary { color: var(--dads-red-900); }
.report-actions { border-color: var(--line); }
.test-banner { background: var(--dads-orange-50); border-bottom-color: var(--dads-orange-900); color: var(--ink); }
progress { accent-color: var(--dads-light-blue-900); }