/* Capacity badge: a button the size of the action it sits beside, whose
   border tracks how close the selection is to quota. Hover/focus reveals a
   floating popover (two-phase: transient worker+scratch vs permanent launch
   footprint). See mockups/import-capacity.html. */
.cap-anchor { position: relative; display: inline-flex; }
.cap-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--body);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.cap-trigger:hover { background: var(--surface-2); }
.cap-trigger .dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--dim); }
.cap-trigger .chev { color: var(--dim); font-size: 9px; }
.cap-trigger.ok { border-color: var(--green); } .cap-trigger.ok .dot { background: var(--green); }
.cap-trigger.warn { border-color: var(--amber); } .cap-trigger.warn .dot { background: var(--amber); }
.cap-trigger.bad { border-color: var(--red); color: var(--red-dark); } .cap-trigger.bad .dot { background: var(--red); }

.cap-pop {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 440px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 16px 48px rgba(14, 11, 12, 0.28);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease; z-index: 60;
}
.cap-anchor:hover .cap-pop, .cap-anchor:focus-within .cap-pop, .cap-pop.pinned {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.cap-pop::after {
  content: ""; position: absolute; right: 24px; bottom: -7px; width: 12px; height: 12px;
  background: var(--surface); border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong); transform: rotate(45deg);
}
.cap-pop-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cap-pop-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.cap-pop-head .sel { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.cap-verdict { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; font-size: 12.5px; line-height: 1.45; border-bottom: 1px solid var(--line); }
.cap-verdict.ok { background: var(--green-soft); color: var(--green); }
.cap-verdict.warn { background: var(--amber-soft); color: var(--amber); }
.cap-verdict.bad { background: var(--red-soft); color: var(--red-dark); }
.cap-verdict.info { background: var(--blue-soft); color: var(--blue); }
.cap-verdict .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: 0 0 auto; margin-top: 4px; }
.cap-verdict b { font-weight: 700; }
.cap-pop-body { padding: 13px 16px 14px; }
.cap-rows { display: grid; gap: 10px; }
.cr { display: grid; grid-template-columns: 74px 1fr 124px; align-items: center; gap: 12px; }
.cr-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.cr-bar { height: 9px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 3px; overflow: hidden; position: relative; }
.cr-used { position: absolute; left: 0; top: 0; height: 100%; background: var(--line-strong); }
.cr-perm { position: absolute; top: 0; height: 100%; background: var(--green); }
.cr-perm.warn { background: var(--amber); } .cr-perm.bad { background: var(--red); }
/* estimated permanent: same hue, striped with white = "approximate" */
.cr-perm.est { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0 2px, transparent 2px 5px); }
/* unknown: neutral grey dashed zone, no committed value */
.cr-unknown { position: absolute; top: 0; height: 100%; border-left: 1px dashed var(--line-strong);
  background-image: repeating-linear-gradient(45deg, var(--line-strong) 0 1px, transparent 1px 5px); opacity: 0.7; }
/* transient worker/scratch: blue hatch = temporary */
.cr-trans { position: absolute; top: 0; height: 100%; background-color: var(--blue-soft);
  background-image: repeating-linear-gradient(45deg, var(--blue) 0 2px, transparent 2px 5px); opacity: 0.95; }
.cr-meta { font-family: var(--mono); font-size: 10px; color: var(--ink); text-align: right; white-space: nowrap; }
.cr-meta .t { color: var(--blue); } .cr-meta .p { color: var(--ink); }
.cr-meta .est { color: var(--amber); } .cr-meta .unk { color: var(--dim); }
.cr-meta .free { color: var(--dim); } .cr-meta .free.bad { color: var(--red-dark); font-weight: 600; }
.cap-legend { display: flex; gap: 16px; align-items: center; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; color: var(--dim); flex-wrap: wrap; }
.cap-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.cap-legend .sw { width: 16px; height: 9px; border: 1px solid var(--line); border-radius: 2px; flex: 0 0 auto; }
.cap-legend .sw.trans { background-color: var(--blue-soft); background-image: repeating-linear-gradient(45deg, var(--blue) 0 2px, transparent 2px 5px); }
.cap-legend .sw.est { background: var(--amber); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0 2px, transparent 2px 5px); }
.cap-legend .sw.unk { background-image: repeating-linear-gradient(45deg, var(--line-strong) 0 1px, transparent 1px 5px); }