/*
  PROTOTYPE (ticket 10), throwaway. The plugin's own interface: skin B, written in the CSS subset that
  Adobe's UXP documents. Skins A and C and the first, unconstrained version of B are in commit a766414.

  Rules this file keeps (research/uxp-css-and-fonts-support, branch of the same name, read 2026-10-03; each is
  what the docs say, none was run in a UXP host):
    - no CSS grid, no `gap`, no `position: sticky`, no `inset` and no inset shadows, no `outline`,
      no `:focus-visible`, no `transition`, no `text-transform`, no `all: unset`, no `font` shorthand,
      no negative letter-spacing, no container queries, no `@font-face`;
    - layout is flexbox (`flex`, `flex-wrap`, `align-items`, `justify-content`); spacing is margins;
    - lines are real borders; focus is a border-colour change on `:focus`; colours are `rgba()`;
    - state hooks are classes, not `aria-*`; the panel is docked at one width (440px) and has no narrow layout;
    - the face is a system font by name, the host font being the documented last fallback. Anybody cannot be
      shipped in a panel; the choice of face is Marcos's (see the ticket).
  Values: [measured] from Adobe's After Effects screenshot and Spectrum 1.12.4 "darkest" (ae.css);
  [adr] from tokens.css (ticket 12); [guess] this prototype's own.
*/

.pl { --bg: #1d1d1d; --bar: #1d1d1d; --comp: #2a2a2a; --btn: #333333; --comp-h: #3d3d3d; --sel: #353535; --well: #121212;      /* [measured] #1d1d1d; steps [guess] */
  --hair: rgba(255, 255, 255, 0.09); --text: #ffffff; --text2: rgba(255, 255, 255, 0.74); --text3: rgba(255, 255, 255, 0.56);
  --accent: #ffff06; --on-accent: #000000; --cta: #ffffff; --on-cta: #000000; --cta-h: #ffff06;                                 /* [adr] */
  --bad: #ff6568; --bad-bg: rgba(255, 101, 104, 0.14); --notice: #ffff06; --notice-bg: rgba(255, 255, 6, 0.07); --notice-line: rgba(255, 255, 6, 0.35); --ic: #ffffff;
  position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial; font-size: 13px; line-height: 1.4; }

/* ------------------------------------------------------------------ frame */
.p-head { flex: 0 0 auto; background: var(--bar); padding: 12px 16px 0; }
.p-top { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; min-height: 30px; }
.p-brand { display: flex; align-items: center; min-width: 0; }
.p-brand img { height: 11px; }
.p-brand small { color: var(--text3); margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--hair); font-size: 12px; white-space: nowrap; }
.grow { flex: 1 1 0; min-width: 0; }
.p-mid { display: flex; align-items: center; flex: 0 0 auto; margin-left: 12px; }
.p-mid code, .p-idbox code { font-family: Consolas, "Courier New", monospace; letter-spacing: 0.04em; color: var(--text); }
/* A Machine ID is 17 characters (12 hex digits in pairs): tight enough to share the row with the logo, and a button of
   one width so "Copiado" does not push the row to wrap. */
.p-mid code { margin-right: 6px; padding: 4px 6px; background: var(--well); font-size: 11px; letter-spacing: 0; }
.p-mid .p-btn { min-width: 74px; justify-content: center; }
.p-head--solo { padding-bottom: 12px; border-bottom: 1px solid var(--hair); }

/* A blocked licença: the whole panel is this one block. */
.p-lockbox { padding: 32px 0 0; }
.p-lockbox > .mf-pix { display: block; width: 20px; height: 20px; margin-bottom: 14px; }
.p-lockbox h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.p-lockbox p { margin: 0 0 20px; color: var(--text2); }
.p-idbox { display: flex; align-items: center; padding: 10px 12px; background: var(--well); }
.p-idbox .k { margin-right: 12px; color: var(--text3); font-size: 12px; }
.p-idbox code { flex: 1 1 0; min-width: 0; font-size: 15px; }
.p-steps { display: flex; margin: 10px -16px 0; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.p-step { display: flex; align-items: center; height: 38px; padding: 0 14px 0 0; margin: 0 8px 0 0; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text3); font-family: inherit; font-size: 13px; }
.p-step b { display: flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin-right: 8px; font-size: 11px; font-weight: 600; background: var(--comp); color: var(--text2); }
.p-step.is-done { color: var(--text2); }
.p-step.is-done:hover { color: var(--text); }
.p-step.is-current { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.p-step.is-current b { background: var(--accent); color: var(--on-accent); }
.p-step:focus { border-bottom-color: var(--accent); }
.p-step[aria-disabled=true] { cursor: default; }

.p-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 16px; }  /* the plugin never scrolls sideways */
.p-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; padding: 12px 16px 4px; background: var(--bar); border-top: 1px solid var(--hair); }
.p-foot .p-btn { margin: 0 8px 8px 0; }
.p-foot .grow + .p-btn { margin-right: 0; }

/* ------------------------------------------------------------------ sections */
.p-sec { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.p-sec:last-child { border-bottom: 0; }
.p-sec--attn { border-left: 2px solid var(--accent); padding-left: 12px; margin-left: -14px; }  /* where the missing step is */
.p-meta.p-need { color: var(--accent); font-size: 13px; font-weight: 500; }
.p-h { display: flex; align-items: baseline; margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--text2); }
.p-h .n { margin-left: 10px; color: var(--text3); font-weight: 400; }
.p-help { color: var(--text3); font-size: 12px; margin: 4px 0 0; }
.p-meta { color: var(--text3); font-size: 12px; }
.p-subh { display: flex; align-items: center; margin: 14px 0 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--text3); }
.p-subh .p-meta { margin-left: 8px; }

/* ------------------------------------------------------------------ buttons */
.p-btn { display: flex; align-items: center; justify-content: center; height: 32px; margin: 0; padding: 0 14px; background: var(--btn); border: 1px solid transparent; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; }
.p-btn:hover { background: var(--comp-h); }
.p-btn:focus { border-color: var(--accent); }
.p-btn[aria-disabled=true], .p-btn:disabled { opacity: 0.4; }
.p-btn .mf-pix { margin-right: 8px; }
.p-btn--primary { background: var(--cta); color: var(--on-cta); --ic: #000000; }
.p-btn--primary:hover { background: var(--cta-h); color: var(--on-accent); }
.p-btn--ghost { background: transparent; color: var(--text2); }
.p-btn--ghost:hover { background: var(--comp); color: var(--text); }
.p-btn--sm { height: 26px; padding: 0 10px; font-size: 12px; }
.p-btn--block { width: 100%; }
.p-btn--icon { width: 26px; padding: 0; }
.p-btn--icon .mf-pix { margin-right: 0; }
.p-btn--attn { background: rgba(255, 255, 6, 0.12); color: var(--accent); }
.p-btn--attn:hover { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ fields */
.p-field { display: flex; flex-direction: column; }
.p-label { font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }
.p-label .p-tag { margin-left: 6px; }
.p-input { height: 32px; margin: 0; padding: 0 10px; background: var(--well); border: 1px solid transparent; color: var(--text); font-family: inherit; font-size: 13px; }
.p-input:hover { border-color: rgba(255, 255, 255, 0.16); }
.p-input:focus { border-color: var(--accent); }
.p-inline { display: flex; align-items: center; }
.p-inline .p-input { flex: 0 0 88px; width: 88px; margin-right: 8px; }
.p-inline .p-meta { margin-right: 8px; }
.p-seg { display: flex; align-self: flex-start; padding: 2px; background: var(--well); }
.p-seg button { display: flex; align-items: center; height: 28px; margin: 0; padding: 0 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text2); font-family: inherit; font-size: 13px; font-weight: 500; }
.p-seg button:hover { color: var(--text); }
.p-seg button.is-on { background: var(--sel); color: var(--text); border-bottom-color: var(--accent); }
.p-seg button:focus { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ tags, rows, accordions */
.p-tag { display: flex; align-items: center; height: 20px; padding: 0 8px; background: var(--comp); color: var(--text2); font-size: 11px; font-weight: 500; white-space: nowrap; }
.p-tag .mf-pix { margin-right: 6px; }
.p-tag--attn { background: rgba(255, 255, 6, 0.12); color: var(--accent); --ic: #ffff06; }
.p-st { display: flex; align-items: center; }
.p-st .mf-pix { margin-right: 6px; }
.p-st--bad { color: var(--bad); --ic: #ff6568; }
.mf-pix { width: 10px; height: 10px; flex: 0 0 10px; }
.p-chev { flex: 0 0 10px; margin-right: 10px; }
.p-acc__t > span.tags, .tags { display: flex; overflow: visible; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.tags > * { margin: 2px 6px 0 0; }
.btnrow { display: flex; flex-wrap: wrap; margin: 0 0 -8px; }
.btnrow > * { margin: 0 8px 8px 0; }

.p-list { display: flex; flex-direction: column; }
.p-acc { border-bottom: 1px solid var(--hair); }
.p-acc:last-child { border-bottom: 0; }
.p-acc__row { display: flex; align-items: center; }
.p-acc__row .p-acc__h { flex: 1 1 0; width: auto; }
.p-acc__h { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 6px 0 6px 4px; background: transparent; border: 0; color: inherit; font-family: inherit; font-size: 13px; text-align: left; }
.p-acc__h:hover { background: var(--comp); }
.p-acc__h:focus { background: var(--comp); }
.p-acc__t { flex: 1 1 0; min-width: 0; line-height: 1.3; }
.p-acc__t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-acc__t > span { display: block; color: var(--text3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-acc__b { padding: 8px 0 14px 24px; }
.p-acc.is-done .p-acc__t b { color: var(--text2); font-weight: 500; }
.p-end { display: flex; align-items: center; flex: 0 0 auto; margin-left: 8px; }

.p-path { display: flex; align-items: center; padding: 8px 8px 8px 12px; background: var(--well); }
.p-path > .mf-pix { margin-right: 10px; }
.p-path code { flex: 1 1 0; min-width: 0; margin-right: 8px; font-family: Consolas, "Courier New", monospace; font-size: 12px; color: var(--text); overflow-wrap: break-word; }
.p-hero { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.p-hero .th { flex: 0 0 56px; width: 56px; height: 36px; margin-right: 12px; background: #000000; overflow: hidden; }
.p-hero .th svg { width: 100%; height: 100%; }
.p-hero .t { flex: 1 1 0; min-width: 0; line-height: 1.3; }
.p-hero b { display: block; font-weight: 600; }
.p-hero span { color: var(--text3); font-size: 12px; }

.p-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.p-row:last-child { border-bottom: 0; }
.p-row > div:first-child { flex: 1 1 0; min-width: 0; margin-right: 10px; }
.p-row b { font-weight: 500; }
.p-row small { display: block; color: var(--text3); font-size: 12px; }

/* ------------------------------------------------------------------ notices */
.p-notice { display: flex; align-items: flex-start; margin: 12px 0 0; padding: 10px 14px; background: var(--notice-bg); border: 1px solid var(--notice-line); --ic: #ffff06; }
.p-notice > .mf-pix { margin: 4px 10px 0 0; }
.p-notice > div { flex: 1 1 0; min-width: 0; }
.p-notice p { margin: 0 0 8px; color: var(--text); }
.p-notice p:last-child { margin-bottom: 0; }
.p-notice--first { margin-top: 16px; }
.p-notice--info { --notice-bg: var(--comp); --notice-line: var(--hair); --ic: rgba(255, 255, 255, 0.56); }
.p-notice--bad { --notice: var(--bad); --notice-bg: var(--bad-bg); --notice-line: rgba(255, 101, 104, 0.45); --ic: #ff6568; }

/* ------------------------------------------------------------------ relatório */
.p-tiles { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.p-tile { flex: 1 1 22%; min-width: 0; margin: 0 4px; padding: 8px 12px; background: var(--comp); }
.p-tile .n { display: block; font-size: 26px; line-height: 1; margin-bottom: 6px; }
.p-tile .n small { font-size: 14px; color: var(--text3); }
.p-tile .l { font-size: 12px; font-weight: 500; color: var(--text2); white-space: nowrap; }
.p-tile.is-attn .n { color: var(--accent); }
.p-tile.is-bad .n { color: var(--bad); }
.p-lista { display: flex; align-items: center; margin-top: 8px; color: var(--text2); font-size: 12px; }
.p-lista .p-btn { margin-left: 8px; }
.p-lista .p-btn--sm { padding: 0 8px; }
.p-tabs { display: flex; margin: 12px -16px 0; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.p-tab { display: flex; align-items: center; height: 38px; margin: 0 4px 0 0; padding: 0 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text2); font-family: inherit; font-size: 13px; font-weight: 500; }
.p-tab:hover { color: var(--text); }
.p-tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
.p-tab:focus { border-bottom-color: var(--accent); }
.p-tab .c { margin-left: 8px; color: var(--text3); font-weight: 400; }

.p-kv { margin: 10px 0 0; padding: 12px; background: var(--well); font-size: 12px; }
.p-kv + .btnrow { margin-top: 12px; }
.p-kv .r { display: flex; margin-bottom: 4px; }
.p-kv .r:last-child { margin-bottom: 0; }
.p-kv .k { flex: 0 0 112px; margin-right: 12px; color: var(--text3); }
.p-kv .v { flex: 1 1 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.p-motivos { margin: 0; }
.p-motivos .m { display: flex; align-items: flex-start; margin-bottom: 4px; }
.p-motivos .mf-pix { margin: 5px 8px 0 0; }

/* /* ------------------------------------------------------------------ Importar, progress, modal */
.p-empty { display: flex; flex-direction: column; align-items: center; padding: 36px 16px; background: var(--well); text-align: center; }
.p-empty p { margin: 0 0 14px; color: var(--text2); }
.p-file { display: flex; align-items: center; padding: 10px 12px; background: var(--comp); }
.p-file > .mf-pix { margin-right: 10px; }
.p-file .t { flex: 1 1 0; min-width: 0; line-height: 1.3; }
.p-file b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.p-file span { color: var(--text3); font-size: 12px; }
.p-prog { display: flex; align-items: baseline; }
.p-prog .n { font-size: 34px; line-height: 1; font-weight: 600; }
.p-prog .of { margin-left: 8px; color: var(--text3); font-size: 14px; }
.p-bar { height: 6px; margin: 12px 0 0; background: var(--well); }
.p-bar i { display: block; height: 100%; background: var(--accent); }
.p-scrim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.62); }
.p-modal { width: 100%; max-width: 380px; padding: 18px; background: var(--comp); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6); }
.p-modal h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.p-modal p { margin: 0 0 16px; color: var(--text2); }
.p-modal .btnrow { justify-content: flex-end; }