/* Portfolio — one company's book.  Prefix .po-* */

/* ---- brand picker ---- */
.po-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.po-brand {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    padding: .85rem 1rem; border-radius: var(--radius); text-align: left;
    background: var(--surface); border: 1px solid var(--border);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.po-brand:hover { border-color: #C3D2E8; box-shadow: var(--shadow); transform: translateY(-1px); }
.po-brand.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,107,255,.16); }
.po-brand-logo { display: block; margin-bottom: .5rem; }
.po-brand-logo .bchip img { max-height: 22px; width: auto; display: block; }
.po-brand-n { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.po-brand-sub { font-size: .7rem; color: var(--text-dim); }
.po-brand-sys {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-dim); margin-top: .35rem;
    padding: .08rem .35rem; border-radius: 4px; background: var(--surface-3);
}
.po-brand.on .po-brand-sys { background: #EDF3FF; color: #1B4FA8; }

/* ---- list ---- */
.po-head, .po-row {
    display: grid; grid-template-columns: minmax(200px,1fr) 190px 170px 108px 120px 120px;
    gap: .7rem; align-items: center; padding: .5rem 1rem;
}
.po-head {
    background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: .64rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-dim);
}
.po-list {
    border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface); overflow: hidden;
}
.po-row { border-top: 1px solid var(--border-soft); cursor: pointer; transition: background .12s ease; }
.po-row:first-child { border-top: 0; }
.po-row:hover { background: var(--surface-3); }

.po-name b { font-size: .85rem; font-weight: 650; color: var(--text); }
.po-name, .po-loc, .po-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-loc { font-size: .78rem; color: var(--text-soft); }
.po-loc .muted, .po-val .muted { color: var(--text-dim); }
.po-src code {
    font-size: .68rem; background: var(--surface-2); color: var(--text-soft);
    padding: .1rem .34rem; border-radius: 4px; border: 1px solid var(--border-soft);
}
.po-st {
    font-size: .64rem; font-weight: 700; padding: .12rem .4rem; border-radius: 5px;
    text-transform: capitalize;
}
.po-st.on  { background: #EDF9F1; color: #1E7A45; border: 1px solid #C6E6D2; }
.po-st.off { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-soft); }

.po-also { display: flex; gap: .25rem; flex-wrap: wrap; }
.po-also-b {
    display: inline-flex; align-items: center; height: 22px; padding: .1rem .35rem;
    border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border-soft);
    cursor: help;
}
.po-also-b .bchip img { max-height: 12px; width: auto; display: block; }
.po-alone { color: var(--text-dim); font-size: .75rem; }
.po-val { text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--text-soft); }

@media (max-width: 1399.98px) {
    .po-head, .po-row { grid-template-columns: minmax(180px,1fr) 160px 100px 110px 110px; }
    .po-head > div:nth-child(3), .po-row > .po-src { display: none; }
}
@media (max-width: 1099.98px) {
    .po-head, .po-row { grid-template-columns: minmax(150px,1fr) 110px 110px; }
    .po-head > div:nth-child(2), .po-row > .po-loc,
    .po-head > div:nth-child(4), .po-row > .po-status { display: none; }
}

/* The sidebar brand rows now navigate, so they need to look like it. */
a.brand-row { text-decoration: none; border-radius: 7px; transition: background .13s ease; }
a.brand-row:hover { background: rgba(255,255,255,.07); }