/* Friendly mobile skin. Loaded after styles.css. */
:root {
  --night: #172a43;
  --deep: #172a43;
  --panel: #fff;
  --panel-solid: #fff;
  --line: #cbd4df;
  --moon: #172a43;
  --sub: #52627a;
  --gold: #f4d783;
  --gold-soft: #805a18;
  --shu: #e3aa55;
  --field: #8b9bb0;
  --err: #aa3544;
  --ok: #255d4d;
  --focus: #285c9a;
  color-scheme: light;
}
html { background: #f5f6fb; }
body { color: #172a43; background: #f5f6fb; font-family: var(--sans); }
.sky, .aura, .twinkle { display: none; }
a { color: #214e78; text-decoration-color: #8ca8c3; }
strong { color: #172a43; font-weight: 700; }
button, input, select, textarea { color: #172a43; }

.shell { max-width: 760px; }
main { padding-top: 16px; }
.topbar { min-height: 72px; border-bottom: 1px solid #e2e7ef; }
.brand { color: #172a43; }
.brand img { border: 2px solid #172a43; }
.iconlink { color: #172a43; border-radius: 14px; text-decoration: none; }
.iconlink:hover, .iconlink:focus-visible { background: #e8f1f5; }
.foot { max-width: 760px; border-top-color: #d6deea; color: #52627a; font-size: 13px; }
.beta { color: #172a43; border-color: #172a43; }
.eyebrow, .concern-intro, .concern-group legend { color: #52627a; }
.display, .h1, .h2, h1, h2, h3,
.reading-chapters h2, .discover-link strong, .membership-price,
.cal .mon, .future-flow .flow-month, .knot .answer-text {
  font-family: var(--sans);
  color: #172a43;
  text-shadow: none;
}
.display { font-size: clamp(30px, 7.6vw, 42px); line-height: 1.35; letter-spacing: .015em; font-weight: 700; }
.h1 { font-size: clamp(24px, 6vw, 32px); font-weight: 700; }
.h2, .reading-chapters h2 { font-weight: 700; }
.lead, .prose, .reading-sheet, .choice, .needs-option { font-size: 16px; }
.note, .field > .why, .reading-chapters p, .discover-link span { font-size: 14px; }
.stack > * + * { margin-top: 24px; }
.section { margin-top: 48px; }

.btn, .reading-sheet .btn {
  min-height: 56px;
  border: 2px solid #172a43;
  border-radius: 18px;
  background: #f4d783;
  color: #172a43;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 0 #172a43;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { background: #f9e2a5; box-shadow: 0 4px 0 #172a43; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 #172a43; }
.btn.secondary, .reading-sheet .btn.secondary {
  min-height: 56px;
  background: #fff;
  color: #172a43;
  border-color: #172a43;
  box-shadow: 0 3px 0 #172a43;
}
.btn.secondary:hover, .reading-sheet .btn.secondary:hover { background: #eaf4f6; }
.btn.secondary:active { transform: translateY(3px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: #e7ebf1;
  color: #52627a;
  border: 2px solid #9ca9b8;
  box-shadow: none;
}
.line-button, .reading-sheet .line-card .btn { background: #f4d783; color: #172a43; }
.sharebtns .btn { min-height: 56px; font-size: 16px; }
.textlink { color: #214e78; }

.input, .select, .textarea {
  min-height: 56px;
  border: 2px solid #8090a5;
  border-radius: 16px;
  background: #fff;
  color: #172a43;
  font-size: 16px;
}
.select option { background: #fff; color: #172a43; }
.input::placeholder, .textarea::placeholder { color: #64748b; }
.field > .label, legend { font-size: 16px; color: #172a43; }
.error, .error a { color: #aa3544; }
.errsummary { background: #fff1f1; border-color: #aa3544; }
.choices { gap: 12px; }
.choice {
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid #172a43;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 0 #172a43;
  color: #172a43;
  line-height: 1.6;
}
.choice:hover { background: #eef7f9; }
.choice:has(input:checked) { background: #ddeff3; border-color: #172a43; box-shadow: 0 3px 0 #172a43; font-weight: 700; }
.choice .mark { width: 24px; height: 24px; flex-basis: 24px; border: 2px solid #172a43; background: #fff; }
.choice:has(input:checked) .mark { background: #172a43; border-color: #172a43; box-shadow: none; }
.choice:has(input:checked) .mark::after { border-color: #fff; }
.choice:active { transform: translateY(2px); box-shadow: 0 1px 0 #172a43; }

.card, .quiet, .cover, .reading-sheet, .needs-card, .line-card {
  background: #fff;
  color: #172a43;
  border: 1px solid #cbd4df;
  border-radius: 24px;
  box-shadow: 0 3px 0 #dfe5ec;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.reading-sheet { padding: clamp(20px, 5vw, 40px); }
.reading-sheet h1, .reading-sheet h2, .reading-sheet h3,
.reading-sheet .line-card h2, .reading-sheet .line-card .eyebrow { color: #172a43; }
.reading-sheet .eyebrow, .reading-sheet .note,
.reading-sheet .line-card .note { color: #52627a; }
.reading-sheet a:not(.btn) { color: #214e78; text-decoration-color: #8ca8c3; }
.reading-sheet > section, .essence-section, .guide-topic, .guide-topic-nav,
.reading-index, .needs-feedback { border-color: #d6deea; }
.answer-card { background: #eef7f9; border-left: 4px solid #172a43; border-radius: 0 18px 18px 0; }
.question-example { background: #eef7f9; border-left-color: #172a43 !important; border-radius: 0 18px 18px 0; }
.ok { background: #e4f4ee; color: #255d4d; }
.sample-flag { background: #fff6d9; color: #172a43; border-bottom-color: #d4b15c; }
.quote, .line-sample { border-left: 4px solid #d4b15c; }
.line-sample { background: #f5f6fb; border-radius: 0 16px 16px 0; }
.line-sample span, .guide-sign span, .life-year-detail h3,
.essence-intro, .essence-section h3 { color: #172a43; }
.line-benefits li::marker { color: #172a43; }
.line-help { border-top-color: #d6deea; }
.career-jobs li { color: #172a43; border: 2px solid #cbd4df; border-radius: 18px; background: #fff; }
.scene-links a { min-height: 56px; border: 2px solid #172a43; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #172a43; font-size: 16px; }
.scene-links a:hover, .scene-links a:focus-visible { background: #ddeff3; }
.discover-link strong, .discover-link:hover strong { color: #172a43; }
.reading-back, .essence-more > summary, .topic-picker > summary,
.share-more > summary { color: #214e78; }
.reading-back, .guide-topic-nav a { min-height: 48px; }
.membership-price, .membership-price span { color: #172a43; }

.hero-wrap { min-height: 0; }
.hero-visual, .hero .halo { width: 88px; height: 88px; margin: 0 0 16px; }
.hero-avatar, .hero .harry { width: 88px; height: 88px; box-shadow: 0 3px 0 #cbd4df; }
.hero .halo::before, .hero .halo::after { content: none; }
.hero .display { margin-top: 8px; }
.hero .promise li { color: #172a43; background: #fff; border: 1px solid #aebdca; }
.hero-actions { margin-top: 24px; }
.hero-meta { margin-top: 16px; }
.hero-lead { max-width: 32em; }
.mini-sample { margin-top: 32px; }
.cover .harry { width: 76px; height: 76px; }
.cover-title { color: #172a43; }
.reveal { animation: none; }

.needs-card { padding: 24px; }
.needs-options { gap: 10px; }
.needs-option, .needs-feedback .needs-option {
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid #172a43;
  border-radius: 18px;
  background: #fff;
  color: #172a43;
  box-shadow: 0 3px 0 #172a43;
}
.needs-option:hover, .needs-option:focus-visible,
.needs-option[aria-pressed="true"], .needs-feedback .needs-option[aria-pressed="true"] {
  background: #ddeff3;
  border-color: #172a43;
  box-shadow: 0 3px 0 #172a43;
}
.needs-option[aria-pressed="true"]::before { content: "✓ "; font-weight: 700; }
.needs-actions button { min-height: 48px; color: #214e78; }
.needs-guidance { background: #eef7f9; border-radius: 16px; }
.needs-line .line-card { color: #172a43; }
.work-preference-options { display: grid; gap: 12px; }
.work-preference-options .work-preference-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; }
label.work-preference-option {
  padding: 14px 16px;
  border: 2px solid #172a43;
  border-radius: 20px;
  background: #fff;
  color: #172a43;
  box-shadow: 0 3px 0 #172a43;
  cursor: pointer;
}
label.work-preference-option:has(input:checked) { background: #ddeff3; font-weight: 700; }
label.work-preference-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.work-preference-option input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #172a43; }
.work-preference-link { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 4px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #214e78; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.work-preference [hidden] { display: none !important; }
.work-preference-need-summary, .work-preference-hint { padding: 12px 16px; border-radius: 16px; background: #eef7f9; }
.work-preference-selected { font-size: 20px; font-weight: 700; }
.work-preference-result h3 { margin-top: 20px; font-size: 18px; }
.work-preference-result ul { display: grid; gap: 10px; }
.work-preference-result li { padding: 12px 16px; border-radius: 16px; background: #f5f6fb; }
.work-preference-about { border-top: 1px solid #cbd4df; padding-top: 8px; }
.work-preference-about summary { display: flex; align-items: center; min-height: 48px; color: #214e78; cursor: pointer; }
.work-preference-about p { margin-bottom: 12px; }
.topics button, .life-year-buttons .btn {
  min-height: 56px;
  border: 2px solid #172a43;
  border-radius: 16px;
  background: #fff;
  color: #172a43;
  box-shadow: 0 3px 0 #172a43;
  font-size: 14px;
}
.topics button[aria-pressed="true"],
.life-year-buttons .btn[aria-pressed="true"] {
  background: #ddeff3;
  color: #172a43;
  border-color: #172a43;
}
.life-year-theme, .life-year-buttons .btn[aria-pressed="true"] .life-year-theme { color: #52627a; }
.life-chart, .life-fixed-axis { background: #fff; border-color: #cbd4df; }
.life-chart-scroll { border-color: #cbd4df; }
.future-flow li, .cal.grid li { background: #fff; border: 1px solid #cbd4df; border-top: 3px solid #d4b15c; border-radius: 18px; }
.future-flow a { color: #172a43; }
.future-flow .flow-month, .future-next > span { color: #172a43; }
.cal li { border-bottom-color: #d6deea; }
.cal li::before { background: #172a43; box-shadow: none; }
.cal .cal-row { color: #172a43; }
.cal li.now { background: #fff7dd; border-color: #c49c42; box-shadow: none; }
.cal li.now::before { box-shadow: none; }
.cal li.now .tag { color: #172a43; }
.cal li.past .theme, .cal li.past .mon { color: #52627a; }
.reading-chapters li, .discover-link { border-color: #d6deea; }
.reading-chapters li > span { color: #172a43; }
.thread::before { box-shadow: none; }
.thread > .knot::before, .thread > .knot.answer::before,
.thread > .knot.step::before { box-shadow: none; }
.knot .answer-text { color: #172a43; }
.crescent { filter: none; }
.kind.read::before { background: #172a43; box-shadow: none; }
.kind.told::before { border-color: #172a43; }
.resultnav, .has-resultnav .resultnav { background: #fff; border-color: #cbd4df; backdrop-filter: none; -webkit-backdrop-filter: none; }
.resultnav a { color: #52627a; }
.resultnav a[aria-current="page"] { color: #172a43; text-shadow: none; border-color: #c49c42; }
.toast { background: #172a43; color: #fff; border-color: #172a43; box-shadow: 0 4px 18px #172a4333; }
.flow-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.flow-dot { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 2px solid #aebdca; border-radius: 50%; background: #fff; color: #52627a; font-size: 14px; font-weight: 700; }
.flow-dot[aria-current="step"] { border-color: #172a43; background: #f4d783; color: #172a43; }
.flow-progress-label { color: #52627a; font-size: 14px; font-weight: 700; margin-left: 4px; }

@media (max-width: 640px) {
  .hero-wrap { display: block; padding-top: 8px; }
  .hero .halo, .hero-visual { width: 80px; height: 80px; margin: 0 0 16px; }
  .hero .harry, .hero-avatar { width: 80px; height: 80px; }
  .hero .display { font-size: clamp(28px, 8vw, 34px); }
  .needs-card { padding: 18px; }
  .needs-option { font-size: 16px; }
  .needs-line .line-card { background: #fff; border: 1px solid #cbd4df; border-radius: 20px; padding: 18px; }
  .line-card { padding: 20px; }
  .reading-sheet { padding: 22px 18px; }
  .life-year-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .needs-options { grid-template-columns: 1fr; }
  .row { flex-wrap: wrap; }
  .row > .field { min-width: min(100%, 120px); }
  .row .unit { padding-bottom: 16px; }
}
@media (min-width: 960px) {
  body:not(.has-resultnav) .shell { max-width: 1040px; }
  .hero-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 48px 64px; }
  .hero-visual, .hero .halo, .hero-avatar, .hero .harry { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .choice, .needs-option { transition: none; }
}
@media print {
  html, body { background: #fff; }
  .card, .quiet, .cover, .reading-sheet, .line-card { box-shadow: none; }
}