/* ============================================================
   FEEDBACK · the skin for components/canonical/feedback.js (FEEDBACK-1,
   DEC-415, DEC-419). Matches dispatches/2026-10-07/feedback-1-mock.html (mock v3,
   Eri, 2026-10-07). Canonical tokens only (tokens/tokens.css): no raw colour.
   Vendored byte-identical into ora-ops-dashboard (css/feedback.css there);
   change it here first.

   One card in every placement: a round icon chip, a label over one sentence,
   a small action button on the far right in the icon's colour (two words at
   most), and a close X only when dismissing is safe. No border: the card's
   shape is its -bg tint (DEC-419, mock v3). Severity sets two local variables
   (tone, bg) and everything else reads them. Colour is never the only signal:
   each severity also has its own icon and its own label.
   ============================================================ */
.ora-fb{
  --fb-tone: var(--text-secondary); --fb-bg: var(--surface-raised);
  /* nowrap: the action stays far right and vertically centred however long the sentence (DEC-415 rule 4). */
  display:flex; flex-wrap:nowrap; align-items:center; gap:var(--space-sm, 12px);
  padding:var(--space-sm, 12px) var(--space-md, 16px);
  /* NO BORDER (DEC-419, rule 5: a border means clickable; these cards are not). The shape is the -bg tint alone. */
  background:var(--fb-bg); border:0; border-radius:var(--radius-lg, 12px);
  color:var(--text); font-family:var(--font-body); line-height:1.45;
}
.ora-fb--success{ --fb-tone: var(--ok);     --fb-bg: var(--ok-bg); }
.ora-fb--info{    --fb-tone: var(--info);   --fb-bg: var(--info-bg); }
.ora-fb--warning{ --fb-tone: var(--warn);   --fb-bg: var(--warn-bg); }
.ora-fb--error{   --fb-tone: var(--danger); --fb-bg: var(--danger-bg); }
.ora-fb--neutral{ --fb-tone: var(--text-secondary); --fb-bg: var(--surface-raised); }

.ora-fb-chip{
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; border-radius:var(--radius-circle, 50%); font-size:14px;
  color:var(--fb-tone); background:color-mix(in srgb, var(--fb-tone) 18%, transparent);
}
.ora-fb-txt{ flex:1; min-width:0; overflow-wrap:anywhere; }
.ora-fb-label{ display:block; font-weight:var(--fw-semibold, 600); font-size:var(--fs-sm); color:var(--text); }
.ora-fb-text{ display:block; font-size:var(--fs-sm); color:var(--text-secondary); }

/* THE ACTION · a small primary button, far right, vertically centred, two words at most. */
.ora-fb-action{
  flex:none; display:inline-block; height:24px; padding:0 8px; border:0; border-radius:var(--radius-md, 8px);
  background:var(--fb-tone); color:var(--text-on-accent);
  font:var(--fw-semibold, 600) var(--fs-xs)/24px var(--font-body);
  white-space:nowrap; text-decoration:none; cursor:pointer;
}
.ora-fb-action:hover{ filter:brightness(1.08); }
.ora-fb-action:focus-visible{ outline:2px solid var(--fb-tone); outline-offset:2px; }
.ora-fb-close{
  flex:none; display:grid; place-items:center; width:24px; height:24px; padding:0;
  border:0; border-radius:var(--radius-md, 8px); background:none; color:var(--text-tertiary); cursor:pointer;
}
.ora-fb-close:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
.ora-fb-close:focus-visible{ outline:2px solid var(--fb-tone); outline-offset:2px; }

/* INLINE · directly above the field or the row of buttons it is about. */
.ora-fb--at-inline{ margin:0 0 var(--space-xs, 8px); }

/* BANNERS · top of the open surface, else top of the page under the header.
   The page slot is sticky so it cannot scroll away under the header. */
.ora-fb-surface-slot:empty,.ora-fb-page-slot:empty{ display:none; }
.ora-fb-surface-slot{ display:flex; flex-direction:column; gap:var(--space-xs, 8px); padding:var(--space-sm, 12px) var(--space-sm, 12px) 0; }
.ora-fb-page-slot{
  position:sticky; top:var(--ora-header-h, 56px); z-index:290;
  display:flex; flex-direction:column; gap:var(--space-xs, 8px);
  padding:var(--space-sm, 12px) var(--space-lg, 24px);
}
@media (max-width:767px){ .ora-fb-page-slot{ padding:var(--space-sm, 12px) var(--space-md, 16px); } }

/* TOASTS · bottom left, clear of the rail, above the phone dock bar. */
.ora-fb-toasts{
  position:fixed; z-index:var(--z-toast, 1100);
  left:16px; bottom:16px;
  display:flex; flex-direction:column-reverse; gap:var(--space-xs, 8px);
  width:min(380px, calc(100vw - 32px));
  pointer-events:none;
}
body[data-ora-shell] .ora-fb-toasts{ left:calc(var(--ora-sb-w, 0px) + 16px); }
html[data-sidebar="collapsed"] body[data-ora-shell] .ora-fb-toasts{ left:calc(var(--ora-sb-w-icon, 0px) + 16px); }
@media (max-width:767px){ body[data-ora-shell] .ora-fb-toasts, html[data-sidebar="collapsed"] body[data-ora-shell] .ora-fb-toasts{ left:16px; } }
@media (max-width:480px){ .ora-fb-toasts{ bottom:calc(80px + env(safe-area-inset-bottom)); } }
.ora-fb--at-toast{
  position:relative; pointer-events:auto; box-shadow:var(--shadow-lg);
  padding-bottom:calc(var(--space-sm, 12px) + 6px); /* room for the timer hairline under the sentence */
  animation:ora-fb-in .22s var(--ease-out, ease-out);
}
/* The time left, as a hairline in the toast's colour. It stops while the toast is paused. */
.ora-fb-timer{
  position:absolute; left:var(--space-md, 16px); right:var(--space-md, 16px); bottom:4px;
  height:2px; background:var(--border); border-radius:2px; overflow:hidden;
}
.ora-fb-timer > i{ display:block; height:100%; width:100%; background:var(--fb-tone); transform-origin:left; animation:ora-fb-time linear forwards; }
.ora-fb[data-paused] .ora-fb-timer > i{ animation-play-state:paused; }
@keyframes ora-fb-time{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes ora-fb-in{ from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ora-fb--at-toast{ animation:none; } .ora-fb-timer{ display:none; } }

/* HELD CONTROLS (rule 9) · aria-disabled, still focusable, the quiet look from
   the mock, and the reason beside it (or on its own line in a button row). */
[data-ora-held="held"]{
  color:var(--text-tertiary) !important;
  background:color-mix(in srgb, var(--text) 4%, transparent) !important; background-image:none !important;
  border-color:transparent !important; box-shadow:none !important; filter:none !important;
  cursor:not-allowed; opacity:1; pointer-events:auto !important;
}
[data-ora-held="held"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ora-held-reason{
  display:inline-block; margin-left:var(--space-xs, 8px); vertical-align:middle;
  font-family:var(--font-body); font-size:var(--fs-xs); line-height:1.35;
  color:var(--text-tertiary); white-space:nowrap;
}