/* static/_shared/htmx-errors.css
 * The two states static/_shared/htmx-errors.js builds when an HTMX request
 * fails. Read that file's header first; this one only dresses what it makes.
 *
 * Why these live here rather than borrowing an existing block: the inline
 * failure lands in two structurally unrelated places, a `.stat-card` grid
 * cell on the dashboard and the `#ws-generate-mount` hold screen, so no
 * existing block's box model fits both. What it does borrow is everything
 * that can be borrowed - `btn-secondary` for the retry, matching the
 * code-activity card's own unreachable state, and `flash-toast` wholesale for
 * the page-level notice, which is defined in flash.css and reused here
 * unmodified apart from the one rule that keeps a notice carrying a button on
 * screen instead of fading.
 *
 * Tokens only, no hex literals (convention 8). Both states are read most
 * often at the exact moment something has gone wrong, which is the worst
 * possible moment for a colour that is legible in one theme and not the
 * other.
 */

.htmx-error-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
}

.htmx-error-inline__lead {
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-500);
}

/* The way-forward LINK, for a tier 2 surface whose request was not a GET and
 * so cannot be offered a retry (the Brain hold screen). It is an <a> rather
 * than a button because it navigates, and it borrows .btn-secondary so it
 * matches the retry sitting in the same slot on every other inline failure.
 * It carries `btn btn-secondary`, both classes: .btn-secondary on its own is
 * colours only, with a border-color and no border-width, so on an anchor it
 * renders as bare coloured text. The underline is then the only thing left to
 * undo, and this class is what undoes it, for both this link and the
 * server-rendered twin in workspace/_fragment_error.html.
 */
.htmx-error-inline__back { text-decoration: none; }

/* The page-level notice reuses .flash-toast from flash.css verbatim. The one
 * difference is that it must NOT auto-dismiss: flash.css's toasts are
 * announcements with nothing to do, and this one carries the retry that is
 * the user's only way forward. A dismissal is therefore an explicit click.
 */
.flash-toast--persistent {
  align-items: flex-start;
  gap: 12px;
}

.flash-toast__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.flash-toast__dismiss {
  border: 0;
  background: none;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  border-radius: var(--r-8);
}

.flash-toast__dismiss:hover { color: var(--ink-900); }