/* ===== banner_html (HTML form, scoped) =====
   The form's rules, loaded from anvil.yaml native_deps.head_html — which is also the only route
   that styles the Anvil designer canvas.

   SCOPE. The form root IS `.tab-banner`, so the root's own rules stay bare
   class selectors (a scoped `:where(.tab-banner) .tab-banner` would never
   match) and every descendant rule is `:where(.tab-banner) ...`. `:where()`
   adds no specificity, so it cannot change which rule wins.

   SECOND CLASS: none needed. `tab-banner` and every `tab-banner-*` name is
   declared and applied in this form alone (grepped across client_code and
   theme), so no rule here is in an order tie that a <head> position decides.

   DESIGNER GATE: none. The three `[data-...="false"]` rules and
   `.tab-banner[hidden]` hide content, and the markup carries
   `data-has-primary="false"` and friends, so the canvas shows the banner's
   initial state.

   The three attribute rules name the root as the subject's ancestor, so they
   are written as one compound with the root class rather than scoped with
   `:where()`, which would have dropped a class. */

.tab-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid transparent;
  position: relative;
}
:where(.tab-banner) .tab-banner-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  font-style: normal;
}
:where(.tab-banner) .tab-banner-body {
  flex: 1;
  min-width: 0;
}
:where(.tab-banner) .tab-banner-title {
  font-weight: 600;
  margin-bottom: 2px;
}
:where(.tab-banner) .tab-banner-message { color: inherit; word-wrap: break-word; }
:where(.tab-banner) .tab-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
:where(.tab-banner) .tab-banner-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
  min-height: 32px;
  transition: background 0.15s ease;
}
:where(.tab-banner) .tab-banner-btn:hover { background: rgba(0, 0, 0, 0.06); }
:where(.tab-banner) .tab-banner-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
:where(.tab-banner) .tab-banner-btn-primary {
  background: var(--primary-bg);
  color: #ffffff;
  border-color: var(--primary-bg);
}
:where(.tab-banner) .tab-banner-btn-primary:hover {
  opacity: 0.9;
  background: var(--primary-bg);
}
:where(.tab-banner) .tab-banner-dismiss {
  background: transparent;
  color: inherit;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
:where(.tab-banner) .tab-banner-dismiss:hover { opacity: 1; }

/* Variant — danger (race_rejection, concurrent_save_conflict) */
.tab-banner.tab-banner-danger {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
  --primary-bg: #991b1b;
}
/* Variant — warning (unsaved_changes_close) */
.tab-banner.tab-banner-warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
  --primary-bg: #92400e;
}
/* Variant — info (dirty_state_restore) */
.tab-banner.tab-banner-info {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
  --primary-bg: #1e40af;
}

.tab-banner[hidden] { display: none; }
.tab-banner[data-has-primary="false"] .tab-banner-btn-primary { display: none; }
.tab-banner[data-has-secondary="false"] .tab-banner-btn-secondary { display: none; }
.tab-banner[data-dismissible="false"] .tab-banner-dismiss { display: none; }

@media (max-width: 768px) {
  .tab-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon body"
      "actions actions";
    row-gap: 10px;
    column-gap: 12px;
    align-items: flex-start;
  }
  :where(.tab-banner) .tab-banner-icon { grid-area: icon; }
  :where(.tab-banner) .tab-banner-body { grid-area: body; min-width: 0; }
  :where(.tab-banner) .tab-banner-actions {
    grid-area: actions;
    width: 100%;
    flex-wrap: nowrap;
  }
  :where(.tab-banner) .tab-banner-actions .tab-banner-btn {
    flex: 1 1 0;
    min-height: 36px;
  }
}