/* OrbitFocus v3: immersive full-screen focus view. Theme-aware (uses the --slate/--indigo/--emerald/--violet variables).
   Animations use transform and opacity only (compositor-friendly), except the soft shimmer on the digits. */
html.im-open { overflow: hidden; }
/* hide the dashboard behind the view (the custom background layer stays visible) */
html.im-open body > header, html.im-open body > main, html.im-open body > footer, html.im-open body > .skip-link { visibility: hidden; }
.im { position: fixed; inset: 0; z-index: 1000; display: block; overflow: hidden; color: rgb(var(--slate-50)); -webkit-tap-highlight-color: transparent; contain: strict; }
.im[hidden] { display: none !important; }
.im-bg { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 38%, rgb(var(--slate-900)) 0%, rgb(var(--slate-950)) 72%); }
/* with a custom image/video background: let it show through, keep a soft vignette for legibility */
body.has-bg .im-bg { background: radial-gradient(120% 95% at 50% 45%, rgb(var(--slate-950) / .12) 0%, rgb(var(--slate-950) / .55) 100%); }
.im-aurora { position: absolute; inset: 0; overflow: hidden; }
.im-aurora i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; opacity: .5; will-change: transform; }
.im-aurora .a1 { left: -30vmax; top: -40vmax; background: radial-gradient(closest-side, rgb(var(--indigo-400) / .55), transparent 70%); animation: im-drift1 38s ease-in-out infinite alternate; }
.im-aurora .a2 { right: -35vmax; bottom: -45vmax; background: radial-gradient(closest-side, rgb(var(--emerald-400) / .38), transparent 70%); animation: im-drift2 46s ease-in-out infinite alternate; }
.im-aurora .a3 { left: 15vmax; top: 20vmax; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, rgb(var(--violet-400) / .34), transparent 70%); animation: im-drift3 52s ease-in-out infinite alternate; }
body.has-bg .im-aurora i { opacity: .32; }
@keyframes im-drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(22vmax,16vmax,0) scale(1.18); } }
@keyframes im-drift2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-24vmax,-14vmax,0) scale(.92); } }
@keyframes im-drift3 { from { transform: translate3d(0,0,0) scale(.9) rotate(0deg); } to { transform: translate3d(-12vmax,14vmax,0) scale(1.15) rotate(40deg); } }
.im-particles { position: absolute; inset: 0; overflow: hidden; }
.im-particles i { position: absolute; bottom: -3vh; border-radius: 50%; background: rgb(var(--slate-100)); opacity: 0; box-shadow: 0 0 8px 1px rgb(var(--indigo-300) / .7); animation: im-rise linear infinite; will-change: transform, opacity; }
@keyframes im-rise { 0% { transform: translate3d(0,0,0); opacity: 0; } 12% { opacity: .75; } 80% { opacity: .5; } 100% { transform: translate3d(var(--dx,4vw), -112vh, 0); opacity: 0; } }
.im-scrim { position: absolute; inset: 0; pointer-events: none; }
body.has-bg .im-scrim { background: radial-gradient(closest-side at 50% 50%, rgb(var(--slate-950) / .5), transparent 62%); }

.im-stage { position: absolute; inset: 0; display: grid; place-items: center; --d: min(88vw, 70vh, 760px); padding-bottom: 4vh; }
.im-orbit { position: relative; width: var(--d); height: var(--d); grid-area: 1 / 1; }
.im-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 0 7px rgb(var(--indigo-400) / .55)); }
.im-track { stroke: rgb(var(--slate-400) / .22); }
.im-sat { position: absolute; inset: 0; transition: transform 1s linear; will-change: transform; }
.im-sat i { position: absolute; left: 50%; top: 4%; width: 3.6%; height: 3.6%; margin: -1.8% 0 0 -1.8%; border-radius: 50%; background: rgb(var(--slate-50)); box-shadow: 0 0 0 3px rgb(var(--indigo-300) / .35), 0 0 18px 5px rgb(var(--indigo-300) / .9), 0 0 42px 12px rgb(var(--emerald-400) / .45); }
.im-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--indigo-400) / .30), rgb(var(--emerald-400) / .10) 60%, transparent 75%); animation: im-breathe 7s ease-in-out infinite; will-change: transform, opacity; }
@keyframes im-breathe { 0%,100% { transform: scale(.94); opacity: .65; } 50% { transform: scale(1.06); opacity: 1; } }
.im-deco { position: absolute; border-radius: 50%; border: 1px dashed rgb(var(--slate-400) / .22); will-change: transform; }
.im-deco b { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgb(var(--emerald-400)); box-shadow: 0 0 10px 2px rgb(var(--emerald-400) / .7); }
.im-deco.d1 { inset: -7%; animation: im-spin 90s linear infinite; }
.im-deco.d2 { inset: -15%; border-style: dotted; animation: im-spin 150s linear infinite reverse; }
.im-deco.d2 b { background: rgb(var(--violet-400)); box-shadow: 0 0 10px 2px rgb(var(--violet-400) / .7); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
@keyframes im-spin { to { transform: rotate(360deg); } }

.im-center { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 0; width: var(--d); }
.im-mode { font-size: clamp(.72rem, calc(var(--d) * .028), 1.05rem); font-weight: 600; letter-spacing: .38em; padding-left: .38em; color: rgb(var(--indigo-300)); text-transform: uppercase; opacity: .95; }
.im-time { font-family: 'Space Grotesk', 'Inter Variable', system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; font-size: calc(var(--d) * .27); margin: .06em 0 .02em; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(105deg, rgb(var(--slate-50)) 0%, rgb(var(--slate-50)) 36%, rgb(var(--indigo-300)) 44%, rgb(var(--emerald-400)) 50%, rgb(var(--indigo-300)) 56%, rgb(var(--slate-50)) 64%, rgb(var(--slate-50)) 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  animation: im-shimmer 8s ease-in-out infinite; filter: drop-shadow(0 4px 22px rgb(var(--slate-950) / .55)); }
@keyframes im-shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.im.is-finished .im-time { font-size: calc(var(--d) * .17); }
.im-sub { min-height: 1.4em; font-size: clamp(.8rem, calc(var(--d) * .032), 1.15rem); color: rgb(var(--slate-300)); letter-spacing: .04em; }

/* lighter effects (setting, or the device asks for reduced motion): no particles, no moving aurora, no spinning rings, no shimmer */
.im.im-lite .im-particles, .im.im-lite .im-deco { display: none; }
.im.im-lite .im-aurora i, .im.im-lite .im-glow { animation: none; }
.im.im-lite .im-time { animation: none; background-image: none; color: rgb(var(--slate-50)); -webkit-text-fill-color: currentColor; }
.im.im-lite .im-sat { transition: none; }
.im.is-hidden * { animation-play-state: paused !important; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .im-time { color: rgb(var(--slate-50)); -webkit-text-fill-color: currentColor; animation: none; } }

/* controls */
.im-ui { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease; }
.im.is-idle .im-ui { opacity: .18; }
.im.is-idle .im-ui:hover, .im.is-idle .im-ui:focus-within { opacity: 1; }
.im.is-idle { cursor: none; }
.im-ui > * { pointer-events: auto; }
.im-controls, .im-done { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh); display: flex; justify-content: center; gap: 1.1rem; pointer-events: none; }
.im-controls > *, .im-done > * { pointer-events: auto; }
.im-btn, .im-exit { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; border: 0; background: none; color: rgb(var(--slate-100)); font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; min-width: 4.5rem; min-height: 4.5rem; padding: .3rem; }
.im-btn i, .im-exit i { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; font-size: 1.15rem; border-radius: 50%; background: rgb(var(--slate-900) / .55); border: 1px solid rgb(var(--slate-400) / .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, transform .2s, border-color .2s; }
.im-btn:hover i, .im-exit:hover i { background: rgb(var(--slate-800) / .85); border-color: rgb(var(--indigo-300)); transform: translateY(-1px); }
.im-btn:focus-visible, .im-exit:focus-visible { outline: none; }
.im-btn:focus-visible i, .im-exit:focus-visible i { outline: 2px solid rgb(var(--indigo-300)); outline-offset: 3px; }
.im-btn-main i { width: 4rem; height: 4rem; background: rgb(var(--indigo-600)); color: #fff; border-color: rgb(var(--indigo-300)); }
.im-btn-main:hover i { background: rgb(var(--indigo-500)); }
.im-btn span, .im-exit span { text-shadow: 0 1px 8px rgb(var(--slate-950) / .8); }
.im-exit { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .9rem); right: calc(env(safe-area-inset-right, 0px) + .9rem); flex-direction: row; gap: .5rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0; }
.im-exit i { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.im-hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2vh); text-align: center; font-size: .72rem; color: rgb(var(--slate-400)); letter-spacing: .04em; pointer-events: none; }
@media (hover: none) { .im-hint { display: none; } }
@media (max-height: 520px) { .im-stage { --d: min(80vw, 62vh, 640px); } .im-controls, .im-done { bottom: 2vh; } .im-hint { display: none; } }
.im-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* small "Full screen" button in the normal timer view (only while running and the setting is on) */
.im-reopen { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; padding: .3rem .65rem; border-radius: .75rem; background: rgb(var(--slate-950)); border: 1px solid rgb(var(--slate-700)); color: rgb(var(--slate-200)); margin-right: .5rem; }
.im-reopen:hover { border-color: rgb(var(--indigo-400)); color: rgb(var(--slate-50)); }
.im-reopen[hidden] { display: none !important; }
#settings-modal .set-opt { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
@media (prefers-reduced-motion: reduce) { .im-ui { transition: none !important; } .im-time { background-image: none !important; color: rgb(var(--slate-50)) !important; -webkit-text-fill-color: currentColor !important; } }
#settings-modal .set-opt input { flex: none; }

/* v4: active task under the digits */
.im-task { display: inline-flex; align-items: center; gap: .55em; max-width: calc(var(--d) * .68); margin: .25em 0 .5em; padding: .4em 1em; border-radius: 999px;
  font-size: clamp(.82rem, calc(var(--d) * .031), 1.12rem); font-weight: 500; color: rgb(var(--slate-100)); line-height: 1.3;
  background: rgb(var(--slate-900) / .5); border: 1px solid rgb(var(--indigo-400) / .38); box-shadow: 0 0 26px rgb(var(--indigo-400) / .16); }
.im-task[hidden] { display: none; }
.im-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.im-task i { flex: none; color: rgb(var(--emerald-400)); font-size: .72em; }
.im-task.is-next { opacity: .82; border-color: rgb(var(--slate-400) / .3); box-shadow: none; }
.im.is-finished .im-task i::before { content: "\f00c"; }