/* Project Portfolio is an application surface, not a report pasted into the Session UI. All
   selectors stay under .usage-analytics so the dashboard can evolve without moving the bar. */
#usage-open:focus-visible,
.usage-analytics button:focus-visible,
.usage-analytics input:focus-visible,
.usage-analytics select:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.usage-analytics {
    position: fixed;
    inset: var(--head-h, 52px) 0 0;
    z-index: 35;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(16px, 3vw, 34px);
    color: var(--ink);
    background:
        radial-gradient(circle at 8% -10%, rgba(217, 119, 87, .15), transparent 31rem),
        radial-gradient(circle at 92% 12%, rgba(104, 157, 155, .08), transparent 28rem),
        var(--bg);
}

.usage-shell { width: min(1440px, 100%); margin: 0 auto; padding-bottom: 48px; }
.usage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.usage-heading h1 { margin: 2px 0 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.02; letter-spacing: -.04em; }
.usage-heading > div > p:last-child { max-width: 620px; margin: 10px 0 0; color: var(--dim); font-size: 15px; }
.usage-eyebrow { margin: 0; color: var(--accent); font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.usage-close,
.usage-refresh,
.usage-more,
.usage-export button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(22, 22, 26, .84);
    color: var(--ink);
}
.usage-close:hover,
.usage-more:hover,
.usage-export button:hover { border-color: var(--accent-ed); background: var(--card-hi); }

.usage-tabs { display: flex; gap: 4px; width: fit-content; margin: 24px 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 14, 17, .72); }
.usage-tabs button { min-height: 36px; border-radius: 8px; padding: 7px 14px; color: var(--dim); }
.usage-tabs button[aria-selected="true"] { background: var(--card-hi); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }

.usage-controls {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(22, 22, 26, .82);
    box-shadow: 0 18px 60px rgba(0,0,0,.16);
}
.usage-controls fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.usage-controls label { display: grid; gap: 5px; min-width: 0; color: var(--dim); font-size: 12px; }
.usage-controls input,
.usage-controls select { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #303038; border-radius: 9px; padding: 7px 9px; background: var(--bg); color: var(--ink); }
.usage-refresh { border-color: transparent; background: var(--accent); color: #1a100d; font-weight: 750; }
.usage-refresh:hover { filter: brightness(1.07); }

.usage-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; min-height: 20px; margin: 9px 2px 0; color: var(--faint); font-size: 11px; }
.usage-meta [data-state="stale"] { color: #d9ad64; }
.usage-status { min-height: 20px; margin: 5px 2px; color: var(--dim); font-size: 12px; }
.usage-warning-banner { margin: 12px 0; border: 1px solid rgba(176,138,74,.65); border-radius: 10px; padding: 10px 12px; background: rgba(176,138,74,.1); color: #e4c58e; }
.usage-analytics[data-stale="true"] .usage-kpis,
.usage-analytics[data-stale="true"] .usage-portfolio-layout,
.usage-analytics[data-stale="true"] .usage-insight-panel,
.usage-analytics[data-stale="true"] .usage-secondary-grid { opacity: .68; }
.usage-score-note { margin: 14px 0 0; border-left: 2px solid var(--accent); padding: 3px 0 3px 10px; color: var(--dim); font-size: 12px; }

.usage-kpis { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.usage-kpi { min-width: 0; min-height: 116px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: linear-gradient(145deg, rgba(28,28,34,.94), rgba(20,20,24,.94)); }
.usage-kpi-primary { border-color: var(--accent-ed); background: linear-gradient(145deg, rgba(217,119,87,.16), rgba(24,20,20,.95)); }
.usage-kpi span { display: block; color: var(--dim); font-size: 12px; }
.usage-kpi strong { display: block; margin-top: 9px; overflow-wrap: anywhere; font: 680 clamp(24px, 3vw, 36px)/1 var(--mono); letter-spacing: -.05em; }
.usage-kpi small { display: block; margin-top: 9px; color: var(--faint); line-height: 1.35; }

.usage-panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: rgba(22,22,26,.88); box-shadow: 0 18px 60px rgba(0,0,0,.12); }
.usage-panel h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.02em; }
.usage-panel h3 { margin: 0 0 8px; color: var(--dim); font-size: 12px; font-weight: 650; }
.usage-summary { margin: 7px 0 12px; color: var(--dim); font-size: 12px; }
.usage-section-head,
.usage-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.usage-section-stat { border-radius: 999px; padding: 5px 9px; background: var(--card-hi); color: var(--dim); font: 600 11px/1 var(--mono); }

.usage-portfolio-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); gap: 12px; align-items: start; }
.usage-project-detail { position: sticky; top: 14px; max-height: calc(100dvh - 90px); overflow: auto; }
.usage-project-detail[hidden] { display: none; }
.usage-detail-block { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }

.usage-table-wrap { max-width: 100%; overflow-x: auto; }
.usage-analytics table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.usage-analytics caption { padding: 0; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.usage-analytics th,
.usage-analytics td { border-bottom: 1px solid var(--line); padding: 12px 9px; text-align: right; vertical-align: middle; }
.usage-analytics th { color: var(--dim); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.usage-analytics th:first-child,
.usage-analytics td:first-child { text-align: left; }
.usage-analytics tbody tr:last-child td { border-bottom: 0; }
.usage-project-table tbody tr { transition: background .15s var(--ease); }
.usage-project-table tbody tr:hover,
.usage-project-table tbody tr[data-selected="true"] { background: rgba(255,255,255,.025); }
.usage-project-name { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; min-width: 150px; }
.usage-project-rank { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; color: var(--faint); font: 650 11px var(--mono); }
.usage-project-name strong { overflow-wrap: anywhere; font-size: 13px; }
.usage-value { font-family: var(--mono); }
.usage-value-primary { color: #f0b094; font-weight: 720; }
.usage-subvalue { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; white-space: normal; }
.usage-open-project,
.usage-row-open { min-width: 34px; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); }
.usage-open-project:hover,
.usage-row-open:hover { border-color: var(--accent-ed); background: var(--accent-in); }

.usage-mini-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(22px, 1fr)); align-items: end; gap: 5px; min-height: 92px; padding-top: 14px; }
.usage-mini-column { display: grid; grid-template-rows: 1fr auto; gap: 5px; height: 78px; min-width: 0; }
.usage-mini-bar { align-self: end; width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#e99a79, var(--accent)); }
.usage-mini-column span { overflow: hidden; color: var(--faint); font: 9px/1 var(--mono); text-align: center; text-overflow: ellipsis; }
.usage-mix-list { display: grid; gap: 7px; }
.usage-mix-row { display: grid; grid-template-columns: minmax(76px, 1fr) 2fr auto; gap: 8px; align-items: center; color: var(--dim); font-size: 11px; }
.usage-mix-track { height: 6px; overflow: hidden; border-radius: 99px; background: #292930; }
.usage-mix-track i { display: block; height: 100%; border-radius: inherit; background: #6e9694; }
.usage-lineage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.usage-lineage-grid div { border: 1px solid var(--line); border-radius: 9px; padding: 8px; }
.usage-lineage-grid span { display: block; color: var(--faint); font-size: 10px; }
.usage-lineage-grid strong { display: block; margin-top: 4px; font: 650 16px var(--mono); }
.usage-recent-list,
.usage-agent-list { margin: 0; padding: 0; list-style: none; }
.usage-recent-list li { display: grid; grid-template-columns: 1fr auto; gap: 9px; border-top: 1px solid var(--line); padding: 9px 0; }
.usage-recent-list li:first-child { border-top: 0; }
.usage-recent-list span { min-width: 0; overflow-wrap: anywhere; color: var(--dim); font-size: 11px; }
.usage-recent-list strong { color: var(--ink); font: 600 11px var(--mono); }

.usage-insight-panel { margin-top: 12px; }
.usage-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.usage-insight { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: rgba(14,14,17,.45); }
.usage-insight span { color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.usage-insight strong { display: block; margin-top: 5px; font-size: 13px; }
.usage-insight p { margin: 7px 0 0; overflow-wrap: anywhere; color: var(--dim); font-size: 11px; }
.usage-empty { border: 1px dashed var(--line); border-radius: 11px; padding: 14px; color: var(--faint); font-size: 12px; }

.usage-secondary-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .7fr; gap: 12px; align-items: start; margin-top: 12px; }
.usage-unknown-note { min-height: 18px; margin: 10px 0 0; border-left: 2px solid var(--warn); padding-left: 8px; color: var(--dim); font-size: 11px; }
.usage-coverage-list { display: grid; gap: 8px; margin: 12px 0 16px; padding: 0; list-style: none; }
.usage-coverage-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 7px; color: var(--dim); font-size: 11px; }
.usage-coverage-list strong { color: var(--ink); font-family: var(--mono); }
.usage-warning { border-left: 2px solid var(--warn); padding-left: 7px; }
.usage-export { display: flex; flex-wrap: wrap; gap: 7px; }

.usage-agent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.usage-agent-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(14,14,17,.4); }
.usage-agent-card h3 { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; }
.usage-agent-card p { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--dim); font-size: 11px; }
.usage-agent-metrics { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 9px; color: var(--faint); font: 10px var(--mono); }

.usage-detail { width: min(520px, calc(100% - 24px)); border: 1px solid #3b3b44; border-radius: 16px; padding: 18px; background: var(--card); color: var(--ink); }
.usage-detail::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.usage-detail .usage-close { float: right; }
.usage-detail dl { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 8px 12px; margin: 20px 0 0; }
.usage-detail dt { color: var(--faint); }
.usage-detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 1280px) {
    .usage-portfolio-layout { grid-template-columns: 1fr; }
    .usage-project-detail { position: static; max-height: none; }

    /* Ranked Projects become labelled cards before any primary Open action can disappear behind
       horizontal scrolling. Explicit ARIA roles in the markup/module preserve table, row-group,
       row, column-header and cell semantics after these display changes. */
    .usage-project-table,
    .usage-project-table tbody,
    .usage-project-table tr,
    .usage-project-table td { display: block; width: 100%; }
    .usage-project-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .usage-project-table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 8px; }
    .usage-project-table tr { border: 1px solid var(--line); border-radius: 11px; padding: 9px; background: rgba(14,14,17,.38); }
    .usage-project-table td { display: grid; grid-template-columns: minmax(116px, .9fr) minmax(0,1.1fr); gap: 8px; border: 0; padding: 6px 4px; text-align: right; white-space: normal; }
    .usage-project-table td::before { content: attr(data-label); color: var(--dim); font-size: 12px; text-align: left; text-transform: uppercase; }
    .usage-project-table td:first-child { display: block; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
    .usage-project-table td:first-child::before { display: none; }
    .usage-project-table td:last-child { display: block; padding-top: 8px; }
    .usage-project-table td:last-child::before { display: none; }
    .usage-open-project { width: 100%; }
    .usage-project-name { min-width: 0; }
}

@media (max-width: 1040px) {
    .usage-kpis { grid-template-columns: 1fr 1fr; }
    .usage-secondary-grid { grid-template-columns: 1fr 1fr; }
    .usage-secondary-grid > :last-child { grid-column: 1 / -1; }
    .usage-insights { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .usage-analytics { padding: 14px; }
    .usage-heading { align-items: center; }
    .usage-heading > div > p:last-child { display: none; }
    .usage-controls { grid-template-columns: 1fr; }
    /* Mobile Safari's date control keeps an intrinsic width wider than half this card. Stack the
       controls at the phone breakpoint so neither field can escape its containing panel. */
    .usage-controls fieldset { grid-template-columns: 1fr; }
    .usage-refresh { width: 100%; }
    .usage-secondary-grid,
    .usage-agent-list { grid-template-columns: 1fr; }
    .usage-secondary-grid > :last-child { grid-column: auto; }

    /* One Project card at a time keeps the selected detail directly below the carousel instead
       of below every Project in the range. Touch scrolling remains native and keyboard users
       still reach the Open button in ordinary DOM order. */
    .usage-projects .usage-table-wrap { overflow-x: visible; }
    .usage-project-table tbody {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 2px 2px 8px;
    }
    .usage-project-table tbody::-webkit-scrollbar { display: none; }
    .usage-project-table tr {
        flex: 0 0 calc(100% - 16px);
        width: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media (max-width: 390px) {
    .usage-analytics { padding: 10px; }
    .usage-shell { padding-bottom: calc(28px + var(--indicator)); }
    .usage-heading h1 { font-size: 26px; }
    .usage-close { min-width: 70px; padding-inline: 9px; }
    .usage-tabs { width: 100%; }
    .usage-tabs button { flex: 1; min-width: 0; padding-inline: 8px; }
    .usage-controls { padding: 10px; }
    .usage-controls fieldset { grid-template-columns: 1fr; }
    .usage-meta { display: grid; }
    .usage-kpis { grid-template-columns: 1fr 1fr; gap: 7px; }
    .usage-kpi { min-height: 104px; padding: 12px; }
    .usage-kpi strong { font-size: 22px; }
    .usage-panel { padding: 13px; border-radius: 13px; }
    .usage-insights { grid-template-columns: 1fr; }

    .usage-secondary-grid table,
    .usage-secondary-grid tbody,
    .usage-secondary-grid tr,
    .usage-secondary-grid td { display: block; width: 100%; }
    .usage-secondary-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .usage-secondary-grid tbody { display: grid; gap: 7px; }
    .usage-secondary-grid tr { border: 1px solid var(--line); border-radius: 10px; padding: 7px; background: rgba(14,14,17,.32); }
    .usage-secondary-grid td { display: grid; grid-template-columns: minmax(92px,.9fr) minmax(0,1.1fr); gap: 8px; border: 0; padding: 5px 3px; text-align: right; white-space: normal; }
    .usage-secondary-grid td::before { content: attr(data-label); color: var(--dim); font-size: 12px; text-align: left; text-transform: uppercase; }
    .usage-lineage-grid { grid-template-columns: 1fr 1fr; }
    .usage-detail dl { grid-template-columns: 1fr; gap: 2px; }
    .usage-detail dd { margin-bottom: 8px; }
}

@media (max-width: 320px) {
    .usage-analytics { padding: 8px; }
    .usage-heading h1 { font-size: 23px; }
    .usage-eyebrow { letter-spacing: .08em; }
    .usage-kpis { grid-template-columns: 1fr; }
    .usage-kpi { min-height: 94px; }
    .usage-section-head { display: block; }
    .usage-section-stat { display: inline-block; margin-top: 7px; }
    .usage-mix-row { grid-template-columns: 70px 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    .usage-analytics * { scroll-behavior: auto !important; transition: none !important; }
}