/* Deliverables picker. Colors come from the portal tokens. The cream/navy wash
   that used to live here is gone. Layout of the quantity cards stays. */
.page:has(#signed-in) .edit-layout { gap: 18px; }
.page:has(#signed-in) .edit-layout > label { margin: 0; display: grid; gap: 8px; }
.page:has(#signed-in) textarea.editor { min-height: 210px; }
.page:has(#signed-in) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

.deliverables-picker {
  --d-ink: var(--ink); --d-muted: var(--muted); --d-border: var(--line);
  --d-row: var(--paper); --d-row-alt: var(--alt); --d-action: var(--accent);
  container: deliverables / inline-size;
  min-width: 0; display: grid; gap: 12px; color: var(--d-ink);
}
.page .deliverables-toggle {
  width: 100%; min-height: 50px; justify-content: flex-start; gap: 10px;
  background: var(--d-action); color: var(--on-accent); border-color: var(--d-action);
  padding: 12px 16px; border-radius: 12px; font-size: 0.9375rem;
}
.page .deliverables-toggle:hover:not(:disabled) { background: var(--accent-hover); }
.deliverables-total { min-width: 28px; padding: 2px 8px; border-radius: 7px; background: var(--on-accent); color: var(--accent); font-variant-numeric: tabular-nums; }
.deliverables-chevron { margin-left: auto; font-size: 1.375rem; line-height: 1; }
.deliverables-toggle[aria-expanded=true] .deliverables-chevron { transform: rotate(180deg); }
.deliverables-panel { display: grid; gap: 12px; min-width: 0; }
.deliverables-panel[hidden], .deliverables-preview[hidden], .deliverables-total[hidden] { display: none; }
.deliverables-help { margin: 0; color: var(--d-muted); font-size: 0.8125rem; line-height: 1.6; }
.deliverables-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.deliverables-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 8px; min-width: 0; padding-right: 12px; border: 1px solid var(--d-border);
  border-left: 4px solid var(--line); border-radius: 12px; background: var(--d-row);
}
.deliverables-card:nth-child(even) { background: var(--d-row-alt); }
.deliverables-card.is-selected { border-left-color: var(--spark); box-shadow: inset 0 0 0 1px var(--accent); }
/* Selection is also written out and counted; color is never the sole signal. */
.page .deliverables-category {
  min-width: 0; min-height: 76px; width: 100%; padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  white-space: normal; overflow-wrap: anywhere; text-align: left; background: transparent; border: 0;
  color: var(--d-ink); border-radius: 9px;
}
.page .deliverables-category:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.deliverables-card-title { font-size: 0.875rem; font-weight: 700; line-height: 1.4; }
.deliverables-card-hint { font-size: 0.75rem; font-weight: 400; color: var(--d-muted); line-height: 1.5; }
.deliverables-card-status { min-height: 18px; font-size: 0.75rem; font-weight: 700; line-height: 1.125rem; color: var(--ok-ink); }
.deliverables-stepper { display: flex; gap: 8px; align-items: center; min-width: 0; }
.page .deliverables-stepper button {
  padding: 0; min-width: 44px; width: 44px; min-height: 44px; height: 44px;
  border-radius: 9px; font: 600 1.5rem/1 var(--font-sans, sans-serif); flex: 0 0 44px;
}
.page .deliverables-plus { background: var(--d-action); color: var(--on-accent); border-color: var(--d-action); }
.page .deliverables-plus:hover:not(:disabled) { background: var(--accent-hover); }
.page .deliverables-minus { background: var(--paper); color: var(--link); border-color: var(--field-line); }
.page .deliverables-minus:hover:not(:disabled) { background: var(--hover); }
.page .deliverables-minus:disabled { opacity: 1; background: var(--track); color: var(--muted); border-color: var(--line); }
.deliverables-quantity { min-width: 28px; text-align: center; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-selected .deliverables-quantity { color: var(--ok-ink); }
.deliverables-footer { display: flex; justify-content: space-between; gap: 12px; }
.page .deliverables-clear { background: transparent; border-color: var(--field-line); color: var(--ink); }
.page .deliverables-done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); min-width: 84px; }
.page .deliverables-done:hover:not(:disabled) { background: var(--accent-hover); }
.deliverables-preview { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--track); }
.deliverables-summary-label { margin: 0 0 8px; color: var(--ink); font-size: 0.75rem; font-weight: 700; }
.deliverables-text { margin: 0; white-space: normal; overflow-wrap: anywhere; font: inherit; font-size: 0.8125rem; line-height: 1.6; }
.deliverables-prompt-heading { display: block; padding: 0 0 8px; white-space: pre-wrap; }
.deliverables-line { display: block; padding: 9px 11px; white-space: pre-wrap; background: var(--paper); }
.deliverables-line:nth-of-type(odd) { background: var(--alt); }
.deliverables-line + .deliverables-line { border-top: 1px solid var(--line); }
.deliverables-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.deliverables-controls { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.request-bar:has(.deliverables-controls) { flex-wrap: wrap; }
.request-summary .details > .deliverables-picker { margin: 12px 0; }
.page .deliverables-picker button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.page .deliverables-toggle:focus-visible { outline-color: var(--focus); }
@container deliverables (max-width: 300px) {
  .deliverables-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 12px 12px; }
  .page .deliverables-category { padding: 12px 0 4px; min-height: 0; }
  .deliverables-stepper { justify-self: end; }
}
@media (max-width: 760px) {
  .page:has(#signed-in) textarea.editor { min-height: 170px; }
  .page:has(#signed-in) .edit-layout { gap: 16px; }
}
@media (forced-colors: active) {
  .deliverables-card.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
  .deliverables-card:nth-child(even), .deliverables-line:nth-of-type(odd) { border-block: 1px dashed CanvasText; }
}