/* The tab bar over Holdings and Tracking, and the one-time fold-in notice.

   Drawn as two real tabs rather than a segmented control: these are two views
   of the same subject that a reader moves between repeatedly, and a segmented
   control reads as a filter on one thing rather than as two places. The count
   on each is the difference between "two tabs" and "two tabs, one of which is
   empty and I need not have looked." */

.pos-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--card-brd);
}
.pos-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    padding: 11px 16px;
    margin-bottom: -1px;
    cursor: pointer;
}
.pos-tabs button:hover { color: var(--txt); }
.pos-tabs button.on {
    color: var(--txt);
    border-bottom-color: var(--violet);
}
.pos-tabs .pt-i { font-size: 15px; }
/* The count. Present only when there is something to count — a "0" badge is a
   worse answer than no badge. */
.pos-tabs em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.pos-tabs em:empty { display: none; }
.pos-tabs button.on em { background: rgba(139, 92, 246, 0.22); color: #c4b5fd; }
.pos-tabs button:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

.pos-pane[hidden] { display: none; }

/* The fold-in notice. Said once, on the first load after the migration, and
   never again — so it is allowed to be prominent. */
.pos-migrated {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: rgba(139, 92, 246, 0.09);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}
.pos-migrated[hidden] { display: none; }
.pos-migrated .pm-i { font-size: 18px; flex: none; line-height: 1.3; }
.pos-migrated .pm-b { flex: 1; min-width: 0; }
.pos-migrated b { color: var(--txt); }
.pos-migrated .pm-x {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex: none;
}
.pos-migrated .pm-x:hover { color: var(--txt); }

/* The Tracking pane carries the Watchlist's own hero, which on its own page
   was the top of the document. Inside a tab it is one section among two, so it
   loses the page-sized spacing above it. */
#posPaneTrack .hero { padding-top: 0; }
#posPaneTrack .hero-title { font-size: clamp(1.5rem, 3.4vw, 2rem); }

/* A holding that came from the Watchlist has no real buy date — one was
   assumed so the tax panel has something to read. Flagged wherever it shows,
   because an assumed date that looks like a real one is the kind of wrong that
   compounds quietly through a long-term/short-term split. */
.pf-assumed-date {
    color: var(--warn, #e0a44e);
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

@media (max-width: 560px) {
    .pos-tabs button { padding: 10px 12px; font-size: 13.5px; }
    .pos-migrated { font-size: 12.5px; padding: 12px 13px; }
}