/* THE ALERTS BELL, PANEL AND HALT BANNER (R31 B15). Shared by every chrome that
   includes _nav.html: base.html's document pages, the desk floor (floor/shell.html)
   and All accounts. Mobile first (Kevin's rule 12): the panel is a bottom sheet under
   768px and a dropdown from 768px up; every tap target here is at least 40px tall. */

.alertbell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 6px; padding: 0; border: 1px solid var(--line2);
  border-radius: var(--r-pill, 999px); background: none; color: var(--text); cursor: pointer; }
.alertbell:hover { border-color: var(--cyan); }
/* A CSS mask, not inline svg: a research page's own "no chart" check counts <svg in the
   HTML (research/tests_research_explorer.py), and the bell must never be one. */
.alerticon { display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"); }
.alertbadge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--loss); color: var(--on-fill);
  font: 700 11px/16px var(--font, sans-serif); text-align: center; }

.alertpanel[hidden] { display: none; }
.alertpanel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 500; }
.alertscrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .55); }
.alertsheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh;
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 14px 14px 0 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  overflow: hidden; }
@media (min-width: 768px) {
  .alertsheet { left: auto; right: 16px; bottom: auto; top: 60px; width: 380px; max-height: 70vh;
    border-radius: var(--r-card, 10px); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); }
}
.alerthead { display: flex; align-items: center; gap: 8px; padding: 6px 2px 10px; flex: 0 0 auto; }
.alerthead h2 { margin: 0; font-size: 15px; }
.alertreadall { margin-left: auto; min-height: 40px; padding: 0 10px; font-size: 13px;
  background: none; color: var(--muted); border: 1px solid var(--line2);
  border-radius: var(--r-ctl, 8px); cursor: pointer; }
.alertclose { width: 40px; height: 40px; padding: 0; background: none; border: none;
  color: var(--muted); font-size: 16px; cursor: pointer; }

/* R31 B46: the four filters (40px tap targets), the group count, the level tag and the
   resolved look. Theme tokens only, no hex. */
.alertfilters { display: flex; gap: 6px; padding: 0 0 8px; flex: 0 0 auto; }
.alertfilter { flex: 1 1 0; min-height: 40px; padding: 0 8px; font-size: 13px; font-weight: 700;
  background: none; color: var(--muted); border: 1px solid var(--line2);
  border-radius: var(--r-pill, 999px); cursor: pointer; }
.alertfilter.on { color: var(--text); border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.alertcount { display: inline-block; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 9px; background: var(--panel2); color: var(--text);
  font: 700 11px/18px var(--font, sans-serif); text-align: center; text-transform: none; letter-spacing: 0; }
.alertlevel { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font: 700 10px/16px var(--font, sans-serif); letter-spacing: .04em; }
.alertlevel-action { color: var(--loss); border: 1px solid var(--loss); }
.alertlevel-trade { color: var(--green); border: 1px solid var(--green); }
.alertlevel-info { color: var(--muted); border: 1px solid var(--line2); }
.alertresolved { margin-left: 6px; font-size: 10px; color: var(--muted); text-transform: none;
  letter-spacing: 0; }
.alertitem.resolved { opacity: .62; }
.alertitem.resolved.unread { background: none; }
.alertitem.resolved.unread::before { background: var(--line2); }

.alertlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.alertempty { color: var(--muted); padding: 12px 4px; font-size: 13px; }
.alertitem { display: block; text-decoration: none; color: inherit; padding: 10px 8px;
  min-height: 40px; border-left: 3px solid var(--line2); border-bottom: 1px solid var(--line);
  cursor: pointer; }
.alertitem:hover { background: var(--panel2); }
.alertitem.unread { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.alertitem.unread::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); margin-right: 6px; }
.alertitem[data-kind="halt"] { border-left-color: var(--loss); }
.alertitem[data-kind="fill"] { border-left-color: var(--green); }
.alertitem[data-kind="canary"] { border-left-color: var(--gold); }
.alertitem[data-kind="manual_pending"] { border-left-color: var(--cyan); }
.alertitem[data-kind="wake_hook"] { border-left-color: var(--muted); }
/* R31 B30: the row a ?alert=<id> link named. */
.alertitem-target { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.alerttitle { font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; }
.alertbody { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.alertat { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

.alertsettings { flex: 0 0 auto; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.alertsettings summary { cursor: pointer; font-size: 12px; color: var(--cyan);
  min-height: 40px; display: flex; align-items: center; }
.alertsub { font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.alertrow { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; cursor: pointer; border-top: 1px solid var(--line); }
.alertrow:first-of-type { border-top: 0; }
.alertrow input { width: auto; margin: 0; }

/* THE HALT BANNER: full width, right under the top bar, on every page. */
.haltbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 14px;
  margin: 0 0 14px; border-radius: var(--r-card, 10px); font-size: 13px; line-height: 1.4; }
.haltbar.halt-red { background: color-mix(in srgb, var(--loss) 16%, transparent);
  border: 1px solid var(--loss); }
.haltbar.halt-green { background: color-mix(in srgb, var(--green) 16%, transparent);
  border: 1px solid var(--green); }
.haltbar .haltword { font-weight: 800; letter-spacing: .03em; flex: 0 0 auto; }
.haltbar.halt-red .haltword { color: var(--loss); }
.haltbar.halt-green .haltword { color: var(--green); }
.haltbar .halttext { flex: 1 1 260px; color: var(--text); overflow-wrap: anywhere; }
/* Inside the desk floor's grid shell the banner sits above #app; inside a document page
   it sits above the header's content block (base.html's {% block content %}). */
body.railed .haltbar { margin: 0 0 12px; }
#app + .haltbar, #app ~ .haltbar { margin: 0; border-radius: 0; border-left: none; border-right: none; }
/* ROUND 6 B32: ONE LINE ON A PHONE. The whole explanation took a third of the screen above
   the chart and the ticket; under 768px a halt reads as its what and when on one line, and a
   tap on the bar (_halt_banner.html) opens the whole text. From 768px the short line is not
   drawn and the full text shows as before. */
.haltbar .haltshort { display: none; }
@media (max-width: 767.98px) {
  .haltbar.halt-red { flex-wrap: nowrap; align-items: center; min-height: 44px; padding: 8px 12px; cursor: pointer; }
  .haltbar.halt-red .haltshort { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
  .haltbar.halt-red .halttext { display: none; }
  .haltbar.halt-red::after { content: "\203A"; flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--muted); }
  .haltbar.halt-red.open { flex-wrap: wrap; align-items: baseline; }
  .haltbar.halt-red.open .haltshort, .haltbar.halt-red.open::after { display: none; }
  .haltbar.halt-red.open .halttext { display: block; }
}
/* R31 B176: the Alpaca bar (templates/_alpaca_bars.html), yellow while an Alpaca part is not
   answering, green for 30 minutes once it is back. Kevin asked for yellow, so the amber is its
   own token (--warn is slate in the Dove theme). */
.haltbar.alpaca-yellow { background: color-mix(in srgb, var(--caution) 24%, transparent); border: 1px solid var(--caution); }
.haltbar.alpaca-green { background: color-mix(in srgb, var(--green) 16%, transparent); border: 1px solid var(--green); }
.alpacabar:not(:has(.haltbar)) { display: none; }
/* The desktop desk's copy, first in main (floor/shell.html); the phone shell hides #app whole. */
body.dshell main > .alpacatop .haltbar { margin: 8px 0 0; }