/* ---------- notices: the designed states ---------- */
.notice{
  margin:10px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.notice.warn{border-color:var(--warn);background:var(--warn-soft)}
.notice.crit{border-color:var(--crit);background:var(--crit-soft)}
.notice h3{margin:0;font-size:1.125rem;font-weight:600}
.notice p{margin:0;font-size:0.9375rem;color:var(--ink-2);max-width:60ch}
.notice .why{
  font-family:"IBM Plex Mono",monospace;font-size:0.875rem;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:9px 10px;
}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.btn{
  appearance:none;font:inherit;font-size:0.9375rem;font-weight:500;padding:7px 13px;
  border-radius:4px;border:1px solid var(--line-control);background:var(--surface);color:var(--ink);cursor:pointer;
}
@media (hover:hover){.btn:hover{border-color:var(--ink-2)}}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}