/* Shared monochrome surface for the published cKas tools. */
body[data-theme] {
  font-family: Inter, "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: .005em;
  line-height: 1.65;
}
html[data-theme="light"],
body[data-theme="light"] {
  --page-bg: #fff !important;
  --ink: #111 !important;
  --muted: #626262 !important;
  --line: #dedede !important;
  --surface: #fff !important;
  --soft: #f5f5f5 !important;
  --blue: #111 !important;
  --blue-dark: #111 !important;
  --blue-soft: #f5f5f5 !important;
  --orange: #111 !important;
  --orange-dark: #111 !important;
  --aqua: #444 !important;
  --ckas-accent: #111 !important;
  --theme-color-base: #111 !important;
  color: #111 !important;
  background: #fff !important;
}
html[data-theme="dark"],
body[data-theme="dark"] {
  --page-bg: #0b0b0b !important;
  --ink: #f6f6f6 !important;
  --muted: #aaa !important;
  --line: #353535 !important;
  --surface: #121212 !important;
  --soft: #1d1d1d !important;
  --blue: #f6f6f6 !important;
  --blue-dark: #f6f6f6 !important;
  --blue-soft: #1d1d1d !important;
  --orange: #f6f6f6 !important;
  --orange-dark: #f6f6f6 !important;
  --aqua: #bcbcbc !important;
  --ckas-accent: #f6f6f6 !important;
  --theme-color-base: #f6f6f6 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}
body[data-theme]::before { background: var(--page-bg) !important; }
body[data-theme] :is(.fitness-app, .lineup-app, .sg-main, .analyze-main, .nippo-landing-main) {
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.app-header, .sg-header, .analyze-header, .lineup-header, .nippo-landing-header) {
  border-color: var(--line) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme] .ckas-app-header {
  border-color: var(--line) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme] .ckas-app-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--page-bg) 95%, transparent) !important;
  backdrop-filter: blur(16px);
}
html body[data-theme] .ckas-app-title { color: var(--ink) !important; letter-spacing: -.02em; }
html body[data-theme] :is(.ckas-app-back, .ckas-app-theme) { color: var(--ink) !important; }
html body[data-theme] .ckas-app-theme { border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface) !important; }
html body[data-theme] .ckas-header-button {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme] .ckas-color-control { display: none !important; }
body[data-theme] :is(.ckas-app-brand img, .brand-mark, .ckas-brand-mark) { filter: grayscale(1); box-shadow: none !important; }
body[data-theme="dark"] :is(.ckas-app-brand img, .brand-mark, .ckas-brand-mark) { filter: grayscale(1) invert(1); }
body[data-theme] #color-theme-toggle,
body[data-theme] #color-theme-menu { display: none !important; }

body[data-theme] :is(h1, h2, h3, .header-copy h1, .sg-brand, .sg-brand strong, .analyze-brand, .analyze-brand strong, .lineup-header strong, .nippo-landing-header strong) {
  color: var(--ink) !important;
  text-shadow: none !important;
}
body[data-theme] :is(.eyebrow, .nippo-label, .sg-guide-label, .lineup-header p, .section-label) { color: var(--muted) !important; }
body[data-theme] :is(.fitness-page-intro p, .intro-note, .analyze-note, .nippo-hero > p:not(.nippo-label), .lineup-hero p:last-child) { color: var(--muted) !important; }
body[data-theme] :is(.theme-toggle, .language-toggle, .nippo-theme-toggle, .icon-button, .refresh-button, .home-link) {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme] header :is(.ckas-back-button, .back-link span) {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.ckas-app-brand, .ckas-app-brand strong) { color: var(--ink) !important; text-shadow: none !important; }

body[data-theme] :is(.profile-card, .panel, .encouragement, .camera-panel, .metric-card, .recording-card, .editor-card, .action-card, .content-guide, .tool-section, .points-section, .timeline-panel, .nippo-hero, .nippo-content) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.money-app, .baby-app) { width: min(1100px, 100%); max-width: none !important; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
body[data-theme] :is(.money-intro, .baby-intro) { padding-block: clamp(28px, 5vw, 56px) 28px; }
body[data-theme] :is(.money-summary, .money-card, .baby-summary, .baby-card) { border-radius: 16px; }
body[data-theme] :is(.money-card input, .money-card select, .baby-card input, .baby-card select, .month-select input) { min-height: 52px; font-size: 17px; }
body[data-theme] :is(.money-card form > label, .baby-card form > label, .month-select) { gap: 8px; }
body[data-theme] .back-to-top { border: 1px solid var(--ink) !important; color: var(--page-bg) !important; background: var(--ink) !important; box-shadow: 0 5px 18px rgba(0,0,0,.18) !important; }
body[data-theme] :is(.result-card, .tools-lock-note, .analyze-error, .recordings-empty) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.measure-row, .reference-row, .result-grid article, .result-message, .recording-actions, .recording-card dl, .guide-grid section, .sg-guide-grid section, .lineup-row, .flow-steps li, .nippo-flow li) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.measure-score, .reference-label, .grade-badge, .local-badge, .phase-label, .status-pill, .field-position) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
  box-shadow: none !important;
}
html body[data-theme] .measure-score { border: 1px solid var(--line) !important; color: var(--ink) !important; background: var(--soft) !important; }
body[data-theme] :is(.measure-number, .panel-heading h2 svg, .result-grid strong, .result-message svg, .encouragement svg, .field-position span, .sg-guide-links a, .guide-links a, .nippo-links a) { color: var(--ink) !important; }
body[data-theme] :is(.profile-card input, .profile-card select, .measure-input input, .game-grid input, .wide-label textarea, .lineup-row input, .lineup-row select, .camera-settings select, .recording-picker select, .import-fps-field select, .tool-section input, .tool-section select, .tool-section textarea) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.profile-card input[type="radio"], input[type="checkbox"]) { accent-color: var(--ink) !important; }
body[data-theme] :is(.action-row button, .small-button, .action-card button, .row-actions button, .import-video-button, .import-file-button, .import-fps-field, .capture-choice-button, .camera-off-button, .stop-button, .track-mode-button, .nippo-secondary) {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.action-row .primary-button, .primary-button, .record-button, .dialog-ok, .nippo-primary, .recording-actions .analyze-link) {
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  color: var(--page-bg) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
}
html body[data-theme] :is(.capture-choice-button, .primary-button, .record-button, .recording-actions .analyze-link) {
  border-color: var(--ink) !important;
  color: var(--page-bg) !important;
  background: var(--ink) !important;
}
body[data-theme] :is(.flow-steps li.is-current, .bottom-nav, .camera-controls) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
body[data-theme] :is(.bottom-nav a, .bottom-nav button, .bottom-nav svg, .flow-steps li.is-current span) { color: var(--ink) !important; }
body[data-theme] .flow-steps li.is-current span { background: var(--soft) !important; }
body[data-theme] :is(.lineup-hero, .camera-frame, .canvas-shell) {
  background: var(--soft) !important;
  box-shadow: none !important;
}
body[data-theme] .lineup-hero { border: 1px solid var(--line); color: var(--ink) !important; }
html body[data-theme] .lineup-hero { background: var(--surface) !important; }
body[data-theme] :is(.game-grid label, .wide-label, .lineup-row label, .section-heading div p) { color: var(--muted) !important; }
body[data-theme] .section-heading > span { border-radius: 8px !important; color: var(--page-bg) !important; background: var(--ink) !important; }
body[data-theme] .lineup-hero .hero-ball { border: 1px solid var(--line); box-shadow: none !important; }
body[data-theme] .lineup-hero .hero-ball::before,
body[data-theme] .lineup-hero .hero-ball::after { border-color: var(--muted) !important; border-top-color: transparent !important; border-bottom-color: transparent !important; }
body[data-theme] :is(.camera-empty, .canvas-empty, .camera-empty p, .canvas-empty p) { color: var(--ink) !important; }
body[data-theme] :is(.empty-ball, .canvas-empty > span, .status-dot) { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; box-shadow: none !important; }
body[data-theme] :is(.nippo-local-note, .nippo-secondary, .nippo-flow li > span) { color: var(--ink) !important; background: var(--soft) !important; }
body[data-theme] :is(.nippo-hero, .nippo-content, .content-guide, .sg-guide) p { color: var(--muted) !important; }
body[data-theme] :is(.content-guide, .nippo-content, .sg-guide) a:not(.nippo-primary) { color: var(--ink) !important; }
body[data-theme] button:focus-visible,
body[data-theme] a:focus-visible,
body[data-theme] input:focus-visible,
body[data-theme] select:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }

/* Color still carries safety meaning while recording or reporting errors. */
body[data-theme] .recording-indicator span { background: #d22 !important; }

/* Daily report workflow uses older, highly specific step colors. */
html body[data-theme][data-step] {
  color: var(--ink) !important;
  background: var(--page-bg) !important;
}
html body[data-theme][data-step] :is(.step-top-brand-bar, .step-bar, .step-context-bar, .page) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step] :is(.card, .phase-prompt, .loading-phase-card, .loading-settings-panel, .delivery-card, .delivery-stop-card, .return-phase-panel, .inspection-focus-area, .inspection-list) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step][data-step] .page > .card,
html body[data-theme][data-step][data-step] :is(#pickupList, #deliveryList) > .card {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html body.step1-basic-page[data-theme][data-step="1"] .page > :is(.card, .phase-prompt),
html body[data-theme][data-step][data-step] .page > .card:not(.nippo-dark-surface-exempt),
html body[data-theme][data-step][data-step] :is(#pickupList, #deliveryList) > .card:not(.nippo-dark-surface-exempt) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step][data-step] .page :is(.date-select-area, .date-main-row, .bin-select, .bin-item, .bin-item-special, .phase-actions, .driver-summary-panel, .driver-editor-panel) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step] :is(.btn-secondary, .btn-icon-sm, .date-picker-btn, .phase-menu-btn, .small-button, .row-action-button) {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step][data-step] .page :is(.btn-secondary, .date-picker-btn) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
}
html body[data-theme][data-step] :is(.btn-primary, #nextBtn, .phase-next-button):not(:disabled) {
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  color: var(--page-bg) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step][data-step] .page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
}
html body[data-theme][data-step] :is(.step-label, .card-section-header, .driver-summary-item-label, .step-context-label, .info-display-box) {
  color: var(--ink) !important;
}
html body[data-theme][data-step] .page :is(.card-section-header, .phase-prompt, .driver-summary-item-label, .bin-item, .bin-select) { color: var(--ink) !important; }
html body[data-theme][data-step] .page .card-section-header::before { background: var(--ink) !important; }
html body[data-theme][data-step] .page :is(.phase-prompt-title, .phase-prompt-title span, .card h2, .required-badge) {
  color: var(--ink) !important;
}
html body[data-theme][data-step] .page .phase-prompt-title::before { background: var(--ink) !important; }
html body[data-theme][data-step] .required-badge { border-color: var(--line) !important; background: var(--soft) !important; }
html body[data-theme][data-step] .step-bar .step-label { color: var(--muted) !important; }
html body[data-theme][data-step] .step-bar .step.active .step-label { color: var(--ink) !important; }
html body[data-theme][data-step] .step-bar .step::after { border-color: var(--line) !important; color: var(--ink) !important; background: var(--soft) !important; }
html body[data-theme][data-step][data-step] .step-top-brand-bar .step-app-identity strong,
html body[data-theme][data-step][data-step] .page .card h2 { color: var(--ink) !important; }
html body[data-theme][data-step][data-step] .page .card h2::before,
html body[data-theme][data-step][data-step] .page .phase-prompt .phase-prompt-title::before { background: var(--ink) !important; }
html body[data-theme][data-step][data-step] .step-bar .step.active .step-label { color: var(--ink) !important; }
html body[data-theme][data-step][data-step] .step-bar .step.active .step-line {
  border-color: var(--ink) !important;
  color: var(--page-bg) !important;
  background: var(--ink) !important;
}
html body[data-theme][data-step][data-step] .step-top-brand-bar .ckas-back-button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--page-bg) !important; box-shadow: none !important; }
html body[data-theme][data-step][data-step] .page .date-main-text { border-color: var(--line) !important; color: var(--ink) !important; background: var(--soft) !important; }
html body[data-theme][data-step] :is(.step-line, .step-number) { border-color: var(--line) !important; background: var(--soft) !important; }
html body[data-theme][data-step] :is(.phase-actions, #nextBtn):disabled { border-color: var(--line) !important; color: var(--muted) !important; background: var(--soft) !important; }

/* The safety gate is outside the step container and has its own legacy palette. */
html body[data-theme] :is(.global-safety-reminder, .global-safety-reminder-panel) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--page-bg) !important;
}
html body[data-theme] :is(.global-safety-reminder, .global-safety-reminder-panel)::before {
  background: var(--ink) !important;
}
html body[data-theme] .global-safety-reminder-content-card,
html body[data-theme] :is(.global-safety-reminder-visual, .global-safety-reminder-copy, .global-safety-reminder-panel .safety-visual-picture) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html body[data-theme] :is(.global-safety-reminder h2, .global-safety-reminder-message, .global-safety-reminder-confirm, .global-safety-reminder-kicker, .global-safety-reminder-panel .safety-visual-picture span) {
  color: var(--ink) !important;
}
html body[data-theme] .global-safety-reminder-panel .safety-visual-headline :is(strong, span) {
  color: #bd2424 !important;
}
html body[data-theme] #globalSafetyReminderConfirm {
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  color: var(--page-bg) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
}
html body[data-theme] :is(.global-safety-reminder-back, .global-safety-reminder-language, .global-safety-reminder-theme) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

/* Both theme glyphs are present from first paint; CSS selects the action icon. */
html[data-theme] :is(.theme-toggle, .nippo-theme-toggle) [data-theme-icon] { display: none; }
html[data-theme="light"] :is(.theme-toggle, .nippo-theme-toggle) [data-theme-icon="dark"],
html[data-theme="dark"] :is(.theme-toggle, .nippo-theme-toggle) [data-theme-icon="light"] { display: block; }