/* ════════════════════════════════════════════════════════════════════════════
   Canonical dashboard layout geometry.

   These rules refine shared selectors
   (mobile header layout, tank-switcher sizing, the Edit-Tank / threshold modal,
   and the threshold notification field). They now apply unconditionally on the
   authenticated dashboard; no activation class or feature decision is required.

   Non-geometry, invisible bugfixes (e.g. #params-section
   { contain: layout }) stay in the baseline sheets and are intentionally NOT
   duplicated here.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header metadata subtitle: owned here (not inline) so the ≤640px header grid
   can switch the metadata row to nowrap + ellipsis. ── */
html .header-title .subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Mobile two-row header grid (≤640px) ──────────────────────────────────────
   Row 1 = brand/metadata + 44px action buttons. Row 2 = full-width tank
   identity/switcher. This keeps the tank section visually separate underneath
   the controls while preserving the feature-gated widget geometry. */
@media (max-width: 640px) {
  html .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "brand meta install subs settings out"
      "switcher switcher switcher switcher switcher switcher";
    column-gap: 6px;
    row-gap: 4px;
    align-items: center;
  }
  html .header-identity,
  html .header-title,
  html .header-actions { display: contents; }
  html .rm-app-brand { grid-area: brand; }
  /* A one-tank/demo header keeps the h1 as its visible tank identity. When the
     multi-tank switcher is present, that control becomes the visible identity
     and the duplicate h1 stays in the document outline for screen readers. */
  html .header-title h1 {
    grid-area: switcher;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  html .header-inner.tank-switcher-visible .header-title h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html .tank-switcher-wrap { grid-area: switcher; min-width: 0; }
  html .tank-switcher-wrap .tank-switcher-btn {
    max-width: none;
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
  }
  html .tank-switcher-wrap .tank-switcher-dropdown {
    left: 12px;
    right: 12px;
    max-width: none;
  }
  html #install-btn { grid-area: install; justify-self: end; }
  html #subscription-workflow-btn {
    grid-area: subs;
    width: 44px;
    justify-content: center;
    padding: 0 !important;
  }
  html #settings-tab-btn { grid-area: settings; }
  html #logout-btn { grid-area: out; }
  html .header-title .subtitle {
    grid-area: meta;
    min-width: 0;
    margin-top: 0;
    flex-wrap: nowrap;
  }
  html #last-updated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* Narrowest phones: tighten switcher type only — never reintroduce a width cap. */
@media (max-width: 380px) {
  html .tank-switcher-wrap .tank-switcher-btn { font-size: 0.9rem; }
}

/* ── Threshold field: checkbox vs. text inputs + notification toggle field ── */
html .threshold-field input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
html .threshold-field input[type="checkbox"] { width: auto; flex: 0 0 auto; }
html .threshold-notification-field {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
html .threshold-notification-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 !important;
  cursor: pointer;
}
html .threshold-notification-label input[type="checkbox"] {
  margin: 0 !important;
  inline-size: 18px;
  block-size: 18px;
  accent-color: #1683ff;
}
html .threshold-notification-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* ── Settings wizard-card modal (centered card replaces the bottom sheet) ──
   These higher-specificity overrides provide the centered wizard card. */
html .threshold-modal-overlay {
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 82px 16px calc(136px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: auto !important;
  background: rgba(0,5,12,.76) !important;
  backdrop-filter: blur(12px);
  z-index: 10000 !important;
}
html .threshold-modal {
  background: rgba(8,18,33,.98) !important;
  border: 1px solid rgba(0,212,170,.24) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
  padding: 20px !important;
  max-width: 720px !important;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  margin: 0 auto calc(40px + env(safe-area-inset-bottom, 0px));
}
html .threshold-modal-overlay.is-open .threshold-modal { transform: none !important; }
html .threshold-modal h3 { font-size: 1.2rem !important; color: var(--text-bright, #f8fafc) !important; font-weight: 800; }
html .s2-modal-handle { display: none; }

/* ── Settings modal sections (uniform non-collapsible cards) ────────── */
html .settings-modal-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 16px;
  padding-top: 14px;
}
html .settings-modal-section-header h4 {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-bright, #f8fafc);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
html .settings-modal-section-header p {
  margin: 0 0 12px;
  color: #8899aa;
  font-size: 0.78rem;
  line-height: 1.45;
}
html .settings-modal-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html .settings-modal-stack { display: grid; gap: 10px; }
html .settings-modal-stack .form-group { margin-bottom: 0; }
html .settings-modal-stack .form-label,
html .settings-modal-field-grid .threshold-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #8899aa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
html .settings-modal-stack .form-select,
html .settings-modal-stack .form-input,
html .settings-modal-field-grid .form-input { font-size: 0.85rem; }
html .settings-modal-message { font-size: 0.8rem; min-height: 18px; }

/* Settings is reached from the bottom toolbar; retain the wired header control
   in markup for compatibility but do not present a duplicate entry point. */
html #settings-tab-btn { display: none; }

/* ── PR #2447 amendment (Meghann): no widgets on the settings page. The Settings
   widget stylesheet (css/settings-widgets.css) is removed; this neutral overflow
   guard for the redesigned Settings cards is preserved here, scoped to the
   enabled audience. It presents nothing as a customizable widget. ── */
html .s2-section { box-sizing: border-box; max-width: 100%; min-width: 0; }