/* ── Ugens Opsummering — editorial weekly digest ──
   Mobile: single column (legacy).
   Desktop (≥1024px): 12-col dashboard grid inside the app-shell content well.
   All tokens come from components.css (Glass Court). */

.ugen-page{
    color:var(--text);
    /* Editorial-dark tokens, mirrored from .om-page (rankings.css) so
       the shared chrome — eyebrow dot, mono section badges, footer slug —
       resolves the same colours here. */
    --om-blue:#52e1fe;
    --om-blue-soft:rgba(82,225,254,0.10);
    --om-blue-line:rgba(82,225,254,0.22);
    --om-amber:var(--accent);
    --om-hair:rgba(255,255,255,0.06);
}

/* ── Masthead — editorial hero (matches .kal-hero / .om-eyebrow flow) ── */
.ugen-page .masthead{
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:6px 0 22px;
    margin:4px 0 22px;
    border-bottom:1px solid var(--om-hair);
    position:relative;overflow:hidden;
}
.ugen-page .masthead-eyebrow{
    font-family:var(--font-mono);
    font-size:10px;font-weight:600;
    letter-spacing:0.24em;text-transform:uppercase;
    color:var(--om-blue);
    margin:0 0 10px;
    display:inline-flex;align-items:center;gap:8px;
}
.ugen-page .masthead-eyebrow .om-eyebrow-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--om-blue);
    box-shadow:0 0 10px var(--om-blue);
    animation:om-blink 1.6s ease-in-out infinite;
}
.ugen-page .headline{
    font-family:var(--font-display);
    font-weight:800;
    font-size:28px;
    line-height:1.04;
    letter-spacing:-0.035em;
    margin:0 0 10px;
    color:var(--text);
}
.ugen-page .headline em{
    font-style:normal;
    color:var(--om-amber);
    font-weight:800;
}
.ugen-page .masthead-lede{
    font-size:13px;line-height:1.55;
    color:var(--text-muted);
    margin:0;
    max-width:54ch;
}
/* Hidden on mobile (the chart is desktop-only — too cramped at 320px) */
.weekbars{display:none;}

/* ── Hero KPI tiles ── */
.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-2);
    margin:0 0 var(--space-4);
}
.hero-stat{
    background:var(--card);
    border:none;
    border-radius:var(--radius-lg);
    box-shadow:var(--card-inset);
    padding:16px 12px;
    text-align:center;
    cursor:pointer;
    font:inherit;color:inherit;
    transition:transform 0.12s ease, box-shadow 0.18s ease;
    position:relative;overflow:hidden;
}
.hero-stat::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(90% 70% at 50% 0%, rgba(255,181,71,0.07) 0%, rgba(255,181,71,0) 60%);
    opacity:0;transition:opacity 0.2s ease;
}
.hero-stat:hover::before,.hero-stat:focus-visible::before{opacity:1;}
.hero-stat:hover,.hero-stat:focus-visible{
    box-shadow:inset 0 0 0 1px var(--accent-border), inset 0 1px 0 0 var(--border-highlight);
    outline:none;
}
.hero-stat:active{transform:scale(0.98);}
.hero-stat-value{
    font-family:var(--font-mono);font-weight:600;
    font-size:30px;color:var(--accent);
    line-height:1;margin-bottom:6px;
    font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.hero-stat-label{
    font-size:10px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.14em;font-weight:600;
}

/* ── Sections ── */
.ugen-page .section{
    background:var(--card);
    border:none;
    border-radius:var(--radius-lg);
    box-shadow:var(--card-inset);
    padding:16px 20px;
    margin:0 0 var(--space-3);
}

/* Section title — mono number badge + uppercase label, hairline rule trails to the right */
.ugen-page .section-title{
    font-family:var(--font-mono);
    font-weight:700;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--text);
    margin:0 0 16px;
    display:flex;align-items:center;gap:12px;
    line-height:1;
}
.sec-marker{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:28px;height:20px;padding:0 6px;
    font-family:var(--font-mono);
    font-size:10px;font-weight:700;letter-spacing:0.16em;
    color:var(--om-blue);
    background:transparent;
    border:1px solid var(--om-blue-line);
    border-radius:2px;
    line-height:1;
    flex-shrink:0;
}
/* Hairline rule that fills remaining row after the title */
.ugen-page .section-title::after{
    content:'';
    flex:1;height:1px;
    background:linear-gradient(90deg, var(--om-hair), transparent);
}
/* Variant tints — droppers red, upset/streaks amber, calibration muted */
.sec-droppers .sec-marker{color:#ff6b5e;border-color:rgba(255,107,94,0.32);}
.sec-streaks .sec-marker{color:var(--om-amber);border-color:rgba(255,181,71,0.32);}
.sec-upset .sec-marker{color:var(--om-amber);border-color:rgba(255,181,71,0.32);}
.sec-calib .sec-marker{color:var(--text-muted);border-color:var(--om-hair);}

.ugen-page .section-sub{
    font-family:var(--font-mono);
    font-size:11px;letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin:-10px 0 12px;
}

/* ── Player rows — restrained, magazine-table style ── */
.ugen-page .rank-list{
    display:flex;flex-direction:column;
    margin:-2px -4px -4px;
}
.ugen-page .player-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 8px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
    text-decoration:none;color:var(--text);
    transition:background 0.15s ease;
}
.ugen-page .player-row:last-child{box-shadow:none;}
a.player-row:hover{background:rgba(255,255,255,0.03);}

.ugen-page .player-left{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;}
.ugen-page .player-left > div:last-child{min-width:0;flex:1 1 auto;}
.ugen-page .player-name{
    font-size:14px;font-weight:600;
    color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.2;
}
.ugen-page .player-club{
    font-size:11px;color:var(--text-muted);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ugen-page .flag--md{width:22px;}

.ugen-page .rank-right{display:flex;align-items:center;flex-shrink:0;}
.ugen-page .rank-badge-wrapper{display:inline-flex;align-items:center;gap:8px;}

/* Rank number — matches the rankings page treatment exactly */
.ugen-page .rank-badge{
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;
    font-size:13px;font-weight:700;
    color:var(--text-dim);
    line-height:1;letter-spacing:0;
    white-space:nowrap;
    display:inline-flex;align-items:baseline;
}
.ugen-page .rank-hash{
    color:inherit;opacity:1;
    font-size:11px;margin-right:1px;font-weight:700;
}

/* Movement — small bordered pill, matches .lr-move on rankings page */
.ugen-page .rank-movement{
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;
    font-size:10px;font-weight:600;line-height:1;letter-spacing:0.02em;
    padding:3px 7px;border-radius:5px;
    background:rgba(255,255,255,0.04);
    box-shadow:inset 0 0 0 1px var(--card-border);
    white-space:nowrap;pointer-events:none;
    color:var(--text-muted);
}
.ugen-page .rank-movement.up{
    color:var(--accent);
    background:rgba(255,181,71,0.10);
    box-shadow:inset 0 0 0 1px var(--accent-border);
}
.ugen-page .rank-movement.down{
    color:var(--down);
    background:rgba(255,107,94,0.10);
    box-shadow:inset 0 0 0 1px rgba(255,107,94,0.30);
}
.ugen-page .rank-movement.streak{
    color:var(--gold);
    background:rgba(255,184,106,0.10);
    box-shadow:inset 0 0 0 1px rgba(255,184,106,0.30);
}

/* Player rank chip used inside the modal */
.ugen-page .player-rankbadge{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11px;font-weight:700;
    color:var(--text-muted);
    background:rgba(255,255,255,0.04);
    box-shadow:inset 0 0 0 1px var(--card-border);
    border-radius:6px;
    padding:1px 6px;margin-right:8px;
    vertical-align:1px;
}

/* ── Upset pullquote ── */
.pullquote{margin:0;padding:0;text-align:center;}
.pullquote-teams{display:flex;flex-direction:column;gap:4px;font-size:15px;}
.pullquote-winner{font-weight:700;color:var(--accent);}
.pullquote-winner a{color:var(--accent);text-decoration:none;}
.pullquote-winner a:hover{text-decoration:underline;}
.pullquote-score{
    font-family:var(--font-mono);font-size:22px;font-weight:600;
    color:var(--text);padding:4px 0;
    font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
.pullquote-loser{color:var(--text-muted);font-weight:500;}
.pullquote-cap{margin-top:12px;font-size:12px;color:var(--text-muted);line-height:1.5;}
.pullquote-cap strong{color:var(--text);}
.muted{color:var(--text-muted);}

/* ── Calibration ── */
.calib-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-3);
}
.calib{
    display:flex;align-items:center;gap:16px;
    background:var(--bg-raised);
    border-radius:var(--radius-lg);
    box-shadow:inset 0 0 0 1px var(--card-border);
    padding:16px 18px;
}
.calib-value{
    font-family:var(--font-mono);font-weight:600;
    font-size:28px;color:var(--accent);line-height:1;
    font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.calib-label{font-size:12px;color:var(--text);line-height:1.5;}

/* ── Empty state ── */
.ugen-page .empty-state{padding:24px 16px;text-align:center;color:var(--text-muted);}

/* ── Footer — editorial slug row ── */
.ugen-foot{
    display:flex;flex-direction:column;gap:6px;
    margin-top:var(--space-6);
    padding:18px 0 8px;
    border-top:1px solid var(--om-hair);
    box-shadow:none;
    font-family:var(--font-mono);
    font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--text-dim);text-align:center;
    line-height:1.4;
}
.ugen-foot b{color:var(--text-muted);font-weight:700;}
.ugen-foot-mid{color:var(--text-dim);}

/* Eyebrow dot blink (mirrored from .om-eyebrow-dot — that rule is
   scoped to .om-page so we re-declare the keyframe locally) */
@keyframes om-blink{0%,100%{opacity:1}50%{opacity:0.35}}

/* ── Modal (hero-stat popups) ── */
.ugen-modal-overlay{
    position:fixed;inset:0;
    background:rgba(5,8,16,0.72);
    backdrop-filter:blur(8px) saturate(1.2);
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
    z-index:1000;
    display:flex;align-items:flex-end;justify-content:center;
    padding:0;
}
.ugen-modal-overlay[hidden]{display:none;}
.ugen-modal{
    background:var(--card);
    box-shadow:inset 0 0 0 1px var(--card-border), 0 -24px 60px -16px rgba(0,0,0,0.5);
    border-radius:18px 18px 0 0;
    width:100%;max-width:640px;max-height:85vh;
    display:flex;flex-direction:column;
    animation:ugenSlideUp 0.2s ease-out;
}
@keyframes ugenSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.ugen-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
    flex-shrink:0;
}
.ugen-modal-title{
    margin:0;font-family:var(--font-display);
    font-weight:700;font-size:16px;letter-spacing:-0.01em;
}
.ugen-modal-close{
    background:transparent;border:0;color:var(--text-muted);
    font-size:18px;line-height:1;cursor:pointer;padding:4px 8px;
    transition:color 0.15s ease;
}
.ugen-modal-close:hover{color:var(--text);}
.ugen-modal-body{overflow-y:auto;padding:8px 12px 20px;}

.ugen-mlist,.ugen-elist,.ugen-plist{list-style:none;padding:0;margin:0;}
.ugen-group-label{
    font-family:var(--font-mono);font-size:11px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);
    margin:14px 0 4px;padding-bottom:4px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
}
.ugen-group-label:first-child{margin-top:2px;}
.ugen-mrow,.ugen-erow,.ugen-prow{
    padding:10px 4px;box-shadow:inset 0 -1px 0 0 var(--divider);
}
.ugen-mrow:last-child,.ugen-erow:last-child,.ugen-prow:last-child{box-shadow:none;}
.ugen-mrow-head{
    display:flex;justify-content:space-between;
    font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
    margin-bottom:4px;gap:8px;
}
.ugen-mevent{
    text-align:right;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    min-width:0;
}
.ugen-mteams{
    display:grid;grid-template-columns:1fr auto 1fr;gap:8px;
    align-items:center;font-size:13px;
}
.ugen-mteam{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--text-muted);
}
.ugen-mteam:last-child{text-align:right;}
.ugen-mteam.win{color:var(--text);font-weight:600;}
.ugen-mscore{
    font-family:var(--font-mono);font-size:12px;color:var(--accent);
    white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ugen-erow{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    font-size:14px;
}
.ugen-ename{color:var(--text);font-weight:500;}
.ugen-ecount{
    font-family:var(--font-mono);font-size:12px;color:var(--accent);
    white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ugen-prow{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    font-size:14px;
}
.ugen-pname{color:var(--text);text-decoration:none;font-weight:600;}
a.ugen-pname:hover{color:var(--accent);}
.ugen-pmeta{
    font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
    white-space:nowrap;font-variant-numeric:tabular-nums;
}

@media (min-width:640px){
    .ugen-modal-overlay{align-items:center;padding:20px;}
    .ugen-modal{border-radius:var(--radius-lg);max-height:80vh;}
}

/* ── Submenu WIP indicator (used in the bottom nav) ── */
.nav-submenu-item .wip-badge{
    display:inline-block;
    margin-left:6px;
    font-size:10px;
}

/* ════════ DESKTOP DASHBOARD (≥1024px) ════════
   12-col editorial grid. Section order set with `order:` so the 3-up
   player columns sit together and Upset/Calibration span the row. */
@media (min-width:1024px){
    .ugen-page{
        display:grid;
        grid-template-columns:repeat(12, 1fr);
        gap:var(--space-4);
        /* no align-items:start — let the 3-up cards STRETCH to equal heights */
    }

    /* Explicit order */
    .ugen-page > .masthead{order:1;}
    .ugen-page > .hero-stats{order:2;}
    .ugen-page > .section:has(.rank-movement.up){order:3;}
    .ugen-page > .section:has(.rank-movement.down){order:4;}
    .ugen-page > .section:has(.rank-movement.streak){order:5;}
    .ugen-page > .section:has(.pullquote){order:6;}
    .ugen-page > .section:has(.calib-grid){order:7;}
    .ugen-page > .section.empty-state{order:8;}
    .ugen-page > .ugen-foot{order:9;}

    /* Full-width members */
    .ugen-page > .ugen-foot{grid-column:1 / -1;margin:0;}

    /* ── Masthead: flowing editorial hero (no box; matches .kal-hero) ── */
    .ugen-page > .masthead{
        grid-column:1 / -1;
        margin:4px 0 28px;
        padding:6px 0 30px;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:32px;
        border-bottom:1px solid var(--om-hair);
        background:transparent;
        position:relative;overflow:visible;
    }
    .ugen-page > .masthead::before,
    .ugen-page > .masthead::after{display:none;}
    .ugen-page > .masthead > *{position:relative;z-index:1;}
    .ugen-page .masthead-eyebrow{
        font-size:11px;
        letter-spacing:0.22em;
        margin:0 0 10px;
    }
    .ugen-page .headline{
        font-size:42px;
        font-weight:800;
        letter-spacing:-0.03em;
        line-height:1.02;
        margin:0 0 12px;
    }
    .ugen-page .masthead-lede{
        font-size:14px;line-height:1.55;
        max-width:60ch;
    }
    /* ── Weekly activity bar chart — replaces the decorative issue number ── */
    .ugen-page .weekbars{
        display:block;
        margin:0;
        align-self:end;
        min-width:340px;
    }
    .ugen-page .weekbars-label{
        font-family:var(--font-mono);
        font-size:9px;font-weight:700;
        letter-spacing:0.22em;text-transform:uppercase;
        color:var(--text-dim);
        text-align:right;
        margin:0 0 10px;
    }
    .ugen-page .weekbars-grid{
        display:grid;
        grid-template-columns:repeat(7, 1fr);
        gap:6px;
        align-items:end;
    }
    .ugen-page .weekbars-col{
        display:flex;flex-direction:column;align-items:center;
        gap:6px;
        --bar-c:rgba(255,181,71,0.55);
        --bar-c-bg:rgba(255,181,71,0.04);
    }
    .ugen-page .weekbars-col.is-today{
        --bar-c:var(--accent);
        --bar-c-bg:rgba(255,181,71,0.10);
    }
    .ugen-page .weekbars-count{
        font-family:var(--font-mono);font-variant-numeric:tabular-nums;
        font-size:11px;font-weight:700;
        color:var(--text-muted);
        line-height:1;height:11px;
    }
    .ugen-page .weekbars-col.is-peak .weekbars-count,
    .ugen-page .weekbars-col.is-today .weekbars-count{color:var(--accent);}
    .ugen-page .weekbars-bar-wrap{
        width:100%;height:72px;
        display:flex;align-items:flex-end;justify-content:center;
        background:var(--bar-c-bg);
        border-radius:4px;
        box-shadow:inset 0 0 0 1px var(--card-border);
        position:relative;overflow:hidden;
    }
    .ugen-page .weekbars-bar{
        width:100%;
        background:linear-gradient(180deg, var(--bar-c) 0%, rgba(255,181,71,0.18) 100%);
        border-radius:3px 3px 0 0;
        min-height:2px;
        transition:height 0.3s ease;
    }
    .ugen-page .weekbars-col.is-today .weekbars-bar{
        box-shadow:0 0 14px rgba(255,181,71,0.45);
    }
    .ugen-page .weekbars-day{
        font-family:var(--font-mono);
        font-size:9px;font-weight:700;
        letter-spacing:0.12em;
        color:var(--text-dim);
        line-height:1;
    }
    .ugen-page .weekbars-col.is-today .weekbars-day{color:var(--accent);}

    /* ── Hero stats: 3 tall tiles, equal-height row ── */
    .ugen-page > .hero-stats{
        grid-column:1 / -1;
        margin:0;
        gap:var(--space-3);
    }
    .ugen-page .hero-stat{padding:26px 20px 24px;}
    .ugen-page .hero-stat-value{font-size:42px;margin-bottom:10px;}
    .ugen-page .hero-stat-label{font-size:10px;letter-spacing:0.16em;}

    /* ── Climbers + Droppers + Streaks: 3-up row, equal height ── */
    .ugen-page > .section:has(.rank-movement.up),
    .ugen-page > .section:has(.rank-movement.down),
    .ugen-page > .section:has(.rank-movement.streak){
        grid-column:span 4;
        margin:0;
        padding:20px 22px;
        display:flex;flex-direction:column;
    }
    /* the player list grows to fill the card so rows distribute evenly */
    .ugen-page > .section:has(.rank-movement.up) .rank-list,
    .ugen-page > .section:has(.rank-movement.down) .rank-list,
    .ugen-page > .section:has(.rank-movement.streak) .rank-list{
        flex:1;
    }

    /* ── Upset hero ── */
    .ugen-page > .section:has(.pullquote){
        grid-column:1 / -1;
        margin:0;
        padding:40px 32px 44px;
        position:relative;overflow:hidden;
        background:
            radial-gradient(50% 100% at 0% 0%, rgba(255,181,71,0.08) 0%, rgba(255,181,71,0) 55%),
            radial-gradient(50% 100% at 100% 100%, rgba(80,120,200,0.06) 0%, rgba(80,120,200,0) 60%),
            var(--card);
    }
    .ugen-page > .section:has(.pullquote) > *{position:relative;z-index:1;}
    .ugen-page > .section:has(.pullquote) .section-title{
        margin-bottom:28px;
    }
    .ugen-page .pullquote{max-width:780px;margin:0 auto;}
    .ugen-page .pullquote-teams{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        gap:24px;
        font-size:18px;
    }
    .ugen-page .pullquote-winner{
        font-size:22px;text-align:right;
    }
    .ugen-page .pullquote-loser{
        font-size:18px;text-align:left;
    }
    .ugen-page .pullquote-score{
        font-size:clamp(40px,4vw,56px);
        letter-spacing:-0.03em;
        padding:0;
        background:linear-gradient(180deg, var(--text) 0%, rgba(243,246,251,0.6) 100%);
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent;color:transparent;
        text-shadow:0 0 28px rgba(255,181,71,0.18);
    }
    .ugen-page .pullquote-cap{
        margin-top:22px;font-size:13px;
        max-width:60ch;margin-left:auto;margin-right:auto;
    }

    /* ── Calibration: full-width ── */
    .ugen-page > .section:has(.calib-grid){
        grid-column:1 / -1;margin:0;
    }
    .ugen-page .calib-grid{gap:var(--space-4);}
    .ugen-page .calib{padding:22px 24px;gap:20px;}
    .ugen-page .calib-value{font-size:36px;}
    .ugen-page .calib-label{font-size:13px;}

    /* ── Footer ── */
    .ugen-page > .ugen-foot{
        margin-top:var(--space-4);
        padding-top:22px;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        text-align:left;
        font-size:10px;
    }
}

/* ────  Larger desktop polish (≥1280px) ──── */
@media (min-width:1280px){
    .ugen-page > .masthead{padding:8px 0 34px;}
    .ugen-page .headline{font-size:48px;}
    .ugen-page .weekbars{min-width:380px;}
    .ugen-page .weekbars-bar-wrap{height:84px;}
    .ugen-page .hero-stat-value{font-size:46px;}
    .ugen-page .pullquote-winner{font-size:24px;}
}

/* ────  Mobile polish (640-1023px) ──── */
@media (min-width:640px) and (max-width:1023px){
    .ugen-page .headline{font-size:26px;}
    .hero-stat-value{font-size:34px;}
}

/* "UGEN ·" prefix is redundant — the next chunk already reads
   "UGE 19 · …", so the word "UGEN" was being said twice. */
.ugen-page .masthead-eyebrow .ugen-eyebrow-pre{display:none;}

/* ──── Phone (< 640px) ──── */
@media (max-width:639px){
    /* Forudsigelser: 2-column grid was clipping the label text on
       narrow viewports ("samlet præcision" + the sub line couldn't
       fit beside a 28px value with the card's 16-18px padding). Stack
       to one column so each card has the full panel width. */
    .ugen-page .calib-grid{grid-template-columns:1fr;}
}