/* Personal colour theme (2026-10-20): ネイビー×生成り, brand blue; the four result colours only on result screens/cards.
   Base 生成り #FAF8F4 / main ミッドナイトネイビー #1E1B2E / brand モフレスブルー #2F5FE0 / sub band 淡いブルー #EAF0FF /
   secondary text グレー #6B6780 / result: green #3DBE74, yellow #F7CB4D, orange #FF9A4A, red #FF5A4F.
   Loaded after app.css and personal.css on every page; only colours change here. */
:root {
  --navy: #1E1B2E; --blue: #2F5FE0; --blue-hover: #244BC0; --blue-soft: #EAF0FF; --grey: #6B6780;
  --r-green: #3DBE74; --r-yellow: #F7CB4D; --r-orange: #FF9A4A; --r-red: #FF5A4F;
  /* darker text tones of the result colours (for contrast on white / tints) */
  --r-green-ink: #17784A; --r-yellow-ink: #7A5A00; --r-orange-ink: #A8500B; --r-red-ink: #B42318;
  --bg: #FAF8F4; --surface: #fff; --surface-2: #F5F3EF; --soft: #EAF0FF; --line: #E3E1E8; --line-2: #EEEDF2;
  --text: #1E1B2E; --muted: #6B6780; --faint: #8E8AA0;
  --accent: #2F5FE0; --accent-hover: #244BC0; --accent-soft: #EAF0FF; --accent-ink: #fff;
  --teal: #2F5FE0; --teal-hover: #244BC0; --teal-soft: #EAF0FF;
  --ok: var(--r-green-ink); --ok-bg: #E6F7EE; --ok-line: #A9E3C3; --warn: var(--r-yellow-ink); --warn-bg: #FEF6DB; --warn-line: #F7CB4D;
  --bad: var(--r-red-ink); --bad-bg: #FFE9E7; --info: var(--blue); --info-bg: var(--blue-soft);
  --shadow: 0 1px 2px rgba(30, 27, 46, .05), 0 4px 16px rgba(30, 27, 46, .05);
}
body { background: var(--bg); color: var(--text); }
a { color: var(--blue); }

/* Header and footer: navy */
.topbar { background: var(--navy); border-bottom: 0; color: #fff; }
.pr-brand { color: #fff; }
.pr-brand .co, .pr-brand .pr-svc { color: #fff; }
.pr-logo { background: #fff; border-radius: 8px; padding: 4px 7px; height: 32px; box-sizing: border-box; }
@media (max-width: 560px) { .pr-logo { height: 30px; padding: 4px 6px; } }
.topbar .who { color: #C9C6D6; }
.topbar .btn.ghost { color: #fff; } .topbar .btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar .btn.quiet { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.topbar .btn.quiet:hover, .topbar .btn.quiet[aria-current="page"] { background: rgba(255, 255, 255, .2); }
.topbar .btn.teal { background: var(--blue); border-color: var(--blue); color: #fff; }
.pr-foot { background: var(--navy); margin-top: 40px; padding: 22px 16px 32px; }
.pr-foot a { color: #DCDAE6; } .pr-foot a:hover { color: #fff; }

/* Brand blue: main buttons and links; choices use the pale blue */
.btn.start:not(.outline) { --start-bg: var(--blue); --start-hover: var(--blue-hover); }
.btn.outline { color: var(--blue); border-color: var(--blue); }
.dur-b[aria-pressed="true"], .pr-q-b[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.dur-b[aria-pressed="true"] span, .pr-q-b[aria-pressed="true"] span { color: var(--blue-hover); }
.rv-sec.bar::before { background: var(--blue); }
.sw-acc summary { color: var(--blue); }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .pr-q-b:focus-visible, .dur-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Explanation bands: pale blue */
.steps, .pr-steps, .pr-cta, .pr-qsum { background: var(--blue-soft); border-color: #D5E0FB; }

/* ---- Result screens and cards only: the four result colours ---- */
.sg-low { stroke: var(--r-green); } .sg-mid { stroke: var(--r-yellow); } .sg-high { stroke: var(--r-orange); }
.sg-dot { fill: var(--navy); }
.sh.high { background: #FFF3EA; border-color: #FFC9A0; border-left: 7px solid var(--r-orange); }
.sh-scale span:nth-child(1) { background: #E6F7EE; color: var(--r-green-ink); }
.sh-scale span:nth-child(2) { background: #FEF6DB; color: var(--r-yellow-ink); }
.sh-scale span:nth-child(3) { background: #FFF0E4; color: var(--r-orange-ink); }
.sw-e.up { color: var(--r-orange-ink); } .sw-e.down { color: var(--r-green-ink); }
.sw-fill.up { background: var(--r-orange); } .sw-fill.down { background: var(--r-green); }
.star.on { color: var(--r-yellow); }
/* stress type groups: 余裕組 green / 隠れ疲れ組 yellow / 気疲れ組 orange / お疲れMAX組 red */
.st.g-relax { --g: var(--r-green); --gi: var(--r-green-ink); --gs: #E6F7EE; }
.st.g-hidden { --g: var(--r-yellow); --gi: var(--r-yellow-ink); --gs: #FEF6DB; }
.st.g-mental { --g: var(--r-orange); --gi: var(--r-orange-ink); --gs: #FFF0E4; }
.st.g-max { --g: var(--r-red); --gi: var(--r-red-ink); --gs: #FFE9E7; }
.st-hint b { color: var(--gi); }
.st.g-hidden .st-no { color: var(--navy); }
/* supplementary result cards (quick-engine view) */
.qv-hero.ok, .qv-sum.ok { background: #E6F7EE; border-color: #A9E3C3; border-left-color: var(--r-green); }
.qv-hero.warn, .qv-sum.warn { background: #FEF6DB; border-color: #F3DC8E; border-left-color: var(--r-yellow); }
.qv-hero.bad { background: #FFE9E7; border-color: #FFB3AD; border-left-color: var(--r-red); }
.qv-hero.ok .qv-h, .qv-sum.ok .qv-sh { color: var(--r-green-ink); }
.qv-hero.warn .qv-h, .qv-sum.warn .qv-sh { color: var(--r-yellow-ink); }
.qv-hero.bad .qv-h { color: var(--r-red-ink); }
.qv-row.caution { background: #FEF6DB; box-shadow: inset 7px 0 0 var(--r-yellow); }
.qv-call { background: var(--r-red-ink); }