/*
  App-specific styles only. Load order: vendor/marinos/marinos.css -> assets/app.css.

  Before adding a rule here:
    1. Does an existing App Shell component or bundled Marin UI class do this? Use it.
    2. Does a bundled Marin UI token (color, spacing, radius) cover it? Use the token.
    3. Is this a small, genuinely app-specific addition? Add it below.
    4. Would other Marin apps likely need this too? Propose it upstream in
       marin-app-shell or marin-ui, then install a released App Shell bundle.
       Do not edit vendor/marinos/ or duplicate standard status-badge styles here.

  The Console's filter sidebar + results layout below (.search-layout,
  .search-sidebar, .search-facet-group, .search-facet-list, .search-results,
  .search-results-list) mirrors marin-docs' search/shared/search-layout.css
  pattern, so every "search this data" tool in MarinOS reads the same way.
  It's copied rather than vendored from marin-docs (that repo isn't part of
  this app's App Shell distribution) — keep it in sync by eye if that pattern
  changes there.
*/

.search-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.search-sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
}

.search-input-field {
  margin-bottom: 1.5rem;
}

.search-input-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.search-input-field input[type="search"] {
  width: 100%;
}

/* Sortable table headers: a real <button> for keyboard/AT support, styled
   to read as plain header text rather than a visible button. */
.mm-sort-button {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

.mm-sort-button:hover,
.mm-sort-button:focus-visible {
  text-decoration: underline;
}

#sources-table-wrap button[data-goto-feed-source] {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

th[aria-sort="ascending"] .mm-sort-button::after {
  content: " \25b2";
}

th[aria-sort="descending"] .mm-sort-button::after {
  content: " \25bc";
}

.mm-page-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--app-border);
}

.mm-page-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
  color: var(--app-text);
}

/* Raw --app-accent on its own 14% tint is only 3.6:1 in light mode, short of
   AA's 4.5:1 (a Lighthouse color-contrast failure), so light mode darkens it
   (6.2:1 on the tint over the page background). Dark mode's accent is already
   a light blue that clears AA as plain text color (7.3:1), so it reverts. */
.mm-page-tabs a[aria-current="page"] {
  background: color-mix(in srgb, var(--app-accent) 14%, transparent);
  color: color-mix(in srgb, var(--app-accent) 70%, black);
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .mm-page-tabs a[aria-current="page"] {
    color: var(--app-accent);
  }
}

.mm-reset {
  width: auto;
  margin: 0.5rem 0 0;
  white-space: nowrap;
}

.search-facet-group {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.search-facet-group legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.9rem;
}

.search-facet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pico's bundled <li> rule in vendor/marinos/marinos.css (meant for nav/menu lists) carries
   padding: calc(--pico-nav-element-spacing-vertical) ... — 8px top+bottom
   here, the actual bulk of this list's row spacing (not the 0 margin below,
   which was the only thing touched in two earlier passes at this). */
.search-facet-list li {
  margin: 0 0 0.45rem;
  padding: 0;
  list-style: none;
}

.search-facet-list li:last-child {
  margin-bottom: 0;
}

.search-facet-list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--app-text);
}

/* The bundled Pico baseline gives every checkbox a 1rem bottom margin by default
   (its usual form-field spacing) — nowhere near "slightly less," so this
   list's rows were reading as a stack of separate form fields rather than
   a tight filter list. Overridden to 0 here; .search-facet-list li's own
   small margin above controls the actual row spacing instead. */
.search-facet-list input[type="checkbox"] {
  margin: 0;
}

.search-facet-count {
  color: var(--app-muted);
  font-size: 0.8rem;
}

/* Last updated / Showing (with mention counts folded into the same line,
   in parens) — the button row below is a separate block, not a sibling
   sharing a flex row with this any more. */
.mm-results-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1rem;
}

.mm-results-summary p {
  margin: 0;
}

#active-filters {
  font-weight: 700;
}

/* The "(N mentions — News X, Video Y, Social Z)" parenthetical inside
   #active-filters reads at normal weight, not inheriting the bold "Showing:
   ..." text around it. */
.mm-mention-counts {
  font-weight: 400;
}

.mm-results-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.mm-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  white-space: nowrap;
}

/* The RSS link is an <a role="button"> that's sometimes not a real link at
   all (no href for a filter combination with no matching static feed —
   see updateRssFeedLink() in app.js). role=button plus no href already
   makes it inert and untabbable; this just makes that state visible. */
.mm-copy-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sits inline between the two copy buttons in .mm-results-buttons — override
   Pico's default block-level 100%-width <select> so it doesn't stretch to
   fill the flex row. */
.mm-copy-format {
  width: auto;
  margin: 0;
}

.mm-copy-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-copy-fallback {
  margin: 0 0 1rem;
}

.mm-copy-fallback textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.8125rem;
}

.mm-select-all {
  margin: 0 0 0.5rem;
}

.mm-select-all label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--app-muted);
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-results-list > .app-card {
  margin-bottom: 0;
  list-style: none;
}

.search-results-list li {
  list-style: none;
}

@media (max-width: 850px) {
  .search-layout {
    grid-template-columns: 1fr;
  }

  .search-sidebar {
    position: static;
    order: -1;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--pico-border-radius);
    background: var(--app-surface);
  }
}

#content-tab-row,
#source-type-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--app-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* The real tablist, inside #content-tab-row next to the Stats toggle (which
   can't be inside it — a tablist may only contain tabs). */
#content-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mm-tab {
  width: auto;
  margin: 0;
  background: none;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--pico-border-radius);
  color: var(--app-muted);
  cursor: pointer;
}

/* [aria-selected] for the four real content-type tabs; [aria-pressed] for
   #stats-toggle, a toggle button rather than a tab (see its comment in
   index.html) — same active styling either way. */
.mm-tab[aria-selected="true"],
.mm-tab[aria-pressed="true"] {
  background: var(--app-accent);
  color: #ffffff;
  font-weight: 700;
}

/* Dark mode's accent is a light blue (#8fcaff), where white text is 1.7:1;
   dark text on it is 10.6:1. */
@media (prefers-color-scheme: dark) {
  .mm-tab[aria-selected="true"],
  .mm-tab[aria-pressed="true"] {
    color: #101418;
  }
}

.mm-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* First flex child, ahead of the optional image, so every checkbox sits at
   the same x-position whether or not its card has an image. align-self
   overrides the row's flex-start just for this one child, centering it
   against the row's full height instead of pinning it to the top. */
.mm-card__select {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
}

.mm-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mm-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--app-muted);
  font-size: 0.9375rem;
}

.mm-card__source {
  font-weight: 400;
}

/* Match the card title's link styling (same underlying --app-accent, via
   --pico-primary) instead of the plain --app-text color this used to
   force onto it, so a source link actually reads as a link. */
.mm-card__source a {
  color: var(--app-accent);
}

/* .app-badge comes from the vendored vendor/marinos/marinos.css bundle
   (font-weight: 700 there) — override it just for the card's badge rather
   than editing that vendored file. */
.mm-card__meta .app-badge {
  font-weight: 400;
}

.mm-card__title {
  margin: 0 0 0.25rem;
}

.mm-card__favicon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  vertical-align: -0.15em;
  background: var(--app-surface);
}

.mm-card__byline {
  margin: 0 0 0.5rem;
  color: var(--app-muted);
  font-size: 0.9375rem;
}

.mm-card__byline time {
  font-style: italic;
}

.mm-card__text {
  margin: 0 0 0.5rem;
}

.mm-card__image {
  flex: 0 0 auto;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
}

@media (max-width: 480px) {
  .mm-card {
    flex-direction: column;
  }

  /* In the stacked column layout, "vertically centered against the row"
     no longer applies — align it with the top of the card instead, same
     as everything else once the row becomes a column. */
  .mm-card__select {
    align-self: flex-start;
  }

  .mm-card__image {
    width: 100%;
    height: 10rem;
  }
}

/* Two-level monitor filter: a simplified, collapsed-by-default top level
   (one <details> per group) that expands to its individual monitors. */
.mm-facet-group {
  margin-bottom: 0.125rem;
}

.mm-facet-group summary {
  cursor: pointer;
  font-weight: 400;
  padding: 0.25rem 0;
}

.mm-facet-group .search-facet-list {
  margin-top: 0.25rem;
}

.mm-monitor-group {
  margin-bottom: 1.5rem;
}

.mm-monitor-group h3 {
  margin-bottom: 0.75rem;
  font-weight: 400;
}

/* The Monitors page's card heading doubles as its "jump to this filter
   in Latest" control — styled like any other link on the page (same
   --app-accent as a news card title) so it reads as clickable. */
.mm-monitor-name {
  all: unset;
  display: inline;
  font: inherit;
  font-weight: 700;
  color: var(--app-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Include/exclude phrases as pills, not a bulleted list — avoids any
   marker/heading alignment mismatch entirely. */
.mm-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0 0.75rem;
}

.mm-term {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-muted) 12%, transparent);
  font-size: 0.875rem;
}

.mm-term--button {
  /* Pico.css gives every <button> generous padding + a min-height for tap
     targets — reset all of that so this reads identically to the plain
     <span> pills, just clickable. */
  all: unset;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-muted) 12%, transparent);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--app-text);
  cursor: pointer;
}

.mm-term--button:hover,
.mm-term--button:focus-visible {
  background: color-mix(in srgb, var(--app-accent) 20%, transparent);
  color: var(--app-accent);
}

/* The per-card copy buttons below the monitor badges (copy article contents,
   copy link) — vendor/marinos/marinos.css .copy-button icon buttons (same base as
   the Updates feature's copy button), laid out side by side. Scoped here
   (not in the shared bundle) to give them a visible border and background
   like the Updates feature's bordered copy button, since every other,
   genuinely icon-only use of .copy-button elsewhere should stay unaffected. */
.mm-card__copy-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.mm-card__copy-actions .copy-button {
  border-color: var(--app-border);
  background: var(--app-surface);
}

.mm-card__copy-actions .copy-button:hover {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-surface));
}

/* Shown only once a card is clipped (see .mm-card__select) — attributes it
   to the official County release it's reporting on. */
.mm-card__release {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  /* Flex items default to min-width: auto (their content's intrinsic
     size), not 0 — without this, a <select> whose widest <option> is a
     long release title refuses to shrink below that width, overflowing
     .mm-card__body and causing the whole page to scroll horizontally. */
  min-width: 0;
}

.mm-card__release label {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.mm-card__release select {
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

/* A plain section divider inside .mm-stats-grid's single column — grouping
   News-specific and Social-specific charts apart from the shared/overall
   ones above them (mentions over time, top monitors, trending topics,
   coverage by town & district), which apply to every content type. */
.mm-stats-section-heading {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--app-border);
  font-family: var(--app-font-heading);
  font-size: 1.1rem;
}

.mm-stats-grid canvas {
  max-height: 320px;
}

.mm-chart-download {
  display: block;
  margin: 0.75rem auto 0;
}

.mm-stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.mm-stats-kpi {
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--pico-border-radius);
  background: var(--app-surface);
}

.mm-stats-kpi__value {
  margin: 0.25rem 0 0;
  font-family: var(--app-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--app-text);
}

.mm-trend {
  font-weight: 600;
}

.mm-trend[data-direction="up"] {
  color: var(--app-success);
}

.mm-trend[data-direction="down"] {
  color: var(--app-danger);
}

.mm-trend[data-direction="flat"] {
  color: var(--app-muted);
}