/* Yolt v11 — D-N86.3 · UIKit .uk-note (error-banner styles + tone variants).
 *
 * Ported from v10_BUILD/UIKit.html §07 (.note) → `.uk-note` selectors that
 * D-N52 v2 error-banner.js emits. Plus banner-specific extensions
 * (.uk-note-actions, .uk-note-btn, .uk-note-hint) layered on top.
 *
 * HARD rules per CLAUDE.md:
 *   - oklch only, ZERO hex
 *   - ZERO Tailwind utilities
 *   - spacing via --space-* tokens where possible
 *
 * NOTE on naming drift (D-N86.3 audit follow-up):
 *   v11 has three banner systems coexisting —
 *     .banner-page-top + .t-{info,warn,bad,good}  (css/banners.css)
 *     .note + .{info,warn,bad,good}                (v10 UIKit canonical)
 *     .uk-note + .{info,warn,bad,good}             (D-N52 v2 error-banner.js)
 *   This file un-orphans the third. Future cleanup ship should
 *   consolidate the three into one canonical class family.
 */

/* ─── Base block ──────────────────────────────────────────────────────── */
.uk-note,
.note {
  display: flex;
  gap: var(--space-md, 12px);
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}

.uk-note .uk-note-ic,
.note .ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--bg-3);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13px;
}

/* ─── Tone variants — info / warn / bad / good ────────────────────────── */
.uk-note.info,
.note.info {
  border-color: color-mix(in oklch, var(--info) 30%, var(--line));
}
.uk-note.info .uk-note-ic,
.note.info .ico {
  background: color-mix(in oklch, var(--info) 16%, var(--bg-2));
  color: var(--info);
}

.uk-note.warn,
.note.warn {
  border-color: color-mix(in oklch, var(--warn) 30%, var(--line));
}
.uk-note.warn .uk-note-ic,
.note.warn .ico {
  background: color-mix(in oklch, var(--warn) 16%, var(--bg-2));
  color: var(--warn);
}

.uk-note.bad,
.note.bad {
  border-color: color-mix(in oklch, var(--bad) 30%, var(--line));
}
.uk-note.bad .uk-note-ic,
.note.bad .ico {
  background: color-mix(in oklch, var(--bad) 16%, var(--bg-2));
  color: var(--bad);
}

.uk-note.good,
.note.good {
  border-color: color-mix(in oklch, var(--good) 30%, var(--line));
}
.uk-note.good .uk-note-ic,
.note.good .ico {
  background: color-mix(in oklch, var(--good) 16%, var(--bg-2));
  color: var(--good);
}

/* ─── Text slots ───────────────────────────────────────────────────────── */
.uk-note .uk-note-body,
.note .body {
  flex: 1;
  min-width: 0;
}

.uk-note .uk-note-title,
.note .b {
  color: var(--ink-0);
  font-weight: 600;
  line-height: 1.35;
}

.uk-note .uk-note-text,
.note .t {
  color: var(--ink-1);
  margin-top: 2px;
  line-height: 1.4;
}

.uk-note .uk-note-sub,
.note .sub {
  color: var(--ink-3);
  font-size: 11.5px;
  margin-top: 2px;
}

/* ─── D-N52 v2 banner-specific extensions ──────────────────────────────── */
.uk-note .uk-note-hint {
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  margin-top: 6px;
  padding: 4px 6px;
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
  border-radius: 4px;
  word-break: break-word;
}

.uk-note .uk-note-actions {
  display: flex;
  gap: var(--space-sm, 8px);
  margin-left: auto;
  align-items: flex-start;
  flex-shrink: 0;
}

.uk-note .uk-note-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--ink-1);
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease;
}

.uk-note .uk-note-btn:hover {
  background: color-mix(in oklch, var(--ink-1) 6%, var(--bg-1));
  border-color: var(--ink-3);
}

.uk-note .uk-note-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.uk-note .uk-note-btn-retry {
  border-color: color-mix(in oklch, var(--accent) 45%, var(--line));
  color: var(--accent);
  font-weight: 600;
}

.uk-note .uk-note-btn-retry:hover {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
}

.uk-note .uk-note-btn-dismiss {
  color: var(--ink-2);
}

/* ─── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .uk-note .uk-note-btn {
    transition: none;
  }
}

/* ─── Mobile bottom-sheet variant (≤640) ──────────────────────────────── */
@media (max-width: 640px) {
  .uk-note {
    flex-wrap: wrap;
  }
  .uk-note .uk-note-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}