/* Feedback tokens — HIG Feedback page (CRITICAL). Structure only: the page gives no numbers.
   Colours come from apple-system-colors.css (--color-destructive / -warning / -success / -accent);
   floating surfaces come from apple-materials.css (.glass on the functional layer).
   Tags: HIG = stated by Apple · CONV = apple-skill convention · WCAG = W3C.
   Design rule (HIG "accessible feedback" + WCAG 1.4.1/1.4.3): a message is TEXT + an icon/shape.
   The status HUE lives on the icon or dot only. The message text stays in the label colour, because
   system hues on white are below 4.5:1 for small text. Never colour alone. */

/* Visually hidden but announced (text alternative for icon-only status, spinner names). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:root {
  --fb-icon-size: 1.125rem;                       /* CONV */
  --fb-gap: 0.5rem;                               /* CONV */
  --fb-hue-info: var(--color-accent, #0088FF);
  --fb-hue-success: var(--color-success, #34C759);
  --fb-hue-warning: var(--color-warning, #FF8D28);
  --fb-hue-error: var(--color-destructive, #FF383C);
  --fb-toast-min-ms: 5000;                        /* CONV / WCAG 2.2.1: read by feedback JS, not CSS */
}

/* 1. Status — passive, next to the item it describes (HIG). role="status" in markup. */
.fb-status, .fb-inline {
  display: flex; align-items: flex-start; gap: var(--fb-gap);
  font-size: 0.8125rem; line-height: 1.35; color: inherit;
}
.fb-status { opacity: 0.72; }                     /* quiet: it is there when people look for it */
.fb-icon {
  flex: none; inline-size: var(--fb-icon-size); block-size: var(--fb-icon-size);
  color: var(--fb-hue, currentColor);             /* the hue is ONLY on the icon */
}
[data-kind="info"]    { --fb-hue: var(--fb-hue-info); }
[data-kind="success"] { --fb-hue: var(--fb-hue-success); }
[data-kind="warning"] { --fb-hue: var(--fb-hue-warning); }
[data-kind="error"]   { --fb-hue: var(--fb-hue-error); }

/* 2. Inline correction — right next to the problem, at the moment it is detected (HIG). */
.fb-inline { margin-block-start: 0.25rem; }
.fb-inline[data-kind="error"] { font-weight: 500; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  outline: 2px solid var(--fb-hue-error); outline-offset: 1px;   /* extra channel; text below is the primary one */
}

/* 3. Transient confirmation — significant tasks only (HIG). Functional layer → glass. */
.fb-toast {
  position: fixed; inset-block-end: 1rem; inset-inline: 1rem; margin-inline: auto; inline-size: fit-content;
  max-inline-size: min(28rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: var(--fb-gap);
  padding: 0.625rem 0.875rem; border-radius: 1rem; font-size: 0.875rem;
}
@media (prefers-reduced-motion: no-preference) {
  .fb-toast { animation: fb-in 0.2s ease-out both; }
  @keyframes fb-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
}

/* 4. Blocking alert — only for critical, ideally actionable, information (HIG). One at a time. */
.fb-alert { max-inline-size: 20rem; padding: 1.25rem; border-radius: 1.25rem; }
.fb-alert h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; }
.fb-alert p  { font-size: 0.8125rem; margin: 0 0 1rem; opacity: 0.72; }
.fb-alert-actions { display: grid; gap: 0.5rem; }

/* 5. Reason for an unavailable command (HIG: "why"). Place next to the control. */
.fb-reason { font-size: 0.8125rem; opacity: 0.72; margin-block-start: 0.375rem; }

/* 6. Progress: prefer determinate; an endless spinner always carries a name (see JSON: watchOS). */
.fb-progress { inline-size: 100%; block-size: 0.25rem; border-radius: 999px; overflow: hidden; background: currentColor; opacity: 0.12; }