/* CiviMe Notifications — Plugin Styles
 * Depends on: civime theme stylesheet (CSS custom properties, base components)
 * Views: subscribe form, manage preferences, confirmed/unsubscribed status pages
 */

/* ============================================================
   SHARED: NOTICES
   ============================================================ */

.notif-notice {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-6);
}

.notif-notice ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.notif-notice li {
  margin-bottom: var(--space-1);
}

.notif-notice--error {
  border-left-color: var(--color-error, #c0392b);
  background-color: color-mix(in srgb, var(--color-error, #c0392b) 8%, var(--color-surface));
}

.notif-notice--warning {
  border-left-color: var(--color-warning);
  background-color: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
}

.notif-notice--success {
  border-left-color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface));
}

/* ============================================================
   SHARED: STATUS PAGES (confirmed, unsubscribed, submitted)
   ============================================================ */

.notif-status {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
}

.notif-status h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.notif-status p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--line-height-body);
}

.notif-status--success {
  border-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-border));
}

.notif-status--success h2 {
  color: var(--color-secondary);
}

.notif-status--neutral {
  border-color: var(--color-border);
}

.notif-status__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ============================================================
   SUBSCRIBE FORM: LAYOUT
   ============================================================ */

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .subscribe-form {
    gap: var(--space-6);
  }
}

/* Honeypot — completely hidden from humans and assistive tech */
.subscribe-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   SUBSCRIBE FORM: CARDS (stepped sections)
   ============================================================ */

.subscribe-form__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .subscribe-form__card {
    padding: var(--space-6);
  }
}

/* ============================================================
   SUBSCRIBE FORM: STEP NUMBERS
   ============================================================ */

.subscribe-form__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* ============================================================
   SUBSCRIBE / MANAGE FORM: FIELD GROUPS
   ============================================================ */

.subscribe-form__group,
.manage-form__group {
  border: none;
  padding: 0;
  margin: 0;
}

.subscribe-form__legend,
.manage-form__legend {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  padding: 0;
}

/* ============================================================
   SUBSCRIBE / MANAGE FORM: INPUTS
   ============================================================ */

.subscribe-form__field,
.manage-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.subscribe-form__contact-field {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.subscribe-form__label,
.manage-form__label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.subscribe-form__input,
.manage-form__input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  line-height: var(--line-height-body);
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.subscribe-form__input:focus,
.manage-form__input:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.subscribe-form__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.subscribe-form__hint--center {
  text-align: center;
  margin-top: var(--space-3);
}

/* ============================================================
   SUBSCRIBE FORM: CHANNEL CHECKBOXES (inline icons)
   ============================================================ */

.subscribe-form__check svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================================
   SUBSCRIBE FORM: SIDE-BY-SIDE ROW (channels + frequency)
   ============================================================ */

.subscribe-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .subscribe-form__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* ============================================================
   SUBSCRIBE / MANAGE FORM: CHECKBOXES & RADIOS
   ============================================================ */

.subscribe-form__checks,
.subscribe-form__radios,
.manage-form__checks,
.manage-form__radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.subscribe-form__check,
.manage-form__check,
.manage-form__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius);
  transition: background-color var(--transition-fast);
  min-height: 44px;
}

.subscribe-form__radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
  min-height: 44px;
}

.subscribe-form__radio:hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}

.subscribe-form__radio:has(input:checked) {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.subscribe-form__check:hover,
.manage-form__check:hover,
.manage-form__radio:hover {
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.subscribe-form__checkbox,
.subscribe-form__check input[type="radio"],
.manage-form__checkbox,
.manage-form__check input[type="radio"],
.manage-form__radio input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.subscribe-form__radio input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  margin-top: 2px;
}

/* Radio option content (name + description) */
.subscribe-form__radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscribe-form__radio-name {
  font-weight: 600;
  line-height: 1.3;
}

.subscribe-form__radio-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* SMS consent checkbox — align top for multi-line text */
.subscribe-form__sms-consent {
  align-items: flex-start;
  margin-top: var(--space-3);
}

.subscribe-form__sms-consent .subscribe-form__checkbox {
  margin-top: 2px;
}

.subscribe-form__sms-consent span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.subscribe-form__sms-consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================================
   COUNCIL PICKER
   ============================================================ */

.council-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.council-picker__search {
  margin-bottom: var(--space-1);
}

.council-picker__list {
  max-height: min(320px, 50vh);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  padding: var(--space-1);
}

.council-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 44px;
  font-size: var(--font-size-sm);
}

.council-picker__item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}

.council-picker__item[hidden] {
  display: none;
}

.council-picker__checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.council-picker__name {
  flex: 1;
  color: var(--color-text);
}

.council-picker__county {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background-color: color-mix(in srgb, var(--color-text-secondary) 10%, var(--color-bg));
  padding: 2px var(--space-2);
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.council-picker__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.council-picker__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-height: 1.2em;
}

/* ============================================================
   SUBSCRIBE FORM: SINGLE-COUNCIL BADGE
   ============================================================ */

.subscribe-form__council-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-radius: var(--border-radius);
}

.subscribe-form__council-badge-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.subscribe-form__council-badge-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscribe-form__council-badge-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: 1.3;
}

.subscribe-form__council-badge-county {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   SUBSCRIBE FORM: SUBMIT & PRIVACY
   ============================================================ */

.subscribe-form__submit {
  text-align: center;
}

.subscribe-form__submit-btn {
  width: 100%;
}

@media (min-width: 480px) {
  .subscribe-form__submit-btn {
    width: auto;
    min-width: 240px;
  }
}

/* .btn--lg defined in theme.css — do not redeclare here */

.subscribe-form__privacy {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  text-align: center;
}

.subscribe-form__privacy a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================================
   MANAGE FORM: LAYOUT
   ============================================================ */

.manage-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.manage-form__info {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
}

.manage-form__section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.manage-form__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

@media (min-width: 480px) {
  .manage-form__details {
    grid-template-columns: 1fr 1fr;
  }
}

.manage-form__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.manage-form__detail dt {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.manage-form__detail dd {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
}

.manage-form__submit {
  padding-top: var(--space-2);
}

/* ============================================================
   MANAGE FORM: UNSUBSCRIBE SECTION
   ============================================================ */

.manage-form__unsubscribe {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.manage-form__unsubscribe p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.btn--danger {
  color: var(--color-error, #c0392b);
  border-color: var(--color-error, #c0392b);
}

.btn--danger:hover {
  background-color: var(--color-error, #c0392b);
  border-color: var(--color-error, #c0392b);
  color: #fff;
}

/* ============================================================
   TOPIC PICKER (subscribe form council filter)
   Mirrors meetings plugin chip styles using shared class names.
   ============================================================ */

.subscribe-form .meetings-topic-picker {
  text-align: center;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.subscribe-form .meetings-topic-picker__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.subscribe-form .meetings-topic-picker__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.subscribe-form .meetings-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  min-height: 44px;
}

.subscribe-form .meetings-topic-chip:hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.subscribe-form .meetings-topic-chip--active {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.subscribe-form .meetings-topic-chip--active:hover {
  background-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
}

.subscribe-form .meetings-topic-chip:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: 9999px;
}

.subscribe-form .meetings-topic-chip__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.subscribe-form .meetings-topic-chip__name {
  white-space: nowrap;
}

.subscribe-form .meetings-topic-picker__status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.subscribe-form .meetings-topic-picker__status[hidden] {
  display: none;
}

.subscribe-form .meetings-topic-picker__count {
  color: var(--color-primary);
  font-weight: 600;
}

.subscribe-form .meetings-topic-picker__clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.subscribe-form .meetings-topic-picker__clear:hover {
  color: var(--color-primary);
}

.subscribe-form .meetings-topic-picker__clear:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

/* Breadcrumb styles extracted to theme.css (.civime-breadcrumb) */

/* ============================================================
   NOTIFY PAGE
   ============================================================ */

.notify-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* When notify-page only contains a status card (submitted state),
   add vertical padding so it doesn't feel cramped. */
.notify-page > .notif-status:only-child {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Section cards */
.notify-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8);
}

.notify-section__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.notify-section__description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  margin: 0 0 var(--space-4);
}

.notify-section__explainer {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-body);
}

/* Channel selection checkboxes (Email / Text) */
.notify-channel-checks {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.notify-channel-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 44px;
}

.notify-channel-check__input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent-primary, #1a6b3c);
}

.notify-channel-check__label {
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Meeting info banner */
.notify-page__meeting-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-radius: var(--border-radius);
  margin-bottom: var(--space-6);
}

.notify-page__council-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.notify-page__meeting-title {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.notify-page__meeting-date {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.notify-page__meeting-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Reminder form */
.notify-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.notify-page__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Grid layout — side-by-side on desktop, stacked on mobile */
/* Grid: mirrors .meeting-detail layout (1fr 320px at 1024px) */
.notify-page__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .notify-page__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
    align-items: start;
  }
}

/* Sidebar CTA card — matches .meeting-detail__sidebar-card--cta style */
.notify-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .notify-sidebar {
    position: sticky;
    top: var(--space-6);
  }
}

.notify-sidebar__card {
  background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.notify-sidebar__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.notify-sidebar__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}

.notify-sidebar__btn {
  width: 100%;
}

/* ============================================================
   NOTIFICATION DASHBOARD (subscribe page rewrite)
   ============================================================ */

/* Gap between sections */
.notif-dashboard {
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .notif-dashboard {
    gap: var(--space-8);
  }
}

/* Section heading inside a card */
.notif-dashboard__section-title {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.notif-dashboard__section-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin: calc(var(--space-5) * -1) 0 var(--space-5);
}

/* Contact grid — email + phone side-by-side on wider screens */
.notif-dashboard__contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .notif-dashboard__contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Frequency radios — horizontal on wider screens */
.notif-dashboard__radios {
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .notif-dashboard__radios {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .notif-dashboard__radios .subscribe-form__radio {
    flex: 1;
    min-width: 160px;
  }
}

/* Required field indicator */
.notif-dashboard__required {
  color: var(--color-error, #c0392b);
  margin-left: 2px;
}

/* Remind form — email field + button */
.notif-dashboard__remind-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.notif-dashboard__remind-email {
  max-width: 360px;
}

/* Reminder cards */
.reminder-card {
  background: var(--color-surface-alt, var(--color-surface));
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.reminder-card:last-child {
  margin-bottom: 0;
}

.reminder-card__council {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.reminder-card__title {
  display: block;
  color: var(--color-link, var(--color-primary));
  text-decoration: none;
  font-size: var(--font-size-base);
  margin-bottom: 2px;
}

.reminder-card__title:hover {
  text-decoration: underline;
}

.reminder-card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.reminder-card__cancel-form {
  margin-top: var(--space-2);
}

.reminder-card__cancel-btn {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
}

/* Reminders empty state */
.notif-dashboard__reminders-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Reminders section — slight background differentiation */
.notif-dashboard__reminders {
  background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

/* Phone-based SMS consent toggle */
#subscribe-sms-consent[hidden] {
  display: none;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

/* ============================================================
   SUBSCRIBE TO TOPICS (checkboxes)
   ============================================================ */

.subscribe-topics {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.subscribe-topics__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin-bottom: var(--space-1);
}

.subscribe-topics__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #6b7280);
  margin-bottom: var(--space-3);
}

.subscribe-topics__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.subscribe-topics__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-primary, #d1d5db);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  min-height: 36px;
}

.subscribe-topics__item:hover {
  background: var(--surface-alt, #f9fafb);
}

.subscribe-topics__item:has(:checked) {
  background: var(--accent-primary, #1a6b3c);
  border-color: var(--accent-primary, #1a6b3c);
  color: #fff;
}

.subscribe-topics__checkbox {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.subscribe-topics__icon {
  font-size: var(--font-size-base);
}

.subscribe-topics__name {
  font-weight: 500;
}

/* ============================================================
   COUNTY FILTER TABS
   ============================================================ */

.county-filter {
  margin-bottom: var(--space-4);
}

.county-filter__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.county-filter__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.county-filter__tab {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  min-height: 36px;
}

.county-filter__tab:hover {
  background: var(--surface-alt);
}

.county-filter__tab--active {
  background: var(--accent-primary, #1a6b3c);
  border-color: var(--accent-primary, #1a6b3c);
  color: #fff;
}

.county-filter__tab--active:hover {
  background: var(--accent-primary, #1a6b3c);
  opacity: 0.9;
}

.county-filter__clear {
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: underline;
}

.county-filter__clear:hover {
  color: var(--text-primary);
}

/* ============================================================
   COUNCIL SUBSCRIBE PAGE  (/boards/{slug}/subscribe/)
   ============================================================ */

.council-subscribe {
  max-width: 32rem;
  margin: 0 auto;
}

.council-subscribe__council-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.council-subscribe__council-name {
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.council-subscribe__alt-link {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .subscribe-form,
  .manage-form,
  .manage-form__unsubscribe,
  .notif-status__actions,
  .notify-page__form,
  .council-subscribe__form {
    display: none !important;
  }
}