/* Portal-only accepted Bills chrome, Nov 12 12:39–12:42 PM CT. */
/* Bills page: search to the right of the Bills title; tighter; no Apply; pager at bottom */
body.portal-readonly .bills-head{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin:0 0 0.65rem;
}
body.portal-readonly .bills-head .page-title{
  margin:0;
  flex:0 0 auto;
  line-height:1.15;
}
body.portal-readonly .bills-head .search-row{
  flex:0 0 auto;
  margin:0;
  width:auto;
  display:block;
}
body.portal-readonly .bills-head .search-row,
body.portal-readonly .bills-head .search-bills{
  width:22.5rem !important;
  max-width:22.5rem !important;
  flex:0 0 22.5rem !important;
}
body.portal-readonly .bills-head .search-bills{
  min-height:2.35rem !important;
  box-sizing:border-box;
  font-size:0.95rem;
}
body.portal-readonly .filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0.55rem 0.85rem;
  margin:0 0 0.5rem;
}
body.portal-readonly .filters .btn-primary{display:none !important}
body.portal-readonly .bills-pager{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:0.4rem;
  margin:0.85rem 0 0;
}
body.portal-readonly .bills-pager a,
body.portal-readonly .bills-pager span{
  min-height:2.25rem;
  min-width:auto;
  padding:0.25rem 0.85rem;
}


/* Keep the locked compact search visible on phones; do not overflow its column. */
@media (max-width: 899px) {
  body.portal-readonly .bills-head .search-row {
    flex: 1 1 0 !important; min-width: 0; width: auto !important; max-width: 22.5rem !important;
  }
  body.portal-readonly .bills-head .search-bills {
    width: 100% !important; max-width: 100% !important; min-width: 0;
  }
}

/* PORTAL-TRACKED-SHELL (Layout strike 1, Nov 12, 2026 8:16 PM CT): Bills We're Tracking is drawn in the same
   portal shell as Bills. Its Pass/Kill/Watch pills keep the accepted mock's compact size
   (accepted-mocks/portal-bills-tracked-same-menu.png). */
body.portal-tracked .pos-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
body.portal-tracked .pos-filters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px !important; min-width: 0 !important; height: auto !important;
  padding: 4px 12px !important; border-radius: 999px; border: 1px solid var(--line, #c5c9cf);
  background: #fff; color: #333; text-decoration: none; font-weight: 700; font-size: 13px !important;
  line-height: 1.2; box-sizing: border-box;
}
body.portal-tracked .pos-filters a.on { background: #1f2937; color: #fff; border-color: #1f2937; }

/* PORTAL-CAL-AGENDA (Layout strike 1, item 3): on phones (checked at 360 and 390) the "Agenda (PDF) · Download" button stays inside
   its meeting card; its label wraps instead of pushing the card sideways. */
@media (max-width: 600px) {
body.portal-readonly .meeting-card .doc-agenda .btn {
  display: inline-block; /* max-width only takes effect on a box; the live button is an inline link */
  max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; height: auto;
}
}
/* Same item: the card was being pushed past a 360px screen by an unbroken supplemental file name
   ("Exhibit E - Beebe_JPR_Presentation_2026-11-12"), which carried the Agenda button out with it. Long file
   names may break inside the card on the portal; nothing else in the card changes. */
body.portal-readonly .meeting-card > div { min-width: 0; }
body.portal-readonly .meeting-card .meeting-docs .doc-name { overflow-wrap: anywhere; }

/* PORTAL-PHONE-NAME (bAIb ruling 8:41 PM CT Nov 12, Option A): phones only (<=480px). The association name
   goes onto its own line directly under the live 36px logo, at its current type size, with tight line spacing,
   and wraps inside the header instead of being clipped. Tablet and desktop are unchanged. */
@media (max-width: 480px) {
  /* the header grows to fit the extra line; 8px on top keeps the logo off the screen edge (bottom already has 8px) */
  body.portal-readonly .app-header.app-header-main { padding-top: 8px; }
  body.portal-readonly .app-header .brand { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  body.portal-readonly .app-header .brand .portal-brand-name {
    flex: 0 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.1;
  }
}

/* PORTAL-TABLET-NAME (bAIb ruling 8:49 PM CT Nov 12; Layout asked for the same): the phone header treatment
   above, wherever the 2x logo and the association name do not fit on one header line.
   r5 (Layout flag, Nov 12): the switch now depends on whether the name actually fits, not on fixed widths.
   A tiny inline check in base.html (portal header only, layout-only, no controls) puts html.portal-hdr-fit on the
   page and adds html.portal-hdr-wrap only when the 2x logo + name + the other header items do not fit on one line.
   It runs on load and on resize. Above 480px only; phones (<=480px) are the block above, unchanged.
   No-JS fallback = the r4 widths measured on the Arkansas Trades & Industry Association portal (logs/fit-r4.txt):
   treatment at 481-887px and 900-999px; the 2x logo stays at 888-899px and 1000px+.
   The 2x bill boxes keep their own rule (2x above 480px). */
@media (min-width: 481px) and (max-width: 887px), (min-width: 900px) and (max-width: 999px) {
  html:not(.portal-hdr-fit) body.portal-readonly .app-header.app-header-main {
    height: auto; min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); flex-wrap: wrap;
    padding-top: 8px; padding-bottom: 8px;
  }
  html:not(.portal-hdr-fit) body.portal-readonly .app-header .brand { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  html.portal-light:not(.portal-hdr-fit) body.portal-readonly .app-header .brand-v2-header { height: 36px; max-width: 240px; }
  html:not(.portal-hdr-fit) body.portal-readonly .app-header .brand .portal-brand-name {
    flex: 0 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.1;
  }
}
@media (min-width: 481px) {
  html.portal-hdr-fit.portal-hdr-wrap body.portal-readonly .app-header.app-header-main {
    height: auto; min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); flex-wrap: wrap;
    padding-top: 8px; padding-bottom: 8px;
  }
  html.portal-hdr-fit.portal-hdr-wrap body.portal-readonly .app-header .brand { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  html.portal-light.portal-hdr-fit.portal-hdr-wrap body.portal-readonly .app-header .brand-v2-header { height: 36px; max-width: 240px; }
  html.portal-hdr-fit.portal-hdr-wrap body.portal-readonly .app-header .brand .portal-brand-name {
    flex: 0 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.1;
  }
}

/* PORTAL-HDR-OFFSET r6 (Layout r4 flag + Tech call under bAIb's 8:49 PM CT ruling): the header is fixed, and the
   content's top offset is today's fixed .app-shell padding-top (var(--header-h)). When a wrapped name makes the header
   taller than that offset, the fit check in base.html sets --portal-hdr-h (measured header height minus any body
   padding-top) and html.portal-hdr-tall, so the header no longer covers Home or the page title. Without JS, or when
   the header fits within today's offset, nothing here applies and the fixed offset stays. */
html.portal-hdr-tall body.portal-readonly .app-shell { padding-top: var(--portal-hdr-h); }

/* PORTAL-TRACKED-TABS r8 (QA r7 strike 2; bAIb 10:58 PM CT Nov 12, final try): the /tracked bottom tab bar (<960px) must look
   exactly like live. In the Bills shell, freshen.css `html.brand-v2 a` (0,1,2) beat app.css `.assoc-tabs a` (0,1,1), so every tab
   was blue in Inter. These rules restore live's own values (app.css: inactive var(--muted), active live's
   `.assoc-tabs a.active` value, live's system font stack) and let the bar scroll sideways on phones so Agency and Finance
   can be reached. Scoped to the tracked page's .assoc-tabs only; no other page or selector changes. */
html.brand-v2 body.portal-tracked .assoc-tabs a { color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
html.brand-v2 body.portal-tracked .assoc-tabs a.active { color: var(--assoc-accent, var(--link)); }
html.brand-v2 body.portal-tracked .assoc-tabs { overflow-x: auto; flex-wrap: nowrap; }