.fep-main, .newspane-main { position: relative; display: flow-root; overflow: clip; padding-bottom: 32px; }
.fep-main + .page-footer, .newspane-main + .page-footer { margin-top: 0; }
.page-newspane-layer {
  position: fixed; z-index: 50; left: 0; right: 0; top: 0; bottom: 0;
  overflow: clip; pointer-events: none;
}
.fep-newspane {
  position: absolute; z-index: 50; top: 0; bottom: 0; right: 0;
  width: var(--newspane-width, 40vw); transform: translateX(100%); pointer-events: none;
  background: var(--navy); border-left: 1px solid #D9F7FD;
  border-bottom: 1px solid #D9F7FD;
}
.fep-newspane.is-ready { transition: transform 160ms ease-out; }
.fep-newspane[data-open="true"] { transform: translateX(0); }
.fep-newspane-resize {
  position: absolute; z-index: 2; left: -5px; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; touch-action: none; pointer-events: none; visibility: hidden;
}
.fep-newspane[data-open="true"] > .fep-newspane-resize { pointer-events: auto; visibility: visible; }
.fep-newspane-resize:hover, .fep-newspane-resize:focus-visible {
  background: rgba(217, 247, 253, .15); outline: none;
}
.fep-newspane-resize:focus-visible { box-shadow: inset 0 0 0 1px var(--cream); }
.newspane-resizing, .newspane-resizing * { cursor: ew-resize !important; user-select: none !important; }
.fep-newspane-content {
  position: absolute; top: var(--newspane-content-top, 0px); width: 100%;
  box-sizing: border-box; height: var(--newspane-content-height, 100%); min-height: 0; padding: 8px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 0; background: var(--navy); color: var(--cream);
  pointer-events: auto;
}
.fep-newspane-rail { position: absolute; left: -30px; top: 0; bottom: 0; width: 30px; }
.fep-newspane-toggle {
  position: absolute; top: var(--newspane-tab-top, 0px); width: 30px; height: 88px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cream); border-radius: 3px 0 0 3px;
  background: var(--cream); color: var(--navy); cursor: pointer;
  font: 700 11pt "Verdana Pro", Verdana, sans-serif; pointer-events: auto;
}
.fep-newspane-toggle span { display: block; transform: rotate(-90deg); letter-spacing: 1px; }
.fep-newspane-toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; box-shadow: inset 0 0 0 3px var(--navy); }
.fep-newspane-content > .aggbox-tabs { flex: 0 0 auto; flex-wrap: wrap; overflow-x: auto; }
.fep-newspane-content .aggbox-tabs-left { flex-wrap: wrap; }
.fep-newspane-content .aggbox-scope { margin-left: 0; }
.fep-newspane-content > .aggbox-wrap {
  flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-width: thin;
  scrollbar-color: var(--cream) var(--navy); overscroll-behavior: contain;
  container-type: inline-size;
}
.fep-newspane-content > .aggbox-wrap::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
.fep-newspane-content > .aggbox-wrap::-webkit-scrollbar-thumb { background: var(--cream); }
/* Row PADDING lives in news_feed.css now, on `.news-feed .aggbox-row` — the
   pane carries that class too, and the NEWS page has to match it (Deane
   2026-10-07). Keeping a second copy here is what let the two drift apart. */
.fep-newspane-content .aggbox-row {
  display: grid; grid-template-columns:32px 53px minmax(0,1fr) auto;
  align-items:start; column-gap:8px; row-gap:4px;
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
}
.fep-newspane-content .aggbox-row .aggbox-headline {
  grid-column:3; grid-row:1; min-width:0; margin-left:0; top:0;
  font-size:calc(14px - 1pt); white-space:normal; overflow-wrap:anywhere;
  overflow:visible; text-overflow:clip;
}
.fep-newspane-content .aggbox-meta {
  grid-column:1; grid-row:1 / span 2; margin:0; text-align:left;
}
.fep-newspane-content.news-feed .aggbox-row :is(.aggbox-logo, .aggbox-logo-img) {
  grid-column:2; grid-row:1; margin-left:0; min-width:0; max-width:100%;
}
.fep-newspane-content .aggbox-tickers {
  grid-column:3; grid-row:2; min-width:0; margin:0; flex-wrap:wrap;
}
.fep-newspane-content .aggbox-ticker { max-width:100%; height:auto; min-height:14px; overflow-wrap:anywhere; }
.fep-newspane-content .aggbox-keydoc-btn { grid-column:4; grid-row:1; }
.fep-newspane-content .aggbox-row:not(.is-ctfn),
.fep-newspane-content .aggbox-row.is-announcement { --newspane-row-background:#1E304C; background:var(--newspane-row-background); }
.fep-newspane-content .aggbox-row.is-key-doc { --newspane-row-background:#e1ad01; background:var(--newspane-row-background); color:var(--navy); }
.fep-newspane-content .aggbox-row.aggbox-row-hover { background:var(--newspane-row-background,var(--navy))!important; }
.fep-newspane-content .is-key-doc :is(.aggbox-keydoc-btn, .aggbox-ticker) { color:var(--navy); }
.fep-newspane-content .is-key-doc .aggbox-ticker { background:rgba(14,31,61,.12); }
.fep-newspane-content .is-key-doc .aggbox-meta { opacity:1; }
@container (max-width:360px) {
  .fep-newspane-content .aggbox-row { grid-template-columns:32px minmax(0,1fr) auto; }
  .fep-newspane-content .aggbox-row .aggbox-headline { grid-column:2; grid-row:2; }
  .fep-newspane-content .aggbox-meta { grid-row:1 / span 3; }
  .fep-newspane-content .aggbox-tickers { grid-column:2; grid-row:3; }
  .fep-newspane-content .aggbox-keydoc-btn { grid-column:3; }
}
/* At the resize control's smallest widths, stack the remaining row fields
   after the left-aligned date instead of forcing horizontal overflow. */
@container (max-width:100px) {
  .fep-newspane-content .aggbox-row { grid-template-columns:minmax(0,1fr); }
  .fep-newspane-content .aggbox-meta { grid-column:1; grid-row:1; white-space:normal; overflow-wrap:anywhere; }
  .fep-newspane-content.news-feed .aggbox-row :is(.aggbox-logo, .aggbox-logo-img) { grid-column:1; grid-row:2; overflow:hidden; }
  .fep-newspane-content .aggbox-row .aggbox-headline { grid-column:1; grid-row:3; }
  .fep-newspane-content .aggbox-tickers { grid-column:1; grid-row:4; }
  .fep-newspane-content .aggbox-keydoc-btn { grid-column:1; grid-row:5; justify-self:start; }
}
/* Keep the phone's unbolded headlines; all panes share the wrapping rules. */
.fep-newspane-content[data-phone="true"] .aggbox-row .aggbox-headline {
  font-weight: 400;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .fep-newspane.is-ready { transition: none; }
}
