/* ===== Layout after the SOTA dashboard (Viv, 14 Nov 2026): left column + main column of picture cards ===== */
.app { max-width: 1480px; margin: 0 auto; }
main.grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; align-items: start !important; padding-top: 12px !important; }
.side, .maincol { min-width: 0; }
.side { display: contents; }
.side > .orbcol { order: 1; } .side > .clock { order: 2; } .side > .vbar { order: 3; } .maincol { order: 4; } .side > .sideq { order: 5; } .side > .sidefoot { order: 6; }
.maincol { display: flex; flex-direction: column; gap: 22px; }

/* panels: a quiet dark glass, sharp corners */
.side > *, .maincol .ask.glass, .maincol .ask { background: rgba(14,14,14,.62) !important; border: 1px solid rgba(255,255,255,.07) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.side > .clock, .side > .vbar, .side > .sidefoot { padding: 14px 18px; margin: 0; }
.side > .orbcol { padding: 18px 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.side .orbwrap { width: min(100%, 420px); }
.side > .sideq { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sideh { margin: 0; font-family: var(--mincho); font-weight: 400; font-size: 16px; }
.side .qtabs { gap: 18px; flex-wrap: wrap; }
.side .chip { font-size: 14px !important; padding: 10px 0 !important; }
.sidefoot { display: flex; justify-content: flex-end; }
.side > .clock { margin-left: 0; width: auto; }

/* the prompt */
.maincol .ask, .maincol .ask.glass { padding: 26px 28px !important; gap: 16px !important; }
.maincol .ask h1 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics button { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); color: #fff; padding: 8px 14px; font-size: 12.5px; letter-spacing: .04em; cursor: pointer; transition: border-color .25s, background-color .25s; }
.topics button:hover, .topics button:focus-visible { border-color: var(--verm); background: rgba(255,255,255,.07); }
.topics button[hidden] { display: none; }
.maincol .tscript { border-top: 1px solid var(--line); padding-top: 12px; }

/* picture cards */
.covers { display: flex; flex-direction: column; gap: 14px; }
.covh { margin: 0; font-family: var(--mincho); font-weight: 400; font-size: 20px; }
.covgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .covgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .covgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1380px) { .covgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ccard { display: flex; flex-direction: column; padding: 0; text-align: left; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.08); border-top: 2px solid var(--cb, var(--verm)); background: linear-gradient(180deg, color-mix(in srgb, var(--c, #222) 38%, #0a0a0a), #0a0a0a); transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s; min-width: 0; }
.ccard:hover, .ccard:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.55); }
.ccard.on { border-color: var(--cb); box-shadow: 0 0 0 1px var(--cb); }
.cimg { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, color-mix(in srgb, var(--c, #333) 80%, transparent), #080808 75%); position: relative; }
.cimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ccard:hover .cimg img { transform: scale(1.05); }
.csvg { position: absolute; inset: 8%; display: grid; place-items: center; }
.csvg svg { width: 100%; height: 100%; }
.ctype { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12px; font-family: var(--mincho); color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .08em; }
.ctype b { font-weight: 400; font-size: 46px; line-height: 1; color: var(--cb); }
.ctype i { font-style: normal; font-size: 17px; line-height: 1.3; }
.cmeta { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 13px; min-width: 0; }
.cnum { font-family: var(--mincho); font-size: 20px; color: var(--cb); flex: none; }
.ctitle { font-size: 13px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ccard, .cimg img { transition: none; } .ccard:hover { transform: none; } }

/* the open card */
.tiles.staged { display: block !important; position: relative; }
.tiles.staged:not(.has-open) { display: none !important; }
.tiles.staged .tile.asked { min-height: 0 !important; padding: 34px 28px 30px 72px !important; border: 1px solid rgba(255,255,255,.08) !important; background-color: rgba(10,10,10,.7) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: none !important; opacity: 1 !important; }
.tiles.staged .tile.asked h2 .jp { left: 22px; top: 38px; }
.stageclose { position: absolute; top: 12px; right: 14px; z-index: 5; border: 0; background: none; color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 6px 0; border-bottom: 1px solid var(--verm); }
.stageclose:hover { color: #fff; }
.stagebar { display: none !important; }

/* desktop: left column sticks */
@media (min-width: 980px) {
  main.grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important; gap: 24px !important; }
  .side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; scrollbar-width: thin; }
  .maincol { order: 0; }
  .side .orbwrap { width: 100%; }
}
@media (max-width: 699px) {
  .maincol .ask, .maincol .ask.glass { padding: 20px 16px !important; }
  .tiles.staged .tile.asked { padding: 40px 14px 24px 44px !important; }
  .tiles.staged .tile.asked h2 .jp { left: 12px; top: 44px; }
}
.side { scrollbar-color: rgba(255,255,255,.12) transparent; }
.stagebtns { position: absolute; top: 12px; right: 14px; z-index: 5; display: flex; gap: 22px; }
.stagebtns[hidden] { display: none; }
.stagebtns .stageclose { position: static; }
.stagepriv { border: 0; background: none; color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.stagepriv:hover { color: #fff; }
html[data-theme="english"] .stagebtns { top: 22px; right: 26px; }

/* the globe's stand (Viv, 14 Nov 2026) */
.side > * { flex-shrink: 0; }
.orbwrap { margin-bottom: 9%; }
.stand { position: absolute; left: 14.5%; width: 71%; top: 76.2%; z-index: 2; pointer-events: none; overflow: visible; }
.stand .st-accent { stop-color: var(--verm); }
/* stand left out (Viv, 14 Nov 2026) */
.stand { display: none !important; }
.orbwrap { margin-bottom: 0; }

/* one font everywhere, matching Dani's Intelli Voice dashboards (Viv, 14 Nov 2026): Poppins; Japanese characters fall back to a clean sans */
:root { --mincho: 'Poppins', 'Yu Gothic UI', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif; }
body, .app, .setdlg, .pindlg { font-family: var(--mincho); }
.ask h1, .covh, .sideh, .tile h2, .brand b, .ctext b, .sethead h2, .setsec h3, .sethelp summary, .caldate, .calhead b, .pindlg h2 { font-weight: 500 !important; letter-spacing: 0 !important; }
.chip, .bands li, .food li, .flavour b, .pop b, .facts, .owntext, .calevents .cn, .typer input { letter-spacing: 0 !important; }
.helplang { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.helplang button { border: 1px solid rgba(255,255,255,.16); background: none; color: rgba(255,255,255,.7); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.helplang button[aria-checked="true"] { border-color: var(--verm); color: #fff; }
#helpbody[dir="rtl"] { padding-left: 0; padding-right: 20px; text-align: right; }
#helpbody[lang="ml"], #helpbody[lang="ar"] { font-size: 15px; line-height: 1.75; }

/* contact card and astrology notes (Viv, 14 Nov 2026) */
.tile[data-id="contact"] { --c: #10405e; --cb: #5ab8ff; }
.tile[data-id="japanastro"] { --c: #5a1020; --cb: #ff6b85; }
.contactlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contactlist li { display: flex; gap: 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.contactlist .ck { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); min-width: 92px; }
.contactlist a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--cb); word-break: break-all; }
#vcard { align-self: flex-start; margin-top: 8px; }
.astronote { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; max-width: 760px; }
.astronote summary { cursor: pointer; font-size: 14px; color: var(--cb, var(--verm)); }
.astronote dl { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
.astronote dt { font-weight: 500; font-size: 14px; color: #fff; margin-top: 10px; }
.astronote dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
@media (min-width: 900px) { .astronote dl { grid-template-columns: 220px minmax(0, 1fr); gap: 10px 22px; } .astronote dt { margin-top: 0; } }
.kirow { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.kisquare { width: 150px; height: 150px; flex: none; }
.kisquare rect { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.25); stroke-width: .6; }
.kisquare text { fill: rgba(255,255,255,.7); font-size: 13px; font-family: var(--mincho); }
.kisquare .main rect { fill: color-mix(in srgb, var(--cb) 40%, transparent); stroke: var(--cb); }
.kisquare .month rect { fill: color-mix(in srgb, var(--cb) 16%, transparent); stroke: var(--cb); stroke-dasharray: 2 2; }
.kisquare .main text, .kisquare .month text { fill: #fff; font-weight: 500; }
.kj { color: var(--cb); margin-left: 8px; }
.japanastro .facts { display: flex !important; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.japanastro .facts li { display: grid; grid-template-columns: 110px auto; gap: 4px 12px; font-size: 15px; }
.japanastro .facts li b { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.japanastro .facts .kj { grid-column: 2; margin-left: 0; }

/* one language per theme: hide text written in the other scripts (Viv, 14 Nov 2026) */
html:not([lang="ja"]) [lang="ja"], html:not([lang="ml"]) [lang="ml"], html:not([lang="ar"]) [lang="ar"], html:not([lang="en"]) [lang="en"] { display: none !important; }
#vp-lang { display: none !important; }
.tscript .tx { display: none !important; }
/* Malayalam and Arabic greetings are recorded now: the greeting bar shows on every theme */
html[lang="ja"] .setvoices [data-vl="en"], html[lang="en"] .setvoices [data-vl="ja"], html[lang="ja"] .vonly[data-vl="en"] { display: none; }
html[lang="ml"] .setvoices, html[lang="ar"] .setvoices, html[lang="ml"] .vonly, html[lang="ar"] .vonly, html[lang="ml"] #set-voice, html[lang="ar"] #set-voice { display: none !important; }
html[lang="ja"] .novoice, html[lang="en"] .novoice { display: none; }
html[lang="ja"] .kj { display: none; }
html[lang="ml"] body, html[lang="ml"] .app { font-family: 'Poppins', 'Nirmala UI', 'Noto Sans Malayalam', 'Manjari', sans-serif; }
html[lang="ar"] body, html[lang="ar"] .app { font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', 'Tahoma', sans-serif; }
html[dir="rtl"] .astronote dl, html[dir="rtl"] .contactlist, html[dir="rtl"] #helpbody { text-align: right; }
html[dir="rtl"] .setsteps, html[dir="rtl"] .sethelp ol { padding-left: 0; padding-right: 20px; }
/* the original Malayalam / Japanese words beside an English term would repeat once the term is translated */
html[lang="ml"] .tile[data-id="kerala"] [lang="ml"], html[lang="ja"] .tile[data-id="ice"] [lang="ja"], html[lang="ja"] .tile .flavours [lang="ja"] { display: none !important; }
.tile[data-id="kerala"] .ml, .tscript .ml { display: none !important; }

/* quick language switch: the theme's language or English */
.langsw { margin-left: auto; display: inline-flex; border: 1px solid rgba(255,255,255,.18); }
.langsw[hidden] { display: none; }
.langsw button, .langsw [lang] { display: inline-flex !important; align-items: center; border: 0; background: none; color: rgba(255,255,255,.65); font-size: 12.5px; padding: 6px 12px; cursor: pointer; font-family: 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; }
.langsw button[aria-checked="true"] { background: var(--verm); color: #fff; }
/* microphone */
.typer { position: relative; }
.micbtn { flex: none; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: none; color: #fff; cursor: pointer; margin-left: 8px; }
.micbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.micbtn svg rect { fill: currentColor; stroke: none; }
.micbtn.on { border-color: var(--verm); color: var(--verm); animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--verm) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .micbtn.on { animation: none; } }
html .langsw button[lang] { display: inline-flex !important; }

/* one voice note per language */
html[lang="ml"] .novoice[data-nv="ar"], html[lang="ar"] .novoice[data-nv="ml"] { display: none; }

/* the decorative 問い mark belongs to the Japanese theme only */
html:not([lang="ja"]) #welcome .jp { display: none; }

/* four-language switch on top: compact, wraps on small phones */
.langsw { flex-wrap: wrap; }
.langsw button { padding: 6px 10px !important; font-size: 12.5px !important; }
@media (max-width: 520px) { .langsw { margin-left: 0; width: 100%; justify-content: stretch; } .langsw button { flex: 1 1 25%; justify-content: center; padding: 7px 4px !important; } }