/* Центр уведомлений /alerts.html. Только токены cf-*. Раскладка 8 + 4:
   слева журнал «Что сработало», справа «Под присмотром» и каналы, ниже во
   всю ширину условия по бумагам. На телефоне всё в одну колонку. */

body { background: var(--cf-canvas); }
.al-skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; padding: 8px 14px; z-index: 200;
  background: var(--cf-surface); border-radius: var(--cf-radius-pill); box-shadow: var(--cf-shadow-popover); }
.al-main { width: 100%; max-width: var(--cf-content-max, 1240px); margin: 0 auto; padding: var(--cf-space-28) var(--cf-space-24) var(--cf-space-56); outline: none; }
.al-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cf-space-16); flex-wrap: wrap; margin-bottom: var(--cf-space-24); }
.al-head .cf-head__title { margin: 0; }
.al-head .cf-rule { margin: var(--cf-space-12) 0; }
.al-head .cf-head__sub { margin: 0; max-width: 62ch; }
.al-quota { margin: 0; }
.al-pro { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

.al-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--cf-space-16); align-items: start; }
.al-col { display: grid; gap: var(--cf-space-16); min-width: 0; }
.al-side { display: grid; gap: var(--cf-space-16); }
.al-skel { display: grid; gap: 12px; padding-top: 12px; }

.al-ph { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
.al-ph > .cf-btn { flex: none; }
.al-ph h2 { margin: 0; }
.al-note { margin: var(--cf-space-12) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cf-ink-3); }
.al-note--top { margin: 4px 0 var(--cf-space-8); }

/* ---------- журнал ---------- */
.al-day + .al-day { margin-top: var(--cf-space-16); }
.al-day__t { margin: var(--cf-space-12) 0 2px; font-size: 13px; font-weight: 600; color: var(--cf-ink-3); }
.al-evs { list-style: none; margin: 0; padding: 0; }
.al-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--cf-line); }
.al-day .al-ev:first-child { border-top: 0; }
.al-ev__dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.al-ev.is-new .al-ev__dot { background: var(--cf-accent); }
.al-ev__main p { margin: 0; }
.al-ev__t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.al-ev__t a { color: var(--cf-ink); text-decoration: none; }
.al-ev__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-ev__f { margin-top: 2px !important; font-size: 14.5px; line-height: 1.45; color: var(--cf-ink); }
.al-ev__d { margin-top: 2px !important; font-size: 13px; line-height: 1.45; color: var(--cf-ink-3); }
.al-ev__meta { display: grid; justify-items: end; gap: 2px; font-size: 12.5px; color: var(--cf-ink-3); text-align: right; white-space: nowrap; }
.al-ev__meta time { font-weight: 600; color: var(--cf-ink-2); }
.al-more { margin-top: var(--cf-space-12); }
.al-empty-sm { padding: var(--cf-space-24) 0 var(--cf-space-12); }

/* ---------- каналы ---------- */
.al-chlist { list-style: none; margin: var(--cf-space-8) 0 0; padding: 0; }
.al-ch { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--cf-line); font-size: 14px; }
.al-ch:first-child { border-top: 0; }
.al-ch__k { color: var(--cf-ink-3); }
.al-ch__v { font-weight: 600; color: var(--cf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-ch__v.is-off { font-weight: 500; color: var(--cf-ink-3); }
.al-ch__n { grid-column: 2; font-size: 12.5px; color: var(--cf-ink-3); }

/* ---------- пакеты ---------- */
.al-pack { padding: 12px 0; border-top: 1px solid var(--cf-line); }
.al-pack:first-of-type { border-top: 0; }
.al-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.al-pack__txt { display: grid; gap: 2px; min-width: 0; }
.al-pack__t { font-size: 15px; font-weight: 600; }
.al-pack__s { font-size: 12.5px; color: var(--cf-ink-3); }
.al-sw__i { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-sw__t { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--cf-radius-pill); background: var(--cf-line-strong);
  transition: background-color var(--cf-dur) ease; }
.al-sw__t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cf-surface);
  box-shadow: var(--cf-shadow-thumb); transition: transform var(--cf-dur) var(--cf-ease); }
.al-sw__i:checked + .al-sw__t { background: var(--cf-accent-fill); }
.al-sw__i:checked + .al-sw__t::after { transform: translateX(16px); }
.al-sw__i:focus-visible + .al-sw__t { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.al-kinds { margin-top: 10px; gap: 6px; }
.al-kinds .cf-chip { min-height: 30px; padding: 4px 11px; font-size: 13px; }

/* ---------- условия ---------- */
.al-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: var(--cf-space-12) 0 var(--cf-space-8); }
.al-search { width: min(320px, 100%); }
.al-groups { list-style: none; margin: 0; padding: 0; }
.al-g { padding: 14px 0; border-top: 1px solid var(--cf-line); }
.al-g:first-child { border-top: 0; }
.al-g__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.al-g__name { font-size: 15px; font-weight: 600; color: var(--cf-ink); text-decoration: none; }
a.al-g__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-g__ref { font-size: 12.5px; color: var(--cf-ink-3); }
.al-conds { list-style: none; margin: 0; padding: 0; }
.al-cond { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; min-height: 40px; padding: 2px 0 2px 2px; }
.al-cond__t { font-size: 14.5px; }
.al-cond.is-paused .al-cond__t { color: var(--cf-ink-3); text-decoration: line-through; text-decoration-color: var(--cf-line-strong); }
.al-cond__only { font-size: 12.5px; color: var(--cf-ink-3); }
.al-state { font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 2px 9px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2); }
.al-state--fired { background: var(--cf-accent-soft); color: var(--cf-accent); }
.al-state--paused { background: none; color: var(--cf-ink-3); padding-left: 0; padding-right: 0; }
.al-cond__acts { display: inline-flex; gap: 2px; }
.al-cond__acts .cf-iconbtn { color: var(--cf-ink-3); }
.al-cond__acts .cf-iconbtn:hover { color: var(--cf-ink); }
.al-cond__acts .al-del:hover { color: var(--cf-down); }

/* ---------- гость, ошибка, тост ---------- */
.al-guest .cf-empty { padding: var(--cf-space-40) var(--cf-space-16); }
.al-guest__ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 4px; border-radius: 50%; background: var(--cf-accent-soft); color: var(--cf-accent); }
.al-err { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.al-disc { margin: var(--cf-space-24) 0 0; max-width: 80ch; font-size: 12.5px; line-height: 1.5; color: var(--cf-ink-3); }
.al-toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--cf-z-toast); transform: translateX(-50%);
  transition: opacity var(--cf-dur) ease, transform var(--cf-dur) ease; }
@starting-style { .al-toast { opacity: 0; transform: translate(-50%, 8px); } }
.al-toast--out { opacity: 0; transform: translate(-50%, 8px); transition-duration: 120ms; }
.al-undo { margin-left: 6px; padding: 4px 10px; border: 0; border-radius: var(--cf-radius-pill); background: none; color: inherit;
  font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.al-undo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 1100px) {
  /* Одна колонка: журнал, затем «под присмотром» и каналы, затем условия. */
  .al-grid { grid-template-columns: minmax(0, 1fr); }
  .al-col { display: contents; }
  .al-journal { order: 1; }
  .al-side { order: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .al-rules { order: 3; }
}
@media (max-width: 767px) {
  .al-main { padding: var(--cf-space-20) var(--cf-space-16) var(--cf-space-44); }
  .al-side { grid-template-columns: minmax(0, 1fr); }
  .al-ev { grid-template-columns: 10px minmax(0, 1fr); }
  .al-ev__meta { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 10px; white-space: normal; }
  .al-cond { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 6px 0; }
  .al-cond__t { grid-column: 1; }
  .al-cond__acts { grid-column: 2; grid-row: 1 / span 2; }
  .al-state, .al-cond__only { grid-column: 1; justify-self: start; }
  .al-cond__acts .cf-iconbtn { width: 42px; height: 42px; }
  .al-search { width: 100%; }
  .al-search .cf-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-toast, .al-sw__t, .al-sw__t::after { transition: none; }
}

/* ---------- первый заход ---------- */
.al-start { margin-bottom: var(--cf-space-16); }
.al-start__t { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.al-start__x { margin: 6px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; color: var(--cf-ink-2); }
.al-start__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--cf-space-16); }
.al-lost { display: block; color: var(--cf-down); }
.al-lost a { color: inherit; }