/* Report period controls — the period selector, the Trends window control, and the
   view switcher that pairs with them (ISH-371, ISH-639, ISH-680).

   Shared because these controls now live on two pages. They started as inline rules in
   analytics.html's <style> block; ISH-680 brought the same controls to broker.html's
   Broker Performance & Analytics section, and per AGENTS.md a component used by more than
   one page gets one stylesheet rather than a second copy. Both hosts are linked to this
   file, so a change here reaches both — which is the point: the two pages are meant to
   read as one report.

   Every var() below resolves on both hosts: --card-bg / --text-secondary / --page-bg /
   --nav-bg / --red come from css/tokens.css, and --border / --border-light / --radius /
   --radius-lg / --text / --text-label from each page's own :root. Audited per host —
   a var that only one page defines would silently render as nothing on the other.

   NOT here: .submarkets-toggle, which analytics.html uses as the chassis for its period
   trigger AND for its unrelated Scorecard "submarkets in view" control. broker.html has no
   such control, so this file carries .period-toggle — the same chassis under a name that
   describes what it is. analytics.html keeps its own copy for now; migrating its markup to
   .period-toggle is a rename with no behavioural change and no reason to ride along here. */

/* Dashboard period selector (#header-period-wrap) — took over the header
   slot the static "Month to Date" badge used to occupy (ISH-371). Reuses
   .submarkets-toggle for the trigger so the two header controls read as one
   system; only the menu is bespoke, because this one is a single-choice
   option list rather than a chip list. Anchored left, not right, since this
   control sits at the start of the header row. */
.period-dropdown {
  position: relative;
}

.period-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1010;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding: 0.35rem;
}

.period-menu[hidden] {
  display: none;
}

.period-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-label);
  padding: 0.45rem 0.5rem 0.25rem;
}

.period-option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.period-option:hover {
  background: var(--page-bg);
}

.period-option[aria-checked="true"] {
  font-weight: 700;
  color: var(--red);
  background: var(--page-bg);
}

/* The dropdown trigger. Same chassis as analytics.html's .submarkets-toggle, under a name
   that says what it triggers — see the note above. */
.period-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.period-toggle:hover {
  border-color: #999;
  color: var(--text);
}

.period-toggle .mf-chevron {
  transition: transform 0.15s ease;
}

.period-toggle[aria-expanded="true"] .mf-chevron {
  transform: rotate(180deg);
}

/* Marks the period control as a different KIND of filter from the facets —
   without it, "Month to Date" reads as one more who/where dropdown. */
.filter-kind {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-right: 0.1rem;
}

/* ISH-639. Trends view switcher, a boxed segmented control rather than another
   flat-underline row. It also replaced stacking the two panels — the chart card
   alone runs ~770px tall, so a ten-column fee table underneath made a very long
   scroll.

   ⚠️ ISH-693: broker.html is the ONLY host using these three rules now, and that
   is deliberate — do not "restore consistency" by pointing analytics.html back at
   them, and do not move them into broker.html either (the period selector and
   window control above genuinely are shared, and un-consolidating one rule a
   release after ISH-680 consolidated it is pure churn).

   The reason is structural, not cosmetic. The original rationale — "a third
   underline nav would read as a peer of one of the first two" — holds on
   broker.html and fails on analytics.html:

   * broker.html nests this switcher INSIDE #analytics-view-trends, which an
     .analytics-tab-btn underline nav (Overview | Trends) selects. Both are on
     screen together, so an underline switcher really would look like a peer of
     the nav immediately above it. The box is right here.
   * analytics.html has no underline sub-nav co-visible on its Trends tab —
     .tabs-container lives in #overview-section and only one section is ever
     displayed. What this box actually sat beside there was .filter-bar, whose
     fill, 1px border, radius and 10px uppercase label it matched exactly, so the
     page appeared to open with two peer panels of controls. That page's switcher
     now reuses its own .tabs-container/.tab-btn instead.

   Same component, two different structural contexts, two right answers. */
.view-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.view-label {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-label);
}

.view-btn {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.view-btn:hover:not(.active) {
  color: var(--text);
  background: var(--page-bg);
}

/* Dark fill, not red: red is this page's action/attention colour, and a
   view that is merely *selected* is neither. */
.view-btn.active {
  background: var(--nav-bg);
  color: #ffffff;
  font-weight: 700;
}