/* Focus-only meadow treatment. Keeps the existing timer controls and state machine intact.
   Pale wildflowers echo the supplied references and Emberyl's native botanical motifs. */
#focusOverlay {
  --focus-paper: var(--av-surface, #FFFDFA);
  --focus-ink: var(--av-ink, #293B49);
  --focus-muted: var(--av-muted, #5B6464);
  --focus-blue: var(--av-blue, #425C7A);
  --focus-line: var(--av-border, #D9D0C0);
  --focus-wash-blue: #E9EEF6;
  --focus-wash-blush: #F5ECE7;
  --focus-wash-butter: #F7F0DC;
  --focus-meadow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20460%20580%22%20fill%3D%22none%22%3E%0A%3Cg%20stroke%3D%22%2381957A%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M27%20590C56%20480%2035%20382%2061%20271M53%20579C82%20474%2066%20392%2094%20346M4%20582C30%20504%2011%20443%2017%20385M429%20590C398%20503%20421%20421%20398%20334M450%20580C416%20475%20445%20381%20422%20250M411%20577C365%20513%20390%20448%20368%20406%22%2F%3E%0A%3Cpath%20d%3D%22M49%20468C24%20451%2029%20426%2031%20420C54%20435%2051%20454%2049%20468ZM49%20441C66%20422%2070%20407%2068%20394C51%20406%2047%20423%2049%20441ZM58%20389C39%20374%2040%20356%2043%20350C61%20361%2060%20378%2058%20389ZM69%20487C84%20469%2097%20466%20103%20467C93%20485%2079%20489%2069%20487ZM24%20488C10%20472%209%20458%2010%20449C25%20461%2027%20477%2024%20488ZM418%20475C437%20455%20437%20440%20435%20432C416%20447%20415%20462%20418%20475ZM411%20451C388%20433%20386%20415%20389%20407C408%20420%20413%20436%20411%20451ZM425%20384C444%20367%20446%20349%20443%20342C426%20355%20423%20371%20425%20384ZM391%20516C369%20501%20359%20484%20360%20474C381%20486%20389%20502%20391%20516Z%22%20fill%3D%22%23ABB9A5%22%20stroke%3D%22none%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23A6B5D2%22%3E%0A%3Cpath%20d%3D%22M59%20288C33%20281%2030%20262%2044%20266C41%20248%2057%20244%2062%20265C67%20244%2084%20250%2077%20267C95%20263%2089%20283%2067%20289Z%22%2F%3E%0A%3Cpath%20d%3D%22M18%20395C2%20388%20-3%20374%208%20376C5%20361%2018%20360%2021%20376C29%20360%2040%20367%2032%20381C47%20379%2039%20394%2025%20399Z%22%2F%3E%0A%3Cpath%20d%3D%22M421%20269C397%20262%20393%20243%20407%20246C403%20228%20419%20224%20424%20246C430%20225%20446%20229%20441%20248C459%20244%20451%20263%20430%20270Z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23D9BDB5%22%3E%0A%3Cpath%20d%3D%22M94%20358C75%20352%2070%20335%2083%20338C80%20322%2092%20319%2097%20337C105%20318%20118%20326%20111%20340C126%20338%20118%20353%20101%20359Z%22%2F%3E%0A%3Cpath%20d%3D%22M367%20418C350%20413%20345%20398%20356%20400C354%20386%20366%20383%20370%20399C376%20385%20388%20389%20383%20403C397%20400%20388%20415%20375%20419Z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20transform%3D%22translate(398%20333)%22%20fill%3D%22%23E8D397%22%3E%0A%3Cellipse%20cy%3D%22-10%22%20rx%3D%224%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cy%3D%2210%22%20rx%3D%224%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%22-10%22%20rx%3D%2210%22%20ry%3D%224%22%2F%3E%3Cellipse%20cx%3D%2210%22%20rx%3D%2210%22%20ry%3D%224%22%2F%3E%0A%3Cellipse%20cy%3D%22-10%22%20rx%3D%224%22%20ry%3D%2210%22%20transform%3D%22rotate(45)%22%2F%3E%3Cellipse%20cy%3D%2210%22%20rx%3D%224%22%20ry%3D%2210%22%20transform%3D%22rotate(45)%22%2F%3E%3Cellipse%20cx%3D%22-10%22%20rx%3D%2210%22%20ry%3D%224%22%20transform%3D%22rotate(45)%22%2F%3E%3Cellipse%20cx%3D%2210%22%20rx%3D%2210%22%20ry%3D%224%22%20transform%3D%22rotate(45)%22%2F%3E%3Ccircle%20r%3D%225%22%20fill%3D%22%23B99C51%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23E8D397%22%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22277%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22424%22%20cy%3D%22258%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22348%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22370%22%20cy%3D%22409%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%0A%3Cg%20stroke%3D%22%23ABB9A5%22%20stroke-width%3D%221%22%20opacity%3D%22.65%22%3E%3Cpath%20d%3D%22M6%20580Q58%20525%2091%20532M74%20580Q52%20501%204%20487M389%20580Q423%20535%20460%20524M427%20580Q426%20514%20449%20494%22%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23D9BDB5%22%20opacity%3D%22.65%22%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22331%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22386%22%20cy%3D%22286%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22403%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(35, 48, 60, .56);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
#focusOverlay .focus-modal {
  isolation: isolate;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  max-height: calc(100vh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  padding: 56px 28px 28px!important;
  border: 1px solid var(--focus-line)!important;
  border-radius: 28px;
  background: var(--focus-paper)!important;
  background-image:
    radial-gradient(ellipse at 0% 25%, var(--focus-wash-blue), transparent 62%),
    radial-gradient(ellipse at 100% 65%, var(--focus-wash-blush), transparent 62%),
    linear-gradient(180deg, var(--focus-paper) 15%, var(--focus-wash-butter) 100%)!important;
  color: var(--focus-ink);
  box-shadow: 0 24px 80px rgba(25, 40, 52, .25)!important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  text-align: center;
}
/* Decoration stays behind every control, with a clear center for the clock. */
#focusOverlay .focus-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--focus-meadow) center bottom / 100% auto no-repeat;
  opacity: .56;
  pointer-events: none;
}
#focusOverlay .focus-x {
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--focus-line);
  background: var(--focus-paper);
  color: var(--focus-muted);
  font-size: 1.5rem;
}
#focusOverlay .focus-x:hover {
  background: var(--av-blue-soft, #E6EBF3);
  color: var(--focus-ink);
}
#focusOverlay .focus-kicker {
  margin: 0 28px 8px;
  color: var(--focus-muted)!important;
  font: 600 .8125rem/1.5 var(--av-ui, 'Nunito Sans', sans-serif);
  letter-spacing: .12em;
}
#focusOverlay .focus-ov-name-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0 auto;
  padding: 8px 10px 10px;
  border: 0;
  border-bottom: 1px solid var(--focus-line)!important;
  border-radius: 8px 8px 0 0;
  background: var(--focus-paper);
  color: var(--focus-ink)!important;
  font: 600 1.25rem/1.4 var(--av-display, 'Quicksand', sans-serif)!important;
  text-align: center;
}
#focusOverlay .focus-ov-name-input::placeholder,
#focusOverlay .focus-dur-input::placeholder {
  color: var(--focus-muted);
  opacity: 1;
}
#focusOverlay .focus-ov-name-input:focus {
  border-bottom-color: var(--focus-blue)!important;
}
#focusOverlay .focus-ov-ring {
  width: min(15rem, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: 24px auto;
  border-radius: 50%;
  background: var(--focus-paper);
  box-shadow: 0 0 0 9px rgba(255, 253, 250, .28), 0 8px 30px rgba(41, 59, 73, .05);
}
#focusOverlay .focus-ov-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}
#focusOverlay .focus-ov-ring svg circle:first-child {
  stroke: var(--av-blue-soft, #E6EBF3)!important;
  stroke-width: 7;
}
#focusOverlay .focus-ov-ring .focusRing {
  stroke: var(--focus-blue)!important;
  stroke-width: 7;
}
#focusOverlay .focus-ov-time {
  padding: 0 14px;
  color: var(--focus-ink);
  font: 500 clamp(2rem, 8vw + 1rem, 3.75rem)/1 var(--av-display, 'Quicksand', sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
#focusOverlay .focus-ov-durs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#focusOverlay :is(.focus-dur, .focus-dur-input) {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--focus-line)!important;
  border-radius: 14px;
  background: var(--focus-paper)!important;
  color: var(--focus-ink)!important;
  font: 600 1rem/1.4 var(--av-ui, 'Nunito Sans', sans-serif)!important;
  text-align: center;
}
#focusOverlay .focus-dur-input {
  width: 5rem;
  max-width: 100%;
  padding-inline: 6px;
}
#focusOverlay .focus-dur:hover {
  background: var(--av-blue-soft, #E6EBF3)!important;
  border-color: var(--focus-blue)!important;
}
/* This separation is intentional: changing a duration must not crowd the actions. */
#focusOverlay .focus-ov-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
#focusOverlay .focus-ctl {
  flex: 1 1 7rem;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid var(--focus-blue)!important;
  border-radius: 15px;
  background: var(--focus-paper)!important;
  color: var(--focus-blue)!important;
  font: 600 1rem/1.4 var(--av-ui, 'Nunito Sans', sans-serif);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#focusOverlay .focus-ctl.primary {
  background: var(--focus-blue)!important;
  border-color: var(--focus-blue)!important;
  color: var(--av-on-primary, #FFFDFA)!important;
  box-shadow: 0 6px 16px rgba(41, 59, 73, .12);
}
#focusOverlay .focus-ctl:hover {
  box-shadow: 0 0 0 3px var(--av-blue-soft, #E6EBF3);
}
#focusOverlay .focus-ov-note {
  margin: 20px auto 0;
  padding: 5px 10px;
  width: fit-content;
  max-width: 100%;
  border-radius: 10px;
  background: var(--focus-paper);
  color: var(--focus-muted);
  font: 400 .875rem/1.5 var(--av-ui, 'Nunito Sans', sans-serif);
  overflow-wrap: anywhere;
}
#focusOverlay :is(button, input):focus-visible {
  outline: 3px solid var(--av-focus, #425C7A)!important;
  outline-offset: 3px!important;
}
body[data-theme="dark"] #focusOverlay {
  --focus-wash-blue: #2D3E4B;
  --focus-wash-blush: #3D383D;
  --focus-wash-butter: #353B36;
}
body[data-theme="dark"] #focusOverlay .focus-modal::before { opacity: .28; }
body[data-theme="dark"] #focusOverlay .focus-ov-ring {
  box-shadow: 0 0 0 9px rgba(166, 181, 210, .06), 0 8px 30px rgba(0, 0, 0, .12);
}
@media (max-width: 360px) {
  #focusOverlay .focus-modal { padding-inline: 18px!important; border-radius: 24px; }
  #focusOverlay .focus-ov-name-input { font-size: 1rem!important; }
  #focusOverlay .focus-ov-controls { gap: 10px; }
  #focusOverlay .focus-ctl { padding-inline: 10px; }
}
body.focus-reduced-visuals #focusOverlay .focus-modal {
  background: var(--focus-paper)!important;
}
body.focus-reduced-visuals #focusOverlay .focus-modal::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  #focusOverlay, #focusOverlay *, #focusOverlay *::before, #focusOverlay *::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}
@media (forced-colors: active) {
  #focusOverlay .focus-modal::before { display: none; }
  #focusOverlay .focus-modal { border: 1px solid CanvasText!important; }
  #focusOverlay .focus-ov-ring svg circle:first-child { stroke: GrayText!important; }
  #focusOverlay .focus-ov-ring .focusRing { stroke: Highlight!important; }
}