/* The project detail document: staff page, customer job page, crew view, and paper. */
/* Nate's legend: one colour per design, in this order (tokens.css). */
.pd-c1 { --pd-color: var(--pd-c1); } .pd-c2 { --pd-color: var(--pd-c2); } .pd-c3 { --pd-color: var(--pd-c3); } .pd-c4 { --pd-color: var(--pd-c4); }
.pd-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--pd-color); vertical-align: -1px; }

.pd { color: var(--pd-text); font-size: 14px; line-height: 1.45; }
.pd h3 { margin: 0 0 8px; color: var(--pd-accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pd-small { font-size: 12.5px; color: var(--pd-muted); }
.pd .r { text-align: right; }

.pd-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-bottom: 12px; border-bottom: 2px solid var(--pd-ink); }
.pd-head p { margin: 0; }
.pd-kicker { color: var(--pd-accent); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pd-title { font-size: 20px; font-weight: 700; color: var(--pd-ink); }
.pd-sub { color: var(--pd-muted); }
.pd-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.pd-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-muted); }
.pd-meta dd { margin: 0; color: var(--pd-ink); }

.pd-section { margin-top: 18px; }
.pd-figure { margin: 0 0 10px; }
.pd-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--pd-line); border-radius: 6px; }
.pd-figure figcaption { font-size: 12px; color: var(--pd-muted); margin-top: 4px; }
.pd-plan-svg { display: block; width: 100%; height: auto; background: #FBFCFD; border: 1px solid var(--pd-line); border-radius: 6px; }
.pd-run { fill: none; stroke: var(--pd-color); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.pd-run-label { font: 600 13px system-ui, sans-serif; fill: var(--pd-ink); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.pd-gate { fill: #FFD23F; stroke: var(--pd-ink); stroke-width: 2; }

.pd-runs { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-runs th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-muted); border-bottom: 1px solid var(--pd-line); padding: 4px 6px; }
.pd-runs td { border-bottom: 1px solid var(--pd-line); padding: 5px 6px; }

.pd-band { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--pd-color); color: #fff !important; font-size: 13px !important; letter-spacing: .04em !important; }
.pd-band span { font-weight: 800; white-space: nowrap; }
.pd-design-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pd-rendering { margin: 0; }
.pd-rendering img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pd-missing { display: grid; place-items: center; aspect-ratio: 16 / 7; border: 1.5px dashed var(--pd-line); border-radius: 6px; color: var(--pd-muted); font-style: italic; }
.pd-facts, .pd-conditions { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--pd-line); border: 1px solid var(--pd-line); border-radius: 6px; overflow: hidden; }
.pd-facts div, .pd-conditions div { background: #fff; padding: 7px 9px; min-width: 0; }
.pd-facts .pd-wide { grid-column: 1 / -1; }
.pd-facts dt, .pd-conditions dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-muted); }
.pd-facts dd, .pd-conditions dd { margin: 2px 0 0; color: var(--pd-ink); }
.pd-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-includes { list-style: disc; margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--pd-muted); columns: 2; column-gap: 24px; }
.pd-graphic { margin: 10px 0 0; }
.pd-graphic img { display: block; width: 100%; max-width: 720px; height: auto; border-radius: 6px; border: 1px solid var(--pd-line); }
.pd-notes { margin: 0; padding-left: 22px; list-style: decimal; }
.pd-notes li { margin: 2px 0; }

@media (max-width: 640px) {
  .pd-design-body { grid-template-columns: 1fr; }
  .pd-conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-includes { columns: 1; }
}

/* The customer's job page */
.pd-review { margin-top: 18px; padding: 14px; border-radius: 8px; background: #EAF4FB; display: grid; gap: 10px; justify-items: start; }
.pd-review .words p { margin: 0; }
.pd-confirmed { margin: 0; color: #2C7A4B; font-weight: 600; }
.pd-pending { margin: 0; color: #8A5300; }
.pd-change summary { color: var(--blue-ink); font-weight: 600; }
.pd-change-form { display: grid; gap: 6px; margin-top: 8px; min-width: min(420px, 100%); }
.pd-change-form textarea { font: inherit; padding: 8px; border: 1px solid #C0C4CA; border-radius: 6px; }
.pd-review .pd-button { display: inline-block; border: 0; border-radius: 8px; padding: 11px 18px; background: #2478B0; color: #fff; font: 700 15px inherit; font-family: inherit; cursor: pointer; }
.pd-review .pd-confirm { background: #2C7A4B; }
.pd-print { background: none; border: 0; padding: 0; color: #24719F; text-decoration: underline; font: inherit; cursor: pointer; }

/* Staff */
.pd-sheet { max-width: 980px; }
.pd-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pd-edit-grid label { display: grid; gap: 3px; }
.pd-edit-grid .pd-wide { grid-column: 1 / -1; }

/* The crew view */
.pd-crew-design { margin-top: 8px; }
.pd-crew-design ul, .pd-crew-conditions { margin: 4px 0 0; padding-left: 18px; }
.pd-crew .pd-notes { margin-top: 8px; }

/* Paper: the project details alone, which is also the HOA packet. The Print button
   (print_controller.js) marks the body .print-details for the length of the print. */
@media print {
  .print-details .pd-noprint, .print-details nav, .print-details .flash { display: none !important; }
  .staff.print-details .office { display: block; }
  .staff.print-details .main > :not(.pd-sheet) { display: none !important; }
  .staff.print-details .pd-sheet { border: 0; padding: 0; max-width: none; }
  .customer.print-details .sheet > :not(#project-details) { display: none !important; }
  .customer.print-details .pd-customer > h2, .customer.print-details .pd-customer > .words { display: none; }
  .pd { font-size: 11.5px; }
  .pd-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-swatch, .pd-run, .pd-gate { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-design-body, .pd-graphic, .pd-conditions, .pd-band { break-inside: avoid; }
  .pd-band, .pd h3 { break-after: avoid; }
  .pd-rendering img { max-height: 220px; object-fit: contain; }
  .pd-graphic img { max-width: 70%; }
}