/* DEX Summary — the entity summary sheet behind the Summary button on the Client,
   Property, Job and Contract screens.
   ============================================================================
   An authored Read surface in the same editorial idiom as the DEX Briefing
   sheet (see DESIGN.md → "Documented exception: the editorial Read surfaces"):
   navy masthead, display numeral, uppercase tracked eyebrows, ruled sections.

   It deliberately does NOT reuse dex-briefing.css. That file's exemption is
   scoped to Pages/DexBriefing/**, and its classes resolve --brief-* tokens that
   only exist on .dex-briefing-page — a MudDialog renders in a body-root portal
   and would inherit none of them. So this file carries its own --dsum-* tokens
   and its own class prefix, and nothing bleeds in either direction.

   Two rules carried over unchanged because they are load-bearing:
     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.

   Differences from the briefing sheet, all deliberate: no A4 proportion and no
   paper shadow (the MudDialog surface already IS the paper), and the numeral is
   capped rather than derived from a page width.
   ============================================================================ */

.dex-summary-sheet {
    /* Derived from the Mud palette, NOT from literals with a `.mud-theme-dark` override.
       On the web host MudThemeProvider only swaps variables on :root and never stamps
       `.mud-theme-dark` (utilities.css:255-280); MainLayout stamps `defex-theme-dark` on
       .main-container instead — and this sheet lives in a MudDialog, which renders in a
       body-root portal outside that container. A marker-scoped dark block would therefore
       have been dead code twice over. Deriving from :root-level palette variables reaches
       portalled content and covers light, dark and the red operator theme with no extra rules.

       The literals these replace resolved identically in light: --mud-palette-table-lines is
       already #DEE2ED, --mud-palette-text-secondary is already #6B7280 (4.8:1 on paper, the
       AA floor this ramp is built around). */
    --dsum-paper: var(--mud-palette-surface);
    --dsum-ink: var(--mud-palette-text-primary);
    --dsum-ink-soft: var(--mud-palette-text-secondary);
    /* Soft and muted resolve the same. The size step already carries the hierarchy, and one
       token guarantees the caption ramp clears AA in every theme rather than in the one it
       was eyeballed against. */
    --dsum-muted: var(--mud-palette-text-secondary);
    --dsum-line: var(--mud-palette-table-lines);
    /* The one literal that stays: the masthead is the sheet's identity, not a surface, so it
       is navy in every theme. White on #172036 is 14.5:1. */
    --dsum-mast: #172036;
    --dsum-accent: var(--mud-palette-primary);

    /* The print margin. Not derived from a page width the way the briefing sheet
       does it — the dialog owns the width here, so this is just a gutter. */
    --dsum-margin: 40px;

    background: var(--dsum-paper);
    color: var(--dsum-ink);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dsum-body {
    padding: 28px var(--dsum-margin) 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

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

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

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

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

.dsum-rule {
    animation: csumRule 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) {
    .dsum-anim,
    .dsum-mast,
    .dsum-rule {
        animation: none !important;
    }
}

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

.dsum-mast-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

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

.dsum-mast-kind {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.dsum-mast-right {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.dsum-mast-issue {
    text-align: right;
    min-width: 0;
}

.dsum-mast-subject {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsum-mast-by {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

/* A quiet ghost control against the navy — the masthead's buttons are never the
   sheet's subject. */
.dsum-mast-btn {
    border: 1px solid rgba(255, 255, 255, .32);
    background: none;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: none;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1), border-color 120ms cubic-bezier(.4, 0, .2, 1);
}

.dsum-mast-btn:hover,
.dsum-mast-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
}

.dsum-mast-btn:disabled {
    opacity: .5;
    cursor: default;
}

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

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

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

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

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

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

/* ===========================================================
   Lede — the health numeral and DEX's directive
   =========================================================== */
.dsum-lede {
    display: grid;
    grid-template-columns: minmax(0, 190px) 1fr;
    gap: 40px;
}

/* Property, Job and Contract carry no health score, and there is no other figure on those
   payloads that honestly deserves display size — so the numeral column is dropped rather
   than filled with an invented metric. The directive runs the full measure and the figures
   strip carries the numbers. */
.dsum-lede--noscore {
    grid-template-columns: 1fr;
    gap: 0;
}

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

/* With the full measure to run in, the directive can carry a little more size again — it is
   the only thing in the lede. */
.dsum-lede--noscore .dsum-directive {
    font-size: 24px;
    max-width: 46em;
}

.dsum-numeral {
    font-size: 116px;
    line-height: .72;
    font-weight: 600;
    letter-spacing: -.05em;
    color: var(--dsum-ink);
    font-variant-numeric: tabular-nums;
}

.dsum-numeral-suffix {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--dsum-muted);
}

.dsum-lede-caption {
    margin-top: 22px;
}

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

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

.dsum-lede-say {
    border-left: 1px solid var(--dsum-line);
    padding-left: 36px;
    min-width: 0;
}

/* 21px, not the briefing sheet's 30px. DEX writes the client narrative as a full paragraph
   rather than the briefing's single directive sentence, and at display size four sentences
   filled the entire first screen before a reader reached a single figure. */
.dsum-directive {
    margin: 14px 0 20px;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--dsum-ink);
    text-wrap: pretty;
}

.dsum-rule {
    margin-top: 36px;
    height: 2px;
    background: var(--dsum-ink);
}

/* ===========================================================
   Section heads
   =========================================================== */
.dsum-sec-head {
    margin-top: 32px;
    border-top: 1px solid var(--dsum-ink);
    padding-top: 16px;
}

.dsum-sec-head--light {
    border-top-color: var(--dsum-line);
}

/* For the head that follows the lede's own 2px rule. Without this the section draws a second
   ink rule 30px under the first and the pair reads as a mistake. */
.dsum-sec-head--flush {
    margin-top: 22px;
    border-top: 0;
    padding-top: 0;
}

/* ===========================================================
   Metric tile strip
   =========================================================== */
/* A FIXED four columns, not auto-fit. BuildStats returns seven or eight tiles, so the strip
   always wraps — and with an auto-fit track count the stylesheet cannot know which cell starts
   a row, so the second row lost its top rule and its first cell kept a stray left border. Four
   is a count the :nth-child rules below can actually address. */
.dsum-stats {
    margin-top: 22px;
    border-top: 1px solid var(--dsum-line);
    border-bottom: 1px solid var(--dsum-line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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

.dsum-stat:nth-child(n + 5) {
    border-top: 1px solid var(--dsum-line);
}

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

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

.dsum-stat-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--dsum-ink-soft);
}

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

/* ===========================================================
   Health dimensions — ruled rows, not cards
   =========================================================== */
.dsum-dims {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}

.dsum-dim {
    display: grid;
    grid-template-columns: 150px 1fr 44px;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--dsum-line);
}

.dsum-dim:last-child {
    border-bottom: 0;
}

.dsum-dim-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dsum-ink);
}

.dsum-dim-track {
    height: 6px;
    border-radius: 999px;
    background: var(--dsum-line);
    overflow: hidden;
}

.dsum-dim-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--dsum-accent);
    transition: width 420ms cubic-bezier(.2, .7, .2, 1);
}

.dsum-dim-fill.is-strong { background: var(--status-success-fg); }
.dsum-dim-fill.is-watch  { background: var(--status-warning-fg); }
.dsum-dim-fill.is-risk   { background: var(--status-error-fg); }
.dsum-dim-fill.is-mute   { background: var(--dsum-muted); }

.dsum-dim-score {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: var(--dsum-ink);
    font-variant-numeric: tabular-nums;
}

.dsum-dim-note {
    grid-column: 2 / -1;
    margin-top: -4px;
    font-size: 12px;
    color: var(--dsum-muted);
}

/* ===========================================================
   DEX narrative well
   =========================================================== */
.dsum-dex {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 2px solid var(--dsum-accent);
    border-radius: 0 4px 4px 0;
    /* color-mix, not a frozen rgba: the tint has to follow the tenant accent. */
    background: color-mix(in srgb, var(--dsum-accent) 5%, transparent);
}

.dsum-dex-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dsum-accent);
}

.dsum-dex-avatar {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    flex-shrink: 0;
}

.dsum-dex-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dsum-ink-soft);
}

/* MarkdigMarkdown emits its own <p>/<ul>; keep them on the sheet's ramp rather than
   letting the Mud typography defaults reassert themselves inside the well. */
.dsum-dex-text p {
    margin: 0 0 8px;
}

.dsum-dex-text p:last-child {
    margin-bottom: 0;
}

.dsum-dex-text ul,
.dsum-dex-text ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.dsum-dex-text strong {
    color: var(--dsum-ink);
}

/* DEX writes the body as numbered markdown sections ("## 2. Needs Attention"). Left to the
   inherited size they render at body scale and the well reads as one undifferentiated block,
   so they take the sheet's eyebrow role instead. */
.dsum-dex-text h1,
.dsum-dex-text h2,
.dsum-dex-text h3,
.dsum-dex-text h4 {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--dsum-accent);
    line-height: 1.55;
}

.dsum-dex-text h1:first-child,
.dsum-dex-text h2:first-child,
.dsum-dex-text h3:first-child,
.dsum-dex-text h4:first-child {
    margin-top: 0;
}

/* ===========================================================
   Ledger — do these next
   =========================================================== */
.dsum-ledger-row {
    display: grid;
    grid-template-columns: 30px 1fr auto 80px;
    align-items: baseline;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--dsum-line);
}

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

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

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

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

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

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

/* The section that follows draws its own rule; keeping this one left two hairlines with a
   band of dead paper between them. */
.dsum-ledger-row:last-child {
    border-bottom: 0;
}

.dsum-do {
    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(--dsum-accent);
    cursor: pointer;
    text-decoration: none;
}

.dsum-do:hover,
.dsum-do:focus-visible {
    color: var(--dsum-ink);
    text-decoration: underline;
}

/* ===========================================================
   Tail — sites needing attention
   =========================================================== */
.dsum-tail {
    margin-top: 24px;
    margin-bottom: 28px;
}

/* The wrapper already supplies the gap; the head's own margin stacked on top of it opened a
   ~90px band of blank paper under the last ledger row. */
.dsum-tail .dsum-sec-head {
    margin-top: 0;
}

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

.dsum-tail-item {
    display: grid;
    grid-template-columns: 7px 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--dsum-line);
    font-size: 13px;
    line-height: 1.45;
    color: var(--dsum-ink);
    cursor: pointer;
    text-align: left;
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-family: inherit;
    width: 100%;
}

.dsum-tail-item:last-child {
    border-bottom: 0;
}

.dsum-tail-item:hover .dsum-tail-name,
.dsum-tail-item:focus-visible .dsum-tail-name {
    color: var(--dsum-accent);
    text-decoration: underline;
}

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

.dsum-tail-name {
    font-weight: 600;
}

.dsum-tail-aside {
    color: var(--dsum-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* ===========================================================
   Footer
   =========================================================== */
.dsum-foot {
    margin-top: auto;
    border-top: 1px solid var(--dsum-line);
    padding: 16px 0 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    color: var(--dsum-muted);
}

/* ===========================================================
   Loading / error states — kept on the sheet's ground
   =========================================================== */
.dsum-state {
    padding: 32px var(--dsum-margin) 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dsum-skel {
    background: var(--dsum-line);
    border-radius: 4px;
    opacity: .55;
    animation: csumPulse 1400ms ease-in-out infinite;
}

@keyframes csumPulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
    .dsum-skel { animation: none; }
}

/* ===========================================================
   Narrow layouts — the sheet becomes the screen
   =========================================================== */
@media (max-width: 768px) {
    .dex-summary-sheet {
        --dsum-margin: 20px;
    }

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

    .dsum-mast-right {
        gap: 12px;
    }

    /* The masthead already wraps here; the buttons drop their labels and sit as icons
       rather than forcing a third line. */
    .dsum-mast-btn {
        padding: 7px 9px;
    }

    .dsum-mast-btn span {
        display: none;
    }

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

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

    .dsum-numeral {
        font-size: 88px;
    }

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

    .dsum-directive {
        font-size: 19px;
    }

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

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

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

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

    /* The bar drops under the name rather than squeezing three columns into a phone. */
    .dsum-dim {
        grid-template-columns: 1fr 44px;
        row-gap: 8px;
    }

    .dsum-dim-name {
        grid-column: 1 / -1;
    }

    .dsum-dim-note {
        grid-column: 1 / -1;
        margin-top: 0;
    }

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

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

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

/* ===========================================================
   Free-text sections — notes and conversations
   ===========================================================
   Deliberately quieter than .dsum-dex: that well is the sheet's single headline read, and
   giving these the same accent border made three equal-weight wells fight each other for the
   bottom half of the page. These carry the DEX mark on the prose only, so the entries under
   it are plainly the record rather than more of the model's voice. */
.dsum-brief {
    margin-top: 24px;
    margin-bottom: 28px;
}

/* The wrapper supplies the gap; the head's own top margin on top of it opened a dead band. */
.dsum-brief .dsum-sec-head {
    margin-top: 0;
}

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

.dsum-brief-say {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}

.dsum-brief-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 1px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dsum-accent);
    white-space: nowrap;
}

.dsum-brief-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dsum-ink-soft);
}

.dsum-brief-text p {
    margin: 0 0 8px;
}

.dsum-brief-text p:last-child {
    margin-bottom: 0;
}

.dsum-brief-text ul,
.dsum-brief-text ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.dsum-brief-text strong {
    color: var(--dsum-ink);
}

.dsum-brief-unavailable {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--dsum-muted);
    font-style: italic;
}

.dsum-brief-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsum-brief-item {
    display: grid;
    grid-template-columns: 7px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dsum-line);
}

.dsum-brief-item:last-child {
    border-bottom: 0;
}

/* The dot sits on the label's baseline rather than the row's top edge. */
.dsum-brief-item .dsum-dot {
    transform: translateY(5px);
}

.dsum-brief-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.dsum-brief-item-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dsum-ink);
}

.dsum-brief-item-aside {
    font-size: 12px;
    color: var(--dsum-muted);
}

.dsum-brief-item-extract {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dsum-ink-soft);
    /* Two lines is a glance. The full text is a click away on the Notes tab, and a 400-character
       note left unclamped pushed the entries below it off the page. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    /* The mark drops above the prose rather than stealing a third of a phone's width. */
    .dsum-brief-say {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}