/* notices.css — The one inline-notice component (.notice / .headsup / .err) and the toast primitive.
   Cascade position 3 of 18. Order is load-bearing and is asserted by
   verify-fixtures.mjs; index.html links these explicitly (never @import) because Caddy's
   try_files turns a missing file into a 200 text/html SPA shell.
   Owner after Step 1: shared, frozen after Step 1. */
/* One-time, and NOT an alarm: nothing has gone wrong, the user just has a
   setting worth checking once. A left rule instead of a full border, so the rail
   does not gain another boxed card for something this quiet. */
.headsup {
  margin-top: 10px; padding: 1px 0 1px 11px; border-left: 2px solid var(--signal);
  font-size: 12px; line-height: 1.5; color: var(--dim);
}
.headsup b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
/* The slicer's OWN words, so they can be matched against what is on their screen. */
.headsup i { font-style: normal; color: var(--ink); font-weight: 600; }
/* The body is a block so the dismiss link always starts a line of its own,
   whatever length the copy happens to wrap to. */
.headsup > span { display: block; }
.headsup .link-btn { display: inline-block; margin-top: 6px; font-size: 12px; }

.notice {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.42;
  background: rgb(var(--sn-warn-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-warn-rgb) / 0.25098039215686274); color: var(--sn-warn-ink); display: none;
}
.notice.on { display: block; }
.notice b { color: var(--warn); }
.notice a { color: var(--signal); font-weight: 700; }
.notice code {
  color: var(--sn-warn-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--sn-text-2xs);
}
.notice.notice--error {
  background: rgb(var(--sn-bad-legacy-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-bad-legacy-rgb) / 0.25098039215686274); color: var(--sn-bad-ink);
}
.notice.notice--error b { color: var(--sn-bad-title); }
/* A real slicer sliced this file. Nothing else in the product proves that. */
.notice.notice--verified {
  background: rgb(var(--sn-accent-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274); color: var(--sn-ok-ink);
}
.notice.notice--verified b { color: var(--signal); }
.notice q.slicer-quote { font-style: italic; }

.err { margin-top: 12px; padding: 11px 13px; border-radius: 10px; font-size: var(--sn-text-sm); background: rgb(var(--sn-bad-legacy-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-bad-legacy-rgb) / 0.25098039215686274); color: var(--sn-bad-ink); display: none; }
.err.on { display: block; }

/* ══ The one inline notice, three tones (DESIGN-SPEC §4.17) ═══════════════════════════
   `.notice`, `#dockNote`, `#err`, `#loadNotice` and `.headsup` above are five spellings
   of one thing. This is that thing. It is ADDITIVE in Step 1 — no shipped selector was
   renamed, so nothing repaints; each component section moves its surface onto `.notice`
   with a tone class and deletes its own spelling.

   The tone is what the notice MEANS, and the three are not interchangeable:
     .is-ok    it worked / a real slicer verified it
     .is-warn  unchecked, a caveat, out of date        <- amber means ONLY this (item 67)
     .is-bad   refused, failed, must be fixed
   A notice is role="status" (ok, warn) or role="alert" (bad), and it is NEVER populated
   while hidden (item 78): the JS writes the text and then unhides. */
.notice-c {
  display: flex; gap: var(--sn-space-3); padding: var(--sn-space-3);
  border: 1px solid var(--sn-line); border-radius: var(--sn-radius-sm);
  font-size: var(--sn-text-xs); line-height: 1.5; color: var(--sn-ink-dim);
}
.notice-c__icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.notice-c__title { display: block; font-weight: 700; color: var(--sn-ink); }
.notice-c.is-ok   { border-color: var(--sn-accent-edge); background: var(--sn-ok-tint); color: var(--sn-ok-ink); }
.notice-c.is-ok   .notice-c__title { color: var(--sn-ok); }
.notice-c.is-warn { border-color: var(--sn-warn-edge);   background: var(--sn-warn-tint); color: var(--sn-warn-ink); }
.notice-c.is-warn .notice-c__title { color: var(--sn-warn); }
.notice-c.is-bad  { border-color: var(--sn-bad-edge);    background: var(--sn-bad-tint);  color: var(--sn-bad-ink); }
.notice-c.is-bad  .notice-c__title { color: var(--sn-bad); }

/* ══ Toast (DESIGN-SPEC §4.23) ════════════════════════════════════════════════════════
   Used for exactly two things — "Printer saved" (item 150, today invisible and
   unannounced) and "Copied". Never for errors: an error is an inline notice, next to the
   thing that failed. #toastHost is the LAST child of <body> so it is never inside a
   scroller or a stacking context that could clip it. */
#toastHost {
  position: fixed; left: 50%; bottom: var(--sn-space-5); transform: translateX(-50%);
  z-index: 200; display: grid; gap: var(--sn-space-2); justify-items: center;
  pointer-events: none;
}
.toast {
  padding: var(--sn-space-2) var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-surface-3); color: var(--sn-ink);
  box-shadow: var(--sn-shadow-raised);
  font-size: var(--sn-text-sm); font-weight: 600;
  animation: toast-in var(--sn-dur-base) var(--sn-ease-out);
}
@keyframes toast-in { from { opacity: 0 } to { opacity: 1 } }