/* Drop 1052: progress bar, loading skeleton, empty states, phone cards, drafts, keyboard. Theme tokens with fallbacks for both portals. */
.ux-progress { position: fixed; z-index: 10000; inset-inline: 0; top: 0; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, var(--a-accent, var(--accent, #b8862b)), color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 55%, #fff)); }
[dir="rtl"] .ux-progress { transform-origin: 100% 50%; }
.ux-progress.is-on { opacity: 1; animation: ux-prog 8s cubic-bezier(.1,.7,.2,1) forwards; }
.ux-progress.is-done { opacity: 0; transform: scaleX(1); transition: opacity .3s .1s; }
@keyframes ux-prog { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 60% { transform: scaleX(.75); } 100% { transform: scaleX(.92); } }
.ux-loading { position: relative; } .ux-loading > * { opacity: .35; transition: opacity .2s; pointer-events: none; }
.ux-loading::after { content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--a-fg, var(--fg, #888)) 7%, transparent) 40%, transparent 60%); background-size: 200% 100%; animation: ux-shimmer 1.2s linear infinite; }
@keyframes ux-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.ux-empty { display: grid; justify-items: center; gap: .45rem; text-align: center; padding: 2.4rem 1.2rem; margin: .5rem 0 1rem; border-radius: 16px;
  border: 1px dashed var(--a-border, var(--border, #d6d3cc)); color: var(--a-fg-3, var(--fg-muted, #6b7280)); background: color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 3%, transparent); }
.ux-empty svg { color: color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 70%, transparent); } .ux-empty b { color: var(--a-fg, var(--fg, #1f2937)); font-size: 1rem; } .ux-empty span { font-size: .86rem; }
.ux-empty .ux-empty-cta { margin-top: .4rem; }

@media (max-width: 640px) {
  table.ux-cards, table.ux-cards tbody, table.ux-cards tr, table.ux-cards td { display: block; width: 100%; }
  table.ux-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.ux-cards tr { margin: 0 0 .7rem; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--a-border, var(--border, #e5e7eb)); background: var(--a-bg-2, var(--bg-card, #fff)); }
  table.ux-cards td { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .6rem; align-items: start; padding: .32rem 0 !important; border: 0 !important; text-align: start !important; }
  table.ux-cards td::before { content: attr(data-label); font-size: .74rem; font-weight: 700; color: var(--a-fg-3, var(--fg-muted, #6b7280)); }
  table.ux-cards td:not([data-label])::before, table.ux-cards td[data-label=""]::before { content: none; } table.ux-cards td:not([data-label]), table.ux-cards td[data-label=""] { grid-template-columns: 1fr; }
  table.ux-cards td.al-ck { display: flex; justify-content: flex-end; }
  .tp-wrap:has(> table.ux-cards), .a-table-wrap:has(> table.ux-cards) { overflow: visible; }
}

.ux-draft { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .65rem .9rem; margin: 0 0 .8rem; border-radius: 12px; font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 40%, transparent); background: color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 8%, transparent); }
.ux-draft span { flex: 1 1 14rem; } .ux-draft button { padding: .3rem .8rem; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; border: 1px solid var(--a-accent, var(--accent, #b8862b)); }
.ux-d-yes { background: var(--a-accent, var(--accent, #b8862b)); color: #fff; } .ux-d-no { background: transparent; color: var(--a-accent, var(--accent, #b8862b)); }

tr.ux-kb > td { box-shadow: inset 0 1px 0 var(--a-accent, var(--accent, #b8862b)), inset 0 -1px 0 var(--a-accent, var(--accent, #b8862b)); background: color-mix(in srgb, var(--a-accent, var(--accent, #b8862b)) 7%, transparent); }
.ux-keys { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: rgba(0,0,0,.45); }
.ux-keys-card { width: min(92vw, 380px); padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--a-bg-card, var(--bg-card, #fff)); color: var(--a-fg, var(--fg, #1f2937)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.ux-keys-card dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem; margin: .9rem 0; } .ux-keys-card dd { margin: 0; color: var(--a-fg-3, var(--fg-muted, #6b7280)); }
.ux-keys-card kbd { display: inline-block; min-width: 1.6em; padding: .05rem .4rem; border-radius: 6px; border: 1px solid var(--a-border, var(--border, #d1d5db)); border-bottom-width: 2px; font: 600 .78rem/1.4 ui-monospace, monospace; text-align: center; }
.ux-keys-card button { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--a-border, var(--border, #d1d5db)); background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* one visible focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--a-accent, var(--accent, #b8862b)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ux-progress.is-on { animation: none; transform: scaleX(.6); } .ux-loading::after { animation: none; } }
@media print { .ux-progress, .ux-draft, .ux-keys { display: none !important; } }

/* drop 1052: the admin panel's dark theme (data-admin-theme) takes the brand's dark status colors too — green, amber, red and blue text stay readable */
[data-admin-theme="dark"] {
  --c-bg:            var(--n-1000);
  --c-surface:       var(--n-950);
  --c-surface-2:     var(--n-900);
  --c-surface-3:     var(--n-800);
  --c-border:        #23272E;
  --c-border-strong: #333A45;
  --c-text:          var(--n-50);
  --c-text-2:        var(--n-400);
  --c-text-3:        var(--n-500);
  --c-text-invert:   var(--n-1000);
  --c-accent:        var(--gold-300);
  --c-accent-hover:  var(--gold-200);
  --c-accent-bg:     rgba(229, 168, 51, 0.12);
  --c-accent-border: rgba(229, 168, 51, 0.30);
  --c-accent-text:   var(--gold-300);
  --c-on-accent:     var(--n-1000);
  --c-info:          var(--blue-300);
  --c-info-bg:       rgba(0, 104, 215, 0.14);
  --c-info-text:     var(--blue-200);
  --c-on-info:       var(--n-1000);
  --c-success:       #4ADE9B;
  --c-success-bg:    rgba(74, 222, 155, 0.12);
  --c-warning:       #F0B54A;
  --c-warning-bg:    rgba(240, 181, 74, 0.12);
  --c-danger:        #F87171;
  --c-danger-bg:     rgba(248, 113, 113, 0.12);
  --c-shadow:        rgba(0, 0, 0, 0.55);
}
/* drop 1052: readable muted text in the portal's dark theme (AA 4.5:1 on cards) and the live pill on dark */
body.cp-dark { --fg-muted: #8E97A6; }
[data-admin-theme="dark"] .lv-pill[data-state="live"], body.cp-dark .lv-pill[data-state="live"] { color: #4ADE80; }
/* drop 1052: status text on dark cards — the light-theme shades were hard to read */
body.cp-dark { --fg-subtle: #7F8898; }
body.cp-dark :is(.is-down, .is-late, .is-bad, .cc-tl-when.is-late, .cj-due.is-late, .cc-pill.is-bad) { color: #F87171 !important; }
body.cp-dark :is(.cc-pill.is-warn, .is-warn) { color: #FBBF24 !important; }
body.cp-dark :is(.is-up, .is-ok, .cc-pill.is-ok) { color: #4ADE80 !important; }
body.cp-dark .is-late .cc-tl-when { color: #F87171 !important; }
/* drop 1052: status chips and small status text readable in both admin themes */
.sr-st-pending, .sr-st-reviewing { color: #E5A833; } .sr-st-quoted { color: #60A5FA; } .sr-st-approved { color: #4ADE80; } .sr-st-declined { color: #F87171; } .sr-st-completed { color: #A0A8B8; }
[data-admin-theme="light"] .sr-st-pending, [data-admin-theme="light"] .sr-st-reviewing { color: #8A5A08; } [data-admin-theme="light"] .sr-st-quoted { color: #1D4ED8; }
[data-admin-theme="light"] .sr-st-approved { color: #15803D; } [data-admin-theme="light"] .sr-st-declined { color: #B91C1C; } [data-admin-theme="light"] .sr-st-completed { color: #4B5563; }
[data-admin-theme="light"] :is(.is-bad, .is-late) { color: #B91C1C; } [data-admin-theme="light"] .an-crumb { color: #5A6472; }
[data-admin-theme="light"] .nd { --nd-warn: #7A5410; } [data-admin-theme="light"] .dw-count { color: #6E4A0C !important; }
[data-admin-theme="light"] .is-bad { color: #B91C1C !important; } [data-admin-theme="light"] .an-breadcrumb .an-crumb { color: #4B5563 !important; }
[data-admin-theme="light"] .is-active:not(.btn-a):not(.btn-a-primary) { color: #8A5A08; } [data-admin-theme="light"] .badge-gray { color: #4B5563; }
[data-admin-theme="light"] .cc-pill.is-warn { color: #92400E; } [data-admin-theme="light"] .an-crumb { color: #4B5563 !important; }
[data-admin-theme="light"] .nv-top { color: rgba(0, 0, 0, .74) !important; } [data-admin-theme="light"] .nv-top.is-active { color: #8A5A08 !important; }
[data-admin-theme="light"] .an-breadcrumb a, [data-admin-theme="light"] .an-breadcrumb .sep { color: #4B5563 !important; }
html[data-admin-theme="light"] .ix-6e93446f { color: #0E6B4C !important; } html[data-admin-theme="light"] .pgd-fab-l { color: #fff !important; }
html[data-admin-theme="light"] .an-crumb, html[data-admin-theme="light"] .an-crumb * { color: #4B5563 !important; }
html[data-admin-theme="light"] .badge-green { color: #11643A !important; }
html[data-admin-theme="light"] :is([style*="color:#16a34a"], [style*="color: #16a34a"], [style*="color:#16A34A"]) { color: #11703A !important; }