/* OrbitFocus v6: focus-mode moods, focus-mode picker, timer display setting, Custom-mode music player.
   Moods only pick from the active colour theme's variables, so every theme keeps its own palette and contrast. */
[data-fmode] { --m1: var(--indigo-400); --m2: var(--emerald-400); --m3: var(--violet-400); --mh: var(--indigo-300); --k-drift: 1; --k-shimmer: 1; --k-breathe: 1; --k-spin: 1; }
[data-fmode="deep"]   { --m1: var(--violet-400);  --m2: var(--indigo-500);  --m3: var(--indigo-300);  --mh: var(--violet-400);  --k-drift: 1.5; --k-shimmer: 1.4; --k-breathe: 1.3; --k-spin: 1.4; }
[data-fmode="ultra"]  { --m1: var(--amber-400);   --m2: var(--red-400);     --m3: var(--violet-400);  --mh: var(--amber-400);   --k-drift: .7;  --k-shimmer: .6;  --k-breathe: .65; --k-spin: .6; }
[data-fmode="sprint"] { --m1: var(--emerald-400); --m2: var(--amber-400);   --m3: var(--indigo-400);  --mh: var(--emerald-400); --k-drift: .6;  --k-shimmer: .5;  --k-breathe: .7;  --k-spin: .5; }
[data-fmode="study"]  { --m1: var(--indigo-400);  --m2: var(--emerald-500); --m3: var(--slate-400);   --mh: var(--indigo-300);  --k-drift: 1.3; --k-shimmer: 1.6; --k-breathe: 1.2; --k-spin: 1.3; }
[data-fmode="calm"]   { --m1: var(--emerald-400); --m2: var(--indigo-300);  --m3: var(--emerald-500); --mh: var(--emerald-400); --k-drift: 2.1; --k-shimmer: 1;   --k-breathe: 1.7; --k-spin: 2; }
[data-fmode="custom"] { --m1: var(--violet-400);  --m2: var(--indigo-400);  --m3: var(--emerald-400); --mh: var(--violet-400); }

/* ---------- immersive view, mood-driven (Classic Pomodoro keeps the original look) ---------- */
.im .im-aurora .a1 { background: radial-gradient(closest-side, rgb(var(--m1) / .55), transparent 70%); animation-duration: calc(38s * var(--k-drift)); }
.im .im-aurora .a2 { background: radial-gradient(closest-side, rgb(var(--m2) / .38), transparent 70%); animation-duration: calc(46s * var(--k-drift)); }
.im .im-aurora .a3 { background: radial-gradient(closest-side, rgb(var(--m3) / .34), transparent 70%); animation-duration: calc(52s * var(--k-drift)); }
.im .im-particles i { box-shadow: 0 0 8px 1px rgb(var(--mh) / .7); }
.im .im-svg { filter: drop-shadow(0 0 7px rgb(var(--m1) / .55)); }
.im .im-svg stop:nth-child(1) { stop-color: rgb(var(--mh)) !important; }
.im .im-svg stop:nth-child(2) { stop-color: rgb(var(--m2)) !important; }
.im .im-svg stop:nth-child(3) { stop-color: rgb(var(--m3)) !important; }
.im .im-sat i { box-shadow: 0 0 0 3px rgb(var(--mh) / .35), 0 0 18px 5px rgb(var(--mh) / .9), 0 0 42px 12px rgb(var(--m2) / .45); }
.im .im-glow { background: radial-gradient(closest-side, rgb(var(--m1) / .30), rgb(var(--m2) / .10) 60%, transparent 75%); animation-duration: calc(7s * var(--k-breathe)); }
.im .im-deco b { background: rgb(var(--m2)); box-shadow: 0 0 10px 2px rgb(var(--m2) / .7); }
.im .im-deco.d2 b { background: rgb(var(--m3)); box-shadow: 0 0 10px 2px rgb(var(--m3) / .7); }
.im .im-deco.d1 { animation-duration: calc(90s * var(--k-spin)); }
.im .im-deco.d2 { animation-duration: calc(150s * var(--k-spin)); }
.im .im-mode { color: rgb(var(--mh)); }
.im .im-time { background-image: linear-gradient(105deg, rgb(var(--slate-50)) 0%, rgb(var(--slate-50)) 36%, rgb(var(--mh)) 44%, rgb(var(--m2)) 50%, rgb(var(--mh)) 56%, rgb(var(--slate-50)) 64%, rgb(var(--slate-50)) 100%); animation-duration: calc(8s * var(--k-shimmer)); }
.im .im-task { border-color: rgb(var(--m1) / .38); box-shadow: 0 0 26px rgb(var(--m1) / .16); }
.im .im-task i { color: rgb(var(--m2)); }
/* Calm Flow: gentle visuals - no shimmer sweep on the digits, no outer dotted ring */
.im[data-fmode="calm"] .im-time { animation: none; background-position: 100% 0; }
.im[data-fmode="calm"] .im-deco.d2 { display: none; }
.im[data-fmode="calm"] .im-aurora i { opacity: .38; }
/* Ultra Focus: a stronger ring glow */
.im[data-fmode="ultra"] .im-svg { filter: drop-shadow(0 0 10px rgb(var(--m1) / .7)); }
.im.im-lite .im-time { background-image: none; animation: none; }
/* the mode name above FOCUS / BREAK */
.im-fmode { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .7em; padding: .28em .9em; border-radius: 999px; font-size: clamp(.72rem, calc(var(--d) * .026), .95rem); font-weight: 600; letter-spacing: .03em;
  color: rgb(var(--slate-100)); background: rgb(var(--slate-900) / .5); border: 1px solid rgb(var(--mh) / .45); max-width: calc(var(--d) * .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-fmode:empty { display: none; }
/* top-right buttons: optional "Full screen" (expanded mode) + Exit */
.im-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .9rem); right: calc(env(safe-area-inset-right, 0px) + .9rem); display: flex; gap: .6rem; align-items: center; }
.im-top .im-exit { position: static; }
.im-top .im-exit[hidden] { display: none; }
@media (max-width: 640px) { .im-top .im-exit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- focus-mode button on the timer card ---------- */
.fmode-btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border-radius: 1rem; padding: .25rem .55rem .3rem; margin: -.25rem -.55rem -.3rem; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; min-width: 0; }
.fmode-btn:hover { background: rgb(var(--slate-800) / .6); border-color: rgb(var(--slate-700)); }
.fmode-btn:focus-visible { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 2px; }
.fmode-btn .fm-k { display: inline-flex; align-items: center; gap: .4rem; }
.fmode-btn .fm-k i { font-size: .6rem; }
.fmode-btn .fm-n { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-head-r { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.timer-head-r .im-reopen { margin-right: 0; }

/* ---------- focus-mode picker ---------- */
#mode-modal > div { max-width: 46rem; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .7rem; }
.fm-card { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem; border-radius: 1.1rem; cursor: pointer;
  border: 1px solid rgb(var(--slate-700)); background: rgb(var(--slate-950) / .55); transition: border-color .15s, background .15s; }
.fm-card:hover { border-color: rgb(var(--slate-500, var(--slate-400))); }
.fm-card.is-on { border-color: rgb(var(--mh)); background: rgb(var(--mh) / .1); box-shadow: inset 0 0 0 1px rgb(var(--mh)); }
.fm-card:has(.fm-radio:focus-visible) { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 2px; }
.fm-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fm-top { display: flex; align-items: center; gap: .55rem; }
.fm-sw { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: conic-gradient(from 210deg, rgb(var(--m1)), rgb(var(--m2)), rgb(var(--m3)), rgb(var(--m1))); box-shadow: 0 0 10px rgb(var(--m1) / .5); }
.fm-name { font-weight: 600; font-size: .95rem; color: rgb(var(--slate-100)); }
.fm-card.is-on .fm-name::after { content: "\f00c"; font: var(--fa-font-solid); font-size: .7rem; margin-left: .45rem; color: rgb(var(--mh)); }
.fm-len { font-size: .78rem; font-weight: 600; color: rgb(var(--slate-300)); font-variant-numeric: tabular-nums; }
.fm-desc { font-size: .76rem; color: rgb(var(--slate-400)); line-height: 1.4; }
.custom-panel { margin-top: 1rem; padding: 1rem; border-radius: 1.1rem; border: 1px solid rgb(var(--slate-700)); background: rgb(var(--slate-950) / .5); }
.custom-panel[hidden] { display: none; }
.cm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 520px) { .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-in { width: 100%; height: 2.5rem; padding: 0 .8rem; border-radius: .9rem; font-size: .9rem; background: rgb(var(--slate-950)); border: 1px solid rgb(var(--slate-700)); color: rgb(var(--slate-100)); }
.cm-in:focus { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 1px; border-color: transparent; }
.cm-lbl { display: block; font-size: .74rem; font-weight: 500; color: rgb(var(--slate-300)); margin-bottom: .35rem; }
.cm-status { font-size: .76rem; margin-top: .45rem; color: rgb(var(--slate-400)); line-height: 1.45; }
.cm-status.is-ok { color: rgb(var(--emerald-400)); }
.cm-status.is-warn { color: rgb(var(--amber-400)); }
.cm-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; margin-top: .8rem; color: rgb(var(--slate-200)); }
.cm-check input { margin-top: .2rem; flex: none; }
.mode-note { font-size: .78rem; color: rgb(var(--amber-400)); margin-top: .8rem; }
.mode-note[hidden] { display: none; }

/* ---------- Settings: timer display (3 options) ---------- */
.dm-group { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.dm-opt { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .8rem; border-radius: 1rem; border: 1px solid rgb(var(--slate-700)); cursor: pointer; background: rgb(var(--slate-950) / .4); }
.dm-opt:has(input:checked) { border-color: rgb(var(--indigo-400)); background: rgb(var(--indigo-400) / .1); }
.dm-opt:has(input:focus-visible) { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 2px; }
.dm-opt input { margin-top: .25rem; flex: none; width: 1rem; height: 1rem; accent-color: rgb(var(--indigo-600)); }
.dm-opt strong { display: block; font-size: .875rem; font-weight: 600; color: rgb(var(--slate-100)); }
.dm-opt .dm-tag { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .03em; color: rgb(var(--indigo-300)); border: 1px solid rgb(var(--indigo-400) / .5); vertical-align: 1px; }
.dm-opt span.dm-d { display: block; font-size: .75rem; color: rgb(var(--slate-400)); margin-top: .1rem; }

/* ---------- Custom-mode music mini-player ---------- */
.mp-slot { margin-top: 1rem; }
.mp-slot[hidden] { display: none; }
.mp { position: absolute; top: 0; left: 0; z-index: 5; border-radius: 1rem; overflow: hidden; color: rgb(var(--slate-200));
  border: 1px solid rgb(var(--slate-700)); background: rgb(var(--slate-950) / .92); box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
.mp[hidden] { display: none !important; }
body:has(main .fixed.inset-0:not(.hidden)) .mp { z-index: 0; } /* stay under open dialogs */
.mp-bar { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem .35rem .65rem; min-height: 2.9rem; }
.mp-ico { flex: none; width: 1.9rem; height: 1.9rem; border-radius: .65rem; display: grid; place-items: center; font-size: .8rem; color: rgb(var(--slate-50)); background: linear-gradient(135deg, rgb(var(--indigo-500)), rgb(var(--violet-400))); }
.mp.is-unsupported .mp-ico { background: rgb(var(--amber-400) / .25); color: rgb(var(--amber-400)); }
.mp-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.mp-title { font-size: .8rem; font-weight: 600; color: rgb(var(--slate-100)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-state { font-size: .7rem; color: rgb(var(--slate-400)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-btn { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .75rem; color: rgb(var(--slate-300)); font-size: .8rem; transition: background .15s, color .15s; }
.mp-btn:hover { background: rgb(var(--slate-800)); color: rgb(var(--slate-50)); }
.mp-btn:focus-visible { outline: 2px solid rgb(var(--indigo-400)); outline-offset: -2px; }
.mp-btn[hidden] { display: none; }
.mp-btn i { transition: transform .2s; }
.mp.is-collapsed #mp-toggle i { transform: rotate(180deg); }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp-body { padding: 0 .45rem .45rem; }
.mp-body:empty { display: none; }
.mp-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: .7rem; background: rgb(var(--slate-900)); }
.mp[data-provider="youtube"] .mp-frame { height: auto; aspect-ratio: 16 / 9; }
.mp[data-provider="soundcloud"] .mp-frame { height: 166px; }
.mp[data-provider="apple"] .mp-frame { height: 175px; }
/* collapsed: only the bar shows; the player stays loaded so music keeps playing */
.mp.is-collapsed .mp-body { height: 0; padding: 0; overflow: hidden; }
/* inside the immersive view: pinned to a corner, away from the clock */
html.im-open .mp { position: fixed; z-index: 1001; top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); left: calc(env(safe-area-inset-left, 0px) + 1rem) !important; width: min(19rem, calc(100vw - 2rem)) !important;
  background: rgb(var(--slate-950) / .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgb(var(--slate-400) / .35); }
html.im-open .mp[data-provider="youtube"] .mp-frame { max-height: 9.5rem; }
@media (max-width: 640px), (max-height: 560px) {
  html.im-open .mp { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + .9rem) !important; width: calc(100vw - 2rem - 7rem) !important; }
  html.im-open .mp .mp-frame { height: 80px; }
  html.im-open .mp[data-provider="youtube"] .mp-frame { height: 6.5rem; max-height: none; aspect-ratio: auto; }
  html.im-open .mp[data-provider="soundcloud"] .mp-frame { height: 110px; }
  html.im-open .mp[data-provider="apple"] .mp-frame { height: 150px; }
}
.g-banner-below { margin-top: 1.25rem; margin-bottom: 0; }
.fm-sel-desc { display: none; }
@media (max-width: 560px) {
  .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .fm-card { padding: .65rem .7rem; border-radius: 1rem; }
  .fm-name { font-size: .86rem; line-height: 1.2; }
  .fm-len { font-size: .7rem; }
  .fm-desc { display: none; }
  .fm-card.is-on .fm-name::after { display: none; }
  .fm-sel-desc { display: block; font-size: .78rem; color: rgb(var(--slate-300)); margin-top: .7rem; min-height: 2.2em; }
  #mode-modal > div { padding: 1.1rem; }
}