/* The same layout applies to browser tabs and installed PWAs. */
body.is-focus-view, body.is-in-progress-view { padding-bottom: 0; display: block; }
body.is-focus-view .main-slider-wrapper,
body.is-in-progress-view .main-slider-wrapper,
body.is-focus-view .header-sticky-wrapper,
body.is-in-progress-view .header-sticky-wrapper { max-width: none; }
body.is-focus-view .bottom-nav-container,
body.is-in-progress-view .bottom-nav-container { left: 50%; transform: translateX(-50%); }
body.is-focus-view .main-slide-page,
body.is-in-progress-view .main-slide-page { padding: 0; min-height: 0; }
#scheduleListDetail, #scheduleListInProgress {
  height: calc(100vh - 142px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - 142px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.focus-task-card {
  height: 100%; max-height: 760px; max-width: 420px;
  --focus-timer-size: min(312px, calc(100% - 32px));
  --focus-timer-center: 51%;
  --focus-meta-top: 40px;
  --focus-action-height: 44px;
  --focus-meta-gap: 6px;
  --focus-button-top: calc(100% - 122px);
}
.focus-task-card > .home-seamless-container { display: contents; }
.focus-task-card .home-task-title { top: 12px; left: 12px; max-width: calc(100% - 24px); line-height: 20px; }
.focus-meta {
  position: absolute; top: var(--focus-meta-top); left: 16px; right: 16px;
  display: grid; grid-template-rows: var(--focus-dot-height, 24px) var(--focus-action-height) 22px;
  gap: var(--focus-meta-gap); align-items: center; min-width: 0; z-index: 8;
}
.focus-meta .tab-mode-dots {
  position: static; transform: none; width: 100%; min-width: 0;
  gap: clamp(2px, 2vw, 10px); overflow: hidden; height: var(--focus-dot-height, 24px);
}
.focus-meta .tab-mode-dot { flex-shrink: 1; min-width: 2px; }
.focus-meta .dot-icon-circle { flex-shrink: 0; }
.focus-meta .home-sub-task,
.focus-meta .prog-carousel-container,
.focus-meta .mode-time-display { position: static; transform: none; margin: 0; min-width: 0; }
.focus-meta .home-sub-task,
.focus-meta .prog-carousel-text { font-size: clamp(14px, 6.5vw, 27.3px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.focus-meta .prog-carousel-container { width: 100%; height: var(--focus-action-height); gap: 4px; }
.focus-meta .prog-carousel-text { min-width: 0; }
.focus-meta .mode-time-display { text-align: center; overflow: hidden; text-overflow: ellipsis; line-height: 22px; }
.focus-task-card .home-timer-wrapper {
  top: var(--focus-timer-center); left: 50%;
  width: var(--focus-timer-size); height: var(--focus-timer-size);
}
.focus-task-card .home-timer-time { font-size: var(--focus-timer-font, 3.4rem); white-space: nowrap; }
.focus-task-card .home-timer-text-container { width: 84%; }
.focus-task-card .home-timer-label { font-size: var(--focus-label-font, 1.5rem); }
.focus-task-card .time-unit { font-size: var(--focus-unit-font, 1.5rem); margin: 0 2px 0 1px; }
.focus-task-card .home-start-btn,
.focus-task-card .prog-complete-btn { height: var(--focus-button-size, 65px); }
.focus-task-card .home-start-btn,
.focus-task-card .prog-complete-btn,
.focus-task-card .prog-quick-time-group { top: var(--focus-button-top); }
.focus-task-card .prog-quick-btn { height: var(--focus-button-size, 60px); }
.focus-task-card .home-start-btn svg { width: 100%; height: 100%; }
.focus-task-card .prog-edge-nav-zone { top: 40px; bottom: calc(100% - var(--focus-button-top)); width: 25%; }
.focus-task-card .prog-finish-without-time { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
  .focus-task-card { max-width: 480px; }
  .focus-meta .home-sub-task, .focus-meta .prog-carousel-text { font-size: 30px; }
}
/* A short, wide window keeps the timer centered with details and controls beside it. */
@media (min-width: 600px) and (max-height: 600px) {
  .focus-task-card { max-width: 900px; }
}
.focus-horizontal .focus-meta { width: calc((100% - var(--focus-timer-size)) / 2 - 24px); right: auto; }
.focus-horizontal .home-start-btn,
.focus-horizontal .prog-complete-btn,
.focus-horizontal .prog-quick-time-group { left: calc(75% + var(--focus-timer-size) / 4); }
.focus-horizontal .prog-quick-time-group { top: calc(var(--focus-timer-center) - 52px); width: calc((100% - var(--focus-timer-size)) / 2 - 24px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.focus-horizontal .prog-quick-btn { height: 44px; }
/* Browser action text starts at 16px and fits down to 14px; PWA fitting is unchanged. */
.focus-task-card.focus-browser .home-sub-task,
.focus-task-card.focus-browser .prog-carousel-text { font-size: 16px; }
/* Keep the separate finish action below and to the right of the central controls. */
.focus-browser .prog-finish-without-time {
  bottom: 2px; right: 8px; max-width: calc(50% - 57px);
  padding: 6px; box-sizing: border-box; line-height: 16px;
  white-space: normal; overflow: visible; text-overflow: clip;
  text-wrap: balance;
}
.focus-browser .prog-finish-without-time .finish-word { white-space: nowrap; }
.focus-browser:not(.focus-horizontal) .prog-quick-time-group {
  top: var(--focus-quick-top); left: 50%; width: 90%;
  display: flex; gap: 8px;
}
.focus-browser .prog-quick-btn { height: var(--focus-button-size, 65px); min-width: 0; font-size: .85rem; }
.focus-browser.focus-horizontal .prog-quick-time-group {
  top: var(--focus-quick-top); width: calc((100% - var(--focus-timer-size)) / 2 - 28px);
  display: flex; gap: 8px;
}