/* Ingest to Spotsheet — popup styles (ported from the design HTML <style>). */

html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(120% 80% at 70% -10%, #20242a 0%, #131518 55%, #0e1012 100%);
  font-family: var(--ui); color: var(--fg); -webkit-font-smoothing: antialiased;
  display: flex; align-items: flex-start; justify-content: center; padding: 20px;
}
#root { width: 100%; display: flex; justify-content: center; }

/* spinner */
.xp-spin { display: inline-block; border-radius: 50%; border: 1.5px solid var(--teal-line); border-top-color: var(--teal); animation: xp-spin .7s linear infinite; }
@keyframes xp-spin { to { transform: rotate(360deg); } }

/* THE POPUP */
.xp { position: relative; width: 380px; background: var(--bg-app); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--float), 0 24px 60px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; }
.xp.wide { width: 452px; }
.xp-head { height: 46px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: var(--bg-panel); }
.xp-mono7 { font-family: var(--mono); font-weight: 700; }
.xp-brand { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.xp-wm { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--fg); }
.xp-sub { font-size: 11px; color: var(--fg-dim); letter-spacing: .02em; }
.xp-grow { flex: 1; }
.xp-acct { display: flex; align-items: center; gap: 8px; }
.xp-conn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); }
.xp-conn-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--st-resolved); box-shadow: 0 0 0 2px rgba(122,154,134,.18); }
.xp-x { width: 26px; height: 26px; border-radius: 5px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.xp-x:hover { background: var(--bg-sub); color: var(--fg); }
.xp-ctx { flex-shrink: 0; height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 13px; font-size: 11px; color: var(--fg-dim); background: var(--bg-deep); border-bottom: 1px solid var(--line-soft); }
.xp-ctx b { color: var(--fg-mute); font-weight: 500; font-family: var(--mono); font-size: 10.5px; }
.xp-body { padding: 14px; overflow: auto; max-height: min(64vh, 470px); }
.xp.wide .xp-body { max-height: min(66vh, 510px); }
.xp-foot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--line); background: var(--bg-panel); }
.xp-foot-hint { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.xp-foot-hint b { color: var(--fg-mute); font-weight: 500; }
.xp-foot-hint svg { color: var(--teal-deep); }
.xp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--st-resolved); }
.xp-stack { display: flex; flex-direction: column; gap: 15px; }
.xp-sec { display: flex; flex-direction: column; gap: 7px; position: relative; }
.xp-seclabel { display: flex; align-items: center; min-height: 16px; }
.xp-seclabel > span:first-child { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.xp-link { margin-left: auto; background: 0; border: 0; cursor: pointer; font-size: 11px; color: var(--fg-mute); display: inline-flex; align-items: center; gap: 5px; }
.xp-link:hover { color: var(--fg); }
.xp-capbox { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--fg); background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 11px; width: 100%; min-height: 96px; max-height: 150px; resize: vertical; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); box-sizing: border-box; }
.xp-capbox:focus { border-color: var(--teal-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px var(--teal-glow); }
.xp-capbox.tall { min-height: 134px; max-height: 220px; }
.xp-capbox::placeholder { color: var(--fg-dim); }
.xp-capmeta { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--fg-faint); }
.xp-capmeta code { color: var(--fg-mute); }
.xp-picker { position: relative; }
.xp-proj { display: flex; align-items: center; gap: 9px; min-width: 0; }
.xp-code { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .02em; color: rgba(0,0,0,.62); padding: 3px 5px; border-radius: 3px; flex-shrink: 0; }
.xp-proj-name { color: var(--fg-strong); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-ver { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: 3px; padding: 1px 5px; flex-shrink: 0; }
.xp-picker-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--float); overflow: hidden; }
.xp-picker-search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line-soft); color: var(--fg-dim); }
.xp-picker-search input { flex: 1; background: 0; border: 0; outline: 0; color: var(--fg); font-family: var(--ui); font-size: 13px; }
.xp-picker-list { max-height: 230px; overflow: auto; padding: 4px; }
.xp-picker-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--fg-dim); }
.xp-picker-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 0; background: 0; border-radius: var(--r-2); cursor: pointer; text-align: left; }
.xp-picker-row:hover { background: var(--bg-row-hover); }
.xp-picker-row.sel { background: var(--bg-row-sel); }
.xp-picker-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.xp-picker-recent { font-family: var(--mono); font-size: 9.5px; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; }
.xp-picker-recent em { color: var(--teal); font-style: normal; font-size: 8px; }
.xp-picker-tick { color: var(--teal); display: inline-flex; flex-shrink: 0; }
.xp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xp-act { position: relative; text-align: left; cursor: pointer; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-3); padding: 11px 12px 32px; display: flex; flex-direction: column; gap: 4px; transition: border-color .14s, background .14s, box-shadow .14s; box-shadow: var(--inset-panel); }
.xp-act:hover { border-color: var(--line-strong); background: var(--bg-sub); }
.xp-act:active { transform: translateY(.5px); }
.xp-act[disabled] { cursor: default; opacity: .7; }
.xp-act-ic { width: 26px; height: 26px; border-radius: var(--r-2); background: var(--bg-sub); border: 1px solid var(--line); color: var(--fg-mute); display: inline-flex; align-items: center; justify-content: center; }
.xp-act-t { font-size: 12.5px; color: var(--fg-strong); font-weight: 500; letter-spacing: -.005em; }
.xp-act-d { font-size: 11px; line-height: 1.4; color: var(--fg-mute); }
.xp-act-meta { position: absolute; left: 12px; bottom: 11px; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.xp-act.primary { border-color: var(--teal-line); background: linear-gradient(180deg, rgba(53,197,199,0.08), rgba(53,197,199,0.02)); }
.xp-act.primary:hover { border-color: var(--teal); background: linear-gradient(180deg, rgba(53,197,199,0.13), rgba(53,197,199,0.04)); }
.xp-act.primary .xp-act-ic { background: var(--teal-bg); border-color: var(--teal-line); color: var(--teal); }
.xp-act.primary .xp-act-t { color: var(--teal); }
.xp-act.primary .xp-act-meta { color: var(--teal-deep); }
.xp-act.copied { border-color: var(--teal-line); background: var(--teal-bg); }
.xp-act.copied .xp-act-ic { color: var(--teal); border-color: var(--teal-line); background: var(--teal-bg); }
.xp-act.copied .xp-act-t { color: var(--teal); }
.xp-steps { display: flex; align-items: center; gap: 7px; padding: 2px 0 1px; }
.xp-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
.xp-step.on { color: var(--fg-strong); }
.xp-step.done { color: var(--fg-mute); }
.xp-step-n { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; border: 1px solid var(--line); color: var(--fg-dim); }
.xp-step.on .xp-step-n, .xp-step.done .xp-step-n { border-color: var(--teal-line); background: var(--teal-bg); color: var(--teal); }
.xp-step-sep { flex: 1; height: 1px; background: var(--line-soft); min-width: 8px; }
.xp-exlink { align-self: flex-start; margin-top: 2px; background: 0; border: 0; cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); padding: 2px 0; }
.xp-exlink:hover { color: var(--fg-mute); }
.xp-login { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding: 26px 18px 14px; }
.xp-login .nt-mark.lg { margin-bottom: 4px; }
.xp-login-h { font-size: 18px; color: var(--fg-strong); font-weight: 500; }
.xp-login-p { font-size: 12.5px; line-height: 1.6; color: var(--fg-mute); max-width: 32ch; margin: -4px 0 6px; }
.xp-fineprint { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); font-size: 11px; line-height: 1.5; color: var(--fg-dim); text-align: left; }
.xp-fineprint svg { flex-shrink: 0; margin-top: 1px; color: var(--fg-mute); }
.xp-fineprint b { color: var(--fg-mute); }
.xp-ai { display: flex; flex-direction: column; gap: 12px; }
.xp-guessbar { display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: var(--r-2); border: 1px solid rgba(193,147,85,.36); background: var(--st-flagged-bg); font-size: 11.5px; line-height: 1.45; color: var(--fg); }
.xp-guessbar svg { color: var(--st-flagged); flex-shrink: 0; margin-top: 1px; }
.xp-guessbar b { color: var(--st-flagged); font-weight: 500; }
.xp-guessbar code { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); }
.xp-tbl { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--bg-app); box-shadow: var(--inset-panel); }
.xp-tbl-h, .xp-tbl-row { display: grid; grid-template-columns: 22px 92px 1fr 64px 26px; align-items: center; gap: 8px; }
.xp-idx { font-family: var(--mono); font-size: 9.5px; color: var(--fg-dim); text-align: center; }
.xp-tbl-row .xp-idx { color: var(--fg-mute); }
.xp-tbl-h { height: 26px; padding: 0 10px; background: var(--bg-panel); border-bottom: 1px solid var(--line); }
.xp-tbl-h span { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: var(--fg-dim); }
.xp-tbl-body { max-height: 268px; overflow: auto; }
.xp-tbl-row { position: relative; padding: 4px 10px; min-height: 40px; border-bottom: 1px solid var(--line-soft); background: var(--bg-row); }
.xp-tbl-row:last-child { border-bottom: 0; }
.xp-tbl-row::before { content:''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal); opacity: .5; }
.xp-tbl-row.weak::before { background: var(--st-flagged); opacity: .9; }
.xp-tbl-row.weak { background: linear-gradient(90deg, rgba(193,147,85,.06), var(--bg-row) 42%); }
.xp-tc-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xp-cell { font-family: var(--ui); font-size: 12px; color: var(--fg); background: 0; border: 1px solid transparent; border-radius: var(--r-1); padding: 4px 5px; width: 100%; outline: none; box-sizing: border-box; }
.xp-tbl-row:hover .xp-cell { border-color: var(--line-soft); }
.xp-cell:focus { border-color: var(--teal-line); background: var(--bg-deep); box-shadow: 0 0 0 2px var(--teal-glow); }
.xp-cell.tc { font-family: var(--mono); font-size: 10.5px; letter-spacing: .01em; color: var(--fg-strong); }
.xp-guess { display: inline-flex; align-items: center; gap: 4px; padding-left: 5px; font-family: var(--mono); font-size: 8.5px; color: var(--st-flagged); white-space: nowrap; }
.xp-guess .xp-arw { color: var(--fg-faint); }
.xp-cat-wrap { position: relative; }
.xp-cat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--c); background: var(--bg-sub); border: 1px solid var(--line); border-radius: var(--r-1); padding: 3px 4px 3px 6px; cursor: pointer; width: 100%; box-sizing: border-box; }
.xp-cat:hover { border-color: var(--line-strong); }
.xp-cat-dot { width: 3px; height: 9px; border-radius: 1px; background: var(--c); flex-shrink: 0; }
.xp-cat-cv { margin-left: auto; color: var(--fg-dim); display: inline-flex; }
.xp-cat-menu { position: absolute; top: calc(100% + 3px); right: 0; z-index: 50; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--float); padding: 3px; display: flex; flex-direction: column; gap: 1px; min-width: 88px; }
.xp-cat-menu button { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 0; background: 0; cursor: pointer; border-radius: var(--r-1); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--c); text-align: left; }
.xp-cat-menu button:hover { background: var(--bg-row-hover); }
.xp-cat-menu button.sel { background: var(--bg-row-sel); }
.xp-row-del { width: 24px; height: 24px; border-radius: var(--r-1); border: 0; background: 0; color: var(--fg-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, color .12s; }
.xp-tbl-row:hover .xp-row-del { opacity: 1; }
.xp-row-del:hover { color: var(--st-danger); background: var(--st-danger-bg); }
.xp-tbl-empty { padding: 26px; text-align: center; font-size: 12px; color: var(--fg-dim); }
.xp-tbl-note { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.5; }
.xp-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: 22px 16px 8px; }
.xp-done-ring { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--teal-line); background: var(--teal-bg); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.xp-done-h { font-size: 16px; color: var(--fg-strong); font-weight: 500; line-height: 1.35; }
.xp-done-h b { color: var(--fg-strong); font-weight: 600; }
.xp-done-h .teal-name { color: var(--teal); }
.xp-done-p { font-size: 12px; line-height: 1.6; color: var(--fg-mute); max-width: 38ch; margin: -2px 0 8px; }
.xp-done-p code { font-family: var(--mono); font-size: 10.5px; color: var(--fg); background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: 3px; padding: 1px 4px; }
.xp-done-p .xp-ver { font-size: 9.5px; }
.xp-err-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: 26px 20px 16px; }
.xp-err-ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); color: var(--fg-mute); }
.xp-err-ic.amber { border-color: rgba(193,147,85,.5); color: var(--st-flagged); background: var(--st-flagged-bg); }
.xp-err-ic.danger { border-color: rgba(180,104,104,.5); color: var(--st-danger); background: var(--st-danger-bg); }
.xp-err-ttl { font-size: 15px; color: var(--fg-strong); font-weight: 500; }
.xp-err-bd { font-size: 12px; line-height: 1.6; color: var(--fg-mute); max-width: 36ch; margin: -3px 0 6px; }
.xp-err-acts { display: flex; gap: 8px; }