/* Framework7 iOS components integrated with Django's document navigation. */
.time-drawer-actions { display: flex; align-items: center; gap: 12px; }
.time-drawer-actions .drawer-close { width: auto; padding: 8px; font: inherit; color: var(--primary); }
/* App chrome is not a document; retain normal editing inside form fields. */
.productivity-ios, .productivity-ios * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.productivity-ios :is(input, textarea, [contenteditable]:not([contenteditable="false"])),
.productivity-ios [contenteditable]:not([contenteditable="false"]) * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.productivity-ios [data-todo-drag], .productivity-ios [data-todo-drag] * {
  touch-action: none;
  -webkit-user-drag: none;
}
@media (pointer: coarse) {
  .productivity-ios .todo-task-drag {
    width: 28px;
    min-height: 44px;
    margin-inline: -6px;
    opacity: 1;
  }
}
.productivity-ios.is-sorting-tasks .todo-task-row.is-dragging {
  opacity: .85;
  border-color: var(--f7-theme-color);
  transform: scale(1.015);
}
html { height: auto; overflow: auto; }
body.productivity-ios { position: static; height: auto; overflow: visible; min-height: 100dvh; }
.productivity-ios {
  --f7-font-family: -apple-system, BlinkMacSystemFont, "Vazirmatn", sans-serif;
  --f7-theme-color: #007aff;
  --f7-button-border-radius: 12px;
  --f7-button-height: 46px;
  --f7-button-font-size: 16px;
  --f7-button-font-weight: 600;
  --f7-dialog-border-radius: 18px;
  --f7-actions-border-radius: 16px;
  --radius: 18px;
  --radius-control: 12px;
  font-family: var(--f7-font-family);
}
html:not(.dark):not(.amoled) .productivity-ios {
  --background: #f2f2f7; --card: #fff; --muted: #e9e9ee;
  --primary: #007aff; --border: #dcdce2; --foreground: #1c1c1e;
}
.productivity-ios .site-header {
  position: sticky; top: 0; height: auto; width: 100%; z-index: 200;
  padding-top: env(safe-area-inset-top); color: var(--foreground);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.productivity-ios .site-header::before, .productivity-ios .site-header::after { display: none; }
.productivity-ios .site-shell { min-height: 100dvh; }
.productivity-ios .button { text-transform: none; white-space: normal; height: auto; min-height: 44px; line-height: 1.3; }
.productivity-ios :is(button, .btn, a, input, select, textarea) { touch-action: manipulation; }
.productivity-ios :is(button, .btn):disabled { opacity: .45; cursor: default; }
/* Focus rings follow the input modality tracked on <html>. Sheets and dialogs
   move focus programmatically, and a tap must never leave a ring behind on the
   button that received it. Keyboard users keep a visible ring everywhere. */
.productivity-ios :is(button, .btn, a, [role="button"], input, textarea, select, label) { -webkit-tap-highlight-color: transparent; }
html:not([data-input-mode="pointer"]) .productivity-ios :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
html[data-input-mode="pointer"] .productivity-ios :is(button, .btn, a, [role="button"], summary, [tabindex]):is(:focus, :focus-visible) { outline: none; }
/* Text fields keep their own highlight while typing: that part reads as native. */
html[data-input-mode="pointer"] .productivity-ios :is(input, textarea, select):focus-visible { outline: none; }
.productivity-ios :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  font-family: inherit; font-size: 16px; min-height: 46px; padding: 11px 13px;
  border-radius: 12px; background-color: var(--muted); color: var(--foreground);
  border: 1px solid transparent; max-width: 100%; box-sizing: border-box;
}
.productivity-ios textarea { min-height: 100px; }
.productivity-ios input:is([type="checkbox"], [type="radio"]) { appearance: auto; accent-color: var(--primary); width: 22px; height: 22px; }
.productivity-ios input[type="range"] { accent-color: var(--primary); }
.productivity-ios :is(.card, .post, .today-card, .settings-card, .todo-sidebar, .todo-main, .habit-board, .time-track-board, .exercise-card) {
  border-radius: 18px; background-color: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.025);
}
.productivity-ios :is(.confirm-modal, .timer-modal, .cal-modal, .habit-ai-modal, .habit-overview-modal, .todo-task-modal) {
  border-radius: 22px; max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.app-tabbar { display: none; }
.app-page-title { display: none; }
.app-account-button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--muted); color: var(--primary); cursor: pointer; }
.app-account-button .ui-icon { width: 22px; height: 22px; }
.app-navigation-state { position: fixed; inset: 0; z-index: 290; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 24px; background: var(--background); color: var(--muted-foreground); font-size: 14px; opacity: 0; transition: opacity .26s ease; view-transition-name: app-loading; }
.app-navigation-state.is-visible { opacity: 1; transition: none; }
html.app-arriving .app-navigation-state { display: flex !important; opacity: 1; transition: none; }
/* Lay out the destination beneath the opaque loader; reveal it with one fade. */
html.app-arriving .productivity-ios .main { opacity: 1; }
::view-transition-old(app-loading), ::view-transition-new(app-loading) { animation: none; mix-blend-mode: normal; }
@keyframes navigation-hint { from { opacity: 0; } to { opacity: 1; } }
.app-navigation-spinner { width: 25px; height: 25px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: app-spin .7s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
/* Tab geometry and selected color must match the next document immediately. */
.app-tabbar .tab-link { transition: background-color .14s ease; border-radius: 12px; }
.app-tabbar .tab-link:active { background: color-mix(in srgb, var(--primary) 14%, transparent); }
/* Presses answer on touchdown, before the network does. */
.productivity-ios :is(.btn, .button, .app-account-button, .theme-toggle, .todo-icon-btn, .habit-icon-btn) { transition: transform .12s ease, opacity .12s ease, background .14s ease; }
.productivity-ios :is(.btn, .button, .app-account-button, .theme-toggle, .todo-icon-btn, .habit-icon-btn):active { transform: scale(.955); opacity: .82; }
.productivity-ios :is(.card, .post, .today-card, .settings-option, .list li a, .todo-row):active { background-color: color-mix(in srgb, var(--muted) 60%, var(--card)); }
.app-navigating .main { pointer-events: none; }
.productivity-ios .main { transition: opacity .18s ease; }
/* Only the no-view-transition fallback hides content while a page boots;
   with view transitions the outgoing snapshot covers the gap instead. */
@supports not (view-transition-name: none) {
  html.app-booting:not(.app-arriving) .productivity-ios .main { opacity: 0; }
}
body.task-composer-open { overflow: hidden; }
.task-composer-sheet { position: fixed; inset: auto; top: calc(var(--composer-top, 0px) + 12px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; width: min(100%, 560px); max-width: 100%; height: calc(var(--composer-height, 100dvh) - 12px - env(safe-area-inset-top)); max-height: none; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: var(--card); color: var(--foreground); overflow: hidden; }
.task-composer-sheet[open] { display: flex; flex-direction: column; animation: composer-enter .25s cubic-bezier(.2,.7,.3,1); }
.task-composer-sheet::backdrop { background: #0006; backdrop-filter: blur(4px); }
.task-composer-head { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.task-composer-head h2 { font-size: 17px; margin: 0; text-align: center; }
.task-composer-head button { border: 0; background: none; color: var(--primary); font: inherit; min-height: 44px; }
.productivity-ios .task-composer-sheet .todo-task-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; animation: none; }
.task-composer-sheet .todo-compose-tools, .task-composer-sheet .todo-compose-chips button:disabled { display: none; }
.productivity-ios .task-composer-sheet input.todo-title-input { font-size: 22px; min-height: 60px; }
.productivity-ios .task-composer-sheet textarea.todo-description-input { min-height: 110px; }
.task-composer-sheet .todo-compose-footer { margin-top: auto; padding-top: 24px; flex-wrap: wrap; gap: 12px; }
.task-composer-sheet .todo-form-actions { width: 100%; display: flex; }
.task-composer-sheet .todo-submit-btn { flex: 1; max-width: none; width: 100%; }
.task-composer-sheet .todo-form-actions [data-todo-cancel] { display: none; }
@keyframes composer-enter { from { opacity: .6; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.productivity-ios.keyboard-open .app-tabbar { display: none; }
/* Framework7 normally positions overlays in its fixed-height app root.
   This app uses document scrolling, so overlays must follow the viewport. */
.productivity-ios :is(.actions-modal, .dialog, .toast, .popover) { position: fixed; }
.productivity-ios :is(.actions-backdrop, .dialog-backdrop, .popover-backdrop) { position: fixed; inset: 0; }
.productivity-ios :is(.confirm-backdrop, .timer-modal-backdrop, .cal-modal-backdrop, .todo-detail-backdrop, .todo-completion-backdrop, .time-todo-modal-backdrop, .exercise-modal-backdrop, .habit-ai-backdrop, .ai-confirm-overlay) { z-index: 1100; }
.productivity-ios .time-nested-modal,
.productivity-ios [data-global-confirm] { z-index: 1250; }
.productivity-ios :is(.actions-backdrop, .dialog-backdrop, .popover-backdrop) { z-index: 1300; }
.productivity-ios :is(.actions-modal, .dialog, .toast, .popover) { z-index: 1350; }
.productivity-ios .actions-modal { max-height: calc(100dvh - env(safe-area-inset-top) - 20px); overflow-y: auto; }
.productivity-ios .actions-button { min-height: 52px; }
.productivity-ios .card { margin-inline: 0; }
.productivity-ios :is(.todo-detail-modal, .exercise-builder, .exercise-runner, .time-todo-modal) { border-radius: 22px; max-height: 85dvh; overflow-y: auto; }
.ios-login { max-width: 420px; margin: 6vh auto; padding: 24px 0; }
.about-project { width: min(100%, 560px); margin: 5vh auto; padding: 24px 8px; }
.about-project img { object-fit: contain; }
.about-project h1 { font-size: 28px; letter-spacing: -.6px; }
.about-project .about-dedication { font-size: 22px; font-weight: 400; color: var(--muted-foreground); }
.about-project p { font-size: 17px; line-height: 1.8; color: var(--muted-foreground); }
.about-project .about-signoff { margin-top: 32px; color: var(--foreground); }
.ios-sheet-backdrop.is-loading :is(.tracking-overview-summary, .tracking-heat-card, .track-records-list, .track-records-empty, .track-record-form, .track-records-foot) { display: none; }
.ios-detail-sheet [role="status"] { color: var(--muted-foreground); padding-block: 16px; }
.productivity-ios .app-launch-mark { object-fit: contain; background: none; box-shadow: none; }
.ios-login-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 20px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 38px; font-weight: 700; }
.ios-login h1 { text-align: center; font-size: 32px; letter-spacing: -1px; margin: 0 0 8px; }
.login-title-a {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  opacity: 0;
  color: var(--primary);
  font-weight: 800;
  transform-origin: bottom center;
  transform: scale(.4);
  animation: login-title-a-pop 6s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes login-title-a-pop {
  0%, 58% { width: 0; opacity: 0; transform: scale(.4); text-shadow: none; }
  66% { width: .8em; opacity: 1; transform: scale(1.18); text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 65%, transparent); }
  72% { transform: scale(1); }
  88% { width: .8em; opacity: 1; transform: scale(1); text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 65%, transparent); }
  96%, 100% { width: 0; opacity: 0; transform: scale(.5); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-title-a { animation: none; width: .8em; opacity: 1; transform: none; text-shadow: none; }
}
.ios-login > p { color: var(--muted-foreground); text-align: center; margin: 0 0 32px; }
.ios-login .login-taunt {
  margin: 10px 0 32px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.1px;
  color: var(--primary);
  animation: login-taunt-in .65s cubic-bezier(.2, .8, .2, 1) both,
             login-taunt-pulse 1.7s ease-in-out .65s infinite,
             login-taunt-wiggle 2.6s ease-in-out .65s infinite;
}
@keyframes login-taunt-in {
  0% { opacity: 0; transform: scale(.3) rotate(-8deg); filter: blur(8px); }
  55% { opacity: 1; transform: scale(1.2) rotate(4deg); filter: blur(0); }
  75% { transform: scale(.94) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes login-taunt-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 75%, transparent); }
}
@keyframes login-taunt-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .login-taunt { animation: none; }
}
.ios-login .login-card { display: block; width: 100%; padding: 24px; border-radius: 24px; background: var(--card); animation: none; }
.ios-login .field { margin-bottom: 18px; }
.ios-login label { display: block; font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 8px; }
.ios-login input { width: 100%; }
.ios-login .login-btn { width: 100%; min-height: 50px; margin-top: 8px; }
@media (max-width: 900px) {
  body.ios-sheet-open { overflow: hidden; }
  .productivity-ios .time-nested-modal {
    top: var(--ios-sheet-top, 0px); bottom: auto;
    height: var(--ios-sheet-height, 100dvh);
    padding: 12px; box-sizing: border-box;
    overflow: hidden;
  }
  .productivity-ios .time-nested-modal > :is(.time-todo-modal, .confirm-modal) {
    max-height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
    width: min(100%, 480px); box-sizing: border-box;
    overscroll-behavior: contain;
  }
  .productivity-ios .time-nested-modal .time-todo-modal > * { flex-shrink: 0; }
  /* One vertical scroller; intrinsic input widths must not widen the grid. */
  .productivity-ios .todo-detail-modal { max-width: calc(100vw - 16px); overflow: hidden; }
  .productivity-ios .todo-detail-body {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .productivity-ios .todo-detail-main,
  .productivity-ios .todo-detail-side { min-width: 0; overflow: visible; padding: 16px; }
  .productivity-ios .todo-detail-modal :is(input, textarea, select, .todo-detail-field, .todo-detail-comment-input) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .productivity-ios .todo-detail-field { grid-template-columns: minmax(0, 1fr); }
  .productivity-ios .todo-detail-description { width: 100%; max-width: 100%; margin-inline: 0; }
  .productivity-ios .todo-detail-subtask { max-width: 100%; margin-inline: 0; }
  .productivity-ios .todo-detail-date-pop { position: relative !important; inset: auto !important; width: 100%; max-width: 100%; }
  .productivity-ios .todo-detail-head { min-width: 0; gap: 8px; }
  .productivity-ios .todo-detail-actions { flex-shrink: 0; }
  .productivity-ios .cal-color-swatch {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
  }
  .productivity-ios .time-main-area { width: 100%; min-width: 0; }
  .productivity-ios .time-calendar { width: 100%; margin-inline: 0; -webkit-overflow-scrolling: touch; }
  .productivity-ios .ios-sheet-dimmer { z-index: 1090; background: #0006; backdrop-filter: blur(4px); }
  .productivity-ios .ios-sheet-backdrop { inset: 0; padding: 0; background: #0006; backdrop-filter: blur(4px); align-items: stretch; }
  .productivity-ios .ios-detail-sheet {
    position: fixed; top: calc(var(--ios-sheet-top, 0px) + 12px + env(safe-area-inset-top));
    left: 0; right: 0; bottom: auto; margin: 0 auto; width: min(100%, 560px); max-width: 100%;
    height: calc(var(--ios-sheet-height, 100dvh) - 12px - env(safe-area-inset-top)); max-height: none;
    padding: 0 20px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0;
    background: var(--card); color: var(--foreground); overflow-y: auto; overscroll-behavior: contain;
    z-index: 1100; box-shadow: none; transform: translateY(28px); opacity: 0;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .2s;
  }
  .productivity-ios .ios-detail-sheet.is-open, .productivity-ios .ios-sheet-backdrop.is-open .ios-detail-sheet { transform: none; opacity: 1; }
  .ios-detail-sheet > :is(.calendar-drawer-head, .track-records-head, .tracking-overview-head) { position: sticky; top: 0; z-index: 5; background: var(--card); padding: 16px 0; margin: 0 0 20px; min-height: 68px; border-bottom: 1px solid var(--border); }
  .ios-detail-sheet h2 { font-size: 20px; }
  .ios-detail-sheet .calendar-eyebrow, .ios-detail-sheet .calendar-drawer-head p { display: none; }
  .productivity-ios .ios-sheet-done { border: 0; border-radius: 0; background: none; color: var(--primary); width: auto; min-width: 48px; font: inherit; }
  .ios-detail-sheet .day-form { margin-bottom: 20px; }
  .ios-detail-sheet .time-form-actions { flex-wrap: wrap; gap: 12px; }
  /* Keep the duration control out from under Framework7's expanding action
     button on narrow Safari viewports. Each control gets its own tap row. */
  .ios-detail-sheet .track-record-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  .ios-detail-sheet .track-record-form-row > * {
    width: 100%;
    min-width: 0;
  }
  .ios-detail-sheet .track-record-hours-field { flex: none; }
  .ios-detail-sheet [data-track-record-submit],
  .ios-detail-sheet [data-today-track-record-submit] { flex: none; }
  .ios-detail-sheet .tracking-overview-summary { display: flex; flex-direction: column; }
  .ios-detail-sheet .tracking-day-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .productivity-ios .calendar-card { border: 0; padding: 12px 4px; background: var(--card); border-radius: 20px; overflow: hidden; }
  .productivity-ios .app-calendar-weekdays, .productivity-ios .app-calendar-week { gap: 2px; }
  .productivity-ios .app-calendar-weekdays div { font-size: 11px; overflow: hidden; }
  .productivity-ios .app-calendar-day { min-height: 58px; padding: 6px 0; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: none; box-shadow: none; }
  .productivity-ios .app-calendar-day.is-today { background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
  .productivity-ios .app-calendar-day.is-selected { background: var(--primary); color: #fff; }
  .productivity-ios .calendar-day-number { width: 30px; height: 30px; font-size: 17px; display: grid; place-items: center; }
  .productivity-ios .calendar-day-preview { display: none; }
  .productivity-ios .app-calendar-day:hover { transform: none; }
  .productivity-ios .site-header .brand, .productivity-ios .site-header [data-theme-toggle] { display: none; }
  .productivity-ios .site-header { z-index: 280; }
  .productivity-ios .nav-actions { width: 100%; display: flex; gap: 8px; }
  .productivity-ios .app-page-title { display: block; margin-right: auto; font-size: 23px; font-weight: 750; letter-spacing: -.6px; }
  .productivity-ios .header-timer-button, .productivity-ios .app-account-button { background: transparent; color: var(--primary); border: 0; }
  .productivity-ios .main .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .productivity-ios .main { animation: none; }
  .productivity-ios.authenticated .site-shell { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .productivity-ios .nav-links, .productivity-ios .footer { display: none; }
  .productivity-ios .nav-inner { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .productivity-ios .brand { font-size: 18px; }
  .productivity-ios .main { padding-top: 18px; }
  .productivity-ios .container { width: 100%; padding-inline: max(16px, env(safe-area-inset-left)); }
  .productivity-ios .app-tabbar {
    display: block; position: fixed; bottom: 0; top: auto; z-index: 300;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--muted-foreground);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: .5px solid var(--border);
  }
  .app-tabbar .toolbar-inner { height: 62px; padding: 4px 6px; }
  .app-tabbar .tab-link { flex: 1; gap: 4px; min-width: 0; min-height: 50px; border: 0; background: none; color: var(--muted-foreground); font-family: inherit; cursor: pointer; }
  .app-tabbar .tab-link-active { color: var(--primary); }
  .app-tabbar .ui-icon { width: 23px; height: 23px; }
  .app-tabbar .tabbar-label { font-size: 10px; font-weight: 600; }
  .more-dots { font-size: 23px; line-height: 23px; letter-spacing: 2px; }
  .productivity-ios :is(button, .btn, [role="button"]):not(.github-cell):not(.time-block):not(.time-block-handle) { min-height: 44px; }
  .productivity-ios :is(.habit-icon-btn, .drawer-close, .theme-toggle, .item-delete) { min-width: 44px; }
  .productivity-ios :is(.calendar-actions, .settings-actions, .confirm-actions, .todo-toolbar, .exercise-actions) { flex-wrap: wrap; gap: 8px; }
  .productivity-ios :is(.calendar-toolbar, .todo-header, .exercise-header) { flex-wrap: wrap; gap: 12px; }
  .productivity-ios .tracking-calendar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }
  .productivity-ios .tracking-calendar-actions > [data-track-ai-open] {
    width: 100%;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
  }
  .productivity-ios .tracking-calendar-actions .tracking-mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    padding: 3px;
    border-radius: 11px;
  }
  .productivity-ios .tracking-calendar-actions .tracking-mode-toggle button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
  }
  .productivity-ios .tracking-week-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }
  .productivity-ios .tracking-week-nav .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 7px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
  }
  .productivity-ios .tracking-week-nav .ui-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }
  .productivity-ios :is(.confirm-backdrop, .timer-modal-backdrop, .cal-modal-backdrop) { padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
  .productivity-ios :is(.confirm-modal, .timer-modal, .cal-modal) { width: min(100%, 480px); }
  .productivity-ios :is(.habit-scroll, .time-scroll, .calendar-scroll, .time-track-scroll) { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .ios-login { margin: 2vh auto; padding-top: max(24px, env(safe-area-inset-top)); }
}
@media (hover: none), (pointer: coarse) {
  .productivity-ios .time-hour-slot,
  .productivity-ios .time-block,
  .productivity-ios .time-mobile-selection { touch-action: pan-x pan-y pinch-zoom; }
  .productivity-ios .time-hour-slot { min-height: 0 !important; }
  .productivity-ios .time-block { padding-right: 34px; }
  .productivity-ios .time-block-move-grip {
    display: none; place-items: center; position: absolute; right: 0; top: 10px;
    width: 32px; height: calc(100% - 20px); min-height: 12px;
    font-size: 23px; color: var(--foreground); cursor: grab; z-index: 3;
  }
  .productivity-ios .time-block-handle,
  .productivity-ios .time-block-move-grip,
  .productivity-ios .time-mobile-selection-handle { touch-action: none; }
  .productivity-ios .time-block-handle { display: none; pointer-events: none; }
  .productivity-ios .time-block { padding-right: .5rem; }
  .productivity-ios .habit-name .habit-icon-btn, .productivity-ios .habit-name .habit-overview-btn { opacity: 1; visibility: visible; }
  .productivity-ios .habit-overview-btn { background: transparent; color: var(--primary); touch-action: manipulation; }
  .productivity-ios .habit-overview-btn:hover { background: transparent; }
}
@keyframes app-arrive { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── Page transitions ────────────────────────────────────────────────────────
   Django serves a full document per page, so cross-document view transitions
   carry the animation. The bars are named separately from the content, which is
   what makes this read as a view controller swap rather than a page load: the
   navigation bar and tab bar hold still while the content slides or fades.
   Browsers without view transitions fall back to the boot fade above. */
@view-transition { navigation: auto; }
.productivity-ios .site-header { view-transition-name: app-navbar; }
.productivity-ios .app-tabbar { view-transition-name: app-tabbar; }
.productivity-ios .main { view-transition-name: app-content; }
::view-transition-image-pair(app-content) { isolation: none; }
::view-transition-old(app-content), ::view-transition-new(app-content) { mix-blend-mode: normal; }
::view-transition-group(app-content) { animation-duration: .4s; }
/* The bars stay anchored; only their contents (title, active tab) cross-fade. */
::view-transition-old(app-navbar), ::view-transition-old(app-tabbar) { animation: app-fade-out .2s linear both; }
::view-transition-new(app-navbar), ::view-transition-new(app-tabbar) { animation: app-fade-in .2s linear both; }
::view-transition-old(root) { animation: app-fade-out .2s linear both; }
::view-transition-new(root) { animation: app-fade-in .2s linear both; }
@keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* Drilling in: the new page rides in from the right over the old one. */
html.nav-push::view-transition-old(app-content) { animation: ios-push-out .4s cubic-bezier(.32,.72,0,1) both; }
html.nav-push::view-transition-new(app-content) { animation: ios-push-in .4s cubic-bezier(.32,.72,0,1) both; }
/* Going back: the same motion, mirrored. */
html.nav-back::view-transition-old(app-content) { animation: ios-pop-out .4s cubic-bezier(.32,.72,0,1) both; }
html.nav-back::view-transition-new(app-content) { animation: ios-pop-in .4s cubic-bezier(.32,.72,0,1) both; }
/* Tab bar: siblings, so they cross-fade in place like UITabBarController. */
html.nav-tab::view-transition-group(app-content) { animation-duration: .28s; }
html.nav-tab::view-transition-old(app-content) { animation: ios-tab-out .28s ease both; }
html.nav-tab::view-transition-new(app-content) { animation: ios-tab-in .28s ease both; }
@keyframes ios-push-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ios-push-out { from { transform: none; opacity: 1; } to { transform: translateX(-26%); opacity: .5; } }
@keyframes ios-pop-in { from { transform: translateX(-26%); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes ios-pop-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes ios-tab-in { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }
@keyframes ios-tab-out { from { opacity: 1; } to { opacity: 0; } }

/* ── Launch screen ───────────────────────────────────────────────────────────
   Shown once per session when the app is opened, not on internal navigation.
   It dismisses itself on a timer so a stalled script can never leave the app
   stuck behind it; the ready class below just cuts the wait short. */
.app-launch-screen {
  position: fixed; inset: 0; z-index: 2000; display: none;
  place-items: center; background: var(--background);
  padding-bottom: env(safe-area-inset-bottom);
}
html.app-launching .app-launch-screen { display: grid; animation: launch-hold 1.15s ease-in .35s forwards; }
html.app-launching.app-launch-ready .app-launch-screen { animation: launch-hold .42s ease-in forwards; }
.app-launch-mark {
  width: 84px; height: 84px; border-radius: 23px; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 43px; font-weight: 700; letter-spacing: -1px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--primary) 34%, transparent);
  animation: launch-mark .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes launch-mark { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes launch-hold { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .productivity-ios *, .productivity-ios *::before, .productivity-ios *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.app-launching .app-launch-screen, .app-launch-mark { animation-duration: .01ms !important; }
}