/* Local states inside the existing I05 task container; shared tokens and art stay intact. */
.task-detail { display: flex; flex-direction: column; text-align: center; }
.task-detail h1 { margin-bottom: 12px; }
.task-detail .page-actions { margin-top: auto; padding-top: 24px; }
.task-detail .task-art { width: 100%; max-height: 250px; margin: 24px auto; }
.task-attention-space { display: grid; place-items: center; min-height: 160px; margin: 24px 0; padding: 24px; color: var(--muted); font-size: 14px; line-height: 24px; }
.execution-controls { margin-top: auto; padding-top: 16px; }
.execution-controls .duration { flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.execution-controls .page-actions { padding-top: 16px; }

.execution-controls [data-elapsed] { min-width: 90px; }
/* Flex remainder anchors completion below the input; padding preserves short-screen space. */
.writing-page .writing-controls { margin-top: auto; padding: var(--space-8) var(--method-action-inset) 0; }
.writing-controls .page-actions { padding: 0; }
@media (max-width: 760px) {
  .review-layout:not(.show-review) .phone:has(.writing-page) { height: var(--writing-viewport-height, 100dvh); }
}
.follow-page > .follow-controls { display: none; }
.follow-page .execution-controls { flex: none; }
.follow-page .execution-controls .duration { margin-top: 4px; }
.follow-page .execution-controls .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-page[data-execution-state="paused"] .task-art { animation-play-state: paused; }

/* Scoped functional controls; preserve the existing cards, circles and task layouts. */
.phone[data-screen] .topbar:has(.detail-actions) { grid-template-columns: 88px 1fr 88px; }
.detail-actions { display: flex; gap: 0; align-items: center; width: 88px; justify-self: end; }
.detail-actions .icon-button { flex: 0 0 44px; }
.liked-toggle[aria-pressed="true"] .icon { fill: var(--accent); stroke: var(--accent); }
.discover-method-item, .discover-article-item { position: relative; min-width: 0; }
.discover-like { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; }
.discover-method-item .discover-method-copy { padding-right: 30px; }
.discover-article-item .discover-article-row { padding-right: 52px; }
.discover-article-item .discover-article-row > .icon { align-self: flex-end; }

.unavailable-method .page-actions { margin-top: auto; }

/* Design System v1.0 / Batch 1: executing follow only. The Canvas scene and
   interaction equations remain in magnetic-follow.js without modification. */
.phone.follow-surface[data-screen="task"] { --header-title-size: var(--text-lg); --header-title-leading: var(--leading-lg); }
.phone.follow-surface[data-screen="task"] .topbar { height: var(--header-mobile-height); }
.phone.follow-surface[data-screen="task"] .module-title { font: var(--weight-medium) var(--header-title-size)/var(--header-title-leading) var(--font-body); }
.follow-surface .page-scroll > .follow-page { padding: var(--space-4) var(--page-gutter); }
.follow-page > h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-semibold); }
.follow-page .follow-hint { min-height: 44px; margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.follow-page .follow-progress-text { font-size: var(--text-xs); line-height: 18px; }
.follow-page .execution-controls { padding-top: var(--space-4); }
.follow-page .execution-controls .duration { margin-top: 0; font-size: var(--text-xs); line-height: 18px; }
.follow-page .execution-controls .page-actions { padding: var(--space-3) 0 0; gap: var(--space-3); }
.follow-page .execution-controls .button { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); }
@media (max-width: 360px) {
  .follow-surface .page-scroll > .follow-page { padding-top: var(--space-2); }
}