/* Paper portfolio overview (/paper) */
.visually-hidden {
    border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}

.ov { max-width: 1240px; }

.ov-hero { align-items: flex-end; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 28px; }
.ov-hero h1 { color: var(--paper-navy); font: 44px/1.08 Georgia, serif; letter-spacing: -.01em; margin: 0 0 12px; }
.ov-hero p:last-child { color: var(--paper-muted); font-size: 15px; line-height: 1.55; margin: 0; max-width: 620px; }
.ov-manage {
    align-items: center; border: 1px solid var(--paper-border); border-radius: 8px;
    background: var(--paper-panel); color: var(--paper-navy); display: inline-flex; flex-shrink: 0;
    font-size: 13px; font-weight: 700; gap: 8px; min-height: 40px; padding: 0 16px; text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.ov-manage:hover { border-color: var(--paper-blue); color: var(--paper-blue); }

/* Summary strip */
.ov-stats {
    background: var(--paper-panel); border: 1px solid var(--paper-border); border-radius: 12px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden;
}
.ov-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 22px; }
.ov-stat + .ov-stat { border-left: 1px solid var(--paper-border); }
.ov-stat-label { color: var(--paper-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ov-stat strong { color: var(--paper-navy); font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.ov-stat strong.positive { color: var(--paper-green); }
.ov-stat strong.negative { color: var(--paper-red); }
.ov-stat-of { color: var(--paper-muted); font-size: 18px; font-weight: 400; }
.ov-stat .ov-stat-date { font-size: 20px; padding: 3px 0 2px; }
.ov-stat-sub { color: var(--paper-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ov-stat-sub { color: var(--paper-blue); text-decoration: none; }
a.ov-stat-sub:hover { text-decoration: underline; }

/* Table card */
.ov-card { background: var(--paper-panel); border: 1px solid var(--paper-border); border-radius: 12px; overflow: hidden; }
.ov-toolbar { align-items: center; border-bottom: 1px solid var(--paper-border); display: flex; gap: 16px; padding: 14px 18px; }
.ov-toolbar p { color: var(--paper-muted); font-size: 12px; margin: 0 0 0 auto; }
.ov-search { flex: 0 1 340px; position: relative; }
.ov-search svg {
    fill: none; height: 16px; left: 12px; pointer-events: none; position: absolute; stroke: var(--paper-muted);
    stroke-linecap: round; stroke-width: 1.8; top: 50%; transform: translateY(-50%); width: 16px;
}
.ov-search input {
    background: var(--paper-bg); border: 1px solid transparent; border-radius: 8px; color: var(--paper-ink);
    font: inherit; font-size: 14px; padding: 9px 12px 9px 36px; width: 100%;
}
.ov-search input:focus { background: var(--paper-panel); border-color: var(--paper-blue); outline: none; }
.ov-mobile-sort { display: none; }

.ov-table-wrap { overflow-x: auto; }
.ov-table { border-collapse: collapse; font-size: 13px; min-width: 900px; width: 100%; }
.ov-table th {
    background: #f8f9f8; border-bottom: 1px solid var(--paper-border); color: var(--paper-muted);
    font-size: 10px; letter-spacing: .07em; padding: 10px 16px; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.ov-table th.ov-num-col { text-align: right; }
.ov-table th .table-sort { font-weight: 800; }
.ov-table th[aria-sort="ascending"] .table-sort,
.ov-table th[aria-sort="descending"] .table-sort { color: var(--paper-blue); }
.ov-table th[aria-sort="ascending"] .table-sort::after { content: "↑"; opacity: 1; }
.ov-table th[aria-sort="descending"] .table-sort::after { content: "↓"; opacity: 1; }
.ov-table th.ov-alpha-col { background: #eef3f7; }
.ov-table td { border-bottom: 1px solid #eceeee; padding: 16px; vertical-align: middle; }
.ov-table tbody tr:last-child td { border-bottom: 0; }
.ov-table tbody tr { cursor: pointer; transition: background-color .12s ease; }
.ov-table tbody tr:hover, .ov-table tbody tr:focus-within { background: var(--paper-blue-soft); }
.ov-table tbody tr[hidden] { display: none; }

.ov-rank-col { width: 44px; }
.ov-rank { color: #a3adb8; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; width: 44px; }
.ov-name a { color: var(--paper-navy); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.ov-name a:hover { color: var(--paper-blue); text-decoration: underline; }
.ov-meta { align-items: center; color: var(--paper-muted); display: flex; flex-wrap: wrap; font-size: 11px; gap: 4px 10px; margin-top: 5px; }
.ov-tag {
    background: #eef1f3; border-radius: 4px; color: #4f6174; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; padding: 2px 6px; text-transform: uppercase;
}
.ov-weight b { color: var(--paper-ink); font-weight: 600; }

.ov-num { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.ov-num.positive { color: var(--paper-green); }
.ov-num.negative { color: var(--paper-red); }
.ov-num small { color: var(--paper-muted); display: block; font-size: 10px; font-weight: 600; letter-spacing: .05em; margin-top: 3px; }
.ov-missing { color: #b5bdc5; font-weight: 400; }

/* Excess return: value plus a diverging bar centred on zero, scaled to the largest |value| on the page. */
.ov-alpha { background: rgb(36 103 167 / 3%); min-width: 170px; }
.ov-alpha-value { display: block; font-size: 16px; }
.ov-bar { background: #e9ecee; border-radius: 2px; display: block; height: 4px; margin: 7px 0 0 auto; position: relative; width: 120px; }
.ov-bar::after { background: #b8c1c9; content: ""; height: 10px; left: 50%; position: absolute; top: -3px; width: 1px; }
.ov-bar i { border-radius: 2px; height: 100%; position: absolute; top: 0; }
.positive .ov-bar i { background: var(--paper-green); left: 50%; }
.negative .ov-bar i { background: var(--paper-red); right: 50%; }

.ov-since { color: var(--paper-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ov-status { align-items: center; display: inline-flex; font-size: 11px; gap: 5px; margin-top: 4px; }
.ov-since .ov-status { display: flex; justify-content: flex-end; }
.ov-status::before { border-radius: 50%; content: ""; height: 6px; width: 6px; }
.ov-status-ok::before { background: var(--paper-green); }
.ov-status-warn::before { background: #c98a1b; }
.ov-status-bad::before { background: var(--paper-red); }

.ov-empty { color: var(--paper-muted); padding: 40px 24px; text-align: center; }
.ov-note { color: var(--paper-muted); font-size: 12px; line-height: 1.7; margin: 18px 2px 0; max-width: 900px; }
.ov-note strong { color: var(--paper-ink); }

@media (max-width: 900px) {
    .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-stat:nth-child(3) { border-left: 0; }
    .ov-stat:nth-child(n + 3) { border-top: 1px solid var(--paper-border); }
}

@media (max-width: 700px) {
    .ov.paper-main { padding: 28px 16px 24px; }
    .ov-hero { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
    .ov-hero h1 { font-size: 34px; }
    .ov-hero p:last-child { font-size: 14px; }
    .ov-manage { min-height: 44px; }
    .ov-stat { padding: 14px 16px; }
    .ov-stat strong { font-size: 22px; }

    .ov-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px; }
    .ov-search { flex: 1 1 100%; }
    .ov-search input, .ov-mobile-sort select { font-size: 16px; }
    .ov-toolbar p { margin: 0; order: 3; }
    .ov-mobile-sort { align-items: center; color: var(--paper-muted); display: flex; font-size: 12px; gap: 8px; margin-left: auto; order: 2; }
    .ov-mobile-sort select, .ov-mobile-sort button {
        background: var(--paper-panel); border: 1px solid var(--paper-border); border-radius: 8px;
        color: var(--paper-ink); min-height: 44px; padding: 8px;
    }
    .ov-mobile-sort button { cursor: pointer; font-size: 18px; min-width: 44px; }

    .ov-table, .ov-table tbody { display: block; min-width: 0; width: 100%; }
    .ov-table thead { display: none; }
    .ov-table tbody tr {
        border-bottom: 1px solid var(--paper-border); display: grid; gap: 14px 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 16px 16px 48px; position: relative;
    }
    .ov-table tbody tr:last-child { border-bottom: 0; }
    .ov-table td { border: 0; padding: 0; text-align: left; white-space: normal; }
    .ov-rank { left: 12px; position: absolute; top: 18px; width: 24px; }
    .ov-name { grid-column: 1 / -1; }
    .ov-name a { display: flex; font-size: 15px; min-height: 24px; }
    .ov-num { font-size: 16px; text-align: left; }
    .ov-alpha { background: none; min-width: 0; }
    .ov-alpha-value { font-size: 16px; }
    .ov-bar { margin: 6px 0 0; width: 100%; }
    .ov-table td[data-label]::before {
        color: var(--paper-muted); content: attr(data-label); display: block; font-size: 10px;
        font-weight: 700; letter-spacing: .05em; margin-bottom: 4px; text-transform: uppercase;
    }
    .ov-since { grid-column: 1 / -1; align-items: center; display: flex; gap: 10px; text-align: left; }
    .ov-since::before { margin: 0 !important; }
    .ov-since .ov-status { margin: 0 0 0 auto; }
}

@media (max-width: 700px) {
    .ov-hero { gap: 14px; }
    .ov-hero h1 { font-size: clamp(28px, 8vw, 34px); }
    .ov-stat { padding: 14px 12px; }
    .ov-stat-sub { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
    a.ov-stat-sub { min-height: 32px; display: inline-flex; align-items: center; }
    .ov-stat .ov-stat-date { font-size: clamp(16px, 4.4vw, 20px); }
    .ov-search { min-width: 0; }
    .ov-search input { min-height: 44px; }
    .ov-mobile-sort { margin-left: 0; min-width: 0; flex: 1 1 100%; }
    .ov-mobile-sort select { flex: 1; min-width: 0; }
    .ov-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 16px; }
    .ov-table td { min-width: 0; overflow-wrap: anywhere; }
    .ov-name { padding-left: 28px !important; }
    .ov-name a { align-items: center; min-height: 44px; }
    .ov-rank { top: 30px; }
    .ov-num { font-size: 18px; }
    .ov-alpha {
        background: var(--paper-blue-soft); border-radius: 8px;
        display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto;
        align-items: center; gap: 8px; padding: 12px !important;
    }
    .ov-alpha::before { margin: 0 !important; }
    .ov-alpha-value { font-size: 20px; }
    .ov-alpha .ov-bar { grid-column: 1 / -1; margin: 2px 0; }
    .ov-since { flex-wrap: wrap; gap: 6px 8px; }
}
