/* ============================================================
   upload.css  --  Submittal Upload / Drafts page
   VOREA Construction Group brand palette
   ============================================================ */

:root {
  --up-bg: var(--bg);
  --up-card: var(--surface);
  --up-card-border: var(--line);
  --up-card-radius: 6px;
  /* #7392A7 was 3.28:1 on --surface as text and 3.28:1 under white as a fill —
     it failed AA in both roles it was used in. #56778C is the same slate, deep
     enough to clear 4.5:1 either way (4.76:1 both directions). */
  /* #221/theming: the slate had no dark value, so it stayed a mid-slate on the
     dark surface (3.0:1). #9cb8cc is the same slate-blue, light enough to clear
     4.5:1 on --surface in dark (7.71:1). NOT rebranded to copper. */
  --up-accent: light-dark(#56778C, #9cb8cc);   /* text/border role */
  --up-accent-solid: light-dark(#4A6377, #3f5566);  /* #F8: fill role behind white text */
  --up-accent-hover: #50697b;
  /* Fill role behind white text. --up-accent-solid was added for exactly this
     (see #F8 above) but these two never pointed at it, so .v-btn-accent shipped
     white-on-#7392A7 at 3.28:1. */
  --up-orange: var(--up-accent-solid);
  --up-orange-hover: #3f5566;
  --up-ink: var(--ink);
  --up-muted: var(--muted);
  --up-line: var(--line);
  --up-tint: var(--surface-2);
  /* Single-valued before: each was a deep hue that fell to 1.5-2.5:1 as text on
     the dark --surface. The dark half is the matching global semantic ink, so a
     status word reads the same colour it does everywhere else in the app; the
     light half is unchanged. */
  --up-green: light-dark(#117A4E, #7fd6a6);   /* 5.36:1 light / 9.17:1 dark */
  --up-red: light-dark(#B42318, #f09a9a);     /* 6.57:1 light / 7.44:1 dark */
  --up-yellow: light-dark(#C28100, #f0c26a);
  /* The priority flag's orange: a 3px row rule and a checkbox accent, never text. */
  --up-priority: light-dark(#e55a1a, #f0844a);
  --up-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --up-mono: "Consolas", "Courier New", monospace;
  --up-shadow: 0 1px 4px rgba(40,60,75,.18);
  --up-shadow-lg: 0 8px 30px rgba(30,45,60,.28);
}

/* ---------- page shell ---------- */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--up-bg);
  overflow: hidden;
}

.upload-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 100px;
}

.upload-container {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- header ---------- */
.upload-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.upload-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--up-ink);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.upload-subtitle {
  font-size: var(--fs-base);
  color: var(--up-muted);
  margin: 0;
  line-height: 1.45;
}

#projectChip {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--up-accent);
  background: rgba(115,146,167,.12);
  padding: 5px 12px;
  border-radius: 14px;
  white-space: nowrap;
}
#projectChip:empty { display: none; }

/* ---------- error banner ---------- */
.upload-error {
  background: var(--danger-fill);
  border: 1px solid var(--danger-line);
  color: var(--danger-ink);
  padding: 10px 14px;
  border-radius: var(--up-card-radius);
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* ---------- card ---------- */
.v-card {
  background: var(--up-card);
  border: 1px solid var(--up-card-border);
  border-radius: var(--up-card-radius);
  box-shadow: var(--up-shadow);
  padding: 18px 20px;
}

.v-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.v-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--up-ink);
  margin: 0;
}

/* ---------- form controls ---------- */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.upload-grid .span-2 {
  grid-column: span 2;
}

.v-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--up-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

.v-select,
.v-input {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: var(--fs-base);
  font-family: var(--up-font);
  color: var(--up-ink);
  background: var(--surface-2);
  border: 1px solid var(--up-line);
  border-radius: 5px;
  transition: border-color .15s, box-shadow .15s;
}
.v-select:focus,
.v-input:focus {
  outline: none;
  border-color: var(--up-accent);
  box-shadow: 0 0 0 2px rgba(115,146,167,.2);
}
.v-select:disabled,
.v-input:disabled {
  background: var(--up-tint);
  color: var(--up-muted);
  cursor: not-allowed;
}

.v-hint {
  font-size: var(--fs-sm);
  color: var(--up-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* checkbox */
.v-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--up-ink);
}
.v-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--up-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.v-checkbox-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-base);
}
.v-checkbox-desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--up-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ---------- buttons ---------- */
.v-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: var(--up-font);
  border: 1px solid var(--up-line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--up-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.v-btn:hover { background: var(--up-tint); }
.v-btn:disabled { opacity: .5; cursor: not-allowed; }

.v-btn-sm {
  padding: 5px 10px;
  font-size: var(--fs-md);
}

.v-btn-accent {
  background: var(--up-orange);
  color: #fff;
  border-color: var(--up-orange);
  font-weight: 700;
}
.v-btn-accent:hover { background: var(--up-orange-hover); border-color: var(--up-orange-hover); }
.v-btn-accent:disabled { opacity: .5; cursor: not-allowed; }

.v-btn-primary {
  background: var(--up-accent);
  color: #fff;
  border-color: var(--up-accent);
}
.v-btn-primary:hover { background: var(--up-accent-hover); border-color: var(--up-accent-hover); }

.v-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--up-muted);
}
.v-btn-ghost:hover { background: var(--up-tint); color: var(--up-ink); }

.v-btn-danger {
  color: var(--up-red);
  border-color: var(--up-red);
}
.v-btn-danger:hover { background: var(--danger-fill); }

/* ---------- mode bar ---------- */
.mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mode-label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--up-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

.v-mode-pill {
  padding: 6px 14px;
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: var(--up-font);
  border: 1px solid var(--up-line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--up-muted);
  cursor: pointer;
  transition: all .15s;
}
.v-mode-pill:hover {
  border-color: var(--up-accent);
  color: var(--up-ink);
}
.v-mode-pill.active {
  background: var(--up-accent-solid);
  border-color: var(--up-accent-solid);
  color: #fff;
  font-weight: 600;
}

.mode-status {
  font-size: var(--fs-md);
  color: var(--up-muted);
  margin-left: 8px;
}

/* ---------- priority (#76) — marked per submittal ---------- */
.row-priority-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-solid);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.submittal-row.is-priority {
  border-left: 3px solid var(--up-priority);
}
/* (#558) The per-row flag strip: Mark as priority + For Record Only. Wraps so
   the two never collide on a narrow row. */
.row-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 4px;
}
/* #323 point 6 — per-row Preview Package / Transmittal Sheet actions. */
.row-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.row-priority-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b5521b;
  cursor: pointer;
}
.row-priority-toggle input { cursor: pointer; accent-color: var(--up-priority); }
.row-priority-toggle input:disabled { cursor: default; }

/* (#558) For Record Only — the same control, in the page's own slate rather
   than priority's orange, so the two flags stay tellable apart at a glance.
   Its own light-dark() rather than --up-accent: this label wants the slate a
   step deeper than the accent in light (#4a6377, 6.4:1 vs 4.76:1) because it
   sits on the row, not on a chip. The dark halves are the same lifted hue. */
.row-flag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: light-dark(#4a6377, #9cb8cc);
  cursor: pointer;
}
.row-flag-toggle input { cursor: pointer; accent-color: var(--up-accent-solid); }
.row-flag-toggle input:disabled { cursor: default; }
.row-record-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--up-accent-solid);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* ---------- drop zone ---------- */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  border: 2px dashed var(--up-line);
  border-radius: var(--up-card-radius);
  background: var(--up-tint);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
}
.drop-zone:hover {
  border-color: var(--up-accent);
  background: rgba(115,146,167,.06);
}
.drop-zone.drag-over {
  border-color: var(--up-accent);
  background: rgba(115,146,167,.12);
  box-shadow: inset 0 0 0 2px rgba(115,146,167,.15);
}
.drop-zone-icon {
  font-size: 32px;
  line-height: 1;
}
.drop-zone-text {
  font-size: 14px;
  color: var(--up-ink);
}
.drop-zone-text strong {
  color: var(--up-accent);
}
.drop-zone-hint {
  font-size: var(--fs-md);
  color: var(--up-muted);
}

/* ---------- submittal rows ---------- */
.submittal-row {
  background: var(--up-card);
  border: 1px solid var(--up-card-border);
  border-radius: var(--up-card-radius);
  box-shadow: var(--up-shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s;
}
.submittal-row + .submittal-row {
  margin-top: 10px;
}
.submittal-row.status-done {
  border-left: 3px solid var(--up-green);
}
.submittal-row.status-error {
  border-left: 3px solid var(--up-red);
}
.submittal-row.status-processing,
.submittal-row.status-uploading,
.submittal-row.status-creating {
  border-left: 3px solid var(--up-accent);
}
.submittal-row.status-retrying {
  border-left: 3px solid var(--warn-ink);
}

.row-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.row-files {
  flex: 1;
  min-width: 0;
}
.row-file-count {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--up-ink);
}
.row-file-names {
  font-size: var(--fs-sm);
  color: var(--up-muted);
  font-family: var(--up-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
  margin-top: 2px;
}

/* standalone companions (non-PDF, non-image drops) — listed, not reordered */
.row-file-extras .row-file-pos {
  background: transparent;
  font-size: var(--fs-md);
}
.row-file-extra .row-file-name {
  color: var(--up-muted);
}

/* file merge-order list (multi-file rows, reorderable before push) */
.row-file-order {
  border: 1px solid var(--up-line);
  border-radius: 5px;
  background: var(--up-tint);
  padding: 8px 10px;
}
.row-file-order-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--up-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.row-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--up-line);
  border-radius: var(--radius-sm);
}
.row-file-pos {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--up-accent);
  background: rgba(115,146,167,.12);
  border-radius: 50%;
}
.row-file-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-family: var(--up-mono);
  color: var(--up-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-file-move-group {
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
}
.row-file-move {
  width: 24px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--up-line);
  background: var(--surface);
  color: var(--up-muted);
  font-size: var(--fs-2xs);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s, border-color .15s;
}
.row-file-move:hover:not(:disabled) {
  background: var(--up-accent);
  border-color: var(--up-accent);
  color: #fff;
}
.row-file-move:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.row-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.row-status.idle        { background: var(--chip); color: var(--heading); }
.row-status.processing  { background: var(--info-fill); color: var(--up-accent); }
.row-status.uploading   { background: var(--info-fill); color: var(--info-ink); }
.row-status.creating    { background: var(--warn-fill); color: var(--warn-ink); }
.row-status.retrying    { background: var(--warn-fill); color: var(--warn-ink); }
.row-status.done        { background: var(--ok-fill); color: var(--up-green); }
.row-status.error       { background: var(--danger-fill); color: var(--up-red); }

.row-status .spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row-delete {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--up-muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.row-delete:hover {
  background: var(--danger-fill);
  color: var(--up-red);
}

/* row fields */
.row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.row-fields .span-2 { grid-column: span 2; }

.row-field-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--up-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

.row-input,
.row-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--up-font);
  color: var(--up-ink);
  background: var(--surface-2);
  border: 1px solid var(--up-line);
  border-radius: var(--radius-sm);
}
.row-input:focus,
.row-select:focus {
  outline: none;
  border-color: var(--up-accent);
  box-shadow: 0 0 0 2px rgba(115,146,167,.15);
}

/* #371 / #752: the Procore Description — the shared rich-text field
   (css/rich-text.css). It grows with what is typed but starts short: it sits
   between Title and the priority toggle on every row, and a tall empty box there
   would push the push button off a laptop screen. */
.row-rt .rt-body {
  min-height: 3.2em;
}
.row-rt-read {
  padding: 4px 0;
}
/* "optional — pushed to Procore", beside the label. Lower-case and unemphasised
   against the upper-case label, so it reads as an aside rather than a second
   field name. */
.row-field-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
  margin-left: 5px;
}

/* spec section typeahead */
.spec-search-wrap {
  position: relative;
}
.spec-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--elevated);
  border: 1px solid var(--up-line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.spec-dd-item {
  padding: 6px 10px;
  font-size: var(--fs-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spec-dd-item:hover,
.spec-dd-item.active {
  background: var(--up-accent);
  color: #fff;
}
.spec-dd-empty {
  padding: 8px 10px;
  font-size: var(--fs-md);
  color: var(--up-muted);
  font-style: italic;
}

/* FR-724: tiered location picker (frontend/js/location-picker.js). Same shell
   as the spec typeahead above; adds a crumb trail for the tier being browsed
   and a › per row that has locations inside it. */
.loc-picker {
  position: relative;
}
.loc-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--elevated);
  border: 1px solid var(--up-line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.loc-panel[hidden] { display: none; }
.loc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--up-line);
  font-size: var(--fs-sm, 12px);
}
.loc-crumb {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--up-accent);
  cursor: pointer;
  font: inherit;
  border-radius: 3px;
}
.loc-crumb:last-of-type {
  color: inherit;
  font-weight: 500;
}
.loc-crumb:hover { text-decoration: underline; }
.loc-sep { color: var(--up-muted); }
.loc-item {
  display: flex;
  align-items: stretch;
  font-size: var(--fs-md);
}
.loc-name {
  flex: 1;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-item.is-picked .loc-name { font-weight: 500; }
.loc-use-tier { font-style: italic; border-bottom: 1px solid var(--up-line); }
.loc-drill {
  background: none;
  border: none;
  border-left: 1px solid var(--up-line);
  padding: 0 12px;
  cursor: pointer;
  font-size: 16px;
  color: inherit;
}
.loc-item:hover,
.loc-item.active {
  background: var(--up-accent);
  color: #fff;
}
.loc-item:hover .loc-drill,
.loc-item.active .loc-drill { border-left-color: rgba(255,255,255,.35); }
.loc-drill:hover { background: rgba(0,0,0,.12); }
.row-field-hint {
  margin-top: 4px;
  font-size: var(--fs-md);
  color: var(--up-muted);
}
.loc-empty {
  padding: 8px 10px;
  font-size: var(--fs-md);
  color: var(--up-muted);
  font-style: italic;
}

/* submittal search (revision / open-draft) */
.sub-search-wrap {
  position: relative;
}
.sub-search-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--up-font);
  color: var(--up-ink);
  border: 1px solid var(--up-line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.sub-search-input:focus {
  outline: none;
  border-color: var(--up-accent);
  box-shadow: 0 0 0 2px rgba(115,146,167,.15);
}
.sub-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--elevated);
  border: 1px solid var(--up-line);
  border-top: none;
  border-radius: 0 0 5px 5px;
  box-shadow: var(--up-shadow-lg);
  max-height: 220px;
  overflow-y: auto;
}
.sub-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--fs-md);
  cursor: pointer;
  border-bottom: 1px solid var(--up-line);
}
.sub-search-item:hover {
  background: var(--up-tint);
}
.sub-search-item:last-child { border-bottom: none; }
.sub-search-num {
  font-weight: 700;
  color: var(--up-accent);
  font-family: var(--up-mono);
  white-space: nowrap;
}
.sub-search-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-search-spec {
  font-size: var(--fs-xs);
  color: var(--up-muted);
  white-space: nowrap;
}
.sub-search-status {
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.sub-search-status.draft   { background: var(--chip); color: var(--heading); }
.sub-search-status.open    { background: var(--info-fill); color: var(--up-accent); }
.sub-search-status.closed  { background: var(--ok-fill); color: var(--up-green); }

.sub-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--up-tint);
  border: 1px solid var(--up-line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.sub-selected-num {
  font-weight: 700;
  color: var(--up-accent);
  font-family: var(--up-mono);
}
.sub-selected-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* #702: the revision title, editable in place. It sits in the chip rather than
   looking like a form field bolted onto it — transparent until focus, which is
   when a border earns its keep. `width: 100%` with `min-width: 0` is what lets
   a flex item shrink below its content: without it a long title stretches the
   chip past the row and the × goes off the edge. */
.sub-selected-title-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  margin: -2px 0;
}
.sub-selected-title-input:hover:not(:disabled) { border-color: var(--up-line); }
.sub-selected-title-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--up-accent);
}
.sub-selected-title-input:disabled { color: var(--up-muted); }
.sub-selected-clear {
  background: none;
  border: none;
  color: var(--up-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
}
.sub-selected-clear:hover { color: var(--up-red); }

/* row result links */
.row-result {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-md);
  padding-top: 6px;
  border-top: 1px solid var(--up-line);
}
.row-result a {
  color: var(--up-accent);
  text-decoration: none;
  font-weight: 600;
}
.row-result a:hover { text-decoration: underline; }

.row-error-msg {
  font-size: var(--fs-md);
  color: var(--up-red);
  padding-top: 4px;
}

/* (#558) A standing note, not a failure: the For Record Only checkbox is
   read-only over Procore's API, so the row says so in the page's own slate
   rather than in --up-red, which would read as this push having gone wrong. */
.row-note-msg {
  font-size: var(--fs-md);
  color: light-dark(#4a6377, #9cb8cc);
  padding-top: 4px;
}

.row-retry-msg {
  font-size: var(--fs-md);
  color: var(--warn-ink);
  padding-top: 4px;
}

/* ---------- action bar ---------- */
.v-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-actionbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-top: 1px solid var(--up-line);
  box-shadow: 0 -2px 12px rgba(26,24,20,.08);
}
.action-count {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--up-ink);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .upload-grid {
    grid-template-columns: 1fr;
  }
  .upload-grid .span-2 {
    grid-column: span 1;
  }
  .row-fields {
    grid-template-columns: 1fr;
  }
  .row-fields .span-2 {
    grid-column: span 1;
  }
  .upload-header {
    flex-direction: column;
  }
  .upload-page {
    padding: 16px 12px 100px;
  }
}

/* ---------- FR-838: Register mode (a sub's list → Drafts, no files) ---------- */
/* (2026-11 redesign) One tab per draft. The strip is the list - a status dot per
   tab stands in for the old Status column - and the pane under it is ONE draft
   laid out like the New-submittal card (.row-fields): the title first and full
   width, two lines tall; spec section and type; the schedule; the description.
   The paste box and the spreadsheet grid are gone. */
.register-card { padding: 16px 18px; }
.register-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.register-head-text { flex: 1 1 420px; min-width: 0; }
.register-hint { font-size: var(--fs-md); color: var(--up-muted); margin: 4px 0 0; line-height: 1.45; }
.register-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.register-review { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--up-muted); white-space: nowrap; }
.register-review-input { width: 64px; padding: 5px 8px; text-align: right; }

/* The strip: the page's own .ut-tab look (upload.html), one per draft. */
.register-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; margin: 14px 0 0; }
.register-tab {
  display: inline-flex; align-items: center; gap: 7px; max-width: 260px; min-width: 0;
  padding: 7px 12px; margin-bottom: -1px; font: inherit; font-size: var(--fs-base); font-weight: 600;
  color: var(--up-muted); background: var(--up-tint); border: 1px solid var(--up-line); border-bottom: none;
  border-radius: 6px 6px 0 0; cursor: pointer; text-align: left;
}
.register-tab:hover { color: var(--up-accent); }
.register-tab.active { background: var(--surface); color: var(--heading); border-bottom: 1px solid var(--surface); }
.register-tab:focus-visible { outline: 2px solid var(--up-accent); outline-offset: -2px; }
.register-tab-n { font-family: var(--up-mono); font-size: var(--fs-xs); color: var(--up-muted); }
.register-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.register-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-dk); flex: none; }
.register-tab-dot.ok { background: var(--up-green); }
.register-tab-dot.warn { background: var(--up-yellow); }
.register-tab-dot.done { background: var(--up-accent); }
.register-tab-dot.error { background: var(--up-red); }
.register-tab-dot.busy { background: var(--up-accent); animation: register-pulse 1s ease-in-out infinite; }
@keyframes register-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .register-tab-dot.busy { animation: none; } }
.register-tab-add { color: var(--up-accent); background: transparent; border-style: dashed; }
.register-tab-add:disabled { opacity: .5; cursor: not-allowed; }

/* The pane: one draft. The spec dropdown must escape it, so it does not clip. */
.register-pane { background: var(--surface); border: 1px solid var(--up-line); border-radius: 0 6px 6px 6px; padding: 14px 16px; }
.register-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.register-fields .span-2 { grid-column: span 2; }
.register-fields .span-3 { grid-column: span 3; }
.register-fields > * { min-width: 0; }
/* The title: full width, two lines tall, grows with the text (submittal.js
   autoGrowRegisterTitle) and never scrolls. 15px against the 13px inputs
   because it is the one thing a tab is named by. */
.register-title {
  display: block; width: 100%; min-height: 2.9em; padding: 8px 11px; box-sizing: border-box;
  font: inherit; font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; color: var(--up-ink);
  background: var(--surface-2); border: 1px solid var(--up-line); border-radius: var(--radius-sm);
  resize: none; overflow: hidden;
}
.register-title:focus { outline: none; border-color: var(--up-accent); box-shadow: 0 0 0 2px rgba(115,146,167,.15); }
.register-title:disabled { opacity: .7; }
.register-title.reg-warn, .row-input.reg-warn { border-color: var(--up-yellow); }
.register-calc { color: var(--up-muted); }
.register-lead { font-family: var(--up-mono); text-align: right; }

.register-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--up-line); }
.register-foot-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: var(--fs-md); color: var(--up-muted); }
.register-foot-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.register-hint-key { font-size: var(--fs-sm); color: var(--up-muted); }
.register-hint-key kbd, .register-foot kbd { font: inherit; font-size: var(--fs-xs, 11px); padding: 0 4px; border: 1px solid var(--up-line); border-radius: 3px; }
.register-error { font-size: var(--fs-sm); color: var(--up-red); }
.row-status.reg-needs { background: var(--warn-fill); color: var(--warn-ink); }
.reg-link { font-size: var(--fs-sm); font-weight: 600; color: var(--up-green); text-decoration: none; white-space: nowrap; }
.reg-link:hover { text-decoration: underline; }
.reg-retry { font: inherit; font-size: var(--fs-xs); padding: 2px 7px; border: 1px solid var(--up-line); border-radius: 4px; background: var(--surface); color: var(--up-ink); cursor: pointer; }
.register-empty { padding: 18px 10px; text-align: center; font-size: var(--fs-md); color: var(--up-muted); }
@media (max-width: 640px) {
  .register-fields { grid-template-columns: minmax(0, 1fr); }
  .register-fields .span-2, .register-fields .span-3 { grid-column: span 1; }
  .register-tab { max-width: 100%; }
}
/* #862 / #851: the batch's workflow chain under the drafts. One numbered line
   per step, read left to right as a sentence: who, what they do, how long
   they get, the latest date that lands for the draft in front. */
.register-workflow { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--up-line); }
.rw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rw-title { margin: 0; }
.rw-hint, .rw-muted { font-size: var(--fs-sm); font-weight: 400; color: var(--up-muted); }
.rw-total { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--up-muted); }
.rw-note b { color: var(--up-ink); font-weight: 600; }
.rw-note-warn { color: var(--warn-ink); }
.rw-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rw-step { display: grid; grid-template-columns: 22px 88px minmax(0, 1fr) auto 64px; align-items: center; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--up-line); border-radius: 6px; background: var(--surface); font-size: var(--fs-md); }
.rw-step-tpl { border-style: dashed; }
.rw-step-off, .rw-step-empty { border-style: dashed; opacity: .85; }
.rw-n { font-family: var(--up-mono); font-size: var(--fs-xs); color: var(--up-muted); text-align: center; }
.rw-what { font-weight: 600; color: var(--heading); white-space: nowrap; }
.rw-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rw-toggle input { margin: 0; }
.rw-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--up-ink); }
.rw-co, .rw-sep { color: var(--up-muted); }
.rw-parallel { margin-left: 8px; font-size: var(--fs-xs); color: var(--up-muted); border: 1px solid var(--up-line); border-radius: 10px; padding: 0 7px; white-space: nowrap; }
.rw-days { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--up-muted); white-space: nowrap; }
.rw-days-input { width: 58px; padding: 3px 6px; text-align: right; font-family: var(--up-mono); }
.rw-days-fixed { font-style: italic; }
.rw-date { font-family: var(--up-mono); font-size: var(--fs-xs); color: var(--up-muted); text-align: right; white-space: nowrap; }
.rw-apply { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rw-apply-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--up-ink); white-space: nowrap; }
.rw-template { min-width: 220px; }
.row-status.rw-ok { background: transparent; color: var(--up-green); border: 1px solid var(--up-line); }
@media (max-width: 640px) {
  .rw-step { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .rw-what { grid-column: 2; }
  .rw-who { grid-column: 2 / span 2; white-space: normal; }
  .rw-days { grid-column: 2; }
  .rw-date { grid-column: 3; }
}

/* `hidden` must win over the drop zone's own display: flex while Register
   mode stands in for it (submittal.js changeMode). */
.drop-zone[hidden], #rowsList[hidden], .register-card[hidden] { display: none; }