/* committee.css — Committee Player page.
 * Loads AFTER measure.css (tokens) and chambers.css, which supplies everything that
 * reads the same on both pages: the picker, the timeline, bill cards, testimony rows,
 * the gate, and the player panel itself (.c-player*). Only this page's LAYOUT lives
 * here -- the player and its transcript as a fixed column beside the meeting, the way
 * the Floor Briefings panel sits beside a convening. */

/* The meeting column reads fine narrower than a floor day's, and every pixel it gives up
   goes to the video and transcript -- at 1280px that is a 430px player, not 320. */
body.cm-page {
  --wrap: 760px;
  /* Declared HERE, not on :root: a custom property resolves var() where it is declared,
     so on :root these would size against the site-wide 880px --wrap, not this one. */
  /* Same take-the-slack sizing as the Floor Briefings panel, but bounded by 48vh of
   * height rather than 56: the transcript lives under the video in the same column and
   * needs room for several readable lines. */
  --cm-w: clamp(320px, min(calc(100vw - var(--wrap) - 90px), calc(48vh * 1.78)), 860px);
  --cm-gap: 26px;
  /* The meeting column takes whatever the player leaves, up to --cm-col-max, keeping
     --cm-right clear of the scrollbar; only past that cap does the pair center. (--wrap
     above is what the PLAYER reserves for the column, not the column's width.) */
  --cm-col-max: 1080px;
  --cm-right: 32px;
  --cm-left: max(14px, calc((100vw - var(--cm-w) - var(--cm-gap) - var(--cm-col-max) - var(--cm-right)) / 2));
}
/* On :root because committee.js sets it there, from the real top bar height. */
:root { --cm-top: 74px; }

.cm-picker .cm-field { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 260px; }
#cm-committee, #cm-meeting {
  font: inherit; font-size: .88rem; color: var(--ink); text-transform: none; letter-spacing: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
  max-width: 100%; min-width: 0;
}
#cm-committee { flex: 1 1 auto; }

/* ---- the left column -------------------------------------------------------------- */
.cm-left {
  position: fixed; z-index: 25;
  left: var(--cm-left); top: var(--cm-top); bottom: 14px; width: var(--cm-w);
  display: flex; flex-direction: column; gap: 10px;
}
.cm-left[hidden] { display: none; }
.cm-player-host { flex: 0 0 auto; }
/* chambers.css positions .c-player as a fixed slide-in panel; here it is simply the
   top of the column, always open. */
.cm-left .c-player {
  position: static; width: auto; transform: none; opacity: 1; visibility: visible;
  transition: none;
}

/* The transcript box (transcript.js, styled in chambers.css) fills the rest of the column. */
.cm-left .tr-box { flex: 1 1 auto; min-height: 140px; }

/* The meeting column -- and the share bar under it -- sit to the right of the fixed
   player column. */
body.cm-page.cm-has-player .m-wrap,
body.cm-page.cm-has-player .page-share {
  margin-left: calc(var(--cm-left) + var(--cm-w) + var(--cm-gap));
  max-width: min(var(--cm-col-max), calc(100vw - var(--cm-left) - var(--cm-w) - var(--cm-gap) - var(--cm-right)));
}

/* ---- the meeting column ------------------------------------------------------------- */
.cm-when { margin: 6px 0 0; color: var(--ink-soft); font-size: .95rem; }
.cm-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: .9rem; }
.cm-witn {
  font-size: .66rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
  background: var(--marble); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px;
}
.c-pos-informational .c-remark-pos, .c-pos-neutral .c-remark-pos { color: var(--brand-dark); }
.cm-agenda-kind { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
/* A long agenda title wraps beside its time chip instead of dropping under it: the name
   takes the rest of the row and the kind + Watch link flow inline after its text. */
.c-visit.cm-plain .c-visit-head { flex-wrap: nowrap; }
.c-visit.cm-plain .c-visit-name { flex: 1 1 0; min-width: 0; }
.c-visit.cm-plain .c-visit-name .cm-agenda-kind,
.c-visit.cm-plain .c-visit-name .m-video { margin-left: 8px; white-space: nowrap; }
.c-visit.cm-plain .c-visit-name { font-weight: 600; color: var(--ink-soft); }
.c-visit.cm-plain { margin-bottom: 18px; }
/* The playing bill card, marked inside its timeline section as on the floor page. */
.c-visit.is-playing .c-bill { box-shadow: inset 3px 0 0 var(--brand); }
.c-visit.is-playing .c-bill.is-tracked { box-shadow: inset 3px 0 0 var(--brand), 0 0 0 2px #fdf6e6; }

/* ---- phones and narrow windows ------------------------------------------------------ */
/* Below 900px there is no room for a column beside the meeting, so the player and a
   few lines of transcript pin to the top of the page and the meeting scrolls under. */
@media (max-width: 900px) {
  .cm-left {
    position: sticky; top: var(--cm-top); left: auto; bottom: auto;
    width: auto; max-width: 560px; margin: 0 auto 14px; gap: 6px;
    background: var(--marble); padding-bottom: 6px;
    /* Paint the page gutters too, or the timeline's dots show beside the stuck player. */
    box-shadow: -18px 0 0 var(--marble), 18px 0 0 var(--marble);
  }
  .cm-left .c-player { width: 100%; }
  /* Grows by the URL bar's height when the bar slides away (--url-bar-slack, in
     chambers.css). The pinned column is IN the flow, so a taller box would push the
     meeting down mid-scroll; the matching negative margin keeps its footprint fixed and
     lets the extra lines overlap the meeting, which scrolls under it anyway. */
  .cm-left { z-index: 5; margin-bottom: calc(14px - var(--url-bar-slack)); }
  .cm-left .tr-box { flex: 0 0 auto; min-height: 0; height: calc(7.6rem + var(--url-bar-slack));
    transition: height .2s ease; }
  body.cm-page.cm-has-player .m-wrap,
  body.cm-page.cm-has-player .page-share { margin-left: auto; max-width: var(--wrap); }
}

/* A person's further turns in the item, under their synopsis (committee.js momentsHtml). */
.cm-moments { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: .78rem; margin-top: 2px; }
.cm-moments-lbl { color: var(--ink-soft); font-weight: 600; }
.cm-moments .m-video { font-variant-numeric: tabular-nums; }
.cm-moments-more { display: inline; }
.cm-moments-more > summary { display: inline; cursor: pointer; color: var(--brand-dark); list-style: none; }
.cm-moments-more > summary::-webkit-details-marker { display: none; }
.cm-moments-more[open] > summary { margin-right: 8px; }
.cm-moments-more .m-video { margin-right: 12px; }

/* An agenda TOPIC card (no bill): the title takes the bill number's place, and wraps --
 * topic titles run long ("Federal Medicaid Cuts: What's at Stake for Oregon"). */
.cm-topic-title { font-weight: 700; color: var(--brand-dark); flex: 1 1 14rem; min-width: 0; }