/* /Components/Account/Pages/Manage/Passkeys.razor.rz.scp.css */
.mgmt-passkeys-intro[b-vrw7mu8sej] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, var(--q-ink-muted));
    margin: -8px 0 22px;
    line-height: 1.55;
    max-width: 42rem;
}

.mgmt-passkey-list[b-vrw7mu8sej] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mgmt-passkey-item[b-vrw7mu8sej] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 16px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--mud-palette-divider, var(--q-line));
    background: var(--mud-palette-background, var(--q-surface));
}

.mgmt-passkey-item__main[b-vrw7mu8sej] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mgmt-passkey-item__main .material-icons[b-vrw7mu8sej] {
    font-size: 22px;
    color: var(--q-accent-text);
    opacity: 0.85;
    flex-shrink: 0;
}

.mgmt-passkey-item__name[b-vrw7mu8sej] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, var(--q-ink));
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-passkey-item__actions[b-vrw7mu8sej] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mgmt-passkey-item__actions form[b-vrw7mu8sej] {
    display: contents;
}

.mgmt-passkeys-empty[b-vrw7mu8sej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 8px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--mud-palette-divider, var(--q-line));
    background: var(--mud-palette-background, var(--q-surface));
    margin-bottom: 24px;
}

.mgmt-passkeys-empty .material-icons[b-vrw7mu8sej] {
    font-size: 40px;
    color: var(--mud-palette-text-disabled, var(--q-ink-muted));
    margin-bottom: 12px;
}

.mgmt-passkeys-empty p[b-vrw7mu8sej] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, var(--q-ink-muted));
    line-height: 1.5;
    max-width: 26rem;
}

.mgmt-passkeys-add[b-vrw7mu8sej] {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--mud-palette-divider, var(--q-line));
}

.mgmt-passkeys-add__title[b-vrw7mu8sej] {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary, var(--q-ink-muted));
    margin: 0 0 12px;
}

@media (max-width: 520px) {
    .mgmt-passkey-item[b-vrw7mu8sej] {
        flex-direction: column;
        align-items: stretch;
    }

    .mgmt-passkey-item__actions[b-vrw7mu8sej] {
        justify-content: flex-start;
    }
}
/* /Components/CommandPalette/CommandPalette.razor.rz.scp.css */
.cmd-overlay[b-wixsz353yu] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: cmd-overlay-in-b-wixsz353yu 120ms ease-out;
}

.cmd-palette[b-wixsz353yu] {
    background: var(--q-surface-raised);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--q-shadow-2);
    width: 560px;
    max-width: 94vw;
    overflow: hidden;
    animation: cmd-palette-in-b-wixsz353yu 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top center;
}

@keyframes cmd-overlay-in-b-wixsz353yu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cmd-palette-in-b-wixsz353yu {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cmd-overlay[b-wixsz353yu],
    .cmd-palette[b-wixsz353yu] {
        animation: none;
    }
}

.cmd-search[b-wixsz353yu] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--q-line);
}

.cmd-input[b-wixsz353yu] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--q-font-body);
    font-size: 1rem;
    color: var(--q-ink);
}

.cmd-esc[b-wixsz353yu] {
    background: var(--q-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    color: var(--q-ink-faint);
}

.cmd-results[b-wixsz353yu] {
    max-height: 320px;
    overflow-y: auto;
}

.cmd-result[b-wixsz353yu] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.cmd-result:hover[b-wixsz353yu],
.cmd-result--active[b-wixsz353yu] {
    background: var(--q-accent-soft);
}

.cmd-footer[b-wixsz353yu] {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--q-line);
    color: var(--q-ink-faint);
    font-size: 0.75rem;
}

kbd[b-wixsz353yu] {
    background: var(--q-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-xs);
    padding: 1px 5px;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    margin-right: 2px;
}
/* /Components/Layout/AccountMenu.razor.rz.scp.css */
.account-menu__button[b-7qplz9t3pz] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--mud-palette-drawer-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.account-menu__button:hover[b-7qplz9t3pz],
.account-menu__button:focus-visible[b-7qplz9t3pz] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    outline: none;
}

/* Compact is the folio's variant: cut to the folio's height, and answering to the
   strip's palette rather than the drawer's, so it takes the same flat wash as the
   search button and the bell beside it. At 44px it was the tallest thing in a
   0.6rem line and set that line's height on its own. */
.account-menu__button--compact[b-7qplz9t3pz] {
    justify-content: center;
    width: var(--bs-folio-h, 26px);
    height: var(--bs-folio-h, 26px);
    min-height: 0;
    padding: 0;
    border-radius: 6px;
    color: var(--q-ink-faint);
}

.account-menu__button--compact:hover[b-7qplz9t3pz],
.account-menu__button--compact:focus-visible[b-7qplz9t3pz] {
    background: var(--q-accent-softer);
    color: var(--q-ink);
}

/* MudAvatar renders its own div, so the class handed to it never carries this
   file's scope attribute — these need ::deep, anchored on the button, which is
   real markup here. Without it MudBlazor's own Size.Small sizing stands. */
.account-menu__button[b-7qplz9t3pz]  .account-menu__avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.account-menu__button--compact[b-7qplz9t3pz]  .account-menu__avatar {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
}

/* An icon avatar is asked for at Size.Medium; scale it to the smaller disc. */
.account-menu__button--compact[b-7qplz9t3pz]  .mud-icon-root {
    font-size: 14px;
}

.account-menu__avatar-img[b-7qplz9t3pz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}

.account-menu__identity[b-7qplz9t3pz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.1;
}

.account-menu__name[b-7qplz9t3pz],
.account-menu__hint[b-7qplz9t3pz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__name[b-7qplz9t3pz] {
    font-size: 0.86rem;
    font-weight: 700;
}

.account-menu__hint[b-7qplz9t3pz] {
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.account-menu__more[b-7qplz9t3pz] {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.account-menu__logout-form[b-7qplz9t3pz] {
    margin: 0;
}

.account-menu__logout-button[b-7qplz9t3pz] {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}
/* /Components/Layout/BroadsheetIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The Index — the broadsheet's contents column.
 *
 * It places itself in the shell's grid (the shell is a different component, so
 * its scoped rules cannot reach this element): first column on a wide sheet,
 * a horizontal scrolling strip spanning the grid below 1024px.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bs__index[b-nwqfy85xps] {
    order: 1;
    border-right: 1px solid var(--q-line);
    padding: 18px 18px 18px 0;
    min-width: 0;
    overflow-y: auto;
}

.bs__kicker[b-nwqfy85xps] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.bs__kicker--spaced[b-nwqfy85xps] {
    display: block;
    margin-top: 16px;
}

/* Sections heading + its add control on one baseline. */
.bs__index-head[b-nwqfy85xps] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bs__index-add[b-nwqfy85xps] {
    border: 0;
    background: transparent;
    padding: 0 2px;
    cursor: pointer;
    font-family: var(--q-font-mono);
    font-size: 0.9rem;
    line-height: 1;
    color: var(--q-ink-faint);
    transition: color 130ms ease;
}

.bs__index-add:hover[b-nwqfy85xps],
.bs__index-add:focus-visible[b-nwqfy85xps] {
    color: var(--q-ink);
    outline: none;
}

/* A ruled write-in line, the way a name is added to a printed list. */
.bs__index-input[b-nwqfy85xps] {
    width: 100%;
    margin-top: 8px;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid var(--q-ink);
    border-radius: 0;
    background: transparent;
    font-family: var(--q-font-body);
    font-size: 0.85rem;
    color: var(--q-ink);
}

.bs__index-input:focus[b-nwqfy85xps] {
    outline: none;
    border-bottom-color: var(--q-accent-text);
}

.bs__index-empty[b-nwqfy85xps] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--q-ink-faint);
}

.bs__index-list[b-nwqfy85xps] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.bs__index-link[b-nwqfy85xps] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.85rem;
    color: var(--q-ink-muted);
    text-decoration: none;
    transition: color 130ms ease;
}

.bs__index-link:hover[b-nwqfy85xps] {
    color: var(--q-ink);
}

.bs__index-link--on[b-nwqfy85xps] {
    color: var(--q-ink);
    font-weight: 600;
}

.bs__index-link--quiet[b-nwqfy85xps] {
    color: var(--q-ink-faint);
}

.bs__index-label[b-nwqfy85xps] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs__index-dot[b-nwqfy85xps] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* The active entry carries the marker, exactly as a task row does. */
.bs__mark[b-nwqfy85xps] {
    position: relative;
    isolation: isolate;
    color: var(--q-mark-ink);
}

.bs__mark[b-nwqfy85xps]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.06em -0.28em 0.02em -0.2em;
    background: var(--q-accent);
    mix-blend-mode: var(--q-mark-blend);
    clip-path: polygon(0 6%, 100% 0, 99.4% 92%, 0.6% 100%);
    transform: skewX(-3.5deg);
}

.bs__num[b-nwqfy85xps] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
}

.bs__index-rule[b-nwqfy85xps] {
    border-top: 1px solid var(--q-line);
    margin: 14px 0 12px;
}

/* ══ < 1024px — the column folds to a horizontal contents strip ═════════ */
@media (max-width: 1023.98px) {
    /* The index leaves the grid flow and spans both columns, above the page. */
    .bs__index[b-nwqfy85xps] {
        order: 0;
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid var(--q-line);
        padding: 10px 0;
        display: flex;
        align-items: center;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        /* Below 640px the shell stacks its three children in a column flex box,
           where the default `flex-shrink: 1` lets a tall page squeeze this strip
           instead of scrolling the sheet. With `overflow-y: hidden` that squeeze
           is silent — the strip was crushed from 40px to 5px and the navigation
           was clipped to a sliver of its own text. No effect in the 640–1023px
           range, where the shell lays these out as a grid. */
        flex-shrink: 0;
    }

    .bs__index[b-nwqfy85xps]::-webkit-scrollbar { display: none; }

    /* Kickers and rules have no place in a single strip. The add control and its
       write-in line keep theirs, so a list can still be created on a phone. */
    .bs__index .bs__kicker[b-nwqfy85xps],
    .bs__index .bs__index-rule[b-nwqfy85xps],
    .bs__index .bs__index-empty[b-nwqfy85xps] {
        display: none;
    }

    .bs__index-head[b-nwqfy85xps] {
        flex-shrink: 0;
    }

    .bs__index-input[b-nwqfy85xps] {
        width: 9rem;
        margin-top: 0;
        flex-shrink: 0;
    }

    .bs__index-list[b-nwqfy85xps] {
        margin: 0;
        display: flex;
        gap: 16px;
        flex-shrink: 0;
    }

    .bs__index-link[b-nwqfy85xps] {
        padding: 0;
        gap: 6px;
        white-space: nowrap;
    }
}

/* ── The strip as a thumb target ───────────────────────────────────────────
 * Folded into a strip, these links carry the app's whole navigation, and
 * `padding: 0` above leaves each one exactly as tall as its own text — about
 * 20px, less than half what iOS asks of a touch target.
 *
 * The folio's trick of an invisible overlay is no use here: the strip scrolls
 * sideways under `overflow-x: auto` with `overflow-y: hidden`, so anything
 * reaching past a link's box is clipped away. The padding has to be real.
 *
 * Which would make the strip taller — so most of it is taken back off the
 * strip's own padding. 10px + 20px + 10px becomes 2px + 44px + 2px: the links
 * reach the full 44px while the strip grows by only eight.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) and (pointer: coarse) {
    .bs__index[b-nwqfy85xps] {
        padding: 2px 0;
    }

    .bs__index-link[b-nwqfy85xps] {
        padding: 12px 0;
    }
}
/* /Components/Layout/BroadsheetMarginalia.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * Marginalia — the right-hand column of the broadsheet.
 *
 * Everything here is set quieter than the page: these are things standing beside
 * the day, not in it. The rail places itself in the shell's grid (order: 3), so on
 * a phone it drops below the page body and lays its blocks out in a row — a footer
 * band rather than a second page of scrolling. See BroadsheetShell.razor.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

.marginalia[b-fbq35tmrai] {
    order: 3;
    border-left: 1px solid var(--q-line);
    padding: 18px 0 18px 18px;
    min-width: 0;
    overflow-y: auto;
}

.marginalia__kicker[b-fbq35tmrai] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.marginalia__kicker--spaced[b-fbq35tmrai] {
    margin-top: 26px;
}

/* ── Standing By ───────────────────────────────────────────────────────── */
.marginalia__hero[b-fbq35tmrai] {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: inherit;
}

.marginalia__hero-figure[b-fbq35tmrai] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.marginalia__hero-num[b-fbq35tmrai] {
    font-family: var(--q-font-display);
    font-size: 2.9rem;
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.marginalia__hero-unit[b-fbq35tmrai] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

.marginalia__hero-label[b-fbq35tmrai] {
    margin-top: 7px;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--q-ink-muted);
}

.marginalia__mark[b-fbq35tmrai] {
    position: relative;
    isolation: isolate;
    font-weight: 600;
    color: var(--q-mark-ink);
}

.marginalia__mark[b-fbq35tmrai]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.06em -0.26em 0.02em -0.18em;
    background: var(--q-accent);
    mix-blend-mode: var(--q-mark-blend);
    clip-path: polygon(0 6%, 100% 0, 99.4% 92%, 0.6% 100%);
    transform: skewX(-3.5deg);
}

.marginalia__list[b-fbq35tmrai] {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--q-line);
}

.marginalia__list-row[b-fbq35tmrai] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    color: var(--q-ink-muted);
}

.marginalia__list-name[b-fbq35tmrai] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marginalia__list-num[b-fbq35tmrai] {
    color: var(--q-ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── The Tally ─────────────────────────────────────────────────────────── */
.marginalia__tally-group[b-fbq35tmrai] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.marginalia__tally-head[b-fbq35tmrai] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.marginalia__tally-name[b-fbq35tmrai] {
    font-size: 0.84rem;
    color: var(--q-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logged today gets the marker — the same "attended to" signal as a task. */
.marginalia__tally-name--done[b-fbq35tmrai] {
    position: relative;
    isolation: isolate;
    color: var(--q-mark-ink);
}

.marginalia__tally-name--done[b-fbq35tmrai]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.06em -0.24em 0.02em -0.16em;
    background: var(--q-accent);
    mix-blend-mode: var(--q-mark-blend);
    clip-path: polygon(0 6%, 100% 0, 99.4% 92%, 0.6% 100%);
    transform: skewX(-3.5deg);
}

.marginalia__tally-num[b-fbq35tmrai] {
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
    flex-shrink: 0;
}

.marginalia__tally-marks[b-fbq35tmrai] {
    display: block;
    margin-top: 5px;
    max-width: 100%;
}

.marginalia__empty[b-fbq35tmrai] {
    display: block;
    margin-top: 9px;
    font-family: var(--q-font-display);
    font-size: 0.9rem;
    color: var(--q-ink-faint);
    text-decoration: none;
}

.marginalia__empty:hover[b-fbq35tmrai] {
    color: var(--q-ink-muted);
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
.marginalia__chart[b-fbq35tmrai] {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 54px;
}

.marginalia__bar[b-fbq35tmrai] {
    flex: 1;
    background: color-mix(in srgb, var(--q-ink) 15%, transparent);
    min-height: 2px;
}

.marginalia__bar--today[b-fbq35tmrai] {
    background: var(--q-accent);
}

.marginalia__chart-axis[b-fbq35tmrai] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--q-font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.marginalia__chart-axis span[b-fbq35tmrai] {
    flex: 1;
    text-align: center;
}

.marginalia__chart-total[b-fbq35tmrai] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--q-line);
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    color: var(--q-ink-muted);
}

.marginalia__chart-total-num[b-fbq35tmrai] {
    color: var(--q-ink);
}

/* Tracked today — the same mono register as the focus total, but a link out to the
   ledger rather than a standing figure. */
.marginalia__tracked[b-fbq35tmrai] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    text-decoration: none;
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    color: var(--q-ink-muted);
}

.marginalia__tracked:hover .marginalia__tracked-label[b-fbq35tmrai] {
    color: var(--q-accent-text);
}

.marginalia__tracked-num[b-fbq35tmrai] {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

/* ══ Tablet — narrower rail, same stack ═══════════════════════════════ */
@media (max-width: 1023.98px) {
    .marginalia[b-fbq35tmrai] {
        padding: 16px 0 16px 16px;
    }

    .marginalia__hero-num[b-fbq35tmrai] {
        font-size: 2.3rem;
    }
}

/* ══ Phone — a footer band under the agenda ════════════════════════════
   Deliberately a single column, not a grid: the kickers and their content are
   siblings rather than wrapped blocks, so any multi-column grid interleaves
   them (kicker, hero, kicker, tally…) instead of pairing them up. A plain
   stack is the only layout the markup supports without extra wrappers. */
@media (max-width: 639.98px) {
    .marginalia[b-fbq35tmrai] {
        border-left: 0;
        border-top: 1px solid var(--q-line);
        padding: 18px 0 0;
        margin-top: 10px;
        display: block;
        overflow-y: visible;
        /* A flex item in the shell's stacked column here, so it would otherwise
           be shrunk to fit a viewport it is meant to hang below and scroll to. */
        flex-shrink: 0;
    }

    .marginalia__kicker--spaced[b-fbq35tmrai] {
        margin-top: 22px;
    }

    /* The countdown is the one figure worth keeping large on a phone. */
    .marginalia__hero-num[b-fbq35tmrai] {
        font-size: 2.4rem;
    }

    .marginalia__hero-label[b-fbq35tmrai],
    .marginalia__tally-name[b-fbq35tmrai],
    .marginalia__empty[b-fbq35tmrai] {
        font-size: 0.9rem;
    }

    .marginalia__chart[b-fbq35tmrai] {
        height: 46px;
    }
}
/* /Components/Layout/BroadsheetShell.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The broadsheet shell — the app's only layout.
 *
 * This element is the layout root: it owns the viewport, the paper grain and
 * the scroll. There is no top bar and no drawer above it.
 *
 * RESPONSIVE CONTRACT (the whole point of the layout):
 *   >= 1024px  three columns — index | page | marginalia
 *   640-1023px two columns   — page | marginalia; index folds to a scrolling
 *                              chip strip under the masthead
 *   < 640px    one column    — masthead, index strip, page, then marginalia
 *                              last. The page's own business is always
 *                              reachable without scrolling past the furniture.
 * The rails are ordered with `order` rather than hidden, so nothing becomes
 * unreachable on a phone — habits and countdowns still appear, just below.
 * The index and marginalia set their own placement (see their stylesheets);
 * they are separate components, so scoped rules here cannot reach them.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bs[b-z181j1o2wg] {
    /* The folio strip's control height. Declared on the shell root rather than on
       .bs__folio because the strip's contents are separate components (the pills,
       the timer, the bell, the account menu) whose scoped stylesheets cannot see a
       class from this one — but a custom property inherits straight through. */
    --bs-folio-h: 26px;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    min-height: 0;
    /* The frame does not scroll — .bs__sheet inside it does. See the insets below. */
    overflow: hidden;
    background: var(--q-bg);
    /* App.razor ships `viewport-fit=cover` and a black-translucent status bar, so
       the sheet is laid out edge to edge on a phone — behind the Dynamic Island
       and the home indicator as well as into the side gutters. All four insets
       are paid here, on the element that owns the viewport.

       They have to be paid by a frame rather than by the scroller, which is why
       this element gives up the scroll. Padding on a scroll container is part of
       the scrollable area, not a reserved band: it holds the masthead clear of
       the Island at rest and then hands it straight back, because the padding
       scrolls away with everything else. On a phone the whole sheet scrolls, so
       the index strip and the task rows spent the entire scroll passing under
       the clock and the Island — legible paper behind a translucent status bar.
       With the inset outside the scrollport the strip is a real edge: the sheet
       is clipped at it, and nothing is ever half-under the furniture.

       The bottom inset is deliberately NOT paid here — see .bs__sheet. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}

/* The paper itself, and the app's scroll. Everything the shell lays out is in
   here — the masthead included, because on a phone the masthead scrolls too.
 *
 * The two ends of the sheet want opposite treatment, which is why the bottom
 * inset is paid in here and the top one is paid by the frame outside.
 *
 * The top is a hard edge: the status bar is furniture laid over the paper, so
 * anything that reaches it is unreadable, and clipping is the only honest
 * answer. The bottom is not — the home indicator is a hairline, and the sheet
 * should run under it to the edge of the glass the way every other app's does.
 * All the bottom inset owes the reader is the room to bring the last line clear
 * of the indicator, which is exactly what padding on a scroller is: space added
 * to the end of the scrollable content, not a band withheld from the viewport.
 *
 * Paying it on the frame instead cost the height twice over. It shortened the
 * scrollport, so the sheet stopped short of the bottom of the screen and the
 * last inch of the marginalia — the week's focus and the day's tracked time —
 * was hidden behind a strip of blank paper that looked for all the world like
 * the end of the page. */
.bs__sheet[b-z181j1o2wg] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* `mud-theme-dark` rides this element as the app's dark-mode flag: app.css flips the
 * token table on `:root:has(.mud-theme-dark)` and a few of its rules hang off the
 * class as an ancestor. MudBlazor also ships it as a color utility —
 * `.mud-theme-dark{color:…!important;background-color:var(--mud-palette-dark)!important}`
 * — which paints its own dark palette straight over the paper. The night paper has
 * to be restated at the same weight to win it back. */
.bs.mud-theme-dark[b-z181j1o2wg] {
    background: var(--q-bg) !important;
    color: var(--q-ink) !important;
}

/* Newsprint tooth — a whisper of paper texture over the whole sheet. Fixed +
   pointer-events:none so it never blocks interaction; z-index keeps it above
   surfaces but below MudBlazor's popovers and dialogs (~1100+). */
.bs[b-z181j1o2wg]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--q-grain);
    background-size: 140px 140px;
    opacity: var(--q-grain-opacity);
    pointer-events: none;
    z-index: 1;
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
.bs__masthead[b-z181j1o2wg] {
    flex-shrink: 0;
    padding: 14px 24px 0;
}

/* The folio strip carries the app's tools, so it has to stay thin and
   typographic — controls are reduced to mono text and small icons rather than
   the buttons and pills a conventional top bar uses. */
.bs__folio[b-z181j1o2wg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--q-line);
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

/* The only flexible item in the line — the tools are fixed-width — so it absorbs
   whatever width they leave, and ellipsizes rather than pushing them off the edge. */
.bs__folio-brand[b-z181j1o2wg] {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bs__folio-brand:hover[b-z181j1o2wg] {
    color: var(--q-ink-muted);
}

/* Every control in here is cut to --bs-folio-h, so the strip's height is set by its
   own type and not by whichever control happens to be tallest — the account avatar
   ran at 44px and pushed the folio to nearly twice the height it needed. */
.bs__folio-tools[b-z181j1o2wg] {
    display: flex;
    align-items: center;
    height: var(--bs-folio-h);
    gap: 6px;
    flex-shrink: 0;
}

/* Separates the working tools from the account cluster. */
.bs__folio-div[b-z181j1o2wg] {
    width: 1px;
    height: 14px;
    margin: 0 4px;
    background: var(--q-line);
    flex-shrink: 0;
}

.bs__folio-btn[b-z181j1o2wg] {
    display: inline-flex;
    align-items: center;
    height: var(--bs-folio-h);
    gap: 5px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--q-ink-faint);
    transition: color 130ms ease, background-color 130ms ease;
}

.bs__folio-btn:hover[b-z181j1o2wg],
.bs__folio-btn:focus-visible[b-z181j1o2wg] {
    background: var(--q-accent-softer);
    color: var(--q-ink);
    outline: none;
}

/* MudBlazor's own controls sit in this strip; cut them to the folio's height and
   give them the same flat hover the folio's own buttons use, so the ripple
   surfaces stop reading as a second kind of control in one line. */
.bs__folio-tools[b-z181j1o2wg]  .mud-icon-button {
    width: var(--bs-folio-h);
    height: var(--bs-folio-h);
    border-radius: 6px;
    color: var(--q-ink-faint);
}

.bs__folio-tools[b-z181j1o2wg]  .mud-icon-button:hover {
    background: var(--q-accent-softer);
    color: var(--q-ink);
}

.bs__folio-tools[b-z181j1o2wg]  .mud-icon-root {
    font-size: 17px;
}

/* ── Touch targets ─────────────────────────────────────────────────────────
 * The strip is deliberately thin — --bs-folio-h is 26px, and the release that
 * set it there was about the line reading as one piece of furniture rather than
 * a row of controls. That height is a fine mouse target and a poor thumb: iOS
 * asks for 44px, and these are the controls a phone reaches for most.
 *
 * So the target grows without the strip growing. Each control gets a pseudo
 * overlay stretched to 44px vertically, which enlarges what the thumb can hit
 * while the painted control — its hover wash, its focus ring, its place in the
 * line — stays exactly 26px. Vertical only: at 4px of gap on a phone, widening
 * these would have each control stealing the taps meant for its neighbor. The
 * space above and below is the masthead's own padding, so nothing interactive
 * is underneath the overlay.
 *
 * Anchored on pointer:coarse rather than a width, because it is the input that
 * makes the difference — a touch laptop wants this and a small window does not.
 *
 * The controls are listed one by one: `::deep button` would also reach the
 * buttons inside the stopwatch and notification panels, which are descendants
 * of this strip in the DOM but are not part of it.
 * ───────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    .bs__folio-btn[b-z181j1o2wg],
    .bs__folio-tools[b-z181j1o2wg]  .ongoing-pill,
    .bs__folio-tools[b-z181j1o2wg]  .stopwatch__pill,
    .bs__folio-tools[b-z181j1o2wg]  .notif-bell__button,
    .bs__folio-tools[b-z181j1o2wg]  .account-menu__button--compact {
        position: relative;
    }

    /* The bell is the one control here MudBlazor draws, and .mud-button-root
       clips itself to contain the ripple — which would clip the overlay back to
       26px and leave the bell the only small target in the line. The ripple can
       spill; the folio's Mud buttons are already flattened to the strip's own
       hover wash a few rules up, so there is little left of it to see. */
    .bs__folio-tools[b-z181j1o2wg]  .notif-bell__button {
        overflow: visible;
    }

    .bs__folio-btn[b-z181j1o2wg]::after,
    .bs__folio-tools[b-z181j1o2wg]  .ongoing-pill::after,
    .bs__folio-tools[b-z181j1o2wg]  .stopwatch__pill::after,
    .bs__folio-tools[b-z181j1o2wg]  .notif-bell__button::after,
    .bs__folio-tools[b-z181j1o2wg]  .account-menu__button--compact::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        /* Half the shortfall at each edge. min() with 0 so that if the strip is
           ever set taller than 44px this stops at the control's own bounds
           rather than inverting into a target smaller than the control. */
        inset-block: min(0px, calc((var(--bs-folio-h) - 44px) / 2));
    }
}

.bs__mast-row[b-z181j1o2wg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 10px;
}

/* clamp keeps the dateline from wrapping to three lines on a phone while still
   reading as a masthead on a wide screen. */
.bs__date[b-z181j1o2wg] {
    margin: 0;
    font-family: var(--q-font-display);
    font-weight: 600;
    font-size: clamp(1.65rem, 4.4vw, 3.4rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--q-ink);
    text-shadow: var(--q-press);
    min-width: 0;
}

/* A page name is a longer string than a dateline and has no italic clause to
   break it, so it is set a step smaller and allowed to wrap. */
.bs__date--page[b-z181j1o2wg] {
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    overflow-wrap: break-word;
}

.bs__date-the[b-z181j1o2wg],
.bs__date-month[b-z181j1o2wg] {
    font-style: italic;
    font-weight: 400;
}

.bs__date-the[b-z181j1o2wg] {
    color: var(--q-ink-muted);
}

.bs__date-ord[b-z181j1o2wg] {
    font-size: 0.36em;
    vertical-align: super;
    margin-left: -0.06em;
    letter-spacing: 0;
}

.bs__conditions[b-z181j1o2wg] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.bs__condition-label[b-z181j1o2wg] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.bs__condition-num[b-z181j1o2wg] {
    margin-top: 2px;
    font-family: var(--q-font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.bs__condition--alert .bs__condition-label[b-z181j1o2wg],
.bs__condition--alert .bs__condition-num[b-z181j1o2wg] {
    color: var(--pri-high);
}

.bs__condition-rule[b-z181j1o2wg] {
    width: 1px;
    align-self: stretch;
    background: var(--q-line);
}

/* The masthead close: heavy over hair, with a paper gap between. */
.bs__rule-double[b-z181j1o2wg] {
    border-top: 3px solid var(--q-ink);
    border-bottom: 1px solid var(--q-ink);
    height: 4px;
}

/* ── Columns ───────────────────────────────────────────────────────────── */
.bs__cols[b-z181j1o2wg] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr) 252px;
    padding: 0 24px 24px;
}

/* Marginalia stood down: the page takes the whole band beside the index. */
.bs__cols--wide[b-z181j1o2wg] {
    grid-template-columns: 186px minmax(0, 1fr);
}

.bs__page[b-z181j1o2wg] {
    order: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* TasksView fills the page column; ::deep reaches its scoped root. */
.bs__page[b-z181j1o2wg]  .tasks-view {
    flex: 1;
    min-height: 0;
}

/* ══ 640–1023px — index folds to a chip strip, marginalia keeps its column ══ */
@media (max-width: 1023.98px) {
    .bs__cols[b-z181j1o2wg] {
        grid-template-columns: minmax(0, 1fr) 232px;
        /* Pin the strip to its content height. Without this the grid shares the
           column's spare vertical space between both rows and the contents strip
           floats in a band of whitespace under the masthead. */
        grid-template-rows: min-content minmax(0, 1fr);
        padding: 0 18px 20px;
    }

    .bs__cols--wide[b-z181j1o2wg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bs__masthead[b-z181j1o2wg] {
        padding: 12px 18px 0;
    }

    /* The magnifier says it on its own once the strip is competing for width. */
    .bs__folio-btn-text[b-z181j1o2wg] {
        display: none;
    }
}

/* ══ < 640px — single column; page before marginalia ═══════════════════ */
@media (max-width: 639.98px) {
    .bs[b-z181j1o2wg] {
        height: 100dvh;
    }

    .bs__masthead[b-z181j1o2wg] {
        padding: 10px 14px 0;
    }

    /* Tighten the strip so the name survives. The brand is the only flexible item
       in the line — the tools are fixed-width icons — so every pixel of gap comes
       straight out of it, and at 380px that left it ellipsized to "SL…". */
    .bs__folio[b-z181j1o2wg] {
        gap: 8px;
    }

    .bs__folio-tools[b-z181j1o2wg] {
        gap: 4px;
    }

    /* Two clusters is a distinction worth drawing on a desk, not on a phone. */
    .bs__folio-div[b-z181j1o2wg] {
        display: none;
    }

    .bs__cols[b-z181j1o2wg] {
        display: flex;
        flex-direction: column;
        padding: 0 14px 20px;
        /* Content-height, not viewport-height. The base rule's `flex: 1` is a
           `1 1 0%` — a definite height of whatever is left under the masthead —
           and the stack inside is taller than that on any real day, so the grid
           spent the whole page overflowing its own box. The sheet still scrolled,
           because scrollable overflow is measured from the descendants; what it
           lost was its own end padding, which is only applied to content that
           fits the box it was given. The home-indicator inset went with it.
           Growing to fill is still allowed — an empty day should not leave the
           column shorter than the screen — but shrinking below the content is
           what caused this, and nothing here may do it. */
        flex: 1 0 auto;
    }

    .bs__mast-row[b-z181j1o2wg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0 8px;
    }

    /* Conditions become a single mono line rather than three stacked figures. */
    .bs__conditions[b-z181j1o2wg] {
        gap: 14px;
        padding-bottom: 0;
        align-items: center;
    }

    .bs__condition[b-z181j1o2wg] {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .bs__condition-num[b-z181j1o2wg] {
        margin-top: 0;
        font-size: 1.05rem;
    }

    .bs__condition-rule[b-z181j1o2wg] {
        height: 12px;
        align-self: center;
    }

    /* The whole sheet scrolls here, so the column stops scrolling on its own.
       No minimum height: the column used to be floored at 46vh to stop it
       collapsing to a sliver above the marginalia, but flex-shrink below is what
       actually prevents that, and the floor only had an effect in the case it
       was never meant to cover — a short day. One overdue task and the page was
       held open to nearly half the screen, leaving a band of empty paper between
       the last row and the rail. The page is as tall as the page's own business. */
    .bs__page[b-z181j1o2wg] {
        order: 1;
        overflow-y: visible;
        /* The three children stack in a column flex box here, and the default
           shrink factor lets a page taller than the viewport be compressed
           rather than scrolled — its content then runs on over the marginalia
           below, since this column no longer clips. The sheet owns the scroll
           at this width, so nothing in the stack may shrink. */
        flex-shrink: 0;
    }

    /* The desktop rule above gives TasksView the page column's full height to
       scroll inside. On a phone it has to be the other way round — the view is
       as tall as its rows and the sheet scrolls — and this rule outranks the
       component's own stylesheet, so the climbdown has to be granted here. */
    .bs__page[b-z181j1o2wg]  .tasks-view {
        flex: 0 0 auto;
    }
}

/* ══ <= 400px — the smallest phones ════════════════════════════════════ */
@media (max-width: 400px) {
    /* A narrower gutter for the whole masthead. The folio is the line that needs
       it — at 320px the tools want every pixel and the brand, as the only
       flexible item, is what pays — but the dateline and conditions take the
       width just as gladly. */
    .bs__masthead[b-z181j1o2wg] {
        padding: 10px 10px 0;
    }

    /* And the name stops paying: five letters is not what should give way when a
       row is a few pixels over. */
    .bs__folio-brand[b-z181j1o2wg] {
        flex-shrink: 0;
    }
}
/* /Components/Layout/OngoingPill.razor.rz.scp.css */
/* Cut to the folio's height and the broadsheet's own tokens. It used to be drawn
   from --mud-palette-primary while the stopwatch pill an inch away used --q-accent,
   so two pills doing the same job in the same strip were two different colors.
   `font: inherit` takes the strip's mono face; the folio's caps and 0.2em tracking
   do NOT come with it, because the UA sheet resets text-transform and
   letter-spacing on form controls — which is what keeps a task title in the
   reader's own case here while .bs__folio-btn has to ask for caps explicitly. */
.ongoing-pill[b-ucaqftjbdu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--bs-folio-h, 26px);
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--q-accent) 55%, var(--q-line));
    border-radius: 999px;
    background: var(--q-accent-soft);
    color: var(--q-ink);
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ongoing-pill:hover[b-ucaqftjbdu] {
    background: color-mix(in srgb, var(--q-accent) 18%, transparent);
    border-color: var(--q-accent);
}

.ongoing-pill:focus-visible[b-ucaqftjbdu] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 2px;
}

.ongoing-pill__dot[b-ucaqftjbdu] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-accent);
    animation: ongoing-pulse-b-ucaqftjbdu 2s ease-in-out infinite;
}

@keyframes ongoing-pulse-b-ucaqftjbdu {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.ongoing-pill__title[b-ucaqftjbdu] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--q-ink);
}

.ongoing-pill__sep[b-ucaqftjbdu] {
    flex-shrink: 0;
    color: var(--q-ink-faint);
}

/* A step below the title, as it was before the pill shrank — the reading is the
   pill's second voice, not its first. */
.ongoing-pill__remain[b-ucaqftjbdu] {
    flex-shrink: 0;
    color: var(--q-accent-text);
    font-weight: 600;
    font-size: 0.63rem;
    font-variant-numeric: tabular-nums;
}

/* At the narrow topbar breakpoint collapse to dot + time only */
@media (max-width: 980px) {
    .ongoing-pill__title[b-ucaqftjbdu],
    .ongoing-pill__sep[b-ucaqftjbdu] {
        display: none;
    }

    .ongoing-pill[b-ucaqftjbdu] {
        padding: 0 8px;
        gap: 5px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-31tpjbzc22],
.components-reconnect-repeated-attempt-visible[b-31tpjbzc22],
.components-reconnect-failed-visible[b-31tpjbzc22],
.components-pause-visible[b-31tpjbzc22],
.components-resume-failed-visible[b-31tpjbzc22],
.components-rejoining-animation[b-31tpjbzc22] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-retrying[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-failed[b-31tpjbzc22],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-31tpjbzc22] {
    display: block;
}


#components-reconnect-modal[b-31tpjbzc22] {
    background-color: var(--mud-palette-surface, #ffffff);
    color: var(--mud-palette-text-primary, #212121);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-31tpjbzc22 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-31tpjbzc22 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-31tpjbzc22 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-31tpjbzc22]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-31tpjbzc22 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-31tpjbzc22 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-31tpjbzc22 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-31tpjbzc22 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-31tpjbzc22] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-31tpjbzc22] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-31tpjbzc22] {
    border: 0;
    background-color: var(--q-accent-text);
    color: var(--mud-palette-primary-contrast-text, var(--q-accent-ink));
    padding: 6px 24px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

#components-reconnect-modal button:hover[b-31tpjbzc22] {
    opacity: 0.88;
}

#components-reconnect-modal button:active[b-31tpjbzc22] {
    opacity: 0.75;
}

.components-rejoining-animation[b-31tpjbzc22] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-31tpjbzc22] {
        position: absolute;
        border: 3px solid var(--q-accent-text);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-31tpjbzc22 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-31tpjbzc22] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-31tpjbzc22 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Notifications/NotificationsBell.razor.rz.scp.css */
/* Single stable root for Blazor (avoids multi-root fragment issues). Fixed panel stays inside. */
.notif-bell-host[b-ajfy9ry3xx] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notif-bell[b-ajfy9ry3xx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-bell--rail[b-ajfy9ry3xx] {
    width: 44px;
    height: 44px;
}

[b-ajfy9ry3xx] .notif-bell__button--rail {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--mud-palette-text-secondary);
}

[b-ajfy9ry3xx] .notif-bell__button--rail:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.notif-bell__badge[b-ajfy9ry3xx] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    /* Vermilion — unread mail is the one thing on the sheet allowed to alarm.
       The hardcoded #EF5350 it replaces was a stray from the old palette and
       carried white type at 3.49:1. */
    background: var(--pri-high);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* The night edition brightens vermilion to #ff6b4a, where white type drops to
   2.82:1. Same swap the marker makes after dark: ink laid on the fill. */
.mud-theme-dark .notif-bell__badge[b-ajfy9ry3xx] {
    color: var(--q-accent-ink);
}

.notif-panel[b-ajfy9ry3xx] {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    right: 48px;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.notif-panel--rail[b-ajfy9ry3xx] {
    top: auto;
    right: auto;
    bottom: 22px;
    left: 70px;
}

.notif-panel__header[b-ajfy9ry3xx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
}

.notif-panel__header-actions[b-ajfy9ry3xx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-item[b-ajfy9ry3xx] {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background 0.15s;
}

.notif-item:hover[b-ajfy9ry3xx] { background: var(--mud-palette-background); }
.notif-item:last-child[b-ajfy9ry3xx] { border-bottom: none; }

.notif-overlay[b-ajfy9ry3xx] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}
/* /Components/Pages/Admin/AdminClocks.razor.rz.scp.css */
/* Shares the shell of the other admin pages — scoped CSS cannot be inherited between
   components, so the frame is restated here rather than reached for. */

.admin-page[b-wztav70rta] {
    /* Auto side margins turn off a flex item's cross-axis stretch, and the
       shell's page column is a flex column — without a width this sizes to its
       own content and overflows a narrow column sideways. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.admin-page__header[b-wztav70rta] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-page[b-wztav70rta]  .admin-page__header-icon {
    font-size: 1.8rem;
    color: var(--q-accent-text);
}

.admin-page[b-wztav70rta]  .admin-page__header-title {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-wztav70rta]  .admin-page__subtitle {
    color: var(--q-ink-muted);
    margin-bottom: 24px;
    margin-left: 88px;
}

.admin-filters[b-wztav70rta] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}

.admin-page[b-wztav70rta]  .admin-table-paper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--q-line);
}

.admin-page[b-wztav70rta]  .admin-empty-text {
    color: var(--q-ink-muted);
}

.admin-user-cell__name[b-wztav70rta] {
    font-weight: 500;
    font-size: 14px;
}

.admin-user-cell__email[b-wztav70rta] {
    font-size: 12px;
    color: var(--q-ink-muted);
}

/* ── The clock's own reading ──────────────────────────────────────────────── */

/* Tabular so a column of running clocks stays in line as the digits tick over. */
.admin-clock__elapsed[b-wztav70rta] {
    font-family: var(--q-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--q-accent-text);
}

/* Past the reader's own cap. Vermilion is the app's one alarm color and this is
   the case that earns it: every minute beyond the cap is time that will not be
   banked, on a stretch nobody is watching. */
.admin-clock__elapsed--over[b-wztav70rta] {
    color: var(--pri-high);
}

.admin-clock__note[b-wztav70rta] {
    font-size: 12px;
    color: var(--q-ink-muted);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
.admin-page[b-9w8k9hw74y] {
    /* Auto side margins turn off a flex item's cross-axis stretch, and the
       shell's page column is a flex column — without a width this sizes to its
       own content and overflows a narrow column sideways. */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.admin-page__header[b-9w8k9hw74y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.admin-page[b-9w8k9hw74y]  .admin-page__header-icon {
    font-size: 2rem;
    color: var(--q-accent-text);
}

.admin-page[b-9w8k9hw74y]  .admin-page__header-title {
    font-weight: 600;
    margin: 0;
}

/* Cards — hairline + soft lift instead of heavy MudPaper elevation. */
.admin-page[b-9w8k9hw74y]  .admin-stat-card,
.admin-page[b-9w8k9hw74y]  .admin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--q-line);
    background: var(--mud-palette-surface);
    box-shadow: var(--q-shadow-1);
}

.admin-stat-card__row[b-9w8k9hw74y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-page[b-9w8k9hw74y]  .admin-stat-card__icon {
    font-size: 2rem;
}

.admin-page[b-9w8k9hw74y]  .admin-stat-card__value {
    font-family: var(--q-font-display);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.admin-page[b-9w8k9hw74y]  .admin-stat-card__label {
    color: var(--q-ink-faint);
}

.admin-page[b-9w8k9hw74y]  .admin-card__title {
    font-weight: 600;
}

.admin-card__header[b-9w8k9hw74y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.admin-actions[b-9w8k9hw74y] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── The last seven days ──────────────────────────────────────────────────── */

/* A titled rule, so the week's figures read as a second set rather than six more
   of the all-time cards above them. */
.admin-section-head[b-9w8k9hw74y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-section-rule[b-9w8k9hw74y] {
    flex: 1;
    height: 0;
    border-bottom: 1px solid var(--q-line);
}

/* No icon on these — the figure is the point, and a row of icons at this size
   competes with the numbers rather than labeling them. */
.admin-page[b-9w8k9hw74y]  .admin-stat-card--week {
    text-align: left;
}
/* /Components/Pages/Admin/AdminNotifications.razor.rz.scp.css */
.admin-page[b-g3e0fdbtrd] {
    /* Auto side margins turn off a flex item's cross-axis stretch, and the
       shell's page column is a flex column — without a width this sizes to its
       own content and overflows a narrow column sideways. */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.admin-page__header[b-g3e0fdbtrd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-page[b-g3e0fdbtrd]  .admin-page__header-icon {
    font-size: 1.8rem;
    color: var(--q-accent-text);
}

.admin-page[b-g3e0fdbtrd]  .admin-page__header-title {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-g3e0fdbtrd]  .admin-page__subtitle {
    color: var(--q-ink-muted);
    margin-bottom: 28px;
    margin-left: 88px;
}

.admin-page[b-g3e0fdbtrd]  .admin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--q-line);
    background: var(--mud-palette-surface);
    box-shadow: var(--q-shadow-1);
}

.admin-panel-head[b-g3e0fdbtrd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-page[b-g3e0fdbtrd]  .admin-panel-title {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-g3e0fdbtrd]  .admin-panel-note {
    color: var(--q-ink-muted);
    margin-bottom: 20px;
}
/* /Components/Pages/Admin/UserDetail.razor.rz.scp.css */
.admin-page[b-qoo8rh30xz] {
    /* Auto side margins turn off a flex item's cross-axis stretch, and the
       shell's page column is a flex column — without a width this sizes to its
       own content and overflows a narrow column sideways. */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.admin-page__header[b-qoo8rh30xz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-page[b-qoo8rh30xz]  .admin-page__header-icon {
    font-size: 1.8rem;
    color: var(--q-accent-text);
}

.admin-page[b-qoo8rh30xz]  .admin-page__header-title {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-qoo8rh30xz]  .admin-page__subtitle {
    color: var(--q-ink-muted);
    margin-bottom: 24px;
    margin-left: 88px;
}

.admin-page[b-qoo8rh30xz]  .admin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--q-line);
    background: var(--mud-palette-surface);
    box-shadow: var(--q-shadow-1);
}

.admin-page[b-qoo8rh30xz]  .admin-card--table {
    overflow: hidden;
}

.admin-detail-head[b-qoo8rh30xz] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
}

.admin-page[b-qoo8rh30xz]  .admin-detail-name {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-qoo8rh30xz]  .admin-detail-email {
    color: var(--q-ink-muted);
}

.admin-detail-chips[b-qoo8rh30xz] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.admin-detail-id[b-qoo8rh30xz] {
    text-align: right;
}

.admin-page[b-qoo8rh30xz]  .admin-field-label {
    color: var(--q-ink-faint);
}

.admin-page[b-qoo8rh30xz]  .admin-mono {
    font-family: var(--q-font-mono);
    font-size: 12px;
    word-break: break-all;
}

.admin-muted[b-qoo8rh30xz] {
    color: var(--q-ink-muted);
}

.admin-page[b-qoo8rh30xz]  .admin-section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.admin-actions[b-qoo8rh30xz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-page[b-qoo8rh30xz]  .admin-empty-text {
    color: var(--q-ink-muted);
}

.admin-notif-title[b-qoo8rh30xz] {
    font-weight: 500;
}

.admin-notif-body[b-qoo8rh30xz] {
    font-size: 12px;
    color: var(--q-ink-muted);
    max-width: 420px;
}

/* ── Data footprint ───────────────────────────────────────────────────────── */

/* A grid of figures rather than a table: these are twelve unrelated counts, and a
   table would imply they belong in rows together. auto-fill keeps them legible from
   a phone up to the full card width. */
.admin-footprint[b-qoo8rh30xz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 18px 12px;
}

.admin-footprint__num[b-qoo8rh30xz] {
    font-family: var(--q-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.admin-footprint__label[b-qoo8rh30xz] {
    margin-top: 4px;
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

/* A count large enough to be the reason the database is growing. Marked, not alarmed:
   a heavy calendar import is a fact to look into, not a fault. */
.admin-footprint__cell--heavy .admin-footprint__num[b-qoo8rh30xz] {
    color: var(--pri-medium);
}
/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
.admin-page[b-erj5886k56] {
    /* Auto side margins turn off a flex item's cross-axis stretch, and the
       shell's page column is a flex column — without a width this sizes to its
       own content and overflows a narrow column sideways. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.admin-page__header[b-erj5886k56] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-page[b-erj5886k56]  .admin-page__header-icon {
    font-size: 1.8rem;
    color: var(--q-accent-text);
}

.admin-page[b-erj5886k56]  .admin-page__header-title {
    font-weight: 600;
    margin: 0;
}

.admin-page[b-erj5886k56]  .admin-page__subtitle {
    color: var(--q-ink-muted);
    margin-bottom: 24px;
    margin-left: 88px;
}

.admin-filters[b-erj5886k56] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-page[b-erj5886k56]  .admin-search {
    max-width: 400px;
}

.admin-page[b-erj5886k56]  .admin-table-paper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--q-line);
}

.admin-user-cell__name[b-erj5886k56] {
    font-weight: 500;
    font-size: 14px;
}

.admin-user-cell__email[b-erj5886k56] {
    font-size: 12px;
    /* Muted ink at full strength. As a 0.6 wash over the link olive it fell to
       2.53:1 — the secondary line was the faintest type on the page. */
    color: var(--q-ink-muted);
}

.admin-row-actions[b-erj5886k56] {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.admin-page[b-erj5886k56]  .admin-empty-text {
    color: var(--q-ink-muted);
}

/* An account with no recorded sign-in is a fact, not a warning — set it back so the
   column reads as dates with gaps rather than a row of alarms. */
.admin-never[b-erj5886k56] {
    color: var(--q-ink-faint);
    font-style: italic;
}
/* /Components/Pages/CountdownsPage.razor.rz.scp.css */
.countdowns-page[b-tt8jl2rizm] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.countdowns-page__scroll[b-tt8jl2rizm] {
    flex: 1;
    overflow-y: auto;
}

.countdowns-page__header[b-tt8jl2rizm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 18px 22px !important;
}

.countdowns-page__count[b-tt8jl2rizm] {
    margin-top: 5px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--q-ink-muted);
}

.countdowns-page__empty[b-tt8jl2rizm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    gap: 4px;
}

.countdowns-page__empty-text[b-tt8jl2rizm] {
    font-family: var(--q-font-display);
    font-size: 1.05rem;
    color: var(--q-ink-muted);
    margin-top: 10px;
}

.countdowns-grid[b-tt8jl2rizm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    padding: 20px;
}

/* Section heading sits between owned and shared sections — quiet so it doesn't
   compete with the cards themselves. */
.countdowns-section-heading[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 22px 0;
    margin-top: 6px;
    font-family: var(--q-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--q-ink-muted);
}

/* "Shared by X · Editor" sub-line on borrowed cards. */
.countdown-card__shared-by[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--q-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============ Card shell ============ */
.countdown-card[b-tt8jl2rizm] {
    --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-soft: color-mix(in srgb, var(--accent) 6%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);

    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 90%, var(--accent) 5%);
    border-radius: 18px;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent),
        0 6px 22px -10px color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Subtle accent wash so the card carries the user's color without a harsh stripe. */
.countdown-card[b-tt8jl2rizm]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 55%);
    pointer-events: none;
}

/* Top accent — 2px to match sidebar pinned widget */
.countdown-card[b-tt8jl2rizm]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
    opacity: 0.88;
}

.countdown-card:hover[b-tt8jl2rizm] {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent),
        0 14px 36px -12px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

.countdown-card--past[b-tt8jl2rizm] {
    opacity: 0.6;
}

.countdown-card--past[b-tt8jl2rizm]::after {
    background: var(--mud-palette-text-secondary);
    opacity: 0.3;
}

/* ============ Header ============ */
.countdown-card__head[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.countdown-card__icon-wrap[b-tt8jl2rizm] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.countdown-card__icon-wrap[b-tt8jl2rizm]  .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.countdown-card__title-block[b-tt8jl2rizm] {
    flex: 1;
    min-width: 0;
}

.countdown-card__title[b-tt8jl2rizm] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.countdown-card__subtitle[b-tt8jl2rizm] {
    font-size: 0.78rem;
    font-weight: 500;
    /* The card's own color at full strength — dimming it again only cost
       contrast, and how legible this line is already rests on that color. */
    color: var(--accent);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.countdown-card--past .countdown-card__subtitle[b-tt8jl2rizm] {
    color: var(--mud-palette-text-secondary);
}

/* Hide actions until hover/focus so the card reads cleanly at a glance. */
.countdown-card__head-actions[b-tt8jl2rizm] {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.countdown-card:hover .countdown-card__head-actions[b-tt8jl2rizm],
.countdown-card:focus-within .countdown-card__head-actions[b-tt8jl2rizm] {
    opacity: 1;
    transform: translateX(0);
}

.countdown-card__head-actions[b-tt8jl2rizm]  .mud-button-root {
    padding: 4px;
    color: var(--mud-palette-text-secondary);
}

.countdown-card__head-actions[b-tt8jl2rizm]  .mud-button-root:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

/* ============ Number display (no boxes — typography + hairline dividers) ============ */
.countdown-card__display[b-tt8jl2rizm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 6px 0 4px;
    position: relative;
    z-index: 1;
}

.countdown-card__display--allday[b-tt8jl2rizm] {
    grid-template-columns: repeat(3, 1fr);
}

.cd-unit[b-tt8jl2rizm] {
    text-align: center;
    padding: 2px 4px;
    position: relative;
}

/* Hairline vertical divider between adjacent units. */
.cd-unit + .cd-unit[b-tt8jl2rizm]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--mud-palette-lines-default);
    opacity: 0.6;
}

.cd-unit__num[b-tt8jl2rizm] {
    font-size: clamp(1.85rem, 7.2vw, 2.75rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.028em;
    color: var(--mud-palette-text-primary);
}

.cd-unit__label[b-tt8jl2rizm] {
    margin-top: 8px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--q-ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ============ Footer ============ */
.countdown-card__foot[b-tt8jl2rizm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    position: relative;
    z-index: 1;
}

.countdown-card__target[b-tt8jl2rizm] {
    display: inline-flex;
    align-items: center;
}

.countdown-card__repeat[b-tt8jl2rizm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.countdown-card__notes[b-tt8jl2rizm] {
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
    font-size: 0.83rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
    white-space: pre-wrap;
    position: relative;
    z-index: 1;
}

/* ============ Responsive ============ */
@media (max-width: 600px) {
    .countdowns-grid[b-tt8jl2rizm] {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 14px;
    }

    .countdown-card[b-tt8jl2rizm] {
        padding: 18px 18px 16px;
        border-radius: 16px;
    }

    .countdown-card__icon-wrap[b-tt8jl2rizm] {
        width: 34px;
        height: 34px;
    }

    .countdown-card__icon-wrap[b-tt8jl2rizm]  .mud-icon-root {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    .countdown-card__title[b-tt8jl2rizm] {
        font-size: 1rem;
    }

    /* On mobile, always show actions — hover doesn't apply to touch. */
    .countdown-card__head-actions[b-tt8jl2rizm] {
        opacity: 0.85;
        transform: none;
        gap: 2px;
    }

    /* Bump the action-button hit area to ~40px so they're comfortably tappable
       without making the visible glyph any larger. Below the iOS 44px ideal but
       balances against the card's vertical density; pairs with full-card
       hit areas (the row itself doesn't navigate, only the icons). */
    .countdown-card__head-actions[b-tt8jl2rizm]  .mud-button-root {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }

    .cd-unit__label[b-tt8jl2rizm] {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .countdown-card__foot[b-tt8jl2rizm] {
        font-size: 0.74rem;
    }
}

/* Very narrow phones (≤ 360px): collapse the seconds-and-minutes pair into
   a 2×2 layout so each numeral keeps its breathing room. The all-day
   variant stays as 3 columns (only D/H/M anyway). */
@media (max-width: 360px) {
    .countdown-card__display:not(.countdown-card__display--allday)[b-tt8jl2rizm] {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 12px;
    }

    .countdown-card__display:not(.countdown-card__display--allday) .cd-unit + .cd-unit[b-tt8jl2rizm]::before {
        /* Drop hairlines on the wrapped 2×2 — they'd misalign across rows. */
        display: none;
    }

    .countdown-card__display:not(.countdown-card__display--allday) .cd-unit[b-tt8jl2rizm] {
        padding: 6px 0;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Touch devices: drop the lift hover (feels strange on tap). */
    .countdown-card:hover[b-tt8jl2rizm] {
        transform: none;
        box-shadow:
            0 1px 0 color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent),
            0 6px 22px -10px color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
    }

    .countdown-card__head-actions[b-tt8jl2rizm] {
        opacity: 0.85;
        transform: none;
    }
}

/* Dialog */
.cd-dialog-overlay[b-tt8jl2rizm] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cd-dialog[b-tt8jl2rizm] {
    background: var(--q-surface-raised);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--q-shadow-2);
    padding: 20px 22px;
    width: 420px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cd-dialog__header[b-tt8jl2rizm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cd-dialog__row[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cd-dialog__label[b-tt8jl2rizm] {
    font-size: 0.85rem;
    width: 60px;
    color: var(--q-ink-muted);
}

.cd-dialog__input[b-tt8jl2rizm] {
    flex: 1;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-family: inherit;
    min-height: 40px;
    color-scheme: light dark;
}

.cd-dialog__input:focus[b-tt8jl2rizm] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cd-dialog__switches[b-tt8jl2rizm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-color-row[b-tt8jl2rizm] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-color-swatch[b-tt8jl2rizm] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
}

.cd-color-swatch:hover[b-tt8jl2rizm] { transform: scale(1.15); }

.cd-color-swatch--selected[b-tt8jl2rizm] {
    border-color: var(--mud-palette-text-primary);
    transform: scale(1.15);
}

.cd-icon-row[b-tt8jl2rizm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cd-icon-btn[b-tt8jl2rizm] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--mud-palette-action-default-hover);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    padding: 0;
}

.cd-icon-btn:hover[b-tt8jl2rizm] {
    border-color: var(--mud-palette-primary);
}

.cd-icon-btn--selected[b-tt8jl2rizm] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.cd-dialog__error[b-tt8jl2rizm] {
    font-size: 0.8rem;
    color: var(--pri-high);
}

.cd-dialog__footer[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

@media (max-width: 600px) {
    .cd-dialog[b-tt8jl2rizm] {
        padding: 16px;
        border-radius: 10px;
    }

    .cd-dialog__label[b-tt8jl2rizm] {
        width: 50px;
        font-size: 0.8rem;
    }

    .cd-dialog__input[b-tt8jl2rizm] {
        font-size: 16px; /* prevent iOS zoom on focus */
    }
}
/* /Components/Pages/FeedbackPage.razor.rz.scp.css */
/* The feedback page borrows the timesheet's ruled-ledger anatomy: mono kickers,
   dotted leaders, figures hung right. A report is a row, not a card. */

.feedback[b-or9ss7qvu7] {
    /* Reports are prose, so the column is set narrower than the ledger's 900px —
       wide enough for a title and its details, no wider. */
    --fb-measure: 760px;
    /* The shell hands the page column over flush: .bs__page carries no padding of
       its own, so every page sets its own gutters. Without this the page sits
       against the index rule on one side and the edge of the sheet on the other. */
    --fb-gutter: 0px;

    max-width: calc(var(--fb-measure) + var(--fb-gutter) * 2);
    padding: 16px var(--fb-gutter) 56px;
    box-sizing: border-box;
}

/* Only the wide sheet rules a line down the left of the page column; below
   1024px the index is a strip overhead and the shell's own padding is the gutter. */
@media (min-width: 1024px) {
    .feedback[b-or9ss7qvu7] {
        --fb-gutter: 24px;
    }
}

.feedback__lede[b-or9ss7qvu7] {
    margin: 0 0 22px;
    max-width: 56ch;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
}

.feedback__kicker[b-or9ss7qvu7] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    margin: 0 0 8px;
}

.feedback__section[b-or9ss7qvu7] {
    margin-bottom: 26px;
}

/* ── Filing ───────────────────────────────────────────────────────────────── */

.feedback__form[b-or9ss7qvu7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback__form-row[b-or9ss7qvu7] {
    display: flex;
    gap: 8px;
}

.feedback__type[b-or9ss7qvu7] {
    flex: 0 0 auto;
    width: 90px;
}

.feedback__title[b-or9ss7qvu7] {
    flex: 1 1 auto;
    min-width: 0;
}

.feedback__details[b-or9ss7qvu7] {
    resize: vertical;
    min-height: 60px;
    font: inherit;
    font-size: 0.88rem;
}

.feedback__form-actions[b-or9ss7qvu7] {
    display: flex;
    justify-content: flex-end;
}

.feedback__notice[b-or9ss7qvu7] {
    font-size: 0.84rem;
    color: var(--q-accent-text);
}

/* ── The board and the author's own rows ──────────────────────────────────── */

.feedback__group[b-or9ss7qvu7] {
    margin-bottom: 14px;
}

.feedback__group-head[b-or9ss7qvu7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.feedback__count[b-or9ss7qvu7] {
    font-family: var(--q-font-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
}

.feedback__item[b-or9ss7qvu7] {
    padding: 8px 0 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--q-line) 55%, transparent);
}

.feedback__item-head[b-or9ss7qvu7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.feedback__tag[b-or9ss7qvu7] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.feedback__item-title[b-or9ss7qvu7] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--q-ink);
    overflow-wrap: anywhere;
}

.feedback__rule[b-or9ss7qvu7] {
    flex: 1 1 auto;
    min-width: 14px;
    height: 0;
    margin: 0 8px 0.34em;
    border-bottom: 1px dotted var(--q-line);
    align-self: flex-end;
}

.feedback__date[b-or9ss7qvu7] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
}

.feedback__item-details[b-or9ss7qvu7] {
    margin: 4px 0 0;
    max-width: 62ch;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* The admin's word back — set off like a marginal reply, not buried in the body. */
.feedback__item-note[b-or9ss7qvu7] {
    margin: 6px 0 0;
    max-width: 62ch;
    padding: 5px 10px;
    border-left: 2px solid var(--q-accent);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--q-ink);
    background: var(--q-accent-softer);
}

.feedback__empty[b-or9ss7qvu7] {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--q-ink-faint);
}

/* ── Released ─────────────────────────────────────────────────────────────── */

.feedback__release[b-or9ss7qvu7] {
    margin-bottom: 16px;
}

.feedback__release-head[b-or9ss7qvu7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.feedback__version[b-or9ss7qvu7] {
    font-family: var(--q-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.feedback__changes[b-or9ss7qvu7] {
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

.feedback__change[b-or9ss7qvu7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    max-width: 62ch;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

/* The kind sits in its own column so the summaries start on one left edge. */
.feedback__change .feedback__tag[b-or9ss7qvu7] {
    width: 3.2rem;
}

.feedback__closed[b-or9ss7qvu7] {
    margin-top: 5px;
    max-width: 62ch;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--q-ink-faint);
}

/* ── Status chips ─────────────────────────────────────────────────────────── */

.feedback__chip[b-or9ss7qvu7] {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 8px 2px;
    border: 1px solid var(--q-line);
    border-radius: 999px;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
    white-space: nowrap;
}

.feedback__chip--willfix[b-or9ss7qvu7],
.feedback__chip--inprogress[b-or9ss7qvu7] {
    border-color: color-mix(in srgb, var(--q-accent) 55%, var(--q-line));
    background: var(--q-accent-soft);
    color: var(--q-accent-text);
}

.feedback__chip--fixed[b-or9ss7qvu7] {
    border-color: color-mix(in srgb, var(--q-accent) 30%, var(--q-line));
    color: var(--q-accent-text);
}

.feedback__chip--declined[b-or9ss7qvu7] {
    color: var(--q-ink-faint);
}

@media (max-width: 600px) {
    .feedback__form-row[b-or9ss7qvu7] {
        flex-wrap: wrap;
    }

    .feedback__type[b-or9ss7qvu7] {
        width: 100%;
    }
}
/* /Components/Pages/HabitsPage.razor.rz.scp.css */
.habits-page[b-umzl13zxsn] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.habits-page__header[b-umzl13zxsn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.habits-page__empty[b-umzl13zxsn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.habits-page__list[b-umzl13zxsn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.habit-card[b-umzl13zxsn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--q-line);
    background: var(--mud-palette-surface);
}

.habit-card__left[b-umzl13zxsn] {
    display: flex;
    align-items: center;
    flex: 1;
    padding-left: 8px;
}

.habit-card__check[b-umzl13zxsn] {
    margin-right: 4px;
}

.habit-card__info[b-umzl13zxsn] {
    flex: 1;
}

.habit-card__name[b-umzl13zxsn] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.habit-card__freq[b-umzl13zxsn] {
    font-size: 0.78rem;
    color: var(--q-ink-muted);
}

.habits-page__empty-text[b-umzl13zxsn] {
    font-family: var(--q-font-display);
    font-size: 1.05rem;
    color: var(--q-ink-muted);
    margin-top: 10px;
}

.habit-card__heatmap[b-umzl13zxsn] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.habit-heatmap-cell[b-umzl13zxsn] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    opacity: 0.6;
    transition: background 0.2s;
}

.habit-heatmap-cell--logged[b-umzl13zxsn] {
    opacity: 1;
}

/* Dialog */
.habit-dialog-overlay[b-umzl13zxsn] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.habit-dialog[b-umzl13zxsn] {
    background: var(--q-surface-raised);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--q-shadow-2);
    padding: 24px;
    width: 360px;
    max-width: 90vw;
}

.color-swatch[b-umzl13zxsn] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s;
}

.color-swatch:hover[b-umzl13zxsn] { transform: scale(1.15); }

.color-swatch--selected[b-umzl13zxsn] {
    border-color: var(--mud-palette-text-primary);
    transform: scale(1.15);
}
/* /Components/Pages/StatsPage.razor.rz.scp.css */
/* `margin: 0 auto` is what centres this page in a wide column — but auto side
   margins on a flex item switch off the cross-axis stretch it would otherwise
   get, and .bs__page is a flex column. Without a width the page then sizes to
   its own content instead of to the column: on a phone the cards' natural width
   won, the page came out 374px inside a 347px column, and the whole sheet
   picked up a sideways scroll. The width restores the stretch; max-width still
   caps it, and the auto margins still centre it once there is room to spare. */
.stats-page[b-rgozn302dl] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.stats-cards[b-rgozn302dl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.stat-card[b-rgozn302dl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card .mud-icon-root[b-rgozn302dl] {
    font-size: 2rem;
}

.stats-page[b-rgozn302dl]  .stat-card__value {
    font-family: var(--q-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stats-page[b-rgozn302dl]  .stat-card__label {
    color: var(--q-ink-faint);
}

.stats-chart-card[b-rgozn302dl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.stats-page[b-rgozn302dl]  .stats-chart-card__title {
    font-weight: 600;
}
/* /Components/Pages/TimesheetPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   The timesheet is a printed ledger column, not a grid: day headings in the
   display face, entries as ruled rows, and every figure hung right in tabular
   mono so the columns line up down the page. That is why there is no table
   here — the register the broadsheet already speaks does the job, and the app
   has no .q-table primitive yet.

   Four measures hold the page together and are the only numbers worth
   changing: --ts-measure (the column the ledger is set in), --ts-figure (the
   gutter every sum, day total and entry figure hangs in), --ts-time (the clock
   column) and --ts-control-h (the one height every control in the bar shares).
   Sums, day heads and entries all end at the same right edge because they all
   reserve --ts-figure; break that and the columns stop reading as a column.
   ══════════════════════════════════════════════════════════════════════════ */

.timesheet[b-8yr4klpabh] {
    --ts-measure: 900px;
    --ts-figure: 4.6rem;
    --ts-time: 3.4rem;
    --ts-control-h: 36px;
    /* Rows bleed this far past the column so a hover band reads as a ruled
       line in the ledger rather than a floating box. */
    --ts-bleed: 8px;
    /* The shell hands the page column over flush: .bs__page carries no padding
       of its own, so the ledger sets its own gutters. They must stay wider than
       --ts-bleed, or the bled rows cross the index rule on one side and the
       edge of the sheet on the other. */
    --ts-gutter: 0px;

    /* A ledger read across two thousand pixels is a ledger nobody can follow:
       the leader dots stretch, and the eye loses the row on the way to the
       figure. The column is capped at a measure instead. */
    max-width: calc(var(--ts-measure) + var(--ts-gutter) * 2);
    padding: 0 var(--ts-gutter) 56px;
    box-sizing: border-box;
}

/* Only the wide sheet rules a line down the left of the page column; below
   1024px the index is a strip overhead and the shell's own padding is the
   gutter. */
@media (min-width: 1024px) {
    .timesheet[b-8yr4klpabh] {
        --ts-gutter: 24px;
    }
}

/* ── Controls ─────────────────────────────────────────────────────────────── */

.timesheet__bar[b-8yr4klpabh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--q-line);
}

.timesheet__range[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* The four ranges are one control, not four loose chips: a segmented switch
   keeps them on a single baseline with the buttons opposite. */
.timesheet__presets[b-8yr4klpabh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md);
    background: var(--q-surface);
}

.timesheet__preset[b-8yr4klpabh] {
    min-height: calc(var(--ts-control-h) - 6px);
    padding: 6px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: background-color 0.13s, color 0.13s;
}

.timesheet__preset:hover[b-8yr4klpabh] {
    background: color-mix(in srgb, var(--q-ink) 7%, transparent);
    color: var(--q-ink);
}

/* The marker, used the way the sheet uses it everywhere else: a fill under
   dark ink, never chartreuse type. */
.timesheet__preset--on[b-8yr4klpabh],
.timesheet__preset--on:hover[b-8yr4klpabh] {
    background: var(--q-accent);
    color: var(--q-accent-ink);
}

.timesheet__preset:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

/* Stepping the window a week or a month at a time is the move people make
   most; before this it could only be done by editing two dates by hand. */
.timesheet__stepper[b-8yr4klpabh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md);
    background: var(--q-surface);
}

.timesheet__step[b-8yr4klpabh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: background-color 0.13s, color 0.13s;
}

.timesheet__step:hover:not(:disabled)[b-8yr4klpabh] {
    background: color-mix(in srgb, var(--q-ink) 8%, transparent);
    color: var(--q-ink);
}

.timesheet__step:disabled[b-8yr4klpabh] {
    opacity: 0.3;
    cursor: default;
}

.timesheet__step:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

.timesheet__step[b-8yr4klpabh]  .mud-icon-root {
    font-size: 1.15rem;
}

.timesheet__actions[b-8yr4klpabh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* .q-input is sized for a form field; in a toolbar it has to sit on the same
   line as the buttons beside it. */
.timesheet__filter[b-8yr4klpabh] {
    width: auto;
    min-width: 160px;
    min-height: var(--ts-control-h);
    padding: 6px 34px 6px 12px;
    font-size: 0.85rem;
}

.timesheet__actions .q-btn[b-8yr4klpabh] {
    min-height: var(--ts-control-h);
}

.timesheet__custom[b-8yr4klpabh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.timesheet__custom .q-label[b-8yr4klpabh] {
    margin: 0;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.timesheet__date[b-8yr4klpabh] {
    width: auto;
    min-height: var(--ts-control-h);
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* ── The standing figure ──────────────────────────────────────────────────── */

.timesheet__head[b-8yr4klpabh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 24px 0 20px;
}

.timesheet__head-figure[b-8yr4klpabh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.timesheet__total[b-8yr4klpabh] {
    display: block;
    margin: 2px 0 6px;
}

.timesheet__total-num[b-8yr4klpabh] {
    font-family: var(--q-font-display);
    font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--q-ink);
    font-variant-numeric: tabular-nums;
    text-shadow: var(--q-press);
}

.timesheet__total-label[b-8yr4klpabh] {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--q-ink-muted);
}

.timesheet__total-aside[b-8yr4klpabh] {
    margin-top: 5px;
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

/* ── Kickers ──────────────────────────────────────────────────────────────── */

.timesheet__kicker[b-8yr4klpabh] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    margin: 0 0 8px;
}

.timesheet__kicker--spaced[b-8yr4klpabh] {
    margin-top: 26px;
}

.timesheet__section[b-8yr4klpabh] {
    margin-bottom: 8px;
}

/* ── Ruled rows: summary, day heads and entries all share the leader dots ── */

/* The bled rows are a mix of divs and buttons, and the UA gives those two
   different box models. Without this the sums end 16px right of the entries. */
.timesheet__sum-row[b-8yr4klpabh],
.timesheet__entry[b-8yr4klpabh],
.timesheet__day-add[b-8yr4klpabh] {
    box-sizing: border-box;
}

.timesheet__rule[b-8yr4klpabh] {
    flex: 1 1 auto;
    min-width: 14px;
    height: 0;
    margin: 0 8px 0.34em;
    border-bottom: 1px dotted var(--q-line);
    align-self: flex-end;
}

.timesheet__figure[b-8yr4klpabh] {
    font-family: var(--q-font-mono);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--q-ink);
}

.timesheet__figure--day[b-8yr4klpabh] {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Project color is always a mark, never type — the ink stays readable and the
   user's chosen swatch cannot wreck contrast. */
.timesheet__dot[b-8yr4klpabh] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--q-ink) 22%, transparent);
}

/* ── By project ───────────────────────────────────────────────────────────── */

.timesheet__summary[b-8yr4klpabh] {
    display: flex;
    flex-direction: column;
}

/* The share of the range inks the row's own underline in the project's color
   — the figure beside it, drawn, without a second chart to read. */
.timesheet__sum-row[b-8yr4klpabh] {
    position: relative;
    display: grid;
    grid-template-columns: 8px minmax(0, auto) 1fr auto var(--ts-figure);
    align-items: center;
    gap: 0 8px;
    width: calc(100% + var(--ts-bleed) * 2);
    margin: 0 calc(var(--ts-bleed) * -1);
    padding: 8px var(--ts-bleed);
    border-bottom: 1px solid var(--q-line-soft);
}

.timesheet__sum-row[b-8yr4klpabh]::after {
    content: "";
    position: absolute;
    left: var(--ts-bleed);
    bottom: -1px;
    height: 2px;
    width: calc((100% - var(--ts-bleed) * 2) * var(--ts-share, 0) / 100);
    background: var(--ts-tint, var(--q-ink));
    opacity: 0.75;
}

/* The project rows are the way into a project: pressing one pins the ledger to it
   and opens the task breakdown underneath. */
button.timesheet__sum-row[b-8yr4klpabh] {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--q-ink);
    cursor: pointer;
    transition: background-color 0.12s;
}

button.timesheet__sum-row:hover[b-8yr4klpabh] {
    background: color-mix(in srgb, var(--q-ink) 5%, transparent);
}

button.timesheet__sum-row:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: -2px;
}

/* The pinned project wears the marker, the same as the range it is being read over. */
.timesheet__sum-row--on[b-8yr4klpabh] {
    background: var(--q-accent-soft);
}

.timesheet__sum-row--on .timesheet__sum-name[b-8yr4klpabh] {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: var(--q-accent-text);
}

/* A task line carries no swatch of its own — it is all one project's color. */
.timesheet__sum-row--task[b-8yr4klpabh] {
    grid-template-columns: minmax(0, auto) 1fr auto var(--ts-figure);
}

.timesheet__sum-name--loose[b-8yr4klpabh] {
    font-weight: 500;
    font-style: italic;
    color: var(--q-ink-muted);
}

.timesheet__sum-lead[b-8yr4klpabh] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.timesheet__sum-name[b-8yr4klpabh] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--q-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timesheet__sum-client[b-8yr4klpabh] {
    flex-shrink: 0;
    font-size: 0.76rem;
    color: var(--q-ink-faint);
}

.timesheet__share[b-8yr4klpabh] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
}

/* ── The ledger ───────────────────────────────────────────────────────────── */

.timesheet__day[b-8yr4klpabh] {
    margin-top: 28px;
}

/* A weekday with nothing on it is shown, not skipped — a gap the reader can see is a
   gap that gets filled. Muted and tightened so it reads as margin, not as a record. */
.timesheet__day--gap[b-8yr4klpabh] {
    margin-top: 16px;
}

.timesheet__day--gap .timesheet__day-name[b-8yr4klpabh],
.timesheet__day--gap .timesheet__figure--day[b-8yr4klpabh] {
    color: var(--q-ink-faint);
    font-weight: 400;
}

.timesheet__day-head[b-8yr4klpabh] {
    display: grid;
    grid-template-columns: auto auto 1fr var(--ts-figure);
    align-items: baseline;
    padding-bottom: 7px;
    border-bottom: 1.5px solid color-mix(in srgb, var(--q-ink) 30%, var(--q-line));
}

.timesheet__day-name[b-8yr4klpabh] {
    font-family: var(--q-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--q-ink);
}

/* Rendered even when there is no tag, so every day head keeps the same four
   grid columns and the figures stay in one gutter. */
.timesheet__day-tag:empty[b-8yr4klpabh] {
    margin: 0;
}

.timesheet__day-tag[b-8yr4klpabh] {
    margin-left: 10px;
    font-family: var(--q-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--q-accent-text);
}

.timesheet__entry[b-8yr4klpabh] {
    display: grid;
    grid-template-columns: var(--ts-time) 8px minmax(0, 11em) minmax(0, 1fr) var(--ts-figure);
    align-items: center;
    gap: 0 10px;
    width: calc(100% + var(--ts-bleed) * 2);
    margin: 0 calc(var(--ts-bleed) * -1);
    padding: 9px var(--ts-bleed);
    border: none;
    border-bottom: 1px solid var(--q-line-soft);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--q-ink);
    cursor: pointer;
    transition: background-color 0.12s;
}

.timesheet__entry:hover[b-8yr4klpabh] {
    background: color-mix(in srgb, var(--q-ink) 5%, transparent);
}

.timesheet__entry:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: -2px;
}

.timesheet__entry-time[b-8yr4klpabh] {
    font-family: var(--q-font-mono);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-faint);
}

.timesheet__entry-project[b-8yr4klpabh] {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timesheet__entry-lead[b-8yr4klpabh] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.timesheet__entry-note[b-8yr4klpabh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--q-ink-muted);
}

/* Closes each day the way a ruled book does, and saves retyping a date that is
   already on the page. */
.timesheet__day-add[b-8yr4klpabh] {
    display: block;
    width: calc(100% + var(--ts-bleed) * 2);
    margin: 6px calc(var(--ts-bleed) * -1) 0;
    padding: 7px var(--ts-bleed);
    border: 1px dashed var(--q-line);
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.76rem;
    text-align: left;
    color: var(--q-ink-faint);
    cursor: pointer;
    transition: border-color 0.13s, color 0.13s, background-color 0.13s;
}

.timesheet__day-add:hover[b-8yr4klpabh] {
    border-color: color-mix(in srgb, var(--q-accent) 55%, var(--q-line));
    background: var(--q-accent-softer);
    color: var(--q-ink);
}

.timesheet__day-add:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

.timesheet__day-add-mark[b-8yr4klpabh] {
    margin-right: 8px;
    font-family: var(--q-font-mono);
}

/* ── Nothing to show ──────────────────────────────────────────────────────── */

.timesheet__empty[b-8yr4klpabh] {
    margin-top: 4px;
    padding: 34px 28px;
    border: 1.5px dashed var(--q-line);
    border-radius: var(--radius-lg);
    background: var(--q-surface);
    text-align: center;
}

.timesheet__empty-head[b-8yr4klpabh] {
    margin: 0 0 6px;
    font-family: var(--q-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--q-ink);
}

.timesheet__empty-body[b-8yr4klpabh] {
    max-width: 46ch;
    margin: 0 auto 18px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

.timesheet__empty-actions[b-8yr4klpabh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* ── Dialogs ──────────────────────────────────────────────────────────────── */

.ts-dialog-overlay[b-8yr4klpabh] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, #16140f 55%, transparent);
    overflow-y: auto;
}

.ts-dialog[b-8yr4klpabh] {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md, 6px);
    background: var(--q-surface-raised);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.ts-dialog--wide[b-8yr4klpabh] {
    max-width: 560px;
}

.ts-dialog__header[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--q-line-soft);
}

.ts-dialog__row[b-8yr4klpabh] {
    display: flex;
    gap: 12px;
}

.ts-dialog__col[b-8yr4klpabh] {
    flex: 1 1 0;
    min-width: 0;
}

.ts-dialog__check[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--q-ink-muted);
    cursor: pointer;
}

.ts-dialog__footer[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--q-line-soft);
}

.ts-dialog__spacer[b-8yr4klpabh] {
    flex: 1;
}

.ts-projects[b-8yr4klpabh] {
    display: flex;
    flex-direction: column;
}

.ts-project-row[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.ts-project-row__name[b-8yr4klpabh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--q-ink);
}

.ts-project-row__fixed[b-8yr4klpabh] {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--q-ink-faint);
}

.ts-project-row__select[b-8yr4klpabh] {
    width: auto;
    min-width: 140px;
    flex-shrink: 0;
    min-height: var(--ts-control-h, 36px);
    padding: 6px 34px 6px 12px;
    font-size: 0.85rem;
}

.ts-project-form[b-8yr4klpabh] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--q-line);
}

.ts-hint[b-8yr4klpabh] {
    margin: 0 0 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--q-ink-faint);
}

.ts-color-row[b-8yr4klpabh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The native color input, dressed as a disc. The default UA chrome is a small
   rounded rectangle with padding; strip it back so the color itself is the
   control and it reads as something to press. */
.ts-color-pick[b-8yr4klpabh] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid var(--q-line);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.ts-color-pick:focus-visible[b-8yr4klpabh] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 2px;
}

.ts-color-pick[b-8yr4klpabh]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.ts-color-pick[b-8yr4klpabh]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.ts-color-pick[b-8yr4klpabh]::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

/* The hex, so the disc is not the only account of what was chosen. */
.ts-color-value[b-8yr4klpabh] {
    font-family: var(--q-font-mono);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-muted);
}

.mb-2[b-8yr4klpabh] { margin-bottom: 8px; }
.mb-3[b-8yr4klpabh] { margin-bottom: 14px; }
.mt-2[b-8yr4klpabh] { margin-top: 8px; }

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .timesheet[b-8yr4klpabh] {
        --ts-figure: 4rem;
        --ts-time: 3rem;
        --ts-bleed: 2px;
    }

    .timesheet__bar[b-8yr4klpabh] {
        align-items: stretch;
    }

    /* Four segments will not fit on one line; wrapping keeps every range
       visible, which a horizontal scroller does not. */
    .timesheet__range[b-8yr4klpabh] {
        flex: 1 1 100%;
    }

    .timesheet__presets[b-8yr4klpabh] {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .timesheet__preset[b-8yr4klpabh] {
        flex: 1 1 auto;
        text-align: center;
    }

    .timesheet__actions[b-8yr4klpabh] {
        width: 100%;
    }

    .timesheet__filter[b-8yr4klpabh] {
        flex: 1 1 140px;
        min-width: 0;
    }

    .timesheet__head[b-8yr4klpabh] {
        align-items: flex-start;
    }

    /* The note is the first thing to go: the clock, the project and the figure
       are what a phone-sized ledger is read for. */
    .timesheet__entry[b-8yr4klpabh] {
        grid-template-columns: var(--ts-time) 8px minmax(0, 1fr) var(--ts-figure);
    }

    .timesheet__entry-lead[b-8yr4klpabh] {
        display: none;
    }

    .timesheet__sum-row[b-8yr4klpabh] {
        grid-template-columns: 8px minmax(0, 1fr) auto var(--ts-figure);
    }

    .timesheet__sum-row--task[b-8yr4klpabh] {
        grid-template-columns: minmax(0, 1fr) auto var(--ts-figure);
    }

    .timesheet__sum-row .timesheet__rule[b-8yr4klpabh] {
        display: none;
    }

    .ts-dialog__row[b-8yr4klpabh] {
        flex-wrap: wrap;
    }
}
/* /Components/Pomodoro/PomodoroTimer.razor.rz.scp.css */
.pomodoro-timer[b-ny2wepgklo] {
    display: flex;
    align-items: center;
    position: relative;
}

.pomodoro-timer__btn[b-ny2wepgklo] {
    font-variant-numeric: tabular-nums;
}

.pomodoro-panel[b-ny2wepgklo] {
    position: fixed;
    top: 52px;
    right: 8px;
    width: 280px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pomodoro-panel__header[b-ny2wepgklo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pomodoro-panel__modes[b-ny2wepgklo] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pomodoro-panel__display[b-ny2wepgklo] {
    text-align: center;
}

.pomodoro-panel__time[b-ny2wepgklo] {
    font-size: 3rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 8px;
}

.pomodoro-panel__progress[b-ny2wepgklo] {
    height: 4px;
    background: var(--mud-palette-lines-default);
    border-radius: 2px;
    overflow: hidden;
}

.pomodoro-panel__progress-bar[b-ny2wepgklo] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.9s linear;
}

.pomodoro-panel__controls[b-ny2wepgklo] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.pomodoro-panel__sessions[b-ny2wepgklo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

@media (max-width: 767.98px) {
    .pomodoro-panel[b-ny2wepgklo] {
        top: calc(52px + env(safe-area-inset-top, 0px) + 8px);
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .pomodoro-panel__modes[b-ny2wepgklo] {
        justify-content: center;
    }

    .pomodoro-panel__modes[b-ny2wepgklo]  .mud-chip {
        min-height: 40px;
    }

    .pomodoro-panel__controls[b-ny2wepgklo]  .mud-button-root {
        min-height: 44px;
    }
}
/* /Components/Sharing/CountdownShareDialog.razor.rz.scp.css */
.share-dialog-overlay[b-wam71r851o] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-dialog[b-wam71r851o] {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 24px;
    width: 460px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
}

.share-member-row[b-wam71r851o] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.share-member-row:last-child[b-wam71r851o] {
    border-bottom: none;
}
/* /Components/Sharing/ShareDialog.razor.rz.scp.css */
.share-dialog-overlay[b-yoke987blg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-dialog[b-yoke987blg] {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 24px;
    width: 460px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
}

.share-member-row[b-yoke987blg] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.share-member-row:last-child[b-yoke987blg] {
    border-bottom: none;
}
/* /Components/Tasks/DueDateEditorPopover.razor.rz.scp.css */
.due-date-editor-wrap[b-jtfy9fqbow] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Wraps popover content + sub-panels so reminder/repeat render in the MudPopoverProvider layer
   (above mobile task sheet z-index 1200). */
.date-popover-portal-inner[b-jtfy9fqbow] {
    position: relative;
    isolation: isolate;

    /* The accent lives here, not on .date-popover, because the Reminder and Repeat
       panels are siblings of the editor rather than children of it. Declared one level
       down, `var(--popover-accent)` resolved to nothing in those panels, and their OK
       button lost its fill — dark ink on no background, which read as a black slab. */
    --popover-accent: var(--q-accent);
    --popover-accent-text: var(--q-accent-text);
}

.date-popover-dismiss[b-jtfy9fqbow] {
    position: fixed;
    inset: 0;
    z-index: 1390;
    background: transparent;
}
/*
 * Date UI: full overlay over the task body. Fully theme-aware — light in light mode, dark in dark mode.
 */
.date-popover[b-jtfy9fqbow] {
    /* --popover-accent and --popover-accent-text are inherited from the portal wrapper
       above, so the sub-panels get them too. The marker is for fills only: laid on type
       or a glyph it measures 1.22:1 against this surface, which is why anything that has
       to be read takes --popover-accent-text (5.11:1) instead. See rule 1 in the token
       header of app.css. */
    margin: 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
    width: min(428px, calc(100vw - 32px));
    max-width: 340px;
    align-self: flex-start;

    /* Anchored to the row, this ran off the bottom of the window whenever the row
       sat low enough — and the footer, with it, so there was no way to hit OK.
       A max-height can't fix that on its own: it has no idea how far down the
       anchor is. So the editor is centred in the window instead, the way the
       Reminder and Repeat panels already are, and is capped to what the window
       can actually show. Phones override this back to a bottom sheet below. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1400;
    max-height: calc(100dvh - 64px);
    overscroll-behavior: contain;
}

/* Whatever the body does, Clear and OK stay on screen. */
.date-popover__footer[b-jtfy9fqbow] {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
}

.date-popover__tabs[b-jtfy9fqbow] {
    display: flex;
    margin: 12px 14px 0;
    padding: 4px;
    gap: 2px;
    border-radius: 10px;
    background: var(--mud-palette-background);
    box-sizing: border-box;
}

.date-popover__tab[b-jtfy9fqbow] {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: Roboto, -apple-system, sans-serif;
    cursor: pointer;
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.date-popover__tab--active[b-jtfy9fqbow] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.date-popover__quick[b-jtfy9fqbow] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 14px 6px;
}

.date-popover__quick-btn[b-jtfy9fqbow] {
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 10px !important;
}

.date-popover__quick-btn:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover) !important;
}

.date-popover__quick-btn--week[b-jtfy9fqbow] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.date-popover__quick-btn--week:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover);
}

.date-popover__quick-week-icon[b-jtfy9fqbow] {
    color: var(--mud-palette-text-secondary) !important;
}

.date-popover__quick-plus[b-jtfy9fqbow] {
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-left: -2px;
    transform: translateY(1px);
}

.date-popover__calendar[b-jtfy9fqbow] {
    background: transparent !important;
    width: 100%;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-static,
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-inline-paper,
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-content,
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-container,
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-datepicker {
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-header {
    padding-left: 8px;
    padding-right: 8px;
}

/* Calendar month header + weekdays */
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-header-switch .mud-button-root.mud-icon-button {
    color: var(--mud-palette-text-primary) !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-header-switch .mud-button-root:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-header-transition .mud-typography {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary) !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar-header-day .mud-day-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary) !important;
}

/* Adjacent-month cells: show as muted */
.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar .mud-day.mud-hidden {
    opacity: 0.38 !important;
    pointer-events: auto !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar .mud-day:not(.mud-selected) .mud-typography {
    color: var(--mud-palette-text-primary);
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
    border-radius: 50% !important;
}

.date-popover__calendar[b-jtfy9fqbow]  .mud-picker-calendar .mud-day.mud-selected {
    border-radius: 50% !important;
    font-weight: 600 !important;
}

.date-popover__row[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: Roboto, -apple-system, sans-serif;
    text-align: left;
    border-top: 1px solid var(--mud-palette-divider);
}

.date-popover__row--submenu[b-jtfy9fqbow] {
    min-height: 48px;
}

.date-popover__row-icon[b-jtfy9fqbow] {
    flex-shrink: 0;
}

.date-popover__row--submenu[b-jtfy9fqbow]  .date-popover__row-icon {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 1 !important;
}

.date-popover__row--submenu[b-jtfy9fqbow]  .date-popover__row-icon--accent {
    color: var(--popover-accent-text) !important;
    opacity: 1 !important;
}

.date-popover__row--active[b-jtfy9fqbow] {
    background: rgba(74, 138, 232, 0.06);
}

.date-popover__row--active:hover[b-jtfy9fqbow] {
    background: rgba(74, 138, 232, 0.12);
}

.date-popover__row-center[b-jtfy9fqbow] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.date-popover__row-center--accent[b-jtfy9fqbow] {
    color: var(--popover-accent-text);
}

.date-popover__row-center--muted[b-jtfy9fqbow] {
    color: var(--mud-palette-text-secondary);
}

.date-popover__row-center--white[b-jtfy9fqbow] {
    color: var(--mud-palette-text-primary);
}

.date-popover__row-chevron[b-jtfy9fqbow] {
    flex-shrink: 0;
}

.date-popover__row--submenu[b-jtfy9fqbow]  .date-popover__row-chevron {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 1 !important;
}

.date-popover__row--submenu[b-jtfy9fqbow]  .date-popover__row-chevron--accent {
    color: var(--popover-accent-text) !important;
    opacity: 1 !important;
}

.date-popover__time-wrap[b-jtfy9fqbow] {
    padding: 8px 16px 14px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

/* List-style time picker */
.time-slot-picker[b-jtfy9fqbow] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-slot-picker__field[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
}

.time-slot-picker__field-icon[b-jtfy9fqbow] {
    flex-shrink: 0;
    opacity: 0.55;
    color: var(--mud-palette-text-secondary) !important;
}

.time-slot-picker__field-value[b-jtfy9fqbow] {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--popover-accent);
    letter-spacing: 0.02em;
}

.time-slot-picker__field-placeholder[b-jtfy9fqbow] {
    flex: 1;
    font-size: 0.95rem;
    opacity: 0.35;
    color: var(--mud-palette-text-secondary);
}

.time-slot-picker__field-input[b-jtfy9fqbow] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.02em;
    caret-color: var(--popover-accent);
}

.time-slot-picker__field-input--set[b-jtfy9fqbow] {
    font-weight: 500;
    color: var(--popover-accent);
}

.time-slot-picker__field-input[b-jtfy9fqbow]::placeholder {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    opacity: 0.35;
}

.time-slot-picker__clear[b-jtfy9fqbow] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.time-slot-picker__clear:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.time-slot-picker__list[b-jtfy9fqbow] {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
}

.time-slot-picker__item[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-secondary);
    text-align: left;
}

.time-slot-picker__item:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.time-slot-picker__item--selected[b-jtfy9fqbow] {
    color: var(--popover-accent);
}

.time-slot-picker__item--selected:hover[b-jtfy9fqbow] {
    color: var(--popover-accent);
}

.time-slot-picker__check[b-jtfy9fqbow] {
    flex-shrink: 0;
    color: var(--popover-accent) !important;
    opacity: 1 !important;
}

.date-popover__footer[b-jtfy9fqbow] {
    display: flex;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.date-popover__footer-btn[b-jtfy9fqbow] {
    flex: 1;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.date-popover__footer-btn--clear[b-jtfy9fqbow] {
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-primary);
}

.date-popover__footer-btn--clear:hover[b-jtfy9fqbow] {
    border-color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.date-popover__footer-btn--ok[b-jtfy9fqbow] {
    border: none;
    background: var(--popover-accent);
    color: var(--q-accent-ink);
    box-shadow: none;
}

.date-popover__footer-btn--ok:hover[b-jtfy9fqbow] {
    filter: brightness(1.06);
}

.date-popover__footer-btn--ok:active[b-jtfy9fqbow] {
    filter: brightness(0.97);
}

/* Duration tab: live block preview (read-only) */
/* The footer sits below this now, so the tab no longer owns the bottom inset. */
.date-popover__duration-wrap[b-jtfy9fqbow] {
    padding: 12px 14px 16px;
    box-sizing: border-box;
}

.duration-preview-card[b-jtfy9fqbow] {
    --duration-accent: var(--pri-low);
    --duration-accent-dim: color-mix(in srgb, var(--pri-low) 40%, transparent);
    --duration-track: rgba(255, 255, 255, 0.12);
    --duration-text: rgba(255, 255, 255, 0.92);
    --duration-muted: rgba(255, 255, 255, 0.55);
    --duration-border: rgba(148, 163, 184, 0.28);

    border-radius: 14px;
    padding: 14px 14px 16px;
    border: 1px solid var(--duration-border);
    background: linear-gradient(115deg, #241f1a 0%, #17140f 48%, #100e0c 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    min-width: 0;
}

.duration-preview-card--empty[b-jtfy9fqbow] {
    background: linear-gradient(115deg, #241f1a 0%, #14120f 100%);
}

.duration-preview-card--ended[b-jtfy9fqbow] {
    --duration-accent: rgba(148, 163, 184, 0.55);
    --duration-accent-dim: rgba(148, 163, 184, 0.25);
}

.duration-preview-card__header[b-jtfy9fqbow] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
}

.duration-preview-card__header--solo[b-jtfy9fqbow] {
    margin-bottom: 0;
}

.duration-preview-card__status[b-jtfy9fqbow] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--duration-text);
    font-family: Roboto, -apple-system, sans-serif;
}

.duration-preview-card__meta[b-jtfy9fqbow] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--duration-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    max-width: 100%;
    line-height: 1.35;
}

.duration-preview-card__divider[b-jtfy9fqbow] {
    height: 1px;
    margin: 12px 0 14px;
    background: rgba(255, 255, 255, 0.08);
}

.duration-preview-card__body[b-jtfy9fqbow] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}

.duration-preview-card__check[b-jtfy9fqbow] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 5px;
    border: 2px solid var(--duration-muted);
    box-sizing: border-box;
}

.duration-preview-card__title[b-jtfy9fqbow] {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--duration-text);
    font-family: Roboto, -apple-system, sans-serif;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.duration-preview-card__track-wrap[b-jtfy9fqbow] {
    margin-bottom: 8px;
}

.duration-preview-card__track[b-jtfy9fqbow] {
    height: 6px;
    border-radius: 999px;
    background: var(--duration-track);
    overflow: hidden;
}

.duration-preview-card__fill[b-jtfy9fqbow] {
    height: 100%;
    border-radius: 999px;
    min-width: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pri-low) 72%, white) 0%, var(--duration-accent) 55%, color-mix(in srgb, var(--pri-low) 82%, black) 100%);
    box-shadow: 0 0 12px var(--duration-accent-dim);
    transition: width 0.25s ease;
}

.duration-preview-card--ended .duration-preview-card__fill[b-jtfy9fqbow] {
    box-shadow: none;
    background: var(--duration-accent);
}

.duration-preview-card__times[b-jtfy9fqbow] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--duration-muted);
    font-variant-numeric: tabular-nums;
    font-family: Roboto, -apple-system, sans-serif;
}

.duration-preview-card__empty-text[b-jtfy9fqbow] {
    margin: 0 0 4px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--duration-muted);
    font-family: Roboto, -apple-system, sans-serif;
    text-align: left;
}

/* Block length: the preview card shows the result, these set it. */
.duration-picker[b-jtfy9fqbow] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.duration-picker__chip[b-jtfy9fqbow] {
    min-height: 38px;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.duration-picker__chip:hover:not(:disabled)[b-jtfy9fqbow] {
    border-color: var(--popover-accent);
    background: color-mix(in srgb, var(--popover-accent) 10%, transparent);
}

.duration-picker__chip--selected[b-jtfy9fqbow] {
    border-color: var(--popover-accent);
    background: var(--popover-accent);
    color: var(--q-accent-ink);
}

.duration-picker__chip--selected:hover:not(:disabled)[b-jtfy9fqbow] {
    background: var(--popover-accent);
    color: var(--q-accent-ink);
}

.duration-picker__chip:disabled[b-jtfy9fqbow] {
    opacity: 0.35;
    cursor: default;
}

.duration-picker__note[b-jtfy9fqbow] {
    margin: 10px 2px 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    font-family: Roboto, -apple-system, sans-serif;
}

@media (max-width: 767.98px) {
    .duration-picker[b-jtfy9fqbow] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .duration-picker__chip[b-jtfy9fqbow] {
        min-height: 44px;
        font-size: 0.85rem;
    }
}

/* ── Reminder sub-panel ─────────────────────────────── */
.reminder-overlay[b-jtfy9fqbow] {
    position: fixed;
    inset: 0;
    z-index: 1500;
}

/* The bar at the top of a sheet. Only drawn on phones, where the panel is a
   sheet rather than a centered dialog. */
.reminder-panel__grip[b-jtfy9fqbow] {
    display: none;
}

/* Chosen reminders, as chips you can take back off with one tap. */
.reminder-panel__chosen[b-jtfy9fqbow] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    min-height: 20px;
}

.reminder-panel__chosen-empty[b-jtfy9fqbow] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
    font-family: Roboto, -apple-system, sans-serif;
}

.reminder-chip[b-jtfy9fqbow] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 6px 0 10px;
    border: 1px solid color-mix(in srgb, var(--popover-accent) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--popover-accent) 12%, transparent);
    color: var(--popover-accent);
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.12s;
}

.reminder-chip:hover[b-jtfy9fqbow] {
    background: color-mix(in srgb, var(--popover-accent) 22%, transparent);
}

.reminder-chip[b-jtfy9fqbow]  .reminder-chip__x {
    font-size: 15px !important;
    opacity: 0.8;
}

/* The options list scrolls on its own so the sheet's header and footer stay put.
   `contain` is what stops a flick at the end of the list dragging the sheet. */
.reminder-panel__scroll[b-jtfy9fqbow] {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* The checkbox in front of each preset — this is the affordance that says
   "more than one of these can be on at a time". */
.reminder-panel__box[b-jtfy9fqbow] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--mud-palette-text-secondary);
    opacity: 0.55;
    box-sizing: border-box;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

.reminder-panel__box--on[b-jtfy9fqbow] {
    background: var(--popover-accent);
    border-color: var(--popover-accent);
    opacity: 1;
}

.reminder-panel__option[b-jtfy9fqbow]  .reminder-panel__box-check {
    font-size: 15px !important;
    color: var(--q-accent-ink) !important;
}

.reminder-panel__option-label[b-jtfy9fqbow] {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.reminder-panel__custom-add[b-jtfy9fqbow] {
    margin-left: auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--popover-accent) 45%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--popover-accent);
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
}

.reminder-panel__custom-add:hover:not(:disabled)[b-jtfy9fqbow] {
    background: color-mix(in srgb, var(--popover-accent) 14%, transparent);
}

.reminder-panel__custom-add:disabled[b-jtfy9fqbow] {
    opacity: 0.4;
    cursor: default;
}

.reminder-panel[b-jtfy9fqbow] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1510;
    width: 300px;
    max-height: calc(100dvh - 96px);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reminder-panel__header[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
}

.reminder-panel__header-icon[b-jtfy9fqbow] {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.7;
}

.reminder-panel__title[b-jtfy9fqbow] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.01em;
}

.reminder-panel__close[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}

.reminder-panel__close:hover[b-jtfy9fqbow] {
    opacity: 1;
    background: var(--mud-palette-action-default-hover);
}

.reminder-panel__divider[b-jtfy9fqbow] {
    height: 1px;
    background: var(--mud-palette-divider);
}

.reminder-panel__option[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: Roboto, -apple-system, sans-serif;
    font-weight: 400;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.reminder-panel__option:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover);
}

.reminder-panel__option--radio[b-jtfy9fqbow] {
    justify-content: space-between;
}

.reminder-panel__option--selected[b-jtfy9fqbow] {
    color: var(--popover-accent);
    font-weight: 500;
}

.reminder-panel__check[b-jtfy9fqbow] {
    flex-shrink: 0;
    color: var(--popover-accent) !important;
}

.reminder-panel__custom-row[b-jtfy9fqbow] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 12px;
}

.reminder-panel__custom-input[b-jtfy9fqbow] {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-family: Roboto, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.15s;
}

.reminder-panel__custom-input:focus[b-jtfy9fqbow] {
    border-color: var(--popover-accent);
}

.reminder-panel__custom-label[b-jtfy9fqbow] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    font-family: Roboto, -apple-system, sans-serif;
}

.reminder-panel__footer[b-jtfy9fqbow] {
    display: flex;
    gap: 10px;
    padding: 12px 16px 14px;
}

.reminder-panel__btn[b-jtfy9fqbow] {
    flex: 1;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, filter 0.15s;
}

.reminder-panel__btn--cancel[b-jtfy9fqbow] {
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-primary);
}

.reminder-panel__btn--cancel:hover[b-jtfy9fqbow] {
    background: var(--mud-palette-action-default-hover);
}

.reminder-panel__btn--ok[b-jtfy9fqbow] {
    border: none;
    background: var(--popover-accent);
    color: var(--q-accent-ink);
}

.reminder-panel__btn--ok:hover[b-jtfy9fqbow] {
    filter: brightness(1.07);
}

/* ── Phones: the editor is a sheet, not a popover ────────────────────────────
 *
 * Anchored to a task row, this thing had nowhere to go on a narrow screen: it was
 * pinned to 340px however much room there was, it opened wherever the row happened
 * to be, and its Reminder and Repeat panels landed as a small box floating over the
 * middle of it. Below 768px it now comes up from the bottom edge at full width, and
 * the sub-panels come up over it the same way — one thing at a time, always in the
 * same place, always within reach of a thumb.
 */
@media (max-width: 767.98px) {
    .date-popover[b-jtfy9fqbow] {
        position: fixed;
        z-index: 1400;
        inset: auto 0 0 0;
        /* Undo the desktop centring, or the sheet sits half off the bottom edge. */
        transform: none;
        width: auto;
        /* The 340px cap is what made the old mobile width rule a no-op. */
        max-width: none;
        max-height: 88dvh;
        align-self: stretch;
        border: none;
        border-top: 1px solid var(--mud-palette-divider);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior: contain;
    }

    /* Sheets get a grip: it reads as "this came up from the bottom". */
    .date-popover[b-jtfy9fqbow]::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: 999px;
        background: var(--mud-palette-text-secondary);
        opacity: 0.28;
    }

    .date-popover__tabs[b-jtfy9fqbow] {
        margin-top: 8px;
    }

    /* Roomier targets, now that there is room for them. */
    .date-popover__row--submenu[b-jtfy9fqbow] {
        min-height: 54px;
    }

    .date-popover__footer-btn[b-jtfy9fqbow] {
        min-height: 48px;
    }

    /* The 48-slot time list sits inside a sheet that also scrolls. Containing the
       scroll is what stops a flick through the times from dragging the sheet. */
    .time-slot-picker__list[b-jtfy9fqbow] {
        max-height: 40dvh;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .time-slot-picker__item[b-jtfy9fqbow] {
        min-height: 44px;
    }

    /* Reminder and Repeat: sub-sheets over the sheet, same edge, same shape. */
    .reminder-panel[b-jtfy9fqbow] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        max-height: 82dvh;
        border: none;
        border-top: 1px solid var(--mud-palette-divider);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.32);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .reminder-overlay[b-jtfy9fqbow] {
        background: rgba(0, 0, 0, 0.32);
    }

    /* A sheet needs something behind it, or the page reads as still being in play. */
    .date-popover-dismiss[b-jtfy9fqbow] {
        background: rgba(0, 0, 0, 0.32);
    }

    .reminder-panel__grip[b-jtfy9fqbow] {
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: var(--mud-palette-text-secondary);
        opacity: 0.28;
    }

    .reminder-panel__option[b-jtfy9fqbow] {
        min-height: 54px;
    }

    .reminder-chip[b-jtfy9fqbow] {
        min-height: 34px;
    }

    .reminder-panel__btn[b-jtfy9fqbow] {
        min-height: 48px;
    }

    .reminder-panel__custom-input[b-jtfy9fqbow] {
        /* Anything under 16px makes iOS Safari zoom the page on focus. */
        font-size: 16px;
    }

    .reminder-panel__custom-add[b-jtfy9fqbow] {
        min-height: 40px;
    }
}
/* /Components/Tasks/TaskDetailPanel.razor.rz.scp.css */
.detail-panel[b-hb2euz04w1] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Top meta — calendar icon + single date line; flag + close */
.detail-panel__meta[b-hb2euz04w1] {
    --detail-meta-accent: var(--q-ink-muted);

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: 38px;
    padding: 6px 10px 6px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.detail-panel__meta-due-wrap[b-hb2euz04w1] {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.detail-panel__meta-due[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    margin: 0;
    padding: 3px 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
}

.detail-panel__meta-due:focus-visible[b-hb2euz04w1] {
    box-shadow: 0 0 0 2px rgba(109, 127, 158, 0.3);
}

.detail-panel__meta-due:hover[b-hb2euz04w1] {
    background: var(--mud-palette-action-default-hover);
}

.detail-panel__meta-due-icon[b-hb2euz04w1] {
    flex-shrink: 0;
    opacity: 0.45;
    color: var(--detail-meta-accent) !important;
}

.detail-panel__meta-due-text[b-hb2euz04w1] {
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-family: Roboto, -apple-system, sans-serif;
    letter-spacing: 0.01em;
}

/* The empty state is quiet, not faint: two stacked opacities used to land it
   at 0.385 of an already-muted token. */
.detail-panel__meta-due--empty .detail-panel__meta-due-text[b-hb2euz04w1] {
    color: var(--q-ink-faint);
    font-weight: 400;
}

.detail-panel__meta-due--empty .detail-panel__meta-due-icon[b-hb2euz04w1] {
    opacity: 0.4;
    color: var(--mud-palette-text-secondary) !important;
}

.detail-panel__meta-right[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

/* ── The clock on a task ──────────────────────────────────────────────────
   Idle it is one more quiet mark in the meta row; running it is the marker,
   the same swipe the folio line wears while a clock is going. */
.detail-panel__clock[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm, 2px);
    background: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: background-color 0.13s, color 0.13s;
}

.detail-panel__clock:hover:not(:disabled)[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--q-ink) 8%, transparent);
    color: var(--q-ink);
}

.detail-panel__clock:disabled[b-hb2euz04w1] {
    opacity: 0.5;
    cursor: default;
}

.detail-panel__clock:focus-visible[b-hb2euz04w1] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

.detail-panel__clock--on[b-hb2euz04w1],
.detail-panel__clock--on:hover:not(:disabled)[b-hb2euz04w1] {
    background: var(--q-accent);
    color: var(--q-accent-ink);
    text-transform: uppercase;
}

.detail-panel__clock-label[b-hb2euz04w1] {
    white-space: nowrap;
}

/* The label is the affordance; below this the meta row cannot spare the width, and the
   glyph with its tooltip carries it. */
@media (max-width: 419.98px) {
    .detail-panel__clock-label[b-hb2euz04w1] {
        display: none;
    }
}

.detail-panel__clock[b-hb2euz04w1]  .mud-icon-root {
    font-size: 1.05rem;
}

.detail-panel__clock-dot[b-hb2euz04w1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-accent-ink);
    animation: detail-clock-pulse-b-hb2euz04w1 1.6s ease-in-out infinite;
}

@keyframes detail-clock-pulse-b-hb2euz04w1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .detail-panel__clock-dot[b-hb2euz04w1] {
        animation: none;
    }
}

.detail-panel__priority-menu[b-hb2euz04w1]  .mud-icon-root {
    color: var(--priority-flag-color) !important;
}

.detail-panel__priority-button[b-hb2euz04w1]  .mud-icon-root {
    color: var(--priority-flag-color) !important;
}

.detail-panel__close[b-hb2euz04w1] {
    opacity: 0.65;
}

/* Hide close only on desktop split-pane (769px+); sheet overlay needs close */
@media (min-width: 769px) {
    .detail-panel__close[b-hb2euz04w1] {
        display: none;
    }
}

.detail-panel__picker-wrap[b-hb2euz04w1] {
    padding: 0 14px 10px;
    flex-shrink: 0;
}

/* Title, scroll, toolbar — date picker covers this whole region while open */
.detail-panel__main[b-hb2euz04w1] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}


/* Title + more */
.detail-panel__title-row[b-hb2euz04w1] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 10px 18px 16px;
    flex-shrink: 0;
}

.detail-panel__title-input[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.15rem;
    font-weight: 650;
    font-family: var(--q-font-display);
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.detail-panel__title-input[b-hb2euz04w1]::placeholder {
    opacity: 0.28;
    font-weight: 600;
}

/* Scroll region — fills remaining space; content stacks from top (no huge gap) */
.detail-panel__scroll[b-hb2euz04w1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 12px;
}

.detail-panel__section[b-hb2euz04w1] {
    margin-bottom: 10px;
}

.detail-panel__section--checklist[b-hb2euz04w1] {
    margin-bottom: 6px;
}

.detail-panel__section--comments[b-hb2euz04w1] {
    margin-top: 4px;
    margin-bottom: 0;
}

.detail-panel__check-placeholder[b-hb2euz04w1] {
    opacity: 0.35;
    flex-shrink: 0;
}

/* Notes */
.detail-panel__notes[b-hb2euz04w1] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.82rem;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-secondary);
    resize: none;
    line-height: 1.5;
    min-height: 2.6rem;
    max-height: 6rem;
}

.detail-panel__notes[b-hb2euz04w1]::placeholder {
    opacity: 0.5;
}

/* Subtasks */
.detail-panel__subtask-row[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
}

.detail-subtask--done[b-hb2euz04w1] {
    text-decoration: line-through;
    opacity: 0.4;
}

.detail-panel__add-subtask-row[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 3px 0 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    opacity: 0.62;
    transition: opacity 0.15s;
}

.detail-panel__add-subtask-row:focus-within[b-hb2euz04w1] {
    opacity: 1;
}

.detail-panel__subtask-input[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.82rem;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-secondary);
}

.detail-panel__subtask-input[b-hb2euz04w1]::placeholder {
    opacity: 0.85;
}

/* Comments */
.detail-panel__section--comments[b-hb2euz04w1] {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 10px;
    margin-top: 10px;
}

.detail-panel__comments-list[b-hb2euz04w1] {
    max-height: 110px;
    overflow-y: auto;
    margin-bottom: 4px;
}

.detail-panel__comments-label[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    margin-bottom: 8px;
}

.detail-panel__comments-count[b-hb2euz04w1] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.detail-panel__comment-icon[b-hb2euz04w1] {
    flex-shrink: 0;
    opacity: 0.4;
    color: var(--mud-palette-text-secondary) !important;
}

.detail-panel__comment-row[b-hb2euz04w1] {
    display: flex;
    align-items: flex-start;
    padding: 5px 0;
    gap: 0;
}

.detail-panel__add-comment-row[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 4px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-divider);
    transition: border-color 0.12s, background 0.12s;
}

.detail-panel__add-comment-row:focus-within[b-hb2euz04w1] {
    border-color: rgba(92, 107, 192, 0.4);
    background: var(--mud-palette-action-default-hover);
}

.detail-panel__comment-input[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.84rem;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-primary);
}

.detail-panel__comment-input[b-hb2euz04w1]::placeholder {
    opacity: 0.4;
}

/* List picker section */
.detail-panel__section--list-picker[b-hb2euz04w1] {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 10px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.detail-panel__list-picker-label[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    margin-bottom: 8px;
}

.detail-panel__list-picker-icon[b-hb2euz04w1] {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary) !important;
}

.detail-panel__list-chips[b-hb2euz04w1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-panel__list-chip[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: Roboto, -apple-system, sans-serif;
    color: var(--mud-palette-text-secondary);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    max-width: 140px;
}

.detail-panel__list-chip:hover[b-hb2euz04w1] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
}

.detail-panel__list-chip--active[b-hb2euz04w1] {
    border-color: var(--chip-accent, color-mix(in srgb, var(--q-accent) 50%, transparent));
    background: color-mix(in srgb, var(--chip-accent, var(--q-accent)) 12%, transparent);
    color: var(--chip-accent, var(--q-accent-text));
    font-weight: 600;
}

.detail-panel__list-chip--active:hover[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--chip-accent, var(--q-accent)) 18%, transparent);
}

.detail-panel__list-chip-dot[b-hb2euz04w1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.detail-panel__list-chip-icon[b-hb2euz04w1] {
    flex-shrink: 0;
    opacity: 0.7;
    color: inherit !important;
    font-size: 0.9rem !important;
}

.detail-panel__list-chip-name[b-hb2euz04w1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom toolbar */
.detail-panel__toolbar[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 5px 10px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
    gap: 6px;
    background: var(--mud-palette-surface);
}

.detail-panel__toolbar-item[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    min-width: 0;
}


.detail-panel__toolbar-actions[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.detail-panel__toolbar-chat[b-hb2euz04w1] {
    position: relative;
    display: flex;
    align-items: center;
}

.detail-panel__toolbar-badge[b-hb2euz04w1] {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 6px;
    /* A count badge is the marker's proper job: a fill with ink laid on it. It
       was chartreuse type on a leftover indigo wash from the old palette. */
    background: var(--q-accent);
    color: var(--q-accent-ink);
    pointer-events: none;
}

.detail-panel__toolbar-ghost[b-hb2euz04w1] {
    opacity: 0.55;
}


/* ── Phone / touch: full-screen detail sheet ───────────────────────────── */
@media (max-width: 767.98px) {
    .detail-panel__meta[b-hb2euz04w1] {
        min-height: 52px;
        padding: 12px 14px 12px 16px;
        gap: 10px;
        align-items: flex-start;
    }

    .detail-panel__meta-due[b-hb2euz04w1] {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .detail-panel__meta-due-text[b-hb2euz04w1] {
        font-size: 0.9rem;
        white-space: normal;
        line-height: 1.35;
    }

    .detail-panel__meta-right[b-hb2euz04w1] {
        gap: 2px;
        align-items: flex-start;
    }

    .detail-panel__meta-right[b-hb2euz04w1]  .mud-icon-button,
    .detail-panel__title-row[b-hb2euz04w1]  .mud-icon-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    /* Matches the touch target its neighbors are given above. */
    .detail-panel__clock[b-hb2euz04w1] {
        height: 48px;
        min-width: 48px;
        justify-content: center;
    }

    .detail-panel__title-row[b-hb2euz04w1] {
        padding: 20px 12px 18px 16px;
        gap: 8px;
        align-items: center;
    }

    .detail-panel__title-input[b-hb2euz04w1] {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .detail-panel__scroll[b-hb2euz04w1] {
        padding: 8px 18px max(24px, env(safe-area-inset-bottom, 0px));
    }

    .detail-panel__section[b-hb2euz04w1] {
        margin-bottom: 18px;
    }

    .detail-panel__section--checklist[b-hb2euz04w1] {
        margin-bottom: 14px;
    }

    .detail-panel__subtask-row[b-hb2euz04w1] {
        min-height: 52px;
        padding: 12px 0;
        gap: 14px;
        align-items: center;
    }

    .detail-panel__subtask-row > span[b-hb2euz04w1] {
        font-size: 1rem;
        line-height: 1.45;
    }

    .detail-panel__add-subtask-row[b-hb2euz04w1] {
        min-height: 52px;
        padding: 14px 0 16px;
    }

    .detail-panel__subtask-input[b-hb2euz04w1] {
        font-size: 16px;
    }

    .detail-panel__notes[b-hb2euz04w1] {
        font-size: 16px;
        min-height: 5rem;
        max-height: 14rem;
        line-height: 1.55;
        padding: 6px 0;
    }

    .detail-panel__section--comments[b-hb2euz04w1] {
        padding-top: 18px;
        margin-top: 18px;
    }

    .detail-panel__comments-label[b-hb2euz04w1],
    .detail-panel__list-picker-label[b-hb2euz04w1] {
        font-size: 0.72rem;
        margin-bottom: 12px;
    }

    .detail-panel__comments-list[b-hb2euz04w1] {
        max-height: min(42vh, 260px);
    }

    .detail-panel__comment-row[b-hb2euz04w1] {
        padding: 10px 0;
    }

    .detail-panel__add-comment-row[b-hb2euz04w1] {
        min-height: 52px;
        padding: 12px 14px;
        gap: 12px;
        border-radius: 12px;
        align-items: center;
    }

    .detail-panel__comment-input[b-hb2euz04w1] {
        font-size: 16px;
        line-height: 1.45;
    }

    .detail-panel__comment-send:disabled[b-hb2euz04w1] {
        opacity: 0.35;
    }

    .detail-panel__section--list-picker[b-hb2euz04w1] {
        padding-top: 18px;
        margin-top: 14px;
        margin-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .detail-panel__list-chips[b-hb2euz04w1] {
        gap: 10px;
    }

    .detail-panel__list-chip[b-hb2euz04w1] {
        min-height: 48px;
        padding: 12px 16px 12px 14px;
        font-size: 0.92rem;
        border-radius: 24px;
        max-width: none;
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        box-sizing: border-box;
    }

    .detail-panel__toolbar[b-hb2euz04w1] {
        min-height: 52px;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }

    .detail-panel__toolbar-actions[b-hb2euz04w1]  .mud-icon-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

}

/* Live countdown block (only shown for tasks with both DueDate + DueTime). */
.detail-panel__countdown[b-hb2euz04w1] {
    --cd-surface: var(--mud-palette-action-default-hover);
    --cd-bar: var(--countdown-accent);
    --cd-digit: var(--countdown-accent);
    --cd-label: color-mix(in srgb, var(--countdown-accent) 55%, var(--mud-palette-text-secondary));
    --cd-foot: var(--countdown-accent);
    --cd-border: transparent;

    margin: 12px 20px 8px;
    padding: 18px 22px 16px;
    border-radius: 14px;
    border: 1px solid var(--cd-border);
    border-left: 5px solid var(--cd-bar);
    background: var(--cd-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

/* Past due — oxide-red wash, dark-mode-safe via color-mix against the surface. */
.detail-panel__countdown--overdue[b-hb2euz04w1] {
    --cd-surface: color-mix(in srgb, var(--pri-high) 10%, var(--mud-palette-background));
    --cd-bar: var(--pri-high);
    --cd-digit: var(--pri-high);
    --cd-label: color-mix(in srgb, var(--pri-high) 52%, var(--mud-palette-text-secondary));
    --cd-foot: var(--pri-high);
    --cd-border: color-mix(in srgb, var(--pri-high) 12%, transparent);
}

.detail-panel__countdown--soon[b-hb2euz04w1] {
    --cd-surface: color-mix(in srgb, var(--pri-medium) 10%, var(--mud-palette-background));
    --cd-bar: var(--pri-medium);
    --cd-digit: var(--pri-medium);
    --cd-label: color-mix(in srgb, var(--pri-medium) 52%, var(--mud-palette-text-secondary));
    --cd-foot: var(--pri-medium);
    --cd-border: color-mix(in srgb, var(--pri-medium) 12%, transparent);
}

.detail-panel__countdown--future[b-hb2euz04w1] {
    --cd-surface: color-mix(in srgb, var(--countdown-accent) 10%, var(--mud-palette-background));
    --cd-bar: var(--countdown-accent);
    --cd-digit: var(--countdown-accent);
    --cd-label: color-mix(in srgb, var(--countdown-accent) 52%, var(--mud-palette-text-secondary));
    --cd-foot: var(--countdown-accent);
    --cd-border: color-mix(in srgb, var(--countdown-accent) 12%, transparent);
}

.detail-panel__countdown-grid[b-hb2euz04w1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    text-align: center;
    align-items: start;
}

.cd-unit-sm[b-hb2euz04w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 2px 2px;
    min-width: 0;
}

.cd-unit-sm__num[b-hb2euz04w1] {
    /* Scales down when the detail column is narrow (split layout or phone) — same 4-column grid at all widths. */
    font-size: clamp(1rem, 0.85rem + 1.1vw, 2rem);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--cd-digit);
    letter-spacing: 0.04em;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

.cd-unit-sm__label[b-hb2euz04w1] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-label);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

.detail-panel__countdown-foot[b-hb2euz04w1] {
    font-size: 0.82rem;
    color: var(--cd-foot);
    text-align: center;
    font-weight: 500;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.01em;
}
/* /Components/Tasks/TaskRow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * Diurnal task row — an entry on a printed sheet.
 *
 * Rows are separated by a hairline rule, not by cards or gaps: a broadsheet is
 * a continuous column of ruled entries. Hover lays the marker across the title
 * rather than tinting the whole row, and completing an entry strikes it through
 * with a drawn pen line while the marker runs dry.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Everything in a row sits on one line — the title is `white-space: nowrap` and
   the body is a single inline run — so there is nothing for `flex-start` to
   protect and it only made each part hang from the top by its own height. The
   parts were then nudged back into line by hand (margin-top: 1px on the box,
   7px on the dot, 2px on the date, -3px on the actions), which held only as
   long as every part kept the height it had when those numbers were chosen. The
   touch rules broke that: the actions box grows to 40px on a coarse pointer, and
   the row split into two tiers — box and bin centred at 31px, dot, title and
   date at 23px. Centring aligns them for any set of heights, so the margins are
   gone rather than re-tuned. */
.task-row[b-otcbfytzxa] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--q-line);
    cursor: pointer;
    min-height: 0;
    transition: background 0.14s ease;
}

/* The grip is a tool, not part of the entry — it stays out of the column until
   the row is under the cursor, the same way the delete action behaves. Width is
   held so revealing it never shifts the text. */
.task-row__schedule-drag[b-otcbfytzxa] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    margin-top: 1px;
    color: var(--q-ink-faint);
    cursor: grab;
    touch-action: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.task-row:hover .task-row__schedule-drag[b-otcbfytzxa],
.task-row__schedule-drag:focus-visible[b-otcbfytzxa] {
    opacity: 1;
}

.task-row__schedule-drag:active[b-otcbfytzxa] {
    cursor: grabbing;
}

/* Touch has no hover — keep the grip visible there. */
@media (hover: none) and (pointer: coarse) {
    .task-row__schedule-drag[b-otcbfytzxa] {
        opacity: 1;
    }
}

/* No row tint on hover — the marker on the title is the hover signal. Selection
   is the one state that washes the whole entry, so it reads at a glance. */
.task-row--selected[b-otcbfytzxa] {
    background: var(--q-accent-soft);
}

.task-row--completed[b-otcbfytzxa] {
    opacity: 0.62;
}

/* ── Ballot box ───────────────────────────────────────────────────────────
   A printed checkbox on a form, filled in by hand. Square, ink-ruled, and it
   takes solid ink when ticked. */
.task-row__check[b-otcbfytzxa] {
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: transparent;
    transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.task-row__check:hover[b-otcbfytzxa] {
    transform: scale(1.12) rotate(-3deg);
}

.task-row__check-box[b-otcbfytzxa] {
    width: 16px;
    height: 16px;
    border-radius: 0;
    border: 1.5px solid var(--q-ink);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.task-row__check-box--checked[b-otcbfytzxa] {
    background: var(--q-ink);
    border-color: var(--q-ink);
    animation: task-check-pop-b-otcbfytzxa 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes task-check-pop-b-otcbfytzxa {
    0%   { transform: scale(0.6); }
    55%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Paper-colored tick, so it reads on the ink-filled box in both editions. */
.task-row__check-tick[b-otcbfytzxa] {
    color: var(--q-bg);
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* ── Priority dot ─────────────────────────────────────────────────────────
   High is the only filled alarm color; medium is solid ink, low a hollow ring,
   none an empty slot that still holds the title's alignment. */
.task-row__pri[b-otcbfytzxa] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.task-row__pri--high[b-otcbfytzxa]   { background: var(--pri-high); }
.task-row__pri--medium[b-otcbfytzxa] { background: var(--q-ink); }
.task-row__pri--low[b-otcbfytzxa]    { border: 1px solid var(--q-ink-muted); }
.task-row__pri--none[b-otcbfytzxa]   { background: transparent; }

/* ── Body ─────────────────────────────────────────────────────────────────── */
.task-row__body[b-otcbfytzxa] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-row__title[b-otcbfytzxa] {
    position: relative;
    isolation: isolate;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--q-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The marker. Skewed and ragged at both ends, thicker where the nib lands,
   multiplied on paper so the ink reads through it. It sweeps on scaleX rather
   than fading, so it draws like a real swipe. Nocturne flips the blend to solid
   with dark type (--q-mark-blend / --q-mark-ink in app.css). */
.task-row__title[b-otcbfytzxa]::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.3em;
    right: -0.42em;
    top: 0.06em;
    bottom: 0.02em;
    background: var(--q-accent);
    mix-blend-mode: var(--q-mark-blend);
    clip-path: polygon(0 6%, 100% 0, 99.4% 92%, 0.6% 100%);
    transform: skewX(-3.5deg) scaleX(0);
    transform-origin: left center;
    transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.task-row:hover .task-row__title[b-otcbfytzxa]::before,
.task-row--selected .task-row__title[b-otcbfytzxa]::before {
    transform: skewX(-3.5deg) scaleX(1);
}

.task-row:hover .task-row__title[b-otcbfytzxa],
.task-row--selected .task-row__title[b-otcbfytzxa] {
    color: var(--q-mark-ink);
}

/* A finished entry loses its mark — it no longer needs the attention. */
.task-row--completed:hover .task-row__title[b-otcbfytzxa]::before {
    transform: skewX(-3.5deg) scaleX(0);
}

.task-row--completed .task-row__title[b-otcbfytzxa] {
    color: var(--q-ink-faint);
}

/* Strike drawn as a pen line (text-decoration can't animate). */
.task-row--completed .task-row__title[b-otcbfytzxa]::after {
    content: "";
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    top: 54%;
    height: 1.5px;
    background: var(--q-ink-muted);
    animation: task-strike-b-otcbfytzxa 300ms cubic-bezier(0.5, 0.1, 0.2, 1);
}

@keyframes task-strike-b-otcbfytzxa {
    from { transform: scaleX(0); transform-origin: left center; }
    to   { transform: scaleX(1); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
    .task-row__check-box--checked[b-otcbfytzxa],
    .task-row--completed .task-row__title[b-otcbfytzxa]::after {
        animation: none;
    }

    .task-row__title[b-otcbfytzxa]::before,
    .task-row__check[b-otcbfytzxa] {
        transition: none;
    }
}

.task-row__subtask-badge[b-otcbfytzxa] {
    flex-shrink: 0;
    margin-top: 2px;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--q-ink-faint);
    background: transparent;
    padding: 0;
    border-radius: 0;
    line-height: 1.6;
}

/* ── Marginalia (right side) ──────────────────────────────────────────────
   Every piece of metadata is set in mono small-caps, like a printed folio. */
.task-row__right[b-otcbfytzxa] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.task-row__list-chip[b-otcbfytzxa] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-row__list-dot[b-otcbfytzxa] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-row__list-name[b-otcbfytzxa],
.task-row__reminder[b-otcbfytzxa] {
    color: var(--q-ink-faint);
    white-space: nowrap;
}

.task-row__reminder[b-otcbfytzxa] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* "+2" — the reminders the row has no room to name. */
.task-row__reminder-more[b-otcbfytzxa] {
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 4px;
    background: var(--q-rule-soft, rgba(128, 128, 128, 0.16));
}

.task-row__date[b-otcbfytzxa] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Lateness is the sheet's one alarm: a solid vermilion block, not a soft chip. */
.task-row__time-left[b-otcbfytzxa] {
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 0;
    background: transparent;
    color: var(--q-ink-faint);
    white-space: nowrap;
    line-height: 1.5;
}

.task-row__time-left--soon[b-otcbfytzxa] {
    color: var(--pri-medium);
    background: transparent;
}

.task-row__time-left--overdue[b-otcbfytzxa] {
    color: var(--q-accent-ink);
    background: var(--pri-high);
    font-weight: 600;
}

/* Delete action — only visible on hover */
.task-row__actions[b-otcbfytzxa] {
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.task-row:hover .task-row__actions[b-otcbfytzxa] {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .task-row__actions[b-otcbfytzxa] {
        opacity: 1;
    }

    .task-row__schedule-drag[b-otcbfytzxa] {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .task-row__time-left[b-otcbfytzxa] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .task-row[b-otcbfytzxa] {
        padding: 13px 14px;
    }

    /* The padding is the tap target — 20px box in 34px of reach. The negative
       left margin keeps that growth from indenting the row's left edge; the
       negative top margin used to do the same against a top-aligned row, but
       now that the row centres it only lifts the box off the line the dot,
       title and bin sit on. */
    .task-row__check[b-otcbfytzxa] {
        padding: 7px;
        margin-left: -4px;
    }

    .task-row__check-box[b-otcbfytzxa] {
        width: 20px;
        height: 20px;
    }

    .task-row__title[b-otcbfytzxa] {
        font-size: 1rem;
    }

    .task-row__actions[b-otcbfytzxa]  .mud-icon-button {
        width: 40px !important;
        height: 40px !important;
    }
}
/* /Components/Tasks/TasksView.razor.rz.scp.css */
.tasks-view[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    background: var(--mud-palette-background);
}

/* ── Agenda tools ─────────────────────────────────────────────────────────
   The list has no masthead of its own — the broadsheet shell sets the page's
   name and its figures above this component. What is left is a thin line of
   controls, hung right and set as quietly as the folio strip. */
.tasks-view__tools[b-d8w3u239jr] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 8px 0 2px;
    min-height: 34px;
}

.tasks-view__view-switcher[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Layout — list stack fills main; with detail on desktop, grid splits list | detail */
.tasks-view__layout[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.tasks-view__list-stack[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* ── The week grid ────────────────────────────────────────────────────────
   It is a view you choose now, not a permanent second pane: the broadsheet gives
   the right-hand column to the marginalia, so the grid appears only in Week mode.

   Narrow: the grid takes the whole column and the task list stands down — there
   is no room for both. The tools line stays put, or there would be no way back
   to the list. Wide (>=1200px): list and grid sit side by side, which is what
   makes dragging a task onto a time slot possible. */
.tasks-view__week-pane[b-d8w3u239jr] {
    display: none;
}

.tasks-view__layout--week-pane[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
}

.tasks-view__layout--week-pane .tasks-view__list-stack[b-d8w3u239jr] {
    flex: 0 0 auto;
}

.tasks-view__layout--week-pane .tasks-view__list-col[b-d8w3u239jr] {
    display: none;
}

.tasks-view__layout--week-pane .tasks-view__week-pane[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .tasks-view__layout--week-pane .tasks-view__list-col[b-d8w3u239jr] {
        display: flex;
    }

    .tasks-view__layout--week-pane .tasks-view__list-stack[b-d8w3u239jr] {
        flex: 1 1 0;
    }
}

@media (min-width: 1200px) {
    /* List column capped so the week calendar sits beside tasks — avoid a wide empty band. */
    .tasks-view__layout--week-pane:not(.tasks-view__layout--with-detail)[b-d8w3u239jr] {
        display: grid;
        grid-template-columns: minmax(260px, min(400px, 36vw)) minmax(280px, 1fr);
        grid-template-rows: 1fr;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        column-gap: 0;
    }

    .tasks-view__layout--week-pane:not(.tasks-view__layout--with-detail) .tasks-view__list-stack[b-d8w3u239jr] {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    .tasks-view__layout--week-pane:not(.tasks-view__layout--with-detail) .tasks-view__week-pane[b-d8w3u239jr] {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border-left: 1px solid color-mix(in srgb, var(--mud-palette-divider) 65%, transparent);
    }
}

@media (min-width: 1200px) {
    .tasks-view__layout--week-pane.tasks-view__layout--with-detail[b-d8w3u239jr] {
        display: grid;
        grid-template-columns: minmax(240px, min(360px, 30vw)) minmax(220px, 1fr) clamp(260px, 28vw, 420px);
        grid-template-rows: 1fr;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        column-gap: 0;
    }

    .tasks-view__layout--week-pane.tasks-view__layout--with-detail .tasks-view__list-stack[b-d8w3u239jr] {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    .tasks-view__layout--week-pane.tasks-view__layout--with-detail .tasks-view__week-pane[b-d8w3u239jr] {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border-left: 1px solid color-mix(in srgb, var(--mud-palette-divider) 65%, transparent);
    }

    .tasks-view__layout--week-pane.tasks-view__layout--with-detail .tasks-view__detail-col[b-d8w3u239jr] {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (min-width: 769px) {
    .tasks-view__layout--with-detail:not(.tasks-view__layout--week-pane)[b-d8w3u239jr] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 36vw, 520px);
        grid-template-rows: 1fr;
        align-items: stretch;
    }

    .tasks-view__layout--with-detail:not(.tasks-view__layout--week-pane) .tasks-view__list-stack[b-d8w3u239jr] {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        overflow: hidden;
    }

    .tasks-view__layout--with-detail:not(.tasks-view__layout--week-pane) .tasks-view__detail-col[b-d8w3u239jr] {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Task list pane */
.tasks-view__list-col[b-d8w3u239jr] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: min(260px, 100%);
    min-height: 0;
}

.tasks-view__list-scroll[b-d8w3u239jr] {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 16px;
}


/* MudDropZone can collapse to 0 height when flex parents use auto basis — keep a floor for hit-testing */
.tasks-view__drop-zone[b-d8w3u239jr] {
    min-height: 48px;
}

/* Add task row — a ruled blank waiting to be written on, not a pill. Only the
   baseline is drawn (dotted, like a form's fill-in line); it darkens to solid ink
   on focus. Renders as a <form> so iOS soft-keyboard "return" submits via the
   native form-submit path (more reliable than listening for Enter on keydown
   when autocorrect is in flight). */
.tasks-view__add-row[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 10px;
    margin: 10px 14px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px dotted var(--q-line);
    border-radius: 0;
    cursor: text;
    transition: border-color 0.14s ease;
}

.tasks-view__add-row:hover[b-d8w3u239jr] {
    border-bottom-color: var(--q-ink-faint);
}

.tasks-view__add-row:focus-within[b-d8w3u239jr] {
    background: transparent;
    border-bottom-style: solid;
    border-bottom-color: var(--q-ink);
    box-shadow: none;
}

.tasks-view__add-icon[b-d8w3u239jr] {
    opacity: 0.45;
    flex-shrink: 0;
}

/* Set in the display face: what you write here becomes an entry on the sheet,
   so the composing line speaks in the same voice the entries do. */
.tasks-view__add-input[b-d8w3u239jr] {
    flex: 1;
    /* A flex item's automatic minimum size is its intrinsic width, and an input's
       is its `size` attribute — around 180px. So `flex: 1` alone could grow this
       field but never shrink it past that floor, and on a phone the row's fixed
       items (the icon, Due, and the submit button) were pushed off the right-hand
       edge: the submit button ended up ~40px beyond the list's own box. Because
       the list sets overflow-y, CSS computes its overflow-x to auto as well, so
       that spill turned into a sideways scrollbar across the whole task list. */
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--q-font-display);
    font-size: 1.18rem;
    color: var(--q-ink);
}

.tasks-view__add-input[b-d8w3u239jr]::placeholder {
    font-family: var(--q-font-display);
    color: var(--q-ink-faint);
    opacity: 1;
}

.tasks-view__add-due[b-d8w3u239jr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin: 0;
    padding: 4px 6px 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: background 0.12s ease, color 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.tasks-view__add-due:hover[b-d8w3u239jr] {
    background: rgba(128, 128, 128, 0.12);
}

.tasks-view__add-due--set[b-d8w3u239jr] {
    color: var(--q-accent-text);
}

.tasks-view__add-due--set .tasks-view__add-due-icon[b-d8w3u239jr],
.tasks-view__add-due--set .tasks-view__add-due-chevron[b-d8w3u239jr] {
    color: var(--q-accent-text);
}

.tasks-view__add-due-icon[b-d8w3u239jr],
.tasks-view__add-due-chevron[b-d8w3u239jr] {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 0.85;
}

.tasks-view__add-due-chevron[b-d8w3u239jr] {
    opacity: 0.65;
    margin-left: -2px;
}

.tasks-view__add-due-label[b-d8w3u239jr] {
    white-space: nowrap;
}

/* Submit button — gives touch users a tap target alongside the keyboard's return key.
   Hidden visually until there's something to submit, but always present in the form
   so iOS treats Enter as an implicit submit. */
.tasks-view__add-submit[b-d8w3u239jr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: var(--q-accent-text);
    color: var(--q-accent-ink);
    cursor: pointer;
    transition: background 0.12s ease, opacity 0.12s ease, transform 0.08s ease;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    pointer-events: none;
}

.tasks-view__add-row:focus-within .tasks-view__add-submit[b-d8w3u239jr],
.tasks-view__add-submit:not(:disabled)[b-d8w3u239jr] {
    opacity: 1;
    pointer-events: auto;
}

.tasks-view__add-submit:disabled[b-d8w3u239jr] {
    opacity: 0;
    pointer-events: none;
}

.tasks-view__add-submit:hover:not(:disabled)[b-d8w3u239jr] {
    background: var(--mud-palette-primary-darken, var(--q-accent-hover));
}

.tasks-view__add-submit:active:not(:disabled)[b-d8w3u239jr] {
    transform: scale(0.95);
}

.tasks-view__add-submit .mud-icon-root[b-d8w3u239jr] {
    color: var(--q-accent-ink);
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Touch devices: enlarge the submit hit area to Apple's 44pt guideline. */
@media (hover: none) and (pointer: coarse) {
    .tasks-view__add-submit[b-d8w3u239jr] {
        width: 40px;
        height: 40px;
    }
}

/* Group headers — quiet, no sticky border */
.tasks-view__group-header[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 22px 6px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: opacity 0.12s;
}

.tasks-view__group-header:hover[b-d8w3u239jr] {
    opacity: 0.85;
}

.tasks-view__group-header--overdue .tasks-view__group-label[b-d8w3u239jr] {
    color: var(--pri-high);
}

.tasks-view__group-chevron[b-d8w3u239jr] {
    opacity: 0.35;
    flex-shrink: 0;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Section kickers, set in mono small-caps like a standing head. */
.tasks-view__group-label[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    flex-shrink: 0;
}

.tasks-view__group-count[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    color: var(--q-ink-faint);
    padding: 0 4px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Hairline that carries the eye from the group label across to the right edge. */
.tasks-view__group-rule[b-d8w3u239jr] {
    flex: 1;
    height: 1px;
    min-width: 12px;
    margin-left: 10px;
    background: var(--q-line);
}

.tasks-view__postpone-btn[b-d8w3u239jr] {
    font-size: 0.75rem;
    color: var(--q-accent-text);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    transition: background 0.12s;
}

.tasks-view__postpone-btn:hover[b-d8w3u239jr] {
    background: var(--q-accent-soft);
}

/* Empty state */
.tasks-view__empty[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    animation: tasks-empty-in-b-d8w3u239jr 320ms ease-out both;
}

@keyframes tasks-empty-in-b-d8w3u239jr {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* A little cairn of stacked stones — the top stone lit in the marker. */
.tasks-view__cairn[b-d8w3u239jr] {
    width: 64px;
    height: 72px;
    margin-bottom: 18px;
}

.tasks-view__cairn-shadow[b-d8w3u239jr] {
    fill: var(--q-ink);
    opacity: 0.06;
}

.tasks-view__cairn-stone[b-d8w3u239jr] {
    fill: color-mix(in srgb, var(--q-ink) 16%, var(--mud-palette-surface));
    stroke: color-mix(in srgb, var(--q-ink) 22%, transparent);
    stroke-width: 1;
}

.tasks-view__cairn-top[b-d8w3u239jr] {
    fill: var(--q-accent);
}

.tasks-view__empty-title[b-d8w3u239jr] {
    font-family: var(--q-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.tasks-view__empty-sub[b-d8w3u239jr] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--q-ink-muted);
    max-width: 26rem;
}

/* Right-hand detail panel — in-flow column on desktop; full-screen sheet on small screens */
.tasks-view__detail-col[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: none;
    border-left: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.tasks-view__detail-col > *[b-d8w3u239jr] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 768px) {
    .tasks-view__layout--with-detail[b-d8w3u239jr] {
        flex: 1;
        min-height: 0;
    }

    .tasks-view__detail-col[b-d8w3u239jr] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
        z-index: 1200;
        border-left: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .tasks-view__backdrop[b-d8w3u239jr] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0, 0, 0.35);
        z-index: 1199;
    }

    .tasks-view__list-col[b-d8w3u239jr] {
        min-width: 0;
    }
}

@media (min-width: 769px) {
    .tasks-view__backdrop[b-d8w3u239jr] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .tasks-view__add-input[b-d8w3u239jr] {
        font-size: 16px;
    }
}

/* ══ < 640px — the list stops scrolling on its own ═════════════════════════
 * Below this width the shell folds to a single column and hands the scroll to
 * the sheet: .bs__page drops to `overflow-y: visible` and takes a `min-height`
 * of 46vh. This scroller never got the message, so it kept its own `flex: 1 1 0`
 * box inside that 46vh — about 320px on a phone, roughly two and a half rows —
 * and the tasks were read through a letterbox with the marginalia sitting in the
 * space below. Worse, it was a second scroll surface inside a scrolling sheet:
 * a drag that began on a row moved the inner list, the same drag a few pixels
 * away moved the page.
 *
 * So the scroller stands down here and lets its rows flow into the sheet's own
 * scroll — which is what the shell's < 640px contract says should happen.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639.98px) {
    /* The whole nest has to stand down together, not just the scroller. Each of
       these is `flex: 1 1 0` over `overflow: hidden` — the right way to build a
       full-height desktop pane, where the column is given the viewport and the
       list scrolls inside it. Stacked on a phone they become three lids on top
       of each other: freeing the scroller alone just moved the clipping up to
       .tasks-view__list-col, which held 481px of rows in a 322px box.

       `flex: 0 0 auto` lets each size to its content, and `overflow: visible`
       stops them cropping what they no longer need to contain. */
    .tasks-view[b-d8w3u239jr],
    .tasks-view__layout[b-d8w3u239jr],
    .tasks-view__list-stack[b-d8w3u239jr],
    .tasks-view__list-col[b-d8w3u239jr],
    .tasks-view__list-scroll[b-d8w3u239jr] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
    }
}
/* /Components/Tasks/Views/CalendarView.razor.rz.scp.css */
.calendar-view[b-sti16xnyft] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.calendar-view__nav[b-sti16xnyft] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 4px;
}

.calendar-view__month-label[b-sti16xnyft] {
    min-width: 160px;
    text-align: center;
    font-weight: 500;
}

.calendar-view__grid[b-sti16xnyft] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid var(--mud-palette-divider);
}

.calendar-view__dow[b-sti16xnyft] {
    padding: 6px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--q-ink-faint);
    text-align: center;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.calendar-view__day[b-sti16xnyft] {
    min-height: 90px;
    padding: 4px 6px;
    border-right: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
    overflow: hidden;
}

.calendar-view__day--empty[b-sti16xnyft] {
    background: transparent;
}

.calendar-view__day--today[b-sti16xnyft] {
    background: var(--q-accent-softer);
}

.calendar-view__day-num[b-sti16xnyft] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 2px;
}

.calendar-view__day-num--today[b-sti16xnyft] {
    background: var(--q-accent);
    color: var(--q-accent-ink);
}

.calendar-view__chip[b-sti16xnyft] {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--q-accent-soft);
    color: inherit;
    border-left: 3px solid var(--q-accent-text);
    transition: opacity 0.15s;
}

.calendar-view__chip:hover[b-sti16xnyft] { opacity: 0.75; }

.calendar-view__chip--high[b-sti16xnyft] { border-left-color: var(--pri-high); background: color-mix(in srgb, var(--pri-high) 12%, transparent); }
.calendar-view__chip--medium[b-sti16xnyft] { border-left-color: var(--pri-medium); background: color-mix(in srgb, var(--pri-medium) 12%, transparent); }
.calendar-view__chip--low[b-sti16xnyft] { border-left-color: var(--pri-low); background: color-mix(in srgb, var(--pri-low) 12%, transparent); }

.calendar-view__chip--recurring[b-sti16xnyft] {
    border-left-style: dashed;
}

.calendar-view__chip-repeat[b-sti16xnyft] {
    display: inline-block;
    margin-right: 3px;
    font-size: 0.65rem;
    opacity: 0.75;
    vertical-align: middle;
}

.calendar-view__more[b-sti16xnyft] {
    font-size: 0.68rem;
    color: var(--q-ink-faint);
    padding-left: 2px;
}

/* Imported calendar events.
   Deliberately quieter than a task chip and with no priority color: these are a record of
   what is already happening, not work the reader can act on here. The outline treatment
   rather than a filled bar says "reference" at a glance, and the default cursor stops the
   chip from inviting a click that does nothing. */
.calendar-view__chip--event[b-sti16xnyft] {
    background: transparent;
    border-left: 3px solid var(--q-ink-faint);
    color: var(--q-ink-muted);
    cursor: default;
    font-style: italic;
}

.calendar-view__chip--event:hover[b-sti16xnyft] {
    opacity: 1;
}

.calendar-view__chip-time[b-sti16xnyft] {
    margin-right: 4px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-size: 0.66rem;
    opacity: 0.8;
}
/* /Components/Tasks/Views/WeekCalendarStrip.razor.rz.scp.css */
.week-cal[b-v8hf5zyha3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.week-cal__toolbar[b-v8hf5zyha3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 10px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 65%, transparent);
}

.week-cal__nav[b-v8hf5zyha3] {
    display: flex;
    align-items: center;
    gap: 0;
}

.week-cal__icon-btn[b-v8hf5zyha3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.week-cal__icon-btn:hover[b-v8hf5zyha3],
.week-cal__icon-btn:focus-visible[b-v8hf5zyha3] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    outline: none;
}

.week-cal__title[b-v8hf5zyha3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 120px;
    padding-left: 4px;
}

.week-cal__touch-hint[b-v8hf5zyha3] {
    flex: 1 1 100%;
    order: 10;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
    padding: 2px 0 0;
}

.week-cal__title-main[b-v8hf5zyha3] {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-cal__title-wk[b-v8hf5zyha3] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

.week-cal__today-text[b-v8hf5zyha3] {
    border: 0;
    background: transparent;
    /* Type, so the olive sibling rather than the marker. */
    color: var(--q-accent-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}

.week-cal__today-text:hover[b-v8hf5zyha3],
.week-cal__today-text:focus-visible[b-v8hf5zyha3] {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.week-cal__header-row[b-v8hf5zyha3] {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    flex-shrink: 0;
    padding: 4px 0 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 50%, transparent);
}

.week-cal__corner[b-v8hf5zyha3] {
    min-width: 0;
}

.week-cal__dow-cell[b-v8hf5zyha3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
}

.week-cal__dow-name[b-v8hf5zyha3] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.week-cal__dow-num[b-v8hf5zyha3] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.week-cal__dow-num--badge[b-v8hf5zyha3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, var(--q-accent-ink));
}

.week-cal__dow-cell--today .week-cal__dow-name[b-v8hf5zyha3] {
    color: var(--q-accent-text);
}

.week-cal__allday[b-v8hf5zyha3] {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    flex-shrink: 0;
    min-height: 36px;
    max-height: 120px;
    overflow-y: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 50%, transparent);
    font-size: 0.7rem;
}

.week-cal__allday-label[b-v8hf5zyha3] {
    padding: 6px 4px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    align-self: start;
}

.week-cal__allday-col[b-v8hf5zyha3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 3px;
    min-width: 0;
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-divider) 40%, transparent);
}

/* All-day row: full-width card + drag grip (grip stays outside <button> for valid HTML). */
.week-cal__allday-item[b-v8hf5zyha3] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.week-cal__allday-item:hover[b-v8hf5zyha3] {
    filter: brightness(1.04);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mud-theme-dark .week-cal__allday-item[b-v8hf5zyha3] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.week-cal__allday-item--done[b-v8hf5zyha3] {
    opacity: 0.45;
    border-left-color: var(--mud-palette-text-disabled);
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 10%, var(--mud-palette-surface));
}

.week-cal__allday-item--done .week-cal__allday-chip[b-v8hf5zyha3] {
    text-decoration: line-through;
}

.week-cal__chip-grip[b-v8hf5zyha3] {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
    cursor: grab;
    color: var(--mud-palette-text-disabled);
    user-select: none;
    touch-action: none;
    opacity: 0.55;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.week-cal__chip-grip:hover[b-v8hf5zyha3] {
    opacity: 0.95;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.week-cal__chip-grip:active[b-v8hf5zyha3] {
    cursor: grabbing;
}

.week-cal__chip-grip[b-v8hf5zyha3]  .mud-icon-root {
    font-size: 14px !important;
}

.week-cal__allday-chip[b-v8hf5zyha3] {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 5px 8px 5px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 1.25;
}

.week-cal__allday-chip:hover[b-v8hf5zyha3] {
    filter: none;
}

.week-cal__more[b-v8hf5zyha3] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 2px;
}

.week-cal__body[b-v8hf5zyha3] {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    overflow-y: auto;
    --week-cal-hours: 16;
}

.week-cal__times[b-v8hf5zyha3] {
    position: relative;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-divider) 40%, transparent);
}

.week-cal__time-label[b-v8hf5zyha3] {
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.week-cal__day-col[b-v8hf5zyha3] {
    position: relative;
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-divider) 35%, transparent);
    min-width: 0;
}

.week-cal__grid-lines[b-v8hf5zyha3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.week-cal__hour-line[b-v8hf5zyha3] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-divider) 35%, transparent);
}

/* Timed block: vertical span in the grid; row = grip + body; resize strips on top/bottom. */
.week-cal__block-wrap[b-v8hf5zyha3] {
    position: absolute;
    left: 1px;
    right: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    z-index: 0;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.mud-theme-dark .week-cal__block-wrap[b-v8hf5zyha3] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.week-cal__block-wrap:hover[b-v8hf5zyha3] {
    filter: brightness(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.week-cal__block-wrap--done[b-v8hf5zyha3] {
    opacity: 0.4;
    border-left-color: var(--mud-palette-text-disabled);
    border-color: color-mix(in srgb, var(--mud-palette-text-disabled) 25%, transparent);
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 8%, var(--mud-palette-surface));
}

.week-cal__block-wrap--done:hover[b-v8hf5zyha3] {
    opacity: 0.65;
}

.week-cal__block-wrap--done .week-cal__block-title[b-v8hf5zyha3] {
    text-decoration: line-through;
}

.week-cal__block-wrap--resizing[b-v8hf5zyha3] {
    z-index: 6;
    filter: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: none;
}

/* Real block hidden while JS shows a non-Blazor ghost (see week-cal-resize.js). */
.week-cal__block-wrap[data-slate-resize-active="1"][b-v8hf5zyha3] {
    opacity: 0 !important;
}

.mud-theme-dark .week-cal__block-wrap--resizing[b-v8hf5zyha3] {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* Invisible hit strips; subtle tint only on hover / active resize (no purple bars). */
.week-cal__block-resize[b-v8hf5zyha3] {
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    z-index: 4;
    cursor: ns-resize;
    touch-action: none;
    background: transparent;
}

.week-cal__block-resize--top[b-v8hf5zyha3] {
    top: 0;
    border-radius: 6px 6px 0 0;
}

.week-cal__block-resize--bottom[b-v8hf5zyha3] {
    bottom: 0;
    border-radius: 0 0 6px 6px;
}

.week-cal__block-resize--top:hover[b-v8hf5zyha3] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent),
        transparent
    );
}

/* While dragging, do not tint strips (reads as a purple "spot" on a thin block). */
.week-cal__block-wrap--resizing .week-cal__block-resize--top[b-v8hf5zyha3],
.week-cal__block-wrap--resizing .week-cal__block-resize--bottom[b-v8hf5zyha3] {
    background: transparent !important;
}

.week-cal__block-resize--bottom:hover[b-v8hf5zyha3] {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent),
        transparent
    );
}

.week-cal__block-row[b-v8hf5zyha3] {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    padding: 4px 0;
}

.week-cal__block-wrap--dense[b-v8hf5zyha3] {
    border-radius: 4px;
}

.week-cal__block-wrap--dense .week-cal__block-resize[b-v8hf5zyha3] {
    left: 6px;
    right: 6px;
    height: 6px;
}

.week-cal__block-wrap--dense .week-cal__block-row[b-v8hf5zyha3] {
    flex: 1 1 0;
    padding: 2px 4px;
    align-items: center;
    min-height: 0;
}

.week-cal__block--dense-move[b-v8hf5zyha3] {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 3px 5px !important;
}

.week-cal__block--dense-move .week-cal__block-title[b-v8hf5zyha3] {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.week-cal__block--dense-move .week-cal__block-time[b-v8hf5zyha3] {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
    color: color-mix(in srgb, var(--q-accent-text) 58%, var(--mud-palette-text-secondary));
}

.week-cal__block-grip[b-v8hf5zyha3] {
    flex: 0 0 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    cursor: grab;
    color: var(--mud-palette-text-disabled);
    user-select: none;
    touch-action: none;
    opacity: 0.5;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.week-cal__block-grip:hover[b-v8hf5zyha3] {
    opacity: 0.95;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.week-cal__block-grip:active[b-v8hf5zyha3] {
    cursor: grabbing;
}

.week-cal__block-grip[b-v8hf5zyha3]  .mud-icon-root {
    font-size: 14px !important;
}

.week-cal__block[b-v8hf5zyha3] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    align-self: stretch;
    margin: 0;
    padding: 2px 6px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.week-cal__block-title[b-v8hf5zyha3] {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.week-cal__block-time[b-v8hf5zyha3] {
    font-size: 0.66rem;
    font-weight: 600;
    opacity: 0.95;
    font-variant-numeric: tabular-nums;
    width: 100%;
    white-space: nowrap;
    color: color-mix(in srgb, var(--q-accent-text) 38%, var(--mud-palette-text-secondary));
}

.week-cal__p-high[b-v8hf5zyha3] {
    border-left-color: var(--pri-high) !important;
    background: color-mix(in srgb, var(--pri-high) 18%, var(--mud-palette-surface)) !important;
}

.week-cal__p-medium[b-v8hf5zyha3] {
    border-left-color: var(--pri-medium) !important;
    background: color-mix(in srgb, var(--pri-medium) 15%, var(--mud-palette-surface)) !important;
}

.week-cal__p-low[b-v8hf5zyha3] {
    border-left-color: var(--pri-low) !important;
    background: color-mix(in srgb, var(--pri-low) 13%, var(--mud-palette-surface)) !important;
}

/* Touch / coarse pointer: edge-resize and list-style drag grips are unreliable; hide (see detail panel + hint). */
@media (hover: none) and (pointer: coarse) {
    .week-cal__block-resize[b-v8hf5zyha3] {
        display: none !important;
    }

    .week-cal__block-grip[b-v8hf5zyha3] {
        display: none !important;
    }
}

/* ── Imported calendar events ───────────────────────────────────────────────
   Read-only blocks from a subscribed calendar. They sit behind task blocks
   (z-index 0 vs the task wrap's stacking on hover) and carry no grip, no resize
   handles and no pointer cursor, because none of those do anything to a feed
   Daybook cannot write back to. Muted and hatched so a glance separates "what is
   already happening" from "what I have planned". */
.week-cal__event[b-v8hf5zyha3] {
    position: absolute;
    left: 1px;
    right: 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-secondary) 45%, transparent);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--mud-palette-text-secondary) 7%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-text-secondary) 7%, var(--mud-palette-surface)) 6px,
        color-mix(in srgb, var(--mud-palette-text-secondary) 11%, var(--mud-palette-surface)) 6px,
        color-mix(in srgb, var(--mud-palette-text-secondary) 11%, var(--mud-palette-surface)) 12px
    );
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    cursor: default;
    z-index: 0;
}

.week-cal__event-title[b-v8hf5zyha3] {
    font-size: 0.72rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-cal__event-time[b-v8hf5zyha3] {
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.week-cal__allday-item--event[b-v8hf5zyha3] {
    opacity: 0.9;
}

.week-cal__allday-chip--event[b-v8hf5zyha3] {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 4px;
    border-left: 3px solid color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
/* /Components/Timing/StopwatchPill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The clocks — folio bar and ledger panel.
 *
 * Diurnal, pushed: the bar is a ruled box in the strip rather than a lozenge
 * (print has corners — see the radius scale in app.css), and the panel is set
 * like a wire desk, each running clock a ruled entry in a column of readings.
 *
 * Two things carry the whole design:
 *
 *  1. The readings are a COLUMN. Same size, same face, right-aligned to a fixed
 *     width, seconds set a step quieter than the minutes. Three clocks can then
 *     be compared by running the eye down the figures instead of reading each
 *     one — which is the entire reason for showing them together.
 *
 *  2. Live is said with a RAIL, not with type. The open entry takes a chartreuse
 *     rule down its left edge and a wash behind it; nothing is laid over the
 *     figure. (An earlier pass marked the reading itself, which read as
 *     highlighted search text rather than as the clock in hand.)
 *
 * Spacing, margins and the shared controls come from Tailwind utilities and the
 * .q-* components; what is left here is the geometry, the rail, and the motion.
 *
 * Vermilion is reserved for overdue and means nothing else, so the overlap
 * caution is set in ochre. Chartreuse is a fill, never type: readings that need
 * to carry the marker family use --q-accent-text.
 * ═══════════════════════════════════════════════════════════════════════════ */

.stopwatch[b-0q11brrr9a] {
    position: relative;
    flex-shrink: 0;
}

/* ── The folio bar ─────────────────────────────────────────────────────────
 * One box holding every clock on show, hairline-ruled between them, so the
 * strip reads as a single piece of furniture rather than a row of loose pills.
 * ────────────────────────────────────────────────────────────────────────── */

.clockbar[b-0q11brrr9a] {
    display: inline-flex;
    align-items: stretch;
    height: var(--bs-folio-h, 26px);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-sm, 2px);
    background: none;
    transition: border-color 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

/* Deliberately not `overflow: hidden`. On a touch screen the folio stretches each
   control's tap target to 44px with a ::after overlay that reaches well outside
   this box (see the touch-target block in BroadsheetShell.razor.css); clipping to
   the bar would hand the clocks back the 26px target that block exists to fix.
   At a 2px radius there is nothing at the corners worth clipping anyway. */

.clockbar:not(.clockbar--on):hover[b-0q11brrr9a] {
    border-color: color-mix(in srgb, var(--q-accent) 45%, var(--q-line));
}

/* Something is running: the box takes the marker wash and a solid chartreuse
   rule down its leading edge, so the line reads live from the corner of the eye,
   before any figure has been read. The rule is an inset shadow rather than a
   border so it does not shift the contents by its own width. */
.clockbar--on[b-0q11brrr9a] {
    border-color: color-mix(in srgb, var(--q-accent) 55%, var(--q-line));
    background: var(--q-accent-soft);
    box-shadow: inset 2px 0 0 var(--q-accent);
}

.clockbar__entry[b-0q11brrr9a] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--q-ink-muted);
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.clockbar--on .clockbar__entry[b-0q11brrr9a] {
    color: var(--q-ink);
}

/* The rail owes the first entry a little room; the rest sit as they are. */
.clockbar--on .clockbar__entry:first-child[b-0q11brrr9a] {
    padding-left: 11px;
}

.clockbar__entry:hover[b-0q11brrr9a] {
    background: var(--q-accent-softer);
    color: var(--q-ink);
}

.clockbar--on .clockbar__entry:hover[b-0q11brrr9a] {
    background: color-mix(in srgb, var(--q-accent) 18%, transparent);
}

.clockbar__entry:focus-visible[b-0q11brrr9a] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: -2px;
}

/* The rule between two clocks — the folio's own divider, cut to the box. */
.clockbar__rule[b-0q11brrr9a] {
    width: 1px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--q-accent-text) 28%, transparent);
}

/* A live clock, said in the smallest mark the strip has room for: a filled dot
   inside a soft halo, breathing on the halo rather than flicking the dot's own
   opacity — a light that pulses reads as running, a light that blinks out reads
   as a fault. */
.clockbar__dot[b-0q11brrr9a] {
    position: relative;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-accent);
    box-shadow: 0 0 0 3px var(--q-accent-soft);
    animation: clock-breathe-b-0q11brrr9a 2.4s ease-in-out infinite;
}

@keyframes clock-breathe-b-0q11brrr9a {
    0%, 100% { box-shadow: 0 0 0 2px var(--q-accent-soft); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 22%, transparent); }
}

/* Held, not running: the pulse stops and the fill hollows out, so a paused clock
   is distinguishable from a live one at a glance and from across the folio line. */
.clockbar__dot--held[b-0q11brrr9a] {
    animation: none;
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--q-ink-muted);
}

/* The reading leads the entry and is the largest thing in it. A clock in the
   chrome exists to be read at a glance; the project name answers the second
   question, so it is set smaller and quieter behind it. */
.clockbar__elapsed[b-0q11brrr9a] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--q-ink);
}

.clockbar__secs[b-0q11brrr9a] {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--q-ink-faint);
}

.clockbar__elapsed--held[b-0q11brrr9a],
.clockbar__elapsed--held .clockbar__secs[b-0q11brrr9a] {
    color: var(--q-ink-faint);
}

.clockbar__project[b-0q11brrr9a] {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.66rem;
    color: var(--q-ink-faint);
}

.clockbar--on .clockbar__entry:hover .clockbar__project[b-0q11brrr9a] {
    color: var(--q-ink-muted);
}

/* ── The idle face ─────────────────────────────────────────────────────────
 * A punch clock has two facts on its face: the action it invites and the record
 * it keeps. Idle, the bar says both — the verb behind the start glyph, and the
 * day's banked total as a second ruled entry — in the same entry grammar the
 * running state uses, so the instrument changes tense, never shape.
 * ────────────────────────────────────────────────────────────────────────── */

.clockbar__idle[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* A filled triangle carries more mass per pixel than the outline badges do, so
   it is cut a step under the icon size the strip's other glyphs use. */
.clockbar__entry--idle .clockbar__start-glyph[b-0q11brrr9a] {
    font-size: 13px;
}

/* The day's reading. Banked time speaks the timesheet's voice — "2h 45m" — and
   sits a step quieter than a live reading: it is a fact on file, not a figure
   in motion. Hover hands it full ink, the same bargain the project names get. */
.clockbar__today-num[b-0q11brrr9a] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--q-ink-muted);
}

.clockbar__today:hover .clockbar__today-num[b-0q11brrr9a] {
    color: var(--q-ink);
}

.clockbar__today-label[b-0q11brrr9a] {
    font-size: 0.66rem;
    color: var(--q-ink-faint);
}

/* The stretch just landed: the figure the face flips to has just grown by the
   clock that was stopped, and one wash of the marker — put down, let go — is
   what ties the cause to the effect. */
@keyframes clock-today-land-b-0q11brrr9a {
    from { background-color: var(--q-accent-soft); }
    to   { background-color: transparent; }
}

.clockbar__today--landed[b-0q11brrr9a] {
    animation: clock-today-land-b-0q11brrr9a 1.3s ease-out both;
}

/* The clocks that did not fit. Set as a count first so it reads as an overflow
   marker and not as another project. */
.clockbar__more-count[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--q-accent-text);
}

/* ── The ledger panel ──────────────────────────────────────────────────────*/

.clockpanel[b-0q11brrr9a] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1300;
    width: 364px;
    max-width: calc(100vw - 24px);
    padding: 13px 16px 16px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md, 2px);
    background: var(--q-surface-raised);
    box-shadow: var(--q-shadow-2);
    text-align: left;
    /* The panel hangs off the folio line in the DOM, so the strip's own voice —
       mono, tracked, uppercase — inherits straight into its prose. The desk
       speaks the sheet's body voice; the kicker and the status marks state
       their caps and mono deliberately, on their own classes. */
    font-family: var(--q-font-body);
    font-size: 0.875rem;
    letter-spacing: normal;
    text-transform: none;
    /* The wire above the desk: one chartreuse rule across the head of the sheet. */
    border-top: 2px solid var(--q-accent);
    animation: clock-panel-in-b-0q11brrr9a 160ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes clock-panel-in-b-0q11brrr9a {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.clockpanel__head[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.clockpanel__kicker[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

 /* Pulled out to the panel's own edges so that every rule in the column — the
    one above the first entry included — runs the full width of the sheet, and
    so the open entry's rail sits on the margin rather than inside it. */
.clockpanel__ledger[b-0q11brrr9a] {
    list-style: none;
    margin: 0 -16px;
    padding: 0;
    border-top: 1px solid var(--q-line);
}

/* Each clock is an entry in a ruled column, and they set themselves down in the
   order they were started rather than arriving all at once.

   A rail that stopped short of the margin would read as a decoration on the
   row rather than as the row being held, so the ledger carries the bleed and
   the entry's own left rule sits on the panel's edge. */
.clockrow[b-0q11brrr9a] {
    padding-left: 14px;
    padding-right: 16px;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--q-line-soft);
    transition: background-color 140ms ease, border-left-color 140ms ease;
    animation: clock-row-in-b-0q11brrr9a 260ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
    animation-delay: calc(var(--row, 0) * 45ms);
}

@keyframes clock-row-in-b-0q11brrr9a {
    from { opacity: 0; transform: translateX(-5px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* The one in hand. Rail and wash, and nothing laid over the figure itself. A
   held clock keeps the wash but not the chartreuse: the rail means live. */
.clockrow--open[b-0q11brrr9a] {
    border-left-color: var(--q-accent);
    background: var(--q-accent-soft);
}

.clockrow--open.clockrow--held[b-0q11brrr9a] {
    border-left-color: var(--q-ink-faint);
    background: var(--q-accent-softer);
}

.clockrow__head[b-0q11brrr9a] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 3px 12px;
    width: 100%;
    padding: 11px 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.clockrow:not(.clockrow--open) .clockrow__head:hover[b-0q11brrr9a] {
    background: var(--q-accent-softer);
}

.clockrow__head:focus-visible[b-0q11brrr9a] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: -2px;
}

/* The figure is the point of the entry: mono, tabular, right-aligned to a fixed
   width so every reading in the panel lines up on its colon whatever the hour.
   Bitten into the sheet rather than laid on it. */
.clockrow__reading[b-0q11brrr9a] {
    min-width: 6.4ch;
    text-align: right;
    font-family: var(--q-font-mono);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--q-ink);
    text-shadow: var(--q-press);
}

/* The seconds, a step down. They change every tick and carry the least — set
   them quieter and the figure stops flickering for attention. */
.clockrow__secs[b-0q11brrr9a] {
    font-size: 0.76em;
    font-weight: 400;
    color: var(--q-ink-faint);
}

.clockrow__reading--held[b-0q11brrr9a],
.clockrow__reading--held .clockrow__secs[b-0q11brrr9a] {
    color: var(--q-ink-faint);
}

.clockrow__project[b-0q11brrr9a] {
    font-family: var(--q-font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--q-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clockrow--held .clockrow__project[b-0q11brrr9a] {
    color: var(--q-ink-muted);
}

/* The state line, under the project name and in the second column so it hangs
   off the same left edge rather than off the figure. */
.clockrow__sub[b-0q11brrr9a] {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--q-ink-faint);
}

.clockrow__dot[b-0q11brrr9a] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-accent);
    box-shadow: 0 0 0 3px var(--q-accent-soft);
    animation: clock-breathe-b-0q11brrr9a 2.4s ease-in-out infinite;
}

.clockrow__dot--held[b-0q11brrr9a] {
    animation: none;
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--q-ink-muted);
}

/* Running or paused, said in the panel's own small-caps voice instead of as a
   lowercase word lost in the note. It is the second thing read after the figure,
   so it is given a shape of its own rather than being more grey prose. */
.clockrow__status[b-0q11brrr9a] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--q-accent-text);
}

.clockrow__status--held[b-0q11brrr9a] {
    color: var(--q-ink-faint);
}

.clockrow__sep[b-0q11brrr9a] {
    flex-shrink: 0;
    color: var(--q-line);
}

.clockrow__note[b-0q11brrr9a] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clockrow__body[b-0q11brrr9a] {
    padding: 0 0 13px;
    animation: clock-body-in-b-0q11brrr9a 180ms ease both;
}

@keyframes clock-body-in-b-0q11brrr9a {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* The start, set as a sentence with one editable word in it rather than as a
   labelled field. It is a correction that is occasionally needed — giving it a
   boxed input made the rarest control in the panel the largest thing in it. */
.clockrow__started[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--q-ink-faint);
}

.clockrow__started label[b-0q11brrr9a] {
    margin: 0;
    flex-shrink: 0;
}

/* Specificity note: this must out-weigh MudBlazor's unlayered normalize on bare
   `input`, which a class selector does — see the cascade rule in tailwind.css. */
.clockrow__started input[b-0q11brrr9a] {
    /* Wide enough for "09:41 AM". Chrome's intrinsic width for a time field is
       computed off the default font rather than this one, so leaving it to size
       itself clipped the meridiem clean off at this size. */
    width: 12ch;
    padding: 1px 5px 1px 2px;
    border: 0;
    border-bottom: 1px dotted var(--q-line);
    border-radius: 0;
    background: none;
    font-family: var(--q-font-mono);
    font-size: 0.72rem;
    color: var(--q-ink-muted);
    cursor: text;
    transition: border-color 120ms ease, color 120ms ease;
}

.clockrow__started input:hover[b-0q11brrr9a],
.clockrow__started input:focus[b-0q11brrr9a] {
    border-bottom-color: var(--q-accent-text);
    color: var(--q-ink);
    outline: none;
}

/* Chrome hangs a picker glyph inside the field; at this size it is most of the
   control. The figure is the affordance here — the dotted rule under it. */
.clockrow__started input[b-0q11brrr9a]::-webkit-calendar-picker-indicator {
    display: none;
}

/* ── Totals, cautions and the foot ─────────────────────────────────────────*/

/* The sum, set as a ledger rule: label in mono caps on the left, figure right,
   and given the panel's heavier rule above it so it reads as the column's
   total rather than as a fourth clock. */
.clockpanel__total[b-0q11brrr9a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 0;
}

.clockpanel__total-label[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.clockpanel__total-figure[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--q-ink);
}

.clockpanel__total-secs[b-0q11brrr9a] {
    font-size: 0.78em;
    font-weight: 400;
    color: var(--q-ink-faint);
}

/* Ochre, not vermilion: overlapping clocks are worth saying out loud, but the
   sheet's only alarm colour means late and nothing else. */
.clockpanel__overlap[b-0q11brrr9a] {
    margin-top: 9px;
    padding: 7px 10px;
    border-left: 2px solid var(--pri-medium);
    background: color-mix(in srgb, var(--pri-medium) 9%, transparent);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--q-ink-muted);
}

/* One rank of controls, all cut to the same height. Stop and Pause lead; the
   gap pushes Switch and Discard to the far end, so the row reads from the thing
   you came here to do to the thing you didn't. */
.clockpanel__controls[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.clockpanel__controls .q-btn[b-0q11brrr9a] {
    height: 30px;
    padding: 0 13px;
    font-size: 0.8rem;
}

.clockpanel__controls .q-btn--text[b-0q11brrr9a] {
    padding: 0 7px;
}

.clockpanel__gap[b-0q11brrr9a] {
    flex: 1;
}

.clockpanel__discard[b-0q11brrr9a] {
    color: var(--q-ink-muted);
}

.clockpanel__discard:hover[b-0q11brrr9a] {
    color: var(--pri-high);
    background: color-mix(in srgb, var(--pri-high) 10%, transparent);
}

.clockpanel__foot[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--q-line);
}

.clockpanel__foot .q-btn[b-0q11brrr9a] {
    height: 30px;
    padding: 0 12px;
    font-size: 0.8rem;
    gap: 5px;
}

.clockpanel__timesheet[b-0q11brrr9a] {
    margin-left: auto;
}

/* The one question in this panel that destroys something, so it is asked in its
   own ruled-off box rather than as another button in a row. */
.clockpanel__confirm[b-0q11brrr9a] {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--pri-high) 35%, transparent);
    border-radius: var(--radius-sm, 2px);
    background: color-mix(in srgb, var(--pri-high) 8%, transparent);
}

.clockpanel__confirm-text[b-0q11brrr9a] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--q-ink);
}

.clockpanel__confirm .clockpanel__controls[b-0q11brrr9a] {
    margin-top: 9px;
}

.clockpanel__note[b-0q11brrr9a] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--q-ink-muted);
}

.clockpanel__hint[b-0q11brrr9a] {
    font-size: 0.78rem;
    color: var(--q-ink-faint);
}

/* Nothing running, panel open from somewhere other than the picker — a dial at
   rest rather than an empty box. */
.clockpanel__empty[b-0q11brrr9a] {
    padding: 10px 0 2px;
}

.clockpanel__empty-reading[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--q-ink-faint);
    text-shadow: var(--q-press);
}

/* The account has something on it: the reading takes ink. Faint is for blank. */
.clockpanel__empty-reading--inked[b-0q11brrr9a] {
    color: var(--q-ink);
}

/* ── Narrow ────────────────────────────────────────────────────────────────
 * The strip loses the names before it loses the readings: which project is a
 * detail the panel carries, but how long it has been is the whole point of
 * having the clock in the line at all.
 * ────────────────────────────────────────────────────────────────────────── */

/* The second clock gives up its name first — one name in the line is enough to
   anchor which is which, and the readings are what the line is for. Counted with
   nth-of-type over buttons, so the hairline spans between entries do not shift
   the count. */
@media (max-width: 1180px) {
    .clockbar__entry:nth-of-type(n + 2) .clockbar__project[b-0q11brrr9a] {
        display: none;
    }
}

@media (max-width: 980px) {
    .clockbar__project[b-0q11brrr9a] {
        display: none;
    }

    .clockbar__entry[b-0q11brrr9a] {
        padding: 0 8px;
        gap: 5px;
    }
}

/* The idle face holds its words longer than the running one holds its names:
   the verb is the affordance this face exists for, and with nothing running the
   strip has the room. On a phone the glyph and the figure carry it — ▸ | 2h 45m
   — which is the same bargain the running clocks strike at this width. */
@media (max-width: 639.98px) {
    .clockbar__idle[b-0q11brrr9a],
    .clockbar__today-label[b-0q11brrr9a] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clockbar__dot[b-0q11brrr9a],
    .clockrow__dot[b-0q11brrr9a] {
        animation: none;
    }

    .clockpanel[b-0q11brrr9a],
    .clockrow[b-0q11brrr9a],
    .clockrow__body[b-0q11brrr9a],
    .clockbar__today--landed[b-0q11brrr9a] {
        animation: none;
    }
}