/* ReadPilot site v3 — shared tokens, chrome (header, menu, footer) and buttons.
   Every page loads this file last in <head>, so the legacy token names that older
   pages declare inline (--teal, --brand, --accent, --paper …) resolve to one palette.
   Brand blue is the app icon's left page (#2163EF); its right page (#88AEF7) is the
   second tint. */

:root {
  --rp-paper: #f8f7f4;
  --rp-sheet: #ffffff;
  --rp-sunk: #efeee9;
  --rp-ink: #15171c;
  --rp-ink-2: #464a53;
  --rp-ink-3: #62666f;
  --rp-line: #e4e2dc;
  --rp-line-strong: #cbc8c0;
  --rp-accent: #2163ef;
  --rp-accent-ink: #1a52c9;
  --rp-accent-hover: #1a52c9;
  --rp-accent-soft: #e6eefd;
  --rp-accent-2: #88aef7;
  --rp-on-accent: #ffffff;
  --rp-mark: rgba(33, 99, 239, 0.1);
  --rp-shadow: 0 1px 2px rgba(21, 23, 28, 0.04), 0 24px 48px -24px rgba(21, 23, 28, 0.18);
  --rp-serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif;
  --rp-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --rp-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --rp-max: 1312px;
  --rp-gutter: 48px;
  color-scheme: light;

  /* legacy names used by older inline styles */
  --paper: var(--rp-paper);
  --paper-2: var(--rp-sunk);
  --paper-deep: var(--rp-sunk);
  --surface: var(--rp-sheet);
  --ink: var(--rp-ink);
  --ink-2: var(--rp-ink-2);
  --ink-3: var(--rp-ink-3);
  --ink-4: var(--rp-ink-3);
  --teal: var(--rp-accent-ink);
  --teal-deep: var(--rp-accent-hover);
  --teal-soft: var(--rp-accent-soft);
  --brand: var(--rp-accent-ink);
  --brand-deep: var(--rp-accent-hover);
  --brand-soft: var(--rp-accent-soft);
  --accent: var(--rp-accent);
  --accent-deep: var(--rp-accent-ink);
  --accent-soft: var(--rp-accent-soft);
  --rule: var(--rp-line-strong);
  --rule-soft: var(--rp-line);
  --line: var(--rp-line);
  --line-strong: var(--rp-line-strong);
  --verify: var(--rp-ink-2);
  --serif: var(--rp-serif);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rp-paper: #181818;
    --rp-sheet: #1f1f1f;
    --rp-sunk: #131313;
    --rp-ink: #ecebe6;
    --rp-ink-2: #b9b8b2;
    --rp-ink-3: #9a9993;
    --rp-line: #313131;
    --rp-line-strong: #454545;
    --rp-accent: #88aef7;
    --rp-accent-ink: #9dbcf8;
    --rp-accent-hover: #a9c4f9;
    --rp-accent-soft: #1d2a44;
    --rp-accent-2: #3d6fd8;
    --rp-on-accent: #0d1426;
    --rp-mark: rgba(136, 174, 247, 0.14);
    --rp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rp-paper: #181818;
  --rp-sheet: #1f1f1f;
  --rp-sunk: #131313;
  --rp-ink: #ecebe6;
  --rp-ink-2: #b9b8b2;
  --rp-ink-3: #9a9993;
  --rp-line: #313131;
  --rp-line-strong: #454545;
  --rp-accent: #88aef7;
  --rp-accent-ink: #9dbcf8;
  --rp-accent-hover: #a9c4f9;
  --rp-accent-soft: #1d2a44;
  --rp-accent-2: #3d6fd8;
  --rp-on-accent: #0d1426;
  --rp-mark: rgba(136, 174, 247, 0.14);
  --rp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--rp-paper); color: var(--rp-ink); overflow-x: clip; }
::selection { background: var(--rp-accent-soft); color: var(--rp-ink); }
:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 3px; border-radius: 4px; }

.rp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rp-skip {
  position: fixed; left: 16px; top: 12px; z-index: 60;
  padding: 8px 12px; border-radius: 8px;
  background: var(--rp-ink); color: var(--rp-paper);
  font: 600 14px/20px var(--rp-sans); text-decoration: none;
  transform: translateY(-64px); transition: transform 300ms var(--rp-ease);
}
.rp-skip:focus { transform: none; }

/* ---------- header ---------- */
.rp-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--rp-paper);
  font-family: var(--rp-sans);
}
.rp-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rp-line); opacity: 0; transition: opacity 300ms var(--rp-ease);
}
.rp-head[data-scrolled]::after { opacity: 1; }
.rp-head-in {
  max-width: var(--rp-max); margin: 0 auto; padding: 0 var(--rp-gutter);
  height: 72px; display: flex; align-items: center; gap: 40px;
}
.rp-brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--rp-ink); text-decoration: none; flex: none;
}
.rp-brand img {
  width: 32px; height: 32px; border-radius: 8px; display: block;
  box-shadow: 0 0 0 1px var(--rp-line);
}
.rp-brand b { font: 600 16px/24px var(--rp-sans); letter-spacing: -0.01em; }
.rp-brand small { font: 400 14px/20px var(--rp-sans); color: var(--rp-ink-3); margin-left: -4px; }
.rp-nav { display: flex; gap: 32px; margin-right: auto; }
.rp-nav a {
  position: relative; padding: 8px 0;
  font: 400 14px/20px var(--rp-sans); color: var(--rp-ink-2); text-decoration: none;
  transition: color 300ms var(--rp-ease);
}
.rp-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--rp-ease);
}
.rp-nav a[aria-current="page"] { color: var(--rp-ink); }
.rp-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .rp-nav a:hover { color: var(--rp-ink); }
  .rp-nav a:hover::after { transform: scaleX(1); }
}
.rp-cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 10px; background: var(--rp-accent); color: var(--rp-on-accent);
  font: 600 14px/20px var(--rp-sans); text-decoration: none; white-space: nowrap;
  transition: transform 300ms var(--rp-ease), opacity 300ms var(--rp-ease), background-color 300ms var(--rp-ease);
}
.rp-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rp-cta:hover { background: var(--rp-accent-hover); } }
.rp-head[data-cta-hidden] .rp-cta { opacity: 0; transform: translateY(-4px); pointer-events: none; }

.rp-menu-btn {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; color: var(--rp-ink); cursor: pointer; border-radius: 8px;
}
.rp-menu-btn i {
  position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 500ms var(--rp-ease);
}
.rp-menu-btn i:nth-child(1) { top: 17px; }
.rp-menu-btn i:nth-child(2) { top: 25px; }
.rp-menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.rp-menu-btn[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.rp-menu {
  position: fixed; inset: 72px 0 0 0; z-index: 39;
  background: var(--rp-paper); padding: 24px 20px 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity 400ms var(--rp-ease), visibility 0s linear 400ms;
}
.rp-menu[data-open] { opacity: 1; visibility: visible; transition: opacity 400ms var(--rp-ease); }
.rp-menu a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--rp-line);
  font: 500 24px/32px var(--rp-serif); color: var(--rp-ink); text-decoration: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--rp-ease), transform 500ms var(--rp-ease);
}
.rp-menu[data-open] a { opacity: 1; transform: none; }
.rp-menu[data-open] a:nth-child(2) { transition-delay: 40ms; }
.rp-menu[data-open] a:nth-child(3) { transition-delay: 80ms; }
.rp-menu[data-open] a:nth-child(4) { transition-delay: 120ms; }
.rp-menu[data-open] a:nth-child(5) { transition-delay: 160ms; }
.rp-menu[data-open] a:nth-child(6) { transition-delay: 200ms; }
.rp-menu[data-open] a:nth-child(7) { transition-delay: 240ms; }
.rp-menu .rp-menu-cta {
  margin-top: 32px; border: 0; display: flex; align-items: center; justify-content: center;
  height: 48px; border-radius: 12px; background: var(--rp-accent); color: var(--rp-on-accent);
  font: 600 16px/24px var(--rp-sans);
}
html[data-menu-open] { overflow: hidden; }

@media (max-width: 1023px) {
  .rp-head-in { padding: 0 32px; gap: 24px; }
  .rp-nav { gap: 24px; }
  .rp-nav a:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
  :root { --rp-gutter: 20px; }
  .rp-head-in { padding: 0 20px; height: 64px; }
  .rp-menu { inset: 64px 0 0 0; }
  .rp-nav, .rp-cta { display: none; }
  .rp-brand { margin-right: auto; }
  .rp-menu-btn { display: block; }
}

/* ---------- buttons ---------- */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 24px; border-radius: 12px;
  background: var(--rp-accent); color: var(--rp-on-accent);
  font: 600 16px/24px var(--rp-sans); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 300ms var(--rp-ease), background-color 300ms var(--rp-ease);
}
.rp-btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .rp-btn:hover { background: var(--rp-accent-hover); } }
.rp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font: 600 16px/24px var(--rp-sans); color: var(--rp-ink); text-decoration: none;
}
.rp-link svg { width: 16px; height: 16px; transition: transform 400ms var(--rp-ease); }
.rp-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rp-link:hover { color: var(--rp-accent-ink); }
  .rp-link:hover svg { transform: translateX(4px); }
}
.rp-link:active svg { transform: translateX(2px); }

/* ---------- footer ---------- */
.rp-foot {
  margin-top: 96px; border-top: 1px solid var(--rp-line);
  font-family: var(--rp-sans); color: var(--rp-ink-3);
}
.rp-foot-in {
  max-width: var(--rp-max); margin: 0 auto; padding: 64px var(--rp-gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px;
}
.rp-foot-id p { margin: 16px 0 0; max-width: 320px; font-size: 14px; line-height: 24px; color: var(--rp-ink-2); }
.rp-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rp-foot h2 { margin: 0 0 12px; font: 600 12px/16px var(--rp-sans); letter-spacing: 0.08em; color: var(--rp-ink-3); }
.rp-foot ul { list-style: none; margin: 0; padding: 0; }
.rp-foot li a {
  display: inline-block; padding: 4px 0;
  font-size: 14px; line-height: 20px; color: var(--rp-ink-2); text-decoration: none;
  transition: color 300ms var(--rp-ease);
}
@media (hover: hover) and (pointer: fine) { .rp-foot li a:hover { color: var(--rp-ink); text-decoration: underline; text-underline-offset: 4px; } }
.rp-foot-base {
  width: calc(100% - 2 * var(--rp-gutter)); max-width: calc(var(--rp-max) - 2 * var(--rp-gutter));
  margin: 0 auto; padding: 24px 0 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid var(--rp-line); font-size: 12px; line-height: 16px; color: var(--rp-ink-3);
}
.rp-foot-base p { margin: 0; }
@media (max-width: 1023px) {
  :root { --rp-gutter: 32px; }
  .rp-foot-in { grid-template-columns: minmax(0, 1fr); padding: 48px 32px 40px; }
}
@media (max-width: 767px) {
  :root { --rp-gutter: 20px; }
  .rp-foot { margin-top: 64px; }
  .rp-foot-in { padding: 40px 20px 32px; gap: 32px; }
  .rp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .rp-foot-base { padding: 20px 0 32px; }
}

/* CJK headings break at punctuation and spaces, never inside a word */
.rp-keep, h1, h2, h3 { word-break: keep-all; overflow-wrap: break-word; }
/* no single character stranded on the last line of a paragraph */
p, li, td, dd, summary { text-wrap: pretty; }

/* ---------- older hand-written pages ---------- */
.rp-legacy a:focus-visible, .rp-legacy button:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 3px; }
.rp-legacy .btn:not(.btn-ghost) { background: var(--rp-accent); color: var(--rp-on-accent); }
.rp-legacy .btn:not(.btn-ghost):hover { background: var(--rp-accent-hover); }
.rp-legacy .band { background: #10234d; }
.rp-legacy .eyebrow { color: var(--rp-ink-3); }
.rp-legacy main > nav[aria-label="breadcrumb"] { max-width: 760px; margin: 0 auto; padding-left: 24px !important; padding-right: 24px; }
.rp-legacy .band .btn { background: #ffffff; color: #10234d; }
.rp-legacy .band .btn:hover { background: #dbe6fd; }
@media (max-width: 767px) {
  .rp-legacy .container, .rp-legacy .wrap, .rp-legacy .wrap-narrow { padding-left: 20px; padding-right: 20px; }
  .rp-legacy .hero.solo { margin-left: 0; margin-right: 0; }
  .rp-legacy main > nav[aria-label="breadcrumb"] { padding-left: 20px !important; padding-right: 20px; }
  .rp-legacy main.article-wrap { margin-left: 20px; margin-right: 20px; padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-head *, .rp-menu, .rp-menu a, .rp-btn, .rp-link svg, .rp-skip { transition: none !important; }
}