/* Watching and notifications: the bell in the header, the Watch buttons on a thread and a
   board, and the three pages under the bell (/notifications, /watching and
   /account/notifications).

   Mobile first: the rules outside a media query lay the page out for a phone; the
   min-width block at the end adds room on wider screens. Everything tapped is at least
   44 px tall with space around it, form fields use 16 px text, and nothing here moves or
   animates.

   Every color, font and corner radius is a custom property from site.css, so a
   community's theme can change them. A value with no variable yet gets one there first.
   Unread is never said by color alone: the dot is filled instead of hollow, the title is
   bold, and screen readers hear the word. */

/* The bell in the header. The number is for the eye; the link's name carries the count. */
.bell {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-small); color: var(--header-ink); text-decoration: none;
  transition: background-color var(--ease);
}
.bell:hover { background: var(--header-hover); }
.bell[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--header-muted); }
.bell:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 2px; }
.bell-count {
  position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-round); background: var(--badge); color: var(--on-badge);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}

/* The Watch button on a thread and a board. In the row above a thread's posts it sits
   beside Reply, pushed to the right-hand end. */
.watch-form { margin: 0; display: flex; }
.list-bar .watch-form { margin-left: auto; }
.forum-button.watch-on { border-color: var(--ink); }
.watch-check { margin-right: 6px; font-weight: 700; }

/* The tabs on the three pages */
.notif-page { max-width: 860px; width: 100%; margin-left: auto; margin-right: auto; }
.notif-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--line); }
.notif-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none;
}
.notif-tabs a:hover { color: var(--ink); }
.notif-tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }

/* The list of notifications: each line is one link, as wide as the card */
.notif-list { margin: 0; padding: 0; list-style: none; }
.notif-row { border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.notif-row:hover { background: var(--surface-alt); }
.notif-row:first-child { border-top: 0; }
.notif-row.unread { background: var(--surface-alt); }
.notif-link { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
a.notif-link:hover .notif-title { text-decoration: underline; }
a.notif-link:focus-visible { outline-offset: -2px; }
/* Hollow when read, filled when unread. */
.notif-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border: 2px solid var(--muted); border-radius: var(--radius-round); }
.notif-row.unread .notif-dot { border-color: var(--unread); background: var(--unread); box-shadow: var(--unread-glow); }
.notif-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.notif-lead { color: var(--muted); font-size: 14px; }
.notif-title { font-size: 16px; }
.notif-row.unread .notif-lead { color: var(--ink); }
.notif-row.unread .notif-title { font-weight: 700; }
.notif-meta { color: var(--muted); font-size: 13px; }
.notif-gone .notif-lead { font-style: italic; }

/* /watching: a heading per kind, then one row per board or thread with its button */
.watch-heading { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--head-fill); font-size: 17px; font-weight: 700; }
.watch-heading + .watch-row { border-top: 0; }
.watch-heading .muted { margin-left: 6px; font-weight: 500; }
.watch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.watch-row form { margin: 0; }
.watch-main { flex: 1 1 260px; min-width: 0; }
.watch-title { display: inline-block; padding: 4px 0; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.watch-title:hover { text-decoration: underline; }
.watch-meta { color: var(--muted); font-size: 13px; }

/* /account/notifications */
.notif-settings { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.notif-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notif-fieldset legend { padding: 0; margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.notif-fieldset .check { font-size: 16px; }
.notif-fieldset:disabled .check { color: var(--muted); cursor: default; }
.notif-settings .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One row per kind of notification, its email box and its browser box side by side. On a
   phone the words wrap in the first column and the two boxes keep their 44 px each. */
.notif-kinds { width: 100%; border-collapse: collapse; }
.notif-kinds th, .notif-kinds td { padding: 0; text-align: left; vertical-align: middle; }
.notif-kinds thead th { width: 76px; padding-bottom: 2px; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; }
.notif-kinds tbody tr { border-top: 1px solid var(--line-soft); }
.notif-kinds tbody th { padding: 10px 12px 10px 0; font-size: 16px; font-weight: 400; overflow-wrap: anywhere; }
.notif-kind-box { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.notif-kind-box input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.notif-kind-box input:disabled { cursor: default; }
.notif-kind-box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Browser notifications: what state this browser is in (said in words, never by color
   alone), the two buttons, and the member's browsers. */
.push-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.push-heading, .push-subheading { margin: 0; font-weight: 700; }
.push-heading { font-size: 17px; }
.push-subheading { margin-top: 8px; font-size: 16px; }
.push-status { display: flex; flex-direction: column; gap: 8px; }
.push-state {
  margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: var(--radius-small); background: var(--surface-alt); font-size: 16px; overflow-wrap: anywhere;
}
.push-card[data-state="on"] .push-state { border-left-color: var(--accent); }
.push-card[data-state="blocked"] .push-state { border-left-color: var(--danger); }
.push-state p { margin: 0; }
.push-state p + p { margin-top: 8px; }
.push-state ol { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.push-problem { margin: 0; color: var(--danger); font-weight: 600; overflow-wrap: anywhere; }
.push-browsers { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-soft); border-radius: var(--radius-small); }
.push-browser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.push-browser:first-child { border-top: 0; }
.push-browser form { margin: 0; }
.push-browser-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-browser-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.push-browser-meta { color: var(--muted); font-size: 13px; }
.push-this {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--control-line);
  border-radius: var(--radius-round); color: var(--ink); font-size: 12px; font-weight: 600; vertical-align: middle;
}
.push-test { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The states are shown and hidden with the hidden attribute, which a display rule above would override. */
.push-card [hidden] { display: none; }

/* Wider than a phone */
@media (min-width: 768px) {
  .notif-link { padding: 14px 20px; }
  .watch-heading, .watch-row { padding-left: 20px; padding-right: 20px; }
  .notif-settings { padding: 24px; }
  .push-card { padding: 24px; }
  .notif-kinds thead th { width: 96px; }
}