/* ─────────────────────────────
   CONTENT FRAME — BASE OVERRIDES
   Removes A5 page simulation,
   adapts to viewport width
───────────────────────────── */
.content-frame {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 40px;
  box-shadow: none !important;
  border: none !important;
  min-height: auto !important;
  background: var(--bg-card, #fff);
}

@media (max-width: 768px) {
  .content-frame {
    max-width: 100%;
    padding: 20px 24px;
  }
}

@media (max-width: 480px) {
  .content-frame {
    padding: 16px;
  }
}

/* PM content has smaller base font — bump on tablets */
@media (max-width: 768px) {
  .content-frame.domain-project-management {
    font-size: 11pt;
  }
}

/* ─────────────────────────────
   DARK MODE — PM CONTENT
   Overrides CSS custom properties
───────────────────────────── */
[data-theme="dark"] .content-frame.domain-project-management {
  --accent-deep:    #8ab4dc;
  --accent-accent:  #6a9ac4;
  --accent-mid:     #5a8ab8;
  --accent-soft:    #1e2a38;
  --accent-ghost:   #1a2430;
  --accent-border:  #2a4060;
  --coral-deep:     #e07a5c;
  --coral-accent:   #d4745a;
  --coral-soft:     #2a1f1c;
  --coral-border:   #5a3a30;
  --ink:            #d4d4d4;
  --ink-light:      #a0a0a0;
  --rule:           #3a3a3a;
  --page:           #1e1e1e;
  --grey-100:       #2a2a2a;
  --grey-200:       #333;
  --grey-300:       #666;
  color: #d4d4d4;
  background: #1e1e1e;
}

[data-theme="dark"] .content-frame.domain-project-management .unit-header {
  border-bottom-color: #4a6a8a;
}

[data-theme="dark"] .content-frame.domain-project-management .unit-number {
  color: #6a9ac4;
}

[data-theme="dark"] .content-frame.domain-project-management .unit-title {
  color: #8ab4dc;
}

[data-theme="dark"] .content-frame.domain-project-management .speaker-tag {
  border: none;
}

[data-theme="dark"] .content-frame.domain-project-management .persona-ren {
  background: #1e2e42;
  color: #8ab4dc;
}

[data-theme="dark"] .content-frame.domain-project-management .persona-saki {
  background: #2e1f1c;
  color: #e0916e;
}

[data-theme="dark"] .content-frame.domain-project-management .concept-box {
  background: #1a2430;
  border-color: #2a4060;
}

[data-theme="dark"] .content-frame.domain-project-management .concept-box-title {
  color: #8ab4dc;
}

[data-theme="dark"] .content-frame.domain-project-management .concept-num {
  background: #4a7ab0;
}

[data-theme="dark"] .content-frame.domain-project-management .concept-tip {
  background: #1e2a38;
  color: #6a9ac4;
}

[data-theme="dark"] .content-frame.domain-project-management .annotation {
  border-left-color: #2a4060;
  color: #a0a0a0;
}

[data-theme="dark"] .content-frame.domain-project-management .subplot-moment {
  border-left-color: #5a3a30;
}

[data-theme="dark"] .content-frame.domain-project-management .unit-footer {
  border-top-color: #3a3a3a;
  color: #666;
}

/* ─────────────────────────────
   DARK MODE — JAPANESE CONTENT
   Hardcoded color overrides
───────────────────────────── */
[data-theme="dark"] .content-frame.domain-japanese {
  color: #d4d4d4;
  background: #1e1e1e;
}

[data-theme="dark"] .content-frame.domain-japanese .unit-header {
  border-bottom-color: #555;
}

[data-theme="dark"] .content-frame.domain-japanese .phase-badge {
  background: #d4d4d4;
  color: #1a1a1a;
}

[data-theme="dark"] .content-frame.domain-japanese .unit-id {
  color: #999;
}

[data-theme="dark"] .content-frame.domain-japanese .pattern-label {
  color: #777;
}

[data-theme="dark"] .content-frame.domain-japanese .scene-jp {
  color: #e8e8e8;
}

[data-theme="dark"] .content-frame.domain-japanese .furi {
  color: #999;
}

[data-theme="dark"] .content-frame.domain-japanese .scene-en {
  color: #999;
}

[data-theme="dark"] .content-frame.domain-japanese .section-label {
  background: #d4d4d4;
  color: #1a1a1a;
}

[data-theme="dark"] .content-frame.domain-japanese .scene-setting {
  color: #aaa;
  border-left-color: #444;
}

[data-theme="dark"] .content-frame.domain-japanese .dialogue-text {
  color: #d4d4d4;
}

[data-theme="dark"] .content-frame.domain-japanese .dialogue-text.inner {
  color: #a0b8a0;
}

/* Speaker tags */
[data-theme="dark"] .content-frame.domain-japanese .spk-ken {
  background: #1a3040;
  color: #7ab8e0;
  border-color: #2a4a60;
}

[data-theme="dark"] .content-frame.domain-japanese .spk-usagi {
  background: #3a1a2a;
  color: #e890b0;
  border-color: #5a2a40;
}

[data-theme="dark"] .content-frame.domain-japanese .spk-tanaka {
  background: #2a1a40;
  color: #b090d8;
  border-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-japanese .spk-inner {
  background: #1a2a18;
  color: #90c080;
  border-color: #2a4020;
}

/* Divider */
[data-theme="dark"] .content-frame.domain-japanese .divider {
  border-top-color: #3a3a3a;
}

/* Translation */
[data-theme="dark"] .content-frame.domain-japanese .translation-header {
  color: #666;
}

[data-theme="dark"] .content-frame.domain-japanese .trans-speaker {
  color: #777;
}

[data-theme="dark"] .content-frame.domain-japanese .trans-text {
  color: #999;
}

/* Grammar box */
[data-theme="dark"] .content-frame.domain-japanese .grammar-box {
  background: #201a30;
  border-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-box-header {
  color: #b090d8;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-point-title {
  color: #c8a8f0;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-point-title .point-num {
  color: #9a7acc;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-body {
  color: #ccc;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-body ul li::before {
  color: #9a7acc;
}

[data-theme="dark"] .content-frame.domain-japanese .example-jp {
  background: #2a1a48;
  color: #d8c0f8;
}

[data-theme="dark"] .content-frame.domain-japanese .example-en {
  color: #999;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-note {
  color: #999;
  border-top-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-note strong {
  color: #b090d8;
}

[data-theme="dark"] .content-frame.domain-japanese .grammar-divider {
  border-top-color: #3a2a5a;
}

/* Footer */
[data-theme="dark"] .content-frame.domain-japanese .unit-footer {
  border-top-color: #3a3a3a;
}

[data-theme="dark"] .content-frame.domain-japanese .footer-series,
[data-theme="dark"] .content-frame.domain-japanese .footer-index {
  color: #555;
}

/* ─────────────────────────────
   DARK MODE — DESIGN THEORY CONTENT
   Overrides indigo/violet palette
───────────────────────────── */
[data-theme="dark"] .content-frame.domain-design-theory {
  --indigo-deep:    #b8a0e0;
  --indigo-accent:  #9a80d0;
  --indigo-mid:     #8070b0;
  --indigo-soft:    #2a2040;
  --indigo-ghost:   #1e1830;
  --indigo-border:  #3a2a5a;
  --ink:            #d4d4d4;
  --ink-light:      #a0a0a0;
  --rule:           #3a3a3a;
  --page:           #1e1e1e;
  --grey-100:       #2a2a2a;
  --grey-200:       #333;
  --grey-400:       #777;
  --grey-600:       #aaa;
  --persona-sable:  #3a3028;
  --persona-rafa:   #28303a;
  --persona-tomoko: #2a3a28;
  --persona-declan: #3a2830;
  --persona-priya:  #302838;
  --review-bg:      #2a2518;
  --review-border:  #4a3a20;
  --reference-bg:   #252220;
  --term-highlight:  #2a1e3a;
  color: #d4d4d4;
  background: #1e1e1e;
}

[data-theme="dark"] .content-frame.domain-design-theory .header {
  border-bottom-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-design-theory .header-left {
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .unit-number {
  color: #8070b0;
}

[data-theme="dark"] .content-frame.domain-design-theory .scene-title {
  color: #b8a0e0;
}

[data-theme="dark"] .content-frame.domain-design-theory .scene-subtitle {
  color: #a0a0a0;
}

[data-theme="dark"] .content-frame.domain-design-theory .persona-tag {
  border: none;
}

[data-theme="dark"] .content-frame.domain-design-theory .concept-box {
  background: #1e1830;
  border-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-design-theory .concept-box-heading {
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .example-pill {
  background: #2a2040;
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .term-card {
  background: #1e1e1e;
  border-color: #3a2a5a;
  border-left-color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .term-name {
  color: #b8a0e0;
}

[data-theme="dark"] .content-frame.domain-design-theory .term-divider {
  border-top-color: #3a2a5a;
}

[data-theme="dark"] .content-frame.domain-design-theory .term-breakdown-heading {
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .related-pill {
  background: #2a2040;
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .reference-material {
  background: #252220;
}

[data-theme="dark"] .content-frame.domain-design-theory .reference-label {
  color: #9a80d0;
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .content-frame.domain-design-theory .reference-content {
  color: #d4d4d4;
}

[data-theme="dark"] .content-frame.domain-design-theory .reference-content .speaker-label {
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .reference-content .highlight {
  background: #2a1e3a;
}

[data-theme="dark"] .content-frame.domain-design-theory .review-corner {
  background: #2a2518;
  border-color: #4a3a20;
}

[data-theme="dark"] .content-frame.domain-design-theory .review-heading {
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .review-scenario {
  border-bottom-color: #4a3a20;
}

[data-theme="dark"] .content-frame.domain-design-theory .review-number {
  background: #2a2040;
  color: #9a80d0;
}

[data-theme="dark"] .content-frame.domain-design-theory .footer {
  border-top-color: #3a3a3a;
  color: #555;
}

[data-theme="dark"] .content-frame.domain-design-theory .section-divider {
  border-top-color: #3a3a3a;
}

/* ─────────────────────────────
   UNIT COVER IMAGE
───────────────────────────── */
.unit-cover {
  max-width: 720px;
  margin: 0 auto 24px;
}

.unit-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}