.result-notifications {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 16px; color: var(--muted); font-size: 12px;
}
.result-notifications[hidden] { display: none; }
/* Lives in the Schedule & Results heading row: heading left, the control
   right with its note underneath, the schedule full width below. */
.schedule-section { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.schedule-section > .schedule-list { grid-column: 1 / -1; }
/* Level with the 44px button, and stays put when the choice opens below it. */
.schedule-section > h2 { align-self: start; line-height: 44px; }
.schedule-section > .result-notifications {
  position: relative; margin: 0; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px;
}
.schedule-section > .result-notifications .result-notify-status { color: #c3d0e2; }
.result-notify, .result-unsubscribe {
  font: inherit; cursor: pointer; color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 44px;
}
/* Same blue-outlined pill as the header's Rankings button; solid blue when on. */
.result-notify {
  font: 600 13px "Libre Franklin", sans-serif; padding: 9px 18px; white-space: nowrap;
  color: var(--ink); border-color: #47769d; background: color-mix(in srgb, var(--surface) 80%, #286296 20%);
  transition: border-color .15s, background-color .15s;
}
/* The bell (drawn here so it can move without the text). It swings from its
   top, like a real bell, once when alerts come on. */
.result-notify[data-bell]::before { content: "🔔"; display: inline-block; margin-right: .35em; transform-origin: 50% 8%; }
.result-notify[data-ring]::before { animation: result-bell-ring 1.1s ease-in-out 2; }
@keyframes result-bell-ring {
  0%, 100% { transform: rotate(0); }
  8% { transform: rotate(24deg); }
  18% { transform: rotate(-20deg); }
  28% { transform: rotate(16deg); }
  38% { transform: rotate(-12deg); }
  48% { transform: rotate(8deg); }
  58% { transform: rotate(-5deg); }
  68% { transform: rotate(3deg); }
  78% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .result-notify[data-ring]::before { animation: none; } }
.result-notify:hover:not(:disabled) { border-color: #80b8e5; background: color-mix(in srgb, var(--surface) 65%, #286296 35%); }
/* The Share button's blue: white text on #1a6fdc is 4.8:1 (the light accent
   blue was about 2:1). Hover goes darker, never lighter. */
.result-notifications[data-state="on"] .result-notify { color: #fff; border-color: #1a6fdc; background: #1a6fdc; }
.result-notifications[data-state="on"] .result-notify:hover { border-color: #1760c2; background: #1760c2; }
.result-unsubscribe:hover { color: var(--ink); }
.result-notify:focus-visible, .result-unsubscribe:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.result-notify:disabled { cursor: default; opacity: .7; }
.result-unsubscribe { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding: 4px 3px; }
.result-unsubscribe[hidden], .result-notify-status:empty { display: none; }
.result-choice .result-unsubscribe {
  display: block; margin: 10px 0 0 auto; min-height: 32px; font-size: 12px; color: var(--muted);
}
/* The choice drops down from the button (over the schedule, nothing moves):
   this team or its conference. */
.result-choice {
  position: absolute; top: 50px; right: 0; z-index: 30;
  margin: 0; padding: 12px 14px; min-width: 0; width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.result-choice[hidden], .result-choice [hidden] { display: none; }
.result-choice legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.result-scope { clear: both; display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; font-size: 13px; }
.result-scope input { margin: 2px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.result-scope span { display: flex; flex-direction: column; gap: 2px; }
.result-scope small { color: var(--muted); font-size: 12px; }
.result-choice-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.result-choice-actions button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted);
}
.result-choice-actions .result-choice-confirm { background: #1a6fdc; border-color: #1a6fdc; color: #fff; }
.result-choice-actions .result-choice-confirm:hover { background: #1760c2; border-color: #1760c2; }
.result-choice-actions .result-choice-stop {
  margin-right: auto; color: var(--loss, #e2807e);
  border-color: color-mix(in srgb, var(--loss, #e2807e) 45%, transparent);
  background: color-mix(in srgb, var(--loss, #e2807e) 10%, transparent);
}
.result-choice-actions .result-choice-stop:hover { background: color-mix(in srgb, var(--loss, #e2807e) 18%, transparent); }
.result-choice-actions button:focus-visible, .result-scope input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Phones: still heading left, button right. The heading may wrap (its first
   line stays level with the button); the button and its note get at most
   about 55% of the row. */
/* Phones: heading on one line on the left, button on the right. */
@media (max-width: 640px) {
  .schedule-section { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .schedule-section > h2 { white-space: nowrap; }
  .result-notify { padding: 9px 12px; font-size: 12px; white-space: normal; max-width: 100%; }
  .result-notify-status { line-height: 1.4; }
}
@media (max-width: 360px) {
  .schedule-section > h2 { font-size: 19px; }
}