/* Shared working-product UI: dialogs, dropdowns, upload progress. Tokens from app.css. */

.drop { position: relative; }
.drop-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 200px;
  max-width: 290px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-panel);
  box-shadow: var(--pop-shadow);
}
.drop-pop.open { display: flex; }
.drop-pop.drop-left { right: auto; left: 0; }
.drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--r-chip);
  font-size: 13.5px;
  text-align: left;
  color: var(--text);
  transition: background var(--d-3f) var(--ease-cut);
}
.drop-item:hover { background: var(--bg-3); }
.drop-item.on { color: var(--sky-ink); background: var(--sky-dim); }
.drop-item.drop-danger { color: var(--tally-ink); }
.drop-item.drop-danger:hover { background: var(--tally-dim); }
.drop-item.drop-danger svg { color: var(--tally-ink); }
.drop-item svg { flex: 0 0 auto; color: var(--text-2); }
.drop-body { min-width: 0; }
.drop-sep { height: 1px; margin: 5px 4px; background: var(--line); }
.drop-sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlg {
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-panel);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--pop-shadow);
}
.dlg::backdrop { background: rgba(6, 9, 11, 0.6); backdrop-filter: blur(2px); }
.dlg h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 14px;
}
.dlg .field { margin-bottom: 12px; }
.dlg .field-row { display: flex; gap: 10px; }
.dlg .field-row .field { flex: 1; }
.dlg input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  font-size: 13px;
}
.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.dlg-error {
  margin-top: 10px;
  font-size: 13px;
  color: var(--tally-ink);
}

.up-progress {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--bg);
  overflow: hidden;
}
.up-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--sky-dim);
  border-right: 2px solid var(--sky-strong);
  transition: width var(--d-3f) linear;
}
.up-pct {
  position: relative;
  margin-left: auto;
  padding: 0 8px;
  font-size: 10.5px;
  color: var(--sky-ink);
}