/* HKChat principles, selectively adapted for the fortune brand.
   One type scale, semantic colors, 4px spacing and shared interaction states. */
:root {
  --guide-paper:#fcfaf5; --guide-ink:#403b35; --guide-muted:#756b60;
  --guide-brand:#7a2632; --guide-brand-pressed:#611d27;
  --guide-gold:#a38435; --guide-line:#d8c6a5; --guide-tint:#f0e8df;
  --guide-ui:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  --guide-display:"Songti TC","Noto Serif TC",serif;
  --guide-caption:12px; --guide-body:14px; --guide-heading:16px; --guide-title:22px;
  --guide-radius:8px; --guide-sheet:16px;
}
body:has([data-screen="home"].screen--active) { background:#f6f2ea; }
.screen[data-screen="home"] { background:var(--guide-paper); overflow-y:auto; }
.app:has([data-screen="home"].screen--active) .app-background { background:var(--guide-paper); }
.app:has([data-screen="home"].screen--active) .app-background::before,
.app:has([data-screen="home"].screen--active) .app-background::after,
.app:has([data-screen="home"].screen--active) .bg-pattern,
.app:has([data-screen="home"].screen--active) .bg-character,
.app:has([data-screen="home"].screen--active) #fw-canvas { display:none; }
[data-screen="home"] .home-layout {
  --guide-available:calc(100svh - 40px - var(--safe-top) - var(--safe-bot));
  position:relative; isolation:isolate; display:flex; flex-direction:column; flex:none;
  min-height:100%; box-sizing:border-box; overflow:visible; gap:0;
  padding:calc(24px + var(--safe-top)) 24px calc(16px + var(--safe-bot));
  color:var(--guide-ink); font:400 var(--guide-body)/1.65 var(--guide-ui);
  background:var(--guide-paper);
}
[data-screen="home"] .home-card { display:flex; flex-direction:column; flex:1 0 auto; max-width:none; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
[data-screen="home"] .home-almanac-row { flex:none; position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; padding:12px 0; border-bottom:1px solid var(--guide-line); }
[data-screen="home"] .home-almanac-row::after { content:""; position:absolute; left:50%; top:16px; bottom:16px; width:1px; background:var(--guide-line); }
[data-screen="home"] .home-daily-date h2 { font:600 var(--guide-title)/1.4 var(--guide-display); color:var(--guide-brand); }
[data-screen="home"] .almanac-date-row { font:400 var(--guide-caption)/1.5 var(--guide-ui); gap:4px; color:var(--guide-muted); }
[data-screen="home"] .home-almanac { border:0; padding-left:16px; }
[data-screen="home"] .almanac-yi-ji { display:flex; flex-direction:column; gap:8px; }
[data-screen="home"] .almanac-yi-ji-line { font:400 var(--guide-caption)/1.6 var(--guide-ui); gap:8px; align-items:center; }
[data-screen="home"] .almanac-yi-ji-label { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; border-radius:var(--guide-radius); padding:0; font:600 var(--guide-body)/1 var(--guide-ui); }
.personal-section { flex:1; display:flex; flex-direction:column; position:relative; isolation:isolate; padding:12px 0 20px; min-height:224px; }
/* One shared lower landscape position across all homepage states. */
.personal-section::before { content:""; position:absolute; pointer-events:none; z-index:-1; left:-24px; right:-24px; bottom:0; height:200px; background:url('/assets/home-ink-landscape.png') center 65%/100% auto no-repeat; mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); opacity:.75; }
.personal-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.fortune-views { display:flex; gap:16px; }
.fortune-views button { min-height:44px; padding:8px 0; border:0; border-radius:0; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:4px; background:none; color:var(--guide-muted); font:500 var(--guide-body)/1.5 var(--guide-ui); cursor:pointer; white-space:nowrap; }
.fortune-views button[aria-pressed="true"] { color:var(--guide-brand); font-weight:600; text-decoration-color:var(--guide-brand); }
.personal-heading .home-link-btn { min-height:44px; padding:8px 0; font:500 var(--guide-caption)/1.5 var(--guide-ui); color:var(--guide-brand);  }
#homeGuide,#homeFortuneState { text-align:center; }
#homeGuide { margin:auto 0; padding:8px 0; }
.personal-title,.personal-loading-title { font:600 var(--guide-title)/1.5 var(--guide-display); color:var(--guide-brand); margin:0 0 12px; text-wrap:pretty; }
#homeGuide .personal-title { font-size:var(--guide-heading); }
.personal-copy,.personal-copy .home-fortune-item-text { margin:0; color:var(--guide-ink); font:400 var(--guide-body)/1.8 var(--guide-ui); }
.personal-open { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--guide-brand); border-radius:var(--guide-radius); padding:8px 20px; margin-top:12px; color:var(--guide-brand); background:var(--guide-paper); font:600 var(--guide-body)/1.5 var(--guide-ui); cursor:pointer; }
.personal-details,.almanac-more-button { display:block; width:max-content; max-width:100%; min-height:44px; padding:8px 0; margin-top:12px; border:0; border-radius:0; color:var(--guide-brand); background:none; font:500 var(--guide-body)/1.5 var(--guide-ui); cursor:pointer; }
/* Text actions share one underline treatment, independent of their touch target height. */
.home-link-btn,.personal-details,.almanac-more-button { text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-skip-ink:auto; }
.personal-section:is([data-state="pending"],[data-state="failed"]) #homeFortune { position:relative; margin-block:auto; padding-block:16px; }
.personal-section[data-state="failed"] #btnRetryHomeFortune { margin-inline:auto; }
#homeFortuneState { display:block; }
.personal-section [hidden],.home-layout [hidden] { display:none !important; }
.fortune-orbit { position:relative; width:64px; height:64px; margin:0 auto 16px; animation:guide-orbit 7s linear infinite; }
.fortune-orbit::before { content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--guide-line); }
.fortune-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--guide-gold); left:28px; top:0; transform-origin:4px 32px; }
.fortune-orbit i:nth-child(2) { transform:rotate(120deg); }.fortune-orbit i:nth-child(3) { transform:rotate(240deg); }
.fortune-skeleton { margin-top:16px; }
.fortune-skeleton span { display:block; height:24px; background:var(--guide-tint); border-radius:var(--guide-radius); margin-top:8px; opacity:.6; animation:guide-pulse 2s ease-in-out infinite; }
@keyframes guide-orbit { to { transform:rotate(360deg); } } @keyframes guide-pulse { 50% { opacity:.3; } }
/* The draw area occupies 40% of available screen height, and grows for accessibility. */
[data-screen="home"] .home-draw { flex:0 0 auto; min-height:calc(var(--guide-available)*.4); display:flex; flex-direction:column; padding-top:16px; border-top:1px solid var(--guide-line); text-align:left; }
.home-draw-intro { flex:1; min-height:160px; display:grid; grid-template-columns:40% minmax(0,1fr); align-items:center; gap:12px; position:relative; }
.home-draw-intro::before { content:""; position:absolute; width:42%; height:56px; left:-12px; top:55%; background:url('/assets/draw-cloud.svg') center/contain no-repeat; pointer-events:none; }
.home-draw-intro .home-draw-tube { position:relative; width:100%; height:clamp(160px,24svh,240px); object-fit:contain; margin:0; }
.home-draw-copy { position:relative; }
.home-draw-copy h2 { margin:0 0 8px; color:var(--guide-brand); font:600 var(--guide-title)/1.5 var(--guide-display); text-wrap:balance; }
.home-draw-copy p { margin:0; color:var(--guide-muted); font:400 var(--guide-body)/1.8 var(--guide-ui); }
.home-draw .ceremony-btn { display:flex; align-items:center; justify-content:center; flex:none; width:100%; height:48px; min-height:48px; margin:12px 0 0; padding:0 16px; border:0; border-radius:var(--guide-radius); background:var(--guide-brand); color:white; box-shadow:none; font:600 var(--guide-heading)/1.5 var(--guide-ui); }
.home-draw .ceremony-btn::before,.home-draw .ceremony-btn::after { display:none; }
.home-draw .btn-text { line-height:1.5; }
/* Shared almanac and dialog typography. */
.almanac-mid-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.almanac-mid-grid section+section { border-left:1px solid var(--guide-line); padding-left:16px; }
.almanac-mid-grid h3,.auspicious-summary h3 { font:500 var(--guide-caption)/1.5 var(--guide-ui); color:var(--guide-muted); margin:0 0 8px; }
.almanac-mid-grid strong { font:600 var(--guide-title)/1.5 var(--guide-display); color:var(--guide-brand); }
.almanac-mid-grid p,.worship-empty { font:400 var(--guide-caption)/1.6 var(--guide-ui); color:var(--guide-muted); margin:4px 0; }
.auspicious-summary { margin-top:16px; padding-top:12px; border-top:1px solid var(--guide-line); }
.auspicious-summary h3 { display:flex; justify-content:space-between; }.auspicious-summary small { font-size:var(--guide-caption); }
.auspicious-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.auspicious-slot { padding:8px 4px; border:1px solid var(--guide-line); border-radius:var(--guide-radius); text-align:center; background:var(--guide-paper); }
.auspicious-slot strong { display:block; color:var(--guide-brand); font:600 var(--guide-heading)/1.5 var(--guide-ui); }
.auspicious-slot span,.auspicious-slot small { display:block; color:var(--guide-muted); font:400 var(--guide-caption)/1.5 var(--guide-ui); }
.auspicious-slot.is-current { border-color:var(--guide-brand); }
.almanac-details { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:0; }
.almanac-details>div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px; }
.almanac-details dt { color:var(--guide-muted); }.almanac-details dd { margin:0; overflow-wrap:anywhere; }.almanac-details-wide { grid-column:1/-1; }
.almanac-dialog-date { color:var(--guide-brand); margin:0 0 16px; font-weight:600; }
.full-almanac-section+ .full-almanac-section { margin-top:24px; }
.full-almanac-section h3 { color:var(--guide-brand); font-size:var(--guide-heading); margin:0 0 12px; }
.almanac-hour { border-bottom:1px solid var(--guide-line); }
.almanac-hour summary { min-height:44px; display:flex; align-items:center; gap:12px; cursor:pointer; }.almanac-hour summary em { margin-left:auto; font-style:normal; }.almanac-hour summary::after { content:"＋"; }.almanac-hour[open] summary::after { content:"−"; }
.daily-details-dialog { border-radius:var(--guide-sheet) var(--guide-sheet) 0 0; }
.daily-details-header h2 { font:600 var(--guide-heading)/1.5 var(--guide-ui); color:var(--guide-brand); }
.daily-details-content,.daily-category-text { color:var(--guide-ink); font:400 var(--guide-body)/1.8 var(--guide-ui); }
.daily-details-header button,.almanac-more-button { font-family:var(--guide-ui); }
[data-screen="home"] button { transition:background-color .15s,color .15s,border-color .15s; }
[data-screen="home"] button:focus-visible,.almanac-hour summary:focus-visible { outline:2px solid var(--guide-brand); outline-offset:3px; }
[data-screen="home"] button:active { background-color:var(--guide-tint); }.home-draw .ceremony-btn:active { background:var(--guide-brand-pressed); }
.screen:not(.screen--active) { visibility:hidden; }.screen.screen--active { visibility:visible; }
.screen:not(.screen--active) .fortune-orbit,.screen:not(.screen--active) .fortune-skeleton span { animation-play-state:paused; }
@media(max-width:360px) { [data-screen="home"] .home-layout { padding-inline:16px; }.personal-section::before { left:-16px; right:-16px; }.fortune-views { gap:12px; }.personal-heading { flex-wrap:wrap; gap:0; }.personal-heading .home-link-btn { margin-left:auto; }[data-screen="home"] .home-almanac { padding-left:8px; }.home-draw-copy h2 { font-size:var(--guide-heading); }.almanac-details { grid-template-columns:1fr; } }
@media(max-height:740px) { [data-screen="home"] .home-layout { padding-top:12px; --guide-available:calc(100svh - 28px - var(--safe-top) - var(--safe-bot)); }.personal-section { min-height:200px; padding-bottom:12px; }.personal-heading { margin-bottom:8px; }.home-draw-intro { min-height:144px; }.home-draw-intro .home-draw-tube { height:160px; } }
@media(prefers-reduced-motion:reduce) { .fortune-orbit,.fortune-skeleton span { animation:none; } }
/* Form and sheets share the same readable text and control treatment. */
#birthModal .modal-sheet { border-radius:var(--guide-sheet); font-family:var(--guide-ui); }
#birthModal .modal-title { font:600 var(--guide-heading)/1.5 var(--guide-ui); color:var(--guide-brand); }
#birthModal .birth-field-label { font-size:var(--guide-caption); color:var(--guide-muted); letter-spacing:0; }
#birthModal .ai-action-btn--primary { min-height:48px; border-radius:var(--guide-radius); background:var(--guide-brand); box-shadow:none; font:600 var(--guide-heading)/1.5 var(--guide-ui); }
#birthModal .ai-action-btn--text { min-height:44px; font:500 var(--guide-body)/1.5 var(--guide-ui); }
#birthModal .close-btn,.daily-details-close { min-width:44px; min-height:44px; }
#birthModal button:focus-visible,.daily-details-dialog button:focus-visible { outline:2px solid var(--guide-brand); outline-offset:3px; }
.almanac-source { color:var(--guide-muted); font:400 var(--guide-caption)/1.6 var(--guide-ui); }

.home-disclaimer { flex:none; margin:12px 0 0; text-align:center; color:var(--guide-muted); font:400 var(--guide-caption)/1.5 var(--guide-ui); }

/* Birth entry is opt-in: keep the closed form invisible and non-interactive. */
#birthModal[aria-hidden="true"] { visibility:hidden; }