/* ap-portal.css — unified portal glue: the paper-book selector, the in-person
   meeting switch + small light-theme tweaks. Loaded after styles.css and the
   portal's inline <style>; before sp-portal.css so the legacy panels still get
   their styles. */

/* ---- Paper-book selector (top of the Portfolio tab) ----
   The desk runs two live Alpaca paper books. Both cards are always visible; the
   one relevant to this analyst is rendered first and marked "Yours". Clicking a
   card re-points the display engine below it. */
.ap-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 1rem; }
.ap-book {
  text-align: left; border: 1.5px solid #e3e7ee; border-radius: 14px; padding: 14px 16px;
  background: #fff; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s;
}
.ap-book:hover { border-color: #c9d0dd; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ap-book.on { border-color: #ae1f19; box-shadow: 0 4px 16px rgba(174,31,25,.12); }
.ap-book__top { display: flex; align-items: center; gap: 8px; }
.ap-book__l { font-weight: 800; font-size: 0.98rem; color: #0b1f3a; }
.ap-book__mine {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #ae1f19; background: #fdeceb; border-radius: 9999px; padding: 2px 7px;
}
.ap-book__b { font-size: 0.79rem; color: #6b7280; margin-top: 3px; line-height: 1.45; }
.ap-book__f { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ap-book__eq { font-weight: 800; font-size: 1.12rem; color: #111827; font-variant-numeric: tabular-nums; }
.ap-book__d { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-book__d.up { color: #166534; }
.ap-book__d.down { color: #b91c1c; }
.ap-book__n { font-size: 0.74rem; color: #9ca3af; }

/* ---- In-person meeting switch (Calendar tab) ---- */
.ap-ip-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.8rem; color: #374151; user-select: none; }
.ap-ip-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap-ip-track {
  width: 34px; height: 19px; border-radius: 9999px; background: #d7dae1;
  position: relative; transition: background .15s; flex: none;
}
.ap-ip-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.ap-ip-switch input:checked + .ap-ip-track { background: #ae1f19; }
.ap-ip-switch input:checked + .ap-ip-track::after { transform: translateX(15px); }
.ap-ip-switch input:focus-visible + .ap-ip-track { outline: 2px solid #ae1f19; outline-offset: 2px; }

/* ---- One portal, one desk ----
   The legacy online-only handler cards + the retired curriculum stay hidden; the
   trade board is now a normal desk feature and has been moved off this class. */
.ap-online-only { display: none !important; }
.ao-panel[data-panel="proposals"] > .ao-card:not(.ap-feat),
.ao-panel[data-panel="decisions"] > .ao-card:not(.ap-feat),
.ao-panel[data-panel="announcements"] > .ao-card:not(.ap-feat),
.ao-panel[data-panel="publications"] > .ao-card:not(.ap-feat),
.ao-panel[data-panel="resources"] > .ao-card:not(.ap-feat) { display: none; }
.ap-feat { margin-bottom: 1.25rem; }
/* Retired tabs on both tracks: sector draft + old reports. (Journey is back.) */
[data-tab="draft"], [data-tab="reports"] { display: none; }

/* ---- Performance chart selector buttons ---- */
.ap-seg-row { display: inline-flex; background: #f1f1f3; border: 1px solid #e6e6ea; border-radius: 9999px; padding: 2px; gap: 2px; }
.ap-seg-btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 700; color: #6b7280; padding: 4px 11px; border-radius: 9999px; transition: background .12s, color .12s; }
.ap-seg-btn:hover { color: #111827; }
.ap-seg-btn.active { background: #fff; color: #ae1f19; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ---- Public shop-window: portfolio performance + composition only ---- */
.ap-public-cta { display: none; }
body.ap-public .ao-side,
body.ap-public #ap-books,
body.ap-public #ap-ro-banner,
body.ap-public .ap-online-only,
body.ap-public .ap-inperson-only,
body.ap-public #ap-trade,
body.ap-public #aop-summary, body.ap-public #aop-summary-foot, body.ap-public #aop-proposals { display: none !important; }
body.ap-public .ao-shell { grid-template-columns: 1fr; max-width: 1040px; }
body.ap-public .ap-public-cta { display: block; }
body.ap-public .ap-public-hide { display: none !important; }

/* ---- Distinct feature blocks (were white-on-white inside the white card) ---- */
.ap-feat .aop-card,
.ap-feat .ao-row,
.ap-feat .ao-mem {
  background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 13px;
  padding: 13px 15px; margin-bottom: 11px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.ap-feat .ao-row { display: flex; align-items: center; gap: 12px; }
.ap-feat .ao-row:last-child, .ap-feat .aop-card:last-child, .ap-feat .ao-mem:last-child { margin-bottom: 0; }
.ap-feat .ao-grid-cards .ao-mem, .ap-feat .ao-grid-cards .ao-mini { margin-bottom: 0; }
/* Decisions: breathing room between the "+ New decision" header/button and the
   card list, plus a touch more separation between the decision cards. */
#ap-decisions { margin-top: 16px; }
#ap-decisions .aop-card { margin-bottom: 14px; }
#ap-decisions .aop-card:last-child { margin-bottom: 0; }
/* Past meetings: muted grey */
.ap-feat .ao-row.ap-past { background: #f0f1f3; opacity: 0.7; }
.ap-feat .ao-row.ap-past .ao-row__t { color: #6b7280; }

/* ---- Up-next timeline strip (top of portal) ---- */
.ap-timeline { margin: 0 0 1.25rem; }
.ap-timeline__lbl { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin: 0 0 7px; }
.ap-timeline__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ap-tl-item { flex: 0 0 auto; min-width: 158px; max-width: 210px; background: #fff; border: 1px solid #e6e8ec; border-left: 3px solid #ae1f19; border-radius: 12px; padding: 10px 13px; box-shadow: 0 1px 3px rgba(16,24,40,0.04); transition: box-shadow .15s, transform .12s; }
.ap-tl-item:hover { box-shadow: 0 6px 16px rgba(16,24,40,0.09); transform: translateY(-1px); }
.ap-tl-item.deadline { border-left-color: #ea580c; }
.ap-tl-item.programme { border-left-color: #0d9488; }
.ap-tl-item.past { opacity: 0.55; }
.ap-tl-when { font-size: 0.72rem; font-weight: 800; color: #ae1f19; }
.ap-tl-item.deadline .ap-tl-when { color: #ea580c; }
.ap-tl-item.programme .ap-tl-when { color: #0d9488; }
.ap-tl-title { font-size: 0.85rem; font-weight: 700; color: #111827; margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tl-kind { font-size: 0.72rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Wide modal (report preview) ---- */
.aop-modal--wide .aop-modal__box { max-width: 840px; width: 94vw; }
/* Report modal: description (+ title) on the left, the PDF on the right. */
.aop-modal--report .aop-modal__box { max-width: 1120px; width: 95vw; }
.pd-2col { display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.2fr; gap: 18px; align-items: stretch; }
@media (max-width: 820px) { .pd-2col { grid-template-columns: 1fr; } }
.pd-right { display: flex; }
.pd-right iframe { width: 100%; min-height: 64vh; border: 1px solid #e3e6ea; border-radius: 10px; background: #fff; }

/* ---- Equity proposal strip (auto-execute metrics + mini chart) ---- */
.ap-eq-strip { margin-top: 9px; padding: 9px 11px; border: 1px solid #e3e6ea; border-radius: 11px; background: #fcfcfd; }
.ap-eq-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-eq-chip { font-size: 0.72rem; font-weight: 800; padding: 2px 9px; border-radius: 9999px; border: 1px solid #d7dbe0; color: #374151; background: #fff; }

/* ---- Join-the-program gate lists ---- */
.ao-gate-li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 0.92rem; color: #374151; line-height: 1.5; }
.ao-gate-ic { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; background: #fef2f2; color: #ae1f19; margin-top: 1px; }

/* ---- Calendar section header (Missed deadlines) ---- */
.ap-cal-head { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin: 1.3rem 0 0.85rem; padding-top: 10px; border-top: 1px solid #e3e6ea; }
.ap-cal-head--missed { color: #ea580c; }

/* ---- Calendar "Past events" separator (click to expand) ---- */
.ap-cal-sep { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; margin: 1.2rem 0 0.9rem; padding: 9px 2px; background: none; border: 0; border-top: 1px solid #e3e6ea; font: inherit; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; cursor: pointer; }
.ap-cal-sep:hover { color: #ae1f19; }
.ap-cal-sep__act { font-weight: 800; color: #ae1f19; letter-spacing: 0.03em; }

/* ---- Calendar: meetings (red) vs target deadlines (orange) ---- */
.ap-feat .ao-row.ap-cal-meeting { border-left: 3px solid #ae1f19; }
.ap-feat .aop-card.ap-cal-target { border-left: 3px solid #ea580c; }

/* ---- Foldable target / timeline cards ---- */
.ap-fold__head { display: flex; align-items: center; gap: 9px; }
.ap-fold__chev { transition: transform .18s; color: #9ca3af; }
.ap-fold--open .ap-fold__chev { transform: rotate(180deg); }
.ap-fold .ap-fold__head:hover .aop-ticker { color: #ae1f19; }

/* Long tab labels (Announcements & decisions / Meetings & targets) wrap inside
   the pill instead of overflowing it. Needs #ao-tabs to beat the inline nowrap. */
#ao-tabs .ao-tab { white-space: normal; line-height: 1.2; }

/* ---- Unseen-update badge dot on tabs ---- */
.ao-tab--badge { position: relative; }
.ao-tab--badge::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.16);
}

/* ---- Sector-draft banner on the Members page (selection window only) ---- */
.ao-draft-banner {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, #fff7ed, #fffdfa); border: 1px solid #fed7aa;
  border-radius: 14px; padding: 14px 18px; margin-bottom: 1.1rem; font: inherit; font-size: 0.92rem; color: #7c2d12;
  transition: box-shadow .15s, transform .12s, border-color .15s;
}
.ao-draft-banner:hover { box-shadow: 0 6px 18px rgba(234,88,12,0.14); transform: translateY(-1px); border-color: #fdba74; }
.ao-draft-banner__dot { width: 9px; height: 9px; border-radius: 50%; background: #ea580c; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(234,88,12,0.16); }
.ao-draft-banner__cta { margin-left: auto; font-weight: 800; color: #c2410c; white-space: nowrap; }

/* ---- Floating "place trade" button (bottom-right) ---- */
.ap-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #ae1f19, #c42d27); color: #fff;
  box-shadow: 0 8px 22px rgba(174,31,25,0.42);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.ap-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(174,31,25,0.52); }
body.ap-public .ap-fab, body.sp-view-only .ap-fab { display: none; }

/* ---- Hover effects (portal felt too flat) ---- */
.ap-feat .aop-card, .ap-feat .ao-row, .ap-feat .ao-mem { transition: box-shadow .15s, border-color .15s, transform .12s, background .15s; }
.ap-feat .aop-card:hover, .ap-feat .ao-mem:hover { box-shadow: 0 5px 16px rgba(16,24,40,0.1); border-color: #cfd4da; transform: translateY(-1px); }
.ap-feat .ao-row:hover { background: #eceff3; border-color: #cfd4da; }
.ao-tab { transition: background .12s, color .12s, box-shadow .12s; }
.ao-tab:hover:not(.active) { background: #f3f4f6; color: #111827; }
.ao-btn { transition: transform .12s, box-shadow .15s, background .15s, filter .15s; }
.ao-btn:hover { filter: brightness(0.98); }
.ao-btn--primary:hover, .ao-btn--red:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(174,31,25,0.28); }
.ao-btn--ghost:hover { background: #f3f4f6; border-color: #cfd4da; }
.aop-vbtn { transition: background .12s, border-color .12s, color .12s; }
.aop-vbtn:hover:not(:disabled) { border-color: #ae1f19; background: #fef5f4; }
.pf-card, .ao-card { transition: box-shadow .18s, border-color .15s; }
.pf-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.07); }
.aop-table tbody tr { transition: background .1s; }
.ao-mem__pic, .ao-seat { transition: transform .12s; }
.ao-bucket { transition: box-shadow .15s, border-color .15s, transform .12s; }
.ao-bucket:hover { box-shadow: 0 6px 18px rgba(16,24,40,0.08); transform: translateY(-1px); }

/* View-only (Stage-1) banner — clean version overriding the legacy dark one. */
body.sp-view-only .sp-view-only-banner,
.ap-ro-banner {
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
  border-radius: 12px; padding: 10px 14px; font-size: 0.85rem; font-weight: 600;
  text-align: center; margin: 0 auto 1rem; max-width: 1240px;
}

/* ---- Mobile (phones / small tablets) ---- */
@media (max-width: 760px) {
  /* Up-next timeline: tighter cards, still swipeable horizontally */
  .ap-timeline__row { gap: 8px; }
  .ap-tl-item { min-width: 142px; max-width: 200px; padding: 9px 11px; }
  /* Performance selectors never overflow their row; books stack to one column */
  .ap-seg-row { flex-wrap: wrap; }
  .ap-books { grid-template-columns: 1fr; gap: 10px; }
  /* Floating "place trade" button: smaller and clear of the iOS home indicator */
  .ap-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  /* Banners hug the screen edges instead of the desktop max-width centring */
  .ap-ro-banner,
  body.sp-view-only .sp-view-only-banner { margin-left: 8px; margin-right: 8px; }
  /* Calendar separators / section headers a touch tighter */
  .ap-cal-sep { margin: 1rem 0 0.75rem; }
  .ap-cal-head { margin-top: 1rem; }
}

/* ---- Mobile: keep the desk readable on a phone --------------------------
   The portfolio panel is data-dense (an 8-column holdings table, a chart, the
   allocation rail). None of it may widen the DOCUMENT — wide content scrolls
   inside its own card instead, and the type/padding tighten so most of it fits
   without scrolling at all. Applies to both the member portal and the public
   shop-window, which is the same #ao-portal node hoisted into the program page. */
@media (max-width: 700px) {
  /* Any table gets a horizontal scroll container of its own. */
  #ao-portal .aop-table-wrap,
  #ao-portal div:has(> table),
  #ao-portal .ao-card:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #ao-portal table { font-size: 0.76rem; }
  #ao-portal .aop-table th { padding: 5px 6px; font-size: 0.62rem; letter-spacing: 0.02em; }
  #ao-portal .aop-table td { padding: 7px 6px; }

  /* Cards and shell: reclaim the side gutters. */
  #ao-portal.ao-shell { padding: 0 12px; margin-top: 0.75rem; }
  #ao-portal .ao-card { padding: 1rem 0.9rem; border-radius: 14px; }

  /* Stat tiles stack rather than squeeze into unreadable columns. */
  #ao-portal .aop-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  #ao-portal .aop-stat__v { font-size: 1.05rem; }

  /* Charts are canvas-driven; let them size to the card, never past it. */
  #ao-portal canvas { max-width: 100%; height: auto; }
}

/* The hoisted public view sits inside the program page's own gutters, so it
   must not add a second set. */
@media (max-width: 700px) {
  #pg-book-slot #ao-portal.ao-shell { padding: 0; }
}

/* ---- Holdings on a phone -------------------------------------------------
   Eight columns cannot fit 340px, and a table you have to swipe is a table
   people do not read. Below 700px the three widest, least-glanceable columns
   (Qty, Avg entry, Price) drop out, leaving Symbol, P&L, P&L% , Value and
   Weight, which fits outright. Scoped with :has() to the holdings table alone
   so the roster and risk tables that share .aop-table are untouched. The full
   set is still there on a wider screen or in landscape. */
@media (max-width: 700px) {
  #ao-portal .aop-table:has(#positionsTableBody) th:nth-child(4),
  #ao-portal .aop-table:has(#positionsTableBody) td:nth-child(4),
  #ao-portal .aop-table:has(#positionsTableBody) th:nth-child(5),
  #ao-portal .aop-table:has(#positionsTableBody) td:nth-child(5),
  #ao-portal .aop-table:has(#positionsTableBody) th:nth-child(6),
  #ao-portal .aop-table:has(#positionsTableBody) td:nth-child(6) { display: none; }
  /* the loading/empty row spans the visible columns instead of overflowing */
  #ao-portal .aop-table:has(#positionsTableBody) td[colspan] { display: table-cell; }
}