/*
 * validation-details-ldlc.css
 * LDLC Atelier — Complete standalone skin for validation-details-v3.php
 * This file is self-contained. No other CSS file is required.
 */

/* ═══════════════════════════════════════════════════════════════
   RESET + TOKENS
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand */
    --navy:      #0A3782;
    --cyan:      #0096C8;
    --cyan-text: #0080AA;

    /* Text scale */
    --dark:     #2E3338;
    --mid:      #686E7C;
    --grey:     #8F95A0;

    /* Surfaces */
    --bg:       #EEF2F7;
    --white:    #FFFFFF;
    --bd:       #DDE3EC;
    --bd2:      #EBF0F6;
    --heading:  #0A3782;

    /* Status */
    --ok:       #047E58;
    --warn-v:   #F59E0B;
    --danger-v: #D62525;

    /* Diagnostic bubble backgrounds */
    --err-bg:   #FEF2F2;
    --err-bd:   #FECACA;
    --err-c:    #B91C1C;
    --wrn-bg:   #FFFBEB;
    --wrn-bd:   #FDE68A;
    --wrn-c:    #92400E;
    --inf-bg:   #EFF6FF;
    --inf-bd:   #BFDBFE;
    --inf-c:    #1E40AF;

    /* Layout */
    --r:        0.625rem;
    --r2:       0.45rem;
    --r3:       0.25rem;
    --sh:       0 1px 0.2rem rgba(10,55,130,.07), 0 1px 2px rgba(10,55,130,.05);
    --sh2:      0 0.375rem 1.25rem rgba(10,55,130,.11), 0 2px 0.375rem rgba(10,55,130,.07);
    --W:        82.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE TOKENS  (Theme B — Gris Profond, WCAG AA)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Brand */
        --navy:      #0A3782;
        --cyan:      #0096C8;
        --cyan-text: #0E9BCF;

        /* Text scale */
        --dark:     #C8CACF;
        --mid:      #909190;
        --grey:     #737374;

        /* Surfaces */
        --bg:       #171E25;
        --white:    #242B32;
        --bd:       #323840;
        --bd2:      #2C3238;
        --heading:  #C8CACF;

        /* Status */
        --ok:       #22C55E;
        --warn-v:   #F59E0B;
        --danger-v: #EF4444;

        /* Diagnostic bubbles */
        --err-bg:   #2A1515;
        --err-bd:   #7F1D1D;
        --err-c:    #FCA5A5;
        --wrn-bg:   #2A1E08;
        --wrn-bd:   #78350F;
        --wrn-c:    #FCD34D;
        --inf-bg:   #0F1F36;
        --inf-bd:   #1E3A5F;
        --inf-c:    #93C5FD;

        /* Shadows */
        --sh:  0 1px 4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
        --sh2: 0 0.375rem 1.25rem rgba(0,0,0,.5), 0 2px 0.375rem rgba(0,0,0,.4);
    }
}

body {
    font-family: Montserrat, sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    background: var(--bg);
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════
   HIDDEN ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.header,
.header_navbar,
.advert_block,
.cpuz_column,
footer,
.validated_label,
.social,
.forum_banner { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   VALIDATED BANNER

   DOM structure:
     .validated_banner
       .validated_container
         .validated_text_block    ← logo via ::before
           .validated_title       ← CPU name
           .validated_subtitle    ← dump info

   3-column grid:
     col 1 — logo (::before, 10rem)
     col 2 — title + subtitle (centred)
     col 3 — spacer mirror of col 1 (::after)
   ═══════════════════════════════════════════════════════════════ */
.validated_banner {
    width: 100%;
}

.validated_container {
    background: var(--navy);
    display: flex;
    justify-content: center;
    width: 100%;
}

.validated_text_block {
    display: grid;
    grid-template-columns: 10rem 1fr 10rem;
    grid-template-rows: auto auto;
    align-content: center;
    width: 100%;
    max-width: var(--W);
    min-height: 6rem;
    padding: 1rem 1.75rem;
}

.validated_text_block::before {
    content: '';
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 10rem;
    height: 4rem;
    background: url('/medias/images/logo-atelier-ldlc.svg') no-repeat left center;
    background-size: contain;
}

.validated_text_block::after {
    content: '';
    grid-column: 3;
    grid-row: 1 / 3;
}

.validated_title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    text-align: center;
    padding-bottom: 0.25rem;
    font-family: Montserrat, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1.25;
    word-break: break-word;
}

.validated_subtitle {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: center;
    padding-top: 0.25rem;
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    word-break: break-word;
}

.validated_subtitle .nickname {
    color: var(--cyan-text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Inner sections re-center themselves */
.content,
.graph,
.dump,
.ldlc-dump,
.others_validations {
    align-self: center;
    width: 100%;
    max-width: var(--W);
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--W);
    margin: 0 auto;
    padding: 1.375rem 0 1.75rem 1.375rem;
}

.spec_column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dump { width: 100%; max-width: var(--W); }
.dump hr { display: none; }
.graph { width: 100%; max-width: var(--W); }

/* ═══════════════════════════════════════════════════════════════
   DIAGNOSTIC SECTION

   All items start in .diag_grid as pills.
   Click → JS moves pill to .diag_expanded_area + adds .is-expanded
   Click expanded → JS moves it back, removes .is-expanded
   Errors auto-expand on page load.
   ═══════════════════════════════════════════════════════════════ */
.diag_content {
    background: var(--white);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

/* Heading — background reflects highest severity */
.diag-sev-ok { border-left-color: var(--ok); }

.diag_ok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.9rem 1.25rem;
    font-size: 13px;
    color: var(--mid);
    background: var(--surface);
}

.diag_ok svg {
    color: var(--ok);
    flex-shrink: 0;
}

.diag_heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: var(--r) var(--r) 0 0;
    width: 100%;
}

.diag_heading::before {
    content: '';
    display: block;
    width: 0.2rem;
    height: 0.75rem;
    border-radius: 2px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.5);
}

.diag_heading h2 {
    font-family: Montserrat, sans-serif;
    font-size: 0.7187rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

/* Meta-info aligned to the right of the heading bar (test duration, …) */
.diag-heading-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.85);
}
.diag-heading-meta .dhm-label {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}
.diag-heading-meta .dhm-value {
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.diag_heading.diag-sev-error   { background: var(--danger-v); }
.diag_heading.diag-sev-warning { background: var(--warn-v); }
.diag_heading.diag-sev-info    { background: var(--inf-c); }
.diag_heading.diag-sev-ok      { background: var(--ok); }

.diag_message {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding: 0.55rem 1rem;
    gap: 0;
}

/* Pills area — takes remaining space */
.diag_pills_area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Summary sidebar — mirrors spec_sidebar */
.ldlc-page-wrap {
    display: block;
    width: 100%;
    max-width: var(--W);
    margin: 0 auto;
}

.ldlc-page-main {
    min-width: 0;
}

@media (max-width: 640px) {
    /* Layout — prevent fixed column widths from forcing horizontal scroll */
    .content       { padding: 1rem 0.625rem; }
    .spec_column   { gap: 0.625rem; }

    /* Banner — collapse 3-col grid to simple flex */
    .validated_text_block {
        grid-template-columns: 1fr;
        padding: 0.875rem 1rem;
        min-height: auto;
    }
    .validated_text_block::before { display: none; }
    .validated_text_block::after  { display: none; }
    .validated_title    { font-size: 1.1rem; }
    .validated_subtitle { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .content     { padding: 0.75rem 0.5rem; }
    .spec_column { gap: 0.5rem; }
}

/* ── Bubble row ── */
.diag_bubble_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.diag-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.875rem;
    min-height: 2.75rem; /* 44px tap target */
    border-radius: 2rem;
    border: 1.5px solid;
    font-family: Montserrat, sans-serif;
    font-size: 0.775rem;
    font-weight: 700;
    cursor: pointer;
    background: none;
    transition: transform .12s, box-shadow .12s, opacity .12s;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.65;
}
.diag-bubble:hover,
.diag-bubble.is-active {
    transform: translateY(-1px);
    box-shadow: var(--sh2);
    opacity: 1;
}
.diag-bubble--error   { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-c); }
.diag-bubble--warning { background: var(--wrn-bg); border-color: var(--wrn-bd); color: var(--wrn-c); }
.diag-bubble--info    { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf-c); }

/* ── Message box ── */
.diag-msg-box {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-radius: var(--r2);
    border: 1.5px solid;
    overflow: hidden;
}
.diag-msg-box[style*="display: none"],
.diag-msg-box[style*="display:none"] { display: none !important; }
.diag-msg-box--error   { background: var(--err-bg); border-color: var(--err-bd); }
.diag-msg-box--warning { background: var(--wrn-bg); border-color: var(--wrn-bd); }
.diag-msg-box--info    { background: var(--inf-bg); border-color: var(--inf-bd); }

.diag-msg-entry + .diag-msg-entry {
    border-top: 1px solid;
}
.diag-msg-box--error   .diag-msg-entry + .diag-msg-entry { border-color: var(--err-bd); }
.diag-msg-box--warning .diag-msg-entry + .diag-msg-entry { border-color: var(--wrn-bd); }
.diag-msg-box--info    .diag-msg-entry + .diag-msg-entry { border-color: var(--inf-bd); }

@media (min-width: 900px) {
    .diag-msg-entry {
        display: flex;
    }
    .diag-msg-left {
        width: 20%;
        flex-shrink: 0;
        padding: 0.875rem 1rem;
        border-right: 1px solid;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: rgba(0,0,0,0.02);
    }
    .diag-msg-box--error   .diag-msg-left { border-color: var(--err-bd); }
    .diag-msg-box--warning .diag-msg-left { border-color: var(--wrn-bd); }
    .diag-msg-box--info    .diag-msg-left { border-color: var(--inf-bd); }
    .diag-msg-right {
        flex: 1;
        min-width: 0;
    }
    .diag-msg-right .diag_advice {
        border-radius: 0;
    }
}

@media (max-width: 899px) {
    .diag-msg-left {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.875rem;
        border-bottom: 1px solid;
    }
    .diag-msg-box--error   .diag-msg-left { border-color: var(--err-bd); color: var(--err-c); }
    .diag-msg-box--warning .diag-msg-left { border-color: var(--wrn-bd); color: var(--wrn-c); }
    .diag-msg-box--info    .diag-msg-left { border-color: var(--inf-bd); color: var(--inf-c); }
    .diag-msg-badge { display: none; }
}

.diag-msg-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.diag-msg-box--error   .diag-msg-icon { background: color-mix(in srgb, var(--err-bd) 40%, transparent); color: var(--err-c); }
.diag-msg-box--warning .diag-msg-icon { background: color-mix(in srgb, var(--wrn-bd) 40%, transparent); color: var(--wrn-c); }
.diag-msg-box--info    .diag-msg-icon { background: color-mix(in srgb, var(--inf-bd) 40%, transparent); color: var(--inf-c); }

@media (max-width: 899px) {
    .diag-msg-icon {
        width: 16px;
        height: 16px;
        background: none !important;
    }
    .diag-msg-icon svg { width: 13px; height: 13px; }
}

.diag-msg-title {
    font-size: 0.7875rem;
    font-weight: 700;
    line-height: 1.4;
}
.diag-msg-box--error   .diag-msg-title { color: var(--err-c); }
.diag-msg-box--warning .diag-msg-title { color: var(--wrn-c); }
.diag-msg-box--info    .diag-msg-title { color: var(--inf-c); }

.diag-msg-badge {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Structured message content ── */
.diag_advice {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    padding: 0.875rem;
    align-items: stretch;
}

.diag-advice-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.diag-obs  { grid-column: unset; }
.diag-cause { grid-column: unset; }

/* action on the right */
.diag-action {
    grid-column: unset;
    grid-row: unset;
    flex: 1;
    align-self: stretch;
}

@media (max-width: 900px) {
    .diag_advice {
        flex-direction: column;
    }
}

.diag-obs {
    font-size: 0.805rem;
    font-weight: 500;
    color: var(--mid);
    line-height: 1.65;
    margin: 0;
}
.diag_advice--error   .diag-obs { color: var(--mid); }
.diag_advice--warning .diag-obs { color: var(--mid); }
.diag_advice--info    .diag-obs { color: var(--mid); }

.diag-cause {
    font-size: 0.7875rem;
    font-weight: 500;
    color: var(--mid);
    line-height: 1.65;
    margin: 0;
}

.diag-action-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid;
    opacity: 0.55;
}
.diag_advice--error   .diag-action-label { color: var(--err-c); border-color: var(--err-bd); }
.diag_advice--warning .diag-action-label { color: var(--wrn-c); border-color: var(--wrn-bd); }
.diag_advice--info    .diag-action-label { color: var(--inf-c); border-color: var(--inf-bd); }

/* Value emphasis — minimal: color + weight only, no badge */
.diag-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Severity tints the primary value only; reference values stay neutral */
.diag_advice--error   .diag-val:not(.diag-val--ref) { color: var(--err-c); }
.diag_advice--warning .diag-val:not(.diag-val--ref) { color: var(--wrn-c); }
.diag_advice--info    .diag-val:not(.diag-val--ref) { color: var(--inf-c); }

/* Reference / comparison value — visible, but calmer than the primary */
.diag-val--ref {
    font-weight: 600;
    color: inherit;
}

.diag-action {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    border-radius: var(--r2);
    padding: 0.55rem 0.75rem;
    height: 100%;
    box-sizing: border-box;
}
.diag_advice--error   .diag-action { background: var(--err-bg); background: color-mix(in srgb, var(--err-bd) 20%, transparent); }
.diag_advice--warning .diag-action { background: var(--wrn-bg); background: color-mix(in srgb, var(--wrn-bd) 20%, transparent); }
.diag_advice--info    .diag-action { background: var(--inf-bg); background: color-mix(in srgb, var(--inf-bd) 20%, transparent); }

.diag-action-bar {
    display: block;
    width: 2px;
    border-radius: 1px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 1rem;
}
.diag_advice--error   .diag-action-bar { background: var(--err-c); }
.diag_advice--warning .diag-action-bar { background: var(--wrn-c); }
.diag_advice--info    .diag-action-bar { background: var(--inf-c); }

.diag-action p {
    font-size: 0.7875rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.65;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ALERT ICONS (inline in spec rows)
   ═══════════════════════════════════════════════════════════════ */
.msgIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

a.idot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    min-height: 1.1rem;
}

.spec_result .error,
.spec_result .warning,
.spec_result .info,
.spec_title .error,
.spec_title .warning,
.spec_title .info,
.freq_container .error,
.freq_container .warning,
.freq_container .info {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    min-height: 1.1rem;
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    flex-shrink: 0;
}

.error,
.diag_error_icon,
.freq_container .error   { background-image: url('../images/error-inverse.svg'); }

.warning,
.diag_warning_icon,
.freq_container .warning { background-image: url('../images/warning-inverse.svg'); }

.info,
.diag_info_icon,
.freq_container .info    { background-image: url('../images/infos-inverse.svg'); }

/* ═══════════════════════════════════════════════════════════════
   SPEC SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.spec_item {
    background: var(--white);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

.spec_item:hover { box-shadow: var(--sh2); }
.spec_item:nth-child(1) { animation-delay: .00s; }
.spec_item:nth-child(2) { animation-delay: .05s; }
.spec_item:nth-child(3) { animation-delay: .10s; }
.spec_item:nth-child(4) { animation-delay: .15s; }
.spec_item:nth-child(5) { animation-delay: .20s; }
.spec_item:nth-child(6) { animation-delay: .25s; }
.spec_item:nth-child(7) { animation-delay: .30s; }
.spec_item:nth-child(8) { animation-delay: .35s; }

.spec_name {
    background: var(--navy);
    color: #fff;
    font-size: 0.7187rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.spec_name::before {
    content: '';
    display: block;
    width: 0.2rem;
    height: 0.75rem;
    background: var(--cyan);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Spec grid + sidebar wrapper */
.spec_item_body {
    display: flex;
    width: 100%;
    min-height: 0;
}

.grid_spec {
    display: grid;
    flex: 1;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(8.75rem, 13.75rem) 1fr;
}

.spec_title {
    position: relative;
    padding: 0.375rem 1rem;
    font-size: 0.7906rem;
    font-weight: 500;
    color: var(--mid);
    background: var(--white);
    border-bottom: 1px solid var(--bd);
    border-right: 1px solid var(--bd);
    display: flex;
    align-items: center;
}

.spec_result {
    padding: 0.375rem 1rem;
    font-size: 0.8625rem;
    font-weight: 600;
    color: var(--dark);
    background: var(--white);
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    word-break: break-word;
}

/* Alternating rows removed — purely aesthetic, misleading */

.grid_sep { display: none; }

.highlight { color: var(--cyan-text) !important; font-weight: 700; }

/* Alert icon container — right side of label cell */
.spec_title_actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    flex-shrink: 0;
}

.spec_title_actions .msgIcon {
    margin-left: 0;
}

/* Rows with field descriptions — hover previews sidebar, click locks it */
.spec_result.has-desc {
    cursor: default;
    transition: background .12s;
}

.spec_result.has-desc:hover { background: var(--bd2); }

.spec_result.has-desc.is-locked { background: var(--bd2); }

/* ? hint — sits right after the label text */
.spec_hint {
    display: inline-block;
    margin-left: auto;
    font-size: 0.7906rem;
    font-weight: 700;
    color: var(--grey);
    opacity: 0.4;
    transition: opacity .15s, color .15s;
    pointer-events: none;
    line-height: 1;
    align-self: center;
    flex-shrink: 0;
}

.spec_result.has-desc:hover .spec_hint,
.spec_result.has-desc.is-locked .spec_hint {
    opacity: 1;
    color: var(--cyan-text);
}

/* Frequency chips row */
.freq_template {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.55rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--bd);
}

.freq_value {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r3);
    padding: 0.2rem 0.55rem;
    font-size: 0.7187rem;
    font-weight: 600;
    color: var(--cyan-text);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SPEC SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.spec_sidebar {
    width: 25rem;
    flex-shrink: 0;
    border-left: 1px solid var(--bd);
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Image slot — 16:9, fills sidebar width */
.ssb-image {
    border-bottom: 1px solid var(--bd);
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--white);
}

.ssb-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

.ssb-image--placeholder {
    background: var(--bg);
}

.ssb-placeholder-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--bd);
    position: relative;
    overflow: hidden;
}

.ssb-placeholder-icon::before {
    content: '';
    position: absolute;
    background: var(--bd2);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
}

.ssb-placeholder-icon::after {
    content: '';
    position: absolute;
    background: var(--bd2);
    width: 2rem;
    height: 1.25rem;
    border-radius: 1rem 1rem 0 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ssb-info {
    padding: 0.875rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ssb-info-title {
    font-size: 0.805rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: .02em;
}

.ssb-info-body {
    font-size: 0.805rem;
    line-height: 1.65;
    color: var(--mid);
}

.spec_sidebar.is-locked .ssb-info-title {
    color: var(--cyan-text);
}

/* ═══════════════════════════════════════════════════════════════
   WIDGETS — internal.widgets payload renderers (lmtile-* classes)
   ─────────────────────────────────────────────────────────────
   Markup is produced by widget-ldlc-v3-helpers.php (consumed by
   the per-section loop in validation-ldlc-v3.php). Five widget
   types share these styles : val, bar, ring, dimm-slots,
   storage-info. Prefix `lmtile-*` (LDLC metric-tile) stays
   isolated from the CPUZ skin's `.mtile-*` rules so the two
   skins can coexist in admin preview iframes.
   ═══════════════════════════════════════════════════════════════ */

/* Metrics row — flex container hosting widget tiles inside a section.
   Sits between the section header and the spec table.                  */
.lmetrics {
    display: flex;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--bd);
    border-top: none;
    border-bottom: none;
}

/* Base tile — every widget type uses this as its root container.       */
.lmtile {
    background: var(--white);
    padding: 14px 20px;
    flex: 1;
    min-width: 90px;
    border-right: 1px solid var(--bd2);
}
.lmtile:last-child { border-right: none; }

/* Per-type sizing — val tiles are compact, bar/ring/dimm need more
   horizontal room to host their richer content (bar + axis, donut +
   caption, slot grid).                                                 */
.lmtile--val  { flex: 1   1 0; min-width: 90px;  }
.lmtile--bar  { flex: 1.5 1 0; min-width: 130px; }
.lmtile--ring { flex: 1.5 1 0; min-width: 180px; }
.lmtile--dimm { flex: 2   1 0; min-width: 290px; }

/* Tile label — uppercase muted header at the top of every tile.        */
.lmtile-lbl {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--grey);
    margin-bottom: 6px;
}

/* Primary value — large numeric. Color set inline by the renderer
   based on the API tone (accent / danger / warning / success / muted). */
.lmtile-val {
    font-family: Montserrat, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 5px;
    color: var(--mid);
}

/* Optional subtitle under the value — caption line for context like
   memory subtitle on Effective Speed widget ("1600 MHz").              */
.lmtile-sub {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--grey);
    margin-top: 3px;
}


/* ── BAR WIDGET ────────────────────────────────────────────────────── */
/* Horizontal progress bar with min/max axis below. The container
   carries position:relative + overflow:visible so the cap marker
   (tick + label) can escape the 4px-tall bar.                          */
.lmtile-bar {
    position: relative;
    height: 4px;
    background: var(--bd2);
    border-radius: 2px;
    margin: 8px 0 4px;
    overflow: visible;
}
.lmtile-bar-fill { height: 4px; border-radius: 2px; }

.lmtile-range {
    display: flex;
    justify-content: space-between;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    color: var(--grey);
}

/* Cap marker — vertical tick that flags a reference threshold inside
   the bar (e.g. the declared PL2 / PPT / TDP cap on the CPU Power
   tile when peak overshoots). The label flips above/below based on
   marker position :
     markerPct ≥ 25%  →  label above the bar (.lmtile-bar-marker-lbl--top)
     markerPct  < 25% →  label below the bar (.lmtile-bar-marker-lbl--bottom)
   Threshold sits at 25% (not 50%) because the range row's left number
   takes few characters — a label sitting just right of it doesn't
   visually clash.                                                       */
.lmtile-bar-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2.5px;
    background: var(--navy);
    box-shadow:
        0 0 0 1px var(--white),
        0 1px 3px rgba(10, 55, 130, 0.25);
    border-radius: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}
.lmtile-bar-marker-lbl {
    position: absolute;
    transform: translateX(-50%);
    color: var(--mid);
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    pointer-events: none;
    background: var(--white);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--bd);
    z-index: 3;
}
.lmtile-bar-marker-lbl--top    { bottom: calc(100% + 6px); }
.lmtile-bar-marker-lbl--bottom { top:    calc(100% + 6px); }

/* Horizontal alignment variants — when the marker is near either edge,
   the default `translateX(-50%)` centre alignment overflows the tile.
   These modifiers anchor the label by its right or left edge instead so
   it stays within the bar bounds. The renderer picks the variant based
   on the markerPct (≥85 → right, ≤15 → left, else centred).           */
.lmtile-bar-marker-lbl--right {
    transform: translateX(-100%);
    /* The label's right edge aligns with the marker position. Add a few
       pixels of right-offset so it visually clears the tick stem
       (otherwise the tick's halo collides with the label border).        */
    margin-left: -4px;
}
.lmtile-bar-marker-lbl--left {
    transform: translateX(0);
    /* The label's left edge aligns with the marker position. Same
       breathing room logic mirrored on the left side.                    */
    margin-left: 4px;
}

/* When the marker label sits BELOW the bar, push the range row down
   so its 0 / max numbers don't visually crash into the label.          */
.lmtile-bar:has(.lmtile-bar-marker-lbl--bottom) + .lmtile-range {
    margin-top: 14px;
}

/* Hint pill — optional badge anchored to the top-right of a bar tile.
   Tone-aware : inherits danger/warning/success/accent/muted colour
   from the API. Used for "PPT unlocked" / "Above PL1" on CPU Power
   widget, GPU short-name on multi-GPU dumps, etc.                      */
.lmtile-hint-pill {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bd2);
    color: var(--mid);
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.lmtile-hint-pill--danger  { background: var(--err-bg); color: var(--danger-v); }
.lmtile-hint-pill--warning { background: var(--wrn-bg); color: var(--warn-v); }
.lmtile-hint-pill--success { background: #DCFCE7;       color: var(--ok); }
.lmtile-hint-pill--accent  { background: var(--inf-bg); color: var(--cyan); }
.lmtile-hint-pill--muted   { background: var(--bd2);    color: var(--grey); }


/* ── RING WIDGET ───────────────────────────────────────────────────── */
/* Value displayed as a donut filling proportionally. Side caption
   below the value shows the upper bound ("Max 100°C") so users see
   the ratio without computing it.                                      */
.lmtile-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.lmtile-ring-wrap {
    position: relative;
    width: 95px;
    height: 95px;
    flex-shrink: 0;
}
/* SVG rotated -90° so the stroke begins at 12 o'clock and grows
   clockwise. Background ring uses --bd2 for the unfilled portion.      */
.lmtile-ring-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}
.lmtile-ring-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lmtile-ring-sub {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--grey);
    letter-spacing: 0.3px;
}


/* ── DIMM-SLOTS WIDGET ─────────────────────────────────────────────── */
/* Memory slot visualisation. One cell per physical DIMM bay, showing
   filled / empty / soldered state at a glance. Stripe colour on
   filled cells encodes "kit identity" — modules with identical PN +
   size share the same stripe colour, so dual-kit configs read
   instantly.                                                            */

/* Counter "(2 / 4)" next to the widget title. */
.lmtile-dimm-count {
    color: var(--grey);
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

/* Slot row — flex container hosting cells. flex-wrap kicks in only
   on 8+ slot HEDT boards, but cells stay fixed-width so the second
   row aligns with the first.                                           */
.lmtile-dimm-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Each cell wraps a slot card + the label below (for filled slots).
   flex-basis = 25% - (gap-share) forces EXACTLY 4 cells per row
   regardless of parent width.                                          */
.lmtile-dimm-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 calc(25% - 4.5px);
    min-width: 0;
}

/* Base slot card — fixed height so filled / empty stay on same baseline. */
.lmtile-dimm-slot {
    width: 100%;
    max-width: 76px;
    height: 52px;
    border-radius: 4px;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
}

/* Soldered variant — three lines instead of two, tighten line gap. */
.lmtile-dimm-slot--soldered { gap: 1px; }

/* "SOLDERED" tag between brand and capacity. */
.lmtile-dimm-tag {
    font-family: Montserrat, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--grey);
    background: var(--bd2);
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.1;
}

/* Filled slot — white background, coloured top stripe set inline by
   the renderer (kit-identity palette : cyan → navy → green → amber
   → purple → red). Subtle shadow for definition against the metrics
   row's white backdrop.                                                */
.lmtile-dimm-slot--filled {
    background: var(--white);
    border: 1px solid var(--bd);
    border-top: 3px solid var(--cyan);
    padding-top: 6px;
    box-shadow: 0 1px 2px rgba(10, 55, 130, 0.06);
}

/* Empty slot — dashed cyan-tinted border, transparent background. */
.lmtile-dimm-slot--empty {
    background: transparent;
    border: 1px dashed rgba(0, 150, 200, 0.4);
}

/* Top line — vendor name, uppercase. */
.lmtile-dimm-brand {
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
}

/* Capacity line ("8 GB"). */
.lmtile-dimm-cap {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--mid);
    line-height: 1;
}

/* Unit suffix tucked next to capacity number. */
.lmtile-dimm-unit {
    font-size: 10px;
    color: var(--grey);
    margin-left: 1px;
}

/* "empty" italic text inside dashed cells. */
.lmtile-dimm-empty {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    color: var(--grey);
    line-height: 1;
}

/* Slot label "S0", "S1"... — default placement below the card. */
.lmtile-dimm-num {
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--grey);
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Inside-the-card variant — used by empty slots, sits below the
   italic "empty" word still WITHIN the dashed frame.                   */
.lmtile-dimm-num--inside { margin-top: 2px; }


/* ── STORAGE SECTION STRUCTURE (wrappers) ─────────────────────────────
   The storage spec area is laid out as :
     .spec_item_body  (flex row)
       └── .stor-groups-wrap  (one column, hosts all drives stacked)
             ├── [storage-info widget for drive #1]
             ├── .grid_spec.stor-drive-group  (specs for drive #1)
             ├── [storage-info widget for drive #2]
             ├── .grid_spec.stor-drive-group  (specs for drive #2)
             └── ...
       └── .spec_sidebar  (25rem fixed, on the right)

   Without explicit flex sizing on .stor-groups-wrap, the column collapses
   to its content's natural width (the widgets become squeezed). Giving
   it flex:1 + min-width:0 lets it take all the space the sidebar didn't
   claim, while the min-width:0 prevents long drive names from breaking
   the layout.                                                            */
.stor-groups-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Per-drive spec grid — same column rules as the standalone .grid_spec
   but with width: 100% so it fills the wrapper (otherwise the inner
   grid would only be as wide as its widest row).                       */
.stor-drive-group {
    width: 100%;
}

/* ── STORAGE-INFO WIDGET ───────────────────────────────────────────── */
/* Drive sub-card header — REPLACES the standard sub-card block for
   each drive. Carries identity (letter badge + name) on the left,
   usage stats (% used + total) on the right, and a thin progress bar
   at the bottom — all in one cohesive header block.                    */
.lsec--sub--storage {
    display: block;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--bd);
    border-radius: var(--r2);
    overflow: hidden;
    margin-bottom: 8px;
}

/* Inner row recreates the horizontal layout (letter → name → spacer
   → meta) inside the now-vertical parent.                              */
.lsec--sub--storage > .lssub-storage-row {
    display: flex;
    align-items: stretch;
}

/* Letter badge — sits at the left edge with a tinted background. */
.lsec--sub--storage .lsec-n {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    background: var(--bd2);
    padding: 10px 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--bd2);
}

/* Drive name — primary identity line. */
.lsec--sub--storage .lsec-t {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Flex spacer between name and right-aligned meta. */
.lsec--sub--storage .lsec-rule { flex: 1; }

/* Right-aligned meta column : "98% used" / "Total 465 GiB". */
.lssub-storage-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 8px 16px;
    flex-shrink: 0;
    font-family: Montserrat, sans-serif;
}
.lssub-storage-pct {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    /* `color` is set inline by the renderer (matches the bar fill). */
}
.lssub-storage-total {
    font-size: 11px;
    font-weight: 500;
    color: var(--grey);
    line-height: 1.2;
}

/* Thin usage bar at the bottom of the card. */
.lssub-storage-bar {
    height: 4px;
    background: var(--bd2);
    overflow: hidden;
}
.lssub-storage-bar-fill {
    height: 100%;
    /* `width` and `background` are set inline by the renderer. */
}

/* ═══════════════════════════════════════════════════════════════
   GRAPH ACCORDIONS
   Toggle handled by widget-validations-graph.php JS via
   .show and .animate-in — do not change display rules here.
   ═══════════════════════════════════════════════════════════════ */
.graph-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.graph-ctrl-btn {
    font-family: Montserrat, sans-serif;
    font-size: 0.7188rem;
    font-weight: 600;
    color: var(--mid);
    background: var(--white);
    border: 1px solid var(--bd);
    border-radius: var(--r2);
    padding: 0.35rem 0.875rem;
    min-height: 2.75rem; /* 44px tap target */
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.graph-ctrl-btn:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
   
.graph_accord {
    background: var(--white);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    margin-bottom: 0.5rem;
    transition: box-shadow .2s;
    width: 100%;
}

.graph_accord:hover { box-shadow: var(--sh2); }

.graph_title {
    background: var(--navy) !important;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.55rem 1rem;
    position: relative;
    color: #fff;
    font-weight: 700;
    gap: 0.5rem;
}

.graph_title::before {
    content: '';
    display: block;
    width: 0.2rem;
    height: 0.75rem;
    background: var(--cyan);
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.graph_title::after {
    content: "▾";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .3s ease;
    color: rgba(255,255,255,.6);
    font-size: 1em;
}

.graph_accord.open .graph_title::after {
    transform: translateY(-50%) rotate(180deg);
}

.graph_title .title {
    flex: 1;
    text-align: left;
    color: #fff;
    font-size: 0.7187rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.graph_title .sku {
    padding: 0 2.5rem 0 0.875rem;
    color: rgba(255,255,255,.45);
    font-size: 0.7187rem;
    font-weight: 500;
    border-left: 1px solid rgba(255,255,255,.15);
    text-align: left;
}

.graph_canvas {
    width: 100%;
    opacity: 0;
    transform: translateY(-0.625rem);
    transition: opacity .3s ease, transform .3s ease;
    display: none;
}

.graph_canvas.show       { display: block; }
.graph_canvas.animate-in { opacity: 1; transform: translateY(0); }

.graph {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .4em;
}

.ldlc-section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.875rem 0 0.875rem;
}

.ldlc-section-label span {
    font-size: 0.7187rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mid);
    white-space: nowrap;
}

.ldlc-section-label hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--bd);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .spec_sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes ldlc-fadeUp {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   FIELD DESCRIPTION POPUP (mobile ≤640px)
   ═══════════════════════════════════════════════════════════════ */
.spec-desc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(10,55,130,.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}
.spec-desc-overlay.is-open {
    display: flex;
    animation: none;
}
.spec-desc-popup {
    background: var(--white);
    border-radius: var(--r) var(--r) var(--r2) var(--r2);
    box-shadow: 0 16px 48px rgba(10,55,130,.22);
    width: 100%;
    max-width: 28rem;
    overflow: hidden;
}
.sdp-head {
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
}
.sdp-head h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdp-close {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    padding: 0.75rem; /* 44px tap target */
    margin: -0.55rem;
    border-radius: 4px;
    transition: color .15s;
    flex-shrink: 0;
}
.sdp-close:hover { color: #fff; }
.sdp-body {
    padding: 1rem;
    font-size: 0.805rem;
    line-height: 1.65;
    color: var(--mid);
}

/* ═══════════════════════════════════════════════════════════════
   SPEC NAME — ? hint button (visible only ≤960px)
   ═══════════════════════════════════════════════════════════════ */
.spec-name-hint {
    display: inline-flex;
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.8);
    border-radius: 50%;
    /* 44×44 tap target (WCAG 2.5.5) via padding, visual size stays small */
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.75rem;
    margin: -0.75rem -0.75rem -0.75rem auto;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
    align-items: center;
    justify-content: center;
}
.spec-name-hint:hover {
    background: rgba(255,255,255,.28);
    color: #fff;
}

/* Hide when sidebar is already visible */
@media (min-width: 961px) {
    .spec-name-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION INFO POPUP (≤960px)
   ═══════════════════════════════════════════════════════════════ */
.ssb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(10,55,130,.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}
.ssb-overlay.is-open {
    display: flex;
    animation: none;
}
.ssb-popup {
    background: var(--white);
    border-radius: var(--r) var(--r) var(--r2) var(--r2);
    box-shadow: 0 16px 48px rgba(10,55,130,.22);
    width: 100%;
    max-width: 28rem;
    overflow: hidden;
}
.ssb-popup-head {
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
}
.ssb-popup-head h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Image + body side by side */
.ssb-popup-content {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.ssb-popup-image {
    width: 7rem;
    flex-shrink: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 1px solid var(--bd);
    align-self: stretch;
}
.ssb-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}
.ssb-popup-body {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
    font-size: 0.805rem;
    line-height: 1.65;
    color: var(--mid);
}

/* ── Admin Dump Section ─────────────────────────────────────────────────── */
.ldlc-dump {
    width: 100%;
    margin: 2rem auto;
    padding: 0 1.25rem;
}

.ldlc-dump-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--navy);
}

.ldlc-dump-header h2 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0;
}

.ldlc-dump-body {
    border: 1px solid var(--bd);
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--white);
}

.ldlc-dump-body iframe {
    display: block;
    border: none;
    width: 100%;
    height: 600px;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-delay:      0.01ms !important;
        transition-duration:  0.01ms !important;
    }
    .pb-fill,
    .fb-fill { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS INDICATORS
   Visible ring for keyboard users, hidden for mouse (focus-visible)
   ═══════════════════════════════════════════════════════════════ */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Graph title sits on navy — use white ring instead */
.graph_title:focus-visible {
    outline-color: #fff;
}

/* Diag bubbles already have border — use box-shadow instead */
.diag-bubble:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan);
}

/* Spec rows hover/lock */
.spec_result.has-desc:focus-visible {
    outline: none;
    background: var(--bd2);
    box-shadow: inset 0 0 0 2px var(--cyan);
}

/* ═══════════════════════════════════════════════════════════════
   INTERSECTION OBSERVER FADE-IN
   Elements start invisible; JS adds .io-visible when in viewport.
   Fallback: .no-js class on <html> keeps everything visible.
   ═══════════════════════════════════════════════════════════════ */
.io-fade {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity .4s ease, transform .4s ease;
}
.io-fade.io-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Staggered children inside a visible parent */
.io-visible .io-fade-child:nth-child(1) { transition-delay: .00s; }
.io-visible .io-fade-child:nth-child(2) { transition-delay: .05s; }
.io-visible .io-fade-child:nth-child(3) { transition-delay: .10s; }
.io-visible .io-fade-child:nth-child(4) { transition-delay: .15s; }
.io-visible .io-fade-child:nth-child(5) { transition-delay: .20s; }
.io-visible .io-fade-child:nth-child(6) { transition-delay: .25s; }
.io-visible .io-fade-child:nth-child(7) { transition-delay: .30s; }
.io-visible .io-fade-child:nth-child(8) { transition-delay: .35s; }
/* Safety: if JS never runs, nothing stays hidden */
html.no-js .io-fade { opacity: 1; transform: none; }



/* ═══════════════════════════════════════════════════════════════
   ADMIN TOOLBAR
   Sticky bar just below the hero banner — admins only.
   ═══════════════════════════════════════════════════════════════ */
.ldlc-admin-bar {
    background: var(--navy);
    border-bottom: 2px solid var(--cyan);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.ldlc-admin-bar-inner {
    max-width: var(--W);
    margin: 0 auto;
    padding: 0.5rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ldlc-admin-label {
    font-size: 0.6469rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
}

.ldlc-admin-nav {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.ldlc-admin-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.ldlc-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.875rem;
    border-radius: var(--r2);
    font-family: Montserrat, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity .14s, background .14s;
    white-space: nowrap;
    line-height: 1.4;
}

.ldlc-admin-btn:hover { opacity: 0.82; }

.ldlc-admin-btn--nav {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.15);
}

.ldlc-admin-btn--nav:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
    opacity: 1;
}

.ldlc-admin-btn--vis {
    background: rgba(0,150,200,.2);
    color: #0096C8;
    border: 1px solid rgba(0,150,200,.35);
}

.ldlc-admin-btn--reject {
    background: rgba(214,37,37,.15);
    color: #D62525;
    border: 1px solid rgba(214,37,37,.3);
}

.ldlc-admin-btn--logout {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
}
.ldlc-admin-btn--logout:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.ldlc-admin-id {
    margin-left: auto;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(0,150,200,.6);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ldlc-admin-bar-inner { padding: 0.5rem 0.875rem; gap: 0.5rem; }
    .ldlc-admin-id        { display: none; }
}

.ldlc-admin-skins {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ldlc-admin-btn--skin {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.1);
}

.ldlc-admin-btn--skin.is-active {
    background: var(--cyan);
    color: #fff;
    border-color: var(--cyan);
    opacity: 1;
}

.ldlc-admin-btn--skin:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
    opacity: 1;
}

/* Skin switcher */
.ldlc-admin-skin {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    align-items: center;
}

.ldlc-skin-btn {
    font-size: 0.6469rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 0.2rem 0.625rem;
    border-radius: var(--r2);
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1) !important;
    transition: all .14s;
}

.ldlc-skin-btn:hover {
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.12);
    opacity: 1;
}

.ldlc-skin-btn.active {
    color: #0096C8;
    background: rgba(0,150,200,.15);
    border-color: rgba(0,150,200,.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   QR CODE — banner trigger + modal
   ─────────────────────────────────
   The trigger sits in column 3 of .validated_text_block (which previously
   only held an empty ::after spacer). The modal is a fixed full-viewport
   overlay revealed by ldlcQrShow() in the inline script.
   Placed at the END of the file so cascade beats any earlier banner rule.
   ═══════════════════════════════════════════════════════════════════════ */

.ldlc-qr-trigger {
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
    /* The grid parent (.validated_text_block) has a centred ::after spacer
       that overlaps this cell visually and ends up catching mouse events
       above the button. Promote to a separate stacking context so clicks
       always reach us. */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #fff;
    font: 600 0.85rem/1 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ldlc-qr-trigger:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
}
.ldlc-qr-trigger:active {
    transform: translateY(1px);
}
.ldlc-qr-trigger svg {
    flex-shrink: 0;
}

/* Hide the label on small screens, keep just the icon */
@media (max-width: 640px) {
    .ldlc-qr-trigger span {
        display: none;
    }
    .ldlc-qr-trigger {
        padding: 0.55rem 0.7rem;
    }
}

/* ── MODAL ────────────────────────────────────────────────── */
.ldlc-qr-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 26, 46, 0.85);  /* navy w/ alpha */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: ldlcQrFade 0.18s ease-out both;
}
.ldlc-qr-modal[hidden] {
    display: none;
}

@keyframes ldlcQrFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ldlc-qr-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem 2rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    animation: ldlcQrPop 0.22s ease-out both;
}

@keyframes ldlcQrPop {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.ldlc-qr-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7682;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.ldlc-qr-close:hover {
    background: #f0f2f5;
    color: #0a1a2e;
}

.ldlc-qr-title {
    margin: 0 0 0.4rem;
    font: 700 1.15rem/1.3 'Montserrat', sans-serif;
    color: #0a1a2e;
}

.ldlc-qr-subtitle {
    margin: 0 0 1.25rem;
    font: 400 0.9rem/1.4 'Montserrat', sans-serif;
    color: #6b7682;
}

.ldlc-qr-target {
    display: inline-block;
    padding: 12px;                      /* QR quiet zone */
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    margin-bottom: 1rem;
    min-width: 280px;
    min-height: 280px;
}
/* qrcode.js generates either a <table>, <canvas>, or <img> depending on
   the engine. Make sure none of them gets weird default spacing. */
.ldlc-qr-target img,
.ldlc-qr-target canvas,
.ldlc-qr-target table {
    display: block;
    margin: 0 auto;
}

.ldlc-qr-url {
    margin: 0;
    font: 400 0.75rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
    color: #6b7682;
    word-break: break-all;
}