/* AI reading mode, translation menu and online reader pages */
.ai-tools { display: flex; align-items: center; gap: var(--space-2, .5rem); margin-left: auto; }
.ai-tools-float { position: fixed; top: .75rem; right: .75rem; z-index: 60; }
.header-inner .ai-tools + .theme-toggle, .legal-header .ai-tools + * { margin-left: 0; }
.ai-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .75rem;
  border: 1px solid var(--line, #ddd2bf); border-radius: 999px; background: var(--surface, #fffdf8); color: var(--text, #1d2a25);
  font: 500 .875rem/1 var(--font-body, system-ui, sans-serif); cursor: pointer; white-space: nowrap;
}
.ai-btn:hover { border-color: var(--brand, #0f3b2e); }
.ai-btn:focus-visible, .ai-panel button:focus-visible, .ai-panel select:focus-visible, .ai-lang button:focus-visible, .ai-lang input:focus-visible { outline: 3px solid var(--accent-fill, #b8692a); outline-offset: 2px; }
.ai-switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--line, #ddd2bf); transition: background .2s; flex: none; }
.ai-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.ai-btn.on { background: var(--brand, #0f3b2e); color: var(--brand-ink, #fff); border-color: var(--brand, #0f3b2e); }
.ai-btn.on .ai-switch { background: var(--accent-fill, #b8692a); }
.ai-btn.on .ai-switch::after { transform: translateX(12px); }
[data-theme="dark"] .ai-btn.on { background: #e9c79f; color: #10231c; border-color: #e9c79f; }
@media (min-width: 1181px) {
  .header-inner { gap: var(--space-4, 1rem); }
  .main-nav ul { gap: var(--space-4, 1rem); }
  .header-inner .ai-lang-btn .ai-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-inner .ai-btn { padding: .4rem .6rem; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
  .header-inner .ai-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 760px) {
  .header-inner, .legal-header-inner, .rd-header .wrap { flex-wrap: wrap; row-gap: .45rem; }
  .header-inner { padding-bottom: .55rem; }
  .header-inner .ai-tools, .legal-header-inner .ai-tools, .rd-header .ai-tools { order: 5; flex: 1 0 100%; margin-left: 0; justify-content: flex-end; }
  .main-nav ul { top: 100%; }
  .ai-btn { min-height: 36px; }
}

/* Reading control bar */
.ai-panel {
  position: fixed; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  width: min(960px, calc(100% - 1.5rem)); padding: .7rem .9rem .55rem; border-radius: 16px;
  background: #0f3b2e; color: #f6f1e7; box-shadow: 0 14px 40px rgba(10, 30, 22, .35);
  font: 500 .875rem/1.3 var(--font-body, system-ui, sans-serif);
}
.ai-panel[hidden] { display: none; }
.ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ai-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.ai-seg button { min-height: 34px; padding: .3rem .9rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ai-seg button[aria-checked="true"] { background: #e9c79f; color: #10231c; }
.ai-ctrls { display: inline-flex; align-items: center; gap: .25rem; }
.ai-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ai-ic:hover { background: rgba(255,255,255,.12); }
.ai-play { width: 46px; height: 46px; background: #e9c79f; color: #10231c; }
.ai-play:hover { background: #f2d6b3; }
.ai-play .i-pause, .ai-play.is-playing .i-play { display: none; }
.ai-play.is-playing .i-pause { display: block; }
.ai-speed, .ai-more label { display: inline-flex; align-items: center; gap: .4rem; }
.ai-panel select { min-height: 34px; max-width: 15rem; padding: .2rem .4rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: #12473a; color: #f6f1e7; font: inherit; }
.ai-more summary { cursor: pointer; padding: .3rem .2rem; text-decoration: underline; text-underline-offset: 3px; }
.ai-more[open] label { margin-top: .4rem; flex-wrap: wrap; }
.ai-close { margin-left: auto; min-height: 34px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ai-close:hover { background: rgba(255,255,255,.12); }
.ai-status { margin: .45rem 0 0; color: #cfdcd4; font-size: .8125rem; min-height: 1.1em; }
html.ai-mode body { padding-bottom: 9rem; }
html.ai-mode main :is(p, li, h1, h2, h3, h4, blockquote, td, dd) { cursor: pointer; }
.ai-reading { background: rgba(233, 199, 159, .45) !important; box-shadow: 0 0 0 .35rem rgba(233, 199, 159, .45); border-radius: 4px; transition: background .2s; }
[data-theme="dark"] .ai-reading { background: rgba(233, 199, 159, .22) !important; box-shadow: 0 0 0 .35rem rgba(233, 199, 159, .22); }
@media (max-width: 640px) {
  .ai-panel { padding: .6rem .7rem .5rem; }
  .ai-row { gap: .5rem .6rem; }
  .ai-close { margin-left: 0; }
  .ai-more select { max-width: 100%; }
}

/* Language menu */
.ai-lang { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(10, 25, 20, .55); }
.ai-lang[hidden] { display: none; }
.ai-lang-box { width: min(560px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; border-radius: 16px; background: var(--surface, #fffdf8); color: var(--text, #1d2a25); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.ai-lang-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .6rem; font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; }
.ai-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.ai-x:hover { background: var(--surface-2, #efe7d8); }
.ai-lang-search { margin: 0 1.1rem; min-height: 44px; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--line, #ddd2bf); background: var(--bg, #f6f1e7); color: inherit; font: inherit; }
.ai-lang-note { margin: .5rem 1.1rem .4rem; font-size: .8125rem; color: var(--muted, #4f5d57); }
.ai-lang-list { list-style: none; margin: 0; padding: .3rem .6rem 1rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; }
.ai-lang-list button { width: 100%; min-height: 40px; padding: .4rem .6rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ai-lang-list button:hover { background: var(--surface-2, #efe7d8); }
.ai-lang-list button[aria-selected="true"] { background: var(--brand, #0f3b2e); color: var(--brand-ink, #fff); }
.ai-none { padding: .6rem; color: var(--muted, #4f5d57); }
.ai-toast { position: fixed; top: 5.2rem; left: 50%; transform: translateX(-50%); z-index: 75; max-width: calc(100% - 2rem); padding: .6rem 1rem; border-radius: 999px; background: #0f3b2e; color: #f6f1e7; font: 500 .875rem/1.35 var(--font-body, system-ui, sans-serif); box-shadow: 0 8px 24px rgba(0,0,0,.25); text-align: center; }
.ai-toast[hidden] { display: none; }

/* Online reader pages (/read/...) */
.rd-header { position: sticky; top: 0; z-index: 50; background: var(--bg, #f6f1e7); border-bottom: 1px solid var(--line, #ddd2bf); }
.rd-header .wrap { display: flex; align-items: center; gap: var(--space-4, 1rem); min-height: 68px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.rd-header .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.rd-header .ai-tools { margin-left: auto; }
.rd-back { font-size: .875rem; }
.reader { max-width: 46rem; margin: 0 auto; padding: var(--space-12, 3rem) var(--space-5, 1.25rem) var(--space-16, 4rem); }
.rd-kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #9c5518); margin: 0 0 .6rem; }
.reader h1 { font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: var(--text-2xl, 2.5rem); line-height: 1.08; margin: 0 0 .7rem; }
.rd-sub { font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: var(--text-lg, 1.25rem); line-height: 1.35; color: var(--muted, #4f5d57); margin: 0 0 .8rem; }
.rd-meta { font-size: .875rem; color: var(--muted, #4f5d57); margin: 0 0 1.2rem; }
.rd-hint { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1px dashed var(--line, #ddd2bf); border-radius: 12px; font-size: .9375rem; margin: 0 0 2rem; background: var(--surface, #fffdf8); }
.rd-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.rd-page { padding: 2rem 0; border-top: 1px solid var(--line, #ddd2bf); }
.rd-pnum { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #4f5d57); margin: 0 0 .4rem; }
.rd-free { color: var(--accent, #9c5518); }
.reader h2 { font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: var(--text-xl, 1.9rem); line-height: 1.15; margin: 0 0 1rem; }
.reader h3 { font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: var(--text-lg, 1.35rem); line-height: 1.25; margin: 1.8rem 0 .6rem; }
.reader p, .reader li { font-size: 1.0625rem; line-height: 1.7; }
.reader p { margin: 0 0 1rem; }
.reader ul, .reader ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
[dir="rtl"] .reader ul, [dir="rtl"] .reader ol { padding-left: 0; padding-right: 1.3rem; }
.reader li { margin: 0 0 .5rem; }
.rd-intro { font-size: 1.15rem !important; }
.rd-box { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--surface-2, #efe7d8); }
.rd-box h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.rd-box p { margin: 0; }
.reader sup a { font-size: .75em; text-decoration: none; padding: 0 .1em; color: var(--accent, #9c5518); }
.rd-cta { margin: 2rem 0; padding: 1.6rem 1.4rem; border-radius: 16px; background: var(--panel, #0f3b2e); color: var(--panel-text, #f6f1e7); }
.rd-cta h2 { color: inherit; }
.rd-cta p, .rd-cta li { color: var(--panel-muted, #cfdcd4); }
.rd-cta .btn { margin: .4rem .5rem 0 0; }
.rd-src { font-size: .9375rem; }
.rd-src li { font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.rd-note { font-size: .875rem; color: var(--muted, #4f5d57); }
.reader table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .9375rem; }
.reader th, .reader td { border: 1px solid var(--line, #ddd2bf); padding: .45rem .6rem; text-align: start; vertical-align: top; }
.reader th { background: var(--surface-2, #efe7d8); }
.rd-table-wrap { overflow-x: auto; }
.rd-foot { border-top: 1px solid var(--line, #ddd2bf); padding: 1.5rem 0 2rem; font-size: .875rem; color: var(--muted, #4f5d57); }
.starter-read { font-weight: 600; }
.lib-list li { display: flex; flex-direction: column; gap: 6px; }
.lib-list li > a:first-child { flex: 1 1 auto; height: auto; }
.lib-list a.lib-listen { flex: none; height: auto; flex-direction: row; align-items: center; justify-content: center; padding: .55rem 1rem; font-weight: 600; font-size: var(--text-sm, .95rem); background: var(--brand, #0f3b2e); color: var(--brand-ink, #fff); border-color: var(--brand, #0f3b2e); }
.lib-list a.lib-listen:hover { background: #12473a; }
[data-theme="dark"] .lib-list a.lib-listen { background: #e9c79f; color: #10231c; border-color: #e9c79f; }
.rd-cta .btn-ghost { color: var(--panel-text, #f6f1e7); border-color: rgba(246, 241, 231, .55); }
.rd-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.reader .rd-chap { font-size: var(--text-2xl, 2.4rem); margin-top: 1rem; }
[data-theme="dark"] .ai-panel, [data-theme="dark"] .ai-toast { background: #174a3c; border: 1px solid rgba(233, 199, 159, .35); }
.ai-btn, .ai-panel button, .ai-lang button { -webkit-tap-highlight-color: transparent; }
.ai-btn[hidden], .ai-tools [hidden] { display: none !important; }