/*
 * Saved searches (board Searches). Every value is a token from tokens.css; the one media
 * query repeats --bp-phone because custom properties cannot be read there.
 * Cards reuse .box, buttons, fields and pills from components.css.
 */

/* ---- A saved search: tags and name on the left, controls on the right ------------------- */

.ss {
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.ss-paused {
  background: var(--surface-soft);
}

.ss-paused h2 {
  color: var(--text-muted);
}

.ss-main {
  flex: 999 1 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.ss-main h2 {
  overflow-wrap: anywhere;
}

.ss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-tags li {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-strong);
  font-size: var(--fs-sm);
}

.ss-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.ss-freq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.ss-select {
  width: auto;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

/* The select saves on change when the script runs; without it the Apply button stays. */
.ss-js [data-autosubmit-fallback] {
  display: none;
}

.ss-error {
  flex-basis: 100%;
}

/* ---- The menu behind the three dots ----------------------------------------------------- */

.ss-more {
  position: relative;
}

.ss-more > summary {
  list-style: none;
  cursor: pointer;
}

.ss-more > summary::-webkit-details-marker {
  display: none;
}

.ss-pop {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}

/* On a phone the menu spans the card, whichever side the dots wrapped to. */
@media (max-width: 760px) {
  .ss-more {
    position: static;
  }

  .ss-pop {
    top: auto;
    right: var(--sp-4);
    left: var(--sp-4);
    width: auto;
    margin-top: var(--sp-2);
  }
}

/* ---- The Daily round-up panel: dark, with the on/off switch ------------------------------ */

.ss-roundup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--dark);
  color: var(--on-dark);
}

.ss-roundup h2 {
  color: var(--on-dark-strong);
}

.ss-roundup p {
  color: var(--on-dark);
}

.ss-roundup-text {
  flex: 999 1 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.ss-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark-strong);
  font-size: var(--fs-md);
  cursor: pointer;
}

.ss-track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.625rem;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-base) var(--ease);
}

.ss-track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--surface);
  transition: transform var(--dur-base) var(--ease);
}

.ss-switch-on .ss-track {
  background: var(--primary);
  box-shadow: inset 0 0 0 1px var(--on-dark-wash);
}

.ss-switch-on .ss-track::after {
  transform: translateX(1.125rem);
}

/*
 * In-app alerts: the bell with its unread count, and the alerts panel.
 * Every value is a token from tokens.css. Class names follow AppAlerts.dc.html.
 */

/* ---- The bell in the header ----------------------------------------------------------- */

.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--r-md);
  color: var(--text-strong);
}

.bell:hover {
  background: var(--primary-tint);
  color: var(--primary);
}

/* The badge sits on the bell's corner and takes no room when there is nothing unread. */
.bell-slot {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  display: flex;
}

.bell-count {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--danger-strong);
  color: var(--on-primary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.125rem;
  text-align: center;
}

/* ---- The alerts panel ----------------------------------------------------------------- */

.alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.alerts-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.alerts-title {
  font-size: var(--fs-lg);
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alert {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-right: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.alert-unread {
  border-color: var(--primary);
}

.alert-link {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  color: var(--text);
  text-decoration: none;
}

.alert-link:hover .alert-text {
  color: var(--link-hover);
}

.alert-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: var(--r-md);
  background: var(--primary-tint);
  color: var(--primary);
}

.alert-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  min-width: 0;
  max-width: var(--measure);
}

.alert-text {
  color: var(--text);
  overflow-wrap: anywhere;
}

.alert-unread .alert-text {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.alert-age {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}