/* A paced example of scheduling; it never starts a real session or alarm. */
#plus .plus-panel-art.guided-routine-art { min-height: 0; padding: 26px 22px; }
.guided-routine { width: 100%; max-width: 380px; position: relative; z-index: 1; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 15px 35px #20382c14; }
.guided-routine-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guided-routine-header > span:first-child { color: var(--sage); font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.guided-routine-badge { max-width: 56%; min-height: 25px; display: flex; align-items: center; justify-content: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--raised); color: var(--sage); font-size: 10px; line-height: 1.5; text-align: center; }
.guided-routine-plan { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 17px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.guided-routine-plan > div { min-width: 0; }
.guided-routine-plan > div:last-child { text-align: right; }
.guided-routine-plan time { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.045em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.guided-routine-plan span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.guided-routine-plan > .icon { width: 17px; height: 17px; color: var(--quiet); }
.guided-routine-progress { display: flex; gap: 5px; margin-top: 16px; }
.guided-routine-progress > span { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.guided-routine-progress > span[data-complete="true"] { background: var(--sage); }
.guided-routine-step { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.guided-routine-scene { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid #52705a; border-radius: 17px; background: linear-gradient(125deg, #284b3b, #213b30); color: #faf7f2; overflow: hidden; }
.guided-routine-scene::before { content: ""; position: absolute; width: 100px; height: 100px; right: -13px; top: -27px; border: 1px solid #d9e9ce26; border-radius: 50%; pointer-events: none; }
.guided-routine-scene > div { display: flex; align-items: center; gap: 12px; }
.guided-routine-scene time { position: relative; display: block; font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.guided-routine-scene p { max-width: 70px; color: #d0ddc9; font-size: 11px; line-height: 1.4; }
.guided-routine-sky { position: relative; flex: 0 0 45px; height: 45px; color: #edc5a3; }
.guided-routine-sky > .icon { width: 45px; height: 45px; stroke-width: 1.15; }
.guided-routine-sun { display: none; }
.guided-routine[data-period="morning"] .guided-routine-scene { background: linear-gradient(125deg, #3b5645, #69694c); }
.guided-routine[data-period="morning"] .guided-routine-moon { display: none; }
.guided-routine[data-period="morning"] .guided-routine-sun { display: block; }
.guided-routine-message { min-height: 133px; margin-top: 13px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--bg); }
.guided-routine-message-top { display: flex; align-items: center; gap: 7px; color: var(--sage); font-size: 10px; line-height: 1.5; }
.guided-routine-message-top .icon { flex: 0 0 auto; width: 16px; height: 16px; }
.guided-routine-message h4 { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.guided-routine-message > p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.guided-routine[data-state="warning"] .guided-routine-message { border-left: 3px solid var(--peach); padding-left: 12px; }
.guided-routine[data-state="stopped"] .guided-routine-badge { background: var(--bg); color: var(--muted); }
.guided-routine-detail { min-height: 58px; margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.guided-routine-actions { display: grid; grid-template-rows: minmax(44px, auto) minmax(44px, auto); gap: 6px; min-height: 94px; margin-top: 13px; }
.guided-routine button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--sage); font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; }
.guided-routine button .icon { flex: 0 0 auto; width: 16px; height: 16px; }
.guided-routine .guided-routine-next { background: var(--sage); border-color: var(--sage); color: var(--on-green); }
.guided-routine .guided-routine-next:hover:enabled { filter: brightness(1.08); }
.guided-routine button:not(.guided-routine-next):hover:enabled { border-color: var(--sage); background: var(--raised); }
.guided-routine button:disabled { opacity: .45; cursor: not-allowed; }
.guided-routine button:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; border-radius: 12px; }
.guided-routine-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 3px; }
.guided-routine-nav button { padding-inline: 7px; border-color: transparent; font-size: 11px; }
.guided-routine-nav button:last-child { text-decoration: underline; text-underline-offset: 3px; }
.guided-routine-pacing { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.guided-routine [hidden] { display: none !important; }
.guided-routine-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; clip-path: inset(50%); white-space: nowrap; border: 0; }
.guided-routine-art .guided-routine-note { position: relative; z-index: 1; max-width: 370px; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.65; text-align: center; }
.guided-routine-art .guided-routine-note strong { font-weight: 500; color: var(--sage); }
.guided-routine-noscript { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 1000px) {
  #plus .plus-panel-art.guided-routine-art { padding-inline: 16px; }
  .guided-routine { padding: 16px; }
}
@media (max-width: 440px) {
  #plus .plus-panel-art.guided-routine-art { padding: 18px 10px; border-radius: 24px; }
  .guided-routine { padding: 14px; border-radius: 20px; }
  .guided-routine-header { gap: 7px; min-height: 37px; }
  .guided-routine-header > span:first-child { font-size: 9px; letter-spacing: .08em; }
  .guided-routine-badge { font-size: 9px; }
  .guided-routine-plan { gap: 5px; }
  .guided-routine-plan time { font-size: 22px; }
  .guided-routine-plan span { font-size: 10px; min-height: 28px; }
  .guided-routine-scene { padding: 15px 13px; }
  .guided-routine-scene > div { display: block; }
  .guided-routine-scene time { font-size: 44px; }
  .guided-routine-scene p { max-width: none; margin-top: 5px; }
  .guided-routine-sky, .guided-routine-sky > .icon { width: 38px; height: 38px; }
  .guided-routine-sky { flex-basis: 38px; }
  .guided-routine-message { min-height: 163px; padding-inline: 12px; }
  .guided-routine-message h4 { font-size: 15px; }
  .guided-routine-detail { min-height: 78px; }
  .guided-routine button { padding-inline: 10px; }
  .guided-routine[data-state="warning"] .guided-routine-message { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .guided-routine *, .guided-routine *::before, .guided-routine *::after { animation: none !important; transition: none !important; }
}
html[data-motion="paused"] .guided-routine *, html[data-motion="paused"] .guided-routine *::before, html[data-motion="paused"] .guided-routine *::after { animation: none !important; transition: none !important; }