/* A separate appearance layer: existing light styles remain the default.
   Dark rules are screen-only so worksheets and articles retain light print output. */
/* The original logo is the no-script and print default. Only one variant is exposed. */
.theme-logo-dark{display:none}
.theme-bar{border-top:1px solid var(--line,#d1dbe1);background:var(--paper,#fff);color:var(--text,#273d4c)}
.theme-controls{max-width:76rem;margin-inline:auto;padding:4px 24px;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:4px 8px;font:500 .8125rem/1.4 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif}
.theme-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:5px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.theme-controls button[hidden]{display:none}
.theme-controls .theme-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.theme-controls button:focus-visible{outline:3px solid var(--focus,#0569a7);outline-offset:2px}
.theme-controls .theme-system{text-decoration:underline;text-underline-offset:.2em}
.theme-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(hover:hover){.theme-controls button:hover{background:var(--soft,#f2f5f7);border-color:var(--line,#d1dbe1)}}
.theme-controls button:active{background:var(--soft,#f2f5f7);border-color:currentColor}
@media(max-width:560px){.theme-controls{padding-inline:12px}}

@media screen{
  html[data-theme="dark"]{
    color-scheme:dark;
    --paper:#101b26;--soft:#1a2b3a;--ink:#e9edf0;--text:#d6e0e7;
    --muted:#adbdc9;--line:#405568;--accent:#dec283;--gold:#dec283;
    --focus:#f0ce86;--danger:#ffa6a1;
    --theme-raised:#172634;--theme-hover:#243c50;--theme-link:#a8d5ed;
    --theme-action:#c7dce8;--theme-action-text:#112737;
    --theme-warm:#322c22;--theme-input:#142330;--theme-control-border:#7893a7;
    background:var(--paper);color:var(--text);
  }
  /* Mina has its own local variables in mina.css; keep its quieter teal identity. */
  html[data-theme="dark"] .mina-page{
    --paper:#101f23;--soft:#1b3035;--ink:#e6eeec;--text:#d4e2e1;
    --muted:#abc1bf;--line:#405e62;--accent:#9fd2cc;--gold:#d5c594;
    --focus:#c8dfaa;--danger:#ffa6a1;
    --theme-raised:#17292e;--theme-hover:#28474b;--theme-link:#a3d9d2;
    --theme-action:#acd5cf;--theme-action-text:#102c30;
    --theme-warm:#302e25;--theme-input:#12262b;--theme-control-border:#789d9a;
  }
  html[data-theme="dark"] body{background:var(--paper);color:var(--text)}
  html[data-theme="dark"] :is(body>header,.theme-bar){background:var(--paper);color:var(--text);border-color:var(--line)}
  html[data-theme="dark"] :is(h1,h2,h3,h4){color:var(--ink)}
  html[data-theme="dark"] :is(.archive-main,.archive-footer) a{color:var(--theme-link)}
  html[data-theme="dark"] :is(a.context-link,.profile-detail-link,.inline-profile-link,.concept-posts a,.reading-list a,.resource-actions a,.worksheet>a){color:var(--theme-link)}
  html[data-theme="dark"] :is(.skip,.archive-skip){background:var(--theme-raised);color:var(--ink)}
  html[data-theme="dark"] :is(a,button,input,textarea,select,summary):focus-visible,
  html[data-theme="dark"] .learning-page h2[tabindex="-1"]:focus{outline-color:var(--focus)}

  /* Distinct surfaces, rather than inverting the whole page or altering imagery. */
  html[data-theme="dark"] :is(.navigation-line,.work-title,.company-background,.contact-background,
    .prototype-banner,.service,.flow-number,.person-profile,.observation-pair,.case-result,.learning-transfer,
    .editorial-reasoning,.editorial-check,.archive-learning-entry,.concept-context,
    .case-diagram,.sample-card,.privacy-note-brief,.privacy-at-entry,.brief-output,.save-reopen,
    .brief-row.brief-action,.worked-example,.concept-first .lesson-example,.concept-first .practice-box){
    background:var(--soft);color:var(--text);border-color:var(--line);
  }
  html[data-theme="dark"] :is(.company-background .section-title h2,.contact-background .section-title h2,
    .mina-page .faq-section,.inquiry-columns .form-wrap,.flow-nodes li,.quantity-branches li,
    .concept-first .diagram-support>div,.example-grid details){background:var(--theme-raised);color:var(--text);border-color:var(--line)}
  html[data-theme="dark"] :is(.quantity-source,.concept-first .diagram-result){background:var(--theme-hover)!important;color:var(--ink);border-color:var(--line)}
  html[data-theme="dark"] :is(.flow-return,.learning-safeguard,.concept-first .lesson-calculation,
    .guardrail,.notice,#legacy-reported-group,.archive-review,.form-notice){background:var(--theme-warm);color:var(--text);border-color:var(--gold)}
  html[data-theme="dark"] .error-summary{background:#39252c;color:var(--text);border-color:var(--danger)}

  /* --ink is light text in dark mode, so ink-backed controls get their own pair. */
  html[data-theme="dark"] :is(.primary,.sia-lead .text-link:first-of-type,
    .home-start-actions a[href*="learn"],.step-nav a[aria-current="step"],.mina-page :where(.navigation-line nav)>a:last-child){
    background:var(--theme-action);color:var(--theme-action-text);border-color:var(--theme-action);
  }
  html[data-theme="dark"] .form-steps li[aria-current]>span{background:var(--theme-action);color:var(--theme-action-text)}
  html[data-theme="dark"] :is(.secondary,.menu-button,.home-start-actions a,.mobile-case-controls select,
    .mobile-case-controls button,.concept-first .mobile-lesson-choice select,input,textarea,.step-panel select){
    background:var(--theme-input);color:var(--text);border-color:var(--theme-control-border);
  }
  html[data-theme="dark"] .home-start-actions a[href*="learn"]{background:var(--theme-action);color:var(--theme-action-text);border-color:var(--theme-action)}
  html[data-theme="dark"] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
  html[data-theme="dark"] :is(input,textarea,select)[aria-invalid="true"]{border-color:var(--danger)}
  /* Desktop lesson controls are a transparent toolbar; only mobile uses a padded panel. */
  @media(max-width:760px){html[data-theme="dark"] .learning-page[data-case-enhanced="true"] .mobile-case-controls{background:var(--soft);border-color:var(--line)}}
  html[data-theme="dark"] :is(.menu-button[aria-expanded="true"],.mobile-case-controls button[aria-pressed="true"]){background:var(--theme-hover);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
  html[data-theme="dark"] .button:disabled{background:var(--soft);color:var(--muted);border-color:var(--line)}
  html[data-theme="dark"] :is(.field-tag,.field-tag.required){background:var(--soft);color:var(--muted)}
  @media(hover:hover){
    html[data-theme="dark"] :is(.secondary,.menu-button:not(:disabled),.home-start-actions a,.mobile-case-controls button:not(:disabled),.theme-controls button):hover{background:var(--theme-hover);color:var(--ink);border-color:var(--accent)}
    html[data-theme="dark"] :is(.primary:not(:disabled),.home-start-actions a[href*="learn"]):hover{background:var(--ink);color:var(--theme-action-text);border-color:var(--ink)}
  }
  html[data-theme="dark"] :is(.button.primary:not(:disabled),.home-start-actions a[href*="learn"]):active{background:var(--theme-action);color:var(--theme-action-text);border-color:var(--theme-action)}
  html[data-theme="dark"] :is(.button.secondary:not(:disabled),.menu-button:not(:disabled),.mobile-case-controls button:not(:disabled),.home-start-actions a:not([href*="learn"])):active{background:var(--theme-hover);color:var(--ink);border-color:var(--accent)}

  /* Reading metadata and diagrams retain a clear hierarchy on dark surfaces. */
  html[data-theme="dark"] :is(.case-number,.situation-index a span,.reading-list small,.concept-posts-label,
    .case-diagram figcaption small,.effort-detail,.home-fact-line,.concept-first .lesson-intro-note,
    .concept-first .lesson-meta,.concept-first .source-hook-label,.concept-first .source-note,
    .concept-first .situation-index .index-group h3,.concept-first .lesson-group-context){color:var(--muted)}
  html[data-theme="dark"] :is(.flow-nodes li+li:before,.quantity-branches li:before,
    .concept-first .support-direction,.concept-first .math-sign){color:var(--theme-link)}
  html[data-theme="dark"] :is(.editorial-related,.situation-index a,.explanation,.learning-variation,.learning-depth,
    .reading-list li,.learning-tail,.selected-worksheet,.effort-rows>li,.representative,
    .representative .experience-note,.concept-context .concept-limit,.concept-first .lesson-exercise,
    .concept-first .lesson-disclosure,.concept-first .lesson-resources,.concept-first .lesson-pager,
    .concept-first .margin-equation li,.concept-first .actuals-table :is(th,td),.faqs details){border-color:var(--line)}
  html[data-theme="dark"] :is(.learning-case,.concept-first .learning-case,.editorial-post-related){border-color:var(--accent)}
  html[data-theme="dark"] .effort-bar{background:var(--theme-hover)}
  html[data-theme="dark"] .effort-report{background:#72adcf}
  html[data-theme="dark"] .effort-correction{background:#dec283}
  html[data-theme="dark"] .quantity-test{border-color:var(--gold)}
  html[data-theme="dark"] .engineering-rule span:first-child{background:var(--theme-hover);border-right-color:var(--accent)}
  html[data-theme="dark"] :is(.archive-header,.founder-section){background:var(--theme-raised);color:var(--text)}
  html[data-theme="dark"] .archive-header a{color:var(--ink)}
  html[data-theme="dark"] :is(.founder-name p,.founder-copy .boundary){color:var(--muted);border-color:var(--line)}
  /* Same geometry and gold, with dark-surface paint; never invert brand colors. */
  html[data-theme="dark"] .theme-logo-light{display:none}
  html[data-theme="dark"] .theme-logo-dark{display:inline-block}

  /* Consent choices receive the same emphasis. No theme rule changes their behavior. */
  html[data-theme="dark"] .analytics-choice{background:var(--theme-raised);color:var(--text);border-color:var(--line);box-shadow:0 4px 24px #0005}
  html[data-theme="dark"] .analytics-actions button{background:var(--theme-input);color:var(--text);border-color:var(--muted)}
  html[data-theme="dark"] :is(.analytics-actions a,.analytics-preferences:hover,.analytics-preferences:active){color:var(--theme-link)}
  @media(hover:hover){html[data-theme="dark"] .analytics-actions button:hover{background:var(--theme-hover);color:var(--ink);border-color:var(--accent)}}
  html[data-theme="dark"] .analytics-actions button:active{background:var(--theme-hover);color:var(--ink);border-color:var(--accent)}
  /* The cross-origin HubSpot form owns its colors. Keep its actual embed on a
     bounded light surface; surrounding guidance and fallback remain dark. */
  html[data-theme="dark"] .contact-page .hs-form-frame{background:#fff;color:#18252d;color-scheme:light;border-radius:4px;padding:16px}
  html[data-theme="dark"] .contact-page .hs-form-frame iframe{color-scheme:light}
}

/* Brief transition only while JS marks an explicit visitor change. */
@media screen and (prefers-reduced-motion:no-preference){
  html.theme-changing,html.theme-changing :is(body,header,footer,.theme-bar,.theme-controls button,
    .navigation-line,.work-title,.company-background,.contact-background,.person-profile,
    .case-diagram,.sample-card,.brief-output,.analytics-choice,.button){
    transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
  }
}
@media(prefers-reduced-motion:reduce){.theme-controls button{transition:none!important}}
@media print{
  .theme-logo-light{display:inline-block!important}
  .theme-logo-dark{display:none!important}
  html[data-theme="dark"]{color-scheme:light!important}
  .theme-bar,.theme-controls{display:none!important}
}