/* /Components/ExerciseHowTo.razor.rz.scp.css */
/* The cue has a floor of four lines so switching tabs doesn't bounce the box height. */
.wo-howto[b-y4si3lsoz4] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem 0.35rem;
}
.wo-howto-art[b-y4si3lsoz4] {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
}
.wo-howto-body[b-y4si3lsoz4] {
    flex: 1 1 auto;
    min-width: 0;
}
.wo-howto-tabs[b-y4si3lsoz4] {
    display: flex;
    gap: 0.35rem;
}
.wo-howto-tab[b-y4si3lsoz4] {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.2rem;
    border: 1px solid var(--jim-border);
    border-radius: 9px;
    background: var(--jim-card);
    color: var(--jim-muted);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.wo-howto-tab:focus[b-y4si3lsoz4], .wo-howto-tab:focus-visible[b-y4si3lsoz4] { outline: none; }
.wo-howto-tab.is-active[b-y4si3lsoz4] {
    border-color: var(--jim-tertiary);
    color: var(--jim-tertiary);
}
.wo-howto-text[b-y4si3lsoz4] {
    margin: 0.6rem 0 0;
    min-height: calc(4 * 1.4em);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--jim-muted);
}

/* The column is as wide as three tabs (ExerciseSteps.MaxSteps); change the 3 if MaxSteps changes. */
.wo-howto.is-stacked[b-y4si3lsoz4] {
    --howto-tab-width: 80px;
    --howto-tab-gap: 0.35rem;

    flex-direction: column;
    gap: 0.8rem;
}
.wo-howto.is-stacked .wo-howto-art[b-y4si3lsoz4] {
    width: 130px;
    height: 130px;
}
.wo-howto.is-stacked .wo-howto-body[b-y4si3lsoz4] {
    flex: none;
    width: calc(3 * var(--howto-tab-width) + 2 * var(--howto-tab-gap));
    max-width: 100%;
}
.wo-howto.is-stacked .wo-howto-tabs[b-y4si3lsoz4] {
    gap: var(--howto-tab-gap);
    justify-content: flex-start;
}
.wo-howto.is-stacked .wo-howto-tab[b-y4si3lsoz4] {
    flex: 0 1 var(--howto-tab-width);
    padding-inline: 0.4rem;
}
.wo-howto.is-stacked .wo-howto-text[b-y4si3lsoz4] {
    min-height: calc(3 * 1.4em);
    text-align: left;
}
/* /Components/ExerciseIcon.razor.rz.scp.css */
.ex-icon-img[b-3ctkjrnvxw] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
/* /Components/ExerciseProgressGraph.razor.rz.scp.css */
.wo-graph[b-25lctmjejp] { padding: 0.9rem 1rem 0.35rem; }

.wo-graph-plot[b-25lctmjejp] { position: relative; height: 132px; }

.wo-graph-range[b-25lctmjejp] {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding-top: 0.6rem;
}
.wo-range-btn[b-25lctmjejp] {
    min-width: 92px;
    padding: 0.5rem 0.8rem 0.4rem 0.8rem;
    border: 1px solid var(--jim-border);
    border-radius: 9px;
    background: var(--jim-card);
    color: var(--jim-muted);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.wo-range-btn:focus[b-25lctmjejp], .wo-range-btn:focus-visible[b-25lctmjejp] { outline: none; }
.wo-range-btn.is-active[b-25lctmjejp] {
    border-color: var(--jim-tertiary);
    color: var(--jim-tertiary);
}
.wo-graph-svg[b-25lctmjejp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* preserveAspectRatio="none" stretches the 0..100 box to fill; non-scaling-stroke keeps
   the line an even 2px so the stretch doesn't smear its thickness. */
.wo-graph-svg path[b-25lctmjejp] {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.wo-graph-svg path.is-weight[b-25lctmjejp] { stroke: var(--jim-graph-weight); }
.wo-graph-svg path.is-reps[b-25lctmjejp] { stroke: var(--jim-graph-reps); }
.wo-graph-pt[b-25lctmjejp] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    /* Glide to the new position when the range rescales the points. */
    transition: left 0.35s ease, top 0.35s ease;
}
.wo-graph-pt:focus[b-25lctmjejp], .wo-graph-pt:focus-visible[b-25lctmjejp] { outline: none; }
.wo-graph-pt[b-25lctmjejp]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--jim-card);
    border: 2px solid var(--jim-graph-weight);
    transition: transform 0.15s ease, background 0.15s ease;
}
.wo-graph-pt.is-reps[b-25lctmjejp]::after { border-color: var(--jim-graph-reps); }
.wo-graph-pt.is-weight.is-latest[b-25lctmjejp]::after { background: var(--jim-graph-weight); }
.wo-graph-pt.is-reps.is-latest[b-25lctmjejp]::after { background: var(--jim-graph-reps); }
.wo-graph-pt.is-selected[b-25lctmjejp] { z-index: 3; }
.wo-graph-pt.is-selected[b-25lctmjejp]::after { transform: translate(-50%, -50%) scale(1.35); }

.wo-graph-tip[b-25lctmjejp] {
    position: absolute;
    left: 50%;
    bottom: calc(50% + 11px);
    transform: translate(-50%, 4px);
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--jim-tip-bg);
    color: var(--jim-tip-ink);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.wo-graph-tip[b-25lctmjejp]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--jim-tip-bg);
}
.wo-graph-tip-unit[b-25lctmjejp] { font-size: 0.62rem; font-weight: 700; opacity: 0.75; }
.wo-graph-tip-both[b-25lctmjejp] {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    bottom: calc(50% + 13px);
    padding: 3px 8px;
}
.wo-graph-tip-row[b-25lctmjejp] { display: inline-flex; align-items: baseline; gap: 2px; }
.wo-graph-pt.is-weight .wo-graph-tip[b-25lctmjejp],
.wo-graph-tip-row.is-weight[b-25lctmjejp] { color: var(--jim-graph-weight); }
.wo-graph-pt.is-reps .wo-graph-tip[b-25lctmjejp],
.wo-graph-tip-row.is-reps[b-25lctmjejp] { color: var(--jim-graph-reps); }
.wo-graph-pt.is-selected .wo-graph-tip[b-25lctmjejp] {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Points near the top of the plot (Home.razor's tipBelow) have no room for the bubble above
   them — .wo-panels-view clips it — so it hangs under the dot with its pointer flipped up.
   These win on specificity over the bottom offsets above, including the overlap bubble's. */
.wo-graph-pt.is-tip-below .wo-graph-tip[b-25lctmjejp] {
    bottom: auto;
    top: calc(50% + 11px);
}
.wo-graph-pt.is-tip-below .wo-graph-tip-both[b-25lctmjejp] { top: calc(50% + 13px); }
.wo-graph-pt.is-tip-below .wo-graph-tip[b-25lctmjejp]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--jim-tip-bg);
}
@media (prefers-reduced-motion: reduce) {
    .wo-graph-tip[b-25lctmjejp], .wo-graph-pt[b-25lctmjejp], .wo-graph-pt[b-25lctmjejp]::after { transition: none; }
}
/* /Components/JimModal.razor.rz.scp.css */
/* z-index: above the nav (100), sheets (200) and drag clone (1000), below the toast (2000). */
.jim-modal[b-n7ysnyx5pg] {
    /* The card is centred in the space between these, not in the whole screen. The top
       clears the notch; the bottom clears the bottom nav (its bar, plus the home indicator
       or Android button strip it grows by) and leaves a 16px gap above it. The veil itself
       still covers the nav. */
    --jim-modal-pad-top: max(16px, env(safe-area-inset-top, 0px));
    --jim-modal-pad-bottom: calc(var(--jim-nav-h) + var(--jim-safe-bottom) + 16px);

    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jim-modal-pad-top) 16px var(--jim-modal-pad-bottom);

    background: rgba(12, 26, 34, 0.45);

    /* Stops a drag on the veil scrolling the page behind it (iOS especially). */
    touch-action: none;
    overscroll-behavior: contain;
    outline: none;
    animation: jim-modal-fade-in-b-n7ysnyx5pg 200ms ease both;
}

.jim-modal.is-dismissible[b-n7ysnyx5pg] {
    cursor: pointer;
}

/* 4:5 by default, so a Rive artboard drawn at 4:5 shows in full; tell the designer if it changes. The
   width is the smallest of the screen less its gutters, the height left above the nav times the ratio,
   and 440px. svh, not dvh: see CLAUDE.md's Rive flicker notes. */
.jim-modal-card[b-n7ysnyx5pg] {
    --jim-modal-ratio: 4 / 5;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(var(--jim-modal-width, 100%), 440px,
               calc((100svh - var(--jim-modal-pad-top) - var(--jim-modal-pad-bottom)) * (var(--jim-modal-ratio))));
    aspect-ratio: var(--jim-modal-ratio);
    /* Without this, content taller than the card could stretch it out of ratio. */
    overflow: hidden;

    background: var(--jim-card);
    border-radius: var(--jim-nav-radius);
    box-shadow: 0 10px 30px rgba(11, 39, 53, 0.28);
    animation: jim-modal-pop-b-n7ysnyx5pg var(--jim-elastic-duration) var(--jim-ease-elastic) both;
}

/* The code-behind keeps the element mounted for this long (JimModal.razor.cs
   ExitDuration). Change one and change the other. */
.jim-modal.leaving[b-n7ysnyx5pg] {
    animation: jim-modal-fade-out-b-n7ysnyx5pg 200ms ease both;
    pointer-events: none;
}

@keyframes jim-modal-fade-in-b-n7ysnyx5pg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jim-modal-fade-out-b-n7ysnyx5pg {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes jim-modal-pop-b-n7ysnyx5pg {
    from {
        /* Starts small enough that the elastic overshoot reads as a bounce. */
        transform: translateY(16px) scale(0.85);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* Keep the fade, lose the pop. */
@media (prefers-reduced-motion: reduce) {
    .jim-modal-card[b-n7ysnyx5pg] {
        animation: none;
    }
}
/* /Components/RiveMascot.razor.rz.scp.css */
/* translateZ(0) gives the canvas its own compositing layer; without it iOS WebKit drops it on alternate
   frames while the page scrolls (see CLAUDE.md). pointer-events: none so it never eats a scroll. */
.rive-mascot[b-9vsuauj6ss] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* /Components/Toast.razor.rz.scp.css */
/* z-index above the nav (100) and sheets (200) but below #blazor-error-ui (3000): if the app has fallen over, that banner wins. */
.jim-toast[b-1klpdncl96] {
    /* How far the bar's bottom edge sits above the bottom of the screen. Less than the nav's
       full height, so the difference is how much of the bar it covers. One knob: raising the
       overlap drops the toast further over the nav, and the slide distance follows it. */
    --jim-toast-overlap: 20px;
    --jim-toast-lift: calc(var(--jim-nav-h) + var(--jim-safe-bottom) - var(--jim-toast-overlap));

    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--jim-toast-lift);
    margin: 0 auto;
    width: calc(100% - 24px);
    max-width: 536px;
    z-index: 2000;

    padding: 1.05rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11, 39, 53, 0.28);

    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;

    cursor: pointer;
    user-select: none;
    animation: jim-toast-up-b-1klpdncl96 var(--jim-elastic-duration) var(--jim-ease-elastic) both;
}

/* One rule per ToastKind. */
.jim-toast-info[b-1klpdncl96]    { background: var(--jim-primary); }
.jim-toast-error[b-1klpdncl96]   { background: var(--jim-danger); }
.jim-toast-success[b-1klpdncl96] { background: var(--jim-secondary); }

/* The code-behind keeps the element mounted for the whole of this animation
   (Toast.razor.cs ExitDuration) — change one and change the other. */
.jim-toast.leaving[b-1klpdncl96] {
    animation: jim-toast-down-b-1klpdncl96 260ms cubic-bezier(0.4, 0, 1, 1) both;
}

/* Travels its own height PLUS its offset, so it starts and ends flush with the bottom edge
   of the screen rather than appearing part-way up. */
@keyframes jim-toast-up-b-1klpdncl96 {
    from {
        transform: translateY(calc(100% + var(--jim-toast-lift)));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes jim-toast-down-b-1klpdncl96 {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(calc(100% + var(--jim-toast-lift)));
        opacity: 0;
    }
}

/* Reduce the MOTION, not the feedback: the bar still fades in and out, it just doesn't
   travel. Killing the animation outright would make it blink in and out with no cue at all. */
@media (prefers-reduced-motion: reduce) {
    .jim-toast[b-1klpdncl96] {
        animation: jim-toast-fade-in-b-1klpdncl96 200ms ease both;
    }

    .jim-toast.leaving[b-1klpdncl96] {
        animation: jim-toast-fade-out-b-1klpdncl96 200ms ease both;
    }
}

@keyframes jim-toast-fade-in-b-1klpdncl96 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jim-toast-fade-out-b-1klpdncl96 {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* /Components/WorkoutGreeting.razor.rz.scp.css */
/* The Squat Anim artboard paints its own white square; for dark mode the fix belongs in the .riv, not here. */
.workout-greeting[b-8xkzwte80s] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.workout-greeting-squat[b-8xkzwte80s] {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.workout-greeting-text[b-8xkzwte80s] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    padding: 0 1.5rem;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--jim-ink);
}

.workout-greeting-hint[b-8xkzwte80s] {
    flex: 1;
    margin: 0;
    padding: 0.6rem 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--jim-muted);
}
/* /Layout/RiveNavIcon.razor.rz.scp.css */
/* All three artboards are 60x60 at one shared scale. The canvas is sized so the dumbbell measures 28px
   (28 / 0.586 = 47.75px), with the extra height pulled back by negative margins; re-measure if the
   artboards are re-exported. pointer-events: none is load-bearing: without it the canvas swallows the
   NavLink's tap and the iOS haptic overlay's. */
.rive-nav-icon[b-0a3wqlf0hp] {
    display: block;
    height: 47.75px;
    width: auto;
    aspect-ratio: 1 / 1;
    margin: -9.875px 0;
    pointer-events: none;
}
/* /Pages/Account.razor.rz.scp.css */
/* Full-bleed: undo .jim-content's 1rem side gutters so hero and card run edge to edge. */
.profile[b-rstj7fvsy4] {
    margin: 0 -1rem;
}

/* 40svh is what shows; the extra nav-radius runs on underneath the card's rounded top, so
   the corners reveal picture rather than page. svh, not dvh: dvh changes while Safari's
   toolbar collapses mid-scroll, which resized Jymbo's canvas every frame. */
.profile-hero[b-rstj7fvsy4] {
    position: relative;
    height: calc(40svh + var(--jim-nav-radius));
    overflow: hidden;
    background: #B4C1DA;
}

.profile-hero-empty[b-rstj7fvsy4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #B4C1DA;
}
.profile-silhouette[b-rstj7fvsy4] {
    display: block;
    height: calc(31svh + var(--jim-nav-radius));
    width: auto;
    fill: #5F6B7C;
}
:root[data-theme="dark"] .profile-hero[b-rstj7fvsy4],
:root[data-theme="dark"] .profile-hero-empty[b-rstj7fvsy4] { background: #334155; }
:root[data-theme="dark"] .profile-silhouette[b-rstj7fvsy4] { fill: #64748B; }

.profile-card[b-rstj7fvsy4] {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--jim-nav-radius));
    border-radius: var(--jim-nav-radius) var(--jim-nav-radius) 0 0;
    background: var(--jim-bg);
    padding: 1.1rem 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* The card's flex gap doesn't reach inside the <form> EditForm renders. */
.profile-card[b-rstj7fvsy4]  form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-label[b-rstj7fvsy4] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--jim-muted) 70%, var(--jim-bg));
}
.profile-section-title[b-rstj7fvsy4] { margin-bottom: -0.25rem; } /* sits under a .profile-rule, like .profile-section-head */

.profile-sync[b-rstj7fvsy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.profile-sync-badge[b-rstj7fvsy4] {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
}
.profile-sync-badge.is-local[b-rstj7fvsy4]   { background: #DC2626; }
.profile-sync-badge.is-synced[b-rstj7fvsy4]  { background: #58A33A; }
.profile-sync-badge.is-pending[b-rstj7fvsy4] { background: var(--jim-tertiary); }
.profile-sync-badge.is-backup[b-rstj7fvsy4]  { background: var(--jim-info); }
.profile-sync-detail[b-rstj7fvsy4] {
    margin: -0.5rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--jim-muted);
}

.profile-actions[b-rstj7fvsy4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.profile-btn[b-rstj7fvsy4] {
    min-height: 52px;
    padding: 0 0.75rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.profile-btn-primary[b-rstj7fvsy4] {
    border: none;
    background: var(--jim-tertiary);
    color: #fff;
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--jim-tertiary) 72%, black);
}
.profile-btn-primary:active[b-rstj7fvsy4] {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--jim-tertiary) 72%, black);
}
.profile-btn-outline[b-rstj7fvsy4] {
    border: 2px solid var(--jim-tertiary);
    border-bottom-width: 4px;
    background: var(--jim-bg);
    color: var(--jim-muted);
}
.profile-btn-outline:active[b-rstj7fvsy4] { transform: translateY(2px); }
.profile-btn:focus-visible[b-rstj7fvsy4] { outline: none; }

/* Bootstrap gives <hr> a 25% opacity and currentColor; this is a plain solid rule. */
.profile-rule[b-rstj7fvsy4] {
    margin: 0.25rem 0 0;
    border: 0;
    border-top: 2px solid var(--jim-border);
    opacity: 1;
}

.profile-section-head[b-rstj7fvsy4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: -0.25rem;
}
.profile-saved[b-rstj7fvsy4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #059669;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.profile-saved.is-visible[b-rstj7fvsy4] { opacity: 1; }
.profile-saved svg[b-rstj7fvsy4] { width: 13px; height: 13px; }

.profile-fields[b-rstj7fvsy4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem 0.6rem;
}
.profile-field-label[b-rstj7fvsy4] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--jim-muted);
    text-align: right;
}
.profile-input[b-rstj7fvsy4] {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 0.7rem;
    border: 1px solid var(--jim-border);
    border-radius: 8px;
    background: var(--jim-inset);
    color: var(--jim-ink);
    font: inherit;
    font-size: 1rem; /* 16px: below this iOS zooms the page on focus */
}
.profile-input:focus[b-rstj7fvsy4] {
    outline: none;
    border-color: var(--jim-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jim-primary) 15%, transparent);
}
.profile-input:disabled[b-rstj7fvsy4] { opacity: 0.6; }
.profile-input-wide[b-rstj7fvsy4] { grid-column: 2 / -1; }

.acct-tabs[b-rstj7fvsy4] {
    display: flex;
    margin-bottom: 0.25rem;
    background: var(--jim-inset);
    border: 1px solid var(--jim-border);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
}
.acct-tab[b-rstj7fvsy4] {
    flex: 1;
    border: none;
    background: none;
    border-radius: 9px;
    padding: 0.55rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--jim-muted);
    cursor: pointer;
}
.acct-tab.is-active[b-rstj7fvsy4] {
    background: var(--jim-card);
    color: var(--jim-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.acct-input[b-rstj7fvsy4] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--jim-border);
    border-radius: 12px;
    background: var(--jim-card);
    color: var(--jim-ink);
    font-size: 1rem;
}
.acct-input:focus[b-rstj7fvsy4] {
    outline: none;
    border-color: var(--jim-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jim-primary) 15%, transparent);
}
/* Honeypot — off-screen, never shown to a real user. */
.acct-hp[b-rstj7fvsy4] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.acct-primary[b-rstj7fvsy4] {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: var(--jim-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}
.acct-primary:disabled[b-rstj7fvsy4] { opacity: 0.7; cursor: default; }
.acct-google[b-rstj7fvsy4] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--jim-border);
    border-radius: 12px;
    background: var(--jim-card);
    color: var(--jim-ink);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.acct-error[b-rstj7fvsy4] { color: #EF4444; font-size: 0.88rem; text-align: center; }

.acct-hint[b-rstj7fvsy4] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--jim-muted);
    text-align: center;
}

.acct-link[b-rstj7fvsy4] {
    align-self: center;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    color: var(--jim-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.acct-link:disabled[b-rstj7fvsy4] { opacity: 0.6; cursor: default; }
.acct-link-inline[b-rstj7fvsy4] { padding: 0; align-self: flex-start; }

.acct-notice[b-rstj7fvsy4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--jim-tertiary) 12%, var(--jim-bg));
    color: var(--jim-ink);
    font-size: 0.9rem;
    line-height: 1.4;
}
/* A long address may break inside itself, but only when it can't fit on a line of its own. */
.acct-notice strong[b-rstj7fvsy4] { overflow-wrap: anywhere; }

.acct-expander[b-rstj7fvsy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0;
    border: none;
    background: none;
    color: var(--jim-ink);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.acct-expander-chevron[b-rstj7fvsy4] {
    width: 20px;
    height: 20px;
    color: var(--jim-muted);
    transition: transform 0.2s ease;
}
.acct-expander-chevron.is-open[b-rstj7fvsy4] { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .acct-expander-chevron[b-rstj7fvsy4] { transition: none; }
}

.profile-btn-danger[b-rstj7fvsy4] {
    border: 2px solid var(--jim-danger);
    border-bottom-width: 4px;
    background: var(--jim-bg);
    color: var(--jim-danger);
}
.profile-btn-danger:active[b-rstj7fvsy4] { transform: translateY(2px); }

.profile-legal[b-rstj7fvsy4] {
    margin: 0.25rem 0 1rem;
    text-align: center;
    font-size: 0.85rem;
}
.profile-legal a[b-rstj7fvsy4] {
    color: var(--jim-muted);
    text-decoration: underline;
}
.profile-legal-sep[b-rstj7fvsy4] {
    margin: 0 0.5rem;
    color: var(--jim-muted);
}
.acct-restored[b-rstj7fvsy4] {
    background: rgba(34, 197, 94, 0.12);
    color: #15803D;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.acct-or[b-rstj7fvsy4] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--jim-muted);
    font-size: 0.82rem;
}
.acct-or[b-rstj7fvsy4]::before, .acct-or[b-rstj7fvsy4]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--jim-border);
}
.acct-or span[b-rstj7fvsy4] { padding: 0 0.7rem; }
/* Written in this page's markup, so this page's scope reaches it inside <JimModal>. */
.acct-signin-modal[b-rstj7fvsy4] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.acct-signin-art[b-rstj7fvsy4] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 0.9rem 0;
}
.acct-signin-head[b-rstj7fvsy4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}
.acct-signin-text[b-rstj7fvsy4] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.25rem 0.75rem 0.85rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--jim-ink);
}
/* The "..." after the text: one dot, then two, then three, then back to one. All three
   always take up space and only the 2nd and 3rd blink in, so the centred line never
   shifts sideways as the dots change. */
.acct-signin-dots span:nth-child(2)[b-rstj7fvsy4] {
    animation: acct-dot-2-b-rstj7fvsy4 1.5s step-end infinite;
}
.acct-signin-dots span:nth-child(3)[b-rstj7fvsy4] {
    animation: acct-dot-3-b-rstj7fvsy4 1.5s step-end infinite;
}
@keyframes acct-dot-2-b-rstj7fvsy4 {
    0% { visibility: hidden; }
    33.333% { visibility: visible; }
}
@keyframes acct-dot-3-b-rstj7fvsy4 {
    0% { visibility: hidden; }
    66.666% { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .acct-signin-dots span[b-rstj7fvsy4] {
        animation: none;
    }
}

.jim-settings-toggle-row[b-rstj7fvsy4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.jim-settings-toggle-text[b-rstj7fvsy4] { flex: 1; min-width: 0; }
.jim-settings-label[b-rstj7fvsy4] {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--jim-muted);
}
.jim-settings-description[b-rstj7fvsy4] {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--jim-muted) 70%, var(--jim-bg));
}
.jim-settings-switch[b-rstj7fvsy4] { flex: 0 0 auto; padding-left: 0; margin-top: 0.15rem; }
.jim-settings-switch .form-check-input[b-rstj7fvsy4] {
    width: 2.5rem;
    height: 1.4rem;
    margin: 0;
    cursor: pointer;
    background-color: var(--jim-border);
    border-color: var(--jim-border);
}
.jim-settings-switch .form-check-input:checked[b-rstj7fvsy4] {
    background-color: var(--jim-primary);
    border-color: var(--jim-primary);
}
.jim-settings-switch .form-check-input:focus[b-rstj7fvsy4] {
    border-color: var(--jim-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--jim-primary) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .profile-btn[b-rstj7fvsy4], .profile-saved[b-rstj7fvsy4] { transition: none; }
}
/* /Pages/Add.razor.rz.scp.css */
/* ::deep wherever .ex-icon-img is sized: it's rendered by ExerciseIcon, so it carries that component's scope. */

.add-header[b-ssu3vjypp6] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: calc(1.25rem + env(safe-area-inset-top)) 0 1rem;
}
.add-back[b-ssu3vjypp6] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jim-ink);
    background: var(--jim-card);
    -webkit-tap-highlight-color: transparent;
}
.add-back:active[b-ssu3vjypp6] { transform: scale(0.94); }
.add-back svg[b-ssu3vjypp6] { width: 20px; height: 20px; }
.add-title[b-ssu3vjypp6] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jim-ink);
}

.add-search[b-ssu3vjypp6] {
    position: relative;
    margin-bottom: 0.9rem;
}
.add-search-icon[b-ssu3vjypp6] {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--jim-muted);
    pointer-events: none;
}
.add-search-input[b-ssu3vjypp6] {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.6rem;
    border: 1px solid var(--jim-border);
    border-radius: 999px;
    background: var(--jim-bg);
    color: var(--jim-ink);
    font: inherit;
    font-size: 1rem; /* 16px: anything smaller makes iOS zoom the page on focus */
    -webkit-appearance: none;
    appearance: none;
}
.add-search-input[b-ssu3vjypp6]::placeholder { color: var(--jim-muted); }
.add-search-input:focus[b-ssu3vjypp6] {
    outline: none;
    border-color: var(--jim-tertiary);
}

/* Each row scrolls sideways and runs to the screen edges: the negative margin cancels
   .jim-content's 1rem gutter and the padding puts it back inside the scroller, so the first
   chip lines up with the content but later ones slide off the edge (as in the design). */
.add-chips[b-ssu3vjypp6] {
    display: flex;
    gap: 0.45rem;
    margin: 0 -1rem 0.5rem;
    padding: 0 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.add-chips[b-ssu3vjypp6]::-webkit-scrollbar { display: none; }
.add-chips + .add-chips[b-ssu3vjypp6] { margin-bottom: 1rem; }
.add-chip[b-ssu3vjypp6] {
    flex: 0 0 auto;
    padding: 0.45rem 1rem 0.4rem;
    border: none;
    border-radius: 999px;
    background: var(--jim-card);
    color: var(--jim-muted);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.add-chip:focus[b-ssu3vjypp6], .add-chip:focus-visible[b-ssu3vjypp6] { outline: none; }
.add-chip.is-orange.is-active[b-ssu3vjypp6] { background: var(--jim-tertiary); color: #fff; }
.add-chip.is-purple.is-active[b-ssu3vjypp6] { background: var(--jim-primary); color: #fff; }

.add-empty[b-ssu3vjypp6] {
    margin: 0.5rem 0 0.9rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--jim-muted);
}
.add-grid[b-ssu3vjypp6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
/* A white card: picture on the left, bold name beside it. The border is always there but
   transparent, so picking one turns it orange without the tile shifting. */
.add-tile[b-ssu3vjypp6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 74px;
    padding: 0.6rem 0.8rem;
    border: 2px solid transparent;
    border-radius: 18px;
    background: var(--jim-card);
    color: var(--jim-ink);
    text-align: left;
    cursor: pointer;
    transition: transform 0.08s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.add-tile:focus[b-ssu3vjypp6], .add-tile:focus-visible[b-ssu3vjypp6] { outline: none; }
.add-tile:active[b-ssu3vjypp6] { transform: scale(0.97); }
.add-tile.is-picked[b-ssu3vjypp6] { border-color: var(--jim-tertiary); }
.add-tile-icon[b-ssu3vjypp6] {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
}
.add-tile-icon[b-ssu3vjypp6]  .ex-icon-img {
    width: 100%;
    height: 100%;
}
.add-tile-name[b-ssu3vjypp6] {
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.add-tile-new[b-ssu3vjypp6] {
    border: 2px dashed var(--jim-border);
    background: transparent;
    color: var(--jim-muted);
}
.add-tile-new .add-tile-icon[b-ssu3vjypp6] {
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 1;
}

/* The global .wo-panels / .wo-dots rules from Home do the work; this only fits them to the
   sheet. The carousel runs edge to edge (cancelling .sheet's 1.5rem side padding) so pages
   slide in from the sheet's edges, and each page puts that padding back itself. No divider
   line above it: the sheet's own header spacing does that job. */
.add-sheet-panels[b-ssu3vjypp6] {
    margin: 0 -1.5rem;
    border-top: none;
}
.add-sheet-panels .add-sheet-entry[b-ssu3vjypp6] {
    padding: 0 1.5rem 0.2rem;
}
.add-sheet-panels[b-ssu3vjypp6]  .wo-howto,
.add-sheet-panels[b-ssu3vjypp6]  .wo-graph {
    padding-inline: 1.5rem;
}
/* Moves the steps page's top padding to the bottom, so Jymbo sits closer to the header without the page changing height. */
.add-sheet-panels[b-ssu3vjypp6]  .wo-howto {
    padding-top: 0;
    padding-bottom: 1.25rem;
}
.add-sheet-panels .wo-dots[b-ssu3vjypp6] {
    padding-bottom: 0;
}

/* The reps sheet is never shorter than 420px (plus the home-indicator strip), so it looks
   the same size from one exercise to the next — e.g. a bodyweight move, which has no weight
   row. Any spare height goes above the pips, which stay pinned to the bottom. */
.add-pick-sheet[b-ssu3vjypp6] {
    display: flex;
    flex-direction: column;
    min-height: calc(420px + var(--jim-safe-bottom));
}
.add-pick-sheet .add-sheet-panels[b-ssu3vjypp6] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.add-pick-sheet .add-sheet-panels .wo-dots[b-ssu3vjypp6] {
    margin-top: auto;
}

/* The sheet holds every page at the tallest page's height (data-uniform-height), so centre
   each page's content in that box rather than leaving the shorter ones (the graph) stuck to
   the top with a gap beneath. Home rows keep the default top alignment: their box resizes
   to each page, so there is no gap to share out. */
.add-sheet-panels .wo-panels-track[b-ssu3vjypp6] {
    align-items: stretch;
}
.add-sheet-panels .wo-panel[b-ssu3vjypp6] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The handle strip spans the sheet's full width and runs up to its top edge, cancelling
   .sheet's padding, so it's easy to catch with a thumb rather than only the 40x4 bar. Its
   flow-root keeps the handle's own margins inside the strip. The grab zones take every
   touch themselves, so pulling down never scrolls or refreshes the page. */
.add-sheet-grab[b-ssu3vjypp6] {
    display: flow-root;
    margin: -0.6rem -1.5rem 0;
    padding: 0.6rem 1.5rem 0;
}
[data-sheet-grab][b-ssu3vjypp6] {
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
/* /Pages/ConfirmEmail.razor.rz.scp.css */
.confirm[b-pt05pz63mn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 420px;
    margin: 0 auto;
    padding: 2.5rem 0.5rem 1.5rem;
}

.confirm-title[b-pt05pz63mn] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jim-ink);
}

.confirm-text[b-pt05pz63mn] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--jim-ink);
}

.confirm-spinner[b-pt05pz63mn] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--jim-primary-pale);
    border-top-color: var(--jim-primary);
    border-radius: 50%;
    animation: confirm-spin-b-pt05pz63mn 0.7s linear infinite;
}
@keyframes confirm-spin-b-pt05pz63mn { to { transform: rotate(360deg); } }

.confirm-btn[b-pt05pz63mn] {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: var(--jim-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
.reset[b-s6y21xpwa5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 420px;
    margin: 0 auto;
    padding: 2.5rem 0.5rem 1.5rem;
}

.reset-title[b-s6y21xpwa5] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jim-ink);
}

.reset-text[b-s6y21xpwa5] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--jim-ink);
}
.reset-text strong[b-s6y21xpwa5] { overflow-wrap: anywhere; }

/* EditForm renders the <form>, so it doesn't carry this page's scope: reach it with ::deep. */
.reset[b-s6y21xpwa5]  .reset-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reset-input[b-s6y21xpwa5] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--jim-border);
    border-radius: 12px;
    background: var(--jim-card);
    color: var(--jim-ink);
    font-size: 1rem; /* 16px: below this iOS zooms the page on focus */
}
.reset-input:focus[b-s6y21xpwa5] {
    outline: none;
    border-color: var(--jim-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jim-primary) 15%, transparent);
}

.reset-hidden[b-s6y21xpwa5] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.reset-hint[b-s6y21xpwa5] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--jim-muted);
}

.reset-error[b-s6y21xpwa5] {
    margin: 0;
    color: var(--jim-danger);
    font-size: 0.9rem;
}

.reset-btn[b-s6y21xpwa5] {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: var(--jim-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.reset-btn:disabled[b-s6y21xpwa5] { opacity: 0.7; cursor: default; }
/* /Pages/Stopwatch.razor.rz.scp.css */
.stopwatch[b-clcq8cmjl6] {
    /* The dial's width; sized off the screen's height as well as its width so dial and
       buttons fit above the nav on a short phone (iPhone SE) without scrolling. */
    --stopwatch-dial-width: min(70vw, 36dvh, 280px);
    /* Sized so the full h:mm:ss plus tenths fits a 320px-wide phone. */
    --stopwatch-digits-size: clamp(2.75rem, 15vw, 5rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: calc(1.25rem + env(safe-area-inset-top));
}

/* The clock's slot. It is as tall as the page title + digits + dial were before they
   were cut down to one clock, so the buttons below stay exactly where they were; the
   clock sits centred in it, which lifts the dial up the screen. */
.stopwatch-display[b-clcq8cmjl6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* dial + old digits line + old 3dvh top gap + ~4.3rem for the old title (measured). */
    height: calc(var(--stopwatch-dial-width) * 262 / 240 + var(--stopwatch-digits-size) + 3dvh + 4.3rem);
}

.stopwatch-digits[b-clcq8cmjl6] {
    display: flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--jim-ink);
}
.stopwatch-main[b-clcq8cmjl6] {
    font-size: var(--stopwatch-digits-size);
    line-height: 1;
}
.stopwatch-tenths[b-clcq8cmjl6] {
    font-size: clamp(1.4rem, 7vw, 2.25rem);
    color: var(--jim-muted);
}

.stopwatch-dial[b-clcq8cmjl6] {
    display: block;
    width: var(--stopwatch-dial-width);
    height: auto;
}

.stopwatch-case[b-clcq8cmjl6],
.stopwatch-hub[b-clcq8cmjl6] { fill: var(--jim-ink); }
.stopwatch-bezel[b-clcq8cmjl6] {
    fill: none;
    stroke: var(--jim-ink);
    stroke-width: 6;
}
.stopwatch-ring-track[b-clcq8cmjl6],
.stopwatch-ring[b-clcq8cmjl6] {
    fill: none;
    stroke-width: 16;
}
.stopwatch-ring-track[b-clcq8cmjl6] { stroke: var(--jim-border); }

.stopwatch-lap-0[b-clcq8cmjl6] { --stopwatch-lap: var(--jim-tertiary); }
.stopwatch-lap-1[b-clcq8cmjl6] { --stopwatch-lap: var(--jim-primary); }
.stopwatch-lap-2[b-clcq8cmjl6] { --stopwatch-lap: var(--jim-secondary); }
.stopwatch-ring[b-clcq8cmjl6] { stroke: var(--stopwatch-lap); }

.stopwatch-tick[b-clcq8cmjl6] {
    stroke: var(--jim-muted);
    stroke-width: 2;
}
.stopwatch-tick.is-major[b-clcq8cmjl6] { stroke-width: 3; }

/* The hh:mm counter (01:30) under the centre, in the colour of the hour filling the ring.
   Sized so all five characters sit inside the tick marks. Drawn before the hand, so the
   hand sweeps over it at the bottom of the dial. */
.stopwatch-counter[b-clcq8cmjl6] {
    fill: var(--stopwatch-lap);
    font-family: var(--jim-font);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
}

.stopwatch-hand[b-clcq8cmjl6] {
    stroke: var(--jim-ink);
    stroke-width: 4;
    stroke-linecap: round;
}

.stopwatch-actions[b-clcq8cmjl6] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 22rem;
}
.stopwatch-btn[b-clcq8cmjl6] {
    flex: 1;
    min-height: 52px;
    padding: 0 0.75rem;
    border-radius: 16px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.2s ease;
}
.stopwatch-btn:focus-visible[b-clcq8cmjl6] { outline: none; }
.stopwatch-btn:disabled[b-clcq8cmjl6] { opacity: 0.4; cursor: default; }

.stopwatch-btn-start[b-clcq8cmjl6],
.stopwatch-btn-stop[b-clcq8cmjl6] {
    border: none;
    background: var(--jim-tertiary);
    color: #fff;
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--jim-tertiary) 72%, black);
}
.stopwatch-btn-start:active[b-clcq8cmjl6],
.stopwatch-btn-stop:active[b-clcq8cmjl6] {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--jim-tertiary) 72%, black);
}

.stopwatch-btn-secondary[b-clcq8cmjl6] {
    border: 2px solid var(--jim-tertiary);
    border-bottom-width: 4px;
    background: var(--jim-bg);
    color: var(--jim-muted);
}
.stopwatch-btn-secondary:not(:disabled):active[b-clcq8cmjl6] { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
    .stopwatch-btn[b-clcq8cmjl6] { transition: none; }
}