/* ============================================================
   notice.css : the one banner of the signed-in pages
   (Views/Shared/_Notice.cshtml; loaded by _DashboardLayout).
   Three tones: success (default), warning, error. Same colour
   roles as the network stylesheets; bound to the tokens
   styles.css defines (--ink-*, --amber-*).
   ============================================================ */
.notice{
  --notice-success:#2f8a4f;
  --notice-success-soft:#e7f3ea;
  --notice-error:#c2552f;
  --notice-error-soft:#fbe9e1;
  --notice-error-deep:#a3441f;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--notice-success-soft);
  border:1px solid rgba(47,138,79,.3);
  border-radius:16px;
  padding:13px 15px;
  font-family:var(--font-sans);
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-2);
}
.notice .ic{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--notice-success);color:#fff;display:grid;place-items:center;margin-top:1px;}
.notice .body{flex:1;min-width:0;}
.notice .t{display:block;font-weight:600;color:var(--ink);white-space:pre-line;}
.notice .d{display:block;margin-top:2px;color:var(--ink-2);white-space:pre-line;}
.notice .x{margin-left:auto;flex:0 0 auto;padding:4px;border-radius:8px;border:none;background:none;color:var(--ink-faint);cursor:pointer;display:grid;place-items:center;}
.notice .x:hover{color:var(--ink);background:rgba(23,53,65,.06);}
.notice .x:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.notice.warn{background:var(--amber-soft);border-color:rgba(231,163,60,.4);}
.notice.warn .ic{background:var(--amber);color:var(--ink);}
.notice.bad{background:var(--notice-error-soft);border-color:rgba(194,85,47,.3);}
.notice.bad .ic{background:var(--notice-error);}
.notice.bad .t{color:var(--notice-error-deep);}
.notice[hidden]{display:none;}

/* The suspension bar (Components/SuspensionBar): a red line pinned to the
   bottom of the viewport on every signed-in page while the account is
   suspended. Placed by the layouts (app-sidebar.css for the dashboard).
   The red runs edge to edge and the text and button span it,
   independent of the page column's width. */
.suspended-bar{position:sticky;bottom:0;z-index:10;padding:12px 16px;background:hsl(var(--destructive));color:hsl(var(--destructive-foreground));}
.suspended-bar .in{margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.suspended-bar p{flex:1 1 20rem;margin:0;}
/* the button stays clear of the support chat launcher in the bottom right corner */
.suspended-bar .in > :not(p){margin-right:5rem;}