@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
[b-lz1sw1rs2p] .login-card {
    padding: 40px 32px 32px;
    width: 100%;
}

.login-header[b-lz1sw1rs2p] {
    text-align: center;
    margin-bottom: 28px;
}

.login-title[b-lz1sw1rs2p] {
    font-size: var(--dpab-font-size-xl);
    line-height: var(--dpab-line-height-xl);
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--dpab-text);
}

.login-subtitle[b-lz1sw1rs2p] {
    font-size: var(--dpab-font-size-base);
    color: var(--dpab-text-hint);
    margin: 0;
}

.form-field[b-lz1sw1rs2p] {
    width: 100%;
}

.login-options[b-lz1sw1rs2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.external-login-section[b-lz1sw1rs2p] {
    text-align: center;
}

.external-login-label[b-lz1sw1rs2p] {
    font-size: var(--dpab-font-size-sm);
    color: var(--dpab-text-hint);
    margin: 0 0 12px;
}

.login-footer-links[b-lz1sw1rs2p] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: var(--dpab-stroke-width) solid var(--dpab-divider);
}

@media (max-width: 480px) {
    [b-lz1sw1rs2p] .login-card {
        padding: 28px 20px 24px;
    }

    .login-options[b-lz1sw1rs2p] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Components/App.razor.rz.scp.css */
.error-container[b-eg0v7vr1al] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
}

.error-home-link[b-eg0v7vr1al] {
    margin-top: 1rem;
}
/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.language-selector[b-ydyjrzkt1j] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.language-selector select[b-ydyjrzkt1j] {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: auto;
}

.language-selector select:hover[b-ydyjrzkt1j] {
    border-color: rgba(255, 255, 255, 0.6);
}

.language-selector select:focus[b-ydyjrzkt1j] {
    outline: 2px solid var(--dpab-brand, #0078d4);
    outline-offset: 1px;
}

.language-selector select option[b-ydyjrzkt1j] {
    background: var(--dpab-surface-1, #fff);
    color: var(--dpab-text, #000);
}

/* Phone (xs): render at >= 16px so iOS Safari does not auto-zoom on focus.
   This scoped selector (.language-selector select[b-xxx]) outranks the global
   `select { font-size: 16px }` in app.css, which otherwise loses on specificity
   to the 0.875rem rule above and leaves the auto-zoom bug in place. */
@media (max-width: 599.98px) {
    .language-selector select[b-ydyjrzkt1j] {
        font-size: 16px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Mobile-first responsive styles for MainLayout.
   Breakpoints align to the xs/sm boundary documented in wwwroot/app.css
   (was an ad-hoc 640/641 pair). */

/* Phone (xs): full-width search, tight gutters */
@media (max-width: 599.98px) {
    .app-header[b-phnjpw2tt7] {
        padding: 8px !important;
    }

    .app-header > div[b-phnjpw2tt7] {
        padding: 4px 8px !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ============================================
   Offline Banner — non-blocking bottom bar
   ============================================ */

.offline-banner[b-1khdnt1jqs] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.offline-banner.visible[b-1khdnt1jqs] {
    transform: translateY(0);
    pointer-events: auto;
}

.offline-banner-content[b-1khdnt1jqs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 14px;
    font-weight: 500;
    font-family: var(--dpab-font, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif);
}

/* Offline state — warning amber */
.offline-banner.banner-offline .offline-banner-content[b-1khdnt1jqs] {
    background: #d97706;
    color: #ffffff;
}

/* Reconnecting state — blue accent */
.offline-banner.banner-reconnecting .offline-banner-content[b-1khdnt1jqs] {
    background: #3B6BA5;
    color: #ffffff;
}

/* Back online state — success green */
.offline-banner.banner-online .offline-banner-content[b-1khdnt1jqs] {
    background: #16a34a;
    color: #ffffff;
}

.offline-banner-icon[b-1khdnt1jqs] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.offline-banner-text[b-1khdnt1jqs] {
    line-height: 1;
}

/* Reconnecting pulse animation on the icon */
.offline-banner.banner-reconnecting .offline-banner-icon[b-1khdnt1jqs] {
    animation: banner-pulse-b-1khdnt1jqs 1.5s ease-in-out infinite;
}

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

/* ============================================
   Reconnect Modal — blocking dialog
   ============================================ */

/* Hide state-specific elements by default */
.components-reconnect-first-attempt-visible[b-1khdnt1jqs],
.components-reconnect-repeated-attempt-visible[b-1khdnt1jqs],
.components-reconnect-failed-visible[b-1khdnt1jqs],
.components-pause-visible[b-1khdnt1jqs],
.components-resume-failed-visible[b-1khdnt1jqs],
.components-rejoining-animation[b-1khdnt1jqs] {
    display: none;
}

/* Show elements based on modal state classes */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-retrying[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-failed[b-1khdnt1jqs],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1khdnt1jqs] {
    display: block;
}

#components-reconnect-modal[b-1khdnt1jqs] {
    background-color: #2b2b40;
    color: #e0e0e0;
    width: 22rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1khdnt1jqs 0.5s both;

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-1khdnt1jqs {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

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

#components-reconnect-modal p[b-1khdnt1jqs] {
    margin: 0;
    text-align: center;
    font-family: var(--dpab-font, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    color: #c0c0d8;
}

#components-reconnect-modal button[b-1khdnt1jqs] {
    border: 0;
    background-color: #3B6BA5;
    color: #ffffff;
    padding: 8px 28px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

#components-reconnect-modal button:hover[b-1khdnt1jqs] {
    background-color: #4a7db8;
}

#components-reconnect-modal button:active[b-1khdnt1jqs] {
    background-color: #2f5a8f;
}

/* Ripple spinner animation */
.components-rejoining-animation[b-1khdnt1jqs] {
    position: relative;
    width: 64px;
    height: 64px;
}

.components-rejoining-animation div[b-1khdnt1jqs] {
    position: absolute;
    border: 3px solid #3B6BA5;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-1khdnt1jqs 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

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

@keyframes components-rejoining-animation-b-1khdnt1jqs {
    0% {
        top: 32px;
        left: 32px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 32px;
        left: 32px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 32px;
        left: 32px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 64px;
        height: 64px;
        opacity: 0;
    }
}
/* /Components/Pages/DevBoard.razor.rz.scp.css */
.devboard-page[b-1l800rufod] {
    padding: 24px;
    max-width: 1700px;
    margin: 0 auto;
}

/* Horizontal scrolling columns.
   The board is a flex item of the page's vertical stack; without min-width:0 it keeps its
   full content width (6 fixed 300px columns ≈ 1880px) and pushes the whole page wider than
   the viewport. Pinning min-width:0 / max-width:100% lets it stay within the column and show
   its OWN horizontal scrollbar instead of scrolling the entire page. */
.board[b-1l800rufod] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Phones render ONE lane, chosen by the switcher above. Six side-by-side lanes on a 390px
   screen is a swipe with no map: no lane indicator, no sense of position, and nothing to tell
   you which of the six you are looking at. */
.board-single[b-1l800rufod] {
    overflow-x: visible;
}

.board-single .column[b-1l800rufod] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.column[b-1l800rufod] {
    flex: 0 0 300px;
    background: var(--dpab-surface-2);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    transition: outline 0.1s ease-in-out;
}

.column.drag-target[b-1l800rufod] {
    outline: 2px dashed var(--dpab-brand);
    outline-offset: -2px;
}

.column-header[b-1l800rufod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 6px 8px;
    font-weight: 600;
}

.column-count[b-1l800rufod] {
    background: var(--dpab-fill-subtle);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* "4 of 11" reads differently from "4" and must look different too — a filtered count that
   looks like a total is a number somebody plans a week on. */
.column-count-filtered[b-1l800rufod] {
    background: var(--dpab-brand);
    color: var(--dpab-fill);
}

/* ----- Filter bar ----- */
.board-filters[b-1l800rufod] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.filter-fields[b-1l800rufod] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* The disclosure button only exists on phones; on wider screens the fields are always shown. */
.filter-toggle[b-1l800rufod] {
    display: none;
}

.filter-note[b-1l800rufod] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dpab-text-hint);
    background: var(--dpab-surface-2);
    border-radius: 6px;
    padding: 6px 10px;
}

/* ----- Phone lane switcher ----- */
.lane-switcher[b-1l800rufod] {
    display: none;
    gap: 6px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
}

.lane-tab[b-1l800rufod] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px touch floor — the repo's mobile rule, not a rounding of the visual height. */
    min-height: 44px;
    padding: 0 12px;
    border-radius: 20px;
    border: 1px solid var(--dpab-stroke);
    background: var(--dpab-surface-1);
    color: var(--dpab-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.lane-tab-active[b-1l800rufod] {
    border-color: var(--dpab-brand);
    background: var(--dpab-brand);
    color: var(--dpab-fill);
}

.lane-tab-active .column-count[b-1l800rufod] {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.cards[b-1l800rufod] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 48px;
    padding: 4px;
    flex: 1;
}

.card[b-1l800rufod] {
    background: var(--dpab-surface-1);
    border: 1px solid var(--dpab-stroke);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.card:hover[b-1l800rufod] {
    border-color: var(--dpab-brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Read-only cards (non-editors): no affordance to click or drag. */
.card-readonly[b-1l800rufod] {
    cursor: default;
}

.card-readonly:hover[b-1l800rufod] {
    border-color: var(--dpab-stroke);
    box-shadow: none;
}

/* A sub-task is visibly a smaller thing than an epic, so the "All" view can be read at a glance
   rather than by reading every parent chip. */
.card-subtask[b-1l800rufod] {
    background: var(--dpab-surface-2);
    border-style: dashed;
}

.card .stripe[b-1l800rufod] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.card-top[b-1l800rufod] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.card-title[b-1l800rufod] {
    font-weight: 600;
    margin: 0 0 8px 0;
    padding-left: 4px;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.card-desc[b-1l800rufod] {
    margin: 0 0 8px 0;
    padding-left: 4px;
    font-size: 12px;
    color: var(--dpab-text-hint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- Sub-task roll-up ----- */
.progress[b-1l800rufod] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px 4px;
}

.progress-bar[b-1l800rufod] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--dpab-fill-subtle);
    overflow: hidden;
}

.progress-bar span[b-1l800rufod] {
    display: block;
    height: 100%;
    background: var(--dpab-brand);
}

.progress-label[b-1l800rufod] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dpab-text-hint);
    white-space: nowrap;
}

.card-meta[b-1l800rufod] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-left: 4px;
}

.chip[b-1l800rufod] {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-muted[b-1l800rufod] {
    background: var(--dpab-fill-subtle);
    color: var(--dpab-text);
}

/* Due today or later this week; overdue. Two levels, because "act now" and "act eventually" are
   different decisions and one amber for both hides the first inside the second. */
.chip-due[b-1l800rufod] {
    background: #f59e0b;
    color: #fff;
}

.chip-overdue[b-1l800rufod] {
    background: #dc2626;
    color: #fff;
}

/* Standing still in a lane where that means something. Amber rather than red: a stale card is a
   question ("is this still moving?"), not a failure — red is reserved for a date that has passed. */
.chip-stale[b-1l800rufod] {
    background: #b45309;
    color: #fff;
}

.chip-nudge[b-1l800rufod] {
    background: #22c55e;
    color: #fff;
}

.chip-parent[b-1l800rufod] {
    background: var(--dpab-fill-subtle);
    color: var(--dpab-text);
    text-decoration: none;
}

.chip-parent:hover[b-1l800rufod] {
    text-decoration: underline;
}

.gh-link[b-1l800rufod] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--dpab-brand-text);
    text-decoration: none;
    font-weight: 600;
}

.gh-link:hover[b-1l800rufod] {
    text-decoration: underline;
}

.empty-col[b-1l800rufod] {
    color: var(--dpab-text-hint);
    font-size: 13px;
    text-align: center;
    padding: 16px 8px;
}

/* Modal editor */
.modal-backdrop[b-1l800rufod] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

/* 96vw matches the cap every FluentDialog in this app gets from the shared dialog rules; this
   editor is hand-rolled, so it has to state it rather than inherit it. */
.modal[b-1l800rufod] {
    width: 100%;
    max-width: min(560px, 96vw);
}

/* Colour label swatches */
.swatch[b-1l800rufod] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    color: var(--dpab-text);
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.swatch-selected[b-1l800rufod] {
    border-color: var(--dpab-text);
    box-shadow: 0 0 0 2px var(--dpab-surface-1);
}

/* xs — the documented breakpoint (<600), not an ad-hoc pixel value. The C# side branches on
   ViewportState.IsPhone at the same cutoff, so the lane switcher and this rule cannot disagree. */
@media (max-width: 599.98px) {
    .devboard-page[b-1l800rufod] {
        padding: 12px;
    }

    .lane-switcher[b-1l800rufod] {
        display: flex;
    }

    .filter-toggle[b-1l800rufod] {
        display: inline-flex;
    }

    /* Collapsed by default on phones: the filter row is six controls, which is a screenful before
       the board starts. The toggle carries the active count so a narrowed board never looks
       unfiltered while its fields are hidden. */
    .filter-fields[b-1l800rufod] {
        display: none;
        width: 100%;
    }

    .filter-fields-open[b-1l800rufod] {
        display: flex;
    }

    .filter-fields > *[b-1l800rufod] {
        width: 100%;
    }

    .modal-backdrop[b-1l800rufod] {
        padding: 16px 8px;
    }
}

/* Sub-task checklist inside an epic's detail view. One row per sub-task: checkbox, title, then the
   chips that say what it is. The title takes the free space and ellipses, so a long title cannot push
   the chips off the row or widen the dialog. */
.subtask-row[b-1l800rufod] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 2px 0;
    min-width: 0;
}

.subtask-title[b-1l800rufod] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-done[b-1l800rufod] {
    text-decoration: line-through;
    color: var(--dpab-text-hint);
}
/* /Components/Pages/DevBoardRoadmap.razor.rz.scp.css */
.roadmap-page[b-1tma3hodix] {
    padding: 24px;
    max-width: 1700px;
    margin: 0 auto;
}

/* The grid is four quarters wide and can exceed a laptop viewport once product names are long.
   It scrolls inside its OWN container rather than pushing the page sideways — the same rule the
   server-paged grids follow, and what keeps the no-horizontal-page-overflow invariant true. */
.roadmap-grid-wrap[b-1tma3hodix] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.roadmap-grid[b-1tma3hodix] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
    min-width: 900px;
}

.roadmap-grid th[b-1tma3hodix] {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--dpab-text-hint);
    padding: 4px 8px;
}

.roadmap-grid .row-head[b-1tma3hodix] {
    width: 180px;
    color: var(--dpab-text);
    vertical-align: top;
    padding-top: 12px;
    word-break: break-word;
}

.roadmap-grid td[b-1tma3hodix] {
    vertical-align: top;
    background: var(--dpab-surface-2);
    border-radius: 8px;
    padding: 8px;
    min-height: 80px;
}

/* The quarter we are actually in. A roadmap without a "you are here" is a picture rather than a
   plan — the reader has to work out which column matters before anything else on the page helps. */
.quarter-now[b-1tma3hodix] {
    outline: 2px solid var(--dpab-brand);
    outline-offset: -2px;
}

.now-chip[b-1tma3hodix] {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--dpab-brand);
    color: var(--dpab-fill);
}

.quarter-cell[b-1tma3hodix] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
}

.roadmap-tile[b-1tma3hodix] {
    display: block;
    position: relative;
    background: var(--dpab-surface-1);
    border: 1px solid var(--dpab-stroke);
    border-radius: 6px;
    padding: 8px 8px 8px 12px;
    text-decoration: none;
    color: var(--dpab-text);
    overflow: hidden;
    /* 44px touch floor, so the phone layout's tiles are tappable without a separate rule. */
    min-height: 44px;
}

.roadmap-tile:hover[b-1tma3hodix] {
    border-color: var(--dpab-brand);
}

.tile-stripe[b-1tma3hodix] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.tile-title[b-1tma3hodix] {
    display: block;
    font-weight: 600;
    font-size: 13px;
    word-break: break-word;
}

.tile-meta[b-1tma3hodix] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--dpab-text-hint);
}

.tile-progress[b-1tma3hodix] {
    font-weight: 600;
}

/* Shipped work stays on the roadmap — it is the most interesting row on a yearly view — but it
   should read as behind you rather than ahead. */
.tile-done .tile-title[b-1tma3hodix] {
    text-decoration: line-through;
}

.tile-archived[b-1tma3hodix] {
    opacity: 0.72;
}

@media (max-width: 599.98px) {
    .roadmap-page[b-1tma3hodix] {
        padding: 12px;
    }
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
.cmdp-overlay[b-x4rweh9o4h] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.cmdp-panel[b-x4rweh9o4h] {
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--dpab-surface-floating, var(--dpab-surface-1));
    color: var(--dpab-text);
    border: 1px solid var(--dpab-stroke);
    border-radius: var(--dpab-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.cmdp-input-row[b-x4rweh9o4h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dpab-divider, var(--dpab-stroke));
}

.cmdp-input[b-x4rweh9o4h] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dpab-text);
    font-size: 16px;
    line-height: 24px;
    font-family: inherit;
}

.cmdp-input[b-x4rweh9o4h]::placeholder {
    color: var(--dpab-text-hint);
}

.cmdp-results[b-x4rweh9o4h] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.cmdp-group[b-x4rweh9o4h] {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dpab-text-hint);
}

.cmdp-item[b-x4rweh9o4h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    user-select: none;
}

.cmdp-item-selected[b-x4rweh9o4h] {
    background: var(--dpab-fill-subtle-hover, rgba(127, 127, 127, 0.16));
}

.cmdp-item-icon[b-x4rweh9o4h] {
    flex: 0 0 auto;
}

.cmdp-item-text[b-x4rweh9o4h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmdp-item-title[b-x4rweh9o4h] {
    font-size: 14px;
    color: var(--dpab-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdp-item-subtitle[b-x4rweh9o4h] {
    font-size: 12px;
    color: var(--dpab-text-hint);
}

.cmdp-empty[b-x4rweh9o4h] {
    padding: 28px 16px;
    text-align: center;
    color: var(--dpab-text-hint);
    font-size: 14px;
}

.cmdp-footer[b-x4rweh9o4h] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--dpab-divider, var(--dpab-stroke));
    font-size: 12px;
    color: var(--dpab-text-hint);
}

.cmdp-kbd[b-x4rweh9o4h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0 2px;
    border: 1px solid var(--dpab-stroke);
    border-radius: 4px;
    background: var(--dpab-fill, rgba(127, 127, 127, 0.1));
    font-size: 11px;
    font-family: inherit;
    line-height: 1;
}
/* /Components/Shared/HeadingCount.razor.rz.scp.css */
/* Reserves the absolutely-positioned badge's own width in normal flow, so a heading count can never
   overhang the container and put a 390px phone into horizontal scroll. 3.25em covers "999+". */
.heading-count[b-178oye57lm] {
    display: inline-block;
    min-width: 3.25em;
    margin-left: 0.5em;
    vertical-align: baseline;
}
/* /Components/Shared/NavBreadcrumb.razor.rz.scp.css */
/* A three-level trail does not fit 390px. Scrolling the strip is the documented way wide content
   behaves in this app (`table-scroll`); letting it push the page into horizontal scroll is not. */
.nav-breadcrumb[b-geg836dnu9] {
    max-width: 100%;
    overflow-x: auto;
}

.nav-breadcrumb-list[b-geg836dnu9] {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.nav-breadcrumb-list li[b-geg836dnu9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}