/* Photo-led editorial pages with a single color interlude in each reading. */
:root { --bg:#f5f4ef; --ink:#20211e; --accent:#45483d; }
body { background:#ddded9; }
.edition-cover { display:none; }
#screen-mode .mode-select { padding:26px 22px 32px; display:grid; gap:30px; }
#screen-mode .mode-card { display:grid; grid-template-columns:1fr auto; border:0; padding:0; gap:8px 12px; overflow:visible; }
.mode-index { grid-column:1/-1; font:9px var(--font-display); letter-spacing:1.1px; padding-bottom:4px; color:var(--ink-soft); }
.mode-cover-image { grid-column:1/-1; display:block; width:100%; height:180px; object-fit:cover; filter:grayscale(1); }
#screen-mode .mode-card:nth-child(2) .mode-cover-image { height:145px; object-position:center 65%; }
#screen-mode .mode-card .mode-name { font:400 46px/1 var(--font-display); letter-spacing:-2px; margin:2px 0 0; }
#screen-mode .mode-card .mode-desc { grid-column:1/-1; margin:0; font-size:11px; }
#screen-mode .mode-card:after { position:static; grid-column:2; grid-row:3; align-self:center; color:var(--ink); }
#screen-mode .mode-card:hover .mode-name { color:var(--ink); }
#screen-mode .mode-card:hover .mode-cover-image { filter:grayscale(.7); }
#screen-home .home-figure { height:275px; }
#screen-home .home-figure img { width:100%; }
#screen-home .home-figure:after { display:none; }
#screen-home .intent-step { padding:15px 0; }
#screen-home .intent-step .label { font:400 25px/1.1 var(--font-display); letter-spacing:-.8px; }
.tv-screen { background:var(--bg); --tv-paper:#faf9f5; }
.tv-screen .tv-dashboard-photo { left:0; }
.tv-screen .tv-dashboard-head { min-height:290px; }
.tv-screen .tv-dashboard-head h1 { color:var(--ink); font:400 43px/.98 var(--font-display); letter-spacing:-1.9px; width:78%; }
.tv-screen .tv-intro h1 { font:400 42px/1.02 var(--font-display); color:var(--ink); letter-spacing:-1.6px; }
.tv-screen .tv-section-heading h2 { font:400 28px/1.1 var(--font-display); letter-spacing:-1px; }
.tv-screen .tv-tabs [aria-current] { color:var(--ink); }
.tv-screen .tv-explore { display:block; width:100%; margin:-4px 0 22px; padding:12px 0; text-align:left; border:0; background:none; color:var(--ink); font:12px var(--font-body); }
.tv-screen .tv-tabs [aria-current]:after { background:var(--ink); }
.tv-screen .tv-period .tv-kicker { color:var(--ink-soft); }
[data-tone="rose"] { --wash:#e4beca; --bloom:#cf839e; }
[data-tone="ochre"] { --wash:#e5d4b4; --bloom:#c99755; }
[data-tone="sage"] { --wash:#cfdbca; --bloom:#8fa88a; }
[data-tone="blue"] { --wash:#c9d9df; --bloom:#819fb9; }
[data-tone="lilac"] { --wash:#d7d0e0; --bloom:#a092bb; }
.gradient-interlude,.tv-screen .tv-quote-card.gradient-interlude { background:radial-gradient(ellipse at 85% 90%,var(--bloom,#a092bb),transparent 64%),linear-gradient(170deg,#efeee8 0%,var(--wash,#d7d0e0) 65%,var(--bloom,#a092bb) 100%); color:#242321; border:0; padding:34px 24px 28px; margin:22px 0 28px; min-height:200px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.gradient-interlude:before { content:none; font:300 28px/1 var(--font-headline); position:absolute; top:15px; right:17px; opacity:.45; }
.reading-quote.gradient-interlude { font:300 38px/1.13 var(--font-headline); }
.tv-screen .gradient-interlude>p { font-size:35px; line-height:1.16; }
.tv-screen .gradient-interlude .tv-quote-line { background:#242321; opacity:.5; }
.tv-screen #oracle-badge-title.gradient-interlude { font:300 37px/1.15 var(--font-headline); }
#tv-palace-map { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,78px); border-top:1px solid var(--line); border-left:1px solid var(--line); margin:18px 0 24px; }
#tv-palace-map>button { min-width:0; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; padding:9px 4px; display:flex; flex-direction:column; justify-content:center; gap:7px; color:var(--ink); }
#tv-palace-map>button small { font:9px var(--font-body); color:var(--ink-soft); }
#tv-palace-map>button span { font:500 10px/1.3 var(--font-body); }
#tv-palace-map>button[aria-pressed="true"] { background:var(--ink); color:#fff; }
#tv-palace-map>button[aria-pressed="true"] small { color:#deddd5; }
#tv-palace-map>button:disabled { opacity:.35; cursor:default; }
.palace-map-center { grid-column:2/4; grid-row:2/4; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:16px 4px; background:radial-gradient(ellipse at bottom,var(--wash,#d7d0e0),#f5f4ef 90%); }
.palace-map-center>span { font:8px var(--font-display); letter-spacing:.8px; }
.palace-map-center>strong { font:300 32px/.95 var(--font-headline); text-align:center; }
.tv-screen .tv-palace.palace-selected { border-top:1px solid var(--ink); animation:item-arrive .3s ease both; }
.tv-screen .palace-selected summary strong { font:400 22px var(--font-display); letter-spacing:-.6px; }
.tv-screen .palace-selected .tv-palace-body { border-left:3px solid var(--bloom); padding-left:15px; }
@media(max-width:350px) { .mode-cover-image { height:150px; }#screen-mode .mode-card .mode-name { font-size:40px; }.tv-screen .tv-dashboard-head h1 { font-size:36px; }#tv-palace-map { grid-template-rows:repeat(4,69px); }.palace-map-center>strong { font-size:28px; }.gradient-interlude,.tv-screen .tv-quote-card.gradient-interlude { padding:32px 20px 24px; }.tv-screen .gradient-interlude>p { font-size:30px; } }

/* Serif journal chapters; color washes vertically into paper white. */
.gradient-interlude,.tv-screen .tv-quote-card.gradient-interlude { background:linear-gradient(to bottom,var(--bloom,#a092bb) 0%,var(--wash,#d7d0e0) 28%,#fff 100%); }
#screen-mode .mode-card .mode-name { font:300 62px/.98 var(--font-headline); letter-spacing:-1.4px; }
#screen-home .intent-step .label { font:300 29px/1.05 var(--font-headline); letter-spacing:0; }
.tv-screen .tv-dashboard-head h1 { font:300 57px/.95 var(--font-headline); letter-spacing:-1px; }
.tv-screen .tv-intro h1 { font:300 51px/.97 var(--font-headline); letter-spacing:-1px; }
.tv-screen .tv-section-heading h2 { font:300 32px/1.1 var(--font-headline); }
.tv-screen .palace-selected summary strong { font:300 27px/1.05 var(--font-headline); }
.tv-journal { border-top:1px solid var(--ink); }
.tv-chapter { border-bottom:1px solid var(--line); }
.tv-chapter>summary { display:flex; align-items:baseline; gap:17px; padding:24px 0; cursor:pointer; list-style:none; }
.tv-chapter>summary::-webkit-details-marker { display:none; }
.tv-chapter>summary small { font:9px var(--font-display); color:var(--ink-soft); }
.tv-chapter>summary span { font:300 39px/1.05 var(--font-headline); letter-spacing:-.5px; }
.tv-chapter>summary b { font:300 22px var(--font-body); margin-left:auto; transition:transform .2s; }
.tv-chapter[open]>summary b { transform:rotate(45deg); }
.tv-chapter>.tv-panel { padding-bottom:28px; animation:item-arrive .3s ease both; }
.tv-chapter .tv-period { margin-top:3px; }
.tv-chapter .tv-period .tv-kicker { display:none; }
#drawmore-btn { border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); padding:14px 18px; margin-top:18px; margin-bottom:18px; }
@media(max-width:350px) { .tv-screen .tv-dashboard-head h1 { font-size:48px; }.tv-screen .tv-intro h1 { font-size:43px; }.tv-chapter>summary span { font-size:33px; } }

/* Modern Inter interface, with serif reserved for the reading itself. */
:root { --font-display:'Inter',-apple-system,sans-serif; }
#screen-mode { background:#f5f4ef; }
#screen-mode .topbar { border:0; }
.mode-intro { padding:36px 24px 32px; }
.mode-intro>span { font:500 8px/1.6 var(--font-body); letter-spacing:1.8px; color:#74776d; }
.mode-intro h1 { font:400 clamp(30px,8.2vw,37px)/1.15 var(--font-body); letter-spacing:-1.7px; margin:17px 0 0; }
#screen-mode .mode-select { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; padding:0 24px 32px; }
#screen-mode .mode-card { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:0; border:0; position:relative; }
#screen-mode .mode-card:nth-child(2) { padding-top:38px; }
#screen-mode .mode-index { font-size:7px; letter-spacing:.6px; padding:0 0 10px; }
#screen-mode .mode-cover-image,#screen-mode .mode-card:nth-child(2) .mode-cover-image { height:200px; width:100%; object-fit:cover; }
#screen-mode .mode-card .mode-name { font:500 25px/1.15 var(--font-body); letter-spacing:-1px; padding-top:15px; padding-right:25px; margin:0; }
#screen-mode .mode-card .mode-desc { font:400 10px/1.8 var(--font-body); margin:10px 0 0; color:#70736a; padding-top:10px; border-top:1px solid var(--line); }
#screen-mode .mode-card:after { position:absolute; top:236px; right:0; font-size:19px; }
#screen-mode .mode-card:nth-child(2):after { top:274px; }
#screen-mode .mode-card:hover { transform:translateY(-3px); }
#screen-mode .mode-card:hover .mode-name { color:#585d4b; }
#screen-home .justify-line span { font:400 clamp(26px,7.4vw,34px)/1.16 var(--font-body); letter-spacing:-1.3px; }
#screen-home .intent-step .label { font:400 23px/1.2 var(--font-body); letter-spacing:-.7px; }
.tv-screen .tv-dashboard-head h1,.tv-screen .tv-intro h1 { font:400 38px/1.09 var(--font-body); letter-spacing:-1.6px; }
.tv-screen .tv-section-heading h2,.tv-screen .palace-selected summary strong { font:400 25px/1.15 var(--font-body); letter-spacing:-.8px; }
.tv-chapter>summary span { font:400 29px/1.12 var(--font-body); letter-spacing:-1px; }
.tv-screen .tv-chapter>summary { padding:25px 0; }
@media(max-width:350px) { .mode-intro { padding:28px 20px; }#screen-mode .mode-select { padding:0 20px 26px; gap:12px; }#screen-mode .mode-cover-image,#screen-mode .mode-card:nth-child(2) .mode-cover-image { height:165px; }#screen-mode .mode-card:after { top:201px; }#screen-mode .mode-card:nth-child(2):after { top:239px; }.tv-screen .tv-dashboard-head h1,.tv-screen .tv-intro h1 { font-size:33px; }.tv-chapter>summary span { font-size:25px; } }

/* Manrope for reading copy and controls; retain the original serif headings. */
:root { --font-body:'Manrope',-apple-system,sans-serif; --font-display:'Manrope',-apple-system,sans-serif; }
#screen-mode .mode-card .mode-name { font:300 38px/1 var(--font-headline); letter-spacing:-.7px; }
#screen-home .justify-line span { font:300 clamp(36px,10vw,49px)/.98 var(--font-headline); letter-spacing:-1px; }
#screen-home .intent-step .label { font:300 29px/1.05 var(--font-headline); letter-spacing:0; }
.tv-screen .tv-dashboard-head h1 { font:300 57px/.95 var(--font-headline); letter-spacing:-1px; }
.tv-screen .tv-intro h1 { font:300 51px/.97 var(--font-headline); letter-spacing:-1px; }
.tv-screen .tv-section-heading h2 { font:300 32px/1.1 var(--font-headline); }
.tv-screen .palace-selected summary strong { font:300 27px/1.05 var(--font-headline); }
.tv-chapter>summary span { font:300 39px/1.05 var(--font-headline); letter-spacing:-.5px; }
.mode-intro h1 { font:300 47px/1.02 var(--font-headline); letter-spacing:-.7px; }
@media(max-width:350px) { .tv-screen .tv-dashboard-head h1 { font-size:48px; }.tv-screen .tv-intro h1 { font-size:43px; }.tv-chapter>summary span { font-size:33px; }.mode-intro h1 { font-size:41px; } }

.tv-screen .tv-day-rating { margin-left:auto; text-align:right; min-width:76px; color:#376247; }
.tv-screen .tv-day-rating>strong { display:block; font:500 19px/1.2 var(--font-body); color:inherit; margin:0; }
.tv-day-rating strong small { font-size:9px; margin-left:2px; opacity:.7; }
.tv-day-rating>span { display:block; font:10px/1.5 var(--font-body); margin-top:3px; }
.tv-screen .tv-day-rating[data-level="amber"] { color:#956118; }
.tv-screen .tv-day-rating[data-level="red"] { color:#ac4541; }
.tv-screen .tv-day-rating[data-level="unknown"] { color:#77776e; }
.tv-screen .tv-day summary .tv-plus { display:none; }
.tv-score-info { font:10px/1.8 var(--font-body); color:var(--ink-soft); margin:0 0 16px; }
.tv-score-info summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.tv-score-info p { margin-top:10px; }
.tv-screen .tv-rating-reason { font-size:10px; color:var(--ink-soft); margin-bottom:12px; }

/* Lead with the interactive chart, keeping the journal compact. */
.tv-screen .tv-dashboard-head { min-height:0; padding:18px 0 24px; margin-bottom:0; }
.tv-screen .tv-dashboard-head h1 { width:100%; padding:0; font-size:46px; }
.tv-screen .tv-dashboard-head h1 br { display:none; }
.tv-screen .tv-dashboard-head h1 em:before { content:' '; }
.tv-screen .tv-dashboard-photo,.tv-star { display:none; }
.tv-screen #tv-profile-summary { margin:12px 0 0; }
.tv-chapter[data-chapter="chart"]>.tv-panel { padding-bottom:24px; }
.tv-chapter[data-chapter="chart"] .tv-period h2 { display:none; }
.tv-chapter[data-chapter="chart"] .tv-period { justify-content:flex-end; margin:0; }
#tv-palace-map { margin:10px 0 0; grid-template-rows:repeat(4,80px); }
.palace-map-center { background:linear-gradient(to bottom,var(--wash,#d7d0e0),#fff); padding:18px 8px; }
.palace-map-center>strong { font-size:37px; line-height:1.05; }
.palace-map-center>span { font:8px/1.6 var(--font-body); text-align:center; letter-spacing:.4px; }
#tv-palace-map>button { transition:background .2s,color .2s; position:relative; }
#tv-palace-map>button[data-relation="opposite"] { box-shadow:inset 0 -3px 0 var(--bloom,#a092bb); }
#tv-palace-map>button[data-relation="trine"] { background:var(--wash,#d7d0e0); }
#tv-palace-map>button[aria-pressed="true"] { background:var(--ink); }
#tv-palace-map>button:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; }
#tv-map-legend { display:flex; gap:12px; align-items:center; font:9px/1.5 var(--font-body); color:var(--ink-soft); margin:12px 0 24px; }
#tv-map-legend>span:first-child { margin-right:auto; }
#tv-map-legend i { display:inline-block; width:9px; height:9px; margin-right:4px; background:#d7d0e0; }
#tv-map-legend .map-opposite { height:3px; background:#a092bb; vertical-align:middle; }
@media(max-width:350px) { #tv-palace-map { grid-template-rows:repeat(4,70px); }.palace-map-center>strong { font-size:30px; } }

#tv-map-legend i { background:var(--wash,#d7d0e0); }
#tv-map-legend .map-opposite { background:var(--bloom,#a092bb); }

/* Daily reading is the permanent opening section. */
html,body,#app { background:var(--bg); overscroll-behavior-y:none; }
html { scrollbar-width:thin; scrollbar-color:#b9b8b0 transparent; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#b9b8b0; border-radius:4px; }
.tv-screen .tv-dashboard-head { display:none; }
.tv-journal { border-top:0; }
.tv-today-heading { padding:24px 0 18px; }
.tv-today-heading h1 { font:300 57px/1 var(--font-headline); letter-spacing:-1px; margin:0; }
@media(pointer:coarse) { html,body,.screen,.reading-body { scrollbar-width:none; } ::-webkit-scrollbar { display:none; } }

.push-settings { margin:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.push-settings h2 { font:300 36px/1.1 var(--font-headline); margin:0 0 12px; }
.push-settings p { font:11px/1.7 var(--font-body); color:var(--ink-soft); margin:12px 0; }
.push-settings label { display:block; font:11px var(--font-body); margin:20px 0 9px; }
.push-settings select { width:100%; padding:12px; background:transparent; color:var(--ink); border:1px solid var(--line); font:14px var(--font-body); }
.push-actions { display:flex; gap:12px; margin-top:14px; }
.push-actions button { padding:12px 16px; background:var(--ink); color:var(--bg); border:1px solid var(--ink); font:11px var(--font-body); cursor:pointer; }
.push-actions button:disabled { opacity:.5; }
.push-actions #push-test { background:transparent; color:var(--ink); }

.tv-header-actions { display:flex; align-items:center; gap:12px; }

.tv-read-deeper { margin:14px 0; font:12px/1.8 var(--font-body); }
.tv-read-deeper summary { cursor:pointer; font:11px/1.6 var(--font-body); text-decoration:underline; text-underline-offset:4px; }
.tv-read-deeper p,.tv-read-deeper ul { margin-top:12px; font:13px/1.8 var(--font-body); }
.tv-read-deeper ul { padding-left:18px; }
.tv-situation { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.tv-situation>summary { display:flex; justify-content:space-between; cursor:pointer; list-style:none; font:300 29px/1.2 var(--font-headline); }
.tv-situation label { display:block; margin:20px 0 10px; font:11px var(--font-body); }
.tv-situation textarea { width:100%; padding:12px; border:1px solid var(--line); background:transparent; color:var(--ink); font:13px/1.7 var(--font-body); resize:vertical; }
.tv-situation button { margin:14px 0; }
.tv-situation-result { font:13px/1.8 var(--font-body); }
.tv-situation-result h3 { font:300 30px var(--font-headline); margin:20px 0 12px; }
.tv-situation-result h4 { font:600 11px var(--font-body); margin:18px 0 8px; }