/* 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 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 segmented shape 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.

   ⚠️ ISH-897: **the BOX is gone; the segmented SHAPE is not.** ISH-639 gave this
   bar .pa-controlbar's exact chassis — `--card-bg` fill, `1px solid var(--border)`,
   `var(--radius-lg)` and a 0.625rem/800 uppercase label — back when the nav that
   selects it was a bare underline row sitting on the page background. ISH-706
   then moved that nav INSIDE `.pa-controlbar`, a bordered box of its own, so the
   Sales Report pane came to open with two stacked panels wearing the same fill,
   the same border, the same radius and the same uppercase micro-label, with no
   hierarchy between them — the identical "two peer panels of controls" failure
   ISH-693 had just fixed on analytics.html, reaching this page by the other
   route. Only the chassis was dropped. The buttons stay pill-shaped and stay a
   segmented group, so the row still cannot be read as a third underline nav,
   which is what ISH-639 was actually protecting — that argument was never about
   the border. The rule this now follows is the Sales Report's own: a border
   marks a bar that SCOPES what is below it (`.scope-bar`); a control that merely
   picks a VIEW is marked with colour and never with a box.

   ⚠️ ISH-900: `.pa-controlbar` was the second example on that list and is not one
   any more — a card drawn around an already-bordered pill marks nothing, which is
   what analytics.html's own `.filter-bar` concluded in ISH-638. The convention is
   unchanged; it has one host fewer. (ISH-904 then put the Overview/Trends nav back
   on that same unboxed row, right-aligning the period control beside it; the box
   stayed off, which is the part that matters here.)
   The relationship this comment turns on is untouched: `.view-btn` is still the
   subordinate control under a `.analytics-tab-btn` nav that selects it. */
.view-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ISH-897: .filter-kind's measurements, not its own. This label and the "Window"
   prefix in the bar directly above are the same kind of thing, and at 0.625rem
   this one was the larger of the two while naming the subordinate control. */
.view-label {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-label);
  margin-right: 0.1rem;
}

/* ISH-897: smaller than the 0.9375rem `.analytics-tab-btn` above, which selects
   it. At ISH-639's 0.9375rem/600 the subordinate control was also the BOLDER of
   the two — .pa-controlbar's tabs idle at 500 — so the two rows ranked
   backwards. */
.view-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

/* --card-bg, not --page-bg (ISH-897). Without the box this row sits on the pane's
   own grey, which IS --page-bg — the old hover simply stopped being visible. */
.view-btn:hover:not(.active) {
  color: var(--text);
  background: var(--card-bg);
  border-color: var(--border);
}

/* ISH-897: red, not the old `--nav-bg` fill. ISH-639's note read "dark fill, not
   red: red is this page's action/attention colour, and a view that is merely
   *selected* is neither" — an analytics.html argument that does not survive the
   move, because on THIS page `.analytics-tab-btn.active` directly above already
   paints a merely-selected view red, and so does `.brs-rail-item.is-active`
   beside it. The dark pill left one report contradicting itself about what
   "selected" looks like. Tint and hairline rather than the rail chip's solid
   `--red`, so this still reads one level below both of them: the established
   selected-chip convention shared with .broker-flags-rail and .mdat-boa-card.
   Measures 5.78:1 on the composited tint — AA for normal text. */
.view-btn.active {
  background: rgba(166, 38, 38, 0.1);
  border-color: rgba(166, 38, 38, 0.28);
  color: var(--red);
  font-weight: 700;
}