/* DEX Briefing — the daily briefing sheet.
   ============================================================================
   One of the two licensed editorial Read surfaces (see DESIGN.md → "Documented
   exception: the editorial Read surfaces"). What the exemption covers here: the
   sub-14px eyebrow/caption roles, uppercase tracked eyebrows, the display
   numeral, and flat paper-on-ground in place of Design D glass.

   What it does NOT cover, and both are enforced below:
     1. Every accent resolves from var(--mud-palette-primary), never a frozen
        #155DFC — a platform operator inside a customer tenant must see this
        sheet turn red like the rest of the app.
     2. All text meets WCAG AA. The muted ramp stops at #6B7280 (4.8:1 on
        paper); nothing fainter carries text.

   The lower half of this file (.next-action-section*, .brief-row*) is NOT part
   of the sheet — it styles NextActionCard/DataHealthSection, which the chat
   panel and /data-health still render. Do not delete it with the sheet.
   ============================================================================ */

.dex-briefing-page {
    --brief-paper: #FFFFFF;
    --brief-ink: #0F172B;
    --brief-ink-soft: #4B5563;
    --brief-muted: #6B7280;
    --brief-line: #DEE2ED;
    --brief-mast: #172036;
    --brief-accent: var(--mud-palette-primary);

    /* The sheet is a real A4 page, scaled up ~18% so it has presence on a desktop monitor
       rather than reading as a narrow column. A4 at 96dpi is 794px; 940px is that page held
       a little closer. Everything else on the sheet is derived from this one number, so
       resizing the paper is a one-line change:
         --brief-margin   ≈ 7.5% of the width, the print margin (A4's 20mm is 9.5%, but the
                            masthead is full-bleed so the text block wants slightly less)
         min-height       the ISO 216 ratio, so a short briefing is still a full page */
    --brief-page-width: 940px;
    --brief-margin: calc(var(--brief-page-width) * .075);

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 8px 40px;
}

/* Not an inversion — the paper becomes the dark theme's card surface and the rules go
   navy-tinted, so the sheet still reads as a document rather than a hole in the page.
   The masthead stays navy in both: it is the sheet's identity, not a surface. */
.mud-theme-dark .dex-briefing-page {
    --brief-paper: #16233B;
    --brief-ink: #E8EDF7;
    --brief-ink-soft: #C0CBDE;
    --brief-muted: #9DAAC1;
    --brief-line: #22314B;
}

.brief-sheet {
    width: 100%;
    max-width: var(--brief-page-width);
    /* ISO 216 — a page that runs short still occupies a full sheet rather than
       collapsing to the height of its content and reading as a card. */
    min-height: calc(var(--brief-page-width) * 1.4142);
    background: var(--brief-paper);
    border-radius: 5px;
    /* Paper sitting on a desk, not a card floating over the app: a tight contact shadow
       plus a wider, very soft one. */
    box-shadow: 0 1px 2px rgba(15, 23, 43, .10), 0 10px 30px -12px rgba(15, 23, 43, .22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.brief-sheet-body {
    padding: calc(var(--brief-margin) * .68) var(--brief-margin) 0;
    /* Lets the footer sit on the bottom margin of a short page (see .brief-sheet-foot). */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===========================================================
   Motion — one stagger ladder driven by --i on each block
   =========================================================== */
@keyframes briefIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes briefDrop {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

@keyframes briefRule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.brief-anim {
    animation: briefIn 560ms cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}

.brief-mast {
    animation: briefDrop 480ms cubic-bezier(.2, .7, .2, 1) both;
}

.brief-sheet-rule {
    animation: briefRule 620ms cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
    transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
    .brief-anim,
    .brief-mast,
    .brief-sheet-rule {
        animation: none !important;
    }
}

/* ===========================================================
   Masthead
   =========================================================== */
.brief-mast {
    background: var(--brief-mast);
    color: #FFFFFF;
    padding: 0 var(--brief-margin) 0 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brief-mast-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brief-mast-name {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .06em;
}

.brief-mast-kind {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    margin-left: 6px;
}

/* The right end of the masthead: the issue block, and the Share control beside it. Laid out as
   its own row so the masthead still centres the pair vertically when Share is absent. */
.brief-mast-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: none;
    min-width: 0;
}

.brief-mast-issue {
    text-align: right;
    flex: none;
}

/* Sits ON the navy, so it takes the masthead's own muted white rather than --brief-muted, which
   is calibrated for ink on paper and would fail contrast here. */
.brief-mast-share {
    border: 1px solid rgba(255, 255, 255, .22);
    background: none;
    border-radius: 5px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    cursor: pointer;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1),
                border-color 120ms cubic-bezier(.4, 0, .2, 1),
                color 120ms cubic-bezier(.4, 0, .2, 1);
}

.brief-mast-share:hover,
.brief-mast-share:focus-visible {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .38);
    color: #FFFFFF;
}

.brief-mast-share-icon {
    font-size: 15px !important;
    height: 15px;
    width: 15px;
}

.brief-mast-date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
}

.brief-mast-by {
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
    margin-top: 3px;
}

/* ===========================================================
   Shared editorial roles
   =========================================================== */
.brief-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brief-muted);
    line-height: 1.55;
}

.brief-eyebrow--faint {
    color: var(--brief-muted);
    opacity: .85;
}

.brief-eyebrow--alert {
    color: var(--status-error-fg);
}

.brief-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: none;
    background: var(--brief-muted);
}

.brief-dot--critical { background: var(--status-error-fg); }
.brief-dot--high     { background: var(--status-warning-fg); }
.brief-dot--medium,
.brief-dot--info     { background: var(--brief-accent); }
.brief-dot--low,
.brief-dot--quiet    { background: var(--brief-line); }

/* ===========================================================
   Lede — the count numeral and DEX's directive
   =========================================================== */
/* The numeral column tracks the page width so the figure stays the same share of the
   sheet at any --brief-page-width; the rule beside it then lands on the same optical
   third it does on the 790px original. */
.brief-lede {
    display: grid;
    grid-template-columns: calc(var(--brief-page-width) * .2) 1fr;
    gap: calc(var(--brief-page-width) * .045);
}

.brief-numeral {
    font-size: calc(var(--brief-page-width) * .19);
    line-height: .72;
    font-weight: 600;
    letter-spacing: -.05em;
    color: var(--brief-ink);
    font-variant-numeric: tabular-nums;
}

.brief-lede-caption {
    margin-top: 26px;
}

.brief-lede-legend {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brief-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--brief-ink-soft);
}

.brief-lede-say {
    border-left: 1px solid var(--brief-line);
    padding-left: calc(var(--brief-page-width) * .04);
}

.brief-directive {
    margin: 14px 0 20px;
    font-size: 30px;
    line-height: 1.24;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--brief-ink);
    text-wrap: pretty;
}

.brief-sheet-rule {
    margin-top: 40px;
    height: 2px;
    background: var(--brief-ink);
}

/* ===========================================================
   #1 priority
   =========================================================== */
.brief-lead-head {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.brief-lead-tag {
    font-size: 12px;
    color: var(--brief-muted);
    white-space: nowrap;
}

.brief-lead-title {
    margin: 14px 0 0;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--brief-ink);
    line-height: 1.25;
}

.brief-lead-stats {
    margin-top: 26px;
    border-top: 1px solid var(--brief-line);
    border-bottom: 1px solid var(--brief-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.brief-stat {
    padding: 18px 20px;
    border-left: 1px solid var(--brief-line);
    min-width: 0;
}

.brief-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.brief-stat-value {
    font-size: 24px;
    font-weight: 500;
    color: var(--brief-ink);
    font-variant-numeric: tabular-nums;
}

.brief-stat-value.is-negative {
    color: var(--status-error-fg);
}

.brief-stat-caption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--brief-muted);
}

.brief-lead-foot {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brief-lead-note {
    margin: 0;
    font-size: 13px;
    color: var(--brief-ink-soft);
}

.brief-cta {
    border: 0;
    background: var(--brief-ink);
    color: var(--brief-paper);
    border-radius: 5px;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: none;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}

.brief-cta:hover,
.brief-cta:focus-visible {
    background: var(--brief-accent);
}

.brief-cta-arrow {
    font-size: 16px !important;
    height: 16px;
    width: 16px;
}

/* ===========================================================
   Ledger — do these next
   =========================================================== */
.brief-ledger-head {
    margin-top: 34px;
    border-top: 1px solid var(--brief-ink);
    padding-top: 16px;
}

.brief-ledger-row {
    display: grid;
    grid-template-columns: 30px 1fr auto 80px;
    align-items: baseline;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--brief-line);
}

.brief-ledger-num {
    font-size: 12px;
    font-weight: 500;
    color: var(--status-error-fg);
    font-variant-numeric: tabular-nums;
}

.brief-ledger-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--brief-ink);
}

.brief-ledger-sub {
    margin-top: 5px;
    font-size: 12px;
    color: var(--brief-muted);
}

.brief-ledger-value {
    text-align: right;
}

.brief-ledger-figure {
    font-size: 15px;
    font-weight: 600;
    color: var(--brief-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.brief-ledger-caption {
    margin-top: 5px;
    font-size: 12px;
    color: var(--brief-muted);
}

.brief-ledger-do,
.brief-tail-more {
    border: 0;
    background: none;
    padding: 0;
    text-align: right;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brief-accent);
    cursor: pointer;
    text-decoration: none;
}

.brief-ledger-do:hover,
.brief-ledger-do:focus-visible,
.brief-tail-more:hover,
.brief-tail-more:focus-visible {
    color: var(--brief-ink);
    text-decoration: underline;
}

/* ===========================================================
   Tail columns — keep an eye on / data health
   =========================================================== */
.brief-sheet-tail {
    margin-top: 34px;
    /* The minimum gap above the footer. It lives here rather than on the footer because
       the footer's own margin-top is `auto` — see .brief-sheet-foot. */
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 26px;
    align-items: start;
}

.brief-tail-col {
    border-top: 1px solid var(--brief-line);
    padding-top: 16px;
    min-width: 0;
}

.brief-tail-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.brief-tail-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--brief-ink);
}

.brief-tail-item .brief-dot {
    transform: translateY(-2px);
}

.brief-tail-aside {
    color: var(--brief-muted);
}

.brief-tail-more {
    display: inline-block;
    margin-top: 14px;
    text-align: left;
}

/* `auto` pushes the footer onto the bottom margin of a page that runs short, which is what
   makes an A4-height sheet with two ledger rows still read as a page rather than a card with
   a lot of blank paper stapled underneath. On a page that overflows it collapses to nothing
   and .brief-sheet-tail's margin-bottom supplies the gap. */
.brief-sheet-foot {
    margin-top: auto;
    border-top: 1px solid var(--brief-line);
    padding: 16px 0 calc(var(--brief-margin) * .68);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    color: var(--brief-muted);
}

/* ===========================================================
   Narrow layouts — the sheet becomes the page
   =========================================================== */
@media (max-width: 768px) {
    .dex-briefing-page {
        /* A phone is already a page — the paper metaphor stops paying rent here, so the
           A4 proportion and the print margin are dropped rather than scaled down. */
        --brief-margin: 20px;
        padding: 0 0 24px;
    }

    .brief-sheet {
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .brief-mast {
        padding: 14px 20px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* The masthead already wraps here; the issue block and Share would make a third line and
       crowd the date, so Share drops its label and sits as an icon against the right edge. */
    .brief-mast-right {
        gap: 12px;
    }

    .brief-mast-share {
        padding: 7px 9px;
    }

    .brief-mast-share span {
        display: none;
    }

    .brief-sheet-body {
        padding: 24px 20px 0;
    }

    .brief-lede {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .brief-numeral {
        font-size: 96px;
    }

    .brief-lede-say {
        border-left: 0;
        padding-left: 0;
    }

    .brief-directive {
        font-size: 22px;
    }

    .brief-lead-title {
        font-size: 21px;
    }

    .brief-lead-stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Every cell needs its own rule once they wrap, or the second row loses its top edge. */
    .brief-stat {
        padding: 14px 16px;
        border-top: 1px solid var(--brief-line);
    }

    .brief-stat:nth-child(2n + 1) {
        padding-left: 0;
        border-left: 0;
    }

    .brief-stat:first-child,
    .brief-stat:nth-child(2) {
        border-top: 0;
    }

    .brief-lead-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* The figure and the verb drop under the title rather than squeezing four columns. */
    .brief-ledger-row {
        grid-template-columns: 30px 1fr auto;
        row-gap: 10px;
    }

    .brief-ledger-do {
        grid-column: 2 / -1;
        text-align: left;
    }

    .brief-sheet-tail {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .brief-sheet-foot {
        flex-direction: column;
        gap: 6px;
    }
}

/* ===========================================================
   Section header (numbered)
   =========================================================== */
.next-action-section {
    margin-bottom: 4px;
}

.next-action-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 12px;
}

.next-action-section-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.next-action-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.next-action-section-count {
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

.next-action-section-rule {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-divider);
}

/* ===========================================================
   List row
   =========================================================== */
/* SOLID tier — same recipe as .custom-border in utilities.css (translucent white fill, 18px
   radius, house card shadow). This page hand-rolls its rows instead of using .custom-border,
   so it doesn't inherit that class's rules and needs the same values restated here. */
.brief-row {
    background: var(--defex-card-bg);
    border: 1px solid var(--defex-card-edge);
    border-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-card-shadow);
    display: grid;
    grid-template-columns: 4px 44px 1fr auto;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 8px;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Hover LIFTS. The previous value (0 2px 8px) was smaller than the resting --defex-card-shadow,
   so hovering made the card sink; and a hard grey rim fought the white --defex-card-edge that
   gives a SOLID card its lit top edge. Under Design D depth comes from the shadow, so deepen
   the same ink-alpha shadow and leave the rim alone. */
.brief-row:hover {
    box-shadow: 0 20px 52px rgba(15, 23, 43, 0.16);
}

.brief-row-rail {
    width: 4px;
}

.brief-row.priority-critical .brief-row-rail { background: #D32F2F; }
.brief-row.priority-high     .brief-row-rail { background: #FF8F00; }
.brief-row.priority-medium   .brief-row-rail { background: #3B82F6; }
.brief-row.priority-low      .brief-row-rail { background: #9CA3AF; }

.brief-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--defex-inner-bg);
}

.brief-row-icon .mud-icon-root {
    font-size: 22px;
    color: var(--mud-palette-text-secondary);
}

.brief-row.priority-critical .brief-row-icon { background: #FDECEC; }
.brief-row.priority-critical .brief-row-icon .mud-icon-root { color: #D32F2F; }
.brief-row.priority-high     .brief-row-icon { background: #FFF4E5; }
.brief-row.priority-high     .brief-row-icon .mud-icon-root { color: #FF8F00; }
.brief-row.priority-medium   .brief-row-icon { background: #EFF6FF; }
.brief-row.priority-medium   .brief-row-icon .mud-icon-root { color: #3B82F6; }

.brief-row-body {
    padding: 14px 18px;
    min-width: 0;
}

.brief-row-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.brief-row-priority {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--defex-inner-bg);
    color: var(--mud-palette-text-secondary);
}

.brief-row.priority-critical .brief-row-priority { background: #D32F2F; color: #fff; }
.brief-row.priority-high     .brief-row-priority { background: #FF8F00; color: #fff; }
.brief-row.priority-medium   .brief-row-priority { background: #DBEAFE; color: #1E55C4; }
.brief-row.priority-low      .brief-row-priority { background: #F4F6FA; color: #4B5563; }

.brief-row-cat {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
}

.brief-row-cat::before {
    content: "•";
    margin: 0 4px 0 2px;
    color: var(--mud-palette-divider);
}

.brief-row-due {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brief-row-due .mud-icon-root {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
}

.brief-row-due.is-overdue {
    color: #D32F2F;
}

.brief-row-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    letter-spacing: -.005em;
    margin-top: 2px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.brief-row-summary {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.brief-row-dex {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(21, 93, 252, .04) 0%, rgba(15, 23, 43, .03) 100%);
    border-left: 2px solid #155DFC;
    border-radius: 0 4px 4px 0;
}

.brief-row-dex-mark {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #155DFC;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(21, 93, 252, .08);
    flex-shrink: 0;
    line-height: 1.6;
}

.brief-row-dex-text {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    font-style: italic;
}

/* A genuine inner well (the nested-panel exception noted on .custom-border .custom-border in
   utilities.css), so it takes the solid inner-fill tokens rather than the card's own
   translucent fill — an opaque --mud-palette-surface here would otherwise punch a solid hole
   through the SOLID card's alpha background. */
.brief-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    border-left: 1px solid var(--defex-rule);
    background: var(--defex-inner-bg);
    align-items: stretch;
    justify-content: center;
    min-width: 200px;
}

.brief-row-secondary {
    display: flex;
    gap: 2px;
    justify-content: center;
}

/* Mobile / narrow layouts */
@media (max-width: 768px) {
    .brief-row {
        grid-template-columns: 4px 44px 1fr;
    }

    .brief-row-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        border-left: 0;
        border-top: 1px solid var(--defex-rule);
        background: var(--defex-inner-bg);
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------------
   Briefing preferences dialog

   The dialog renders in MudBlazor's portal at the body root, NOT inside
   .dex-briefing-page, so these selectors are deliberately top-level and resolve
   everything from the Mud palette rather than the sheet's paper tokens — it is a
   dialog on the app surface, not part of the issued sheet.
   --------------------------------------------------------------------------- */
.brief-prefs-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.brief-prefs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.brief-prefs-row:last-child {
    border-bottom: 0;
}

/* Muted rows stay in place rather than moving to the bottom, so switching one back
   on returns it where the reader left it. Dimming carries that state; the row is
   still fully readable and still draggable. */
.brief-prefs-row-muted .brief-prefs-name,
.brief-prefs-row-muted .brief-prefs-cat {
    opacity: .5;
}

.brief-prefs-grip {
    cursor: grab;
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.brief-prefs-label {
    flex: 1;
    min-width: 0;
}

.brief-prefs-name {
    font-size: 14px;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.brief-prefs-cat {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* What each rule is contributing right now. The figures are measured with muting
   ignored, so a switched-off row reports what it is withholding — which is the whole
   reason the indicator exists. Colour is carried by the shared --status-*-fg tokens so
   a dot means the same thing here as it does on the sheet, and resolves in both themes. */
.brief-prefs-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.brief-prefs-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: none;
    background: var(--mud-palette-text-secondary);
}

.brief-prefs-dot--critical { background: var(--status-error-fg); }
.brief-prefs-dot--high     { background: var(--status-warning-fg); }
.brief-prefs-dot--on       { background: var(--mud-palette-primary); }

.brief-prefs-activity {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: none;
    min-width: 76px;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
}

/* The dot is the only baseline-misaligned thing in the row, because it has no text box
   of its own to sit on. Nudged rather than switched to align-items:center, which would
   drag the numeral off the label's baseline. */
.brief-prefs-activity .brief-prefs-dot {
    align-self: center;
}

.brief-prefs-figure {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* A muted row keeps its figure at full strength on purpose: "11 hidden" is the sentence
   the reader needs, and dimming it would hide the cost of the thing they just switched
   off. Only the label dims. */
.brief-prefs-hidden {
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--status-warning-fg);
}

.brief-prefs-activity-quiet {
    color: var(--mud-palette-text-disabled);
}


/* Section headers. The list is shown in the sheet's own sections, which is only honest
   because a rule's severity is a constant it declares — nothing here shifts day to day. */
.brief-prefs-band-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Every section after the first gets air above it, so the groups read as groups rather
   than as one list with labels in it. :first-child can't be used — the header is preceded
   by MudDropContainer's own wrapper markup. */
.brief-prefs-band-head ~ .brief-prefs-band-head {
    margin-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.brief-prefs-band-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.brief-prefs-band-note {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brief-prefs-band-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    flex: none;
}