/* Our senders view (plans/own-senders-execution-plan.md, Wave 1 agent F).
   Linked from inside <main id="view-senders">; every rule is scoped to it or to
   this view's own dialog, so nothing here reaches another view. Tokens only,
   from tokens.css (UI.md §2). No inline styles are set by senders.js.

   THE TWO DIRECTIONS ARE COLOURED APART, deliberately. Adding a sender is an
   ordinary change and carries no colour at all; removing one is the weakening
   (CFG-AUD-005 `own_sender_removed`) and is the only thing on this screen drawn
   in --warn. A view that warned about both would be a view nobody reads. */

#view-senders .snsec{margin:var(--s-5) 0;padding-top:var(--s-3);border-top:1px solid var(--line)}
#view-senders .snsec > h3{margin:0 0 var(--s-1)}
#view-senders .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#view-senders .snsec > p{margin:0 0 var(--s-2);max-width:70ch}
#view-senders .snhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
#view-senders .sncount{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}

#view-senders button{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-3);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border)}
#view-senders button.snsecondary{background:var(--bg);color:var(--fg);border-color:var(--line);
  font-weight:var(--weight-normal)}
#view-senders button.snsecondary:hover:not([disabled]){background:var(--surface)}
#view-senders input[type="text"]{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-2);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--fg);min-width:0}
#view-senders input:focus-visible,#view-senders button:focus-visible{outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset)}

/* ---- status: the two different nothings ---------------------------------- */
#view-senders .snempty{border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--radius);
  padding:var(--s-3) var(--s-4);margin:var(--s-3) 0;max-width:80ch}
#view-senders .snempty p{margin:var(--s-1) 0 0}
#view-senders .sninforce{border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--radius);
  padding:var(--s-2) var(--s-4);margin:var(--s-3) 0;overflow-wrap:anywhere}
#view-senders .sninforce > b{color:var(--ok)}
#view-senders .snpending{margin:var(--s-2) 0;overflow-wrap:anywhere}

#view-senders #snmsg{margin:var(--s-3) 0;padding:var(--s-2) var(--s-3);border-radius:var(--radius);
  overflow-wrap:anywhere;max-width:80ch}
#view-senders #snmsg.snbad{border:1px solid var(--bad);border-left:3px solid var(--bad);color:var(--bad)}
#view-senders #snmsg.snok{border:1px solid var(--ok);border-left:3px solid var(--ok);color:var(--ok)}

/* ---- the lists ----------------------------------------------------------- */
#view-senders .snadd{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:end;margin:var(--s-2) 0}
#view-senders .snadd label{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--text-sm)}
#view-senders .snadd input{width:22rem;max-width:100%}
#view-senders .snerr{color:var(--bad);font-size:var(--text-xs);margin:var(--s-1) 0;max-width:70ch;
  overflow-wrap:anywhere}

#view-senders .snchips{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin:var(--s-2) 0;max-width:70rem}
#view-senders .snchips .empty{flex-basis:100%;margin:0;color:var(--muted);max-width:70ch}
#view-senders .snchip{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-sm);
  padding:0 0 0 var(--s-2);border:1px solid var(--line);border-radius:999px;max-width:100%;
  overflow-wrap:anywhere;background:var(--surface)}
#view-senders .snchip code{font-family:var(--mono)}
#view-senders .snx{background:none;border:0;color:var(--muted);padding:0 var(--s-2);font-size:var(--text-base);
  line-height:1.4;border-radius:999px}
#view-senders .snx:hover{color:var(--bad)}
/* A value that is PUBLISHED. Taking this one out is the sensitive direction,
   so its control is marked before it is pressed rather than after. */
#view-senders .snx-live{color:var(--warn)}
#view-senders .snx-live:hover{background:var(--warnbg);color:var(--bad)}

/* ---- what the draft would do --------------------------------------------- */
#view-senders .snwarn{border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:var(--radius);
  background:var(--warnbg);padding:var(--s-2) var(--s-3);margin:var(--s-3) 0;max-width:80ch}
#view-senders .snwarn b{color:var(--warn)}
#view-senders .snwarn p,#view-senders .snwarn ul{margin:var(--s-1) 0 0}
#view-senders .snaddbox{border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--radius);
  padding:var(--s-2) var(--s-3);margin:var(--s-3) 0;max-width:80ch}
#view-senders .snaddbox p,#view-senders .snaddbox ul{margin:var(--s-1) 0 0}
#view-senders .snbadbox{border:1px solid var(--bad);border-left:4px solid var(--bad);border-radius:var(--radius);
  padding:var(--s-2) var(--s-3);margin:var(--s-3) 0;max-width:80ch}
#view-senders .snbadbox b{color:var(--bad)}
#view-senders .snbadbox ul{margin:var(--s-1) 0 0}
#view-senders .snwarn li,#view-senders .snaddbox li{overflow-wrap:anywhere}

/* ---- actions ------------------------------------------------------------- */
#view-senders .snactions{margin:var(--s-5) 0 0;padding-top:var(--s-3);border-top:1px dashed var(--line)}
#view-senders .snactions label{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--text-sm);
  max-width:46rem}
#view-senders .snbuttons{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0}
#view-senders #snflow{margin:0}

/* ---- history ------------------------------------------------------------- */
#view-senders .snhist td{vertical-align:top}
#view-senders .snhist .sncomment{max-width:24rem;overflow-wrap:anywhere}
#view-senders .snbadge{display:inline-block;font-size:var(--text-xs);line-height:1.6;padding:0 var(--s-2);
  border:1px solid var(--warn);border-radius:999px;color:var(--warn);background:var(--warnbg);white-space:nowrap}

/* ---- publish dialog ------------------------------------------------------ */
#snpubdlg{max-width:40rem;width:92vw}
#snpubdlg .snchanges{list-style:none;margin:var(--s-2) 0;padding:0}
#snpubdlg .snchanges li{margin:var(--s-1) 0;overflow-wrap:anywhere}
#snpubdlg .snwarn{border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:var(--radius);
  background:var(--warnbg);padding:var(--s-2) var(--s-3);margin:0 0 var(--s-3)}
#snpubdlg .snwarn b{color:var(--warn)}
#snpubdlg .snwarn p{margin:var(--s-1) 0 0}
#snpubdlg .sncarry summary{cursor:pointer;font-size:var(--text-sm)}
#snpubdlg .errstate ul{margin:var(--s-2) 0 0 var(--s-4)}