/* A shared, quiet breathing surface within the existing Focus experience. */
.focus-breathe-card {grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;}
.focus-breathe-card .focus-breathe-card__header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.focus-breathe-card__header > div {display:grid;gap:5px;}
.focus-breathe-card__mark {display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--mc-teal) 12%,var(--mc-line));border-radius:14px;background:color-mix(in srgb,var(--mc-mint) 28%,var(--mc-surface));color:var(--mc-teal);}
.focus-breathe-card__mark svg {width:22px;height:22px;}
.focus-breathe-card .focus-breathe-card__intro {margin:0;color:var(--mc-ink-secondary);font-size:.875rem;line-height:1.5;}
.breathing-visual {--breath-depth:.88;position:relative;isolation:isolate;display:block;width:280px;max-width:100%;aspect-ratio:1;margin-inline:auto;overflow:hidden;border:1px solid rgba(198,241,235,.2);border-radius:30px;background:radial-gradient(ellipse at 50% 40%,rgba(115,221,194,.14),transparent 65%),linear-gradient(145deg,#122751,#0a1835);color:#f3fffb;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 25px rgba(6,24,53,.1);}
.breathing-visual svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.breathing-visual__track {fill:none;stroke:rgba(185,235,221,.3);stroke-width:1.2;stroke-linejoin:round;}
.breathing-visual path {fill:none;stroke:#b5f5d6;stroke-width:1.8;stroke-linecap:round;opacity:0;transition:opacity .5s ease;}
.breathing-visual path.is-active {opacity:.95;}
.breathing-visual circle {fill:#c2f6db;stroke:#122a41;stroke-width:1.5;filter:drop-shadow(0 0 5px rgba(172,250,213,.65));transition:cx .25s linear,cy .25s linear;}
.breathing-visual__wash {position:absolute;z-index:-1;inset:21%;border:1px solid rgba(183,245,223,.09);border-radius:24px;background:radial-gradient(circle at 40% 25%,rgba(183,245,223,.17),rgba(122,181,240,.05) 75%);box-shadow:0 0 35px rgba(130,238,198,.07);transform:scale(var(--breath-depth));transition:transform .45s ease;}
.breathing-visual[data-breathing-motion=still] :is(circle,path,.breathing-visual__wash,.breathing-steps>span) {transition:none!important;animation:none!important;}
.breathing-visual[data-breathing-motion=still] .breathing-visual__wash {transform:none!important;}
.breathing-visual[data-breathing-motion=still] :is(circle,path) {opacity:0!important;}
.breathing-visual__cue,.focus-breathing-guide__cue {position:absolute;inset:20%;display:grid;align-content:center;justify-items:center;gap:5px;text-align:center;pointer-events:none;}
.breathing-visual__cue strong,.focus-breathing-guide__cue strong {color:#e7fff1;font-size:.9rem;line-height:1.3;font-weight:600;}
.breathing-visual__cue > span,.focus-breathing-guide__cue > span {color:#f5fff9;font-size:3.75rem;font-weight:600;letter-spacing:-.075em;line-height:1;font-variant-numeric:tabular-nums;}
.breathing-visual__cue small,.focus-breathing-guide__cue small {color:#b5ccc9;font-size:.7rem;line-height:1.35;}
/* The breathing illustration stays dark in both themes. General card and
   dialog caption rules must not put light-mode muted ink inside it. */
html :is(.app-shell,.focus-breathing-dialog) .breathing-visual :is(.breathing-visual__cue,.focus-breathing-guide__cue) small {color:#b5ccc9;}
html .app-shell .breathing-visual--preview .breathing-steps small {color:inherit;}
.breathing-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
.breathing-steps > span {display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:7px 3px;border:1px solid rgba(201,245,228,.12);border-radius:10px;background:rgba(202,245,232,.04);color:#c3d7d4;transition:background .4s,color .4s,border-color .4s;}
.breathing-steps strong {font-size:.7rem;font-weight:600;}
.breathing-steps small {color:inherit;font-size:.7rem;font-variant-numeric:tabular-nums;}
.breathing-visual[data-breathing-state="running"][data-breathing-step="0"] [data-breathing-step-label="0"],.breathing-visual[data-breathing-state="running"][data-breathing-step="1"] [data-breathing-step-label="1"],.breathing-visual[data-breathing-state="running"][data-breathing-step="2"] [data-breathing-step-label="2"],.breathing-visual[data-breathing-state="running"][data-breathing-step="3"] [data-breathing-step-label="3"] {background:rgba(183,245,211,.15);border-color:rgba(186,250,216,.38);color:#e0ffe8;}
.focus-breathe-card .breathing-visual--preview {display:block;grid-column:1/-1;width:100%;height:210px;aspect-ratio:auto;border-radius:22px;}
.breathing-visual--preview svg {inset:2px auto auto 50%;width:170px;height:170px;transform:translateX(-50%);}
.breathing-visual--preview .breathing-visual__wash {inset:31px calc(50% - 54px) 69px;}
.breathing-visual--preview .breathing-visual__cue {inset:20px 10px 62px;}
.breathing-visual--preview .breathing-visual__cue > span {font-size:2.85rem;}
.breathing-visual--preview .breathing-steps {position:absolute;bottom:12px;left:12px;right:12px;}
.focus-breathe-card__start {width:100%;justify-content:center;gap:8px;min-height:46px;}
.focus-breathe-card__start > svg {width:18px;height:18px;}
.focus-breathe-card__start > svg:last-child {width:16px;height:16px;margin-left:auto;}
.focus-breathe-card__start > span {margin-right:auto;}
.focus-breathe-card .focus-breathe-card__auto {display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--mc-line);}
.focus-breathe-card__auto > div {min-width:0;display:grid;gap:4px;}
.focus-breathe-card__auto > div > strong {font-size:.8rem;}
.focus-breathe-card__auto .small-print {margin:0;font-size:.75rem;line-height:1.4;color:var(--mc-ink-secondary);}
.focus-breathe-card__auto .focus-toggle {flex-shrink:0;min-height:44px;}
.focus-choice-card .focus-session-progress {margin:0;padding-top:10px;border-top:1px solid var(--mc-line);font-size:.75rem;line-height:1.45;color:var(--mc-ink-secondary);}
dialog#focus-breathing-sheet.focus-breathing-dialog {
  --breathing-inset-top:max(12px,var(--mc-safe-top,0px));
  --breathing-inset-bottom:max(12px,var(--mc-safe-bottom,0px));
  --breathing-inset-left:max(12px,var(--mc-safe-left,0px));
  --breathing-inset-right:max(12px,var(--mc-safe-right,0px));
  position:fixed;inset:var(--breathing-inset-top) var(--breathing-inset-right) var(--breathing-inset-bottom) var(--breathing-inset-left);
  width:min(520px,calc(100% - var(--breathing-inset-left) - var(--breathing-inset-right)));max-width:none;
  max-height:calc(100vh - var(--breathing-inset-top) - var(--breathing-inset-bottom));
  max-height:calc(100dvh - var(--breathing-inset-top) - var(--breathing-inset-bottom));
  margin:auto;border-radius:28px;overflow:hidden;
}
.focus-breathing-dialog .breathing-sheet {position:relative;display:grid;justify-items:center;gap:12px;padding:28px 28px 20px;max-height:inherit;}
.focus-breathing-dialog .sheet-close {position:absolute;z-index:2;top:12px;right:12px;min-width:44px;min-height:44px;}
.breathing-sheet__header {text-align:center;display:grid;justify-items:center;gap:7px;padding:0 25px;}
.breathing-sheet__header h2 {margin:0;font-size:1.75rem;letter-spacing:-.05em;line-height:1.1;}
.breathing-sheet__intro {margin:0;max-width:34ch;color:var(--mc-ink-secondary);font-size:.9rem;line-height:1.5;}
.focus-breathing-guide {width:250px;overflow:visible;margin:0 0 38px;}
.focus-breathing-guide .breathing-steps {position:absolute;top:calc(100% + 10px);left:0;right:0;}
.focus-breathing-guide .breathing-steps > span {background:var(--mc-surface);border-color:var(--mc-line);color:var(--mc-ink-secondary);}
.focus-breathing-guide[data-breathing-state="running"] .breathing-steps > span {color:var(--mc-ink-secondary);}
.focus-breathing-guide[data-breathing-state="running"][data-breathing-step="0"] [data-breathing-step-label="0"],.focus-breathing-guide[data-breathing-state="running"][data-breathing-step="1"] [data-breathing-step-label="1"],.focus-breathing-guide[data-breathing-state="running"][data-breathing-step="2"] [data-breathing-step-label="2"],.focus-breathing-guide[data-breathing-state="running"][data-breathing-step="3"] [data-breathing-step-label="3"] {background:color-mix(in srgb,var(--mc-mint) 30%,var(--mc-surface));color:var(--mc-teal);border-color:var(--mc-teal);}
.focus-breathing-guide__pace {width:min(100%,300px);grid-template-columns:auto minmax(0,1fr);align-items:center;text-align:left;gap:16px;}
.focus-breathing-guide__pace select {min-height:44px;font-size:max(16px,1rem);}
.breathing-sheet > .small-print {margin:0;font-size:.75rem;line-height:1.4;text-align:center;}
.focus-breathing-dialog .planner-form__actions {justify-content:center;flex-wrap:wrap;width:100%;gap:8px;}
.focus-breathing-dialog .planner-form__actions .mc-button {flex:1;}
.focus-breathing-dialog .mc-button {min-height:44px;white-space:normal;}
.breathing-sheet__timer-note {margin:0;text-align:center;font-size:.75rem;color:var(--mc-ink-secondary);line-height:1.4;}
.focus-breathing-live {display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid rgba(175,249,210,.2);border-radius:20px;background:rgba(177,245,215,.07);color:white;}
.focus-breathing-live[hidden] {display:none!important;}
.breathing-visual--mini {width:58px;max-width:58px;aspect-ratio:1;margin:0;flex-shrink:0;border-radius:14px;box-shadow:none;background:rgba(3,20,57,.3);}
.focus-breathing-live__copy {display:grid;gap:5px;}
.focus-breathing-live__copy small {color:#b9e6d5;font-size:.58rem;font-weight:650;letter-spacing:.09em;}
.focus-breathing-live__copy strong {font-size:.9rem;font-weight:600;color:#edfff6;}
.focus-breathing-live__count {margin-left:auto;min-width:24px;font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums;color:#d4ffe3;}
@media(max-width:640px) {.focus-breathing-dialog .breathing-sheet {padding:26px 18px max(20px,env(safe-area-inset-bottom));}.focus-breathing-guide {width:230px;}.focus-breathe-card .breathing-visual--preview {height:210px;}.focus-breathing-dialog {max-height:calc(100dvh - 20px);}}
/* Show the rhythm and primary controls together when an iPhone is sideways. */
@media(min-width:500px) and (max-height:560px) {
  dialog#focus-breathing-sheet.focus-breathing-dialog {width:min(760px,calc(100% - var(--breathing-inset-left) - var(--breathing-inset-right)));}
  .focus-breathing-dialog .breathing-sheet {grid-template-columns:160px minmax(0,1fr);gap:8px 20px;padding:16px 20px;}
  .breathing-sheet__header {grid-column:2;grid-row:1;justify-items:start;text-align:left;gap:4px;padding:0 38px 0 0;}
  .breathing-sheet__header .eyebrow {display:none;}
  .breathing-sheet__header h2 {font-size:1.5rem;}
  .breathing-sheet__intro {font-size:.8125rem;line-height:1.35;}
  .focus-breathing-guide {grid-column:1;grid-row:1 / span 5;align-self:center;width:160px;margin:0 0 38px;}
  .focus-breathing-guide__cue {gap:4px;}
  .focus-breathing-guide__cue strong {font-size:.8rem;}
  .focus-breathing-guide__cue > span {font-size:2.5rem;}
  .focus-breathing-guide__pace {grid-column:2;grid-row:2;width:100%;gap:12px;}
  .breathing-sheet > .small-print {grid-column:2;grid-row:3;text-align:left;line-height:1.35;}
  .focus-breathing-dialog .planner-form__actions {grid-column:2;grid-row:4;}
  .breathing-sheet > .mc-button {grid-column:2;grid-row:5;justify-self:start;}
  .breathing-sheet__timer-note {grid-column:1 / -1;grid-row:6;font-size:.7rem;line-height:1.4;}
}
@media(prefers-reduced-motion:reduce) {.breathing-visual circle,.breathing-visual path,.breathing-steps > span,.breathing-visual__wash {transition:none;}.breathing-visual__wash {transform:none;}}
html[data-reduced-motion="true"] .breathing-visual circle,html[data-reduced-motion="true"] .breathing-visual path,html[data-reduced-motion="true"] .breathing-steps > span,html[data-reduced-motion="true"] .breathing-visual__wash {transition:none;}
html[data-reduced-motion="true"] .breathing-visual__wash {transform:none;}
@media(forced-colors:active) {
  html :is(.app-shell,.focus-breathing-dialog) .breathing-visual :is(.breathing-visual__cue,.focus-breathing-guide__cue) small,
  html .app-shell .breathing-visual--preview .breathing-steps small {color:CanvasText;}
}
@media(forced-colors:active) {.breathing-visual {background:Canvas;color:CanvasText;border-color:CanvasText;}.breathing-visual__track {stroke:CanvasText;}.breathing-visual path,.breathing-visual circle {stroke:Highlight;fill:Highlight;}.breathing-visual__cue strong,.breathing-visual__cue span,.breathing-visual__cue small,.focus-breathing-guide__cue strong,.focus-breathing-guide__cue span,.focus-breathing-guide__cue small {color:CanvasText;}}

.focus-break-suggestion {margin:0 0 16px;padding:16px;border:1px solid var(--mc-line);border-radius:18px;background:color-mix(in srgb,var(--mc-mint) 15%,var(--mc-surface));text-align:left;}
.focus-break-suggestion[hidden] {display:none;}
.focus-break-suggestion small {color:var(--mc-teal);font-size:.65rem;letter-spacing:.1em;font-weight:700;}
.focus-break-suggestion h3 {margin:6px 0;font-size:1rem;color:var(--mc-ink);}
.focus-break-suggestion p {margin:0;color:var(--mc-ink-secondary);font-size:.85rem;line-height:1.5;}
.focus-break-suggestion__actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.focus-break-suggestion__actions .mc-button {min-height:44px;white-space:normal;}

.focus-timer-card--glass .focus-break-suggestion .mc-button {color:var(--mc-ink);background:var(--mc-surface);border:1px solid var(--mc-line);}
.focus-timer-card--glass .focus-break-suggestion .mc-button:hover:not(:disabled) {color:var(--mc-ink);background:color-mix(in srgb,var(--mc-mint) 24%,var(--mc-surface));border-color:var(--mc-teal);}

.breathing-sheet__cycle {text-align:center;font-weight:600;color:var(--mc-ink);margin:0;}
.breathing-sheet__progress {display:block;width:100%;height:6px;accent-color:#5bbfa5;margin:4px 0 12px;}
.breathing-sheet__progress[hidden] {display:none;}
.focus-breathing-dialog [data-breathing-state=completed] {filter:none;}
.breathing-coda {display:block;width:44px;height:44px;object-fit:contain;transform:scale(var(--breath-depth,.88));transition:transform .6s ease;}
.breathing-visual[data-breathing-motion=still] .breathing-coda {transform:none;transition:none;}