/* The drop embed (foundry/embed/). A panel that lands inside somebody else's
   page, so: transparent body, one card, no nav, no rail, nothing fixed. The
   tokens are style.css's, copied rather than imported, because that sheet
   styles a workspace (rails, cards, forms, 2,000 lines) and this is one card.
   Same two accents as everywhere: lilac for the label side, amber for the
   producer's record. `html[data-theme]` is set before first paint by the
   inline script in index.html. */

:root {
  --bg: transparent;
  --surface: #131316;
  --surface-2: #1a1a1f;
  --border: #232329;
  --border-2: #3a3a44;
  --text: #f2f2f4;
  --text-2: #c6c6cf;
  --muted: #8e8e98;
  --lilac: #cdbcf2;
  --amber: #d79a3a;
  --ok: #4ade80;
  --danger: #d96a6a;
  --invert-bg: #fff;
  --invert-fg: #0b0b0d;
  --font: 'Outfit', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --surface: #ffffff;
  --surface-2: #f2f2f5;
  --border: #d8d8e0;
  --border-2: #b9b9c6;
  --text: #17171c;
  --text-2: #3d3d49;
  --muted: #5c5c68;
  --lilac: #6f56bd;
  --amber: #9a6d17;
  --ok: #2c7a4b;
  --danger: #b34a4a;
  --invert-bg: #17171c;
  --invert-fg: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body {
  color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5;
  font-weight: 300; -webkit-font-smoothing: antialiased; padding: 8px;
}

.em {
  max-width: 520px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.hidden { display: none !important; }

/* ---------- head ---------- */
.em-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.em-mark { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); }
.em-mark svg { width: 15px; height: 15px; display: block; }
.em-mark span { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.em-to { font-size: 13px; color: var(--text-2); text-align: right; }
.em-to strong { font-weight: 500; color: var(--text); }
.em-to.bad { color: var(--danger); }

/* ---------- the drop ---------- */
.dz {
  border: 1.5px dashed var(--border-2); border-radius: 12px; padding: 34px 18px;
  text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, background .15s; background: var(--surface-2);
}
.dz:hover, .dz.drag { border-color: var(--lilac); }
.dz:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.dz-big { font-size: 16px; font-weight: 500; }
.dz-small { font-size: 13px; color: var(--muted); }

/* ---------- forms ---------- */
.em-step { display: flex; flex-direction: column; gap: 14px; }
.em-h { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.em-sub { color: var(--text-2); font-size: 14px; }
.em-fine { color: var(--muted); font-size: 12.5px; }
.em-fine:empty { display: none; }
.em-file { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-file strong { color: var(--text); font-weight: 500; }
form { display: flex; flex-direction: column; gap: 12px; }
.em-field { display: flex; flex-direction: column; gap: 5px; }
.em-field span { font-size: 12.5px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=tel] {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit;
  font-weight: 300; outline: none; width: 100%;
}
input:focus { border-color: var(--border-2); }
.em-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.em-check input { margin-top: 4px; accent-color: var(--lilac); }
.em-error { color: var(--danger); font-size: 13px; }
.em-error:empty { display: none; }
.em-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 2px; }

.btn {
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  border-radius: 10px; padding: 10px 18px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn.primary { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.btn.ghost { background: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); border-color: var(--border-2); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- who ---------- */
.em-known { display: flex; flex-direction: column; gap: 12px; }
.em-known strong { font-weight: 500; }
.em-tabs { display: flex; gap: 6px; background: var(--surface-2); border-radius: 10px; padding: 4px; }
.em-tab {
  flex: 1; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px;
  font-weight: 500; padding: 8px; border-radius: 8px; cursor: pointer;
}
.em-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* ---------- go ---------- */
.em-state { font-size: 14px; color: var(--text-2); }
.em-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.em-bar-fill { height: 100%; width: 0; background: var(--amber); transition: width .2s; }
.em-bar-fill.busy { width: 100%; opacity: .55; animation: em-pulse 1.2s ease-in-out infinite; }
@keyframes em-pulse { 50% { opacity: .2; } }

/* ---------- done ---------- */
.em-results { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.em-results li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 12px; background: var(--surface-2); border-radius: 10px; font-size: 14px;
}
.em-results .band { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.em-results .band.high { color: var(--ok); }
.em-results .band.mid { color: var(--amber); }

.em-foot {
  display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 12px;
}
.em-foot span { flex: 1; }
.em-foot a { color: inherit; text-decoration: none; }
.em-foot a:hover { color: var(--text); }

/* The quiet way out of the code door: "Use a password instead". A button and
   not a link because it navigates nowhere — inside an iframe an <a> that goes
   nowhere is a trap, and a real link would break the frame. */
.em-linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.em-linkish:hover { color: var(--text); }

/* The code field, once it appears. Six digits, read back off a phone, so they
   are set wide and tracked — a run of small tight numerals is where a 6 and an
   8 get typed for each other. */
#otp {
  font-size: 20px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  body { padding: 0; }
  .em { border-radius: 12px; padding: 16px 16px 12px; }
  .em-actions .btn { flex: 1; }
}

/* ---------- bare (?bare=1): the drop page ----------
   Nikhil, 2026-11-12, beside tstack.app/expertsonly: "look at how clean
   trackstacks is. we over explain. i dont like our borders." The page around
   it already says who this goes to and whose it is, so the box drops its
   frame, its mark, its lede and its footer, and the dropzone loses the dashed
   line: one soft filled panel. The fills are the drop page's own. */
:root[data-bare="1"] body { padding: 0; }
:root[data-bare="1"] .em { max-width: none; background: none; border: 0; padding: 0; }
:root[data-bare="1"] .em-head,
:root[data-bare="1"] .em-foot,
:root[data-bare="1"] #drop-lede { display: none !important; }
:root[data-bare="1"] { --surface-2: #1f1f25; }
:root[data-bare="1"][data-theme="light"] { --surface-2: #f1f1f4; }
:root[data-bare="1"] .dz { border: 0; border-radius: 18px; padding: 56px 18px; gap: 4px; }
:root[data-bare="1"] .dz:hover, :root[data-bare="1"] .dz.drag { box-shadow: inset 0 0 0 1.5px var(--lilac); }
:root[data-bare="1"] .dz-big { font-size: 17px; }