/* chrome-mobile.css — responsive rules for the shared site chrome
 *
 * Loaded LAST in <head> on every page so it overrides the per-page
 * inline <style> blocks without us having to touch each file when
 * the breakpoint plan changes.
 *
 * Covers:
 *   • .ops-pill (status pill in the header) — never wraps multi-line
 *     and progressively collapses to dot-only as the viewport
 *     shrinks below 1080 / 900 px.
 *   • .cmc-header — nav text shrinks, EN·USD chip drops out, watch
 *     trigger label hides on the smallest screens.
 *
 * Per-page rules can still override these via increased specificity
 * (e.g. `.page-shell .ops-pill` will win over `.ops-pill`).
 */

/* ─── Base: never let the ops-pill wrap its own text ──────────────── */
.ops-pill {
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-pill #ops-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── 1080px — tablet / narrow laptop ─────────────────────────────── */
@media (max-width: 1080px) {
  .cmc-header { gap: 8px !important; }
  .cmc-header nav { gap: 10px; min-width: 0; }
  .cmc-header nav a { font-size: 11px; padding: 6px 8px; gap: 4px; }
  .cmc-header nav a svg { width: 13px; height: 13px; }
  .cmc-header .actions { gap: 6px; flex-wrap: nowrap; }
  .cmc-header .actions .cmc-btn { font-size: 11px; padding: 6px 10px; }
  /* Hide the secondary EN·USD chip (not a real switch). */
  .cmc-header .actions .cmc-btn:nth-of-type(2) { display: none; }
  .ops-pill { max-width: 100px; padding: 4px 8px; }
  .ops-pill #ops-pill-label { font-size: 10px; }
}

/* ─── 900px — small tablet / large phone ──────────────────────────── */
@media (max-width: 900px) {
  /* Ops-pill collapses to dot-only; status colour still readable. */
  .ops-pill #ops-pill-label { display: none; }
  .ops-pill { max-width: none; padding: 4px 6px; }
}

/* ─── 720px — phone ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cmc-header { flex-wrap: wrap; gap: 6px !important; padding: 8px 0; }
  .cmc-header nav { gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
  .cmc-header nav a { font-size: 0; padding: 6px; }     /* hide text label */
  .cmc-header nav a svg { width: 16px; height: 16px; opacity: 1; }
  .cmc-header .actions { gap: 6px; }
  .cmc-header .actions .cmc-btn { padding: 6px 8px; font-size: 11px; }
  .cmc-header .actions [data-cmdk] { padding: 6px 9px; }
  /* Watching trigger: hide "Watching" word, keep star + count. */
  .watch-trigger span:not(.watch-count-badge):not(.watch-chev) { display: none; }
}
