/* 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; }
    .usage-controls fieldset { grid-template-columns: 1fr 1fr; }
    .usage-refresh { width: 100%; }
    .usage-secondary-grid,
    .usage-agent-list { grid-template-columns: 1fr; }
    .usage-secondary-grid > :last-child { grid-column: auto; }
}

@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; }
}