.seep-progress {
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--fg, #1f2430);
}

.seep-progress .prog-hist__note { margin: 1em 0; }

.seep-progress .hist-tooltip { box-sizing: content-box; }

.seep-progress .setting-toggle__input { padding: 0; border: 0; }



.tiles { max-width: none; }
.tiles-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
    background: var(--tile, #f9fafb);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.tile--wide { margin-top: 10px; }
.tile__label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: 6px;
}
.tile__value {
    font-size: 26px; font-weight: 700; line-height: 1.05;
    color: var(--fg, #1f2430); font-variant-numeric: tabular-nums;
}
.tile__value--text { font-size: 20px; }
.unit { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); margin-left: 3px; }
.tile__delta {
    font-size: 11.5px; margin-top: 4px;
    color: var(--fg, #1f2430); font-variant-numeric: tabular-nums;
}
.tile__delta .unit { font-size: inherit; font-weight: inherit; }
.unit.unit--tight { margin-left: 0; }
.tile__delta--bottom { margin-top: auto; }
.tile__sub { font-size: 11.5px; color: var(--muted, #6b7280); margin-top: 7px; line-height: 1.35; }
.tile__sub--next { color: var(--fg, #1f2430); margin-top: 4px; }

.tile__sub--next .sub-muted { color: var(--muted, #6b7280); }
.bands { display: flex; gap: 5px; margin-top: 9px; align-items: center; }
.bands .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line, #e5e7eb); }
.bands .dot.done { background: var(--dot-done, color-mix(in srgb, #22dc69 50%, #ffffff)); }
.bands .dot.now {
    background: var(--success, #22dc69);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22dc69) 18%, transparent);
}
.bar {
    position: relative; height: 6px; border-radius: 999px;
    background: var(--line, #e5e7eb); margin-top: 9px; overflow: hidden;
}
.bar > span:not(.bar__tick) {
    display: block; height: 100%;
    background: var(--success, #22dc69); border-radius: 999px;
}
.bar__tick {
    position: absolute; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%);
    background: var(--accent, #59b2fd); border-radius: 999px;
}


.streak-tile {
    
    display: flex; flex-direction: row; align-items: center;
    gap: 14px; margin-top: 10px;
    border-color: color-mix(in srgb, #f97316 24%, var(--line, #e5e7eb));
    background:
        radial-gradient(130% 150% at 14% 0%, color-mix(in srgb, #f97316 12%, transparent), transparent 60%),
        var(--tile, #f9fafb);
}
.streak-tile.is-complete {
    border-color: color-mix(in srgb, #f97316 48%, var(--line, #e5e7eb));
    box-shadow: 0 0 0 1px color-mix(in srgb, #fbbf24 32%, transparent),
                0 10px 30px -14px color-mix(in srgb, #f97316 65%, transparent);
}
.streak-emblem {
    position: relative; flex: 0 0 auto;
    width: 52px; height: 52px; display: grid; place-items: center;
}
.streak-emblem__ring { position: absolute; inset: 0; }
.streak-emblem__ring svg { width: 52px; height: 52px; display: block; }
.streak-emblem__ring-track {
    fill: none; stroke: color-mix(in srgb, var(--fg, #1f2430) 12%, transparent); stroke-width: 4;
}
.streak-emblem__ring-fill {
    fill: none; stroke: #f97316; stroke-width: 4; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    
}
.streak-tile.is-complete .streak-emblem__ring-fill { stroke: #fbbf24; }
.streak-flame { width: 28px; height: 28px; display: block; overflow: visible; }
.streak-tile:not(.is-dormant) .streak-flame {
    filter: drop-shadow(0 1px 4px color-mix(in srgb, #f97316 55%, transparent));
}
.streak-tile.is-dormant .streak-flame { filter: grayscale(1) opacity(0.45); }

.streak-tile.is-complete .streak-flame {
    animation: seep-flame-ignite 760ms cubic-bezier(.22,1,.36,1);
    transform-origin: 50% 80%;
}
@keyframes seep-flame-ignite {
    0% { transform: scale(0.72); } 45% { transform: scale(1.2); }
    70% { transform: scale(0.95); } 100% { transform: scale(1); }
}
.streak-body {
    
    position: relative;
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    
    flex: 1 1 auto;
}
.streak-countline { display: flex; align-items: baseline; gap: 7px; }
.streak-count {
    font-size: 28px; font-weight: 800; line-height: 1; color: var(--fg, #1f2430);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.streak-unit { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); }
.streak-goal {
    text-wrap: balance;
    font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.streak-goal__target { color: var(--fg, #1f2430); font-weight: 600; }

.streak-goal--met { color: #d97316; font-weight: 700; }
html[data-theme="dark"] .streak-goal--met { color: #f97316; }

.streak-goal--pending { color: var(--fg, #1f2430); font-weight: 700; }

.streak-more__part { white-space: nowrap; }

.streak-goal-met { color: #d97316; font-weight: 700; }
html[data-theme="dark"] .streak-goal-met { color: #f97316; }

.streak-more {
    text-wrap: balance;
    font-size: 11.5px; line-height: 1.45; color: var(--muted, #6b7280);
}
.streak-more b {
    color: var(--fg, #1f2430); font-weight: 700; font-variant-numeric: tabular-nums;
}

.streak-more--risk b { color: #ef4444; }


.streak-save {
    position: absolute; right: -5px; bottom: -5px; z-index: 3;
    width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center;
    
    box-shadow: 0 0 0 2.5px var(--tile, #f9fafb);
    background: var(--tile, #f9fafb);
}
.streak-save--empty {
    border: 1.5px dashed color-mix(in srgb, #f97316 45%, var(--line, #e5e7eb));
}
.streak-save__flame .streak-flame {
    width: 20px; height: 20px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, #f97316 60%, transparent));
}

.streak-tile.is-dormant .streak-save__flame .streak-flame {
    filter: drop-shadow(0 0 4px color-mix(in srgb, #f97316 60%, transparent));
}
.streak-save__hint {
    font-size: 9px; font-weight: 800; line-height: 1;
    color: color-mix(in srgb, #f97316 70%, var(--muted, #6b7280));
}


.streak-emblem__ring-extra {
    fill: none; stroke: #ea580c; stroke-width: 4; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    
}


.streak-tile.is-atrisk {
    border-color: color-mix(in srgb, #ef4444 34%, var(--line, #e5e7eb));
    background:
        radial-gradient(130% 150% at 14% 0%, color-mix(in srgb, #ef4444 9%, transparent), transparent 60%),
        var(--tile, #f9fafb);
}
.streak-tile.is-atrisk .streak-emblem__ring-fill { stroke: #ef4444; }
.streak-tile.is-atrisk.is-complete .streak-emblem__ring-fill { stroke: #fbbf24; }
.streak-tile.is-atrisk .streak-emblem__ring-extra { stroke: #ef4444; }
.streak-count--zero { color: var(--muted, #6b7280); }
.streak-emblem--ember .streak-emblem__flame .streak-flame {
    width: 17px; height: 17px; filter: saturate(0.65) brightness(0.9);
}
.streak-ember-glow {
    position: absolute; left: 50%; top: 50%;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(249,115,22,0.5), transparent 70%);
    animation: seep-ember-breathe 2.4s ease-in-out infinite;
}
@keyframes seep-ember-breathe {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50%      { opacity: 0.9;  transform: scale(1.1); }
}


.streak-notice {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px; padding: 10px 13px;
    border: 1px solid color-mix(in srgb, #f97316 32%, var(--line, #e5e7eb));
    border-radius: 12px;
    background: color-mix(in srgb, #f97316 8%, var(--tile, #f9fafb));
    font-size: 13px; color: var(--fg, #1f2430);
}
.streak-notice .streak-flame { width: 22px; height: 22px; flex: none; }
.streak-notice b { font-weight: 700; }
@media (max-width: 580px) {
    .streak-best {
        position: static; align-self: flex-end; margin-top: 5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .streak-tile.is-complete .streak-flame { animation: none; }
    .streak-ember-glow { animation: none; }
}


.prog-hist { margin-top: 4px; }
.prog-hist__toggle {
    list-style: none; cursor: pointer;
    display: flex; justify-content: center;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line, #e5e7eb);
}
.prog-hist__toggle::-webkit-details-marker { display: none; }
.prog-hist__toggle::after {
    content: ""; width: 8px; height: 8px;
    border-right: 2px solid var(--muted, #6b7280); border-bottom: 2px solid var(--muted, #6b7280);
    transform: rotate(45deg); transition: transform 0.18s ease;
}
.prog-hist[open] > .prog-hist__toggle::after { transform: rotate(225deg); }

.prog-hist[open] { display: flex; flex-direction: column; }
.prog-hist[open] > .prog-hist__toggle { order: 2; }
.prog-hist[open] > .prog-hist__body { order: 1; }
.prog-hist__toggle:hover::after { border-color: var(--accent, #59b2fd); }
.prog-hist__toggle:focus-visible {
    outline: 2px solid var(--accent, #59b2fd); outline-offset: 2px; border-radius: 4px;
}
.prog-hist__body {
    padding: 6px 0 2px;
    
    display: flex; flex-direction: column; gap: 10px;
}
.prog-hist__note { font-size: 12px; color: var(--muted, #6b7280); }
.prog-hist__note a { color: var(--link, #3f82d0); cursor: pointer; }



.inset-card {
    border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px;
    background: color-mix(in srgb, var(--fg, #1f2430) 4%, var(--bg, #ffffff));
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .inset-card {
    background: color-mix(in srgb, black 35%, Canvas);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.45);
}

.hm { --hm-cell: 18px; --hm-gap: 3px; }
.hm__strips { display: flex; flex-direction: column; gap: 12px; }
.hm__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.hm__year {
    font-size: 13px; font-weight: 700; color: var(--fg, #1f2430);
    font-variant-numeric: tabular-nums;
}
.hm__nav { display: flex; gap: 6px; }
.hm__nav button {
    background: none; border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
    color: var(--muted, #6b7280); cursor: pointer; font-size: 11px; line-height: 1;
    padding: 4px 9px;
}
.hm__nav button:hover:not(:disabled) { background: none; color: var(--accent, #59b2fd); border-color: var(--accent, #59b2fd); }
.hm__nav button:disabled { opacity: 0.35; cursor: default; }
.hm__nav button:focus-visible { outline: 2px solid var(--accent, #59b2fd); outline-offset: 1px; }
.hm__wrap { display: flex; gap: 6px; }
.hm__dow {
    display: grid; grid-template-rows: repeat(7, var(--hm-cell));
    row-gap: var(--hm-gap); font-size: 10px; color: var(--muted, #6b7280);
    text-align: right; align-items: center; padding-top: 16px;
}
.hm__cols { padding-top: 0; }
.hm__months {
    display: grid; grid-auto-columns: calc(var(--hm-cell) + var(--hm-gap));
    grid-template-rows: 16px; font-size: 10px; color: var(--muted, #6b7280);
}
.hm__months span { grid-row: 1; white-space: nowrap; }
.hm__grid {
    display: grid; grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--hm-cell));
    grid-auto-columns: var(--hm-cell);
    gap: var(--hm-gap);
}

.hm__cell {
    border-radius: 2px;
    background: color-mix(in srgb, var(--fg, #1f2430) 7%, var(--tile, #f9fafb));
}
.hm__cell--l1 { background: color-mix(in srgb, var(--success, #22dc69) 30%, var(--tile, #f9fafb)); }
.hm__cell--l2 { background: color-mix(in srgb, var(--success, #22dc69) 50%, var(--tile, #f9fafb)); }
.hm__cell--l3 { background: color-mix(in srgb, var(--success, #22dc69) 75%, var(--tile, #f9fafb)); }
.hm__cell--l4 { background: var(--success, #22dc69); }
.hm__cell--goal { box-shadow: inset 0 0 0 1.5px #f97316; }

.hm__cell--recovered { outline: 1.5px dashed #f97316; outline-offset: -1.5px; }
.hm__cell--blank { background: transparent; }
.hm__cell:focus-visible { outline: 2px solid var(--accent, #59b2fd); outline-offset: 1px; }
.hm__legend {
    display: flex; align-items: center; gap: 4px; margin-top: 8px;
    font-size: 10px; color: var(--muted, #6b7280);
}
.hm__legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.hm__legend .hm__legend-goal { margin-left: 12px; }

.streak-best {
    
    position: absolute; right: 0; bottom: 0;
    flex: none; white-space: nowrap;
    
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted, #6b7280) 80%, transparent);
    font-variant-numeric: tabular-nums;
}

.hist-charts { display: flex; flex-direction: column; gap: 24px; }

.hist-stats {
    display: grid; grid-template-columns: 3fr 1.2fr; gap: 10px;
    margin: 2px 0 -6px;
}
.hist-stats__tile {
    background: var(--tile, #f9fafb); border: 1px solid var(--line, #e5e7eb);
    border-radius: 12px; padding: 10px 12px;
    display: grid; gap: 10px; align-content: center;
}
.hist-stats__tile--avg { grid-template-columns: repeat(3, 1fr); }
.hist-stat__num {
    font-size: 17px; font-weight: 700; color: var(--fg, #1f2430);
    font-variant-numeric: tabular-nums;
}
.hist-stat__label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted, #6b7280); margin-top: 2px;
}

.hist-range { display: flex; justify-content: flex-end; gap: 6px; }
.hist-range button {
    background: none; border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
    color: var(--muted, #6b7280); cursor: pointer; font-size: 11px; line-height: 1;
    padding: 4px 9px;
}
.hist-range button:hover:not(.is-active) { background: none; color: var(--accent, #59b2fd); border-color: var(--accent, #59b2fd); }
.hist-range button.is-active { color: var(--fg, #1f2430); border-color: var(--muted, #6b7280); }
.hist-range button:focus-visible { outline: 2px solid var(--accent, #59b2fd); outline-offset: 1px; }


.hist-chart-caption {
    font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: 6px;
}
.hist-chart { position: relative; aspect-ratio: 800 / 300; }
.hist-chart-note {
    font-size: 12px; color: var(--muted, #6b7280); line-height: 1.45;
    margin: 8px 0 0;
}
.hist-chart-note__line { display: block; }
.hist-chart-note__line + .hist-chart-note__line { margin-top: 3px; }
.hist-chart svg { width: 100%; height: 100%; display: block; }
.hist-tooltip {
    position: absolute; z-index: 20; pointer-events: none;
    min-width: 110px; max-width: 260px; padding: 7px 10px;
    background: var(--bg, #ffffff); color: var(--fg, #1f2430);
    border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 12px; line-height: 1.45;
}
.hist-tt-head { font-weight: 600; margin-bottom: 3px; white-space: nowrap; }
.hist-tt-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hist-tt-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.hist-tt-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-tt-sub {
    color: var(--muted, #6b7280); font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.hist-crosshair { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .prog-hist__toggle::after { transition: none; }
}


.seep-progress .field { margin-top: 14px; }
.seep-progress .field:first-of-type { margin-top: 0; }
.seep-progress .field > label { display: block; font-weight: 500; margin-bottom: 4px; }
.seep-progress .help { margin: 4px 0 0; font-size: 12px; color: var(--muted, #6b7280); }
.seep-progress .status { font-size: 11px; color: var(--warn, #b45309); min-height: 14px; margin: 2px 0 0; }
.seep-progress .setting-toggle-field .setting-toggle {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; width: 100%; margin: 0; cursor: pointer; font-weight: 500;
}
.seep-progress .setting-toggle__text { font-weight: 500; }
.seep-progress .setting-toggle__switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.seep-progress .setting-toggle__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seep-progress .setting-toggle__track {
    position: absolute; inset: 0; border-radius: 999px;
    background: color-mix(in srgb, var(--fg, #1f2430) 32%, var(--bg, #ffffff));
    transition: background-color 140ms ease;
}
.seep-progress .setting-toggle__knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.45); transition: transform 140ms ease;
}
.seep-progress .setting-toggle__input:checked ~ .setting-toggle__track { background: var(--accent, #59b2fd); }
.seep-progress .setting-toggle__input:checked ~ .setting-toggle__knob { transform: translateX(18px); }
.seep-progress .setting-toggle__input:focus-visible ~ .setting-toggle__track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #59b2fd) 18%, transparent);
}

.seep-progress .setting-toggle-field .setting-toggle--readonly {
    cursor: default; opacity: 0.72;
}
.seep-progress .setting-toggle--readonly .setting-toggle__input { cursor: default; }