/* ap-portal.css — unified portal glue: the In-person/Online track toggle
   + 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. */

/* ---- Track toggle (sits in the portal header) ---- */
/* Track toggle sits at the top of the left sidebar card, full-width. */
.ap-track-bar { display: flex; margin: 0 0 12px; padding: 0; max-width: none; }
.ap-track-bar .ap-toggle { width: 100%; }
.ap-track-bar .ap-toggle .ap-seg { flex: 1; text-align: center; padding: 7px 8px; }
.ap-toggle {
  display: inline-flex; background: #f1f1f3; border: 1px solid #e6e6ea;
  border-radius: 9999px; padding: 3px; gap: 2px;
}
.ap-seg {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 0.86rem; font-weight: 700; color: #6b7280;
  padding: 7px 18px; border-radius: 9999px; transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.ap-seg:hover { color: #111827; }
.ap-seg.on {
  background: #fff; color: #ae1f19;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ap-seg__ro {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: #9ca3af; margin-left: 5px;
}
.ap-track-hint { font-size: 0.7rem; color: #9ca3af; margin-top: 3px; }

/* ---- One portal, both tracks ----
   Both tracks now run the same ap-inperson renderers (ap-feat cards). The old
   online-only handler cards + the retired trade board / curriculum are hidden
   on BOTH tracks; only the data differs (which community). */
.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-track-bar,
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); }

/* Read-only (other-track) 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; }
  /* Track toggle + performance selectors never overflow their row */
  .ap-seg-row { flex-wrap: wrap; }
  .ap-track-bar { margin-bottom: 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; }
}