/* Odak modu (focus.js): one dark surface over the whole app. Nothing but the time while it runs; the level
   color only on the progress ring, the one yellow only on the primary action. */

body.focus-open { overflow: hidden; }
.focus { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: var(--coach-surface); color: var(--on-coach); outline: 0; }
.focus :focus-visible { outline-color: var(--on-coach); }
.focus.is-idle { cursor: none; }

.focus-label { font: 500 12px/18px var(--font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray-300); }
.focus-title { font: 400 32px/40px var(--font); letter-spacing: -0.01em; text-wrap: balance; }
.focus-title b { font-weight: 800; }
.focus-info { font: 500 14px/21px var(--font); color: var(--gray-300); max-width: 46ch; text-wrap: pretty; }
.focus-info b { color: var(--on-coach); font-weight: 500; }
.focus-info.is-bad { color: #ff9aaa; }
.focus-col { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.focus-x { position: absolute; right: 24px; top: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gray-900); color: var(--on-coach); display: grid; place-items: center; }

/* setup */
.focus-stepper { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 8px 0; }
.focus-big { min-width: 260px; justify-content: center; }
.focus-step { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--gray-900); color: var(--on-coach); display: grid; place-items: center; }
.focus-step:hover, .focus-x:hover { background: #4a4a4a; }
.focus-big { display: inline-flex; align-items: baseline; gap: 8px; }
.focus-min { width: 2ch; box-sizing: content-box; padding: 0; border: 0; outline: 0; background: none; color: var(--on-coach); caret-color: var(--brand); text-align: center; font: 800 112px/1 var(--font); letter-spacing: -0.03em; }
.focus-min:focus-visible { outline: 0; }
.focus-big:focus-within { box-shadow: 0 3px 0 var(--gray-900); }
.focus-unit { font: 500 22px/1 var(--font); color: var(--gray-300); }
.focus-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.focus-chip { max-width: 100%; padding: 9px 16px; border: 0; border-radius: var(--r-pill); background: var(--gray-900); color: var(--on-coach); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-chip:hover { box-shadow: inset 0 0 0 1px var(--gray-400); }
.focus-chip[aria-pressed="true"] { background: var(--on-coach); color: var(--ink); }
.focus-topics { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; max-width: 100%; }
.focus-go { min-width: 220px; min-height: 56px; margin-top: 12px; font-size: 16px; }

/* timer */
.focus-stage { position: relative; width: min(74vmin, 640px); aspect-ratio: 1; display: grid; place-items: center; }
.focus-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.focus-track { stroke: rgb(255 255 255 / .1); }
.focus-arc { stroke: var(--level-accent); transition: stroke-dashoffset .3s linear, stroke .6s ease; }
.focus.is-ending .focus-time { animation: focus-beat 1s ease-in-out infinite; }
@keyframes focus-beat { 50% { transform: scale(1.04); } }
.focus[data-phase="break"] .focus-arc { stroke: var(--gray-300); }
.focus[data-phase="pause"] .focus-arc { stroke: var(--gray-400); }
.focus-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; max-width: 78%; text-align: center; }
.focus-time { font: 500 clamp(64px, 19vmin, 176px)/1 var(--font); letter-spacing: -0.03em; }
.focus[data-phase="pause"] .focus-time { color: var(--gray-400); }
.focus-topic { min-height: 21px; font: 500 clamp(13px, 2vmin, 16px)/1.4 var(--font); color: var(--gray-300); text-wrap: balance; }
.focus-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.focus-actions:not(.is-static) { position: absolute; left: 0; right: 0; bottom: max(24px, 4vh); transition: opacity .4s; }
.focus.is-idle .focus-actions:not(.is-static) { opacity: 0; }
.focus.is-idle .focus-actions:not(.is-static):focus-within { opacity: 1; }
.focus-btn { background: var(--gray-900); color: var(--on-coach); }
.focus-btn:hover { background: #4a4a4a; }
.focus .btn-brand { color: var(--on-brand); background: var(--brand); }

/* done */
.focus-check { width: 64px; height: 64px; border-radius: 50%; background: var(--level-accent); color: var(--on-level); display: grid; place-items: center; }
.focus-q-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font: 500 14px/21px var(--font); color: var(--gray-300); }
.focus-q { width: 72px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: var(--gray-900); color: var(--on-coach); text-align: center; font: 500 16px/24px var(--font); }
.focus-q-status { font: 500 14px/21px var(--font); color: var(--gray-300); }
.focus-q-status:empty { display: none; }

/* entry points */
.focus-open-btn { align-self: flex-start; min-height: 36px; padding: 6px 14px 6px 10px; margin-top: 4px; box-shadow: inset 0 0 0 1px var(--border); }
.focus-open-btn svg { flex: none; }

@media (max-width: 600px) {
  .focus { padding: 16px; }
  .focus-x { right: 12px; top: 12px; }
  .focus-title { font-size: 24px; line-height: 32px; }
  .focus-min { font-size: 88px; }
  .focus-stepper { gap: 12px; }
  .focus-big { min-width: 190px; }
  .focus-stage { width: min(88vmin, 640px); }
}
@media (prefers-reduced-motion: reduce) { .focus-arc, .focus-actions { transition: none; } .focus.is-ending .focus-time { animation: none; } }