/* ── user-alerts task 1.9 (R9, D10): the alerts rail screen, the create dialog,
   the toasts and the rail badge ─────────────────────────────────────────────
   Every rule for the alerts UI lives here — app.css is not edited (the
   range / gex-page containment precedent). Visibility follows the shared
   body[data-screen] switch. Tokens only (no hex), sharp corners (≤ 4px, the
   dialog only), borders not shadows (the dialog and toasts take the menu /
   modal shadows), mono, tabular numbers, no transitions. */
#alerts-screen{display:none}
body[data-screen="alerts"] #alerts-screen{display:grid}
body[data-screen="alerts"] .container{display:none}
body[data-screen="alerts"]{--filter-w:0px}
body[data-screen="alerts"] #filterHandle{display:none}

#alerts-screen{position:fixed;top:var(--topbar-h,40px);left:var(--rail-w,56px);right:0;bottom:var(--statusbar-h,24px);grid-template-columns:minmax(0,1fr);grid-template-rows:28px minmax(0,1fr);background:var(--bg-1);z-index:1;font-family:var(--font-mono)}
.alr-toolbar{flex-wrap:nowrap;min-width:0}
.alr-toolbar__name{font-size:.62rem;color:var(--fg-hi);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.alr-status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.alr-body{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.alr-body .mws-panel{border:0;border-radius:0;min-width:0;min-height:0;display:flex;flex-direction:column}
.alr-body > .alr-log{border-left:1px solid var(--border)}
.alr-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.alr-table{width:100%;font-size:.66rem}
.alr-table td,.alr-table th{white-space:nowrap;text-align:left}
.alr-table td.num,.alr-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.alr-table td.alr-wrap{white-space:normal;overflow-wrap:anywhere;min-width:120px}
.alr-note{display:block;font-size:.58rem;color:var(--fg-mute);white-space:normal}
.alr-mute{color:var(--fg-mute)}
.alr-err{color:var(--red)}
.alr-msg{padding:12px;font-size:.66rem;color:var(--fg-mute)}
.alr-actions{display:flex;gap:4px}
.alr-toggle{min-width:36px;justify-content:center}
.alr-toggle[aria-pressed="true"]{color:var(--green);border-color:var(--green)}
.alr-toggle[aria-pressed="false"]{color:var(--fg-mute)}
.alr-unread{color:var(--green)}
.alr-more{margin:8px}
.alr-deliv{display:block;font-size:.6rem;color:var(--fg-2)}

/* task 2.6: the left column stacks the alert list over the destinations
   panel; each scrolls on its own */
.alr-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.alr-main > .alr-list{flex:1 1 auto}
.alr-main > .alr-dst{flex:0 1 auto;max-height:55%;border-top:1px solid var(--border)}
.alr-dst__body{padding-bottom:8px}
.alr-addr{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.alr-dst__add,.alr-dst__ips{display:flex;flex-direction:column;gap:6px;padding:8px 8px 0;border-top:1px solid var(--border-dim);margin-top:8px}
.alr-in--label{width:120px}
.alr-ip{font-family:var(--font-mono);font-size:.62rem;padding:1px 5px;border:1px solid var(--border);border-radius:2px;color:var(--fg-1);background:var(--bg-2)}
.alr-notify{display:flex;flex-direction:column;gap:4px}
/* the show-once signing secret: amber = warning, flat, no shadow */
.alr-secret{display:flex;flex-direction:column;gap:6px;margin:8px;padding:8px;border:1px solid var(--amber);background:var(--bg-2)}
.alr-secret__k{font-size:.64rem;color:var(--amber)}
.alr-secret__v{color:var(--fg-hi);letter-spacing:.5px}

/* the rail button's unread badge */
#rail-alerts{position:relative}
.alr-rail-badge{position:absolute;top:3px;right:6px;min-width:12px;padding:0 3px;font-size:9px;line-height:12px;text-align:center;color:var(--bg-1);background:var(--green);border-radius:2px;font-variant-numeric:tabular-nums;cursor:pointer}
.alr-rail-badge:empty{display:none}

/* the ⌥A alert-log blade: a fixed right-hand drawer over any screen (the page
   does not move), under the top bar, above the status bar; above the detail
   modal (500) it replaces, below the create dialog (900) and toasts (950).
   No transition — it appears. */
#alr-blade{display:none;position:fixed;top:var(--topbar-h,40px);right:0;bottom:var(--statusbar-h,24px);width:380px;max-width:100vw;box-sizing:border-box;z-index:600;background:var(--bg-1);border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-menu);font-family:var(--font-mono)}
#alr-blade[data-open="1"]{display:flex}
#alr-blade:focus{outline:none}
.alr-blade__hd{justify-content:flex-start;gap:8px}
.alr-blade__status{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.alr-blade__hd .mws-btn{padding:0 5px}
/* the same log table, each row a compact card at 380px */
#alr-blade .alr-table,#alr-blade .alr-table tbody{display:block}
#alr-blade .alr-table thead{display:none}
#alr-blade .alr-table tr{display:grid;grid-template-columns:10px auto minmax(0,1fr) auto;grid-template-areas:"dot time name price" ". event event event" ". deliv deliv deliv";column-gap:8px;row-gap:2px;padding:6px 8px;border-bottom:1px solid var(--border-dim)}
#alr-blade .alr-table td{display:block;position:static;padding:0;border:0;min-width:0;white-space:normal;background:transparent}
#alr-blade .alr-c-dot{grid-area:dot}
#alr-blade .alr-c-time{grid-area:time;color:var(--fg-mute)}
#alr-blade .alr-c-name{grid-area:name;color:var(--fg-hi);overflow-wrap:anywhere}
#alr-blade .alr-c-price{grid-area:price}
#alr-blade .alr-c-event{grid-area:event;overflow-wrap:anywhere}
#alr-blade .alr-c-deliv{grid-area:deliv}
#alr-blade .alr-c-deliv .alr-deliv{display:inline;margin-right:8px}
#alr-blade .alr-c-name .mws-tag{margin-left:6px}
/* toasts step left of an open blade instead of covering its rows */
body[data-alr-blade="1"] #alr-toasts{right:392px}

/* the create / edit dialog — above the detail blade (z 500) */
#alr-dialog{display:none;position:fixed;inset:0;z-index:900;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto;font-family:var(--font-mono)}
#alr-dialog[data-open="1"]{display:flex}
.alr-backdrop{position:fixed;inset:0;background:var(--bg-0);opacity:.7}
.alr-card{position:relative;width:min(560px,100%);border-radius:4px;box-shadow:var(--shadow-modal);background:var(--bg-2)}
.alr-card .mws-panel__body{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:visible}
.alr-sec{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border-dim);padding-top:8px}
.alr-sec:first-child{border-top:0;padding-top:0}
.alr-sec__k{font-size:.6rem;color:var(--fg-mute);letter-spacing:2px;text-transform:uppercase}
.alr-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.alr-seg{display:flex;flex-wrap:wrap}
.alr-seg .mws-btn{border-radius:0;position:relative}
.alr-seg .mws-btn + .mws-btn{margin-left:-1px}
.alr-seg .mws-btn.active{z-index:1;color:var(--green);border-color:var(--green);background:var(--bg-3)}
.alr-seg .mws-btn:disabled{color:var(--fg-dim);cursor:not-allowed}
.alr-seg .mws-btn:disabled:hover{background:transparent}
.alr-in{font-size:.68rem;padding:3px 6px;box-sizing:border-box;font-variant-numeric:tabular-nums}
.alr-in--tk{width:96px;color:var(--green);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.alr-in--num{width:96px}
.alr-in--wide{flex:1 1 220px;min-width:0}
.alr-in[aria-invalid="true"]{border-color:var(--red)}
.alr-sel{font-family:var(--font-mono);font-size:.68rem;background:var(--bg-3);color:var(--fg-1);border:1px solid var(--border);border-radius:2px;padding:2px 4px}
.alr-msgbox{width:100%;min-height:56px;resize:vertical;font-family:var(--font-mono);font-size:.66rem;box-sizing:border-box}
.alr-ph{font-size:.58rem;padding:1px 5px}
.alr-hint{font-size:.6rem;color:var(--fg-mute);overflow-wrap:anywhere}
.alr-hint:empty{display:none}
.alr-check{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--fg-1)}
.alr-check--off{color:var(--fg-dim)}
.alr-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.alr-foot .alr-formerr{flex:1 1 auto;min-width:0;font-size:.62rem;color:var(--red);overflow-wrap:anywhere}

/* toasts (R9.3): bottom-right, above the status bar */
#alr-toasts{position:fixed;right:12px;bottom:calc(var(--statusbar-h,24px) + 12px);z-index:950;display:flex;flex-direction:column;gap:6px;max-width:min(420px,calc(100vw - 32px));font-family:var(--font-mono)}
.alr-toast{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:var(--bg-3);border:1px solid var(--green-2);box-shadow:var(--shadow-menu);font-size:.68rem;color:var(--fg-1);cursor:pointer}
.alr-toast__body{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.alr-toast__name{display:block;font-size:.6rem;color:var(--fg-mute)}
.alr-toast .mws-btn{padding:0 5px}

/* the entry points on other screens (registration-sized rules only) */
.dp-alert-btn{display:flex;align-items:center;gap:5px;white-space:nowrap}

/* phone: the rail is a bottom tab bar (app.css), so the screen spans the width
   and stops above it — the range / gex-page rule */
@media (max-width:768px){
  #alerts-screen{left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
  #alr-toasts{bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px) + 12px)}
  /* the blade goes full width and stops above the bottom tab bar */
  #alr-blade{left:0;width:auto;border-left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
  body[data-alr-blade="1"] #alr-toasts{right:12px}
  /* the badge is the only way into the blade without a keyboard. On the tab
     bar it sits at top 0 (3px higher than the desktop rail's top:3px): in
     the COLLAPSED tab (43px) top:3px put its bottom at 17px against the
     bell's svg top at 14.5px — overlapping it by 2.5px — and top 0 puts it at
     14px, clear by 0.5px. In the EXPANDED tab (rail-labels, 57px) the svg top
     rises to 13.5px, so there the badge's line-height drops 12 → 11px (a 1px
     shorter badge, bottom at 13px, clear by 0.5px). Its touch target grows
     from its own top-right corner: up to the tab's top, out to the tab's
     right edge, a FIXED width from that edge (22px collapsed, 20px expanded,
     where a 320px phone's tab is 42.4px), so a wider "50+" never pushes the
     growth further left, and never below the badge's own bottom.
     alerts_blade_browser measures both rail states at the tab widths of
     320–430px phones with a "1" and a "50+" badge: no pixel of the badge or
     its growth lands on the bell's svg box (0 of 256), the bell's centre is
     the bell, and the growth stays right of the tab's centre. A "50+"
     badge's OWN box does reach left of the tab's centre at 320–375px in both
     rail states (measured 0.3–4.9px collapsed, 0.9–7.0px expanded), above
     the svg box, not over it. */
  .alr-rail-badge{top:0}
  .alr-rail-badge::before{content:'';position:absolute;top:-1px;right:-6px;bottom:0;width:22px}
  body[data-rail="expanded"] .alr-rail-badge{line-height:11px}
  body[data-rail="expanded"] .alr-rail-badge::before{width:20px}
}
@media (max-width:760px){
  .alr-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .alr-body > .alr-log{border-left:0;border-top:1px solid var(--border)}
  #alr-dialog{padding:16px}
}