/* 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 filter" — an icon-only, opt-in action pinned to the right
   of the applied-filter chips (both the inline filter and the mobile sheets). The
   accent bell signals it's interactive; its context (sitting at the end of the
   filter you just built) carries the meaning, so it needs no label. Padding gives
   a finger-sized (~40px) hit area; the matching negative top/bottom margin cancels
   the vertical growth so the bell rides the chip row's reserved one-line height
   rather than making the row (and so the whole page) taller. */
.notify-filter-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 9px;
  margin: -9px 0;
  color: var(--theme-accent-color);
  text-decoration: none;
}

.notify-filter-link .ph {
  font-size: 1.35rem;
  line-height: 1;
}

/* Hover/focus reveals the tap target as a soft pill — the state cue an icon-only
   control otherwise lacks (Phosphor is an icon font, so a bolder glyph isn't an
   option). */
.notify-filter-link:hover,
.notify-filter-link:focus-visible {
  background: var(--theme-bg-emphasis);
  border-radius: 999px;
  outline: none;
}

/* Lit: a rule already exists for this exact filter. Instead of the unlit outline
   bell, a filled bell-ringing glyph (masked SVG, accent-painted) — the "this is
   on" cue, in the followed-star's fill language but without a heavy background.
   Tapping it opens that rule rather than making a duplicate. Sized to match the
   1.35rem font bell; the flex link centres it vertically. */
.notify-filter-link.active .notify-bell-fill {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  background-color: var(--theme-accent-color);
  -webkit-mask: var(--bell-ringing-fill) center / contain no-repeat;
  mask: var(--bell-ringing-fill) center / contain no-repeat;
}


/* A non-blocking heads-up inside the editor (another rule already covers this
   exact filter). Accent-bordered like a flash, not warn-red like .form-errors —
   nothing's wrong, the duplicate is allowed; it's just worth knowing. */
.rule-notice {
  border: var(--border-width) solid var(--theme-accent-color);
  padding: var(--gap-small) var(--gap-medium);
  /* Breathing room above/below so it isn't crammed between the intro and the
     "Worüber" legend (the turbo frame stacks these with no gap). */
  margin: var(--gap-medium) 0;
  line-height: 1.5;
}

/* 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);
}