body { margin: 0; background: var(--surface-1); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } .mt-canvas { background: var(--surface-1); border-radius: var(--radius-canvas); padding: var(--space-7); } .mt-demo { display: flex; flex-wrap: wrap; gap: var(--space-7); justify-content: center; align-items: flex-start; padding: var(--space-7); } .mt-demo > .mt-ph { flex: 1 1 300px; } /* card */ .mt-ph { max-width: 360px; margin: 0 auto; box-sizing: border-box; background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); border-radius: var(--radius-card); padding: var(--space-7) var(--space-6); } .mt-ph-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); } .mt-bar { height: var(--stroke-track); background: var(--border); border-radius: var(--radius-bar); margin-bottom: var(--space-4); } .mt-bar-fill { height: var(--stroke-track); background: var(--progress); border-radius: var(--radius-bar); transition: width var(--duration-progress) var(--ease-spring); } .mt-checkin { position: relative; } .mt-ph-edge { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .mt-ph-edge .mt-bar { margin: 0; height: 6px; border-radius: 0; } .mt-ph-edge .mt-bar-fill { height: 100%; border-radius: 0 var(--radius-bar) var(--radius-bar) 0; } [dir="rtl"] .mt-ph-edge .mt-bar-fill { border-radius: var(--radius-bar) 0 0 var(--radius-bar); margin-inline-start: 0; } /* sections */ .mt-sec { border-top: var(--stroke-hairline) solid var(--border); padding: var(--space-5) 0; } .mt-sec.is-first { border-top: none; padding-top: var(--space-1); } .mt-sec.is-center { text-align: center; padding-bottom: var(--space-1); } /* text */ .mt-lb { color: var(--text-secondary); margin: 0 0 var(--space-2); } .mt-vl { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); } .mt-hint { color: var(--text-muted); margin: var(--space-1) 0 0; } /* focus */ .mt-dial:focus, .mt-zone:focus, .mt-hold:focus { outline: none; } .mt-dial:focus-visible, .mt-hold:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-full); } .mt-zone:focus-visible .mt-target { stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: none; } /* dial */ .mt-dial-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } .mt-dial { flex-shrink: 0; touch-action: none; cursor: grab; } .mt-tick { stroke: var(--border-strong); stroke-width: var(--stroke-tick); stroke-linecap: round; } .mt-tick.is-on { stroke: var(--energy); } .tone-mind .mt-tick.is-on { stroke: var(--mind); } .tone-effort .mt-tick.is-on { stroke: var(--text-primary); } .tone-effort .mt-pointer { fill: var(--text-primary); } .tone-sleep .mt-tick.is-on { stroke: var(--sleep); } .tone-sleep .mt-pointer { fill: var(--sleep); } .tone-mind .mt-pointer { fill: var(--mind); } .mt-dial-rim { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: var(--stroke-control); } .mt-dial-face { fill: var(--surface-2); stroke: var(--border); stroke-width: var(--stroke-hairline); } .mt-knob { transform-origin: 75px 75px; transition: transform var(--duration-detent) var(--ease-spring); } .mt-pointer { fill: var(--energy); } .mt-hub { fill: var(--border-strong); } /* fader */ .mt-q-head { display: flex; justify-content: space-between; align-items: baseline; } /* body map */ .mt-body-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; } .mt-body-wrap { display: flex; flex-direction: column; gap: var(--space-4); } .mt-body-detail { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--stroke-hairline) solid transparent; } /* no divider; the transparent hairline keeps the spacing */ .mt-body-side { display: flex; flex-wrap: wrap; gap: var(--space-2); } .mt-body-detail > .mt-btn { align-self: flex-start; } .mt-body { flex-shrink: 0; } .mt-body-fig { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; } .mt-limb-mark { fill: none; stroke: var(--border-strong); stroke-width: var(--stroke-control); stroke-linecap: round; stroke-linejoin: round; } .mt-limb { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: var(--stroke-control); } .mt-zone { cursor: pointer; touch-action: none; } .mt-heat { fill: var(--soreness-heat); transition: r var(--duration-detent) var(--ease-spring); } .mt-target { fill: transparent; stroke: var(--border-stronger); stroke-width: var(--stroke-control); stroke-dasharray: 2 2; } .mt-target.is-set { stroke: var(--soreness); stroke-dasharray: none; stroke-width: 1.5; } .mt-hit { fill: transparent; } /* hold button */ .mt-hold-wrap { text-align: center; } .mt-hold { position: relative; width: 96px; height: 96px; margin: 0 auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; } .mt-hold-svg { position: absolute; inset: 0; } .mt-ring-track { fill: none; stroke: var(--border); stroke-width: var(--stroke-track); } .mt-ring { fill: none; stroke: var(--progress); stroke-width: var(--stroke-track); } .mt-hold-face { position: absolute; inset: var(--space-3); border-radius: var(--radius-full); background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-primary); transition: transform var(--duration-press); } .mt-hold-face.is-pressed { transform: scale(.94); } .mt-check { color: var(--confirm-ink); } .mt-hold-hint { margin-top: var(--space-3); } .mt-hold.is-disabled { cursor: not-allowed; opacity: .5; } /* ---------- shared ---------- */ .mt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mt-stack { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 324px; } .mt-btn:focus-visible, .mt-switch-row:focus-visible, .mt-seg-item:focus-visible, .mt-chip:focus-visible, .mt-row:focus-visible, .mt-tab:focus-visible, .mt-icon-btn:focus-visible, .mt-toast-action:focus-visible, .mt-sheet:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-textarea:focus-visible { outline: none; border-color: var(--text-primary); box-shadow: var(--focus-ring); } /* Button */ .mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 0 var(--space-7); box-sizing: border-box; border-radius: var(--radius-full); border: var(--stroke-control) solid transparent; font-family: var(--font-sans); cursor: pointer; transition: transform var(--duration-press); } .mt-btn:active { transform: scale(.97); } .mt-btn.is-block { display: flex; width: 100%; } .mt-btn-primary { background: var(--text-primary); color: var(--surface-2); } .mt-btn-secondary { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-strong); } .mt-btn-plain { background: transparent; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 0 var(--space-3); } .mt-btn:disabled, .mt-btn[aria-disabled="true"] { cursor: not-allowed; transform: none; } .mt-btn-primary:disabled { background: var(--surface-1); color: var(--text-muted); border-color: var(--border-strong); } .mt-btn-secondary:disabled, .mt-btn-plain:disabled { color: var(--text-muted); } .mt-spin { width: 16px; height: 16px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid currentColor; border-right-color: transparent; animation: mt-spin 800ms linear infinite; } @keyframes mt-spin { to { transform: rotate(360deg); } } /* Selections share the check-in button's language: a solid knob on a rounded-rect track that slides or sweeps in with the spring, and dot-matrix marks for "chosen". Neutral ink (text-primary) unless the control has a tone. */ .mt-dots circle { animation: mt-dots-in var(--duration-detent) var(--ease-spring) both; animation-delay: calc(var(--k) * 30ms); } @keyframes mt-dots-in { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: none; transform-box: fill-box; transform-origin: center; } } /* Switch: a square-ish knob on a rounded-rect track; on = ink track, a dot check in the knob */ .mt-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; min-height: 44px; padding: var(--space-2) 0; background: none; border: 0; color: var(--text-primary); text-align: start; font-family: var(--font-sans); cursor: pointer; border-radius: var(--radius-thumb); } .mt-switch-text { display: flex; flex-direction: column; gap: 2px; } .mt-switch-desc { color: var(--text-muted); } .mt-switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; box-sizing: border-box; border-radius: calc(var(--radius-canvas) - var(--space-1)); background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); transition: background var(--duration-press), border-color var(--duration-press); } .mt-switch-thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--radius-thumb); background: var(--surface-2); border: var(--stroke-control) solid var(--border-stronger); display: flex; align-items: center; justify-content: center; color: var(--text-primary); transition: transform var(--duration-detent) var(--ease-spring); } .mt-switch.is-on { background: var(--text-primary); border-color: var(--text-primary); } .mt-switch.is-on .mt-switch-thumb { transform: translateX(20px); border-color: var(--surface-2); } [dir="rtl"] .mt-switch.is-on .mt-switch-thumb { transform: translateX(-20px); } .mt-switch-row:active .mt-switch-thumb { width: 26px; } .mt-switch-row:disabled { cursor: not-allowed; color: var(--text-muted); } /* SegmentedControl: one knob slides under the chosen option */ .mt-seg { --pad: 3px; position: relative; display: flex; padding: var(--pad); min-height: 44px; box-sizing: border-box; background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); border-radius: var(--radius-canvas); } .mt-seg-knob { position: absolute; inset-block: var(--pad); inset-inline-start: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--i) / var(--n)); width: calc((100% - 2 * var(--pad)) / var(--n)); box-sizing: border-box; border-radius: calc(var(--radius-canvas) - var(--pad)); background: var(--text-primary); transition: inset-inline-start var(--duration-detent) var(--ease-spring), left var(--duration-detent) var(--ease-spring), width var(--duration-detent) var(--ease-spring); } .mt-seg-knob.is-measured { inset-inline-start: auto; right: auto; } .mt-seg-item { position: relative; z-index: 1; flex: 1 1 0; min-width: max-content; border: 0; border-radius: calc(var(--radius-canvas) - var(--pad)); background: transparent; color: var(--text-secondary); font-family: var(--font-sans); cursor: pointer; padding: 0 var(--space-2); transition: color var(--duration-press); } .mt-seg-item.is-on { color: var(--surface-2); } .mt-seg-item:has(.mt-icon) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); } .mt-seg-item .mt-icon { flex: none; } .mt-seg-item:not(.is-on):hover { color: var(--text-primary); } .mt-seg-item:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* TagChip: the ink sweeps in from the start side when chosen, with a dot check */ .mt-tag-group .mt-lb { margin-bottom: var(--space-3); } .mt-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .mt-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); box-sizing: border-box; border-radius: var(--radius-canvas); background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; transition: color var(--duration-press) var(--duration-press), border-color var(--duration-press); } .mt-chip::before { content: ""; position: absolute; inset: -4px 0; } .mt-chip-fill { position: absolute; inset: calc(-1 * var(--stroke-control)); z-index: -1; border-radius: inherit; background: var(--text-primary); clip-path: inset(0 0 0 100% round var(--radius-canvas)); transition: clip-path var(--duration-detent) var(--ease-spring); } [dir="rtl"] .mt-chip-fill { clip-path: inset(0 100% 0 0 round var(--radius-canvas)); } .mt-chip.is-on { color: var(--surface-2); border-color: var(--text-primary); padding-inline-start: var(--space-3); background: var(--text-primary); transition: color var(--duration-press) var(--duration-press), border-color var(--duration-press), background 0s linear var(--duration-detent); } .mt-chip.is-on .mt-chip-fill, [dir="rtl"] .mt-chip.is-on .mt-chip-fill { clip-path: inset(0 0 0 0 round var(--radius-canvas)); } .mt-chip:active { transform: scale(0.97); } .mt-chip:disabled { cursor: not-allowed; color: var(--text-muted); } /* TextArea */ .mt-field-ta { display: flex; flex-direction: column; } .mt-optional { color: var(--text-muted); } .mt-textarea { box-sizing: border-box; width: 100%; resize: vertical; min-height: 88px; padding: var(--space-3); background: var(--surface-1); color: var(--text-primary); border: var(--stroke-control) solid var(--border-strong); border-radius: var(--radius-canvas); font-family: var(--font-sans); } .mt-textarea::placeholder { color: var(--text-muted); opacity: 1; } .mt-field-ta.is-error .mt-textarea { border-color: var(--danger-ink); border-width: 2px; } .mt-ta-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); } .mt-count { color: var(--text-muted); margin: 0; font-variant-numeric: tabular-nums; flex-shrink: 0; } .mt-count.is-low { color: var(--text-primary); } .mt-error { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--danger-ink); } /* StatusBadge */ .mt-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding-block: 0; padding-inline: var(--space-2) var(--space-3); border-radius: var(--radius-full); white-space: nowrap; font-weight: 500; } .mt-badge-ready { background: var(--ready-bg); color: var(--ready-ink); } .mt-badge-watch { background: var(--watch-bg); color: var(--watch-ink); } .mt-badge-neutral { background: var(--surface-1); color: var(--text-secondary); border: var(--stroke-control) solid var(--border-strong); padding: 0 var(--space-3); } /* ListRow */ .mt-list { background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); border-radius: var(--radius-canvas); overflow: hidden; width: 100%; max-width: 360px; } .mt-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-3) var(--space-5); box-sizing: border-box; background: var(--surface-2); border: 0; border-top: var(--stroke-hairline) solid var(--border); color: var(--text-primary); text-align: start; text-decoration: none; font-family: var(--font-sans); cursor: pointer; } .mt-list > .mt-row:first-child { border-top: 0; } div.mt-row { cursor: default; } .mt-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mt-row-meta { color: var(--text-muted); } .mt-row-chev { color: var(--text-secondary); flex-shrink: 0; } /* Glass circles (iOS 26 toolbar buttons) */ .mt-iconbtn { position: relative; width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-full); border: var(--stroke-control) solid var(--glass-stroke); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); color: var(--text-primary); cursor: pointer; transition: transform var(--duration-press); } .mt-iconbtn:active { transform: scale(.94); } .mt-iconbtn.is-filled { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-2); } .mt-iconbtn-dot { position: absolute; top: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--energy); border: 2px solid var(--surface-2); } .mt-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-glass-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); border: var(--stroke-control) solid var(--glass-stroke); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); } .mt-glass-group .mt-iconbtn { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; width: 40px; height: 40px; } /* NavBar — iOS 26 header */ .mt-nav { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 360px; box-sizing: border-box; } .mt-nav-bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; } .mt-nav-lead { display: flex; align-items: center; gap: var(--space-2); min-width: 44px; } .mt-nav-titles { display: flex; flex-direction: column; gap: 2px; } .mt-nav-sub { margin: 0; color: var(--text-secondary); } .mt-nav-title { margin: 0; font-family: var(--font-sans); font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); } [lang|="fa"] .mt-nav-title { font-family: var(--font-fa); letter-spacing: 0; line-height: 44px; } /* TabBar — the dock: separate glass circles, the current tab a filled pill with its name */ .mt-dock { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; max-width: 360px; box-sizing: border-box; padding: var(--space-2) 0; margin: 0 auto; } .mt-dock-tabs { display: flex; align-items: center; gap: var(--space-2); } .mt-dock-item { position: relative; height: 56px; min-width: 56px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0 16px; box-sizing: border-box; border-radius: var(--radius-full); border: var(--stroke-control) solid var(--glass-stroke); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; transition: background var(--duration-press), color var(--duration-press), padding var(--duration-detent) var(--ease-spring), transform var(--duration-press); } .mt-dock-item:not(.is-on) { padding: 0; width: 56px; } .mt-dock-item:active { transform: scale(.95); } .mt-dock-label { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width var(--duration-detent) var(--ease-spring), opacity var(--duration-press), margin var(--duration-detent) var(--ease-spring); } .mt-dock-item.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-2); box-shadow: var(--shadow-glass); } .mt-dock-item.is-on .mt-dock-label { max-width: 140px; opacity: 1; margin-inline-start: var(--space-2); } .mt-dock-item.is-on { isolation: isolate; } .mt-dock-item.is-on::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--glass-edge) 55%, transparent), transparent 70%); } .mt-dock-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; } .mt-dock-ring-track { fill: none; stroke: var(--border); stroke-width: 3; } .mt-dock-ring-fill { fill: none; stroke: var(--progress); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--duration-progress) var(--ease-spring); } .mt-dock-item.is-done:not(.is-on) { color: var(--confirm-ink); } .mt-dock-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--energy); border: 2px solid var(--surface-2); } .mt-dock-item.is-on .mt-dock-dot { display: none; } .mt-dock-item:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-dock-action { width: 56px; height: 56px; } .mt-dock.is-min .mt-dock-item { height: 44px; min-width: 44px; } .mt-dock.is-min .mt-dock-item:not(.is-on) { width: 44px; } .mt-dock.is-min .mt-dock-item.is-on { padding: 0; width: 44px; } .mt-dock.is-min .mt-dock-item.is-on .mt-dock-label { max-width: 0; opacity: 0; margin: 0; } .mt-dock.is-min .mt-dock-action { width: 44px; height: 44px; } .mt-dock.is-solid .mt-dock-item:not(.is-on), .mt-dock.is-solid .mt-dock-action { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--border-strong); } /* Sheet */ .mt-sheet-layer { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .mt-sheet-layer.is-inline { position: absolute; } .mt-scrim { position: absolute; inset: 0; background: var(--scrim); } .mt-sheet { position: relative; width: 100%; max-width: 390px; box-sizing: border-box; background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: var(--space-2) var(--space-6) var(--space-7); } .mt-sheet-layer.is-medium { padding: 0 var(--space-2) var(--space-2); } .mt-sheet.is-glass { border-radius: var(--radius-card); border: var(--stroke-control) solid var(--glass-stroke); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); } .mt-sheet.is-glass .mt-sheet-body, .mt-sheet.is-glass .mt-icon-btn { color: var(--glass-ink-secondary); } .mt-sheet-handle { width: 36px; height: 4px; margin: 0 auto var(--space-2); border-radius: var(--radius-bar); background: var(--border-strong); } .mt-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mt-sheet-title { margin: 0; color: var(--text-primary); } .mt-icon-btn { width: 44px; height: 44px; margin-inline-end: -10px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); cursor: pointer; } .mt-sheet-body { padding: var(--space-3) 0 var(--space-5); color: var(--text-secondary); } .mt-sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); } /* Toast */ .mt-toast-region { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--space-7)); /* toasts sit at the top, clear of the dock and the hold button */ display: flex; justify-content: center; pointer-events: none; z-index: 60; } .mt-toast-region.is-inline { position: static; } .mt-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; max-width: 340px; box-sizing: border-box; padding-block: var(--space-2); padding-inline: var(--space-5) var(--space-2); border-radius: var(--radius-full); background: var(--text-primary); color: var(--surface-2); } .mt-toast > .body { flex: 1; } .mt-toast-action { min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: var(--stroke-control) solid var(--surface-2); background: transparent; color: var(--surface-2); font-family: var(--font-sans); cursor: pointer; } .mt-toast-action:focus-visible { box-shadow: 0 0 0 2px var(--text-primary), 0 0 0 4px var(--surface-2); } /* Increase Contrast: hairlines step up to the control edge */ @media (prefers-contrast: more) { .mt-ph, .mt-list, .mt-sheet { border-color: var(--border-strong); } .mt-sec, .mt-row { border-top-color: var(--border-strong); } .mt-dock-item:not(.is-on), .mt-iconbtn, .mt-glass-group { border-color: var(--border-strong); } .mt-dock-ring-track { stroke: var(--border-strong); } .mt-bar { background: var(--border-strong); } .mt-ring-track { stroke: var(--border-strong); } .mt-dial-face { stroke: var(--border-strong); } .mt-target { stroke-dasharray: none; } } /* Reduce Motion: nothing springs or spins */ @media (prefers-reduced-motion: reduce) { .mt-knob, .mt-bar-fill, .mt-heat, .mt-hold-face, .mt-btn, .mt-switch, .mt-switch-thumb, .mt-seg-knob, .mt-seg-item, .mt-chip, .mt-chip-fill, .mt-dock-item, .mt-dock-label, .mt-dock-ring-fill, .mt-iconbtn { transition: none; } .mt-spin { animation-duration: 2400ms; } .mt-dots circle { animation: none; } .mt-chip:active, .mt-scale-track:active .mt-scale-thumb { transform: none; } } .mt-dial-row > .mt-field, .mt-body-row > div:last-child { flex: 1 1 140px; min-width: 0; } /* glass button — floating actions over content */ .mt-btn-glass { background: var(--glass-fill); color: var(--text-primary); border-color: var(--glass-stroke); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); } /* body map coach — pulses until the first touch */ .mt-coach { fill: none; stroke: var(--soreness); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mt-coach var(--duration-coach) ease-out infinite; pointer-events: none; } @keyframes mt-coach { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } } /* dial sizes and stacked layout (watch) */ .mt-dial-row.is-stack { flex-direction: column; gap: var(--space-2); text-align: center; } .mt-dial-row.is-stack > .mt-field { flex: none; } /* PixelCalendar */ .mt-pcal { width: 100%; max-width: 324px; } .mt-pcal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); } .mt-pcal-title { margin: 0; color: var(--text-primary); } .mt-pcal-sum { margin: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .mt-pcal-grid { display: flex; flex-direction: column; gap: var(--space-1); } .mt-pcal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); } .mt-pcal-wd span { text-align: center; color: var(--text-muted); } .mt-pcal-row > span[role="gridcell"] { display: block; aspect-ratio: 1; } .mt-px { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 24px; min-height: 24px; box-sizing: border-box; padding: 0; border-radius: var(--radius-pixel); border: var(--stroke-control) solid transparent; background: none; color: var(--text-primary); cursor: pointer; font-family: var(--font-sans); } .mt-px.is-done { background: var(--score-3); color: var(--on-score-3); } .mt-px.is-done.lv-1 { background: var(--score-1); color: var(--on-score-1); border-color: var(--score-2); } .mt-px.is-done.lv-2 { background: var(--score-2); color: var(--on-score-2); } .mt-px.is-done.lv-3 { background: var(--score-3); color: var(--on-score-3); } .mt-px.is-done.lv-4 { background: var(--score-4); color: var(--on-score-4); } .mt-px.is-partial { background: linear-gradient(0deg, var(--score-3) 50%, transparent 50%); border-color: var(--score-3); } .mt-px.is-partial .mt-icon { color: var(--text-primary); } .mt-px.is-missed { border-color: var(--border-strong); } .mt-px.is-rest { background: var(--border); } .mt-px.is-future { border: var(--stroke-control) dashed var(--border-strong); color: var(--text-secondary); } .mt-px.is-today { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--text-primary); } .mt-px:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-px-date { position: absolute; top: 3px; inset-inline-start: 4px; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; } .mt-pcal.has-dates .mt-px .mt-icon { margin-top: 10px; } .mt-pcal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-4) 0 0; color: var(--text-secondary); } .mt-pcal-legend li { display: flex; align-items: center; gap: var(--space-1); } .mt-pcal-scale { gap: 3px !important; } .mt-pcal-scale .mt-px-key:first-of-type { margin-inline-start: var(--space-1); } .mt-pcal-scale .mt-px-key:last-of-type { margin-inline-end: var(--space-1); } .mt-px-key { width: 12px; height: 12px; min-width: 0; min-height: 0; border-radius: 2px; display: inline-block; cursor: default; } /* Apple Watch */ .mt-watch { width: 198px; height: 242px; box-sizing: border-box; flex: none; border-radius: var(--radius-watch); background: var(--watch-ground); color: var(--text-primary); padding: var(--space-3) var(--space-3) var(--space-2); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 0 6px var(--watch-bezel), 0 0 0 7px var(--watch-bezel-edge); font-family: var(--font-sans); } .mt-watch-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--space-2); } .mt-watch-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--progress); } .mt-watch-time { font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; } .mt-watch-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 0; } .mt-watch .mt-dial-rim { fill: var(--watch-surface); } .mt-watch .mt-dial-face { fill: var(--watch-ground); } .mt-watch .mt-field .mt-lb { display: none; } .mt-watch .mt-field .mt-hint { display: none; } .mt-watch .mt-vl { font-size: 17px; line-height: 22px; } .mt-watch .mt-hold-face { background: var(--watch-surface); } .mt-watch .mt-hold-hint { font-size: 13px; line-height: 20px; margin-top: var(--space-2); color: var(--text-secondary); } .mt-watch-dots { display: flex; justify-content: center; gap: 4px; padding-top: var(--space-1); } .mt-watch-dots span { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--border-strong); } .mt-watch-dots span.is-on { background: var(--text-primary); } .mt-comp { position: relative; width: 52px; height: 52px; flex: none; } .mt-comp > svg { position: absolute; inset: 0; } .mt-comp-well { fill: var(--watch-surface); } .mt-comp-seg { fill: none; stroke: var(--border-strong); stroke-width: 5; stroke-linecap: round; } .mt-comp-seg.is-on { stroke: var(--progress); } .mt-comp-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-primary); font-family: var(--font-sans); } .mt-comp-num { font-size: 18px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .mt-comp-num small { font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-inline-start: 1px; letter-spacing: 0; } .mt-comp.is-done .mt-comp-in { color: var(--progress); } /* trust */ .mt-privacy { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); flex-wrap: wrap; } .mt-privacy p { margin: 0; flex: 1 1 160px; } .mt-link { background: none; border: 0; padding: 0 var(--space-1); min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--font-sans); border-radius: var(--radius-thumb); } .mt-link:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-who { width: 100%; border-collapse: collapse; text-align: start; } .mt-who th, .mt-who td { text-align: start; padding: var(--space-3) 0; border-top: var(--stroke-hairline) solid var(--border); vertical-align: top; } .mt-who thead th { border-top: 0; padding-top: 0; color: var(--text-secondary); font-weight: 400; } .mt-who tbody th { color: var(--text-primary); font-weight: 500; padding-inline-end: var(--space-4); } .mt-who td { color: var(--text-secondary); } /* Reduce Transparency / Increase Contrast: glass turns solid */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .mt-dock-item:not(.is-on), .mt-dock-action, .mt-iconbtn, .mt-glass-group, .mt-sheet.is-glass, .mt-btn-glass { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--border-strong); } .mt-sheet.is-glass .mt-sheet-body { color: var(--text-secondary); } } @media (prefers-reduced-motion: reduce) { .mt-coach { animation: none; transform: scale(1.6); opacity: .8; } } /* ---------- Persian (fa, RTL) ---------- */ /* Peyda and Rooyin faces are declared in fonts/fonts.css (self-hosted). */ /* Peyda's Persian digits are proportional: give live numbers a steady box so they don't jitter while dragging */ [lang|="fa"] .mt-q-head .mt-vl { min-width: 6.5em; text-align: end; } .mt-locale { display: contents; } [lang|="fa"] { font-family: var(--font-fa); } [lang|="fa"] :is(.value-lg, .value-md, .value-sm, .body, .button, .title, .label, .hint, .mt-watch-title, .mt-watch-time, .mt-comp-in, .mt-comp-num, .mt-btn, .mt-chip, .mt-seg-item, .mt-textarea, .mt-link) { font-family: var(--font-fa); letter-spacing: 0; } [lang|="fa"] .value-lg { line-height: 34px; } [lang|="fa"] .value-md { line-height: 30px; } [lang|="fa"] .value-sm { line-height: 28px; } [lang|="fa"] .body { line-height: 26px; } [lang|="fa"] .button { line-height: 24px; } [lang|="fa"] .title { line-height: 22px; } [lang|="fa"] .label, [lang|="fa"] .hint { line-height: 20px; } /* things that point mirror; clocks, dials, checks and the body figure do not */ [dir="rtl"] .mt-row-chev { transform: scaleX(-1); } [dir="rtl"] .mt-switch.is-on .mt-switch-thumb { transform: translateX(-20px); } [dir="rtl"] .mt-textarea { direction: rtl; } /* ---------- Rooyin: the Persian display voice ---------- Numbers, headings and short labels (one to three words, 13px and up). Sentences, hints, 12px labels and anything you type stay in Peyda. Declared last so it wins over the generic Persian text rules. */ html [lang|="fa"] :is( .mt-nav-title, .mt-sheet-title, .mt-ph-head .title, .mt-dial-row .mt-vl, .mt-q-head .mt-vl, .mt-hold-face, .mt-dock-label, .mt-row-title, .mt-pcal-title, .mt-pcal-wd span, .mt-comp-num, .mt-comp-num small, .mt-watch-title, .mt-watch-time, .mt-count, .mt-display ) { font-family: var(--font-fa-display); letter-spacing: 0; font-variant-numeric: tabular-nums; } html [lang|="fa"] :is(.mt-nav-title, .mt-sheet-title, .mt-dial-row .mt-vl, .mt-q-head .mt-vl, .mt-pcal-title, .mt-comp-num, .mt-display, .mt-hold-face, .mt-dock-label, .mt-watch-title, .mt-row-title) { font-weight: 400; } html [lang|="fa"] .mt-nav-title { font-size: 32px; line-height: 46px; } html [lang|="fa"] .mt-ph-head .title { font-size: 14px; line-height: 22px; } html [lang|="fa"] .mt-pcal-title { font-size: 15px; line-height: 24px; } html [lang|="fa"] .mt-px-date { font-family: var(--font-fa-display); font-weight: 400; font-size: 12px; } html [lang|="fa"] .mt-row-title { font-size: 16px; line-height: 26px; } /* ---------- Scale: seven named steps on a line (energy, headspace) ---------- */ .mt-scale { --tone: var(--energy); display: flex; flex-direction: column; gap: var(--space-1); } .mt-scale.tone-mind { --tone: var(--mind); } .mt-scale.tone-effort { --tone: var(--text-primary); } /* after training: no question color, neutral ink */ .mt-q-head .mt-vl { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } .mt-answer { flex: none; color: var(--tone, currentColor); animation: mt-answer-in var(--duration-detent) var(--ease-spring) both; } .mt-answer.tone-energy { --tone: var(--energy); } .mt-answer.tone-mind { --tone: var(--mind); } .mt-answer.tone-sleep { --tone: var(--sleep); } .mt-answer.tone-effort { --tone: var(--text-primary); } @keyframes mt-answer-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } } .mt-scale-track { position: relative; height: 44px; margin: 0 9px; cursor: pointer; touch-action: pan-y; border-radius: var(--radius-thumb); outline: none; } .mt-scale-rail { position: absolute; inset-inline: 0; top: 20px; height: var(--stroke-track); background: var(--border-strong); border-radius: var(--radius-bar); } .mt-scale-fill { position: absolute; inset-inline-start: 0; top: 20px; height: var(--stroke-track); background: var(--text-primary); border-radius: var(--radius-bar); transition: width var(--duration-detent) var(--ease-spring); } .mt-scale-dot { position: absolute; top: 19px; width: 6px; height: 6px; margin-inline-start: -3px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface-2); border: var(--stroke-control) solid var(--border-strong); } .mt-scale-dot.is-on { background: var(--text-primary); border-color: var(--text-primary); } /* only the thumb and the answer icon carry the question's colour */ .mt-scale-thumb { position: absolute; top: 6px; width: 20px; height: 32px; margin-inline-start: -10px; box-sizing: border-box; background: var(--tone); border: var(--stroke-control) solid var(--tone); border-radius: var(--radius-thumb); display: flex; align-items: center; justify-content: center; transition: inset-inline-start var(--duration-detent) var(--ease-spring); } .mt-scale-thumb::after { content: ""; width: 8px; height: 14px; background: radial-gradient(circle, var(--surface-2) 1.1px, transparent 1.5px) 0 0 / 4px 4.67px; } .mt-scale-track:active .mt-scale-thumb { transform: scale(1.08); } .mt-scale-track:focus-visible { box-shadow: var(--focus-ring); } .mt-scale-ends { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; } .mt-scale-ends span { color: var(--text-muted); } /* ---------- SleepPicker: six options; the two ends open an optional follow-up ---------- */ .mt-sleep { --tone: var(--sleep); display: flex; flex-direction: column; gap: var(--space-2); } .mt-sleep .mt-seg-item { padding: 0 var(--space-1); } html [lang|="fa"] .mt-sleep .mt-seg-item { font-family: var(--font-fa-display); font-weight: 400; font-size: 17px; } .mt-sleep, .mt-scale { width: 100%; } /* the control keeps its size: it fills its column, whatever is chosen */ .mt-sleep > .mt-hint { margin: 0; } .mt-follow { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: var(--stroke-hairline) dashed var(--border); animation: mt-follow-in var(--duration-detent) var(--ease-spring); } @keyframes mt-follow-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---------- Avatar: opens «Me» from the header ---------- */ .mt-avatar { width: 44px; height: 44px; flex: none; box-sizing: border-box; padding: 0; border-radius: var(--radius-full); background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; } span.mt-avatar { cursor: default; } .mt-logo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-primary); } .mt-logo svg { flex: none; } .mt-logo-word { font-family: var(--font-fa-display); font-weight: 400; font-size: 20px; line-height: 30px; } /* TrendChart: a question over a period, in the scoreboard's language. Each day is a column of pixel segments: unlit segments are a faint grid, lit ones neutral ink, and only the top lit segment takes the question's color (a mark, never a verdict). A day without a check-in is an empty column; a ball under a column is a match. */ .mt-trend { --tone: var(--energy); display: flex; flex-direction: column; gap: var(--space-2); } .mt-trend.tone-mind { --tone: var(--mind); } .mt-trend.tone-sleep { --tone: var(--sleep); } .mt-trend.tone-soreness { --tone: var(--soreness); } .mt-trend.tone-effort { --tone: var(--text-primary); } .mt-trend-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .mt-trend-head .mt-lb { margin: 0; color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); } .mt-trend-key { width: 8px; height: 8px; border-radius: 1px; background: var(--tone); flex: none; } .mt-trend-val { margin: 0; display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .mt-trend-word { font-family: var(--font-fa-display); font-weight: 400; font-size: 18px; line-height: 30px; color: var(--text-primary); white-space: nowrap; } .mt-trend-dir { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-pixel); background: var(--border); color: var(--text-primary); white-space: nowrap; } .mt-trend-dir .label { color: var(--text-primary); } /* time runs right to left in an RTL chart, so the trend line mirrors with it */ [dir="rtl"] .mt-trend-dir .mt-icon { transform: scaleX(-1); } .mt-trend-body { display: flex; gap: var(--space-3); align-items: stretch; } .mt-trend-body .mt-trend-plot { flex: 1; min-width: 0; } .mt-trend-ends { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-secondary); width: 48px; flex: none; line-height: 18px; margin: -4px 0; } .mt-trend-ends.has-marks { padding-bottom: 18px; } .mt-trend-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; color: var(--text-secondary); } .mt-trend-legend > span { display: inline-flex; align-items: center; gap: var(--space-1); } .mt-trend-lg-dot { width: 7px; height: 7px; border-radius: 1px; background: var(--tone); } .mt-trend-lg-gap { width: 12px; height: 0; border-top: 2px dotted var(--border-strong); } .mt-trend-plot { position: relative; height: 96px; } .mt-trend-plot.has-marks { height: 114px; } .mt-trend-area { position: absolute; inset: 5px 0; } .mt-trend-plot.has-marks .mt-trend-area { bottom: 23px; } .mt-trend-guide { position: absolute; inset-inline: 0; height: 0; border-top: 1px solid var(--border); } .mt-trend-guide.is-mid { border-top-style: dashed; } .mt-trend-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } [dir="rtl"] .mt-trend-line { transform: scaleX(-1); } .mt-trend-line polyline { stroke: var(--text-secondary); stroke-width: 1.5; stroke-linejoin: round; opacity: .55; } .mt-trend-dot { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 2px; background: var(--tone); box-shadow: 0 0 0 2px var(--surface-2); } .mt-ph.is-hero .mt-trend-dot { box-shadow: 0 0 0 2px var(--watch-ground); } .mt-trend-none { position: absolute; bottom: -3px; width: 4px; height: 2px; margin-inline-start: -2px; background: var(--border-strong); } .mt-trend-marks { position: absolute; inset-inline: 0; bottom: 0; height: 12px; color: var(--text-secondary); } .mt-trend-marks > span { position: absolute; top: 0; margin-inline-start: -5px; display: flex; } .mt-trend-axis { display: flex; justify-content: space-between; margin: 0; color: var(--text-secondary); } /* SegmentedControl compact: as wide as its words, 36 tall with a 44 hit area; for a period switch in a header row */ .mt-seg.is-compact { display: inline-flex; min-height: 36px; align-self: flex-start; } .mt-seg.is-compact .mt-seg-item { flex: none; padding: 0 var(--space-4); } .mt-seg.is-compact .mt-seg-item::before { content: ""; position: absolute; inset: -4px 0; } /* DayTimeline: pixel knobs (the check-in button's knob) joined by a dotted pixel rail */ .mt-line { list-style: none; margin: 0; padding: var(--space-2) var(--space-5); background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); border-radius: var(--radius-card); } .mt-line-step { position: relative; } .mt-line-rail { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 32px; margin-block: -2px; } .mt-line-rail i { width: 4px; height: 4px; border-radius: 1px; background: var(--border-strong); } .mt-line-step.is-done + .mt-line-step .mt-line-rail i, .mt-line-step.is-current .mt-line-rail i { background: color-mix(in srgb, var(--progress) 70%, transparent); } .mt-line-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: start; } button.mt-line-row { cursor: pointer; } button.mt-line-row:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-thumb); } .mt-line-knob { width: 32px; height: 32px; flex: none; box-sizing: border-box; border-radius: calc(var(--radius-canvas) - var(--space-1)); display: flex; align-items: center; justify-content: center; background: var(--border); color: var(--text-secondary); } .mt-line-step.is-done .mt-line-knob, .mt-line-step.is-current .mt-line-knob { background: var(--progress); color: var(--on-progress); } .mt-line-step.is-current .mt-line-knob { box-shadow: 0 0 0 4px color-mix(in srgb, var(--progress) 22%, transparent); } .mt-line-step.is-missed .mt-line-knob { background: var(--border); color: var(--text-secondary); } .mt-line-knob .mt-go-arrow { width: 18px; height: 18px; } .mt-line-pip { width: 6px; height: 6px; border-radius: 1px; background: var(--border-strong); } .mt-line-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .mt-line-txt .label, .mt-line-state { color: var(--text-secondary); } .mt-line-step.is-current .mt-line-state { color: var(--text-primary); } .mt-line-state { flex: 0 1 auto; max-width: 42%; margin: 0; text-align: end; } .mt-line-txt .label { white-space: nowrap; } /* light spilling into the black card from its top-right corner: a soft glow and a faint diagonal beam, under the content */ .mt-today { position: relative; isolation: isolate; } .mt-today::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--text-primary) 16%, transparent), transparent 70%), linear-gradient(215deg, color-mix(in srgb, var(--text-primary) 9%, transparent) 0%, transparent 38%), radial-gradient(60% 45% at 0% 100%, color-mix(in srgb, var(--text-primary) 11%, transparent), transparent 70%), linear-gradient(35deg, color-mix(in srgb, var(--text-primary) 6%, transparent) 0%, transparent 30%); } .mt-today-sparkle { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; } .mt-today-sparkle i { position: absolute; width: 3px; height: 3px; background: var(--progress); opacity: calc(var(--o) * 0.55); animation: mt-twinkle 7s ease-in-out infinite; animation-delay: var(--d); } .mt-today-sparkle i.is-star { box-shadow: 3px 0 0 var(--progress), -3px 0 0 var(--progress), 0 3px 0 var(--progress), 0 -3px 0 var(--progress); } @keyframes mt-twinkle { 0%, 100% { opacity: calc(var(--o) * 0.55); } 50% { opacity: calc(var(--o) * 0.25); } } @media (prefers-reduced-motion: reduce) { .mt-today-sparkle i { animation: none; } } /* Glow: the same light and sparkles inside any card (.mt-ph and friends). Light only shows on dark surfaces. */ :has(> .mt-glow) { position: relative; isolation: isolate; } /* Hero card: the TodayCard's colour for a screen's one main card. Pair it with data-theme="dark" on the card. */ .mt-ph.is-hero { background: var(--watch-ground); border: var(--stroke-control) solid var(--glass-stroke); color: var(--text-primary); } .mt-ph.is-hero .mt-px.is-today { box-shadow: 0 0 0 2px var(--watch-ground), 0 0 0 4px var(--text-primary); } .mt-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; /* the same light as the Today card's (.mt-today::before), so the two main cards read as one family */ background: radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--text-primary) 16%, transparent), transparent 70%), linear-gradient(215deg, color-mix(in srgb, var(--text-primary) 9%, transparent) 0%, transparent 38%), radial-gradient(60% 45% at 0% 100%, color-mix(in srgb, var(--text-primary) 11%, transparent), transparent 70%), linear-gradient(35deg, color-mix(in srgb, var(--text-primary) 6%, transparent) 0%, transparent 30%); } .mt-ph.is-hero .mt-glow { background-color: transparent; } /* DayTimeline bare: no card of its own, e.g. inside the TodayCard under the check-in button */ .mt-line.is-bare { background: none; border: 0; border-radius: 0; padding: 0; } .mt-today-next { display: flex; flex-direction: column; padding-inline-start: 14px; margin-top: var(--space-1); } /* knob centres line up with the button's knob */ .mt-today-next > .mt-line-rail { gap: var(--space-1); margin: 0; padding: var(--space-1) 0; } .mt-today-next.is-before { margin-top: var(--space-3); } .mt-today-next.is-before + .mt-today-stats { margin-top: 0; padding-top: 0; } .mt-today-steps .mt-line-row { min-height: 44px; } /* Countdown (.mt-clock): the Today card's number language, big minutes in Rooyin and the unit beside them, over a row of pixel squares for the window (one per 5 minutes) that fill in the check-in's green as time passes. */ .mt-clock { display: flex; flex-direction: column; gap: var(--space-3); } .mt-clock-row { display: flex; align-items: flex-end; gap: var(--space-2); } .mt-clock-big { font-family: var(--font-fa-display); font-weight: 400; font-size: 72px; line-height: 64px; color: var(--text-primary); } .mt-clock-unit { margin: 0 0 var(--space-1); color: var(--text-secondary); } .mt-clock-rail { display: flex; flex-wrap: wrap; gap: 3px; } .mt-clock-rail i { width: 10px; height: 10px; border-radius: 2px; background: var(--border); } .mt-clock-rail i.is-on { background: var(--progress); } /* PitchBackground: a pixel pitch (dot grid, halfway line, centre circle) with a ball that rolls with the phone's tilt. Put it as the first child of a positioned container; content above it needs its own stacking (z-index: 1). */ .mt-pitch { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--watch-ground); } .mt-pitch canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } .mt-pitch-btn { position: absolute; z-index: 2; top: var(--space-5); inset-inline-end: var(--space-5); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--text-primary); background: var(--glass-fill); border: var(--stroke-control) solid var(--glass-stroke); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass); cursor: pointer; } .mt-pitch-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* CheckInCard current: the one that's due. Green hairline edge, a soft green halo, a bigger Rooyin title and a «الان» badge. */ .mt-ph-title { display: inline-flex; align-items: center; gap: var(--space-2); } .mt-ph.is-current { border: var(--stroke-control) solid color-mix(in srgb, var(--progress) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--progress) 14%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--progress) 45%, transparent); } .mt-ph.is-current .mt-ph-title { font-family: var(--font-fa-display); font-weight: 400; font-size: 18px; line-height: 30px; } .mt-ph-now { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--progress); color: var(--on-progress); font-family: var(--font-fa); font-weight: 500; } .mt-ph.is-current .mt-bar { height: 8px; } /* TodayCard: the top of Today. A data-theme="dark" island on the watch's black ground in both themes. */ .mt-today { flex: none; box-sizing: border-box; border-radius: var(--radius-card); background: var(--watch-ground); border: var(--stroke-control) solid var(--glass-stroke); padding: var(--space-5) var(--space-6); color: var(--text-primary); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; } .mt-today-date { margin: 0; color: var(--text-secondary); } .mt-today-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); } .mt-today-num { display: flex; align-items: flex-end; gap: var(--space-2); } .mt-today-big { font-family: var(--font-fa-display); font-weight: 400; font-size: 96px; line-height: 84px; color: var(--text-primary); } .mt-today-unit { margin: 0 0 var(--space-2); color: var(--text-secondary); } /* Habit heatmap: weekday letters on top, one row per week, the week's first day on the start side. */ .mt-today-habit { display: grid; grid-template-columns: repeat(7, 14px); grid-auto-rows: 14px; gap: 3px; padding-bottom: var(--space-2); } .mt-today-habit.is-link { padding: var(--space-1); margin: calc(-1 * var(--space-1)); border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-pixel); } .mt-today-habit.is-link:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); } .mt-today-habit.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mt-today-habit b { font-family: var(--font-fa-display); font-weight: 400; font-size: 11px; line-height: 14px; text-align: center; color: var(--text-secondary); } .mt-today-habit span { display: grid; place-items: center; width: 14px; height: 14px; box-sizing: border-box; border-radius: var(--radius-pointer); /* explicit size: Safari doesn't stretch empty grid items inside a