/* The mass-change guard (public/guard.js): one bar over the file list, and its dialog.
   No tokens of its own — every colour, radius and size is styles.css's, so all seven themes
   dress it without knowing it exists. The bar is the trash banner's shape with the danger
   accent, because it is the one thing on the page waiting for an answer. */

.guard-bar {
  flex: none; display: flex; align-items: center; gap: 11px;
  margin: calc(12 * var(--sp)) calc(18 * var(--sp)) 0;
  padding: calc(10 * var(--sp)) calc(12 * var(--sp)) calc(10 * var(--sp)) calc(15 * var(--sp));
  border: 1px solid var(--danger-ring); border-radius: var(--r);
  background: var(--danger-tint); color: var(--text2);
}
.guard-bar .gb-ic { width: 20px; height: 20px; flex: none; color: var(--danger); display: grid; place-items: center; }
.guard-bar .gb-ic svg { width: 20px; height: 20px; }
.guard-bar p { flex: 1; min-width: 0; font-size: var(--fs-base); color: var(--text2); overflow-wrap: anywhere; }
.guard-bar p b { color: var(--text); font-weight: var(--fw-semi); }
.guard-bar .btn { flex: none; }
.guard-bar .iconbtn { flex: none; width: 30px; height: 30px; }
.guard-bar .iconbtn svg { width: 16px; height: 16px; }

/* ---- the dialog ---- */
/* Wider than the default 430px for the file list; max-width: 100% (styles.css) keeps it on a
   phone. Not vw: the UI zoom on <html> does not scale it. */
.guard-modal { width: 560px; }
.guard-modal .hint b { color: var(--text2); font-weight: var(--fw-semi); }
.gd-kinds { margin: 4px 0 12px; }
.gd-note { margin-top: 10px; }
.gd-what { margin-top: 6px; }
.gd-what summary { cursor: pointer; font-size: var(--fs-md); color: var(--mut); padding: 4px 0; }
.gd-what summary:hover { color: var(--text2); }
.gd-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow: auto;
  border: 1px solid var(--line-soft); border-radius: calc(var(--r-2xs) + var(--r-half)); }
.gd-list li { display: flex; gap: 10px; align-items: baseline; padding: calc(5 * var(--sp)) calc(9 * var(--sp));
  font-size: var(--fs-md); border-top: 1px solid var(--line-soft); min-width: 0; }
.gd-list li:first-child { border-top: 0; }
.gd-op { flex: none; width: 62px; font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--faint); }
.gd-p { flex: 1; min-width: 0; color: var(--text2); overflow-wrap: anywhere; }
.gd-why { flex: none; max-width: 45%; text-align: right; font-size: var(--fs-sm); color: var(--faint); }
.gd-more { color: var(--faint); }
.gd-bar { height: 6px; border-radius: var(--r-pill); background: var(--chip); overflow: hidden; margin: 2px 0 12px; }
.gd-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.gd-done { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-base); color: var(--text2); margin: 4px 0 8px; }
.gd-done svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 1px; }

/* The API keys page: a paused key says so, with the way into the dialog. */
.ak-badge.ak-paused { color: var(--danger); border-color: var(--danger-ring); background: var(--danger-tint); }

@media (max-width: 640px) {
  .guard-bar { flex-wrap: wrap; margin: calc(10 * var(--sp)) 16px 0; }
  .guard-bar p { flex-basis: calc(100% - 60px); }
  .gd-why { max-width: 50%; }
  /* Three answers do not fit side by side on a phone: the main one takes the top row. */
  .guard-modal { width: 100%; }
  .guard-modal .modal-foot { flex-wrap: wrap; }
  .guard-modal .modal-foot .btn { flex: 1 1 auto; }
  .guard-modal .modal-foot .btn-primary { order: -1; flex-basis: 100%; }
}