/* Wide-screen layout for AstroArc. Loaded only from 1040px (see the <link> in index.html) and scoped to html.desk,
   which main.js sets when the admin setting "desktop_layout" is on. Nothing here changes the phone layout.
   To remove the experiment: switch the setting off, or delete the <link> and this file. */
html.desk { --col: 760px; --side: 236px; }

/* ---- side menu instead of the bottom bar ---- */
html.desk .tabbar { top: 0; bottom: 0; right: auto; width: var(--side); padding: 22px 14px 18px; border-top: 0; border-right: 1px solid var(--line); background: rgba(16, 10, 30, .82); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
html.desk .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; text-decoration: none; color: var(--brass-hi); font: 600 1.5rem var(--display); letter-spacing: .02em; }
html.desk .side-brand img { width: 38px; height: 38px; border-radius: 11px; }
html.desk .tabbar ul { display: grid; grid-template-columns: 1fr; gap: 3px; height: auto; max-width: none; margin: 0; }
html.desk .tabbar a[data-tab], html.desk .tabbar a[data-side] { flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 14px; border-radius: 14px; font-size: .98rem; color: var(--soft); transition: background .2s, color .2s; }
html.desk .tabbar a[data-tab]:hover, html.desk .tabbar a[data-side]:hover { background: rgba(210, 174, 102, .1); color: var(--parchment); }
html.desk .tabbar a[aria-current='page'] { background: linear-gradient(90deg, rgba(210, 174, 102, .22), rgba(210, 174, 102, .04)); color: var(--brass-hi); }
html.desk .tabbar a::after { display: none; }
html.desk .tabbar a svg, html.desk .tabbar a[aria-current='page'] svg { width: 22px; height: 22px; transform: none; }
html.desk .tabbar a span { transform: none; }
html.desk .side-more { display: grid !important; margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid var(--line); }
html.desk .tabbar a[data-side] { height: 38px; font-size: .92rem; padding-left: 20px; }
html.desk .tabbar a[data-side]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
html.desk .tabbar:has([data-side][aria-current]) a[data-tab='today'] { background: none; color: var(--soft); }
html.desk .side-foot { display: flex; flex-direction: column; gap: 6px; margin: auto 0 0; padding: 14px 14px 0; font-size: .82rem; }
html.desk .side-foot a { color: var(--muted); text-decoration: none; } html.desk .side-foot a:hover { color: var(--brass-hi); }

/* ---- content beside the menu ---- */
html.desk #view.in-app { margin-left: var(--side); }
html.desk #view.in-app .screen { padding: 38px 0 64px; }
html.desk #view.in-app .wrap { padding: 0 36px; }
html.desk #toast { left: calc(50% + var(--side) / 2); }

/* two-column pages share one grid recipe: full-width intro rows, then a main and a side column */
html.desk #view.in-app[data-view='today'] .wrap, html.desk #view.in-app[data-view='calendar'] .wrap, html.desk #view.in-app[data-view='chart'] .wrap { display: grid; column-gap: 44px; row-gap: 26px; align-items: start; }
html.desk #view.in-app[data-view='today'] .wrap > *, html.desk #view.in-app[data-view='calendar'] .wrap > *, html.desk #view.in-app[data-view='chart'] .wrap > * { margin-top: 0; grid-column: 1; }

/* Today: the personal space on the left, the card of the day and the week on the right */
html.desk #view.in-app[data-view='today'] .wrap { max-width: 1180px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
html.desk #view.in-app[data-view='today'] .wrap > header, html.desk #view.in-app[data-view='today'] .wrap > .banner, html.desk #view.in-app[data-view='today'] .wrap > .cusp, html.desk #view.in-app[data-view='today'] .wrap > .row { grid-column: 1 / -1; }
html.desk #view.in-app[data-view='today'] .wrap > hr { display: none; }
html.desk #view.in-app[data-view='today'] #space-hub { grid-column: 1; grid-row: span 4; }
html.desk #view.in-app[data-view='today'] .wrap > section { grid-column: 2; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(30, 21, 52, .55); backdrop-filter: blur(6px); }
html.desk #view.in-app[data-view='today'] .tiles { grid-template-columns: repeat(3, 1fr); }
html.desk #view.in-app[data-view='today'] .daily { grid-template-columns: 150px 1fr; }

/* Calendar: the month on the left, the chosen day on the right, staying in view */
html.desk #view.in-app[data-view='calendar'] .wrap { max-width: 1180px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
html.desk #view.in-app[data-view='calendar'] #day { grid-column: 2; grid-row: span 3; position: sticky; top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(30, 21, 52, .6); backdrop-filter: blur(6px); }
html.desk #view.in-app[data-view='calendar'] .cal button { min-height: 86px; }
html.desk #view.in-app[data-view='calendar'] #list { grid-column: 1 / -1; columns: 2; column-gap: 44px; }
html.desk #view.in-app[data-view='calendar'] .next-day { break-inside: avoid; }

/* Chart: the wheel stays on the left while the tables scroll on the right */
html.desk #view.in-app[data-view='chart'] .wrap { max-width: 1180px; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); }
html.desk #view.in-app[data-view='chart'] .wrap > h1, html.desk #view.in-app[data-view='chart'] .wrap > p, html.desk #view.in-app[data-view='chart'] .wrap > .banner { grid-column: 1 / -1; }
html.desk #view.in-app[data-view='chart'] .wheel { grid-column: 1; grid-row: span 9; position: sticky; top: 28px; width: 100%; }
html.desk #view.in-app[data-view='chart'] .wheel ~ * { grid-column: 2; }

/* single-column pages get a little more room */
html.desk #view.in-app[data-view='insights'] .wrap, html.desk #view.in-app[data-view='life'] .wrap, html.desk #view.in-app[data-view='birthtime'] .wrap, html.desk #view.in-app[data-view='progressions'] .wrap { max-width: 880px; }
html.desk .pr-pair { grid-template-columns: 1fr 1fr; }
html.desk #view.in-app[data-view='insights'] .stats { grid-template-columns: repeat(4, 1fr); }
html.desk #view.in-app[data-view='tarot'] .wrap { max-width: 820px; }

/* menu details: the brand and the footer links are not tab buttons */
html.desk .tabbar a.side-brand { flex-direction: row; justify-content: flex-start; height: auto; }
html.desk .side-foot a { flex-direction: row; justify-content: flex-start; height: auto; font-size: .82rem; }
/* painted headers: the whole picture, never cropped, beside the title and the lead */
html.desk #view.in-app .pagehead { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 44px; align-items: center; }
html.desk #view.in-app .pagehead .scene { margin: 0; order: -1; }
html.desk #view.in-app .pagehead .scene figcaption { display: none; }
html.desk #view.in-app .pagehead .ph-text { margin: 0; }
html.desk #view.in-app .pagehead h1 { display: block; font-size: 3rem !important; }
html.desk #view.in-app .pagehead .ph-dup + .lead { margin-top: 14px; }
html.desk #view.in-app .scene { max-width: 660px; margin-left: auto; margin-right: auto; }
html.desk #view.in-app .pagehead .scene { max-width: none; }
html.desk #view.in-app[data-view='calendar'] .wrap { row-gap: 18px; }
html.desk #view.in-app[data-view='calendar'] .wrap > .pagehead, html.desk #view.in-app[data-view='calendar'] .wrap > .lead, html.desk #view.in-app[data-view='calendar'] .wrap > h1 { grid-column: 1 / -1; }