/* Error feedback sits above every popup, including the install sheet. */
#toasts, body.portrait #toasts, body.prep #toasts {
  display:flex;
  top:calc(12px + env(safe-area-inset-top));
  /* Reserve the corners for 44px popup close buttons and their margins. */
  width:min(320px, calc(100vw - 144px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  z-index:5000;
  pointer-events:none;
}
#toasts[hidden] { display:none; }
#toasts .toast { pointer-events:none; min-width:0; overflow-wrap:anywhere; font:600 13px/1.5 var(--font); padding:8px 12px; }
#panel .panel-body { min-height:0; }
.panel-head h2 { min-width:0; flex:1; }
.panel-head { flex-shrink:0; }
#popup > .pp-head { position:sticky; top:-10px; z-index:2; padding-block:4px; background:var(--paper); }
body.portrait #popup > .pp-head { top:-16px; }
#panel-close, body.portrait #panel-close, #popup .pp-x { width:44px; height:44px; min-width:44px; min-height:44px; }
.notice-history { width:min(560px,calc(100vw - 20px)); }
.notice-history-hint { color:var(--muted); font-size:12px; }
.notice-history-list { display:grid; gap:8px; }
.notice-history-row { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--paper-2); font-size:13px; }
.notice-history-row > div { flex:1; min-width:0; overflow-wrap:anywhere; }
.notice-history-row small { display:block; margin-top:5px; color:var(--ink-2); font-size:11px; }
.notice-history-row .btn { min-height:44px; flex:0 0 auto; }
.notice-history-row.t-bad { border-left:4px solid #ce4b42; }
.notice-history-row.t-warn { border-left:4px solid #c69720; }
.notice-history-row.t-good { border-left:4px solid #47975a; }
.notice-history-row.t-event { border-left:4px solid #558bc3; }