/* Settings -> Notifications and Settings -> Web Push (WEB-PUSH W1-W5,
   boards 185-198). Measurements are the handoff's markup. */

.push-page {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
  max-width: 940px;
}
.push-page[data-panel="webpush"] {
  max-width: none;
  row-gap: 24px;
}
.push-h {
  margin: 0;
  font: var(--t-h8-500);
  letter-spacing: var(--ls-h8);
  color: var(--c-white);
}
.push-sub {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
  text-wrap: pretty;
}
.push-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.push-block {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.push-empty {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--c-neutral-2);
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}
.push-narrow {
  display: none;
}

/* This browser (W3, W4). Every state is drawn; the script picks one. */
.push-card {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  padding: 22px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
}
.push-card [data-when] {
  display: none;
}
.push-card[data-state="on"] [data-when~="on"],
.push-card[data-state="off"] [data-when~="off"],
.push-card[data-state="ask"] [data-when~="ask"],
.push-card[data-state="blocked"] [data-when~="blocked"],
.push-card[data-state="ios"] [data-when~="ios"],
.push-card[data-state="unconfigured"] [data-when~="unconfigured"],
.push-card[data-state="unsupported"] [data-when~="unsupported"] {
  display: flex;
}
.push-card-head {
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
}
.push-card-name {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
  min-width: 0;
}
.push-eyebrow {
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
}
.push-card-title {
  font: var(--t-h8-500);
  letter-spacing: var(--ls-h8);
  color: var(--c-white);
}
.push-toggle {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  font: var(--t-body-small-400);
  color: var(--c-neutral-11);
  white-space: nowrap;
}
.push-card-actions {
  align-items: center;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 8px;
}
.push-card-since,
.push-card-fine {
  margin: 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}
.push-card-fine {
  color: var(--c-neutral-8);
  text-wrap: pretty;
}
.push-card-text {
  margin: 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-11);
  text-wrap: pretty;
}
.push-card-text b {
  font-weight: inherit;
  color: var(--c-white);
}
.push-state {
  flex-direction: column;
  row-gap: 12px;
}
.push-state strong {
  font: var(--t-body-primary-500);
  color: var(--c-white);
}

/* The result of a test, under whatever was tested (§3.3). */
.push-result,
.push-own-result {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin: 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-11);
}
.push-result.hidden,
.push-own-result.hidden {
  display: none;
}
.push-result::before,
.push-own-result::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: var(--c-neutral-8);
  flex-shrink: 0;
}
.push-result-ok {
  color: var(--c-green);
}
.push-result-bad {
  color: var(--c-orange);
}
.push-result-ok::before {
  background: var(--c-green);
}
.push-result-bad::before {
  background: var(--c-orange);
}

/* The heads of the two sections are the handoff's: an h6 title and one small
   line under it (boards 185, 193). The other sections keep theirs. */
.settings-head[data-head="notifications"] h1,
.settings-head[data-head="webpush"] h1 {
  margin: 0 0 4px;
  font: var(--t-h6-500);
  letter-spacing: var(--ls-h6);
}
.settings-head[data-head="notifications"] .count,
.settings-head[data-head="webpush"] .count {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}