/* Ravenflows design system: Plumage components. Needs design/tokens.css first.
   New code uses the rf- classes. The short names on the right of a selector list
   (.btn, .chip, .seg, .pill, ...) are the same component for markup that already
   exists (web/agent.js, the classic dashboard), so both render identically.
   RTL-safe: logical properties throughout (inline = left/right in LTR, swapped in RTL). */

/* ---------- base ---------- */
.rf-root, .rf-root *, .rf-root *::before, .rf-root *::after { box-sizing: border-box; }
.rf-root { background: var(--bg); color: var(--ink); font: var(--w-regular) var(--t-md) / var(--lh) var(--font-sans); font-stretch: var(--stretch-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.rf-root :where(h1, h2, h3, h4, h5, p, figure, dl, dd) { margin: 0; }
.rf-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
.rf-root :where(a) { color: var(--accent-text); text-decoration: none; }
.rf-root :where(a:hover) { text-decoration: underline; text-underline-offset: 2px; }
.rf-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.rf-root [lang="ar"], .rf-root [dir="rtl"] { font-family: var(--font-arabic); }
.rf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf-display { font-stretch: var(--stretch-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-tight); text-wrap: balance; }
.rf-h1 { font-size: var(--t-2xl); }
.rf-h2 { font-size: var(--t-xl); font-stretch: var(--stretch-display); font-weight: var(--w-semibold); letter-spacing: var(--track-heading); line-height: var(--lh-snug); }
.rf-h3 { font-size: var(--t-lg); font-weight: var(--w-semibold); letter-spacing: var(--track-heading); line-height: var(--lh-snug); }
.rf-meta { font-size: var(--t-sm); color: var(--ink-3); }
.rf-mono, .rf-root code { font-family: var(--font-mono); font-size: .92em; }
.rf-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); border-block-end-width: 2px; background: var(--surface); color: var(--ink-2); font: 500 var(--t-2xs) / 1 var(--font-mono); justify-content: center; }

/* ---------- the mark ---------- */
.rf-mark { display: inline-block; width: 24px; height: 24px; color: var(--ink); flex: none; }
.rf-mark svg { display: block; width: 100%; height: 100%; }
.rf-mark .rf-mark-sheen, .rf-mark svg path:last-of-type { transition: filter var(--dur-3); }
.rf-mark.is-live svg path:last-of-type, .rf-mark:hover svg path:last-of-type { animation: rf-sheen var(--dur-sheen) ease-in-out infinite; }
.rf-mark:hover svg path:last-of-type { animation-iteration-count: 1; }
@keyframes rf-sheen { 0%, 100% { filter: hue-rotate(0); } 50% { filter: hue-rotate(70deg) brightness(1.15); } }
.rf-lockup { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-stretch: var(--stretch-display); font-weight: 700; letter-spacing: -0.03em; font-size: var(--t-lg); line-height: 1; text-decoration: none; }
.rf-lockup:hover { text-decoration: none; }

/* ---------- buttons ---------- */
.rf-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 34px; padding-inline: 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: var(--t-sm); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.rf-btn:hover, .btn:hover { border-color: var(--ink-3); text-decoration: none; }
.rf-btn--primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.rf-btn--primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.rf-btn--accent, .btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rf-btn--accent:hover, .btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rf-btn--ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.rf-btn--ghost:hover, .btn.ghost:hover { background: var(--sunken); color: var(--ink); }
.rf-btn--danger, .btn.danger { background: transparent; border-color: transparent; color: var(--broken-text); }
.rf-btn--danger:hover, .btn.danger:hover { background: var(--broken-soft); }
.rf-btn--sm, .btn.small { height: 28px; padding-inline: 10px; font-size: var(--t-xs); border-radius: var(--r-sm); }
.rf-btn--lg { height: 42px; padding-inline: 20px; font-size: var(--t-md); border-radius: var(--r-md); }
.rf-btn--icon { width: 34px; padding: 0; }
.rf-btn--icon.rf-btn--sm { width: 28px; }
.rf-btn[disabled], .btn[disabled], .rf-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn.primary-ghost { border-color: var(--accent); color: var(--accent-text); }
.rf-btn svg, .btn svg { flex: none; }

/* ---------- inputs ---------- */
.rf-field { display: grid; gap: 6px; }
.rf-field > .rf-label { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-2); }
.rf-field > .rf-hint { font-size: var(--t-xs); color: var(--ink-3); }
.rf-field > .rf-error { font-size: var(--t-xs); color: var(--broken-text); }
.rf-input, .rf-textarea, .rf-select {
  width: 100%; min-width: 0; height: 34px; padding-inline: 12px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: var(--t-sm);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.rf-textarea { height: auto; min-height: 72px; padding-block: 8px; resize: vertical; line-height: var(--lh); }
.rf-input::placeholder, .rf-textarea::placeholder { color: var(--ink-3); }
.rf-input:focus, .rf-textarea:focus, .rf-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.rf-input[aria-invalid="true"] { border-color: var(--broken); }
.rf-select { appearance: none; padding-inline-end: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%); background-size: 5px 5px; background-repeat: no-repeat; background-position: right 15px center, right 10px center; }
[dir="rtl"] .rf-select { background-position: left 10px center, left 15px center; }
.rf-search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.rf-search svg { position: absolute; inset-inline-start: 11px; color: var(--ink-3); pointer-events: none; }
.rf-search .rf-input { padding-inline-start: 32px; border-radius: var(--r-pill); }

/* ---------- chips (filters) ---------- */
.rf-chip, .chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-medium);
  cursor: pointer; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.rf-chip:hover, .chip:hover { color: var(--ink); border-color: var(--line-strong); }
.rf-chip[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rf-chip .n, .chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rf-chip[aria-pressed="true"] .n, .chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }

/* ---------- status: one quiet state per screen ---------- */
.rf-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.rf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--untested); }
.rf-status[data-state="matches"]::before { background: var(--works); }
.rf-status[data-state="broken"] { color: var(--broken-text); }
.rf-status[data-state="broken"]::before { background: var(--broken); }
.rf-status[data-state="differs"] { color: var(--differs-text); }
.rf-status[data-state="differs"]::before { background: var(--differs); }
.rf-status[data-state="kept"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--kept); }
.rf-status[data-state="unchecked"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--unchecked); }
.rf-status[data-state="not-covered"]::before { background: transparent; border: 1.5px dashed var(--uncovered); width: 9px; height: 9px; }
.rf-status[data-state="not-planned"] { color: var(--ink-3); }
.rf-status[data-state="not-planned"]::before { width: 9px; height: 2px; border-radius: 1px; background: var(--ink-3); }
.rf-status[data-state="live"]::before { background: conic-gradient(var(--sheen-1), var(--sheen-2), var(--sheen-3), var(--sheen-1)); animation: rf-spin 1.6s linear infinite; }
.rf-status--dot { font-size: 0; gap: 0; }
@keyframes rf-spin { to { transform: rotate(1turn); } }

/* ---------- badges / pills ---------- */
.rf-badge, .pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 9px; border-radius: var(--r-pill); font-size: var(--t-2xs); font-weight: var(--w-semibold); background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.rf-badge[data-tone="ok"], .pill.works { background: var(--works-soft); color: var(--works-text); }
.rf-badge[data-tone="bad"], .pill.broken { background: var(--broken-soft); color: var(--broken-text); }
.rf-badge[data-tone="warn"] { background: var(--differs-soft); color: var(--differs-text); }
.rf-badge[data-tone="info"], .pill.waiting { background: var(--accent-soft); color: var(--accent-text); }
.rf-badge[data-tone="solid"], .pill.accent { background: var(--ink); color: var(--bg); }
.rf-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--t-2xs); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }

/* ---------- card ---------- */
.rf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); min-width: 0; box-shadow: var(--e-1); }
.rf-card--interactive { cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.rf-card--interactive:hover { border-color: var(--line-strong); box-shadow: var(--e-2); }

/* ---------- tabs and segmented control ---------- */
.rf-tabs { display: flex; gap: var(--s-1); border-block-end: 1px solid var(--line); }
.rf-tab { position: relative; border: 0; background: none; padding: 10px 2px; margin-inline-end: var(--s-4); color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-medium); cursor: pointer; }
.rf-tab[aria-selected="true"] { color: var(--ink); }
.rf-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.rf-seg, .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--r-md) + 3px); background: var(--sunken); }
.rf-seg button, .seg button { height: 28px; padding-inline: 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-medium); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rf-seg button:hover, .seg button:hover { color: var(--ink); }
.rf-seg button[aria-pressed="true"], .seg button[aria-pressed="true"], .rf-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 17, 22, .12), 0 0 0 1px var(--line); }

/* ---------- toast ---------- */
.rf-toast { position: fixed; inset-inline-start: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-md); font-size: var(--t-sm); box-shadow: var(--e-3); opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); max-width: min(90vw, 560px); z-index: var(--z-toast); }
[dir="rtl"] .rf-toast { transform: translate(50%, 8px); }
.rf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .rf-toast.is-on { transform: translate(50%, 0); }

/* ---------- drawer and dialog ---------- */
.rf-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-drawer) - 1); animation: rf-fade var(--dur-2) var(--ease); }
.rf-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100vw); background: var(--raised); box-shadow: var(--e-3); z-index: var(--z-drawer); display: flex; flex-direction: column; animation: rf-slide-in var(--dur-3) var(--ease-out); }
[dir="rtl"] .rf-drawer { animation-name: rf-slide-in-rtl; }
.rf-drawer-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--line); }
.rf-drawer-head h2 { font-size: var(--t-lg); font-weight: var(--w-semibold); margin-inline-end: auto; }
.rf-drawer-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
.rf-dialog { border: 0; padding: 0; border-radius: var(--r-xl); background: var(--raised); color: var(--ink); box-shadow: var(--e-3); width: min(480px, calc(100vw - 32px)); }
.rf-dialog::backdrop { background: var(--scrim); }
.rf-dialog[open] { animation: rf-pop var(--dur-2) var(--ease-out); }
.rf-dialog-body { padding: var(--s-6); display: grid; gap: var(--s-3); }
.rf-dialog-body h2 { font-size: var(--t-lg); font-weight: var(--w-semibold); }
.rf-dialog-body p { color: var(--ink-2); font-size: var(--t-sm); }
.rf-dialog-acts { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-block-start: 1px solid var(--line); }
@keyframes rf-fade { from { opacity: 0; } }
@keyframes rf-slide-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes rf-slide-in-rtl { from { transform: translateX(-24px); opacity: 0; } }
@keyframes rf-pop { from { transform: scale(.97); opacity: 0; } }

/* ---------- table ---------- */
.rf-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rf-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rf-table th { text-align: start; font-weight: var(--w-medium); color: var(--ink-3); font-size: var(--t-xs); padding: 10px 14px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.rf-table td { padding: 12px 14px; border-block-end: 1px solid var(--line); vertical-align: top; }
.rf-table tr:last-child td { border-block-end: 0; }
.rf-table tbody tr:hover { background: color-mix(in srgb, var(--sunken) 50%, transparent); }
.rf-table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- empty state ---------- */
.rf-empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-12) var(--s-5); text-align: center; color: var(--ink-2); }
.rf-empty h2 { font-size: var(--t-lg); font-weight: var(--w-semibold); color: var(--ink); }
.rf-empty p { max-width: 46ch; font-size: var(--t-sm); }
.rf-empty .rf-btn { margin-block-start: var(--s-2); }

/* ---------- skeleton ---------- */
.rf-skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sunken) 0%, var(--sunken-2) 50%, var(--sunken) 100%) 0 0 / 200% 100%; animation: rf-shimmer 1.4s ease-in-out infinite; }
@keyframes rf-shimmer { to { background-position: -200% 0; } }

/* ---------- device frames (phone / desktop) ---------- */
.rf-device { position: relative; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--e-frame); }
.rf-device--phone { aspect-ratio: 390 / 844; }
.rf-device--desktop { border-radius: var(--r-md); aspect-ratio: 16 / 10; }
.rf-device--desktop::before { content: ""; display: block; height: 22px; background: var(--sunken); border-block-end: 1px solid var(--line); background-image: radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px), radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px), radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px); background-size: 14px 22px; background-position: 6px 0, 20px 0, 34px 0; background-repeat: no-repeat; }
.rf-device img { display: block; width: 100%; height: auto; }
.rf-device.is-broken { box-shadow: 0 0 0 2px var(--broken), var(--e-frame); }
.rf-device.is-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--sheen); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* ---------- compare viewer chrome ---------- */
.rf-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.rf-compare-bar .rf-range { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-2); }
.rf-compare-bar input[type="range"] { width: 140px; accent-color: var(--ink); }
.rf-stage { position: relative; border-radius: var(--r-xl); background: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--sunken); overflow: hidden; }
.rf-legend { display: inline-flex; gap: var(--s-3); font-size: var(--t-xs); color: var(--ink-2); }
.rf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rf-legend i { width: 10px; height: 10px; border-radius: 2px; border: 2px solid currentColor; }
.rf-legend .design { color: var(--layer-design); }
.rf-legend .app { color: var(--layer-app); }
.rf-legend .design + b, .rf-legend .app + b { color: var(--ink-2); }
.rf-onion { position: relative; isolation: isolate; }
.rf-onion > .rf-layer { position: absolute; inset: 0; }
.rf-onion > .rf-layer img, .rf-onion > img { display: block; width: 100%; height: auto; }
.rf-onion.is-tinted > .rf-layer--design { filter: url(#rf-tint-design); }
.rf-onion.is-tinted > .rf-layer--app { filter: url(#rf-tint-app); mix-blend-mode: multiply; }
.rf-swipe-handle { position: absolute; inset-block: 0; width: 2px; margin-inline-start: -1px; background: var(--ink); pointer-events: none; }
.rf-swipe-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--e-2); }
.rf-outline-design { box-shadow: 0 0 0 2px var(--layer-design); }
.rf-outline-app { box-shadow: 0 0 0 2px var(--layer-app); }

/* ---------- pins ---------- */
.rf-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 2px; rotate: -45deg; border: 2px solid var(--surface); box-shadow: var(--e-2); background: var(--ink); color: var(--bg); cursor: pointer; padding: 0; }
.rf-pin > span { rotate: 45deg; font-size: var(--t-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-pin[data-kind="failure"] { background: var(--broken); color: #fff; }
.rf-pin[data-kind="difference"] { background: var(--differs); color: #1A1200; }
.rf-pin[data-kind="kept"] { background: var(--kept); color: var(--accent-ink); }
.rf-pin[data-kind="comment"] { background: var(--ink); color: var(--bg); }
.rf-pin[aria-pressed="true"] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rf-pin.is-resolved { opacity: .45; }

/* ---------- change card ---------- */
.rf-change, .change { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); min-width: 0; }
.rf-change-head, .change-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.rf-change-head h3, .change-head h3 { font-size: var(--t-md); font-weight: var(--w-semibold); }
.rf-change-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.rf-change-shots figcaption { font-size: var(--t-2xs); font-weight: var(--w-semibold); color: var(--ink-3); margin-block-end: 4px; }
.rf-change-acts, .change-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block-start: var(--s-3); border-block-start: 1px solid var(--line); }

/* ---------- chat bubbles ---------- */
.rf-thread { display: flex; flex-direction: column; gap: var(--s-3); }
.rf-bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: var(--t-sm); line-height: var(--lh); }
.rf-bubble--me { align-self: flex-end; background: var(--ink); color: var(--bg); border-end-end-radius: 4px; white-space: pre-wrap; }
.rf-bubble--assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-end-start-radius: 4px; }
.rf-bubble--note { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px 4px; font-size: var(--t-xs); color: var(--ink-2); background: none; }

/* ---------- avatar ---------- */
.rf-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sunken-2); color: var(--ink-2); font-size: var(--t-2xs); font-weight: var(--w-semibold); flex: none; }
.rf-avatar--check { background: var(--broken-soft); color: var(--broken-text); }
.rf-avatar--assistant { background: var(--ink); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .rf-mark svg path:last-of-type, .rf-status[data-state="live"]::before, .rf-skeleton, .rf-drawer, .rf-scrim, .rf-dialog[open] { animation: none !important; }
}