/* ===========================================================================
   portfolio.css — portfolios (portfolio.js): the switcher, the portfolio bar
   it sits on (pfbar.js), the Portfolios dialog, Move to portfolio, and a
   shelf tile's tag.
   =========================================================================== */

.pfo-switch {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; max-width: 100%;
  border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650;
  color: var(--ink); background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  border: 1px solid var(--line); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
@media (hover: hover) { .pfo-switch:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } }
.pfo-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pfo-switch-ico { display: grid; place-items: center; color: var(--accent-text); }
.pfo-switch-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfo-switch-caret { display: grid; place-items: center; color: var(--ink-3); }
.ins-pf-note { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------------------ the portfolio bar
   pfbar.js: a row under the top bar on the pages that follow the portfolio —
   the switcher, then the portfolio's numbers. While it shows, every view is
   --pfbar-h shorter (their heights take it off). On a phone the numbers
   scroll sideways under a fade, and the switcher stays put. */
:root {
  --pfbar-h: 0px;
  /* The top bar's own colour (its glass over the page), and the bar's: a shade lighter, as a shelf under it. */
  --pfbar-from: color-mix(in srgb, var(--bg-2) 72%, var(--bg));
  --pfbar-bg: color-mix(in srgb, var(--bg-3) 50%, var(--bg-2));
  /* the shadows' colour: deep on the dark theme, a soft grey on the light one */
  --pfbar-shade: rgba(0, 0, 0, .55);
  --pfbar-shade-far: rgba(0, 0, 0, .5);
}
:root[data-theme="light"] {
  --pfbar-shade: rgba(20, 24, 32, .13);
  --pfbar-shade-far: rgba(20, 24, 32, .12);
}
body.has-pfbar { --pfbar-h: 48px; }
/* No hard line between the two: the top bar's edge goes, it casts a soft
   shadow onto the bar under it, and the bar takes over from its colour. */
body.has-pfbar > .topbar {
  border-bottom-color: transparent;
  box-shadow: var(--glass-edge), 0 5px 12px -7px var(--pfbar-shade);
}
.pfbar {
  /* Held just under the top bar (sticky, as it is): should the page itself ever be
     scrolled — iOS leaves it so after the keyboard has been up — the bar stays in
     sight rather than sliding up under the top bar. */
  position: sticky; top: calc(52px + var(--safe-top, 0px)); z-index: 30;
  height: var(--pfbar-h); flex: none;
  background: linear-gradient(180deg, var(--pfbar-from), var(--pfbar-bg) 30px, var(--pfbar-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  /* the two, lifted off the page together: a close shadow and a long soft one */
  box-shadow:
    0 2px 5px -2px var(--pfbar-shade),
    0 14px 30px -14px var(--pfbar-shade-far);
}
/* the faint violet cast the top bar rests on, carried down a little way */
.pfbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 3%, transparent), transparent 60%);
}
.pfbar[hidden] { display: none; }
/* Its left edge is the logo's (the top bar's padding and the brand's own offset). */
.pfbar-in {
  position: relative; height: 100%; padding: 0 16px;
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.pfbar-switch { flex: 0 1 auto; max-width: 260px; height: 32px; }
.pfbar-metrics {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.pfbar-metrics::-webkit-scrollbar { display: none; }
.pfbar-m {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  height: 36px; padding: 0 14px; border-radius: 10px;
  color: inherit; text-decoration: none; white-space: nowrap;
  position: relative;
}
/* a hairline between the numbers */
.pfbar-m + .pfbar-m::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line);
}
a.pfbar-m { transition: background var(--t-1) var(--ease-out); }
@media (hover: hover) { a.pfbar-m:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
a.pfbar-m:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pfbar-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pfbar-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pfbar-v i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.pfbar-v.is-gold { color: var(--gold-text); }
.pfbar-v.is-up { color: #22b865; }
.pfbar-v.is-down { color: var(--danger); }
.pfbar-v.is-flat { color: var(--ink-2); }
.pfbar-m.is-loading { width: 96px; }
.pfbar-skel { display: block; width: 80px; height: 22px; border-radius: 6px; }
@media (max-width: 640px) {
  body.has-pfbar { --pfbar-h: 46px; }
  /* the logo sits 10px in on a phone (the top bar's padding is 8px there) */
  .pfbar-in { gap: 6px; padding: 0 8px 0 10px; }
  .pfbar-switch { max-width: 44vw; height: 30px; padding: 0 10px 0 8px; font-size: 12.5px; }
  .pfbar-m { padding: 0 10px; }
  /* more numbers to the right: a fade says so */
  .pfbar-metrics { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media print { .pfbar { display: none; } }

.modal.pfo-modal { width: min(520px, calc(100vw - 24px)); }
.pfo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.pfo-row { display: flex; align-items: stretch; gap: 6px; }
.pfo-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  cursor: pointer; font: inherit; text-align: left; color: inherit; background: var(--bg); border: 1px solid var(--line);
}
.pfo-pick:disabled { cursor: default; opacity: .6; }
@media (hover: hover) { .pfo-pick:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.pfo-row.is-on .pfo-pick { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.pfo-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.pfo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pfo-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfo-text span { font-size: 12px; color: var(--ink-3); }
.pfo-value { flex: none; font-size: 13.5px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.pfo-star, .pfo-edit {
  flex: none; display: grid; place-items: center; width: 40px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line);
}
@media (hover: hover) { .pfo-star:hover, .pfo-edit:hover { color: var(--ink); } }
.pfo-star.is-on { color: var(--gold); }
.pfo-more-gap { flex: none; width: 40px; }
.pfo-foot { justify-content: space-between; }

/* A shelf tile's portfolio, in the portfolio's colour. */
.shv-pf-tag { box-shadow: inset 3px 0 0 var(--pf, var(--ink-3)); }

/* The Binders page: a portfolio's shelves, beside its binders' count. */
.lib-group-shelves { font-size: 12px; font-weight: 650; color: var(--ink-2); text-decoration: none; }
.lib-group-shelves:hover { color: var(--accent-text); text-decoration: underline; }