/* ===== Alex panel: clock, settings page, cards on ask, colourful snapshot (14 Nov 2026) ===== */
.tile[hidden] { display: none !important; }
/* one colour per card, deep jewel tones on black */
.tile { --c: #7a210e; --cb: #ff7a4d; }
.tile[data-id="music"] { --c: #7d0f22; --cb: #ff4d6a; }
.tile[data-id="pop"] { --c: #23237f; --cb: #8d8dff; }
.tile[data-id="food"] { --c: #7a3f06; --cb: #ffad42; }
.tile[data-id="ice"] { --c: #6e1f48; --cb: #ff8fc4; }
.tile[data-id="travel"] { --c: #064f52; --cb: #3fe0d0; }
.tile[data-id="manga"] { --c: #42135f; --cb: #c58cff; }
.tile[data-id="western"] { --c: #0e2b63; --cb: #6fa8ff; }
.tile[data-id="kerala"] { --c: #0b4f24; --cb: #5fe08a; }
.tile[data-id="calendar"] { --c: #7a210e; --cb: #ff7a4d; }
.tile.own { --c: #5c4a08; --cb: #f2cf4a; }
.tile h2 .jp { color: var(--cb) !important; }
.tile h2 .jp::after { background: var(--cb) !important; opacity: .45; }
.tiles.staged .tile.asked { background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%) !important; }

/* cards appear only when asked */
.tiles.staged:not(.snap) .tile:not(.asked) { display: none !important; }
.stagebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); grid-column: 1 / -1; }
.stagehint { margin: 0; font-family: var(--mincho); color: rgba(255,255,255,.45); font-size: 14px; }
.snapbtn { margin-left: auto; border: 0; background: none; color: #fff; cursor: pointer; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--verm); }
.snapbtn span { font-family: var(--mincho); letter-spacing: .2em; color: var(--verm); text-transform: none; }

/* one-screen snapshot of every card */
.tiles.snap { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; column-gap: 10px !important; }
@media (min-width: 900px) { .tiles.snap { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1400px) { .tiles.snap { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.tiles.snap .tile, .tiles.snap .tile.glass { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; height: 210px; overflow: hidden; padding: 20px 20px 0 !important; justify-content: flex-start !important; border: 0 !important; border-top: 2px solid var(--cb) !important; cursor: pointer; opacity: 1 !important; transform: none;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--c) 85%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #080808), #080808) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s; }
.tiles.snap .tile:hover { transform: translateY(-3px); filter: brightness(1.15); }
.tiles.snap .tile > *:not(h2) { pointer-events: none; transform: scale(.82); transform-origin: top left; width: 122%; }
.tiles.snap .tile h2 { font-size: 19px !important; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tiles.snap .tile h2 .jp { position: static !important; writing-mode: horizontal-tb; font-size: 15px !important; letter-spacing: .25em; }
.tiles.snap .tile h2 .jp::after { display: none; }
.tiles.snap .privsw { display: none; }
@media (max-width: 699px) { .tiles.snap .tile, .tiles.snap .tile.glass { height: 168px; padding: 16px 14px 0 !important; } .tiles.snap .tile h2 { font-size: 16px !important; } }
@media (prefers-reduced-motion: reduce) { .tiles.snap .tile { transition: none; } }

/* own cards */
.owncar { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; max-width: 620px; }
.owncar.many { grid-auto-columns: 86%; }
.owncar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; display: block; }
.owntext { font-family: var(--mincho); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 620px; margin: 0; }

/* header: clock and settings */
.top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.clock { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dial { width: 44px; height: 44px; flex: none; }
.dial .ring { fill: none; stroke: rgba(255,255,255,.18); stroke-width: .8; }
.dial line { stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-linecap: round; }
.dial line.min { stroke: rgba(255,255,255,.18); stroke-width: .7; }
.dial line.noon { stroke: var(--verm); stroke-width: 1.8; }
.dial .hh { stroke: #fff; stroke-width: 2.6; }
.dial .mh { stroke: #fff; stroke-width: 1.6; }
.dial .sh { stroke: var(--verm); stroke-width: .9; }
.dial .hub { fill: var(--verm); }
.ctext { display: flex; flex-direction: column; line-height: 1.25; }
.ctext b { font-family: var(--mincho); font-weight: 400; font-size: 20px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ctext span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ctext span i { font-style: normal; font-family: var(--mincho); letter-spacing: .1em; text-transform: none; margin-left: 6px; }
.ctext .c2 { color: rgba(255,255,255,.6); }
.setbtn { border: 0; background: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
.setbtn span { font-family: var(--mincho); color: var(--verm); text-transform: none; }
.setbtn:hover { color: #fff; }
.privlink { margin-left: 0; }
@media (max-width: 699px) { .clock { order: 5; margin-left: 0; width: 100%; } .setbtn { margin-left: auto; } }

/* settings page */
.setdlg { width: min(760px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: #070707; color: #fff; border-left: 1px solid var(--line); }
.setdlg::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.setin { padding: 36px clamp(20px, 5vw, 56px) 60px; display: flex; flex-direction: column; gap: 6px; }
.sethead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sethead h2 { font-family: var(--mincho); font-weight: 400; font-size: 30px; margin: 0; display: flex; gap: 16px; align-items: baseline; }
.sethead h2 span { font-size: 15px; color: var(--verm); letter-spacing: .3em; }
.setclose { border: 0; background: none; color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.setsec { padding: 26px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.setsec h3 { margin: 0; font-family: var(--mincho); font-weight: 400; font-size: 19px; }
.setrow { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.setp { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.55); }
.setsel { font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.55); display: inline-flex; gap: 10px; align-items: center; }
.setsel select { background: #111; color: #fff; border: 0; border-bottom: 1px solid var(--line); padding: 6px 4px; font-family: var(--mincho); color-scheme: dark; }
.setchk { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mincho); font-size: 15px; cursor: pointer; }
.setchk input { accent-color: var(--verm); width: 16px; height: 16px; }
.privlist { list-style: none; margin: 0; padding: 0; }
.privlist li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.privlist small { color: rgba(255,255,255,.45); margin-left: 8px; }
.pstate { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.pstate.on { color: var(--verm); }
.ownform { display: flex; flex-direction: column; gap: 14px; }
.ownform input[type="text"], .ownform textarea { background: none; border: 0; border-bottom: 1px solid var(--line); color: #fff; font-family: var(--mincho); font-size: 15px; padding: 8px 0; outline: none; resize: vertical; }
.ownform input[type="text"]:focus, .ownform textarea:focus { border-bottom-color: var(--verm); }
.setgo { border: 0; background: none; color: #fff; cursor: pointer; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid var(--verm); }
.setdlg .vpick { display: flex; }

/* ===== themes: Japan (red on black), Kerala backwaters (green), Dubai sands (blue); all dark ===== */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #050505; }
.scene img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .62; animation: drift 90s ease-in-out infinite alternate; will-change: transform; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25) 40%, rgba(0,0,0,.72)); }
@keyframes drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.07) translate3d(-1.5%, 1%, 0); } }
@media (prefers-reduced-motion: reduce) { .scene img { animation: none; } }
html[data-theme="redback"] .scene { display: none; }
html:not([data-theme="redback"]) .app { background: transparent !important; position: relative; z-index: 1; }
html:not([data-theme="redback"]) body { background: #050505; }
html[data-theme="kerala"] { --verm: #34c46e; }
html[data-theme="dubai"] { --verm: #3fa2ff; }
html[data-theme="kerala"] .scene-shade { background: linear-gradient(180deg, rgba(0,8,4,.3), rgba(0,0,0,.2) 40%, rgba(0,6,3,.74)); }
html[data-theme="dubai"] .scene-shade { background: linear-gradient(180deg, rgba(0,4,10,.3), rgba(0,0,0,.2) 40%, rgba(0,3,8,.74)); }
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.themes button { border: 0; padding: 0; background: #0b0b0b; color: #fff; cursor: pointer; text-align: left; display: flex; flex-direction: column; outline: 1px solid var(--line); }
.themes button[aria-checked="true"] { outline: 1px solid var(--verm); }
.themes i { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.themes b { font-family: var(--mincho); font-weight: 400; font-size: 13.5px; padding: 10px 10px 2px; }
.themes small { font-size: 10.5px; letter-spacing: .14em; color: rgba(255,255,255,.5); padding: 0 10px 10px; }
html[data-theme="kerala"] .scene img { filter: hue-rotate(-78deg) saturate(.85) brightness(.78); }
html[data-theme="dubai"] .scene img { filter: saturate(1.15) brightness(.8); }
html:not([data-theme="redback"]) .orbwrap canvas { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); }
html:not([data-theme="redback"]) .seal { background: var(--verm); }

/* favourite photos carousel */
.favbox { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.favtrack { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 4px; }
.favtrack::-webkit-scrollbar { display: none; }
.favslide { margin: 0; scroll-snap-align: start; aspect-ratio: 3 / 2; background: #080808; }
.favslide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.favnav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.favprev, .favnext { border: 0; background: none; color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.favprev:hover, .favnext:hover { color: #fff; }
.favdots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.favdot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50% !important; background: rgba(255,255,255,.3); cursor: pointer; }
.favdot[aria-current="true"] { background: var(--verm); }
.favlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.favlist li { display: flex; flex-direction: column; gap: 6px; }
.favlist img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.favlist .cdel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tile[data-id="photos"] { --c: #4a3a12; --cb: #e8c35a; }
/* second photo that fades in and out over the first */
.scene .scene-alt { opacity: 0 !important; transition: opacity 5s ease-in-out; }
.scene .scene-alt.on { opacity: .8 !important; }
.scene .scene-alt:not([src]) { display: none; }
/* instructions in Settings (Viv, 14 Nov 2026) */
.sethelp { border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: 16px 18px; margin: 0 0 8px; }
.sethelp summary { cursor: pointer; font-family: var(--mincho); font-size: 18px; list-style-position: outside; }
.sethelp ol, .setsteps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.82); }
.sethelp b { color: #fff; font-weight: 500; }
.setsteps { margin: 0; gap: 6px; }
.setvoices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.75); }
.setvoices b { color: #fff; font-weight: 500; display: inline-block; min-width: 58px; }
.setvoices span { color: var(--verm); margin-right: 6px; font-size: 12px; }
.setp i, .sethelp i, .setsteps i { font-style: normal; color: #fff; }
.setnow { color: var(--verm); }
/* keep the ▼ marker inside the box (Viv, 14 Nov 2026: "it's leaking out") */
.sethelp summary { list-style-position: inside !important; padding: 2px 0; }
.sethelp { padding: 18px 22px !important; }