/* ═══════════════════════════════════════════════════════════════════════════
   deals.css — the broker portal, the upload panel, the approval queue and the
   funded list (deals track).

   Every colour is a theme token; nothing here carries meaning in colour alone
   (each step and each chip has its word). Controls are at least 44px tall on a
   phone, which scripts/measure.js checks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the broker's progress strip ─────────────────────────────────────────── */
.deal-steps{
  list-style:none; margin:0 0 14px; padding:10px 12px;
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-c, 10px);
  font-size:13px; color:var(--label-2);
}
.deal-steps li{display:flex; align-items:center; gap:6px}
.deal-steps .dot{width:10px; height:10px; border-radius:50%; border:2px solid var(--hair-2, var(--hair)); flex:none}
.deal-steps .done .dot{background:var(--accent); border-color:var(--accent)}
.deal-steps .now{color:var(--label); font-weight:600}
.deal-steps .now .dot{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring-tint, transparent)}
.deal-steps .off{color:var(--label-3, var(--label-2)); text-decoration:line-through}
.deal-steps .stop{color:var(--label); font-weight:600}
.deal-steps .stop .dot{background:var(--bad); border-color:var(--bad)}

.sec-h{font-size:13px; font-weight:600; color:var(--label-2); margin:14px 0 6px}
.sec-h:first-child{margin-top:0}

/* ── the upload panel (milestone 2) ──────────────────────────────────────── */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:112px; margin-top:10px; padding:16px;
  border:1.5px dashed var(--hair-2, var(--hair)); border-radius:var(--r-c, 10px);
  background:var(--surface-2); color:var(--label-2); text-align:center; cursor:pointer;
}
.dropzone{position:relative}
.dropzone svg{width:20px; height:20px}
/* The input IS the tap target, laid over the whole zone at zero opacity — the
   same shape as crosscut.css's .file-in, for the same measured reasons. */
.dropzone .dz-in{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer}
.dropzone .dz-link{color:var(--accent-ink, var(--accent)); text-decoration:underline}
.dropzone .dz-s{font-size:12px}
.dropzone:focus-within{outline:2px solid var(--focus, var(--accent)); outline-offset:2px}
.dropzone.over{border-color:var(--accent); background:var(--hover-fill, var(--surface-2))}
.upload-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.upload-list:empty{display:none}
.upload-list li{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; font-size:13px}
.upload-list .u-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.upload-list .u-state{color:var(--label-2); font-size:12px}
.upload-list progress{grid-column:1 / -1; width:100%; height:6px}
.upload-list .bad .u-state{color:var(--bad)}

/* ── previews ───────────────────────────────────────────────────────────── */
.doc-preview{display:block; width:100%; min-height:70vh; border:0; background:var(--surface-2); border-radius:var(--r-c, 10px)}
.doc-preview-img{display:block; max-width:100%; height:auto; margin:0 auto; border-radius:var(--r-c, 10px)}

/* ── the time a thing happened ───────────────────────────────────────────── */
time[title]{text-decoration:underline dotted; text-decoration-color:var(--hair-2, var(--hair)); text-underline-offset:3px}

@media (max-width: 600px){
  .empty .btn{min-height:44px}
  .deal-steps{gap:6px 12px}
  .dropzone{min-height:96px}
}

/* ── conditions on an approval ───────────────────────────────────────────── */
ul.cond{list-style:disc; margin:2px 0 0; padding-left:16px}
ul.cond li{margin:0}
.card-foot ul.cond{margin-top:4px}

/* ── the gate card's "fix this" links ────────────────────────────────────── */
/* Measured at 4.45:1 on the gate card — just under the 4.5:1 floor
   scripts/measure.js enforces. A darker blue clears it, and the underline is
   what says "link" either way. (The dimmed, unclickable copies in an "ahead"
   card are not rendered at all now — src/web/screens/submission.ts gateFix.) */
.gate .quiet-link.gate-fix,
.card .quiet-link.gate-fix{color:#0052B4; text-decoration:underline; text-underline-offset:2px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gate .quiet-link.gate-fix,
  :root:not([data-theme="light"]) .card .quiet-link.gate-fix{color:#8FC2FF}
}
:root[data-theme="dark"] .gate .quiet-link.gate-fix,
:root[data-theme="dark"] .card .quiet-link.gate-fix{color:#8FC2FF}

/* ── the funding policy's document types ─────────────────────────────────── */
.check-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:2px 16px}
.check-grid .field{margin:0}

/* ── conditions on an approval ───────────────────────────────────────────── */
ul.cond{list-style:disc; margin:2px 0 0; padding-left:16px}
ul.cond li{margin:0}
.card-foot ul.cond{margin-top:4px}

/* ── the gate card's "fix this" links ────────────────────────────────────── */
/* Measured at 4.45:1 on the gate card — just under the 4.5:1 floor
   scripts/measure.js enforces. A darker blue clears it, and the underline is
   what says "link" either way. (The dimmed, unclickable copies in an "ahead"
   card are not rendered at all now — src/web/screens/submission.ts gateFix.) */
.gate .quiet-link.gate-fix,
.card .quiet-link.gate-fix{color:#0052B4; text-decoration:underline; text-underline-offset:2px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gate .quiet-link.gate-fix,
  :root:not([data-theme="light"]) .card .quiet-link.gate-fix{color:#8FC2FF}
}
:root[data-theme="dark"] .gate .quiet-link.gate-fix,
:root[data-theme="dark"] .card .quiet-link.gate-fix{color:#8FC2FF}

/* ── the funding policy's document types ─────────────────────────────────── */
.check-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:2px 16px}
.check-grid .field{margin:0}

/* ── "View as role" (deals track) ────────────────────────────────────────── */
/* The bar sits under the top bar on every page while a switch is in effect,
   including inside the broker portal. Amber, with the words beside the colour:
   nothing here carries meaning in colour alone. */
.viewing-as{
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between;
  padding:8px 20px; font-size:13px;
  background:var(--hold-tint, rgba(255,159,10,.12)); color:var(--label);
  border-bottom:1px solid var(--hair);
}
.viewing-as .btn{white-space:nowrap}

/* The rail link, above the signed-in person's own block. */
.rail-viewas{
  display:block; margin:0 10px 8px; padding:8px 10px; border-radius:var(--r-s, 8px);
  font-size:12.5px; color:var(--rail-ink-2, var(--label-2)); text-decoration:none;
  border:1px dashed var(--hair-2, var(--hair));
}
.rail-viewas:hover{background:var(--hover-fill, var(--surface-2)); color:var(--rail-ink, var(--label))}

/* The role cards on /app/view-as. */
.role-cards{
  list-style:none; margin:0; padding:16px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px;
}
.role-card{
  display:flex; flex-direction:column; gap:6px;
  padding:14px; border:1px solid var(--hair); border-radius:var(--r-c, 10px); background:var(--surface);
}
.role-card.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.role-card-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.role-card h3{margin:0; font-size:15px}
.role-why{margin:0; font-size:12.5px; color:var(--label-2)}
.role-caps{margin:0; font-size:11.5px}
.role-user{margin:0 0 4px; font-size:11.5px; color:var(--label-2)}
.role-card form{margin-top:auto}
.card-foot code{white-space:nowrap}
@media (max-width: 600px){
  .viewing-as{padding:8px 16px}
  .role-cards{grid-template-columns:1fr; padding:12px}
  .role-card .btn{min-height:44px}
}

/* ── "Choose account", the step between signing in and the dashboard ─────── */
.choose-card .mut{margin:-8px 0 2px}
.choose-what{margin:0; padding:10px 12px; border:1px solid var(--hair); border-radius:var(--r-c, 10px); background:var(--surface-2)}
.choose-what-row{display:flex; flex-direction:column; gap:2px}
.choose-what dt{font-size:12.5px; font-weight:600; color:var(--label)}
.choose-what dd{margin:0; font-size:12.5px; line-height:1.45; color:var(--label-2)}
.choose-what-row + .choose-what-row{margin-top:8px}
.choose-foot{display:flex; gap:8px; align-items:flex-start; margin:0; font-size:11.5px; line-height:1.45}
.choose-foot svg{width:13px; height:13px; flex:none; margin-top:2px}
@media (max-width: 600px){
  .choose-card select,.choose-card .btn{min-height:44px}
}