/* Notification rules: the "list of funnels" management screen. Follows the
   settings aesthetic — hairline separators, square-ish corners, accent green for
   actions, raspberry only via the shared .danger role. */

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

.rule-card {
  padding: var(--gap-medium);
  border: var(--border-width) solid var(--theme-bg-muted);
}

.rule-card--off {
  opacity: 0.55;
}

.rule-card__name {
  font-weight: bold;
}

.rule-card__chips,
.rule-card__actions {
  flex-wrap: wrap;
  align-items: center;
}

/* button_to wraps each action in its own <form>; keep them inline + flush. */
.rule-card__actions form {
  margin: 0;
}

/* The .chip info-label family now lives in tags.css (shared, beside .tag), since
   it's used app-wide for read-only badges, not just here. */

/* The button ladder (.button-small / .button-ghost / .danger) and .text-link
   now live in controls.css — they're the app-wide secondary-button + link
   vocabulary, not specific to this page. */

/* Builder form: reuse .account-form field styling; these add the grouping. */
.rule-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.rule-fieldset legend {
  padding: 0;
  font-weight: bold;
  margin-bottom: var(--gap-small);
}

.rule-row {
  flex-wrap: wrap;
  align-items: flex-end;
}

.rule-row > label {
  flex: 1 1 8rem;
  min-width: 0;
}

.rule-custom {
  padding-left: var(--gap-medium);
  border-left: var(--border-width) solid var(--theme-bg-muted);
}

.rule-check {
  align-items: center;
}

/* A channel whose prerequisite is missing (e-mail with no address saved) is
   disabled; dim it so it reads as unavailable. */
.rule-check--disabled {
  opacity: 0.55;
}

/* The form is an .account-form, which underlines bare text inputs — but the
   what/where comboboxes already carry their own .input-wrapper underline, so
   strip the account-form one off the combobox input to avoid a double line. */
.account-form .input-wrapper .hw-combobox__input {
  border-bottom: 0;
  padding: 0;
}

/* Give the window select the same line metrics as the what/where comboboxes so
   all three filter fields are exactly the same height in every browser (some
   render a bare <select> shorter by default). */
.rule-form select[name="d[]"] {
  line-height: var(--filter-input-line-height);
}

/* The base flex utilities ship small/medium/large but not xsmall; define it so
   the tight label/value stacks read as intended rather than collapsing to 0. */
.gap-xsmall {
  gap: var(--gap-xsmall);
}

/* The conditional schedule fields (weekday / monthday) carry .flex
   (display:flex), which overrides the UA `[hidden]` rule that the rule-form
   Stimulus controller toggles — so without this they'd never hide. Re-assert
   [hidden] at higher specificity (same trick as events.css). */
.rule-form [hidden] {
  display: none;
}

/* "Notify me about this" — flat accent link in the toggle row, sibling of the
   favorites-filter shortcut. Its own class (was .button notify-filter-link); the
   text-decoration reset is now explicit since it no longer borrows a.button. */
.notify-filter-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xsmall);
  color: var(--theme-fg-muted);
  text-decoration: none;
}

.notify-filter-link:hover {
  text-decoration: underline;
}

.notify-filter-link .ph {
  font-size: 1.15em;
}


/* Rule card name carries an inline type badge. */
.rule-card__name {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-small);
  font-weight: bold;
}

.rule-about-label {
  font-weight: bold;
}

/* The "keep in sync with favorites" opt-in gets a subtle neutral sand ground
   (the shared --theme-bg-muted highlight) so it reads as a distinct optional
   choice — without the muddy muted-green wash it used to carry. */
.rule-sync {
  padding: var(--gap-small) var(--gap-medium);
  background: var(--theme-bg-muted);
}