/* view styles: alerts. The bell's list (js/alerts.js) and the envelope's (js/pm.js) share one row with the Alerts page
   (views/alerts.js: alerts, watched, bookmarks); this file is the one layer for all of them on app.css's tokens: the
   list as a popup groupbox (a capped title bar, rows on hairlines, a foot strip), unread rows with the accent cap and
   a pink square. The empty block and the skeleton rows are shared with What's new, search and staff lists. */

/* ---------------------------------------------------------------- one alert row */
.al-row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 30px 9px var(--g-l); color: var(--tx-2); transition: background var(--hover); }
a.al-row:hover { background: var(--s-hover); color: var(--tx-2); }
a.al-row:hover .al-tt { color: var(--ac-hi); }
a.al-row:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }
.al-row > .av { position: relative; overflow: visible; margin-top: 1px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.al-row:not(.new) > .av, .al-row:not(.new) > .pm-faces { filter: saturate(.55) brightness(.85); }
.al-row.new { background: transparent; box-shadow: inset 2px 0 0 var(--ac); }
.al-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-s { font-size: var(--fs-md); line-height: 18px; color: var(--tx-2); overflow-wrap: anywhere; }
.al-row:not(.new) .al-s { color: var(--tx-3); }
.al-s .who { font-weight: 700; }
.al-tt { color: var(--tx); font-weight: 400; transition: color var(--hover); }
.al-row:not(.new) .al-tt { color: var(--tx-2); }
.al-w, .al-w.mono { font-size: var(--fs-sm); color: var(--tx-4); }
.al-row.new .al-w { color: var(--ac-hi); }
.al-dot { position: absolute; right: 12px; top: 15px; width: 6px; height: 6px; background: transparent; transition: background var(--panel); }
.al-row.new .al-dot { width: 6px; height: 6px; background: var(--ac-pink); box-shadow: 0 0 0 1px #000; }
/* a system alert (a payment): the state colour on a tile instead of a face */
.al-sys { color: var(--ok); background: linear-gradient(180deg, #1E3020, #152216); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.al-pmk { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--ac), var(--ac-deep)); box-shadow: 0 0 0 1px #000; }
.al-pmk > svg { width: 9px; height: 9px; }
.al-rx { display: inline-flex; align-items: center; gap: 4px; vertical-align: -3px; font-weight: 500; color: var(--tx); }
.al-list > * + * { margin-top: 0; border-top: 1px solid var(--e-hair); }
.gone { opacity: 0; transform: translateX(6px); transition: opacity var(--t-med) ease-out, transform var(--t-med) ease-out; }

/* ---------------------------------------------------------------- the bell's and the envelope's list */
.popup.al-pop { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.al-ph { position: relative; display: flex; align-items: center; gap: 8px; flex: none; min-height: var(--cap-h); padding: 0 6px 0 var(--g-l);
  background: linear-gradient(180deg, #1D1D21, #17171A); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.025); }
.al-ph::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ac-grad-v); }
.al-ph b { font: 700 var(--fs-md)/16px var(--ui); color: var(--tx); }
.al-pop .al-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.al-pf { flex: none; padding: 0; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); background: #101013; }
.al-more { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; font-size: var(--fs-md); color: var(--tx-3); transition: background var(--hover), color var(--hover); }
.al-more:hover { background: rgba(255,255,255,.03); color: var(--tx); }
.al-err { padding: 12px var(--g-r) 12px var(--g-l); }
.al-pop .loading { min-height: 64px; }

/* an empty list: a quiet glyph in a well, one line and what to do about it */
.al-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 24px 28px; text-align: center; }
.al-empty > svg { box-sizing: content-box; width: 16px; height: 16px; margin-bottom: 6px; padding: 9px; color: var(--tx-4); background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.al-empty > b { font: 700 var(--fs-base)/18px var(--ui); color: var(--tx-2); }
.al-empty > span { max-width: 320px; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }
.al-empty .btn { margin-top: 6px; }
.al-empty.big { padding: 44px 24px 48px; }

/* skeleton rows */
.al-busy { padding: 0 var(--g-r) 0 var(--g-l); }
.al-skrow { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.al-skrow + .al-skrow { border-top: 1px solid var(--e-hair); }
.al-skrow .sk.av { width: 32px; height: 32px; margin: 0; }
.al-skrow .grow { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- the Alerts page: the tab beside the title, one
   groupbox; an alert's time in its own column on the right, the remove button after it on hover */
.al-page { min-width: 0; }
.al-page > .ph { margin-bottom: var(--sp-4); }
.al-page .ph .acts .al-tabs { margin: 0; }
.al-card .card-h { flex-wrap: wrap; }
.al-card .card-h .pager .btn { height: 22px; width: 22px; }
.al-card .card-h .aside > .btn.ghost { color: var(--tx-3); }
.al-card .card-h .aside > .btn.ghost:hover:not(:disabled) { color: var(--tx); }
.al-card .card-h .aside > .btn.ghost:disabled { color: var(--tx-4); background: none; box-shadow: none; }
.al-card .al-row { padding: 10px 34px 10px var(--g-l); }
.al-card .al-m { flex-direction: row; align-items: baseline; gap: var(--sp-4); }
.al-card .al-s { flex: 1; min-width: 0; font-size: var(--fs-base); line-height: 20px; }
.al-card .al-w { flex: none; min-width: 84px; text-align: right; }
.al-card .al-dot { top: 50%; margin-top: -3px; right: 14px; }
.al-wrap { position: relative; }
.al-card .al-wrap .al-row { padding-right: 70px; }
.al-card .al-wrap .al-dot { right: 46px; }
.al-wrap .al-x { position: absolute; top: 50%; right: 10px; margin-top: -10px; opacity: 0; color: var(--tx-3); transition: opacity var(--hover), color var(--hover); }
.al-wrap:hover .al-x, .al-wrap .al-x:focus-visible { opacity: 1; }
.al-wrap .al-x:hover:not(:disabled) { color: var(--tx); }

/* a watched topic or forum, a bookmark */
.al-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px var(--g-r) 10px var(--g-l); transition: background var(--hover), opacity var(--panel); }
.al-item:hover { background: var(--s-hover); }
.al-item.unread { box-shadow: inset 2px 0 0 var(--ac); }
.al-item.off { opacity: .5; }
.al-item > .dot { width: 7px; height: 7px; margin: 0; flex: none; background: transparent; box-shadow: inset 0 0 0 1px var(--tx-4); }
.al-item.unread > .dot { background: var(--ac-pink); box-shadow: 0 0 0 1px #000; }
.al-item > .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-item .nm { min-width: 0; font: 400 var(--fs-base)/19px var(--ui); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--hover); }
.al-item.unread .nm, .al-item.bmk .nm { color: var(--tx); font-weight: 700; }
.al-item a.nm:hover { color: var(--ac-hi); }
.al-item .sm { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-item .sm .mono { font-size: var(--fs-sm); }
.al-item .btn.watch { flex: none; }
.al-item.bmk { align-items: flex-start; }
.al-kind { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--tx-3); background: linear-gradient(180deg, var(--input-t), var(--input-b));
  border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.al-tl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-tl .chip { height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.al-item .snip { font-size: var(--fs-md); line-height: 18px; color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.al-note { display: flex; align-items: flex-start; gap: 6px; align-self: flex-start; max-width: 100%; margin: 3px 0; padding: 4px 8px; font-size: var(--fs-md); line-height: 17px; color: var(--tx);
  background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); }
.al-note > svg { flex: none; margin-top: 2px; color: var(--ac-hi); }
.al-note[hidden] { display: none; }
.al-acts { display: flex; gap: 2px; flex: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 840px) {
  .al-page .ph .acts .al-tabs { width: 100%; }
  .al-page .ph .acts .al-tabs > button { flex: 1; justify-content: center; padding: 0 6px; }
  .al-wrap .al-x { opacity: 1; }
  .al-item { flex-wrap: wrap; }
  .al-item > .grow { flex-basis: calc(100% - 60px); }
  .al-item .btn.watch.list { margin: -4px 0 -4px auto; }
  .al-item.bmk > .al-kind { display: none; }
}
@media (max-width: 600px) {
  .al-card .al-row { padding: 10px 30px 10px var(--g-l); }
  .al-card .al-wrap .al-row { padding-right: 52px; }
  .al-card .al-m { flex-direction: column; gap: 2px; }
  .al-card .al-w { min-width: 0; text-align: left; }
  .al-card .al-dot { top: 16px; margin-top: 0; right: 12px; }
  .al-card .al-wrap .al-dot { right: 40px; }
  .al-card .al-wrap .al-x { top: 8px; margin-top: 0; right: 6px; }
}