/* AMS Tracking — mobile-first habit tracker */

:root {
    --bg: #f2f4f8;
    --card-fallback: #ffffff;
    --text: #16181d;
    --text-dim: #656d7a;
    --surface: #ffffff;
    --border: rgba(0, 0, 0, 0.07);
    --shadow: 0 2px 10px rgba(20, 30, 60, 0.06);
    --danger: #e5484d;
    --accent: #3b70f0;
    --toast-undo: #7ea4f7; /* on the inverted (dark) toast */
    --stale: #7a5b06;
}

:root[data-theme="dark"] {
    --bg: #0d1117;
    --card-fallback: #161b26;
    --text: #eceef2;
    --text-dim: #8d93a1;
    --surface: #161b26;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    --toast-undo: #2c5fd8;
    --stale: #e0a80f;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0d1117;
        --card-fallback: #161b26;
        --text: #eceef2;
        --text-dim: #8d93a1;
        --surface: #161b26;
        --border: rgba(255, 255, 255, 0.08);
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        --toast-undo: #2c5fd8; /* on the inverted (light) toast */
        --stale: #e0a80f;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- v1.20: iOS Display & Text Size support ---------- */

/* -apple-system-body makes the root font-size follow the iPhone's
   Display & Text Size preference; every text size below is in rem, so
   the whole app scales with it. The family is re-set on html/body. */
@supports (font: -apple-system-body) {
    html { font: -apple-system-body; }
}

/* ---------- hand-drawn icons ---------- */

.hi {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
    flex: 0 0 auto;
}

.pill-btn .hi { width: 1.2353rem; height: 1.2353rem; }
.habit-action .hi { width: 1.3529rem; height: 1.3529rem; }
.habit-name .hi { width: 1.1176rem; height: 1.1176rem; vertical-align: -4px; margin-right: 2px; }
.page-title .habit-icon .hi { width: 2rem; height: 2rem; vertical-align: -4px; margin-right: 6px; }
.stat-number .hi.flame { width: 1.0588rem; height: 1.0588rem; margin-left: 3px; vertical-align: -2px; }
.chip .hi { width: 1.4706rem; height: 1.4706rem; }
.type-icon .hi { width: 1.3529rem; height: 1.3529rem; color: var(--accent); }
.list-btn .hi, .fold-title .hi { width: 1.1765rem; height: 1.1765rem; vertical-align: -4px; margin-right: 7px; }
.hi-inline { width: 0.8824rem; height: 0.8824rem; vertical-align: -2px; }
.hi-inline .hi { width: 0.8824rem; height: 0.8824rem; vertical-align: -2px; }
.empty-icon .hi { width: 3.7647rem; height: 3.7647rem; color: var(--accent); }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.screen {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
    min-height: 100dvh;
}

/* ---------- top bar & titles ---------- */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pill-btn {
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.pill-btn.icon-only {
    width: 2.7059rem;
    height: 2.7059rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1765rem;
}

.pill-btn.accent {
    background: var(--accent);
    color: #fff;
    font-size: 1.5294rem;
    font-weight: 400;
}

.page-title {
    font-size: 2.3529rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 6px 4px 0;
}

.page-subtitle {
    margin: 2px 4px 18px;
    color: var(--text-dim);
    font-size: 0.8824rem;
    font-weight: 500;
}

/* ---------- habit cards ---------- */

.habit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.habit-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 20px;
    background: var(--card-fallback);
    box-shadow: var(--shadow);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* big round action button (check / fasting toggle) */
.habit-action {
    flex: 0 0 auto;
    width: 2.8235rem;
    height: 2.8235rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5294rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.habit-action:active { transform: scale(0.9); }

.habit-action.undone {
    background: transparent;
    box-shadow: inset 0 0 0 3px currentColor;
}

.habit-action.running { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0), 0 3px 8px rgba(0,0,0,0.12); }
    50% { box-shadow: 0 0 0 8px var(--pulse, rgba(59,112,240,0.18)), 0 3px 8px rgba(0,0,0,0.12); }
}

.habit-main {
    flex: 1 1 auto;
    min-width: 0;
}

.habit-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.habit-name .habit-icon { margin-right: 6px; }

.week-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* at large text sizes the dots wrap instead of squashing */
}

.wd {
    flex: 0 0 auto;
    width: 0.9412rem;
    height: 0.9412rem;
    border-radius: 50%;
    font-size: 0.5294rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    background: var(--border);
}

.wd.on { color: #fff; }
.wd.off-day { opacity: 0.45; }

.habit-stat {
    flex: 0 0 auto;
    text-align: right;
    padding-right: 2px;
}

.stat-number {
    font-size: 1.4118rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.stat-number .flame { font-size: 1.1765rem; }

.stat-label {
    font-size: 0.6176rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 2px;
}

/* The week streak under a weekly target's count: quieter than the label
   above it, because the count is what the card is being asked. */
.stat-sub {
    font-size: 0.6176rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-dim);
    opacity: 0.85;
    margin-top: 1px;
    white-space: nowrap;
}

.stat-sub .hi.flame { width: 0.7rem; height: 0.7rem; vertical-align: -1px; margin-left: 1px; }

.stat-number.target-met { color: #2fa96d !important; }

/* ---------- empty state ---------- */

.empty-state {
    text-align: center;
    margin-top: 12vh;
    color: var(--text-dim);
}
.empty-state h2 { color: var(--text); margin: 8px 0 6px; }
.empty-state p { line-height: 1.5; }

/* ---------- detail screen ---------- */

.detail-card {
    background: var(--surface);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 16px;
}

.detail-card h3 {
    margin: 0 0 12px;
    font-size: 1.2941rem;
    font-weight: 800;
}

.pixel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14px, 1fr));
    gap: 4px;
    margin-bottom: 14px;
}

.px {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--border);
}

.px.future { opacity: 0.35; }

/* editable history calendar */
.cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.cal-head h3 { margin: 0; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav-btn { width: 2.2353rem; height: 2.2353rem; }
.cal-nav-btn .hi { width: 1.0588rem; height: 1.0588rem; }
.cal-nav-btn:disabled { opacity: 0.35; cursor: default; }

.cal-hint {
    margin: 6px 0 12px;
    font-size: 0.7647rem;
    color: var(--text-dim);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    justify-items: center;
}

.cal-dow {
    font-size: 0.6765rem;
    font-weight: 700;
    color: var(--text-dim);
    padding-bottom: 2px;
}

.cal-day {
    width: 100%;
    max-width: 2.4706rem;
    aspect-ratio: 1;
    border: none;
    border-radius: 12px;
    background: var(--border);
    color: var(--text);
    font-size: 0.8529rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease;
    font-variant-numeric: tabular-nums;
}
.cal-day:active:not(:disabled) { transform: scale(0.88); }
.cal-day.on { color: #fff; }
.cal-day.off-day { opacity: 0.5; }
.cal-day:disabled { background: transparent; color: var(--text-dim); opacity: 0.45; cursor: default; }

.stat-rows { font-size: 0.8824rem; }
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}
.stat-row .k { color: var(--text-dim); font-weight: 500; }
.stat-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }

.session-list { margin: 0; padding: 0; list-style: none; font-size: 0.8824rem; }
.session-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.session-list li:last-child { border-bottom: none; }
.session-when { color: var(--text-dim); }
.session-dur { font-weight: 700; font-variant-numeric: tabular-nums; }

.danger-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--danger);
    font-size: 0.9412rem;
    font-weight: 700;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
}

/* ---------- sheets (modals) ---------- */

.sheet-backdrop[hidden] { display: none; }

.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 50;
}

.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 88dvh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 24px 24px 0 0;
    padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    animation: sheet-up 0.22s ease;
}

@keyframes sheet-up {
    from { transform: translateY(40px); opacity: 0.4; }
    to { transform: translateY(0); opacity: 1; }
}

.sheet-handle {
    width: 40px;
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    margin: 4px auto 10px;
}

.sheet h2 { margin: 4px 0 14px; font-size: 1.4118rem; }

.field-label {
    display: block;
    font-size: 0.7647rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 16px 0 8px;
}

#f-name {
    width: 100%;
    font-size: 1rem;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
}
#f-name:focus { border-color: var(--accent); }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    border: 2px solid transparent;
    background: var(--surface);
    border-radius: 12px;
    width: 2.5882rem;
    height: 2.5882rem;
    font-size: 1.2941rem;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.chip.sel { border-color: var(--accent); }

.chip.color-chip { font-size: 0; }
.chip.color-chip::after {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--chip-color);
}

.chip.day-chip { font-size: 0.7647rem; font-weight: 700; color: var(--text-dim); }
.chip.day-chip.sel { color: var(--accent); }

.type-row { display: flex; flex-direction: column; gap: 8px; }

.type-btn {
    text-align: left;
    border: 2px solid transparent;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 11px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.type-text { display: flex; flex-direction: column; gap: 2px; }

.type-btn.sel { border-color: var(--accent); }
.type-btn:disabled { opacity: 0.55; cursor: default; }
.type-emoji { font-size: 1.2941rem; }
.type-name { font-weight: 700; font-size: 0.8824rem; }
.type-desc { font-size: 0.7353rem; color: var(--text-dim); line-height: 1.35; }

.sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.primary-btn, .ghost-btn {
    flex: 1;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    padding: 15px;
    border-radius: 16px;
    cursor: pointer;
}

.primary-btn { background: var(--accent); color: #fff; }
.ghost-btn { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.list-btn {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9412rem;
    font-weight: 600;
    padding: 15px;
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

/* collapsible info sections (Settings) */
.fold {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 10px;
}

.fold summary {
    list-style: none;
    padding: 15px;
    font-size: 0.9412rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fold summary::-webkit-details-marker { display: none; }

.fold summary::after {
    content: "›";
    font-size: 1.1765rem;
    color: var(--text-dim);
    transition: transform 0.15s ease;
}

.fold[open] summary::after { transform: rotate(90deg); }

.fold-body {
    padding: 0 15px 6px;
    font-size: 0.8529rem;
    line-height: 1.55;
    color: var(--text);
}

.fold-body p, .fold-body ul { margin: 0 0 10px; }
.fold-body ul { padding-left: 20px; }
.fold-body li { margin-bottom: 7px; }
.fold-body h4 { margin: 4px 0 6px; font-size: 0.9118rem; }
.fold-body .vh-date { color: var(--text-dim); font-weight: 500; }

.settings-note {
    color: var(--text-dim);
    font-size: 0.7647rem;
    text-align: center;
    line-height: 1.5;
    margin-top: 16px;
}

/* ---------- v1.3: undo toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--text);
    color: var(--bg);
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.8824rem;
    font-weight: 600;
    z-index: 80;
    max-width: calc(100vw - 32px);
    animation: toast-up 0.2s ease;
}

.toast[hidden] { display: none; }

@keyframes toast-up {
    from { transform: translate(-50%, 16px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

#toast-undo {
    border: none;
    background: transparent;
    color: var(--toast-undo);
    font-size: 0.8824rem;
    font-weight: 800;
    cursor: pointer;
    padding: 2px 2px;
    letter-spacing: 0.3px;
}

/* ---------- v1.3: fasting goal ring ---------- */

.action-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 3.2941rem;
    height: 3.2941rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}

.ring .track { stroke: var(--border); }
.ring .ring-progress { transition: stroke-dashoffset 0.5s ease; }
.ring .ring-progress.done { stroke: #2fa96d; }

.stat-number.goal-reached { color: #2fa96d !important; }
.stat-label.goal-reached { color: #2fa96d !important; }

/* ---------- v1.3: reorder sheet ---------- */

.reorder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.reorder-name {
    flex: 1;
    font-size: 0.9412rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reorder-name .hi { width: 1.1765rem; height: 1.1765rem; vertical-align: -4px; margin-right: 6px; }

.reorder-row .pill-btn { width: 2.3529rem; height: 2.3529rem; }
.reorder-row .pill-btn:disabled { opacity: 0.3; cursor: default; }

/* fast list rows are tappable now */
.session-list li { cursor: pointer; }
.session-list li.session-active .session-when { color: var(--text); font-weight: 600; }

#fast-start, #fast-end {
    width: 100%;
    font-size: 1rem;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: inherit;
}
#fast-start:focus, #fast-end:focus { border-color: var(--accent); }

#f-goal {
    width: 100%;
    font-size: 1rem;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
}
#f-goal:focus { border-color: var(--accent); }

/* ---------- v1.4: grid layout ---------- */

.habit-list.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.habit-card.gcard {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 13px;
    min-width: 0; /* let the grid track shrink below the nowrap name */
    overflow: hidden;
}

.gcard .grid-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gcard .habit-stat { text-align: left; padding: 0; min-width: 0; flex: 1 1 auto; }
.gcard .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .stat-number { font-size: 1.4118rem; }
.gcard .action-wrap { width: 3.2941rem; height: 3.2941rem; }
.gcard .habit-action { width: 2.8235rem; height: 2.8235rem; }
.gcard .habit-action .hi { width: 1.2941rem; height: 1.2941rem; }
.gcard .habit-name { font-size: 0.9412rem; margin-bottom: 6px; }
.gcard .habit-name .hi { width: 1.0588rem; height: 1.0588rem; vertical-align: -3.5px; }
.gcard .wd { width: 1rem; height: 1rem; font-size: 0.5294rem; }
.gcard .week-dots { gap: 4px; }

/* ---------- v1.4: archive ---------- */

.archive-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 0.9412rem;
    font-weight: 700;
    padding: 12px;
    border-radius: 16px;
    cursor: pointer;
}
.archive-btn .hi { width: 1.0588rem; height: 1.0588rem; vertical-align: -3px; margin-right: 6px; }

.archived-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px;
    margin-bottom: 8px;
}

.archived-row .reorder-name { flex: 1; }

.restore-btn {
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 0.8235rem;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
}

/* ---------- v1.5: milestone celebration ---------- */

.celebrate {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* never blocks a tap */
}

.celebrate[hidden] { display: none; }

.celebrate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 26px 34px;
    animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

#celebrate-icon .hi { width: 3.0588rem; height: 3.0588rem; }
#celebrate-text { font-size: 1.2353rem; font-weight: 800; }
#celebrate-sub { font-size: 0.8235rem; font-weight: 600; color: var(--text-dim); }

@keyframes pop-in {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.celebrate.fading .celebrate-card { animation: pop-out 0.3s ease forwards; }
@keyframes pop-out { to { transform: scale(0.85); opacity: 0; } }

.confetti-bit {
    position: fixed;
    left: 50%;
    top: 45%;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    opacity: 0;
    animation: confetti-fly 1.5s ease-out forwards;
}

.confetti-bit.round { border-radius: 50%; }

@keyframes confetti-fly {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .celebrate-card { animation: none; }
    .confetti-bit { display: none; }
}

/* ---------- v1.5: fast-length chart ---------- */

.fast-chart { width: 100%; display: block; margin: 4px 0 6px; }
.fast-chart rect { cursor: pointer; }
.chart-label {
    font-size: 0.5882rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    fill: var(--text-dim);
    font-family: inherit;
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.settings-note .stale { color: var(--stale); font-weight: 700; }

/* ---------- v1.6: skip days, notes, per-fast goal ---------- */

.cal-day.skipped {
    background: transparent;
    border: 2px dashed currentColor;
    opacity: 0.75;
}

.wd.wd-skip {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
    opacity: 0.75;
}

.cal-day.has-note { position: relative; }
.cal-day.has-note::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.cal-day.on.has-note::after { background: #fff; }

.cal-nav-btn.note-on {
    background: var(--accent);
    color: #fff;
}

.note-list { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.note-row {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.8235rem;
    cursor: pointer;
    align-items: baseline;
}
.note-day { font-weight: 800; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.note-text { color: var(--text); line-height: 1.4; }

.chip.goal-chip {
    width: auto;
    min-width: 3.0588rem;
    padding: 0 12px;
    font-size: 0.8824rem;
    font-weight: 700;
}

/* ---------- v1.7: stats screen ---------- */

.topbar-group { display: flex; gap: 10px; }

.stats-card h3 {
    font-size: 1.0588rem;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-card h3 .hi { width: 1.1765rem; height: 1.1765rem; vertical-align: -4px; margin-right: 6px; }

.tile-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.tile { text-align: center; }
.tile-num {
    font-size: 1.2353rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}
.tile-lbl {
    font-size: 0.6176rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 1px;
}

.strip-grid {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 3px;
}

.px.skip {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
    opacity: 0.55;
}

/* ---------- v1.8: year-grid polish ---------- */

.px[data-k] { cursor: pointer; }

.px-month {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5294rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0;
}

/* ---------- v1.9: icon search ---------- */

#f-icon-search {
    width: 100%;
    font-size: 0.9412rem;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    margin-bottom: 10px;
    -webkit-appearance: none;
}
#f-icon-search:focus { border-color: var(--accent); }

/* ---------- v1.10: fasting calendar with hours per day ---------- */

.cal-day.cal-fast {
    background: transparent;
    aspect-ratio: auto;
    height: 3.1765rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 2px 0 0;
    border-radius: 10px;
}

.cf-date {
    font-size: 0.6471rem;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1;
}

.cal-fast.cf-today .cf-date { color: var(--text); }

.cf-hours {
    width: 1.7647rem;
    height: 1.7647rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7647rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cf-hours.met { background: #2fa96d; color: #fff; }
.cf-hours.under { background: var(--border); color: var(--text); }
.cf-hours.running { background: #d9463e; color: #fff; }
.cf-hours.skipday {
    border: 2px dashed currentColor;
    font-size: 0.8824rem;
    font-weight: 900;
    line-height: 1;
}
.cf-hours.none { box-shadow: inset 0 0 0 1.5px var(--border); }
.cf-hours.future { box-shadow: inset 0 0 0 1.5px var(--border); opacity: 0.35; }

.cal-fast.cf-today .cf-hours.none { box-shadow: inset 0 0 0 2px var(--text-dim); }
.cal-day.cal-fast:disabled { background: transparent; }
.cal-day.cal-fast.has-note::after { bottom: -1px; }

/* ---------- v1.11: the feel release ---------- */

.day-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    /* the date line above it is gone (v1.23.2), so it spaces itself */
    margin: 10px 4px 16px;
}

.day-progress[hidden] { display: none; }

.dp-bar {
    flex: 1;
    height: 7px;
    display: flex;
    gap: 3px;
}

/* v1.22: one segment per habit scheduled today */
.dp-seg {
    flex: 1;
    border-radius: 3.5px;
    background: var(--border);
    transition: background 0.25s ease;
}

.dp-text {
    font-size: 0.7353rem;
    font-weight: 700;
    color: var(--text-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.habit-action.ink-draw .hi path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: ink-draw 0.3s ease-out 0.05s forwards;
}

@keyframes ink-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .habit-action.ink-draw .hi path { animation: none; stroke-dashoffset: 0; }
}

.habit-name.name-sm { font-size: 0.8529rem; }
.habit-name.name-xs { font-size: 0.7353rem; }
#detail-title.title-sm { font-size: 1.7647rem; }
#detail-title.title-xs { font-size: 1.3529rem; }
#detail-title.title-sm .habit-icon .hi { width: 1.5882rem; height: 1.5882rem; }
#detail-title.title-xs .habit-icon .hi { width: 1.3529rem; height: 1.3529rem; }

/* ---------- v1.11.2: bottom bar on Today ---------- */

.bottom-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    padding: 7px 9px;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    z-index: 40;
}

.bottom-bar .pill-btn {
    box-shadow: none;
    width: 2.8235rem;
    height: 2.8235rem;
}

.bottom-bar .pill-btn.accent { box-shadow: 0 3px 10px rgba(59, 112, 240, 0.4); }

#screen-today { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); }

/* keep the undo toast clear of the bar */
.toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }

/* ---------- v1.13: vacation range (bulk skip) ---------- */

.skip-range-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 14px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text-dim);
    font-size: 0.7941rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.skip-range-btn:active { transform: scale(0.96); }
.skip-range-btn .hi { width: 1.0588rem; height: 1.0588rem; }

#skip-from, #skip-to {
    width: 100%;
    font-size: 1rem;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: inherit;
}
#skip-from:focus, #skip-to:focus { border-color: var(--accent); }

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 0.8824rem;
    font-weight: 600;
    color: var(--text);
}
.check-row input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

/* ---------- v1.14: week in review + fasting stages ---------- */

.wr-card {
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 12px 16px 6px;
    margin: 14px 0;
}
.wr-head { display: flex; align-items: center; gap: 8px; }
.wr-head h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.wr-range { flex: 1; color: var(--text-dim); font-size: 0.7647rem; }
.wr-close {
    border: none;
    background: none;
    color: var(--text-dim);
    width: 1.8824rem;
    height: 1.8824rem;
    padding: 0;
    cursor: pointer;
}
.wr-close .hi { width: 0.9412rem; height: 0.9412rem; }
.wr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 0.8529rem;
    cursor: pointer;
}
.wr-row .habit-icon .hi { width: 1.0588rem; height: 1.0588rem; }
.wr-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-mid { color: var(--text-dim); white-space: nowrap; }
.wr-right { font-weight: 800; white-space: nowrap; min-width: 40px; text-align: right; }
.wr-right.up { color: #2fa96d; }
.wr-right.down { color: #d9463e; }
.wr-right.flat { color: var(--text-dim); }
.wr-flame { width: 13px; height: 13px; vertical-align: -2px; margin-left: 1px; }

/* The card's own send button. Quiet on purpose: the card is a summary first,
   and the offer sits under it rather than competing with the rows. */
/* Both calls to action on the week card share this. They had shared the class
   name .wr-send too, which made "the send button" ambiguous in the code and
   in every selector that reached for it. */
.wr-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: none;
    color: var(--accent);
    font-size: 0.8235rem;
    font-weight: 700;
    cursor: pointer;
}
.wr-cta .hi { width: 0.9412rem; height: 0.9412rem; }
.wr-cta:active { background: rgba(59, 112, 240, 0.12); }
.wr-notes { margin-top: 12px; }

/* ---------- this week's notes ---------- */

.notes-entry { margin-bottom: 14px; }
.notes-section { margin-bottom: 26px; }
.notes-h {
    font-size: 0.7647rem;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 4px;
}
.notes-hint {
    margin: 0 0 10px;
    font-size: 0.7941rem;
    color: var(--text-dim);
    line-height: 1.45;
}
.notes-empty {
    margin: 0;
    padding: 16px 16px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    font-size: 0.8529rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.note-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}
.note-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.note-top .habit-icon .hi { width: 1.1176rem; height: 1.1176rem; }
.note-title { font-weight: 800; font-size: 0.8824rem; flex: 1; min-width: 0; }
.note-fig { font-weight: 800; font-size: 0.8235rem; white-space: nowrap; }
.sugg-kind { color: var(--text-dim); font-weight: 700; }
.note-body { margin: 0; font-size: 0.8235rem; line-height: 1.55; color: var(--text); }

/* The summary reads as a piece of writing, so it gets prose measure and
   spacing rather than card treatment: one surface, paragraphs inside it. */
.summary-box {
    background: var(--surface);
    border-radius: 16px;
    padding: 16px 18px 4px;
    box-shadow: var(--shadow);
}
.summary-p {
    margin: 0 0 14px;
    font-size: 0.8824rem;
    line-height: 1.62;
    color: var(--text);
}
.summary-box + .wr-cta { margin-top: 12px; }
.wr-cta + .wr-cta { margin-top: 8px; }

/* The add button is deliberately quiet: a suggestion that shouts is an advert,
   and nothing here is added until he adds it. */
.sugg-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: none;
    color: var(--accent);
    font-size: 0.8235rem;
    font-weight: 700;
    cursor: pointer;
}
.sugg-add .hi { width: 0.9412rem; height: 0.9412rem; }
.sugg-add:active { background: rgba(59, 112, 240, 0.12); }

.stage-track { width: 100%; height: auto; margin-top: 2px; }
.stage-now { margin: 2px 0 8px; font-size: 0.8529rem; font-weight: 600; }
.stage-rows { border-top: 1px solid var(--border); }
.stage-row { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.stages-active .stage-row:not(.cur) { opacity: 0.55; }
.stage-name { font-weight: 700; font-size: 0.8529rem; }
.stage-range { color: var(--text-dim); font-size: 0.7647rem; font-weight: 600; margin-left: 5px; }
.stage-desc { display: block; color: var(--text-dim); font-size: 0.7647rem; }

/* ---------- v1.15: year poster export ---------- */

.year-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.year-head h3 { margin: 0; }

/* ---------- v1.15.2: touch-zone hints on the fasting card ---------- */

/* faint dashed dividers marking the card's separate tap areas:
   button | card body (details); while fasting also | timer (fix start) */
.habit-card.zoned .habit-main,
.habit-card.zoned .habit-stat { position: relative; }
.habit-card.zoned .habit-main::before,
.habit-card.zoned.zoned-3 .habit-stat::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    border-left: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent);
}

/* ---------- v1.16: overlong-fast guard ---------- */

.stat-number.overlong { color: #e0a80f !important; }
.stat-label.overlong { color: #e0a80f !important; }

/* ---------- v1.17: sheets, import, achievements ---------- */

#hours-input, #note-input, #hist-input {
    width: 100%;
    font-size: 0.9412rem;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: inherit;
    margin-top: 10px;
    resize: vertical;
}
#hours-input:focus, #note-input:focus, #hist-input:focus { border-color: var(--accent); }
#hist-input { font-size: 0.8235rem; font-variant-numeric: tabular-nums; }

.trophy-card h3 .hi { width: 1.2941rem; height: 1.2941rem; vertical-align: -4px; margin-right: 6px; color: #c9a227; }

.trophy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.trophy-name {
    flex: 1 1 100%;
    font-size: 0.8235rem;
    font-weight: 700;
}
.trophy-name .hi { width: 1rem; height: 1rem; vertical-align: -3.5px; margin-right: 5px; }
.trophy-chip {
    min-width: 2rem;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.7353rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.trophy-chip.next {
    background: transparent !important;
    border: 1.5px dashed var(--text-dim);
    color: var(--text-dim);
    font-weight: 700;
}

/* ---------- v1.18: find your way ---------- */

/* with the jump-to-today button the header holds four buttons */
.cal-head.crowded h3 { font-size: 1.0588rem; }

/* legend under the fasting calendar, mirroring the .cf-hours states */
.cal-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 12px 0 0;
    font-size: 0.7059rem;
    font-weight: 600;
    color: var(--text-dim);
}
.cal-legend .lg {
    width: 0.7647rem;
    height: 0.7647rem;
    border-radius: 50%;
    margin-right: 4px;
    flex: none;
}
.cal-legend .lg.met { background: #2fa96d; }
.cal-legend .lg.under { background: var(--border); }
.cal-legend .lg.running { background: #d9463e; }
.cal-legend .lg.skipday { border: 1.5px dashed currentColor; }

/* week dots double as shortcuts into the calendar */
.wd { cursor: pointer; }

/* the tapped day flashes once so the eye lands on it */
.cal-day.cal-flash { animation: cal-flash 0.9s ease 0.25s 1; }
@keyframes cal-flash {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    35% { transform: scale(1.18); box-shadow: 0 0 0 3px var(--accent); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .cal-day.cal-flash { animation: none; box-shadow: 0 0 0 2.5px var(--accent); }
}

/* today's-note dot next to the habit name */
.note-ind {
    border: none;
    background: transparent;
    padding: 0 6px;
    margin-left: 2px;
    cursor: pointer;
    vertical-align: 1px;
}
.note-ind::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 25%, transparent);
}

/* ---------- v1.19: the feel, part two ---------- */

/* day-complete moment: bar pops, the checkmark draws itself */
.dp-check {
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin-right: 4px;
    color: #2fa96d;
}
.dp-celebrate .dp-bar { animation: dp-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes dp-pop {
    0% { transform: scaleY(1); }
    35% { transform: scaleY(1.9); }
    100% { transform: scaleY(1); }
}
.dp-celebrate .dp-seg.filled { animation: dp-shine 0.7s ease; }
@keyframes dp-shine {
    0% { filter: brightness(1); }
    40% { filter: brightness(1.45); }
    100% { filter: brightness(1); }
}
.dp-celebrate .dp-check path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: ink-draw 0.35s ease-out 0.25s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .dp-celebrate .dp-bar, .dp-celebrate .dp-seg.filled { animation: none; }
    .dp-celebrate .dp-check path { animation: none; stroke-dashoffset: 0; }
}

/* screen transitions: push in from the right, pop back from the left */
.screen-fwd { animation: screen-fwd 0.24s cubic-bezier(0.3, 0.8, 0.3, 1); }
.screen-back { animation: screen-back 0.24s cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes screen-fwd {
    from { transform: translateX(64px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes screen-back {
    from { transform: translateX(-64px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .screen-fwd, .screen-back { animation: none; }
}

/* live mini-card preview in the add/edit sheet */
.sheet-preview { pointer-events: none; }
.sheet-preview .habit-card {
    cursor: default;
    box-shadow: var(--shadow);
    margin: 2px 0 4px;
}

/* ---------- v1.20: card gestures ---------- */

/* long-press drag: the lifted card floats above the list */
.habit-card.dragging {
    transform: scale(1.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    opacity: 0.92;
    z-index: 5;
    position: relative;
    transition: transform 0.15s ease;
}

/* swipe feedback: a ring in the action's color once the swipe would fire */
.habit-card.swipe-armed-r { box-shadow: 0 0 0 2.5px #2fa96d, var(--shadow); }
.habit-card.swipe-armed-l { box-shadow: 0 0 0 2.5px var(--text-dim), var(--shadow); }

/* ---------- v1.21: version pill + fasting-zone labels ---------- */

.today-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* current version, tap to check for updates — deliberately faint so it
   never competes with the content (v1.23.2, was a bright blue pill) */
.version-pill {
    border: none;
    background: none;
    color: var(--text-dim);
    opacity: 0.45;
    font-size: 0.7059rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.version-pill:active { transform: scale(0.94); }

/* tiny words under the fasting card's tap areas — laid over the card's
   bottom padding so the card itself stays a single line (v1.21 wrapped) */
.habit-card.zoned { position: relative; padding-bottom: 23px; }

/* the fasting card's right side is wide (eating window / goal times), so
   its day dots get one size smaller to keep all seven on one line (v1.23) */
.habit-card.zoned .week-dots { gap: 3px; }
.habit-card.zoned .wd {
    width: 0.8235rem;
    height: 0.8235rem;
    font-size: 0.4706rem;
}

.zone-labels {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.zone-labels span {
    font-size: 0.5294rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.8;
}
.zl-btn { flex: 0 0 3.2941rem; text-align: center; } /* under .action-wrap */
.zl-mid { flex: 1 1 auto; }
.zl-edit { text-align: right; padding-right: 2px; }

/* ---------- v1.24: record-within-reach nudge ---------- */

.record-nudge {
    margin: 10px 2px 0;
    font-size: 0.8235rem;
    font-weight: 700;
}

/* ---------- v1.25: fasting rhythm bars ---------- */

.rhythm-bars {
    display: flex;
    gap: 7px;
    align-items: stretch;
    height: 5.2941rem;
    margin-top: 14px;
}
.rb {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.rb-val {
    font-size: 0.5882rem;
    font-weight: 700;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.rb-bar {
    width: 100%;
    max-width: 26px;
    border-radius: 7px 7px 4px 4px;
}
.rb:not(.best) .rb-bar { opacity: 0.55; }
.rb-lbl {
    font-size: 0.5882rem;
    font-weight: 700;
    color: var(--text-dim);
}
.rb.best .rb-lbl { color: var(--text); }

/* ---------- v1.26: per-weekday fasting goals ---------- */

.gbd-row { display: flex; gap: 5px; margin-top: 8px; }
.gbd {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.gbd span { font-size: 0.5882rem; font-weight: 700; color: var(--text-dim); }
.gbd input {
    width: 100%;
    padding: 8px 2px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8235rem;
    font-family: inherit;
    outline: none;
}
.gbd input:focus { border-color: var(--accent); }
.gbd input::-webkit-outer-spin-button,
.gbd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gbd-hint { font-size: 0.7059rem; color: var(--text-dim); margin: 6px 2px 0; }

/* ---------- v1.27: multi-part habits ("Medit | Brea | Cold") ---------- */

.part-chip {
    border: none;
    background: none;
    padding: 0 1px;
    font: inherit;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 6px;
}
.part-chip.on { font-weight: 800; }
/* the part a tap count is about to toggle, while the window is open */
.part-chip.pending {
    background: color-mix(in oklab, currentColor 18%, transparent);
    animation: partPulse 0.32s ease-out;
}
@keyframes partPulse {
    from { transform: scale(1.14); }
    to { transform: scale(1); }
}
.part-sep {
    color: var(--text-dim);
    opacity: 0.5;
    font-weight: 600;
    padding: 0 4px; /* keeps the "Medit | Brea | Cold" spacing of the name */
}
@media (prefers-reduced-motion: reduce) {
    .part-chip.pending { animation: none; }
}