/* /Components/Account/Pages/Manage/Passkeys.razor.rz.scp.css */
.mgmt-passkeys-intro[b-vrw7mu8sej] {
    font-size: 0.9rem;
    color: 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(--q-line);
    background: var(--q-bg);
}

.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(--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-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(--q-line);
    background: var(--q-bg);
    margin-bottom: 24px;
}

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

.mgmt-passkeys-empty p[b-vrw7mu8sej] {
    margin: 0;
    font-size: 0.9rem;
    color: 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(--q-line);
}

.mgmt-passkeys-add__title[b-vrw7mu8sej] {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: 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;
}

/* A native button (.q-bare-btn) that keeps the palette's row layout. */
.cmd-result[b-wixsz353yu] {
    width: 100%;
    color: var(--q-ink);
}

.cmd-result:focus-visible[b-wixsz353yu] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: -2px;
}

.cmd-result__kind[b-wixsz353yu] {
    display: block;
    font-size: 0.75rem;
    color: var(--q-ink-muted);
}

.cmd-status[b-wixsz353yu] {
    padding: 20px;
    text-align: center;
    color: var(--q-ink-muted);
}
/* /Components/Layout/AccountMenu.razor.rz.scp.css */
/* The button is drawn by QMenu, so it does not carry this file's scope attribute:
   its rules reach it through ::deep from .account-menu, the wrapper this component
   does draw (display: contents, so it adds no box). What the button shows — the
   avatar, the name — is this component's own markup and is styled directly. */
.account-menu[b-7qplz9t3pz] {
    display: contents;
}

.account-menu[b-7qplz9t3pz]  .account-menu__button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--q-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.account-menu[b-7qplz9t3pz]  .account-menu__button:hover,
.account-menu[b-7qplz9t3pz]  .account-menu__button:focus-visible {
    background: var(--q-hover);
    color: var(--q-ink);
    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[b-7qplz9t3pz]  .account-menu__button--compact {
    justify-content: center;
    width: var(--bs-folio-h, 26px);
    height: var(--bs-folio-h, 26px);
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    color: var(--q-ink-muted);
}

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

.account-menu__avatar[b-7qplz9t3pz] {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

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

/* An icon avatar is asked for at Size.Medium; scale it to the smaller disc. */
.account-menu__button--compact .account-menu__avatar[b-7qplz9t3pz]  .q-icon {
    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(--q-ink-muted);
}

.account-menu__more[b-7qplz9t3pz] {
    color: var(--q-ink-muted);
    flex-shrink: 0;
}

.account-menu__logout-form[b-7qplz9t3pz] {
    margin: 0;
}
/* /Components/Layout/BroadsheetIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The Index — the broadsheet's contents column, set as a white card.
 *
 * 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 strip of pills spanning the grid below 1024px.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bs__index[b-nwqfy85xps] {
    order: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 16px 10px;
    border-radius: var(--radius-xl);
    background: var(--q-surface-raised);
}

.bs__kicker[b-nwqfy85xps] {
    padding: 0 12px;
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    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 line. */
.bs__index-head[b-nwqfy85xps] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 4px;
}

.bs__index-add[b-nwqfy85xps] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: var(--q-font-body);
    font-size: 1rem;
    line-height: 1;
    color: var(--q-ink-muted);
    transition: color 130ms ease, background-color 130ms ease;
}

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

.bs__index-input[b-nwqfy85xps] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-sm);
    background: var(--q-surface);
    font-family: var(--q-font-body);
    font-size: 0.85rem;
    color: var(--q-ink);
}

.bs__index-input:focus[b-nwqfy85xps] {
    outline: none;
    border-color: var(--q-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 45%, transparent);
}

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

.bs__index-list[b-nwqfy85xps] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bs__index-link[b-nwqfy85xps] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    color: var(--q-ink-muted);
    text-decoration: none;
    transition: color 130ms ease, background-color 130ms ease;
}

.bs__index-link:hover[b-nwqfy85xps] {
    background: color-mix(in srgb, var(--q-well) 55%, transparent);
    color: var(--q-ink);
}

.bs__index-link:focus-visible[b-nwqfy85xps] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

/* The page you are on sits in the lavender well. */
.bs__index-link--on[b-nwqfy85xps],
.bs__index-link--on:hover[b-nwqfy85xps] {
    background: var(--q-well);
    color: var(--q-well-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: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* The active entry's name. The well behind the whole row marks it now, so the
   name itself carries no highlighter of its own. */
.bs__mark[b-nwqfy85xps] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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-link--on .bs__num[b-nwqfy85xps] {
    color: inherit;
}

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

/* ══ < 1024px — the card folds to a horizontal strip of pills ═══════════ */
@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;
        padding: 0;
        border-radius: 0;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 6px;
        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;
        padding: 0;
    }

    .bs__index-add[b-nwqfy85xps] {
        width: 34px;
        height: 34px;
        background: var(--q-surface-raised);
    }

    .bs__index-input[b-nwqfy85xps] {
        width: 9rem;
        margin-top: 0;
        flex-shrink: 0;
        background: var(--q-surface-raised);
    }

    .bs__index-list[b-nwqfy85xps] {
        margin: 0;
        flex-direction: row;
        gap: 6px;
        flex-shrink: 0;
    }

    .bs__index-link[b-nwqfy85xps] {
        padding: 8px 14px;
        gap: 6px;
        white-space: nowrap;
        border-radius: var(--radius-full);
        background: var(--q-surface-raised);
    }

    /* On the lavender page the well would barely show, so the strip marks the
       page you are on in ink instead. */
    .bs__index-link--on[b-nwqfy85xps],
    .bs__index-link--on:hover[b-nwqfy85xps] {
        background: var(--q-ink);
        color: var(--q-surface-raised);
    }
}

/* ── The strip as a thumb target ───────────────────────────────────────────
 * Folded into a strip, these links carry the app's whole navigation, and the
 * pill padding above leaves each one about 34px tall — short of the 44px 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.
 *
 * So on a touch screen the pills are padded to the full 44px, with 2px of
 * strip padding around them so the focus ring is not clipped.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) and (pointer: coarse) {
    .bs__index[b-nwqfy85xps] {
        padding: 2px 0;
    }

    .bs__index-link[b-nwqfy85xps] {
        padding: 13px 16px;
    }
}

/* On phones the full contents is a disclosure, so every section is discoverable. */
.bs__mobile-bar[b-nwqfy85xps] { display: none; }
.bs__index-contents[b-nwqfy85xps] { display: contents; }
@media (max-width: 1023.98px) {
    .bs__index[b-nwqfy85xps] { display: block; overflow: visible; }
    .bs__mobile-bar[b-nwqfy85xps] { display: flex; gap: 6px; align-items: center; }
    .bs__mobile-bar .bs__index-link[b-nwqfy85xps] { flex: 1; justify-content: center; padding: 12px 10px; }
    .bs__sections-toggle[b-nwqfy85xps] {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 44px; padding: 10px 14px; border: 1px solid var(--q-line);
        border-radius: var(--radius-full); background: var(--q-surface-raised);
        color: var(--q-ink); font: inherit; font-size: .88rem; cursor: pointer;
    }
    .bs__sections-toggle:focus-visible[b-nwqfy85xps] { outline: 2px solid var(--q-accent-text); outline-offset: 2px; }
    .bs__index-contents[b-nwqfy85xps] { display: none; }
    .bs__index-contents--open[b-nwqfy85xps] {
        display: block; margin-top: 8px; padding: 12px; max-height: 55dvh; overflow-y: auto;
        border: 1px solid var(--q-line); border-radius: var(--radius-lg); background: var(--q-surface-raised);
    }
    .bs__index-contents .bs__kicker[b-nwqfy85xps], .bs__index-contents .bs__index-rule[b-nwqfy85xps],
    .bs__index-contents .bs__index-empty[b-nwqfy85xps] { display: block; }
    .bs__index-contents .bs__index-head[b-nwqfy85xps] { margin-top: 8px; }
    .bs__index-contents .bs__index-list[b-nwqfy85xps] { flex-direction: column; gap: 2px; margin-top: 6px; }
    .bs__index-contents .bs__index-link[b-nwqfy85xps] { min-height: 44px; border-radius: var(--radius-md); padding: 10px 12px; }
    .bs__index-contents .bs__index-input[b-nwqfy85xps] { width: 100%; margin-top: 8px; }
}
/* /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, each on a small white card of its own. The rail places
 * itself in the shell's grid (order: 3), so on a phone it drops below the page
 * body and lays its cards out side by side where they fit. See
 * BroadsheetShell.razor.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

.marginalia[b-fbq35tmrai] {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow-y: auto;
}

.marginalia__block[b-fbq35tmrai] {
    flex-shrink: 0;
    padding: 16px 18px 18px;
    border-radius: var(--radius-xl);
    background: var(--q-surface-raised);
}

.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: 0;
}

/* ── 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] {
    font-weight: 600;
    color: var(--q-ink);
}

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

.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] {
    color: var(--q-accent-ink);
    background: var(--q-accent);
    border-radius: 0.2em;
}

.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;
    border-radius: 4px 4px 2px 2px;
    background: var(--q-well);
    min-height: 3px;
}

.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-soft);
    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__block[b-fbq35tmrai] {
        padding: 14px 16px 16px;
    }

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

/* ══ Stacked (< 900px) — cards under the agenda ══════════════════════
   Each block is its own card, so they sit side by side where there is room and
   stack on a phone. */
@media (max-width: 899.98px) {
    .marginalia[b-fbq35tmrai] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
        gap: 12px;
        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;
    }

    /* 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 and the scroll. There
 * is no other top bar and no drawer above it. The page is lavender; the index,
 * the page body and each block of the marginalia sit on it as white cards.
 *
 * RESPONSIVE CONTRACT (the whole point of the layout):
 *   >= 1024px  three columns — index | page | marginalia
 *   900-1023px two columns   — page | marginalia; index folds to a scrolling
 *                              strip of pills under the masthead
 *   < 900px    one column    — masthead, index strip, page, then marginalia
 *                              last. The page's own business is always
 *                              reachable without scrolling past the furniture.
 *                              (Below 900px a rail beside the page card would
 *                              leave the list too narrow to read a title.)
 * 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: 32px;

    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);
}

/* 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 the page's own overlays. */
.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 carries the mark on the left and the app's tools on the right, the
   tools gathered into one white capsule the way the iPhone app gathers its
   top-right buttons. */
.bs__folio[b-z181j1o2wg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--q-font-body);
    font-size: 0.8rem;
    color: var(--q-ink-muted);
}

/* 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] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--q-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.bs__folio-brand:focus-visible[b-z181j1o2wg] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 4px;
    border-radius: 8px;
}

.bs__folio-brand[b-z181j1o2wg]  .daybreak {
    flex-shrink: 0;
}

.bs__folio-name[b-z181j1o2wg] {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--q-font-display);
    font-size: 1.45rem;
    font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* The clock's capsule and the tools' capsule, seated as a pair. The gap is the
   point: two capsules a few pixels apart read as two kinds of thing, where one
   long capsule read as a single menu with the clock filed in it. */
.bs__folio-right[b-z181j1o2wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Every control in here is cut to --bs-folio-h, so the capsule's height is set by
   that and not by whichever control happens to be tallest. */
.bs__folio-tools[b-z181j1o2wg] {
    display: flex;
    align-items: center;
    height: var(--bs-folio-h);
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-full);
    background: var(--q-surface-raised);
    box-shadow: var(--q-shadow-1);
    flex-shrink: 0;
}

/* Separates the working tools from the account cluster. */
.bs__folio-div[b-z181j1o2wg] {
    width: 1px;
    height: 18px;
    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: 6px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: var(--q-ink-muted);
    transition: color 130ms ease, background-color 130ms ease;
}

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

/* The icon buttons the folio's components draw (the bell) 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 they do not read as a second kind of control in one line. */
.bs__folio-tools[b-z181j1o2wg]  .q-icon-btn {
    width: var(--bs-folio-h);
    height: var(--bs-folio-h);
    border-radius: var(--radius-full);
    color: var(--q-ink-muted);
}

.bs__folio-tools[b-z181j1o2wg]  .q-icon-btn:hover {
    background: var(--q-well);
    color: var(--q-ink);
}

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

/* ── Touch targets ─────────────────────────────────────────────────────────
 * The capsule is deliberately slim — --bs-folio-h is 32px, so the line reads as
 * one piece of furniture rather than a row of buttons. 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 32px. 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-right[b-z181j1o2wg]  .stopwatch__pill,
    .bs__folio-tools[b-z181j1o2wg]  .notif-bell__button,
    .bs__folio-tools[b-z181j1o2wg]  .account-menu__button--compact {
        position: relative;
    }

    .bs__folio-btn[b-z181j1o2wg]::after,
    .bs__folio-tools[b-z181j1o2wg]  .ongoing-pill::after,
    .bs__folio-right[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));
    }
}

/* Baseline, not flex-end: the figures are set on the dateline, so they can never
   be taller than the line they belong to. And they follow the date rather than
   being pushed to the far edge — out there they sat directly under the folio's
   tools and read as a second strip of chrome crowding the first, so the right
   side of this row is left empty on purpose. Wrap, not a column switch: they
   drop under the date only when the two genuinely do not fit side by side — a
   narrow window, or a long list name. */
.bs__mast-row[b-z181j1o2wg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 40px;
    row-gap: 10px;
    padding: 22px 4px 18px;
}

/* 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: 500;
    font-size: clamp(1.75rem, 4.2vw, 3.3rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--q-ink);
    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.6rem, 3.4vw, 2.7rem);
    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;
}

/* The day's three figures, set as one line of type: the figure in the display
   face, its name after it in the mono the cards use for their kickers, and a
   hairline between each pair. No card, no fill — they used to be three cards,
   and a card is taller than a line, so the row stood up into the folio's tools. */
.bs__conditions[b-z181j1o2wg] {
    display: flex;
    align-items: baseline;
    margin: 0;
    flex-shrink: 0;
    font-size: 1.7rem;
}

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

/* The hairline rides the second and third figures rather than living in the
   markup, where it would be a stray child of the <dl>. Sized in the figures' own
   em and seated on the baseline, so it stands exactly as tall as a numeral. */
.bs__condition + .bs__condition[b-z181j1o2wg]::before {
    content: "";
    order: -2;
    align-self: baseline;
    width: 1px;
    height: 0.62em;
    margin: 0 0.5em;
    background: var(--q-line);
}

.bs__condition-num[b-z181j1o2wg] {
    order: -1;
    margin: 0;
    font-family: var(--q-font-display);
    font-size: 1em;
    font-weight: 500;
    font-variation-settings: "opsz" 144;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--q-ink);
    transition: color 200ms ease;
}

.bs__condition-label[b-z181j1o2wg] {
    font-family: var(--q-font-mono);
    font-size: max(0.4em, 0.62rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

/* A zero steps back so the eye goes to what has something in it. */
.bs__condition--nil .bs__condition-num[b-z181j1o2wg],
.bs__condition--nil .bs__condition-label[b-z181j1o2wg] {
    color: var(--q-ink-faint);
}

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

/* The day's work done takes the house accent — only the figure; the label
   stays muted so the line does not turn into a row of coloured badges. */
.bs__condition--won .bs__condition-num[b-z181j1o2wg] {
    color: var(--q-accent-text);
}

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

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

/* Folded while a task is open beside the list, below the width where list, task and
   marginalia all fit (about 1800px: there the list still has some 670px to itself). The
   page takes the band as it does with marginalia stood down. Below 900px the marginalia
   is stacked under the page rather than beside it, so it stays put there. */
@media (max-width: 1799.98px) {
    .bs__cols--folded[b-z181j1o2wg] {
        grid-template-columns: 216px minmax(0, 1fr);
    }
}

@media (min-width: 900px) and (max-width: 1799.98px) {
    .bs__cols--folded[b-z181j1o2wg]  .marginalia {
        display: none;
    }
}

/* Focus: one task has the sheet, so both rails fold away at every width and the page
   takes the whole band. The rows are reset too — below 1024px the grid keeps a first row
   for the index strip, which would otherwise take the page. */
.bs__cols--focus[b-z181j1o2wg] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.bs__cols--focus[b-z181j1o2wg]  .bs__index,
.bs__cols--focus[b-z181j1o2wg]  .marginalia {
    display: none;
}

/* The page body: the largest card on the sheet. */
.bs__page[b-z181j1o2wg] {
    order: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 22px 22px;
    border-radius: var(--radius-xl);
    background: var(--q-surface-raised);
}

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

/* ══ 900–1023px — index folds to a strip of pills, marginalia keeps its column ══ */
@media (max-width: 1023.98px) {
    .bs__cols[b-z181j1o2wg] {
        grid-template-columns: minmax(0, 1fr) 240px;
        /* 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);
        gap: 14px;
        padding: 0 18px 20px;
    }

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

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

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

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

    .bs__mast-row[b-z181j1o2wg] {
        column-gap: 24px;
        row-gap: 8px;
        padding: 20px 2px 16px;
    }

    .bs__conditions[b-z181j1o2wg] {
        font-size: 1.45rem;
    }

    /* Less gutter inside the page card, so the list keeps its width beside the rail. */
    .bs__page[b-z181j1o2wg] {
        padding: 4px 14px 16px;
    }
}

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

    .bs__cols[b-z181j1o2wg] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* 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;
    }

    /* 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 space 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. Stacked 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;
    }
}

/* ══ < 640px — phone spacing ════════════════════════════════════════════ */
@media (max-width: 639.98px) {
    .bs__masthead[b-z181j1o2wg] {
        padding: 12px 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: 2px;
    }

    .bs__folio-right[b-z181j1o2wg] {
        gap: 6px;
    }

    /* 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] {
        padding: 0 14px 20px;
    }

    .bs__mast-row[b-z181j1o2wg] {
        padding: 16px 2px 14px;
    }

    .bs__conditions[b-z181j1o2wg] {
        font-size: 1.3rem;
    }

    .bs__page[b-z181j1o2wg] {
        padding: 4px 6px 12px;
        border-radius: var(--radius-lg);
    }
}

/* ══ <= 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: 12px 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/FolioPlan.razor.rz.scp.css */
/* The plan beside the name on the folio line. The mark itself (.pro-mark) is a
   global device, shared with the welcome and pricing pages; only its seating in
   the folio line is decided here. */

.bs__folio-plan[b-ym547k0y8h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* The folio spreads its children apart; this one stays with the name and pushes
       the tools to the right instead. */
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.bs__folio-plan[b-ym547k0y8h]  .pro-mark {
    font-size: 0.72rem;
}

.bs__folio-plan-note[b-ym547k0y8h] {
    font-size: 0.75rem;
    color: var(--q-ink-muted);
    transition: color 130ms ease;
}

.bs__folio-plan--free .bs__folio-plan-note[b-ym547k0y8h] {
    color: var(--q-accent-text);
}

.bs__folio-plan:hover .bs__folio-plan-note[b-ym547k0y8h],
.bs__folio-plan:focus-visible .bs__folio-plan-note[b-ym547k0y8h] {
    color: var(--q-ink);
}

.bs__folio-plan:focus-visible[b-ym547k0y8h] {
    outline: 2px solid var(--q-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* On a phone the folio has the name, the tools and no room for a sentence:
   the mark stays, the figure goes, and the tally at the foot of the index and
   the welcome page carry the number. */
@media (max-width: 640px) {
    .bs__folio-plan[b-ym547k0y8h] {
        margin-left: 0;
    }

    .bs__folio-plan-note[b-ym547k0y8h] {
        display: none;
    }
}

/* On the smallest phones (320px) even the mark is a few pixels too many: the line
   ran the account button off the right-hand edge. The mark gives way, and the
   plan marker at the foot of the index still says which plan this is. */
@media (max-width: 359.98px) {
    .bs__folio-plan[b-ym547k0y8h] {
        display: none;
    }
}
/* /Components/Layout/OngoingPill.razor.rz.scp.css */
/* Cut to the folio's height and the broadsheet's own tokens, the same --q-accent the
   stopwatch pill an inch away uses: two pills doing the same job in the same strip
   are one colour.
   `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 12px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--q-accent) 30%, transparent);
    color: var(--q-ink);
    font: inherit;
    font-size: 0.8rem;
    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) 45%, transparent);
}

.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/PlanMarker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The plan at the foot of the index. Same voice as the contents entries above
 * it — kicker, a line, the figure hung on the right — plus the tally beneath.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bs__plan[b-umhr9m1x1g] {
    margin: 14px 2px 0;
    padding: 12px 12px 10px;
    border-radius: var(--radius-md);
    background: var(--q-surface);
}

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

.bs__plan-link[b-umhr9m1x1g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 3px 0;
    font-size: 0.85rem;
    color: var(--q-ink);
    font-weight: 600;
    text-decoration: none;
}

.bs__plan-note[b-umhr9m1x1g] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--q-ink-muted);
    white-space: nowrap;
}

/* Free is set quiet, and its note is the one call to action in the column:
   the accent text, not a button, so it reads as a line of the contents. */
.bs__plan-link--free .bs__plan-name[b-umhr9m1x1g] {
    color: var(--q-ink-muted);
    font-weight: 500;
}

.bs__plan-link--free .bs__plan-note[b-umhr9m1x1g] {
    color: var(--q-accent-text);
    font-weight: 600;
}

.bs__plan-link:hover .bs__plan-note[b-umhr9m1x1g],
.bs__plan-link:focus-visible .bs__plan-note[b-umhr9m1x1g] {
    color: var(--q-ink);
}

.bs__plan-link:focus-visible[b-umhr9m1x1g] {
    outline: 2px solid var(--q-accent);
    outline-offset: 2px;
}

.bs__plan[b-umhr9m1x1g]  .tally {
    margin-top: 8px;
}

/* Folded into the strip: one entry like the others, no kicker, no tally. */
@media (max-width: 1023.98px) {
    .bs__plan[b-umhr9m1x1g] {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        flex-shrink: 0;
    }

    .bs__plan .bs__kicker[b-umhr9m1x1g],
    .bs__plan[b-umhr9m1x1g]  .tally {
        display: none;
    }

    .bs__plan-link[b-umhr9m1x1g] {
        margin: 0;
        padding: 8px 14px;
        gap: 6px;
        white-space: nowrap;
        border-radius: var(--radius-full);
        background: var(--q-surface-raised);
    }
}

@media (max-width: 1023.98px) and (pointer: coarse) {
    .bs__plan-link[b-umhr9m1x1g] {
        padding: 13px 16px;
    }
}
/* /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;
}


/* The page's own paper, and above everything: what the old component library's
   stylesheet imposed on this dialog with !important, restated here now it is gone. */
#components-reconnect-modal[b-31tpjbzc22] {
    z-index: 9999;
    background-color: var(--q-bg);
    color: var(--q-ink);
    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] {
    min-width: 64px;
    margin: 40px auto;
    border: 0;
    background-color: var(--q-accent-text);
    color: var(--q-accent-ink);
    padding: 6px 24px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    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(--q-ink-muted);
}

[b-ajfy9ry3xx] .notif-bell__button--rail:hover {
    background: var(--q-hover);
    color: var(--q-ink);
}

.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. */
.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(--q-surface);
    border: 1px solid var(--q-line);
    border-radius: 8px;
    box-shadow: var(--q-shadow-2);
    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(--q-line);
    position: sticky;
    top: 0;
    background: var(--q-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(--q-line);
    transition: background 0.15s;
}

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

.notif-overlay[b-ajfy9ry3xx] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

.notif-item[b-ajfy9ry3xx] { width: 100%; }
.notif-item:focus-visible[b-ajfy9ry3xx] { outline: 2px solid var(--q-accent-text); outline-offset: -2px; }
/* /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;
}

/* Clips the table to the card's corners, and scrolls it sideways where the
   column is too narrow for every column and not yet narrow enough to stack. */
.admin-page[b-wztav70rta]  .admin-table-paper {
    border-radius: var(--radius-lg);
    overflow-x: auto;
    border: 1px solid var(--q-line);
}

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

/* An address is one long word; let it break, or it alone sets the table's width. */
.admin-user-cell__name[b-wztav70rta],
.admin-user-cell__email[b-wztav70rta] {
    overflow-wrap: anywhere;
}

.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;
}

/* On a phone the subtitle runs the column's full width rather than hanging under the
   title, where it was left a third of the screen. */
@media (max-width: 599.98px) {
    .admin-page[b-wztav70rta]  .admin-page__subtitle {
        margin-left: 0;
    }
}
/* /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 are .q-card: a hairline and a soft lift. */

/* The figures' grid answers to the page column, not the window: the shell's index
   and marginalia take a share of the width that the window's size says nothing about. */
.admin-page[b-9w8k9hw74y] {
    container-type: inline-size;
}

.admin-grid[b-9w8k9hw74y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.admin-grid--quarters[b-9w8k9hw74y] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (min-width: 520px) {
    .admin-grid--thirds[b-9w8k9hw74y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 820px) {
    .admin-grid--thirds[b-9w8k9hw74y] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-grid--quarters[b-9w8k9hw74y] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.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/AdminFeedback.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-rsrdv8blwd] {
    /* 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: 900px;
    margin: 0 auto;
}

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

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

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

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

/* On a phone the subtitle runs the column's full width rather than hanging under the
   title, where it was left a third of the screen. */
@media (max-width: 599.98px) {
    .admin-page[b-rsrdv8blwd]  .admin-page__subtitle {
        margin-left: 0;
    }
}
/* /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-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;
}

/* On a phone the subtitle runs the column's full width rather than hanging under the
   title, where it was left a third of the screen. */
@media (max-width: 599.98px) {
    .admin-page[b-g3e0fdbtrd]  .admin-page__subtitle {
        margin-left: 0;
    }
}
/* /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;
}

/* Cards are .q-card; a table's card clips it to its corners and scrolls it
   sideways where the column is too narrow for it. */
.admin-card--table[b-qoo8rh30xz] {
    overflow-x: auto;
}

/* The account's facts, two to a row where the page column has room for them. */
.admin-page[b-qoo8rh30xz] {
    container-type: inline-size;
}

.admin-detail-grid[b-qoo8rh30xz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 16px;
}

@container (min-width: 560px) {
    .admin-detail-grid[b-qoo8rh30xz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.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);
}

/* ── Plan ─────────────────────────────────────────────────────────────────── */

/* The grant controls on one line where there is room, wrapping on a phone. The
   summary sentence above them is the record; these are the levers. */
.admin-plan-form[b-qoo8rh30xz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* On a phone the subtitle runs the column's full width rather than hanging under the
   title, where it was left a third of the screen. */
@media (max-width: 599.98px) {
    .admin-page[b-qoo8rh30xz]  .admin-page__subtitle {
        margin-left: 0;
    }
}
/* /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;
}

/* The search field, with its glyph set inside the left of the box. */
.admin-search[b-erj5886k56] {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
}

.admin-search[b-erj5886k56]  .admin-search__icon {
    position: absolute;
    left: 11px;
    color: var(--q-ink-faint);
    pointer-events: none;
}

.admin-search__input[b-erj5886k56] {
    padding-left: 36px;
}

/* The table scrolls inside its card with its header held, rather than the page. Below a
   desktop's width, where the rows stack (q-table--stack-md) and there is no header to
   hold, the page scrolls instead: a scroller inside a scroller is a trap for a thumb. */
.admin-table-scroll[b-erj5886k56] {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

@media (max-width: 959.98px) {
    .admin-table-scroll[b-erj5886k56] {
        max-height: none;
    }
}

/* Clips the table to the card's corners, and scrolls it sideways where the
   column is too narrow for every column and not yet narrow enough to stack. */
.admin-page[b-erj5886k56]  .admin-table-paper {
    border-radius: var(--radius-lg);
    overflow-x: auto;
    border: 1px solid var(--q-line);
}

/* An address is one long word; let it break, or it alone sets the table's width. */
.admin-user-cell__name[b-erj5886k56],
.admin-user-cell__email[b-erj5886k56] {
    overflow-wrap: anywhere;
}

.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;
}

/* On a phone the subtitle runs the column's full width rather than hanging under the
   title, where it was left a third of the screen. */
@media (max-width: 599.98px) {
    .admin-page[b-erj5886k56]  .admin-page__subtitle {
        margin-left: 0;
    }
}
/* /Components/Pages/CountdownsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * Countdowns — the soonest one set large, the rest as a list of dates.
 *
 * "Next up" leads the way Standing By leads the margin: a Fraunces figure, the name
 * beside it, the date, and a bar for how much of the wait is behind you, all washed
 * in the countdown's own color. Below it the rest run as lines, each with its date as
 * a calendar leaf, then Shared with you, then Finished, set quieter.
 * ═══════════════════════════════════════════════════════════════════════════ */

.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__body[b-tt8jl2rizm] {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 24px 28px 40px;
}

.countdowns-page__header[b-tt8jl2rizm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--q-line-soft);
}

.countdowns-page__count[b-tt8jl2rizm] {
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

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

.countdowns-page__empty-title[b-tt8jl2rizm] {
    margin: 18px 0 0;
    font-family: var(--q-font-display);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--q-ink);
}

.countdowns-page__empty-text[b-tt8jl2rizm] {
    margin: 0;
    max-width: 34ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--q-ink-muted);
}

/* ── Next up ─────────────────────────────────────────────────────────────── */
.cd-next[b-tt8jl2rizm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head head"
        "main figure";
    align-items: end;
    gap: 6px 40px;
    padding: 26px 30px 28px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
        color-mix(in srgb, var(--accent) 7%, var(--q-surface-raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--q-line-soft));
}

.cd-next__kicker[b-tt8jl2rizm],
.cd-section__kicker[b-tt8jl2rizm] {
    margin: 0;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.cd-next__head[b-tt8jl2rizm] {
    grid-area: head;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: -6px -10px 0 0;
}

.cd-next__main[b-tt8jl2rizm] {
    grid-area: main;
    min-width: 0;
}

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

.cd-next__icon[b-tt8jl2rizm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 16%, var(--q-surface-raised));
}

.cd-next__icon[b-tt8jl2rizm]  .q-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
}

.cd-next__name[b-tt8jl2rizm] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--q-font-display);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--q-ink);
}

.cd-next__meta[b-tt8jl2rizm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--q-ink-muted);
}

.cd-next__meta > span + span[b-tt8jl2rizm]::before {
    content: "·";
    margin: 0 9px;
    color: var(--q-ink-faint);
}

.cd-next__progress[b-tt8jl2rizm] {
    margin-top: 24px;
    max-width: 520px;
}

.cd-next__progress .cd-bar[b-tt8jl2rizm] {
    height: 6px;
}

.cd-next__progress-ends[b-tt8jl2rizm] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.cd-next__notes[b-tt8jl2rizm] {
    margin: 18px 0 0;
    max-width: 60ch;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
    white-space: pre-wrap;
}

.cd-next__figure[b-tt8jl2rizm] {
    grid-area: figure;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.cd-next__num[b-tt8jl2rizm] {
    font-family: var(--q-font-display);
    font-size: clamp(4.5rem, 9vw, 7rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.cd-next__num--word[b-tt8jl2rizm] {
    font-size: clamp(3rem, 6vw, 4.6rem);
}

.cd-next__unit[b-tt8jl2rizm] {
    margin-top: 12px;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

.cd-next__clock[b-tt8jl2rizm] {
    margin-top: 6px;
    font-family: var(--q-font-mono);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.cd-next__actions[b-tt8jl2rizm] {
    display: flex;
}

/* ── The list ────────────────────────────────────────────────────────────── */
.cd-section__kicker[b-tt8jl2rizm] {
    padding: 0 4px 10px;
    border-bottom: 1px solid var(--q-line-soft);
}

.cd-list[b-tt8jl2rizm] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cd-row[b-tt8jl2rizm] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(110px, 190px) 96px auto;
    grid-template-areas: "leaf info bar figure actions";
    align-items: center;
    gap: 6px 22px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--q-line-soft);
}

/* The date as a tear-off calendar leaf, bound along the top in the countdown's color. */
.cd-leaf[b-tt8jl2rizm] {
    grid-area: leaf;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
    padding-bottom: 6px;
    overflow: hidden;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--q-ink-faint)) 9%, var(--q-surface-raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--q-ink-faint)) 20%, var(--q-line-soft));
    text-align: center;
}

.cd-leaf[b-tt8jl2rizm]::before {
    content: "";
    align-self: stretch;
    height: 5px;
    background: var(--accent, var(--q-ink-faint));
}

.cd-leaf__month[b-tt8jl2rizm],
.cd-leaf__dow[b-tt8jl2rizm] {
    font-family: var(--q-font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

.cd-leaf__month[b-tt8jl2rizm] {
    margin-top: 5px;
}

.cd-leaf__day[b-tt8jl2rizm] {
    font-family: var(--q-font-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.cd-leaf--empty[b-tt8jl2rizm] {
    width: 76px;
    transform: rotate(-4deg);
    box-shadow: inset 0 0 0 1px var(--q-line), var(--q-shadow-2);
}

.cd-leaf--empty .cd-leaf__day[b-tt8jl2rizm] {
    font-size: 2.2rem;
}

.cd-row__info[b-tt8jl2rizm] {
    grid-area: info;
    min-width: 0;
}

.cd-row__name[b-tt8jl2rizm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--q-ink);
}

.cd-row__name > span[b-tt8jl2rizm] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cd-row__name[b-tt8jl2rizm]  .cd-row__icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

.cd-row__meta[b-tt8jl2rizm] {
    margin-top: 3px;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--q-ink-faint);
}

.cd-row__bar[b-tt8jl2rizm] {
    grid-area: bar;
}

/* How much of the wait is behind you, in the countdown's color. */
.cd-bar[b-tt8jl2rizm] {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--q-line-soft));
}

.cd-bar > span[b-tt8jl2rizm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.cd-row__figure[b-tt8jl2rizm] {
    grid-area: figure;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.cd-row__num[b-tt8jl2rizm] {
    font-family: var(--q-font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
}

.cd-row__num--word[b-tt8jl2rizm] {
    font-size: 1.3rem;
    line-height: 1.25;
}

.cd-row__unit[b-tt8jl2rizm] {
    margin-top: 4px;
    font-family: var(--q-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink-muted);
}

.cd-row__ended[b-tt8jl2rizm] {
    grid-column: bar / figure-end;
    justify-self: end;
    font-family: var(--q-font-display);
    font-size: 0.98rem;
    font-style: italic;
    color: var(--q-ink-muted);
}

.cd-row__actions[b-tt8jl2rizm] {
    grid-area: actions;
    display: flex;
}

.cd-row__actions[b-tt8jl2rizm]  .q-icon-btn,
.cd-next__actions[b-tt8jl2rizm]  .q-icon-btn {
    color: var(--q-ink-faint);
}

.cd-row__actions[b-tt8jl2rizm]  .q-icon-btn:hover,
.cd-row__actions[b-tt8jl2rizm]  .q-icon-btn:focus-visible,
.cd-next__actions[b-tt8jl2rizm]  .q-icon-btn:hover,
.cd-next__actions[b-tt8jl2rizm]  .q-icon-btn:focus-visible {
    color: var(--q-ink);
}

/* Finished: the same lines, set back — the leaf loses its color, the name its weight. */
.cd-section--finished .cd-leaf[b-tt8jl2rizm] {
    opacity: 0.75;
}

.cd-section--finished .cd-row__name[b-tt8jl2rizm] {
    font-weight: 500;
    color: var(--q-ink-muted);
}

.cd-section__note[b-tt8jl2rizm] {
    margin: 12px 4px 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--q-ink-faint);
}

/* ── Narrower ────────────────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
    .cd-row[b-tt8jl2rizm] {
        grid-template-columns: 52px minmax(0, 1fr) 88px auto;
        grid-template-areas:
            "leaf info figure actions"
            "leaf bar  figure actions";
    }

    .cd-row__bar:empty[b-tt8jl2rizm] {
        display: none;
    }
}

@media (max-width: 600px) {
    .countdowns-page__header[b-tt8jl2rizm] {
        padding: 14px 16px;
    }

    .countdowns-page__count[b-tt8jl2rizm] {
        letter-spacing: 0.08em;
    }

    .countdowns-page__body[b-tt8jl2rizm] {
        gap: 28px;
        padding: 16px 14px 32px;
    }

    /* On a phone the figure comes first under the head row, and the name follows it. */
    .cd-next[b-tt8jl2rizm] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "figure"
            "main";
        padding: 18px 16px 22px 18px;
        gap: 0;
    }

    .cd-next__head[b-tt8jl2rizm] {
        margin: -6px -6px 0 0;
    }

    .cd-next__figure[b-tt8jl2rizm] {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 10px;
        margin-top: 12px;
        text-align: left;
    }

    .cd-next__title[b-tt8jl2rizm] {
        margin-top: 14px;
    }

    .cd-next__num[b-tt8jl2rizm] {
        font-size: 4.6rem;
    }

    .cd-next__num--word[b-tt8jl2rizm] {
        font-size: 3rem;
    }

    .cd-next__unit[b-tt8jl2rizm],
    .cd-next__clock[b-tt8jl2rizm] {
        margin-top: 0;
    }

    .cd-next__clock[b-tt8jl2rizm] {
        flex-basis: 100%;
    }

    .cd-next__progress[b-tt8jl2rizm] {
        margin-top: 20px;
    }

    /* A line wraps under its name: the bar on the left, the actions on the right. */
    .cd-row[b-tt8jl2rizm] {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        grid-template-areas:
            "leaf info figure"
            "leaf bar  actions";
        gap: 8px 14px;
        padding: 14px 0;
    }

    .cd-leaf[b-tt8jl2rizm] {
        width: 46px;
    }

    .cd-row__ended[b-tt8jl2rizm] {
        grid-column: figure;
        grid-row: 1;
    }

    .cd-row__num[b-tt8jl2rizm] {
        font-size: 1.65rem;
    }

    .cd-row__actions[b-tt8jl2rizm] {
        justify-self: end;
        margin-right: -6px;
    }

    .cd-row__actions[b-tt8jl2rizm]  .q-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* 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(--q-bg);
    color: var(--q-ink);
    border: 1px solid var(--q-line);
    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(--q-accent);
}

.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(--q-ink);
    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(--q-hover);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--q-ink);
    padding: 0;
}

.cd-icon-btn:hover[b-tt8jl2rizm] {
    border-color: var(--q-accent);
}

.cd-icon-btn--selected[b-tt8jl2rizm] {
    border-color: var(--q-accent);
    background: var(--q-accent-softer);
}

.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] {
    container-type: inline-size;
    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(--q-line);
}

.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(--q-surface);
}

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

/* The box is drawn at 22px, but the label around it is the 40px a thumb needs. */
.habit-card__check[b-umzl13zxsn] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    cursor: pointer;
}

.habit-card__check .q-checkbox[b-umzl13zxsn] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.habit-card__info[b-umzl13zxsn] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.habit-card__name[b-umzl13zxsn] {
    font-weight: 600;
    color: var(--q-ink);
}

.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(--q-line);
    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;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.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(--q-ink);
    transform: scale(1.15);
}

@container (max-width: 640px) {
    .habit-card[b-umzl13zxsn] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 12px 4px;
        padding: 12px;
    }

    .habit-card__left[b-umzl13zxsn] { grid-column: 1; grid-row: 1; }

    .habit-card__heatmap[b-umzl13zxsn] {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(21, minmax(0, 1fr));
    }

    .habit-heatmap-cell[b-umzl13zxsn] { width: 100%; height: auto; aspect-ratio: 1; }
}
/* /Components/Pages/PlansPage.razor.rz.scp.css */
/* The plans page: one measure, the page column's gutters set here. */

.plans[b-guz0zg0y3v] {
    max-width: 72ch;
    padding: 36px 28px 64px;
}

.plans__eyebrow[b-guz0zg0y3v] {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.plans__eyebrow .pro-mark[b-guz0zg0y3v] {
    font-size: 0.9rem;
}

.plans__title[b-guz0zg0y3v] {
    margin: 0;
    font-family: var(--q-font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--q-ink);
    font-variation-settings: "opsz" 96, "SOFT" 30;
}

.plans__standing[b-guz0zg0y3v] {
    margin: 14px 0 28px;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
    max-width: 56ch;
}

.plans__standing strong[b-guz0zg0y3v] {
    color: var(--q-ink);
    font-weight: 600;
}

.plans__cols[b-guz0zg0y3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1.5px solid var(--q-line);
}

.plans__colhead[b-guz0zg0y3v] {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--q-ink);
}

.plans__list[b-guz0zg0y3v] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plans__list li[b-guz0zg0y3v] {
    padding: 5px 0;
    border-top: 1px solid var(--q-line-soft);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--q-ink-muted);
}

.plans__fine[b-guz0zg0y3v] {
    margin: 24px 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

@media (max-width: 640px) {
    .plans[b-guz0zg0y3v] {
        padding: 24px 16px 48px;
    }

    .plans__cols[b-guz0zg0y3v] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* /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(--q-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--q-shadow-1);
}

.stat-card .q-icon[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(--q-surface);
    border: 1px solid var(--q-line);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--q-shadow-1);
}

.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]  .q-icon {
    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/Pages/TipsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * Tips & Tricks. Set like the walk through Pro: one generous measure, a mono
 * kicker over a rule for each section, names in the display face. The add
 * line's examples are drawn as the line draws itself — the same marks over
 * the words, the same pieces under them — so what is learned here is
 * recognised there.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tips[b-dgzx7m0ljn] {
    /* The add line's marker, token for token (TasksView.razor.css, .composer). */
    --tips-when: color-mix(in srgb, var(--q-accent) 58%, transparent);
    --tips-when-rule: transparent;
    --tips-piece: var(--tips-when);
    --tips-piece-ink: var(--q-ink);
    /* The containing block for the screen-reader words in the examples. Without it they
       are placed against the frame, outside the column's scroll, and lengthen the whole
       document — so a jump from the contents scrolled the folio off the top as well. */
    position: relative;
    container-type: inline-size;
    /* Wider than the walk through Pro: the tips sit two to a row where there is room.
       Running text keeps its own measure (the lede, the intros, each tip). */
    max-width: 1000px;
    padding: 36px 28px 72px;
}

/* ── The head ─────────────────────────────────────────────────────────── */

.tips__eyebrow[b-dgzx7m0ljn] {
    margin: 0 0 14px;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.tips__eyebrow-sep[b-dgzx7m0ljn] {
    color: var(--q-line);
}

.tips__title[b-dgzx7m0ljn] {
    margin: 0;
    font-family: var(--q-font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--q-ink);
    font-variation-settings: "opsz" 96, "SOFT" 30;
}

.tips__lede[b-dgzx7m0ljn] {
    margin: 16px 0 0;
    max-width: 56ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
}

/* The contents: a line of mono entries, like the folio's own tools. */
.tips__contents[b-dgzx7m0ljn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 22px;
}

.tips__contents a[b-dgzx7m0ljn] {
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--q-accent-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.tips__contents a:hover[b-dgzx7m0ljn],
.tips__contents a:focus-visible[b-dgzx7m0ljn] {
    color: var(--q-ink);
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.tips__section[b-dgzx7m0ljn] {
    /* A jump from the contents lands the kicker clear of the top edge. */
    scroll-margin-top: 16px;
}

.tips__h2[b-dgzx7m0ljn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 52px 0 4px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--q-line);
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--q-ink-faint);
}

.tips__h2 .pro-mark[b-dgzx7m0ljn] {
    font-size: 0.9rem;
}

.tips__intro[b-dgzx7m0ljn] {
    margin: 14px 0 0;
    max-width: 62ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
}

.tips__intro em[b-dgzx7m0ljn],
.tip__how em[b-dgzx7m0ljn] {
    font-style: normal;
    font-weight: 600;
    color: var(--q-ink);
}

/* ── The add line's examples ──────────────────────────────────────────── */

.tips__examples[b-dgzx7m0ljn] {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.tips__example[b-dgzx7m0ljn] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
        "line reads"
        "note reads";
    gap: 6px 22px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

/* The typed line, set as the add line is: a field with its + at the left. */
.tips__line[b-dgzx7m0ljn] {
    grid-area: line;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid var(--q-line);
    border-radius: 10px;
    background: var(--q-surface-raised);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--q-ink);
}

.tips__line-plus[b-dgzx7m0ljn] {
    flex-shrink: 0;
    font-family: var(--q-font-mono);
    color: var(--q-ink-faint);
}

.tips__line-words[b-dgzx7m0ljn] {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* At night, as the add line is: a deeper wash with the chartreuse as a rule under the
   words, and the pieces as the solid night marker with dark type on it. */
.theme-dark .tips[b-dgzx7m0ljn] {
    --tips-when: color-mix(in srgb, var(--q-accent) 30%, transparent);
    --tips-when-rule: var(--q-accent);
    --tips-piece: var(--q-accent);
    --tips-piece-ink: var(--q-mark-ink);
}

.tips__mark[b-dgzx7m0ljn] {
    color: inherit;
    background: var(--tips-when);
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--tips-when), inset 0 -2px 0 var(--tips-when-rule);
    /* A mark that wraps on a phone keeps its rounded ends on both lines. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.tips__mark--list[b-dgzx7m0ljn],
.tips__mark--priority[b-dgzx7m0ljn] {
    --tint: color-mix(in srgb, var(--piece, var(--q-ink-muted)) 20%, transparent);
    background: var(--tint);
    box-shadow: 0 0 0 2px var(--tint), inset 0 -2px 0 color-mix(in srgb, var(--piece, var(--q-ink-muted)) 70%, transparent);
}

.tips__reads[b-dgzx7m0ljn] {
    grid-area: reads;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding-top: 8px;
}

.tips__reads-label[b-dgzx7m0ljn] {
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.tips__piece[b-dgzx7m0ljn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--tips-piece);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--tips-piece-ink);
    white-space: nowrap;
}

.tips__piece--list[b-dgzx7m0ljn],
.tips__piece--priority[b-dgzx7m0ljn] {
    --tips-piece-ink: var(--q-ink);
    background: color-mix(in srgb, var(--piece, var(--q-ink-muted)) 16%, transparent);
}

/* Read from something else on the line (a repeat says which day it starts): said, not typed. */
.tips__piece--implied[b-dgzx7m0ljn] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--q-line);
    color: var(--q-ink-muted);
}

.tips__piece-dot[b-dgzx7m0ljn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--piece, var(--q-ink-muted));
}

.tips__note[b-dgzx7m0ljn] {
    grid-area: note;
    margin: 0;
    padding-left: 15px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--q-ink-muted);
}

/* ── Tips, two to a row ───────────────────────────────────────────────── */

.tips__grid[b-dgzx7m0ljn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.tip[b-dgzx7m0ljn] {
    padding: 16px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.tip--lead[b-dgzx7m0ljn] {
    grid-column: 1 / -1;
}

.tip__name[b-dgzx7m0ljn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 6px;
    font-family: var(--q-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--q-ink);
    font-variation-settings: "opsz" 24, "SOFT" 20;
}

.tip__name .pro-mark[b-dgzx7m0ljn] {
    font-size: 0.72em;
}

.tip__how[b-dgzx7m0ljn] {
    margin: 0;
    max-width: 64ch;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
}

.tip__how a[b-dgzx7m0ljn],
.tips__intro a[b-dgzx7m0ljn] {
    color: var(--q-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── The key table ────────────────────────────────────────────────────── */

.tips__keys[b-dgzx7m0ljn] {
    margin: 10px 0 0;
}

.tips__key-row[b-dgzx7m0ljn] {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.tips__key-row dt[b-dgzx7m0ljn] {
    margin: 0;
}

.tips__key-row dd[b-dgzx7m0ljn] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--q-ink);
}

.tips__key-where[b-dgzx7m0ljn] {
    font-size: 0.82rem;
    color: var(--q-ink-muted);
}

/* ── Further in: a name, and where it is ──────────────────────────────── */

.tips__stations[b-dgzx7m0ljn] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tips__station[b-dgzx7m0ljn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.tips__station > div[b-dgzx7m0ljn] {
    min-width: 0;
}

.tips__go[b-dgzx7m0ljn] {
    flex-shrink: 0;
    margin-top: 4px;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--q-accent-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 130ms ease;
}

.tips__go:hover[b-dgzx7m0ljn],
.tips__go:focus-visible[b-dgzx7m0ljn] {
    color: var(--q-ink);
}

.tips__contents a:focus-visible[b-dgzx7m0ljn],
.tips__go:focus-visible[b-dgzx7m0ljn] {
    outline: 2px solid var(--q-accent);
    outline-offset: 3px;
}

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

@container (max-width: 620px) {
    .tips__example[b-dgzx7m0ljn] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "line"
            "reads"
            "note";
    }

    .tips__reads[b-dgzx7m0ljn] {
        padding-top: 2px;
    }

    .tips__note[b-dgzx7m0ljn] {
        padding-left: 0;
    }

    .tips__grid[b-dgzx7m0ljn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tips__key-row[b-dgzx7m0ljn] {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .tips__station[b-dgzx7m0ljn] {
        flex-direction: column;
        gap: 10px;
    }

    .tips__go[b-dgzx7m0ljn] {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .tips[b-dgzx7m0ljn] {
        padding: 24px 16px 48px;
    }
}
/* /Components/Pages/WelcomePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The walk through Pro. One measure, set generously; the page column hands
 * itself over flush, so the gutters are here. The headline is the one place
 * the display face is let off the leash: Fraunces at its largest optical
 * size, with the wonky alternates on, for the numeral of the day.
 * ═══════════════════════════════════════════════════════════════════════════ */

.welcome[b-0kinbj4vcf] {
    max-width: 72ch;
    padding: 36px 28px 64px;
}

/* ── The head ─────────────────────────────────────────────────────────── */

.welcome__eyebrow[b-0kinbj4vcf] {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.welcome__eyebrow .pro-mark[b-0kinbj4vcf] {
    font-size: 0.9rem;
}

.welcome__eyebrow-sep[b-0kinbj4vcf] {
    color: var(--q-line);
}

.welcome__title[b-0kinbj4vcf] {
    margin: 0;
    font-family: var(--q-font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--q-ink);
    font-variation-settings: "opsz" 96, "SOFT" 30;
}

.welcome__numeral[b-0kinbj4vcf] {
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
    font-size: 1.28em;
    line-height: 0.9;
    padding: 0 0.04em;
}

.welcome__numeral--word[b-0kinbj4vcf] {
    font-style: italic;
    font-size: 1em;
}

.welcome__lede[b-0kinbj4vcf] {
    margin: 18px 0 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--q-ink-muted);
    max-width: 52ch;
}

/* ── Headings within ──────────────────────────────────────────────────── */

.welcome__h2[b-0kinbj4vcf] {
    margin: 48px 0 6px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--q-line);
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--q-ink-faint);
}

/* ── The stations ─────────────────────────────────────────────────────── */

.welcome__stations[b-0kinbj4vcf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.station[b-0kinbj4vcf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--q-line-soft);
}

.station__text[b-0kinbj4vcf] {
    min-width: 0;
}

.station__name[b-0kinbj4vcf] {
    margin: 0 0 6px;
    font-family: var(--q-font-display);
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--q-ink);
    font-variation-settings: "opsz" 24, "SOFT" 20;
}

.station__how[b-0kinbj4vcf] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

.station__how em[b-0kinbj4vcf] {
    font-style: normal;
    font-weight: 600;
    color: var(--q-ink);
}

/* The door in: set like an index entry, hung on the right, so the eye reads the
   list as contents — a name, and where it is. */
.station__go[b-0kinbj4vcf] {
    flex-shrink: 0;
    margin-top: 4px;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--q-accent-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 130ms ease;
}

.station__go:hover[b-0kinbj4vcf],
.station__go:focus-visible[b-0kinbj4vcf] {
    color: var(--q-ink);
}

.station__go:focus-visible[b-0kinbj4vcf] {
    outline: 2px solid var(--q-accent);
    outline-offset: 3px;
}

.station__go--soon[b-0kinbj4vcf] {
    color: var(--q-ink-faint);
    border-bottom-color: transparent;
}

/* ── After ────────────────────────────────────────────────────────────── */

.welcome__cols[b-0kinbj4vcf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 16px;
}

.welcome__colhead[b-0kinbj4vcf] {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--q-ink);
}

.welcome__list[b-0kinbj4vcf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.welcome__list li[b-0kinbj4vcf] {
    padding: 5px 0;
    border-top: 1px solid var(--q-line-soft);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--q-ink-muted);
}

.welcome__fine[b-0kinbj4vcf] {
    margin: 24px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

.welcome__link[b-0kinbj4vcf] {
    color: var(--q-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.welcome__offers[b-0kinbj4vcf] {
    margin-top: 20px;
}

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

@media (max-width: 640px) {
    .welcome[b-0kinbj4vcf] {
        padding: 24px 16px 48px;
    }

    .station[b-0kinbj4vcf] {
        flex-direction: column;
        gap: 10px;
    }

    .station__go[b-0kinbj4vcf] {
        margin-top: 0;
    }

    .welcome__cols[b-0kinbj4vcf] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* /Components/Pomodoro/PomodoroTimer.razor.rz.scp.css */
.pomodoro-timer[b-ny2wepgklo] {
    display: flex;
    align-items: center;
    position: relative;
}

.pomodoro-timer__btn[b-ny2wepgklo] {
    gap: 4px;
    min-width: 0;
    padding: 4px 8px;
    font-family: var(--q-font-mono);
    font-size: 0.9rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.pomodoro-timer__btn:hover[b-ny2wepgklo] {
    background: var(--q-hover);
}

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

.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(--q-line);
    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 .q-chip[b-ny2wepgklo] {
        min-height: 40px;
    }

    .pomodoro-panel__controls .q-btn[b-ny2wepgklo] {
        min-height: 44px;
    }
}
/* /Components/Shared/Keys.razor.rz.scp.css */
/* A key cap: the folio's mono on a lifted slip of paper, with a heavier rule
   underneath for the edge of the key. Sized from the text around it, so a cap
   in a heading and a cap in running text both sit on the line. */

.keys[b-wpbnatt7ka] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2em;
    white-space: nowrap;
    vertical-align: baseline;
}

.keys__cap[b-wpbnatt7ka] {
    display: inline-block;
    min-width: 1.7em;
    padding: 0.08em 0.42em 0.12em;
    border: 1px solid var(--q-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--q-surface-raised);
    font-family: var(--q-font-mono);
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: var(--q-ink);
}

.keys__plus[b-wpbnatt7ka] {
    font-size: 0.78em;
    color: var(--q-ink-faint);
}
/* /Components/Shared/PlanOffers.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The three cards. Ruled like the rest of the sheet — a hairline box, the
 * name in the display face, the price set large — with the yearly one marked
 * by the accent along its top edge and a flag, because it is the one most
 * readers should take and the page should say so once, quietly.
 * ═══════════════════════════════════════════════════════════════════════════ */

.offers[b-qb42fgxnk9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.offer[b-qb42fgxnk9] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px 18px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md, 8px);
    background: var(--q-surface);
}

.offer--pick[b-qb42fgxnk9] {
    border-color: var(--q-ink);
    box-shadow: inset 0 3px 0 var(--q-accent);
}

.offer__flag[b-qb42fgxnk9] {
    position: absolute;
    top: -9px;
    left: 16px;
    padding: 2px 7px;
    font-family: var(--q-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--q-accent);
    color: var(--q-accent-ink);
    border-radius: 3px;
}

.offer__name[b-qb42fgxnk9] {
    margin: 0;
    font-family: var(--q-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--q-ink);
    font-variation-settings: "opsz" 24, "SOFT" 20;
}

.offer__price[b-qb42fgxnk9] {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.offer__amount[b-qb42fgxnk9] {
    font-family: var(--q-font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--q-ink);
    font-variation-settings: "opsz" 72, "SOFT" 40;
}

.offer__cadence[b-qb42fgxnk9] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.offer__blurb[b-qb42fgxnk9] {
    margin: 2px 0 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--q-ink-muted);
    flex: 1;
}

.offer__pay[b-qb42fgxnk9] {
    width: 100%;
    justify-content: center;
}

.offers__note[b-qb42fgxnk9] {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
}

.offers__error[b-qb42fgxnk9] {
    margin: 12px 0 0;
    font-size: 0.86rem;
    color: var(--pri-high, #b3261e);
}

.offers__fine[b-qb42fgxnk9] {
    margin: 16px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--q-ink-faint);
}

@media (max-width: 760px) {
    .offers[b-qb42fgxnk9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/TrialTally.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The trial tally. Strokes lean the way a pen's do; the gap after the
 * seventh is the week's end. Sized by two custom properties so the index and
 * the welcome page share one figure at two scales.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tally[b-xrl8iu1ukd] {
    --tally-h: 11px;
    --tally-w: 1.5px;
    --tally-gap: 3px;
    --tally-week: 9px;
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: var(--tally-gap);
    height: var(--tally-h);
}

.tally--large[b-xrl8iu1ukd] {
    --tally-h: 56px;
    --tally-w: 4px;
    --tally-gap: 10px;
    --tally-week: 26px;
    margin-top: 28px;
    /* Room beneath for the numerals. */
    margin-bottom: 22px;
}

.tally__mark[b-xrl8iu1ukd] {
    display: block;
    width: var(--tally-w);
    height: var(--tally-h);
    background: var(--q-line);
    transform: skewX(-12deg);
    transform-origin: bottom;
}

.tally__mark--week[b-xrl8iu1ukd] {
    margin-left: var(--tally-week);
}

.tally__mark--inked[b-xrl8iu1ukd] {
    background: var(--q-ink);
}

/* Today stands a little proud of the line, in the accent, so the eye finds the
   present without counting. */
.tally__mark--today[b-xrl8iu1ukd] {
    background: var(--q-accent);
    height: calc(var(--tally-h) * 1.18);
    box-shadow: 0 0 0 1px var(--q-ink);
}

.tally__num[b-xrl8iu1ukd] {
    position: absolute;
    top: calc(var(--tally-h) + 8px);
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--q-ink-faint);
    line-height: 1;
}

.tally__num--first[b-xrl8iu1ukd] { left: 0; }
.tally__num--last[b-xrl8iu1ukd] { right: 0; }

/* The large figure inks itself in on arrival, a stroke at a time from the
   first day to yesterday. Today and the hairlines are already there: what is
   animated is only the record, never the present. */
@media (prefers-reduced-motion: no-preference) {
    .tally--large .tally__mark--inked[b-xrl8iu1ukd] {
        animation: tally-ink-b-xrl8iu1ukd 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-delay: calc(var(--tally-i, 0) * 45ms);
    }
}

@keyframes tally-ink-b-xrl8iu1ukd {
    from {
        background: var(--q-line);
        transform: skewX(-12deg) scaleY(0.35);
    }
    to {
        background: var(--q-ink);
        transform: skewX(-12deg) scaleY(1);
    }
}
/* /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(--q-surface);
    border-radius: 8px;
    padding: 24px;
    width: 460px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--q-shadow-2);
}

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

.share-member-row:last-child[b-wam71r851o] {
    border-bottom: none;
}
/* /Components/Sharing/InviteLinkField.razor.rz.scp.css */
.invite-link[b-sy6eajg4vy] {
    margin-bottom: 16px;
}

.invite-link__label[b-sy6eajg4vy] {
    display: block;
    margin-bottom: 4px;
    opacity: 0.6;
}

.invite-link__row[b-sy6eajg4vy] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.invite-link__input[b-sy6eajg4vy] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--q-line);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
}

.invite-link__input:focus[b-sy6eajg4vy] {
    outline: 2px solid var(--q-accent);
    outline-offset: -1px;
}

.invite-link__note[b-sy6eajg4vy] {
    display: block;
    margin-top: 4px;
    opacity: 0.7;
}
/* /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(--q-surface);
    border-radius: 8px;
    padding: 24px;
    width: 460px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--q-shadow-2);
}

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

.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 the editor and its sub-panels inside the top layer (QLayer), so Reminder and
   Repeat sit over the phone's task sheet too. */
.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(--q-line);
    background: var(--q-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(--q-surface);
}

.date-popover__tabs[b-jtfy9fqbow] {
    display: flex;
    margin: 12px 14px 0;
    padding: 4px;
    gap: 2px;
    border-radius: 10px;
    background: var(--q-bg);
    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: var(--q-font-body);
    cursor: pointer;
    background: transparent;
    color: var(--q-ink-muted);
}

.date-popover__tab--active[b-jtfy9fqbow] {
    background: var(--q-surface);
    color: var(--q-ink);
}

.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(--q-ink-muted) !important;
    border-radius: 10px !important;
}

.date-popover__quick-btn:hover[b-jtfy9fqbow] {
    background: var(--q-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(--q-ink-muted);
}

.date-popover__quick-btn--week:hover[b-jtfy9fqbow] {
    background: var(--q-hover);
}

.date-popover__quick-week-icon[b-jtfy9fqbow] {
    color: var(--q-ink-muted) !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);
}

/* The month is MonthCalendar's (.q-month in Styles/tailwind.css); this only gives it
   the editor's side margins. */
.date-popover__calendar[b-jtfy9fqbow] {
    width: 100%;
    padding: 4px 14px 6px;
}

.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: var(--q-font-body);
    text-align: left;
    border-top: 1px solid var(--q-line);
}

.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(--q-ink-muted) !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(--q-ink-muted);
}

.date-popover__row-center--white[b-jtfy9fqbow] {
    color: var(--q-ink);
}

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

.date-popover__row--submenu[b-jtfy9fqbow]  .date-popover__row-chevron {
    color: var(--q-ink-muted) !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(--q-line);
    background: var(--q-bg);
}

/* 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(--q-bg);
    border: 1px solid var(--q-line);
}

.time-slot-picker__field-icon[b-jtfy9fqbow] {
    flex-shrink: 0;
    opacity: 0.55;
    color: var(--q-ink-muted) !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: var(--q-font-body);
    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(--q-ink-muted);
}

.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: var(--q-font-body);
    color: var(--q-ink-muted);
    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(--q-ink-muted);
    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(--q-ink-muted);
    cursor: pointer;
}

.time-slot-picker__clear:hover[b-jtfy9fqbow] {
    background: var(--q-hover);
    color: var(--q-ink);
}

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

.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: var(--q-font-body);
    color: var(--q-ink-muted);
    text-align: left;
}

.time-slot-picker__item:hover[b-jtfy9fqbow] {
    background: var(--q-hover);
    color: var(--q-ink);
}

.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(--q-line);
}

.date-popover__footer-btn[b-jtfy9fqbow] {
    flex: 1;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: var(--q-font-body);
    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(--q-line);
    background: transparent;
    color: var(--q-ink);
}

.date-popover__footer-btn--clear:hover[b-jtfy9fqbow] {
    border-color: var(--q-ink-muted);
    background: var(--q-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: var(--q-font-body);
}

.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: var(--q-font-body);
    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: var(--q-font-body);
}

.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: var(--q-font-body);
    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(--q-line);
    border-radius: 10px;
    background: transparent;
    color: var(--q-ink);
    font-family: var(--q-font-body);
    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(--q-ink-muted);
    font-family: var(--q-font-body);
}

@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(--q-ink-muted);
    opacity: 0.75;
    font-family: var(--q-font-body);
}

.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: var(--q-font-body);
    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(--q-ink-muted);
    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: var(--q-font-body);
    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(--q-surface);
    border: 1px solid var(--q-line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--q-shadow-2);
}

.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(--q-ink-muted) !important;
    opacity: 0.7;
}

.reminder-panel__title[b-jtfy9fqbow] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--q-font-body);
    color: var(--q-ink);
    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(--q-ink-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}

.reminder-panel__close:hover[b-jtfy9fqbow] {
    opacity: 1;
    background: var(--q-hover);
}

.reminder-panel__divider[b-jtfy9fqbow] {
    height: 1px;
    background: var(--q-line);
}

.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: var(--q-font-body);
    font-weight: 400;
    color: var(--q-ink);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.reminder-panel__option:hover[b-jtfy9fqbow] {
    background: var(--q-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(--q-line);
    border-radius: 8px;
    background: var(--q-bg);
    color: var(--q-ink);
    font-size: 0.9rem;
    font-family: var(--q-font-body);
    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(--q-ink-muted);
    font-family: var(--q-font-body);
}

.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: var(--q-font-body);
    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(--q-line);
    background: transparent;
    color: var(--q-ink);
}

.reminder-panel__btn--cancel:hover[b-jtfy9fqbow] {
    background: var(--q-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(--q-line);
        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(--q-ink-muted);
        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(--q-line);
        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(--q-ink-muted);
        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/FocusClockReading.razor.rz.scp.css */
/* Set in the display face at its largest optical size, with figures that hold their
   width so the reading doesn't shuffle as it ticks. */
.focus-reading[b-duc5xa1bf7] {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--q-font-display);
    font-variant-numeric: lining-nums tabular-nums;
    font-variation-settings: "opsz" 144;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--q-ink);
}

.focus-reading__figure[b-duc5xa1bf7] {
    font-size: clamp(3.1rem, 2.4rem + 2.4vw, 4.4rem);
}

.focus-reading__secs[b-duc5xa1bf7] {
    margin-left: 0.04em;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    letter-spacing: -0.01em;
    color: var(--q-ink-faint);
}

/* No clock yet: the reading is a blank to be filled. */
.focus-reading--idle[b-duc5xa1bf7] {
    color: var(--q-ink-faint);
    opacity: 0.55;
}

/* Banked: the figures in ink, the units set small beside them as the seconds are, so
   "1h 20m" reads as a number first and its units second. */
.focus-reading__unit[b-duc5xa1bf7] {
    margin-left: 0.04em;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    letter-spacing: 0;
    color: var(--q-ink-faint);
}

.focus-reading__unit:not(:last-child)[b-duc5xa1bf7] {
    margin-right: 0.3em;
}
/* /Components/Tasks/TaskDetailPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The task's own page, in the iPhone app's hand.
 *
 * The page is the lavender paper; what can be picked or written on sits on
 * raised white cards and capsules edged with the rule. The marker is a fill
 * the chosen day, the chosen time edge and the send button wear, never type;
 * olive marks what is set; vermilion is kept for a day gone by.
 * ═══════════════════════════════════════════════════════════════════════════ */

.detail-panel[b-hb2euz04w1] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: var(--q-bg);
    color: var(--q-ink);
    font-family: var(--q-font-body);
}

/* ── The header: close on the left, the clock where the phone has Save ──── */
.detail-panel__header[b-hb2euz04w1] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 16px 6px 14px;
    transition: box-shadow 0.2s ease;
}

/* Once the page has scrolled beneath it, a hairline sets the header off. */
.detail-panel.is-scrolled .detail-panel__header[b-hb2euz04w1] {
    box-shadow: 0 1px 0 var(--q-line);
}

.detail-panel__grip[b-hb2euz04w1] {
    display: none;
}

.detail-panel__close[b-hb2euz04w1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--q-ink) 6%, transparent);
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease;
}

/* A 44px target around the 30px disc. */
.detail-panel__close[b-hb2euz04w1]::before {
    content: "";
    position: absolute;
    inset: -7px;
}

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

.detail-panel__header-end[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.detail-panel__saved[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--q-ink-faint);
    white-space: nowrap;
}

.detail-panel__saved[b-hb2euz04w1]  .q-icon {
    font-size: 0.95rem;
    color: var(--q-accent-text);
}

.detail-panel__saved--failed[b-hb2euz04w1] {
    color: var(--pri-high);
}

/* ── The clock on a task ──────────────────────────────────────────────────
   Idle it is a quiet capsule; running it is the marker, the same swipe the
   folio line wears while a clock is going. */
.detail-panel__clock[b-hb2euz04w1],
.detail-panel__focus[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px 0 11px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    background: var(--q-surface-raised);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--q-ink-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.15s ease;
}

.detail-panel__clock[b-hb2euz04w1]  .q-icon,
.detail-panel__focus[b-hb2euz04w1]  .q-icon {
    font-size: 1.05rem;
}

.detail-panel__clock:hover:not(:disabled)[b-hb2euz04w1],
.detail-panel__focus:hover[b-hb2euz04w1] {
    border-color: color-mix(in srgb, var(--q-ink) 24%, var(--q-line));
    color: var(--q-ink);
}

.detail-panel__clock:active:not(:disabled)[b-hb2euz04w1],
.detail-panel__focus:active[b-hb2euz04w1] {
    transform: scale(0.96);
}

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

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

.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; }
}

/* ── A write that did not land ─────────────────────────────────────────── */
.detail-error[b-hb2euz04w1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    margin: 0 16px 8px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--pri-high) 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--pri-high) 8%, transparent);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--q-ink);
}

.detail-error[b-hb2euz04w1]  .detail-error__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--pri-high);
}

.detail-error__text[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
}

.detail-error__dismiss[b-hb2euz04w1] {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--q-ink-faint);
    cursor: pointer;
}

/* ── The page ─────────────────────────────────────────────────────────── */
.detail-panel__page[b-hb2euz04w1] {
    box-sizing: border-box;
    max-width: 560px;
    margin: 0 auto;
    padding: 6px 20px 36px;
}

/* A raised card on the page, edged with the rule. */
.detail-card[b-hb2euz04w1] {
    border: 1px solid var(--q-line);
    border-radius: 18px;
    background: var(--q-surface-raised);
}

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

/* ── In the trash ─────────────────────────────────────────────────────── */
.detail-trash-note[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 16px;
}

.detail-trash-note__label[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--q-ink-muted);
}

.detail-trash-note__restore[b-hb2euz04w1] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--q-accent-text);
    cursor: pointer;
}

/* ── The task: check, title, list ─────────────────────────────────────── */
.detail-hero[b-hb2euz04w1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* The check sits on the first line of the title and in line with the page's edge. */
.detail-hero__check[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -5px 0 0 -9px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.detail-hero__check:hover:not(:disabled)[b-hb2euz04w1] {
    transform: scale(1.08);
}

.detail-hero__check:active:not(:disabled)[b-hb2euz04w1] {
    transform: scale(0.92);
}

.detail-hero__check:disabled[b-hb2euz04w1] {
    cursor: default;
}

/* The ring takes the priority's color, as the phone's does; done, it fills with olive. */
.detail-hero__ring[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid var(--check-ring, var(--pri-none));
    border-radius: 50%;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.detail-hero__check--done .detail-hero__ring[b-hb2euz04w1] {
    border-color: var(--q-accent-text);
    background: var(--q-accent-text);
    animation: detail-check-pop-b-hb2euz04w1 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-hero__ring[b-hb2euz04w1]  .detail-hero__tick {
    font-size: 17px;
    color: var(--q-surface-raised);
}

@keyframes detail-check-pop-b-hb2euz04w1 {
    0% { transform: scale(0.6); }
    55% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.detail-hero__body[b-hb2euz04w1] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.detail-hero__title[b-hb2euz04w1] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.25em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    field-sizing: content;
    font-family: var(--q-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--q-ink);
    caret-color: var(--q-accent-text);
}

.detail-hero__title[b-hb2euz04w1]::placeholder {
    color: var(--q-ink-faint);
    opacity: 1;
}

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

.detail-hero__list-name[b-hb2euz04w1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In line with the title, past the check. */
.detail-notes[b-hb2euz04w1] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.5em;
    margin: 12px 0 0;
    padding: 0 0 0 41px;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    field-sizing: content;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--q-ink-muted);
    caret-color: var(--q-accent-text);
}

.detail-notes[b-hb2euz04w1]::placeholder {
    color: var(--q-ink-faint);
    opacity: 1;
}

.detail-rule[b-hb2euz04w1] {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: var(--q-line);
}

/* ── The day ──────────────────────────────────────────────────────────── */
/* A mouse has no swipe, so the rail gets arrows at its ends while the pointer is on it. */
.detail-rail__step[b-hb2euz04w1] {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .detail-rail__step[b-hb2euz04w1] {
        position: absolute;
        top: 50%;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        padding: 0;
        border: 1px solid var(--q-line);
        border-radius: 50%;
        background: var(--q-surface-raised);
        color: var(--q-ink-muted);
        box-shadow: 0 2px 8px rgba(36, 32, 52, 0.12);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, color 0.13s ease;
    }

    .detail-rail__step--back[b-hb2euz04w1] {
        left: 8px;
    }

    .detail-rail__step--forward[b-hb2euz04w1] {
        right: 8px;
    }

    .detail-rail-wrap.can-back:hover .detail-rail__step--back[b-hb2euz04w1],
    .detail-rail-wrap.can-forward:hover .detail-rail__step--forward[b-hb2euz04w1] {
        opacity: 1;
        pointer-events: auto;
    }

    .detail-rail__step:hover[b-hb2euz04w1] {
        color: var(--q-ink);
    }
}

/* The calendar, on a card under the rail. */
.detail-calendar[b-hb2euz04w1] {
    margin-top: 14px;
    padding: 6px;
    border-radius: 22px;
}

/* ── Time, repeat and alerts: quiet until set, then olive ─────────────── */
.detail-options[b-hb2euz04w1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* The time: start and end side by side over the input that moves the chosen one. */
.detail-time[b-hb2euz04w1] {
    margin-top: 12px;
    padding: 10px 10px 0;
    border-radius: 22px;
}

.detail-time__edges[b-hb2euz04w1] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--q-ink) 5%, transparent);
}

.detail-time__edge[b-hb2euz04w1] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: var(--q-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.detail-time__edge--on[b-hb2euz04w1] {
    background: var(--q-accent);
    color: var(--q-accent-ink);
}

.detail-time__edge-label[b-hb2euz04w1] {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.detail-time__edge--on .detail-time__edge-label[b-hb2euz04w1] {
    color: color-mix(in srgb, var(--q-accent-ink) 70%, transparent);
}

.detail-time__edge-value[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--q-font-display);
    font-size: 1rem;
    font-weight: 600;
}

.detail-time__edge-value--empty[b-hb2euz04w1] {
    color: var(--q-ink-faint);
}

.detail-time__edge--on .detail-time__edge-value--empty[b-hb2euz04w1] {
    color: var(--q-accent-ink);
}

.detail-time__wheel[b-hb2euz04w1] {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.detail-time__input[b-hb2euz04w1] {
    min-width: 0;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--q-font-display);
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
    text-align: center;
}

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

.detail-time__foot[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 12px;
}

.detail-time__remove[b-hb2euz04w1],
.detail-time__done[b-hb2euz04w1] {
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.detail-time__remove[b-hb2euz04w1] {
    color: var(--q-ink-muted);
}

.detail-time__done[b-hb2euz04w1] {
    font-weight: 600;
    color: var(--q-accent-text);
}

.detail-time__remove:hover[b-hb2euz04w1],
.detail-time__done:hover[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--q-ink) 6%, transparent);
}

/* ── Subtasks ─────────────────────────────────────────────────────────── */
.detail-progress[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.detail-progress__count[b-hb2euz04w1] {
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    color: var(--q-ink-faint);
}

/* How far along, in the marker's fill. */
.detail-progress__bar[b-hb2euz04w1] {
    width: 44px;
    height: 5px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--q-line);
}

.detail-progress__fill[b-hb2euz04w1] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--q-accent);
    transition: width 0.3s ease;
}

.detail-subtasks[b-hb2euz04w1] {
    overflow: hidden;
}

.detail-subtask[b-hb2euz04w1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--q-ink);
    cursor: pointer;
}

.detail-subtask + .detail-subtask[b-hb2euz04w1]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 46px;
    height: 1px;
    background: var(--q-line);
}

button.detail-subtask:hover[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--q-ink) 3%, transparent);
}

.detail-subtask__check[b-hb2euz04w1] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--pri-none);
    border-radius: 50%;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.detail-subtask--done .detail-subtask__check[b-hb2euz04w1] {
    border-color: var(--q-accent-text);
    background: var(--q-accent-text);
}

.detail-subtask__check[b-hb2euz04w1]  .q-icon {
    font-size: 14px;
    color: var(--q-surface-raised);
}

.detail-subtask__title[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-subtask--done .detail-subtask__title[b-hb2euz04w1] {
    text-decoration: line-through;
    text-decoration-color: var(--q-ink-faint);
    color: var(--q-ink-faint);
}

.detail-subtask--add[b-hb2euz04w1] {
    cursor: text;
}

.detail-subtask--add[b-hb2euz04w1]  .detail-subtask__plus {
    flex-shrink: 0;
    width: 20px;
    font-size: 1.1rem;
    color: var(--q-ink-faint);
}

.detail-subtask__input[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--q-ink);
    caret-color: var(--q-accent-text);
}

.detail-subtask__input[b-hb2euz04w1]::placeholder {
    color: var(--q-ink-faint);
    opacity: 1;
}

/* ── Comments ─────────────────────────────────────────────────────────── */
.detail-comments[b-hb2euz04w1] {
    overflow: hidden;
}

.detail-comment[b-hb2euz04w1] {
    position: relative;
    padding: 12px 14px;
}

.detail-comment[b-hb2euz04w1]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 14px;
    height: 1px;
    background: var(--q-line);
}

.detail-comment__head[b-hb2euz04w1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.detail-comment__author[b-hb2euz04w1] {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--q-ink);
}

.detail-comment__when[b-hb2euz04w1] {
    margin-left: auto;
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
    color: var(--q-ink-faint);
    transition: opacity 0.13s ease;
}

/* One's own comment can be taken back: the bin takes the stamp's place under the pointer. */
.detail-comment__delete[b-hb2euz04w1] {
    position: absolute;
    top: 7px;
    right: 8px;
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--q-surface-raised);
    color: var(--q-ink-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.13s ease, color 0.13s ease;
}

.detail-comment--mine:hover .detail-comment__delete[b-hb2euz04w1],
.detail-comment__delete:focus-visible[b-hb2euz04w1] {
    opacity: 1;
}

.detail-comment--mine:hover .detail-comment__when[b-hb2euz04w1],
.detail-comment--mine:focus-within .detail-comment__when[b-hb2euz04w1] {
    opacity: 0;
}

.detail-comment__delete:hover[b-hb2euz04w1] {
    color: var(--q-ink);
}

/* Touch has no hover to find it by, so the bin stays out beside the stamp. */
@media (hover: none) {
    .detail-comment--mine .detail-comment__head[b-hb2euz04w1] {
        padding-right: 28px;
    }

    .detail-comment__delete[b-hb2euz04w1] {
        opacity: 1;
    }

    .detail-comment--mine:hover .detail-comment__when[b-hb2euz04w1],
    .detail-comment--mine:focus-within .detail-comment__when[b-hb2euz04w1] {
        opacity: 1;
    }
}

.detail-comment__body[b-hb2euz04w1] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--q-ink-muted);
}

.detail-comment-field[b-hb2euz04w1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 14px;
}

.detail-comment-field__input[b-hb2euz04w1] {
    flex: 1;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--q-ink);
    caret-color: var(--q-accent-text);
}

.detail-comment-field__input[b-hb2euz04w1]::placeholder {
    color: var(--q-ink-faint);
    opacity: 1;
}

.detail-comment-field__send[b-hb2euz04w1] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--q-accent);
    color: var(--q-accent-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* A faint fill is too pale to carry the marker's dark ink at night, so the arrow takes the page's ink. */
.detail-comment-field__send:disabled[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--q-accent) 35%, transparent);
    color: color-mix(in srgb, var(--q-ink) 40%, transparent);
    cursor: default;
}

/* ── The foot ─────────────────────────────────────────────────────────── */
.detail-foot[b-hb2euz04w1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
}

.detail-foot__trash[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 12px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    background: var(--q-surface-raised);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: border-color 0.13s ease, color 0.13s ease;
}

.detail-foot__trash:hover[b-hb2euz04w1] {
    border-color: color-mix(in srgb, var(--q-ink) 24%, var(--q-line));
    color: var(--q-ink);
}

.detail-foot__stamps[b-hb2euz04w1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    color: var(--q-ink-faint);
}

/* ── Phone: the sheet ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .detail-panel[b-hb2euz04w1] {
        border-radius: 28px 28px 0 0;
    }

    /* The header is where the sheet is pulled down from. */
    .detail-panel__header[b-hb2euz04w1] {
        padding: 20px 16px 6px 14px;
        touch-action: none;
    }

    .detail-panel__grip[b-hb2euz04w1] {
        display: block;
        position: absolute;
        top: 7px;
        left: 50%;
        width: 36px;
        height: 5px;
        margin-left: -18px;
        border-radius: var(--radius-full);
        background: color-mix(in srgb, var(--q-ink) 22%, transparent);
    }

    .detail-panel__page[b-hb2euz04w1] {
        padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    }

    /* Under 16px, iOS Safari zooms the page when a field takes focus. */
    .detail-subtask__input[b-hb2euz04w1],
    .detail-comment-field__input[b-hb2euz04w1] {
        font-size: 16px;
    }
}

/* Below this the clock cannot spare the width for its label; the glyph and tooltip carry it. */
@media (max-width: 419.98px) {
    .detail-panel__clock-label[b-hb2euz04w1] {
        display: none;
    }

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

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

    .detail-hero__check[b-hb2euz04w1],
    .detail-panel__clock[b-hb2euz04w1] {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Focus — the special edition.
 *
 * The same page, set as a front page with one story on it. A dateline in the
 * folio's mono; the title as the headline, in the masthead's face at its largest
 * optical size; a double rule under it, as a broadsheet sets one under the lead;
 * then the notes as the story in a reading column, and in the margin beside it
 * two boxes headed by a heavy rule: the clock and the steps. What is admin — the
 * schedule, priority, comments, trash — folds away under the story.
 *
 * Laid out as a grid of named areas, so the page keeps the order a keyboard and a
 * screen reader meet it in while the margin sits beside the story on a desk and
 * between the headline and the story on a phone.
 * ═══════════════════════════════════════════════════════════════════════════ */
.detail-panel--focus[b-hb2euz04w1] {
    --focus-gap: clamp(32px, 4.5vw, 72px);
    background: transparent;
    border-radius: 0;
}

/* The header keeps only the "Saved" note, in the corner; Close and the clock capsule
   are the folio line's and the clock box's jobs here. */
.detail-panel--focus .detail-panel__header[b-hb2euz04w1],
.detail-panel--focus.is-scrolled .detail-panel__header[b-hb2euz04w1] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 2px;
    box-shadow: none;
    pointer-events: none;
}

.detail-panel--focus .detail-panel__close[b-hb2euz04w1],
.detail-panel--focus .detail-panel__clock[b-hb2euz04w1],
.detail-panel--focus .detail-panel__grip[b-hb2euz04w1] {
    display: none;
}

.detail-panel--focus .detail-panel__page[b-hb2euz04w1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "trash"
        "dateline"
        "hero"
        "side"
        "notes"
        "more"
        "schedule"
        "discussion"
        "foot";
    align-items: start;
    max-width: 1140px;
    /* Wide enough to hold the steps' hover wash, which reaches 8px past the margin's
       edge; any less and the page could be scrolled sideways. */
    padding: 30px 10px 72px;
}

@media (min-width: 900px) {
    /* The margin spans the rest of the page; the last row is the one that stretches to
       hold it, so a tall margin never opens gaps between the story and its fold. */
    .detail-panel--focus .detail-panel__page[b-hb2euz04w1] {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
        grid-template-rows: repeat(7, auto) 1fr;
        grid-template-areas:
            "trash      trash"
            "dateline   dateline"
            "hero       hero"
            "notes      side"
            "more       side"
            "schedule   side"
            "discussion side"
            "foot       side";
        column-gap: var(--focus-gap);
    }

    /* The column rule, down the middle of the gap, the height of the page. */
    .detail-panel--focus .detail-panel__page[b-hb2euz04w1]::before {
        content: "";
        grid-column: 2;
        grid-row: 4 / -1;
        justify-self: start;
        align-self: stretch;
        width: 0;
        margin: 30px 0 0 calc(var(--focus-gap) / -2);
        border-left: 1px solid var(--q-line-soft);
        pointer-events: none;
    }

    .detail-panel--focus .detail-side[b-hb2euz04w1] {
        position: sticky;
        top: 22px;
    }
}

.detail-panel--focus .detail-trash-note[b-hb2euz04w1] { grid-area: trash; margin-bottom: 18px; }

/* ── The dateline ── */
.detail-dateline[b-hb2euz04w1] {
    grid-area: dateline;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    margin: 0 0 18px;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

.detail-dateline__item[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.detail-dateline__item + .detail-dateline__item[b-hb2euz04w1]::before {
    content: "";
    width: 1px;
    height: 1em;
    margin: 0 9px 0 6px;
    background: var(--q-line);
}

.detail-dateline__dot[b-hb2euz04w1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* The due date is the way into the schedule, so it reads as a link. */
.detail-dateline__due[b-hb2euz04w1] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--q-ink);
    text-decoration: underline dotted;
    text-decoration-color: var(--q-ink-faint);
    text-underline-offset: 4px;
    cursor: pointer;
}

.detail-dateline__due:hover[b-hb2euz04w1] {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

.detail-dateline__due--late[b-hb2euz04w1] {
    color: var(--pri-high);
}

/* ── The headline ── */
.detail-panel--focus .detail-hero[b-hb2euz04w1] {
    grid-area: hero;
    position: relative;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 22px;
    padding-bottom: 26px;
    border-bottom: 4px double color-mix(in srgb, var(--q-ink) 70%, transparent);
}

.detail-panel--focus .detail-hero__body[b-hb2euz04w1] {
    width: 100%;
}

/* The list is on the dateline; the pill that moves it waits beside the list. (It is
   drawn by the menu, so it is reached through ::deep.) */
.detail-panel--focus .detail-hero__body[b-hb2euz04w1]  .detail-hero__list {
    display: none;
}

.detail-panel--focus .detail-hero__title[b-hb2euz04w1] {
    max-width: 22ch;
    font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);
    font-weight: 500;
    font-variation-settings: "opsz" 144;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

/* The check becomes a labelled button under the headline: "Mark done". */
.detail-hero__check-label[b-hb2euz04w1] {
    display: none;
}

.detail-panel--focus .detail-hero__check[b-hb2euz04w1] {
    gap: 10px;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 20px 0 9px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    background: var(--q-surface-raised);
    font-family: var(--q-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--q-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detail-panel--focus .detail-hero__check:hover:not(:disabled)[b-hb2euz04w1] {
    transform: none;
    border-color: var(--q-ink);
    box-shadow: 0 1px 0 var(--q-ink);
}

.detail-panel--focus .detail-hero__check:hover:not(:disabled) .detail-hero__ring[b-hb2euz04w1] {
    border-color: var(--q-accent-text);
    background: var(--q-accent-soft);
}

.detail-panel--focus .detail-hero__check-label[b-hb2euz04w1] {
    display: inline;
}

/* Ticked off: the headline is struck and DONE is pressed onto it, at a slant, in the
   marker's ink — held long enough to read before the next story is set. */
.detail-stamp[b-hb2euz04w1] {
    display: none;
}

.detail-panel--completing .detail-stamp[b-hb2euz04w1] {
    position: absolute;
    top: 6px;
    right: 3%;
    display: block;
    padding: 6px 18px 3px 22px;
    border: 3px solid currentColor;
    border-radius: 10px;
    font-family: var(--q-font-mono);
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--q-accent-text);
    mix-blend-mode: var(--q-mark-blend, normal);
    transform: rotate(-8deg);
    pointer-events: none;
    animation: detail-stamp-in-b-hb2euz04w1 0.34s cubic-bezier(0.2, 1.5, 0.35, 1) both;
}

@keyframes detail-stamp-in-b-hb2euz04w1 {
    from { opacity: 0; transform: rotate(-14deg) scale(1.9); }
    55%  { opacity: 1; }
    to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.detail-panel--focus.detail-panel--completing .detail-hero__title[b-hb2euz04w1] {
    color: var(--q-ink-faint);
    text-decoration: line-through;
    text-decoration-thickness: 0.06em;
    text-decoration-color: var(--q-ink-muted);
    transition: color 0.2s ease;
}

/* ── The story ── */
.detail-panel--focus .detail-notes[b-hb2euz04w1] {
    grid-area: notes;
    max-width: 64ch;
    min-height: 8.5em;
    margin: 30px 0 0;
    padding: 0;
    font-family: var(--q-font-display);
    font-size: 1.16rem;
    font-variation-settings: "opsz" 14;
    line-height: 1.68;
    color: var(--q-ink);
}

.detail-panel--focus .detail-notes[b-hb2euz04w1]::placeholder {
    font-style: italic;
}

/* ── The fold ── */
.detail-more[b-hb2euz04w1] {
    grid-area: more;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 64ch;
    margin: 30px 0 0;
    padding: 14px 0 6px;
    border: 0;
    border-top: 1px solid var(--q-line);
    background: none;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    color: var(--q-ink-muted);
    cursor: pointer;
}

.detail-more:hover[b-hb2euz04w1] {
    color: var(--q-ink);
}

.detail-more[b-hb2euz04w1]  .detail-more__chevron {
    transition: transform 0.2s ease;
}

.detail-panel--more .detail-more[b-hb2euz04w1]  .detail-more__chevron {
    transform: rotate(180deg);
}

.detail-panel--focus .detail-schedule[b-hb2euz04w1] {
    grid-area: schedule;
    max-width: 640px;
    margin-top: 16px;
}

.detail-panel--focus .detail-schedule > .detail-rule[b-hb2euz04w1] {
    display: none;
}

/* The rail reaches past the page's gutter beside the list; here there is none to reach,
   so its first day stands on the column's edge. */
.detail-panel--focus .detail-rail-wrap[b-hb2euz04w1] {
    margin-inline: 0;
}

.detail-panel--focus .detail-rail[b-hb2euz04w1] {
    padding-inline: 0;
    scroll-padding-inline: 0;
}

.detail-panel--focus .detail-discussion[b-hb2euz04w1] {
    grid-area: discussion;
    max-width: 640px;
}

.detail-panel--focus .detail-foot[b-hb2euz04w1] {
    grid-area: foot;
}

.detail-panel--focus:not(.detail-panel--more) .detail-schedule[b-hb2euz04w1],
.detail-panel--focus:not(.detail-panel--more) .detail-discussion[b-hb2euz04w1],
.detail-panel--focus:not(.detail-panel--more) .detail-foot[b-hb2euz04w1] {
    display: none;
}

/* ── The margin ── */
.detail-panel--focus .detail-side[b-hb2euz04w1] {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

/* A box in the margin is headed by a heavy rule, as a sidebar is on a news page. */
.detail-box-head[b-hb2euz04w1],
.detail-panel--focus .detail-steps > :first-child[b-hb2euz04w1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-top: 10px;
    border-top: 2px solid var(--q-ink);
}

/* The clock. Its heavy rule takes the clock's colour while it runs — the accent live,
   ochre on a break — so the box says its state from across the page before a word of
   it is read. */
.detail-clockbox .detail-box-head[b-hb2euz04w1] {
    transition: border-color 0.2s ease;
}

.detail-clockbox--running .detail-box-head[b-hb2euz04w1] {
    border-top-color: var(--q-accent-text);
}

.detail-clockbox--paused .detail-box-head[b-hb2euz04w1] {
    border-top-color: var(--pri-medium);
}

.detail-clockbox__state[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.detail-clockbox__dot[b-hb2euz04w1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-line);
}

.detail-clockbox--running .detail-clockbox__state[b-hb2euz04w1] {
    color: var(--q-accent-text);
}

.detail-clockbox--running .detail-clockbox__dot[b-hb2euz04w1],
.detail-clockbox__elsewhere-dot[b-hb2euz04w1] {
    background: var(--q-accent-text);
    animation: detail-clockbox-pulse-b-hb2euz04w1 1.8s ease-out infinite;
}

.detail-clockbox--paused .detail-clockbox__state[b-hb2euz04w1] {
    color: var(--pri-medium);
}

.detail-clockbox--paused .detail-clockbox__dot[b-hb2euz04w1],
.detail-clockbox__elsewhere-dot--held[b-hb2euz04w1] {
    background: var(--pri-medium);
    animation: none;
}

@keyframes detail-clockbox-pulse-b-hb2euz04w1 {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-accent-text) 55%, transparent); }
    to   { box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .detail-clockbox--running .detail-clockbox__dot[b-hb2euz04w1],
    .detail-clockbox__elsewhere-dot[b-hb2euz04w1] {
        animation: none;
    }
}

/* Paused, the reading holds still and steps back a shade; running, it is plain ink —
   the pulsing dot above already says it is live. */
.detail-clockbox--paused[b-hb2euz04w1]  .focus-reading {
    color: var(--q-ink-muted);
}

/* The line under the reading: where the time goes, or what the last stop banked. */
.detail-clockbox__where[b-hb2euz04w1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 7px;
    min-height: 1.5em;
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--q-ink-muted);
}

.detail-clockbox__where--banked[b-hb2euz04w1] {
    gap: 5px;
    font-weight: 600;
    color: var(--q-accent-text);
    animation: detail-clockbox-land-b-hb2euz04w1 0.35s ease-out;
}

@keyframes detail-clockbox-land-b-hb2euz04w1 {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

.detail-clockbox__since[b-hb2euz04w1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

/* The start, as one editable word: a dotted rule under the figure is the affordance.
   Unlayered, so it beats the element reset on bare `input` — see tailwind.css. */
.detail-clockbox__since input[b-hb2euz04w1] {
    /* Wide enough for "10:41 AM"; Chrome sizes a time field off the default font and
       clips the meridiem at this size otherwise. */
    width: 10.5ch;
    padding: 1px 2px;
    border: 0;
    border-bottom: 1px dotted var(--q-ink-faint);
    border-radius: 0;
    background: none;
    font-family: var(--q-font-body);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--q-ink);
    cursor: text;
    transition: border-color 0.12s ease;
}

.detail-clockbox__since input:hover[b-hb2euz04w1],
.detail-clockbox__since input:focus-visible[b-hb2euz04w1] {
    border-bottom-color: var(--q-accent-text);
    border-bottom-style: solid;
    outline: none;
}

.detail-clockbox__since input[b-hb2euz04w1]::-webkit-calendar-picker-indicator {
    display: none;
}

.detail-clockbox__aside[b-hb2euz04w1] {
    margin: 4px 0 0;
    font-size: 0.76rem;
    color: var(--q-ink-faint);
}

/* ── The buttons ── */
.detail-clockbox__actions[b-hb2euz04w1] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.detail-clockbox__btn[b-hb2euz04w1] {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--q-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.15s ease;
}

.detail-clockbox__btn:active:not(:disabled)[b-hb2euz04w1] {
    transform: translateY(1px);
}

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

.detail-clockbox__btn--go[b-hb2euz04w1] {
    background: var(--q-accent);
    color: var(--q-accent-ink);
}

.detail-clockbox__btn--go:hover:not(:disabled)[b-hb2euz04w1] {
    background: var(--q-accent-hover);
}

.detail-clockbox__btn--ink[b-hb2euz04w1] {
    background: var(--q-ink);
    color: var(--q-surface);
}

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

.detail-clockbox__btn--quiet[b-hb2euz04w1] {
    border-color: var(--q-line);
    background: var(--q-surface-raised);
    color: var(--q-ink);
}

.detail-clockbox__btn--quiet:hover:not(:disabled)[b-hb2euz04w1] {
    border-color: var(--q-ink);
}

.detail-clockbox__btn--danger[b-hb2euz04w1] {
    background: var(--pri-high);
    color: #fff;
}

.detail-clockbox__btn--danger:hover:not(:disabled)[b-hb2euz04w1] {
    background: color-mix(in srgb, var(--pri-high) 86%, #000);
}

/* Start sits alone on its row, the width of the margin: the one thing the box asks. */
.detail-clockbox__start[b-hb2euz04w1] {
    width: 100%;
    height: 50px;
    margin-top: 18px;
    font-size: 0.92rem;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--q-accent-ink) 12%, transparent),
                0 6px 18px -8px color-mix(in srgb, var(--q-accent) 70%, transparent);
}

/* ── The quieter rows under the buttons ── */
.detail-clockbox__row[b-hb2euz04w1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 0.76rem;
    color: var(--q-ink-faint);
}

.detail-clockbox__row > span:first-child[b-hb2euz04w1] {
    margin-right: 2px;
}

.detail-clockbox__chip[b-hb2euz04w1] {
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    background: none;
    font-family: var(--q-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.detail-clockbox__chip:hover:not(:disabled)[b-hb2euz04w1] {
    border-color: var(--q-accent-text);
    background: var(--q-accent-softer);
    color: var(--q-ink);
}

.detail-clockbox__project[b-hb2euz04w1] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--q-line-soft);
}

/* The project as a word with a caret, not a form field: it is right nearly every time. */
.detail-clockbox__select[b-hb2euz04w1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.detail-clockbox__select select[b-hb2euz04w1] {
    max-width: 100%;
    padding: 2px 20px 2px 2px;
    border: 0;
    border-bottom: 1px dotted var(--q-ink-faint);
    border-radius: 0;
    background: none;
    font-family: var(--q-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--q-ink);
    text-overflow: ellipsis;
    appearance: none;
    cursor: pointer;
}

.detail-clockbox__select select:hover[b-hb2euz04w1],
.detail-clockbox__select select:focus-visible[b-hb2euz04w1] {
    border-bottom-color: var(--q-accent-text);
    border-bottom-style: solid;
    outline: none;
}

.detail-clockbox__select select option[b-hb2euz04w1] {
    background: var(--q-surface-raised);
    color: var(--q-ink);
}

.detail-clockbox__select[b-hb2euz04w1]  svg {
    position: absolute;
    right: 0;
    width: 16px;
    height: 16px;
    color: var(--q-ink-faint);
    pointer-events: none;
}

.detail-clockbox__foot[b-hb2euz04w1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 12px 0 0;
    font-size: 0.74rem;
    color: var(--q-ink-faint);
}

.detail-clockbox__foot--center[b-hb2euz04w1] {
    justify-content: center;
    margin-top: 6px;
}

.detail-clockbox__link[b-hb2euz04w1] {
    padding: 4px 0;
    border: 0;
    background: none;
    font-family: var(--q-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--q-ink-muted);
    text-decoration: underline;
    text-decoration-color: var(--q-line);
    text-underline-offset: 3px;
    cursor: pointer;
}

.detail-clockbox__link:hover:not(:disabled)[b-hb2euz04w1] {
    color: var(--q-ink);
    text-decoration-color: currentColor;
}

/* Another clock already going: said plainly before the box offers to move it here. */
.detail-clockbox__elsewhere[b-hb2euz04w1] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--q-line-soft);
    border-radius: var(--radius-md);
    background: var(--q-accent-softer);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--q-ink-muted);
}

.detail-clockbox__elsewhere-dot[b-hb2euz04w1] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateY(-1px);
}

.detail-clockbox__confirm[b-hb2euz04w1] {
    margin-top: 16px;
    padding: 12px 12px 4px;
    border: 1px solid color-mix(in srgb, var(--pri-high) 45%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--pri-high) 6%, transparent);
    font-size: 0.82rem;
    color: var(--q-ink);
}

.detail-clockbox__confirm .detail-clockbox__actions[b-hb2euz04w1] {
    margin: 12px 0 8px;
}

.detail-clockbox__confirm .detail-clockbox__btn[b-hb2euz04w1] {
    height: 40px;
}

.detail-clockbox :is(button, input, select):disabled[b-hb2euz04w1] {
    opacity: 0.5;
    cursor: default;
}

/* The steps: numbered down the margin, the first one still to do marked up next. */
.detail-panel--focus .detail-subtasks[b-hb2euz04w1] {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    counter-reset: step;
}

.detail-panel--focus .detail-subtask[b-hb2euz04w1] {
    align-items: flex-start;
    gap: 12px;
    margin: 0 -8px;
    padding: 11px 8px;
    border-radius: 10px;
    width: calc(100% + 16px);
}

.detail-panel--focus button.detail-subtask[b-hb2euz04w1] {
    counter-increment: step;
}

.detail-panel--focus button.detail-subtask[b-hb2euz04w1]::after {
    content: counter(step, decimal-leading-zero);
    order: -1;
    flex: 0 0 auto;
    width: 1.8em;
    padding-top: 0.32em;
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--q-ink-faint);
}

.detail-panel--focus .detail-subtask + .detail-subtask[b-hb2euz04w1]::before {
    left: 8px;
    right: 8px;
    background: var(--q-line-soft);
}

.detail-panel--focus .detail-subtask__check[b-hb2euz04w1] {
    margin-top: 1px;
}

/* The plus stands in the checks' column, past the numbers (1.8em of 0.68rem, and a gap). */
.detail-panel--focus .detail-subtask--add[b-hb2euz04w1]  .detail-subtask__plus {
    margin-left: calc(1.224rem + 12px);
}

.detail-panel--focus .detail-subtask--next .detail-subtask__check[b-hb2euz04w1] {
    border-color: var(--q-ink);
}

.detail-panel--focus .detail-subtask--next .detail-subtask__title[b-hb2euz04w1] {
    font-weight: 600;
}

.detail-panel--focus .detail-subtask--next .detail-subtask__title[b-hb2euz04w1]::after {
    content: "Up next";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px 1px;
    border-radius: 4px;
    background: var(--q-accent);
    color: var(--q-accent-ink);
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* ── Setting the page ──
   The edition comes in a part at a time — dateline, headline, story, margin — and each
   task that follows is set the same way. */
@keyframes detail-focus-rise-b-hb2euz04w1 {
    from { opacity: 0; transform: translateY(14px); }
}

.detail-panel--focus .detail-dateline[b-hb2euz04w1],
.detail-panel--focus .detail-hero[b-hb2euz04w1],
.detail-panel--focus .detail-notes[b-hb2euz04w1],
.detail-panel--focus .detail-side[b-hb2euz04w1],
.detail-panel--focus .detail-more[b-hb2euz04w1] {
    animation: detail-focus-rise-b-hb2euz04w1 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.detail-panel--focus .detail-hero[b-hb2euz04w1] { animation-delay: 60ms; }
.detail-panel--focus .detail-notes[b-hb2euz04w1] { animation-delay: 140ms; }
.detail-panel--focus .detail-side[b-hb2euz04w1] { animation-delay: 200ms; }
.detail-panel--focus .detail-more[b-hb2euz04w1] { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
    .detail-panel--focus .detail-dateline[b-hb2euz04w1],
    .detail-panel--focus .detail-hero[b-hb2euz04w1],
    .detail-panel--focus .detail-notes[b-hb2euz04w1],
    .detail-panel--focus .detail-side[b-hb2euz04w1],
    .detail-panel--focus .detail-more[b-hb2euz04w1],
    .detail-panel--completing .detail-stamp[b-hb2euz04w1],
    .detail-clockbox--running .detail-clockbox__dot[b-hb2euz04w1] {
        animation: none;
    }
}

@media (max-width: 899.98px) {
    .detail-panel--focus .detail-panel__page[b-hb2euz04w1] {
        padding: 22px 8px 48px;
    }

    .detail-panel--focus .detail-side[b-hb2euz04w1] {
        gap: 32px;
    }
}
/* /Components/Tasks/TaskRow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * Diurnal task row — an entry on a printed sheet.
 *
 * Rows are separated by a soft hairline, not by cards or gaps: one continuous
 * column of entries on the page card. Selection highlights the full title,
 * and completing an entry strikes it through with a drawn pen line.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 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 16px;
    margin: 0 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--q-line-soft);
    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 or marker on hover. 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;
}

/* ── Tick circle ──────────────────────────────────────────────────────────
   A ring, as the iPhone app draws it, that fills with olive and takes a white
   tick when the task is done. */
.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.1);
}

.task-row__check-box[b-otcbfytzxa] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--q-ink-faint);
    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-accent-text);
    border-color: var(--q-accent-text);
    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); }
}

/* Card-colored tick, so it reads on the olive fill in both editions. */
.task-row__check-tick[b-otcbfytzxa] {
    color: var(--q-surface-raised);
    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 ─────────────────────────────────────────────────────────────────── */
/* The title always keeps some width. With nothing held back here a narrow row squeezed
   the title out entirely, and the subtask count, spilling from an empty body, ran over
   the reminder. */
.task-row__body[b-otcbfytzxa] {
    flex: 1;
    min-width: 6.5rem;
    overflow: hidden;
    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;
}

.task-row--completed .task-row__title[b-otcbfytzxa] {
    color: var(--q-ink-faint);
}

/* Selection paints the full line box and its ink together. This also keeps
   completed, selected titles readable against the bright marker. */
.task-row--selected .task-row__title[b-otcbfytzxa] {
    color: var(--q-accent-ink);
    background: var(--q-accent);
    border-radius: 0.2em;
}

/* 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__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;
    }
}

/* A row short of room keeps its title and gives up its extras, least needed first: the
   time left, then the reminder, then the list's name. The date and the subtask count
   stay; they are what a row is scanned for. The room is the list's, marked on it by
   slate.watchRoomForRows, since the panel beside the list narrows it at any window size. */
.tasks-view__rows[data-room="m"] .task-row__time-left[b-otcbfytzxa],
.tasks-view__rows[data-room="s"] .task-row__time-left[b-otcbfytzxa],
.tasks-view__rows[data-room="xs"] .task-row__time-left[b-otcbfytzxa],
.tasks-view__rows[data-room="s"] .task-row__reminder[b-otcbfytzxa],
.tasks-view__rows[data-room="xs"] .task-row__reminder[b-otcbfytzxa],
.tasks-view__rows[data-room="xs"] .task-row__list-chip[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]  .q-icon-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

.task-row__check:disabled[b-otcbfytzxa] { cursor: default; }
.task-row:focus-within .task-row__actions[b-otcbfytzxa] { opacity: 1; }

.task-row__priority-control[b-otcbfytzxa] { flex: 0 0 auto; }
.task-row__inline[b-otcbfytzxa] { display: flex; align-items: center; gap: 10px; }
.task-row__inline[b-otcbfytzxa]  .task-row-list {
    color: var(--q-ink-muted);
    font-size: .75rem;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 3px;
}
.task-row__priority-control[b-otcbfytzxa]  .task-row-priority {
    display: grid;
    place-items: center;
    min-width: 24px;
    min-height: 32px;
}
.task-row__select[b-otcbfytzxa] { accent-color: var(--q-accent-text); width: 18px; height: 18px; flex-shrink: 0; }
.task-row__focus[b-otcbfytzxa], .task-row__actions[b-otcbfytzxa]  .task-row__move { display: grid; place-items: center; min-width: 28px; min-height: 32px; color: var(--q-ink-muted); }
/* An undated row offers "Set date" only when the reader is on it, as the row's tools do. */
.task-row__reschedule--unset[b-otcbfytzxa] { opacity: 0; transition: opacity 0.12s; }
.task-row:hover .task-row__reschedule--unset[b-otcbfytzxa], .task-row:focus-within .task-row__reschedule--unset[b-otcbfytzxa] { opacity: 1; }
@media (hover: none) and (pointer: coarse) { .task-row__reschedule--unset[b-otcbfytzxa] { opacity: .7; } }
.task-row__reschedule[b-otcbfytzxa] { padding: 5px 3px; color: var(--q-ink-muted); white-space: nowrap; }
.task-row__inline button:hover[b-otcbfytzxa], .task-row__inline[b-otcbfytzxa]  button:hover { color: var(--q-accent-text); }
.task-row[b-otcbfytzxa] { position: relative; }
.task-row__body[b-otcbfytzxa] { touch-action: pan-y; }
.task-row[data-swipe-hint][b-otcbfytzxa]::after {
    content: attr(data-swipe-hint);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--q-surface-raised);
    color: var(--q-accent-text);
    font-size: .85rem;
    pointer-events: none;
    opacity: .94;
}
.task-row--completing[b-otcbfytzxa] { animation: task-row-finish-b-otcbfytzxa 380ms ease forwards; pointer-events: none; overflow: hidden; }
@keyframes task-row-finish-b-otcbfytzxa {
    0%, 55% { max-height: 100px; opacity: .75; }
    100% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; }
}
@media (pointer: coarse) {
    .task-row__inline[b-otcbfytzxa]  .task-row-list,
    .task-row__reschedule[b-otcbfytzxa], .task-row__focus[b-otcbfytzxa], .task-row__actions[b-otcbfytzxa]  .task-row__move { min-height: 44px; min-width: 36px; }
    /* The dot needs the height to be tapped, not the width; the title needs the width. */
    .task-row__priority-control[b-otcbfytzxa]  .task-row-priority { min-height: 44px; min-width: 24px; }
    .task-row__select[b-otcbfytzxa] { width: 24px; height: 24px; }
}
/* KEEP-IN-SYNC: app.css — the global twin sets the phone row's gap (9px) and wins the tie. */
@media (max-width: 767.98px) {
    .task-row[b-otcbfytzxa] { gap: 9px; }
    /* The dot's tap area may reach into the gaps either side; the title keeps the width. */
    .task-row__priority-control[b-otcbfytzxa] { margin-inline: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .task-row--completing[b-otcbfytzxa] { animation: none; }
    .task-row[b-otcbfytzxa], .task-row__check[b-otcbfytzxa], .task-row__check-box[b-otcbfytzxa] { transition: none; animation: none; }
}
.task-row__actions[b-otcbfytzxa] { display: flex; align-items: center; gap: 2px; }
.task-row__right[b-otcbfytzxa] { text-transform: none; letter-spacing: normal; }
/* In the narrowest room the row's new tools stand down with its other extras: the list
   menu (as the list chip does), and the buttons that only reach the task another way.
   All of them are in the task's panel. The date stays, and a swipe still reschedules. */
.tasks-view__rows[data-room="xs"] .task-row__inline[b-otcbfytzxa]  .task-row-list,
.tasks-view__rows[data-room="xs"] .task-row__focus[b-otcbfytzxa],
.tasks-view__rows[data-room="xs"] .task-row__actions[b-otcbfytzxa]  .task-row__move,
.tasks-view__rows[data-room="xs"] .task-row__reschedule--unset[b-otcbfytzxa] {
    display: none;
}
.task-row__pri--none[b-otcbfytzxa] { border: 1px dotted var(--q-ink-faint); }
.task-row__date--overdue[b-otcbfytzxa] { color: var(--pri-high); }
@media (pointer: coarse) { .task-row__check[b-otcbfytzxa] { min-width: 44px; min-height: 44px; } }

/* A task just added from the line above: a wash of the marker, fading as it settles in. */
.task-row--fresh[b-otcbfytzxa] {
    animation: task-row-fresh-b-otcbfytzxa 1.8s ease-out;
}

@keyframes task-row-fresh-b-otcbfytzxa {
    0%, 25% { background-color: color-mix(in srgb, var(--q-accent) 42%, transparent); }
    100% { background-color: transparent; }
}
/* /Components/Tasks/TasksView.razor.rz.scp.css */
.tasks-view[b-d8w3u239jr] {
    container: task-workspace / inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    /* The shell's page card is the surface; the list sits straight on it. */
    background: transparent;
}

/* ── 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 one line of
   controls in two clusters: the lead (choosing tasks) and the trail (how the
   list is seen, then Share and the ⋯ menu, which keeps the grouping and the
   list's own actions out of the line).

   It is set in the folio's manner: round tools that wash lavender under the
   pointer, and one capsule for the view, cut into the card like a slot, with the
   marker sliding under whichever view is on. The glyphs are AppIcons.Hairline,
   drawn in a single stroke so the line reads as one family; the words are the
   mono small caps the masthead sets DUE and OVERDUE in.

   It answers to the width of the list's own column, not the window's (see
   .tasks-view__list-stack): beside an open task or the week grid that column can
   be 260px on the widest screen. Narrow, the words give way to their glyphs;
   narrower, Share folds into the ⋯ menu, where it is always listed too. */
.tasks-view__tools[b-d8w3u239jr] {
    --tool-h: 32px;
    --tool-icon: 18px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 10px 0 6px;
    min-height: 34px;
}

.tasks-view__tools-lead[b-d8w3u239jr],
.tasks-view__tools-trail[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Hangs right even when the lead is empty (Month has nothing to choose or group). */
.tasks-view__tools-trail[b-d8w3u239jr] {
    flex-shrink: 0;
    margin-left: auto;
}

.tasks-view__tools[b-d8w3u239jr]  .q-icon {
    font-size: var(--tool-icon);
    color: inherit;
}

/* ── The round tools ──
   Select, Share and the ⋯ menu. QMenu draws two of these buttons,
   so they are reached through ::deep like everything else here. */
.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 6px;
    min-width: var(--tool-h);
    height: var(--tool-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
}

/* A tool that names its state carries its word beside the glyph. */
.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool--labelled {
    padding: 0 12px 0 9px;
}

/* Tracking hangs a space after the last letter; take it back so the word centres. */
.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool-label {
    margin-right: -0.14em;
}

/* Hover only where there is a pointer to hover with: on a phone a tapped button
   would otherwise keep its wash until the next tap somewhere else. */
@media (hover: hover) {
    .tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool:hover:not(:disabled) {
        background: var(--q-well);
        color: var(--q-ink);
    }
}

.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool:active:not(:disabled) {
    background: var(--q-well);
    color: var(--q-ink);
    transform: scale(0.94);
}

.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Held in the well while its menu is open. Its own rule: a browser that does not
   know :popover-open would throw out every selector listed beside it. */
.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool:has(+ :popover-open) {
    background: var(--q-well);
    color: var(--q-ink);
}

.tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool:focus-visible,
.tasks-view__view:focus-visible[b-d8w3u239jr] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 1px;
}

/* Select is a mode, so it inks in while it is on. */
.tasks-view__tools .tasks-view__select-toggle[aria-pressed="true"][b-d8w3u239jr],
.tasks-view__tools .tasks-view__select-toggle[aria-pressed="true"]:hover[b-d8w3u239jr] {
    background: var(--q-ink);
    color: var(--q-surface-raised);
}

/* The ⋯ menu's heading over the grouping, set as the Index sets its kickers. */
.tasks-view__menu-kicker[b-d8w3u239jr] {
    padding: 6px 12px 4px;
    font-family: var(--q-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

/* Between the view and the list's own tools, as the folio divides its clusters. */
.tasks-view__tools-rule[b-d8w3u239jr] {
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    margin: 0 6px;
    background: var(--q-line);
}

/* ── The view capsule ──
   A slot cut into the card, the page's own lavender showing through, with equal
   segments (the grid sizes each to the widest) so the marker can travel by whole
   widths: --view-on is the segment that is on, --views how many there are. */
.tasks-view__views[b-d8w3u239jr] {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    flex-shrink: 0;
    padding: 3px;
    border-radius: var(--radius-full);
    background: var(--q-bg);
    box-shadow:
        inset 0 0 0 1px var(--q-line-soft),
        inset 0 1px 2px color-mix(in srgb, var(--q-ink) 7%, transparent);
}

.tasks-view__views-marker[b-d8w3u239jr] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--views, 3));
    border-radius: var(--radius-full);
    background: var(--q-accent);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--q-ink) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--q-accent-ink) 8%, transparent);
    transform: translateX(calc(var(--view-on, 0) * 100%));
    transition: transform 320ms cubic-bezier(0.3, 0.85, 0.25, 1);
}

.tasks-view__view[b-d8w3u239jr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: calc(var(--tool-h) + 6px);
    height: calc(var(--tool-h) - 2px);
    padding: 0 13px 0 11px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: color 180ms ease, background-color 140ms ease;
}

@media (hover: hover) {
    .tasks-view__view:hover[b-d8w3u239jr] {
        color: var(--q-ink);
        background: color-mix(in srgb, var(--q-surface-raised) 70%, transparent);
    }
}

.tasks-view__view[aria-pressed="true"][b-d8w3u239jr],
.tasks-view__view[aria-pressed="true"]:hover[b-d8w3u239jr] {
    color: var(--q-accent-ink);
    background: transparent;
    font-weight: 600;
}

.tasks-view__view[b-d8w3u239jr]  .q-icon {
    font-size: calc(var(--tool-icon) - 1px);
}

/* ── Narrow column: glyphs only ──
   The words stay for a screen reader (and in each title); every tool squares up. */
@container tasks-list (max-width: 600px) {
    .tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool--labelled {
        padding: 0;
    }

    .tasks-view__view[b-d8w3u239jr] {
        padding: 0;
    }
}

/* ── Narrower still: Share folds into the ⋯ menu, and the line closes up. */
@container tasks-list (max-width: 320px) {
    .tasks-view__tools[b-d8w3u239jr] {
        column-gap: 8px;
    }

    .tasks-view__tools-lead[b-d8w3u239jr],
    .tasks-view__tools-trail[b-d8w3u239jr] {
        gap: 2px;
    }

    .tasks-view__tools[b-d8w3u239jr]  .tasks-view__share {
        display: none;
    }

    .tasks-view__tools-rule[b-d8w3u239jr] {
        margin: 0 4px;
    }
}

/* A thumb's width wherever the pointer is a finger. */
@media (pointer: coarse) {
    .tasks-view__tools[b-d8w3u239jr] {
        --tool-h: 40px;
        --tool-icon: 20px;
        padding-top: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tasks-view__views-marker[b-d8w3u239jr],
    .tasks-view__tools[b-d8w3u239jr]  .tasks-view__tool {
        transition: none;
    }
}

/* 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] {
    /* The agenda tools answer to this column's width (see .tasks-view__tools). */
    container: tasks-list / inline-size;
    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(--q-line) 65%, transparent);
    }
}

@media (min-width: 1200px) {
    /* The list keeps the width it had before a task was opened; only the week gives way. */
    .tasks-view__layout--week-pane.tasks-view__layout--with-detail[b-d8w3u239jr] {
        display: grid;
        grid-template-columns: minmax(260px, min(400px, 36vw)) 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(--q-line) 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;
}


/* A floor for hit-testing, so a list of one still has somewhere to land. */
.tasks-view__drop-zone[b-d8w3u239jr] {
    min-height: 48px;
}

/* Drag to reorder (q-controls.js sets these classes while a row is in the air): the row
   being moved fades, and a rule in the olive marks where it will land. */
.tasks-view__drag-item.is-dragging[b-d8w3u239jr] {
    opacity: 0.4;
}

.tasks-view__drag-item.is-drop-before[b-d8w3u239jr] {
    box-shadow: inset 0 2px 0 var(--q-accent-text);
}

.tasks-view__drag-item.is-drop-after[b-d8w3u239jr] {
    box-shadow: inset 0 -2px 0 var(--q-accent-text);
}

/* Add task row — a rounded field, as the iPhone app's "Add a task" bar is,
   with the submit button a chartreuse disc at its end. 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;
    min-height: 48px;
    box-sizing: border-box;
    padding: 6px 8px 6px 16px;
    margin: 10px 14px 14px;
    background: var(--q-surface);
    border: 1px solid var(--q-line-soft);
    border-radius: var(--radius-full);
    cursor: text;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.tasks-view__add-row:hover[b-d8w3u239jr] {
    border-color: var(--q-line);
}

.tasks-view__add-row:focus-within[b-d8w3u239jr] {
    background: var(--q-surface-raised);
    border-color: var(--q-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 45%, transparent);
}

.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;
    /* "Add task to …" outruns a phone's field; end it in an ellipsis, not mid-letter. */
    text-overflow: ellipsis;
    /* 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(--q-ink-muted);
    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: 50%;
    background: var(--q-accent);
    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(.tasks-view__add-submit--empty)[b-d8w3u239jr] {
    opacity: 1;
    pointer-events: auto;
}

.tasks-view__add-submit--empty[b-d8w3u239jr] {
    opacity: 0;
    pointer-events: none;
}

.tasks-view__add-submit:hover:not(.tasks-view__add-submit--empty)[b-d8w3u239jr] {
    background: var(--q-accent-hover);
}

.tasks-view__add-submit:active:not(.tasks-view__add-submit--empty)[b-d8w3u239jr] {
    transform: scale(0.95);
}

.tasks-view__add-submit .q-icon[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;
    }
}

/* ══ The composing line ═══════════════════════════════════════════════════
   What the line reads from the words is marked on the words themselves: a copy of
   the line, set in the same type, lies under the input with its letters invisible and
   only the marks showing through. Under the line, the reading is set out in full
   ("Reads as"), each piece taken out with a press; until something is read, a quiet
   line of examples says what can be written. */
.composer[b-d8w3u239jr] {
    /* The marker on the words in the line, and a rule under them (none by day). */
    --composer-when: color-mix(in srgb, var(--q-accent) 58%, transparent);
    --composer-when-rule: transparent;
    /* The marker on the pieces read out under the line, the type on it, and its ×. */
    --composer-piece: var(--composer-when);
    --composer-piece-ink: var(--q-ink);
    --composer-piece-x: var(--q-ink-muted);
    --composer-inset: 62px;
    position: relative;
}

/* At night the page's ink turns pale, and pale type on the day's wash reads at 2.6:1.
   The pieces are type of their own, so they take the night marker every other swipe
   takes (app.css): a solid fill with --q-mark-ink laid on it. The words in the line
   cannot be recoloured — they are the input's, one colour end to end — so there the
   wash is let down to where pale ink clears AA (5.3:1 on the focused line) and the
   chartreuse moves to a rule under the words, the shape a list's mark already has. */
.theme-dark .composer[b-d8w3u239jr] {
    --composer-when: color-mix(in srgb, var(--q-accent) 30%, transparent);
    --composer-when-rule: var(--q-accent);
    --composer-piece: var(--q-accent);
    --composer-piece-ink: var(--q-mark-ink);
    --composer-piece-x: color-mix(in srgb, var(--q-mark-ink) 72%, transparent);
}

.tasks-view__add-row[b-d8w3u239jr] {
    position: relative;
}

.composer__field[b-d8w3u239jr] {
    position: relative;
    display: grid;
    flex: 1;
    min-width: 0;
}

.composer__field > *[b-d8w3u239jr] {
    grid-area: 1 / 1;
    min-width: 0;
}

/* Both layers must set the words identically, or the marks drift off their letters. */
.tasks-view__add-input[b-d8w3u239jr],
.composer__mirror[b-d8w3u239jr] {
    margin: 0;
    padding: 0;
    font-family: var(--q-font-display);
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    word-spacing: 0;
    text-indent: 0;
    font-kerning: normal;
}

.tasks-view__add-input[b-d8w3u239jr] {
    position: relative;
    z-index: 1;
}

.composer__mirror[b-d8w3u239jr] {
    display: block;
    overflow: hidden;
    white-space: pre;
    color: transparent;
    pointer-events: none;
    user-select: none;
}

.composer__mark[b-d8w3u239jr] {
    color: transparent;
    background: var(--composer-when);
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--composer-when), inset 0 -2px 0 var(--composer-when-rule);
    transition: opacity 0.12s ease;
}

.composer__mark--list[b-d8w3u239jr],
.composer__mark--priority[b-d8w3u239jr] {
    --tint: color-mix(in srgb, var(--piece, var(--q-ink-muted)) 20%, transparent);
    background: var(--tint);
    box-shadow: 0 0 0 2px var(--tint), inset 0 -2px 0 color-mix(in srgb, var(--piece, var(--q-ink-muted)) 70%, transparent);
}

/* Between a key and the server's redraw the copy may hold the old words. */
.composer__mirror.is-stale .composer__mark[b-d8w3u239jr] {
    opacity: 0;
    transition: none;
}

/* ── Offered under the line while #… or !… is being typed ── */
.composer__options[b-d8w3u239jr] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 34px;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-width: min(340px, calc(100% - 34px));
    padding: 6px;
    background: var(--q-surface-raised);
    border: 1px solid var(--q-line);
    border-radius: 12px;
    box-shadow: var(--q-shadow-2);
    animation: composer-drop-b-d8w3u239jr 0.14s ease-out;
    cursor: default;
}

@keyframes composer-drop-b-d8w3u239jr {
    from { opacity: 0; transform: translateY(-4px); }
}

.composer__option[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: var(--q-font-body);
    font-size: 0.9rem;
    color: var(--q-ink);
    text-align: left;
}

.composer__option:hover[b-d8w3u239jr] {
    background: var(--q-hover);
}

.composer__option[aria-selected="true"][b-d8w3u239jr] {
    background: var(--q-accent-soft);
    box-shadow: inset 2px 0 0 var(--q-accent-text);
}

.composer__option-dot[b-d8w3u239jr],
.composer__piece-dot[b-d8w3u239jr] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--piece, var(--q-ink-faint));
}

.composer__option-name[b-d8w3u239jr] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer__option-note[b-d8w3u239jr],
.composer__options-keys[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.composer__options-keys[b-d8w3u239jr] {
    margin-top: 4px;
    padding: 7px 10px 3px;
    border-top: 1px solid var(--q-line-soft);
    text-transform: none;
    letter-spacing: 0.02em;
}

.composer__options-keys kbd[b-d8w3u239jr] {
    display: inline-block;
    min-width: 1.5em;
    margin-right: 2px;
    padding: 0 3px;
    border: 1px solid var(--q-line);
    border-radius: 4px;
    font: inherit;
    text-align: center;
}

/* ── Under the line: the reading, or what could be written ── */
.composer__readout[b-d8w3u239jr],
.composer__hint[b-d8w3u239jr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: -6px 14px 12px;
    padding: 0 0 0 calc(var(--composer-inset) - 14px);
}

.composer__readout-label[b-d8w3u239jr],
.composer__hint-label[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.composer__piece[b-d8w3u239jr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 6px 2px 10px;
    border-radius: var(--radius-full);
    background: var(--composer-piece);
    font-family: var(--q-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--composer-piece-ink);
    white-space: nowrap;
    animation: composer-piece-in-b-d8w3u239jr 0.18s ease-out;
}

@keyframes composer-piece-in-b-d8w3u239jr {
    from { opacity: 0; transform: translateY(2px) scale(0.96); }
}

/* A tint of the list's or the priority's own colour, which pale ink reads on at night too. */
.composer__piece--list[b-d8w3u239jr],
.composer__piece--priority[b-d8w3u239jr] {
    --composer-piece-ink: var(--q-ink);
    --composer-piece-x: var(--q-ink-muted);
    background: color-mix(in srgb, var(--piece, var(--q-ink-muted)) 16%, transparent);
}

/* Read from something else on the line (a time alone means today): said, not typed. */
.composer__piece--implied[b-d8w3u239jr] {
    padding-right: 10px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--q-line);
    color: var(--q-ink-muted);
}

.composer__piece-x[b-d8w3u239jr] {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--composer-piece-x);
    transition: background 0.12s ease, color 0.12s ease;
}

button.composer__piece:hover .composer__piece-x[b-d8w3u239jr] {
    background: color-mix(in srgb, var(--composer-piece-ink) 12%, transparent);
    color: var(--composer-piece-ink);
}

.composer__literal[b-d8w3u239jr],
.composer__hint-sign[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--q-ink-muted);
    text-decoration: underline;
    text-decoration-color: var(--q-line);
    text-underline-offset: 3px;
}

.composer__literal[b-d8w3u239jr] {
    margin-left: 4px;
}

.composer__literal:hover[b-d8w3u239jr],
.composer__hint-sign:hover[b-d8w3u239jr] {
    color: var(--q-ink);
    text-decoration-color: currentColor;
}

/* The examples come up only while the line has the keyboard. */
.composer__hint[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    color: var(--q-ink-faint);
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.18s ease, opacity 0.18s ease, margin-bottom 0.18s ease;
}

.composer:focus-within .composer__hint[b-d8w3u239jr] {
    max-height: 4.5em;
    margin-bottom: 12px;
    opacity: 1;
}

.composer__hint-sep[b-d8w3u239jr] {
    color: var(--q-line);
}

.composer__hint-sign[b-d8w3u239jr] {
    color: var(--q-ink-muted);
}

.composer__hint-paste[b-d8w3u239jr] {
    font-style: italic;
}

/* ── A pasted list, held for a yes ── */
.composer__paste[b-d8w3u239jr] {
    margin: 0 14px 14px;
    padding: 12px 16px 14px;
    border-top: 2px solid var(--q-ink);
    background: var(--q-surface);
    animation: composer-drop-b-d8w3u239jr 0.16s ease-out;
}

.composer__paste-head[b-d8w3u239jr] {
    margin: 0 0 8px;
    font-family: var(--q-font-display);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--q-ink);
}

.composer__paste-count[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 6px;
}

.composer__paste-more[b-d8w3u239jr] {
    display: block;
    font-family: var(--q-font-body);
    font-style: normal;
    font-size: 0.78rem;
    color: var(--q-ink-muted);
}

.composer__paste-list[b-d8w3u239jr] {
    counter-reset: pasted;
    max-height: 240px;
    margin: 0 0 12px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.composer__paste-list li[b-d8w3u239jr] {
    counter-increment: pasted;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--q-line-soft);
    font-size: 0.9rem;
    color: var(--q-ink);
}

.composer__paste-list li[b-d8w3u239jr]::before {
    content: counter(pasted, decimal-leading-zero);
    flex: none;
    width: 1.8em;
    font-family: var(--q-font-mono);
    font-size: 0.66rem;
    color: var(--q-ink-faint);
}

.composer__paste-title[b-d8w3u239jr] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.composer__paste-reads[b-d8w3u239jr] {
    font-family: var(--q-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--q-accent-text);
}

.composer__paste-actions[b-d8w3u239jr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767.98px) {
    /* Room is short on a phone: the reading starts under the plus, not under the words. */
    .composer[b-d8w3u239jr] {
        --composer-inset: 22px;
    }

    .tasks-view__add-input[b-d8w3u239jr],
    .composer__mirror[b-d8w3u239jr] {
        font-size: 16px;
    }

    .composer__readout[b-d8w3u239jr],
    .composer__hint[b-d8w3u239jr] {
        margin-inline: 8px;
    }

    .composer__readout[b-d8w3u239jr],
    .composer__hint[b-d8w3u239jr] {
        padding-left: calc(var(--composer-inset) - 8px);
    }

    .composer__paste[b-d8w3u239jr] {
        margin-inline: 8px;
    }

    .composer__options[b-d8w3u239jr] {
        left: 8px;
        right: 8px;
        max-width: none;
    }
}

/* Arrow keys mean nothing to a finger. */
@media (hover: none) {
    .composer__options-keys[b-d8w3u239jr] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .composer__options[b-d8w3u239jr],
    .composer__piece[b-d8w3u239jr],
    .composer__paste[b-d8w3u239jr] {
        animation: none;
    }

    .composer__hint[b-d8w3u239jr] {
        transition: none;
    }
}

/* Group headers — quiet, no sticky border */
.tasks-view__group-header[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 30px 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(--q-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(--q-ink);
}

.tasks-view__empty-sub[b-d8w3u239jr] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--q-ink-muted);
    max-width: 26rem;
}

/* The task's own page: a pane of lavender paper beside the list on a desk, a sheet
   over it on a phone — the iPhone app's detail sheet either way. */
.tasks-view__detail-col[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: none;
    overflow: hidden;
    background: var(--q-bg);
}

.tasks-view__detail-col > *[b-d8w3u239jr] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 769px) {
    /* Set off from the list, its corners rounded on the page card; it eases in from the
       side it sits on when a task is opened. */
    .tasks-view__detail-col[b-d8w3u239jr] {
        margin-left: 16px;
        border-radius: var(--radius-lg);
        animation: tasks-pane-in-b-d8w3u239jr 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
    }
}

@keyframes tasks-pane-in-b-d8w3u239jr {
    from { opacity: 0; transform: translateX(14px); }
}

@media (max-width: 768px) {
    .tasks-view__layout--with-detail[b-d8w3u239jr] {
        flex: 1;
        min-height: 0;
    }

    /* The sheet rises from the foot of the screen and stops short of the top, so the
       page it came from still shows above it. */
    .tasks-view__detail-col[b-d8w3u239jr] {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
        z-index: 1200;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -8px 40px rgba(20, 16, 32, 0.22);
        animation: tasks-sheet-rise-b-d8w3u239jr 0.34s cubic-bezier(0.2, 0.9, 0.25, 1);
        transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
    }

    /* While a finger is pulling it, the sheet follows the finger and nothing else. */
    .tasks-view__detail-col.is-pulled[b-d8w3u239jr] {
        transition: none;
    }

    .tasks-view__backdrop[b-d8w3u239jr] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 16, 32, 0.4);
        z-index: 1199;
        animation: tasks-backdrop-in-b-d8w3u239jr 0.24s ease-out;
    }

    .tasks-view__list-col[b-d8w3u239jr] {
        min-width: 0;
    }
}

@keyframes tasks-sheet-rise-b-d8w3u239jr {
    from { transform: translateY(100%); }
}

@keyframes tasks-backdrop-in-b-d8w3u239jr {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tasks-view__detail-col[b-d8w3u239jr],
    .tasks-view__backdrop[b-d8w3u239jr] {
        animation: none;
        transition: none;
    }
}

@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;
    }

    /* Inset to the rows' 8px so the plus sits over the tick circles. */
    .tasks-view__add-row[b-d8w3u239jr] {
        margin: 8px 8px 12px;
        padding: 6px 8px 6px 14px;
    }
}

/* ══ < 900px — 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 < 900px contract says should happen.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899.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;
    }

    /* The week grid is the exception. Left at `flex: 1 1 0` in a column that now sizes
       to its content it gets no height at all, and it cannot flow into the sheet
       either: it scrolls inside a frame of its own so the day headings and hour
       labels stay pinned while it pans. */
    .tasks-view__layout--week-pane .tasks-view__week-pane[b-d8w3u239jr] {
        flex: 0 0 auto;
        height: min(70dvh, 640px);
    }
}

.tasks-view__notice[b-d8w3u239jr] {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--q-line);
    color: var(--q-ink);
    background: var(--q-surface-raised);
}

.tasks-view__notice > span[b-d8w3u239jr] {
    flex: 1;
    min-width: 12rem;
    overflow-wrap: anywhere;
}

/* Undo notices as toasts: they drop in at the top centre, apart from the app's own
   toasts at the foot (ToastHost), and are set like them. The stack takes no clicks;
   only a toast does. */
.tasks-view__toasts[b-d8w3u239jr] {
    position: fixed;
    left: 50%;
    top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
    z-index: 1900;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(480px, calc(100vw - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

/* The words wrap rather than the buttons, so a phone keeps Undo and Dismiss on one row. */
.tasks-view__toasts .tasks-view__notice > span[b-d8w3u239jr] { min-width: 0; }

.tasks-view__toasts .tasks-view__notice[b-d8w3u239jr] {
    flex-wrap: nowrap;
    padding: 6px 8px 6px 16px;
    border: 1px solid var(--q-line);
    border-radius: 12px;
    box-shadow: var(--q-shadow-2);
    pointer-events: auto;
    animation: tasks-toast-in-b-d8w3u239jr 180ms ease-out both;
}

@keyframes tasks-toast-in-b-d8w3u239jr {
    from { opacity: 0; transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .tasks-view__toasts .tasks-view__notice[b-d8w3u239jr] { animation: none; }
}

.tasks-view__group-toggle[b-d8w3u239jr] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
}

/* The action strip appears only while choosing tasks; it shares the sheet's ink. */
.tasks-view__bulk[b-d8w3u239jr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--q-ink-muted);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--q-line-soft);
}
.tasks-view__bulk[b-d8w3u239jr] { background: var(--q-accent-soft); }
/* ══ Focus ═══════════════════════════════════════════════════════════════
   One task has the page. The list and the week stand down, the task's own page
   takes the whole card (the shell folds the rails away; see BroadsheetShell), and
   a folio line over it holds the way back and the way on. */
.tasks-view--focus .tasks-view__layout[b-d8w3u239jr] {
    display: flex;
    flex-direction: column;
}

.tasks-view--focus .tasks-view__list-stack[b-d8w3u239jr],
.tasks-view--focus .tasks-view__week-pane[b-d8w3u239jr],
.tasks-view--focus .tasks-view__backdrop[b-d8w3u239jr] {
    display: none;
}

/* Neither a pane beside the list nor a sheet over it: the page itself. */
.tasks-view--focus .tasks-view__detail-col[b-d8w3u239jr] {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    flex: 1 1 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    z-index: auto;
    background: transparent;
    animation: none;
    transition: none;
}

.tasks-view--focus .tasks-view__detail-col[b-d8w3u239jr]  .detail-panel {
    flex: 1;
    min-height: 0;
}

/* Under 900px the sheet scrolls, not the columns in it (see the note further up), so
   the page stands as tall as its story. */
@media (max-width: 899.98px) {
    .tasks-view--focus .tasks-view__detail-col[b-d8w3u239jr] {
        flex: 0 0 auto;
        height: auto;
        overflow: visible;
    }

    .tasks-view--focus .tasks-view__detail-col[b-d8w3u239jr]  .detail-panel {
        flex: 0 0 auto;
        height: auto;
    }

    .tasks-view--focus .tasks-view__detail-col[b-d8w3u239jr]  .detail-panel__scroll {
        overflow: visible;
    }
}

/* The folio line: set like the shell's, in mono small capitals over a hairline. */
.tasks-view__focus-bar[b-d8w3u239jr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--q-line);
    font-family: var(--q-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
}

.tasks-view__focus-back[b-d8w3u239jr],
.tasks-view__focus-next[b-d8w3u239jr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 36px;
    margin: 0 -10px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.tasks-view__focus-back:hover[b-d8w3u239jr],
.tasks-view__focus-next:hover[b-d8w3u239jr] {
    background: var(--q-hover);
    color: var(--q-ink);
}

.tasks-view__focus-back[b-d8w3u239jr] {
    justify-self: start;
}

.tasks-view__focus-back-label[b-d8w3u239jr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-view__focus-key[b-d8w3u239jr] {
    padding: 1px 5px 0;
    border: 1px solid var(--q-line);
    border-radius: 4px;
    font: inherit;
    font-size: 0.92em;
    letter-spacing: 0.04em;
    color: var(--q-ink-faint);
}

.tasks-view__focus-mark[b-d8w3u239jr] {
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 600;
    color: var(--q-ink);
    white-space: nowrap;
}

/* The motto in the masthead's italic, set off by a rule rather than a dot. */
.tasks-view__focus-motto[b-d8w3u239jr] {
    padding-left: 10px;
    border-left: 1px solid var(--q-line);
    font-family: var(--q-font-display);
    font-size: 1.3em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--q-ink-faint);
}

.tasks-view__focus-next[b-d8w3u239jr] {
    justify-self: end;
    grid-column: 3;
}

.tasks-view__focus-next-label[b-d8w3u239jr] {
    color: var(--q-ink-faint);
}

.tasks-view__focus-next-title[b-d8w3u239jr] {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--q-font-body);
    font-size: 1.22em;
    letter-spacing: 0;
    text-transform: none;
    color: var(--q-ink);
}

@media (max-width: 767.98px) {
    .tasks-view__focus-mark[b-d8w3u239jr],
    .tasks-view__focus-key[b-d8w3u239jr] {
        display: none;
    }

    .tasks-view__focus-next-title[b-d8w3u239jr] {
        max-width: 14ch;
    }
}

@media (pointer: coarse) {
    .tasks-view__bulk button[b-d8w3u239jr], .tasks-view__focus-bar button[b-d8w3u239jr] { min-height: 44px; }
}
.tasks-view__detail-col > .tasks-view__focus-bar[b-d8w3u239jr] { flex: 0 0 auto; }
.tasks-view__bulk-calendar[b-d8w3u239jr] { width: 280px; max-width: 100%; background: var(--q-surface-raised); border: 1px solid var(--q-line); border-radius: 14px; padding: 8px; }

/* Keep common decisions visible without asking people to learn the typed signs. */
.composer__shortcuts[b-d8w3u239jr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px var(--composer-inset);
}

.composer__shortcut[b-d8w3u239jr] {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    font-family: var(--q-font-body);
    font-size: 0.8rem;
    color: var(--q-ink-muted);
    background: var(--q-surface);
}

.composer__shortcut:hover[b-d8w3u239jr],
.composer__shortcut[aria-pressed="true"][b-d8w3u239jr] {
    color: var(--q-accent-text);
    background: var(--q-accent-soft);
    border-color: var(--q-accent-text);
}

.composer__shortcut:focus-visible[b-d8w3u239jr] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 3px;
}

.composer__context[b-d8w3u239jr] {
    margin: 0 14px 12px;
    padding-left: calc(var(--composer-inset) - 14px);
    font-family: var(--q-font-body);
    font-size: 0.75rem;
    color: var(--q-ink-muted);
    overflow-wrap: anywhere;
}

@media (pointer: coarse) {
    .composer__shortcut[b-d8w3u239jr] { min-height: 44px; }
}

.composer__paste-input[b-d8w3u239jr] {
    flex: 1 1 160px;
    min-width: 0;
    border: 1px solid var(--q-line);
    border-radius: 6px;
    padding: 8px;
    background: var(--q-surface);
    color: var(--q-ink);
    font: inherit;
}
.composer__paste-input:focus-visible[b-d8w3u239jr] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 2px;
}
.composer__paste-remove[b-d8w3u239jr] {
    justify-self: start;
    color: var(--q-ink-muted);
    font-size: 0.75rem;
    min-height: 36px;
    text-decoration: underline;
}
.composer__paste-input:disabled[b-d8w3u239jr],
.composer__paste-remove:disabled[b-d8w3u239jr] { opacity: 0.5; }

/* Use the actual workspace width, after the shell's sidebars, to choose panes. */
@container task-workspace (max-width: 1100px) {
    .tasks-view__layout.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] { border-left: 0; }
}
/* List, week and details side by side need the list's add line, the week's 744px
   canvas and the pane: about 1580px. Short of that, opening a task would squeeze the
   week until it scrolls sideways, so the details slide over it instead. */
@container task-workspace (min-width: 1100.02px) and (max-width: 1579.98px) {
    .tasks-view:not(.tasks-view--focus) .tasks-view__layout--week-pane.tasks-view__layout--with-detail[b-d8w3u239jr] {
        grid-template-columns: minmax(260px, min(400px, 36vw)) minmax(280px, 1fr);
    }
    .tasks-view:not(.tasks-view--focus) .tasks-view__layout--week-pane .tasks-view__detail-col[b-d8w3u239jr] {
        position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); grid-area: auto;
        margin-left: 0; z-index: 20; border: 1px solid var(--q-line);
        box-shadow: -12px 0 32px color-mix(in srgb, var(--q-ink) 12%, transparent);
    }
}
@media (min-width: 769px) {
    @container task-workspace (max-width: 1100px) {
        .tasks-view:not(.tasks-view--focus) .tasks-view__layout--with-detail[b-d8w3u239jr] { display: flex; }
        .tasks-view:not(.tasks-view--focus) .tasks-view__detail-col[b-d8w3u239jr] {
            position: absolute; inset: 0 0 0 auto; width: min(420px, 100%);
            margin-left: 0; z-index: 20; border: 1px solid var(--q-line);
            box-shadow: -12px 0 32px color-mix(in srgb, var(--q-ink) 12%, transparent);
        }
    }
}
/* /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(--q-line);
}

.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(--q-line);
}

.calendar-view__day[b-sti16xnyft] {
    min-height: 90px;
    padding: 4px 6px;
    border-right: 1px solid var(--q-line);
    border-bottom: 1px solid var(--q-line);
    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(--q-surface);
    color: var(--q-ink);
}

.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(--q-line) 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(--q-ink-muted);
    cursor: pointer;
}

.week-cal__icon-btn:hover[b-v8hf5zyha3],
.week-cal__icon-btn:focus-visible[b-v8hf5zyha3] {
    background: var(--q-hover);
    color: var(--q-ink);
    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(--q-ink-muted);
    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(--q-ink-muted);
    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(--q-hover);
    outline: none;
}

/* Day headings and the all-day row stay pinned while the hours scroll under them. */
.week-cal__head[b-v8hf5zyha3] {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
    background: var(--q-surface);
}

.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(--q-line) 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(--q-ink-muted);
}

.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(--q-accent);
    color: 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;
    border-bottom: 1px solid color-mix(in srgb, var(--q-line) 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(--q-ink-muted);
}

/* Each day caps its own chips; a row-wide scroller would unpin the label beside them. */
.week-cal__allday-col[b-v8hf5zyha3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 3px;
    min-width: 0;
    max-height: 120px;
    overflow-y: auto;
    border-left: 1px solid color-mix(in srgb, var(--q-line) 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(--q-accent);
    background: color-mix(in srgb, var(--q-accent) 20%, var(--q-surface));
    color: var(--q-ink);
    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);
}

.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(--q-ink-disabled);
    background: color-mix(in srgb, var(--q-ink-disabled) 10%, var(--q-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(--q-ink-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(--q-ink) 6%, transparent);
}

.week-cal__chip-grip:active[b-v8hf5zyha3] {
    cursor: grabbing;
}

.week-cal__chip-grip[b-v8hf5zyha3]  .q-icon {
    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(--q-ink-muted);
    padding-left: 2px;
}

/* Full height (set inline from the hour range) so every hour has a day column to drop
   on; .week-cal__scroll does the scrolling. */
.week-cal__body[b-v8hf5zyha3] {
    flex: 1 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    --week-cal-hours: 16;
}

/* The hour labels hold the left edge while the days pan under them. */
.week-cal__corner[b-v8hf5zyha3],
.week-cal__allday-label[b-v8hf5zyha3],
.week-cal__times[b-v8hf5zyha3] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--q-surface);
}

.week-cal__times[b-v8hf5zyha3] {
    border-right: 1px solid color-mix(in srgb, var(--q-line) 40%, transparent);
}

.week-cal__time-label[b-v8hf5zyha3] {
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
    font-size: 0.62rem;
    color: var(--q-ink-muted);
    white-space: nowrap;
}

/* Isolated so a block's z-index (up to the resize ghost's 80) stays under the hour labels. */
.week-cal__day-col[b-v8hf5zyha3] {
    position: relative;
    isolation: isolate;
    border-left: 1px solid color-mix(in srgb, var(--q-line) 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(--q-line) 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(--q-accent) 35%, transparent);
    border-left: 3px solid var(--q-accent);
    background: color-mix(in srgb, var(--q-accent) 14%, var(--q-surface));
    color: var(--q-ink);
    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;
}

.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(--q-ink-disabled);
    border-color: color-mix(in srgb, var(--q-ink-disabled) 25%, transparent);
    background: color-mix(in srgb, var(--q-ink-disabled) 8%, var(--q-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;
}

.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(--q-ink) 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(--q-ink) 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(--q-ink-muted));
}

.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(--q-ink-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(--q-ink) 5%, transparent);
}

.week-cal__block-grip:active[b-v8hf5zyha3] {
    cursor: grabbing;
}

.week-cal__block-grip[b-v8hf5zyha3]  .q-icon {
    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(--q-ink-muted));
}

.week-cal__p-high[b-v8hf5zyha3] {
    border-left-color: var(--pri-high) !important;
    background: color-mix(in srgb, var(--pri-high) 18%, var(--q-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(--q-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(--q-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(--q-ink-muted) 45%, transparent);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: color-mix(in srgb, var(--q-ink-muted) 55%, transparent);
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--q-ink-muted) 7%, var(--q-surface)),
        color-mix(in srgb, var(--q-ink-muted) 7%, var(--q-surface)) 6px,
        color-mix(in srgb, var(--q-ink-muted) 11%, var(--q-surface)) 6px,
        color-mix(in srgb, var(--q-ink-muted) 11%, var(--q-surface)) 12px
    );
    color: var(--q-ink-muted);
    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(--q-ink-muted) 55%, transparent);
    background: color-mix(in srgb, var(--q-ink-muted) 8%, transparent);
    color: var(--q-ink-muted);
    font-size: 0.72rem;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* Keep day headings and time slots aligned while narrow screens pan the week. */
.week-cal__scroll[b-v8hf5zyha3] { flex: 1 1 0; min-height: 0; overflow: auto; }
.week-cal__canvas[b-v8hf5zyha3] { display: flex; flex-direction: column; min-width: 744px; min-height: 100%; }
.week-cal__block-grip[b-v8hf5zyha3] { position: relative; z-index: 5; align-self: stretch; align-items: center; color: var(--q-ink-muted); opacity: .85; padding-top: 0; }
.week-cal__block-resize[b-v8hf5zyha3] { left: 20px; }
.week-cal__block-wrap--dense .week-cal__block-resize[b-v8hf5zyha3] { left: 22px; }
.week-cal__block-wrap--dense .week-cal__block-row[b-v8hf5zyha3] { padding: 0; align-items: stretch; }
.week-cal__block--dense-move[b-v8hf5zyha3] { gap: 1px !important; padding: 0 3px !important; }
/* /Components/Timing/StopwatchPill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * The clocks — folio bar and ledger panel.
 *
 * The bar sits in a capsule of its own on the folio line, beside the tools'
 * capsule, 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.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── The capsule ───────────────────────────────────────────────────────────
 * The clock's own piece of furniture on the folio line, beside the tools'
 * capsule rather than inside it. The clock is the Pro instrument, and filed
 * between the search and the bell it read as one more menu item. Cut to the
 * same box as .bs__folio-tools — the strip's height, 4px at the sides, the
 * full radius — so the two sit as a pair, and tinted with the accent the Pro
 * mark is printed on, so it is the one capsule in the line with a colour of
 * its own.
 * ────────────────────────────────────────────────────────────────────────── */

.stopwatch[b-0q11brrr9a] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: var(--bs-folio-h, 32px);
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--q-accent) 24%, var(--q-surface-raised));
    box-shadow: var(--q-shadow-1);
    transition: background-color 200ms ease;
}

/* Something is running: the whole capsule takes the marker, so the line reads
   live from the corner of the eye, before any figure has been read. */
.stopwatch--on[b-0q11brrr9a] {
    background: color-mix(in srgb, var(--q-accent) 50%, var(--q-surface-raised));
}

/* Lime laid over the night paper goes to a muddy grey long before it reads as
   the marker, so at night the capsule keeps the paper and the accent becomes a
   rim: a half-strength hairline at rest, the full accent with a halo once
   something is running. */
.theme-dark .stopwatch[b-0q11brrr9a] {
    background: var(--q-surface-raised);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-accent) 45%, transparent);
}

.theme-dark .stopwatch--on[b-0q11brrr9a] {
    background: var(--q-surface-raised);
    box-shadow: inset 0 0 0 1px var(--q-accent),
                0 0 0 3px color-mix(in srgb, var(--q-accent) 14%, transparent);
}

/* Free: the same capsule, empty — drawn in outline, the way the Pro mark is
   drawn for a Free reader. */
.stopwatch--locked[b-0q11brrr9a],
.theme-dark .stopwatch--locked[b-0q11brrr9a] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--q-line);
}

/* ── 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: 0;
    border-radius: var(--radius-full, 999px);
    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 32px target that block exists to fix.
   Each entry is rounded itself instead, so nothing at the corners needs clipping. */

/* The live wash is the capsule's now (.stopwatch--on); the bar inside it stays
   clear so the two do not stack into a second, inset band of colour. */

.clockbar__entry[b-0q11brrr9a] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: none;
    color: var(--q-ink-muted);
    font: inherit;
    font-size: 0.8rem;
    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: 12px;
}

/* Hover deepens the capsule's own tint rather than laying the folio's grey well
   over it, which on lime reads as a smudge. The outline capsule has no tint to
   deepen, so it takes the well like the folio's other controls. */
.clockbar__entry:hover[b-0q11brrr9a] {
    background: color-mix(in srgb, var(--q-accent) 38%, transparent);
    color: var(--q-ink);
}

.stopwatch--locked .clockbar__entry:hover[b-0q11brrr9a] {
    background: var(--q-well);
}

.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.
 * ────────────────────────────────────────────────────────────────────────── */

/* The verb takes full ink: on the tinted capsule it is the invitation, not a
   label. The Free capsule keeps it muted, since there it leads to the plans. */
.clockbar__entry--idle[b-0q11brrr9a] {
    color: var(--q-ink);
}

.stopwatch--locked .clockbar__entry--idle[b-0q11brrr9a] {
    color: var(--q-ink-muted);
}

.clockbar__idle[b-0q11brrr9a] {
    font-size: 0.8rem;
}

/* The glyph in the marker family — the one mark in the capsule that says
   "accent" as type rather than as the fill behind it. */
.clockbar__entry--idle[b-0q11brrr9a]  .clockbar__start-glyph {
    color: var(--q-accent-text);
}

.stopwatch--locked[b-0q11brrr9a]  .clockbar__start-glyph {
    color: inherit;
}

/* The Free capsule names the plan it belongs to with the plan's own mark, cut
   to the line's small type. */
.clockbar__pro[b-0q11brrr9a] {
    font-size: 0.72rem;
}

/* 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[b-0q11brrr9a]  .clockbar__start-glyph {
    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;
}

/* Unlayered, so it beats the element reset on bare `input` — 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);
}

/* ── The picker ─────────────────────────────────────────────────────────────
 * Read top to bottom as the sentence being formed: what the work is, set large
 * in the masthead's face on a ruled line; the recent stretches, one press each;
 * then the project and the start as rows of chips, every choice one press and
 * the chosen one inked in the accent; and the button, saying back what it will
 * do. No field here needs a dropdown opened or a label read twice. */
.clockpicker[b-0q11brrr9a] {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.clockpicker__banking[b-0q11brrr9a] {
    margin: 4px 0 10px;
    padding: 9px 11px;
    border: 1px solid var(--q-line-soft);
    border-radius: var(--radius-sm, 6px);
    background: var(--q-accent-softer);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--q-ink-muted);
}

.clockpicker__banking strong[b-0q11brrr9a] {
    font-family: var(--q-font-mono);
    font-weight: 500;
    color: var(--q-ink);
}

/* Unlayered, so it beats the element reset on bare `input` — see tailwind.css. */
.clockpicker__what[b-0q11brrr9a] {
    width: 100%;
    margin: 2px 0 0;
    padding: 6px 0 10px;
    border: 0;
    border-bottom: 1px solid var(--q-line);
    border-radius: 0;
    background: none;
    font-family: var(--q-font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--q-ink);
    outline: none;
    transition: border-color 0.15s ease;
}

.clockpicker__what[b-0q11brrr9a]::placeholder {
    font-style: italic;
    color: var(--q-ink-faint);
    opacity: 0.85;
}

.clockpicker__what:focus[b-0q11brrr9a] {
    border-bottom-color: var(--q-accent-text);
}

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

.clockpicker__dot[b-0q11brrr9a] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Pick up again: rows that start on a press, the start glyph waiting at the end. */
.clockpicker__recent[b-0q11brrr9a] {
    display: flex;
    flex-direction: column;
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

.clockpicker__again[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: none;
    font-family: var(--q-font-body);
    text-align: left;
    color: var(--q-ink);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.clockpicker__again:hover:not(:disabled)[b-0q11brrr9a] {
    background: var(--q-hover);
}

.clockpicker__again-what[b-0q11brrr9a] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clockpicker__again-project[b-0q11brrr9a] {
    flex: 0 1 auto;
    max-width: 42%;
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--q-ink-faint);
}

.clockpicker__again[b-0q11brrr9a]  .clockpicker__again-go {
    flex-shrink: 0;
    color: var(--q-ink-faint);
    opacity: 0.6;
    transition: color 0.12s ease, opacity 0.12s ease;
}

.clockpicker__again:hover:not(:disabled)[b-0q11brrr9a]  .clockpicker__again-go,
.clockpicker__again:focus-visible[b-0q11brrr9a]  .clockpicker__again-go {
    color: var(--q-accent-text);
    opacity: 1;
}

/* The chips: project and start, one press each. */
.clockpicker__chips[b-0q11brrr9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.clockpicker__chip[b-0q11brrr9a] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-full);
    background: none;
    font-family: var(--q-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--q-ink-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.clockpicker__chip > span:last-child[b-0q11brrr9a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clockpicker__chip:hover[b-0q11brrr9a] {
    border-color: var(--q-ink-faint);
    color: var(--q-ink);
}

.clockpicker__chip--on[b-0q11brrr9a],
.clockpicker__chip--on:hover[b-0q11brrr9a] {
    border-color: var(--q-accent-text);
    background: var(--q-accent-soft);
    box-shadow: inset 0 0 0 1px var(--q-accent-text);
    color: var(--q-ink);
}

/* The last start chip is a time field: typing in it is choosing it. */
.clockpicker__chip--at[b-0q11brrr9a] {
    gap: 3px;
    padding: 0 6px 0 12px;
    cursor: text;
}

.clockpicker__chip--at:focus-within[b-0q11brrr9a] {
    border-color: var(--q-accent-text);
}

.clockpicker__chip--at input[b-0q11brrr9a] {
    /* Wide enough for "10:41 AM"; Chrome sizes a time field off the default font. */
    width: 9.5ch;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--q-font-body);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: inherit;
    outline: none;
}

.clockpicker__chip--at input[b-0q11brrr9a]::-webkit-calendar-picker-indicator {
    display: none;
}

.clockpicker__foot[b-0q11brrr9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.clockpicker__go[b-0q11brrr9a] {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--q-accent);
    font-family: var(--q-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--q-accent-ink);
    cursor: pointer;
    transition: background-color 0.13s ease, transform 0.15s ease;
}

.clockpicker__go:hover:not(:disabled)[b-0q11brrr9a] {
    background: var(--q-accent-hover);
}

.clockpicker__go:active:not(:disabled)[b-0q11brrr9a] {
    transform: translateY(1px);
}

.clockpicker__go:disabled[b-0q11brrr9a],
.clockpicker__again:disabled[b-0q11brrr9a] {
    opacity: 0.5;
    cursor: default;
}

.clockpicker__cancel[b-0q11brrr9a] {
    height: 44px;
}

.clockpicker__chip:focus-visible[b-0q11brrr9a],
.clockpicker__again:focus-visible[b-0q11brrr9a],
.clockpicker__go:focus-visible[b-0q11brrr9a] {
    outline: 2px solid var(--q-accent-text);
    outline-offset: 2px;
}

/* 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;
    }

    /* The panel hangs from the capsule's right edge on a desk. On a phone the
       capsule sits left of the tools, so a 364px panel hung from it ran off the
       left of the screen; here it is pinned to the viewport's gutters instead,
       just under the folio line. */
    .clockpanel[b-0q11brrr9a] {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 52px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: 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;
    }
}