/* Projects workspace v2
 *
 * This file deliberately scopes every rule to the Projects content root. The
 * existing Packshiver shell, sidebar, top bar, shipment workspace, and global
 * controls continue to be rendered and styled by app.js/app.css.
 */

main.projects-page.ps-projects-v2 {
  /* Full width with the same gutter as the global Shipments and Documents
     pages — a project should not sit in a narrower column than the rest of
     the app. */
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 24px 28px 52px;
  background: transparent;
  color: var(--ink, #101820);
}

.ps-projects-v2 *,
.ps-projects-v2 *::before,
.ps-projects-v2 *::after {
  box-sizing: border-box;
}

.ps-projects-v2 [hidden] {
  display: none !important;
}

.ps-projects-v2 button,
.ps-projects-v2 input,
.ps-projects-v2 textarea,
.ps-projects-v2 select {
  font: inherit;
}

.ps-projects-v2 button:focus-visible,
.ps-projects-v2 input:focus-visible,
.ps-projects-v2 textarea:focus-visible,
.ps-projects-v2 select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue, #2368a7) 24%, transparent);
  outline-offset: 2px;
}

.ps-projects-kicker {
  display: block;
  margin: 0 0 7px;
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ps-projects-loading,
.ps-projects-error {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 14px 40px rgba(16, 24, 32, 0.06);
}

.ps-projects-loading-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 2px solid var(--line-strong, #b8c3cb);
  border-top-color: var(--blue, #2368a7);
  border-radius: 50%;
  animation: ps-projects-spin 700ms linear infinite;
}

.ps-projects-loading div {
  display: grid;
  gap: 3px;
}

.ps-projects-loading strong {
  font-size: 15px;
}

.ps-projects-loading span:not(.ps-projects-loading-mark) {
  color: var(--muted, #657280);
  font-size: 13px;
}

.ps-projects-error {
  justify-content: space-between;
}

.ps-projects-error h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.ps-projects-error p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted, #657280);
  line-height: 1.55;
}

@keyframes ps-projects-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Project portfolio */

.ps-projects-list-view,
.ps-project-workspace {
  min-width: 0;
}

.ps-projects-page-heading,
.ps-project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.ps-projects-page-heading h2,
.ps-project-header h2 {
  margin: 0;
  color: var(--ink, #101820);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.ps-projects-page-heading p,
.ps-project-header p {
  max-width: 690px;
  margin: 10px 0 0;
  color: var(--muted, #657280);
  font-size: 15px;
  line-height: 1.55;
}
.ps-projects-page-heading > .button {
  flex: 0 0 auto;
}

.ps-project-header-tools {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.ps-project-header-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ps-project-header-buttons > .button {
  white-space: nowrap;
}

/* List controls: scope pills, search, and the primary action on one row,
   mirroring the Shipments page. */
.ps-projects-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.ps-projects-scope {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

.ps-projects-scope button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #657280);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.ps-projects-scope button b {
  color: var(--faint, #98a2ad);
  font-weight: 650;
}

.ps-projects-scope button:hover {
  color: var(--ink, #101820);
}

.ps-projects-scope button.is-active {
  background: var(--surface, #fff);
  color: var(--blue, #2368a7);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.1);
}

.ps-projects-scope button.is-active b {
  color: var(--muted, #657280);
}

.ps-projects-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted, #657280);
}

.ps-projects-search:focus-within {
  border-color: color-mix(in srgb, var(--blue, #2368a7) 42%, var(--line, #c8d1d7));
}

.ps-projects-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ps-projects-search input {
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #101820);
}

.ps-projects-search input:focus-visible {
  outline: none;
}

.ps-projects-search input::placeholder {
  color: var(--faint, #98a2ad);
}

.ps-projects-controls > .button {
  flex: 0 0 auto;
}

.ps-project-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 0 18px 0 16px;
  border-bottom: 1px solid var(--line, #c8d1d7);
  background: var(--surface, #fff);
}

.ps-projects-list:last-child > .ps-project-row:last-child {
  border-bottom: 0;
}

.ps-project-row > .ps-table-row {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0;
}

.ps-project-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-project-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue, #2368a7);
  cursor: pointer;
}

.ps-projects-selection {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink, #101820);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ps-projects-selection strong {
  font-size: 12.5px;
  font-weight: 700;
}

.ps-project-select {
  display: grid;
  place-items: center;
}

.ps-project-select input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue, #2368a7);
  cursor: pointer;
}

.ps-project-row:has(.ps-table-row:hover) {
  background: #f4f8fb;
}

.ps-project-status {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-project-status.is-attention {
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #b87614);
}

.ps-project-status.is-waiting {
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-project-status.is-clear {
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
}

.ps-projects-filter-empty {
  margin: 24px 0;
  color: var(--muted, #657280);
  text-align: center;
}

/* Project workspace header */

.ps-project-header {
  align-items: flex-end;
}

.ps-project-tabs {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft, #edf1f3) 86%, transparent);
}

.ps-project-tabs button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #657280);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.ps-project-tabs button:hover {
  color: var(--ink, #101820);
}

.ps-project-tabs button.is-active {
  background: var(--surface, #fff);
  color: var(--ink, #101820);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.08);
}

.ps-project-tab-panel {
  min-width: 0;
}

.ps-project-intake-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.ps-project-intake-status > div {
  min-width: 0;
  flex: 1 1 auto;
}

.ps-project-intake-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ps-project-intake-status strong,
.ps-project-intake-status p {
  display: block;
}

.ps-project-intake-status p {
  margin: 3px 0 0;
  color: var(--muted, #657280);
  font-size: 13px;
  line-height: 1.45;
}

.ps-project-intake-status.is-organizing {
  border-color: color-mix(in srgb, var(--blue, #2368a7) 34%, var(--line, #c8d1d7));
  background: color-mix(in srgb, var(--blue-soft, #e8f1fb) 48%, #fff);
}

/* Finding proposed orders is the happy path, not a warning. */
.ps-project-intake-status.is-review {
  border-color: #b9cfe4;
  background: var(--blue-bg, #eaf2fb);
}

.ps-project-intake-status.is-review .ps-project-intake-mark {
  border: 1px solid #b9cfe4;
  background: var(--surface, #fff);
  color: var(--blue, #2368a7);
  font-size: 15px;
  font-weight: 700;
}

.ps-project-intake-status.is-waiting {
  background: #f7f9fb;
}

.ps-project-intake-status.is-ready {
  border-color: #b9d7c7;
  background: #f2faf6;
}

.ps-project-intake-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--blue, #2368a7);
  font-weight: 700;
}

.ps-project-intake-status.is-review .ps-project-intake-mark {
  color: #946411;
}

.ps-project-intake-status.is-ready .ps-project-intake-mark {
  color: #28714c;
}

.ps-project-primary-action,
.ps-project-clear-state,
.ps-project-activity-preview,
.ps-project-section {
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgba(16, 24, 32, 0.055);
}

/* Inside the modal the action surface is the body, not a card within a card:
   no frame of its own, and no second ring of padding around the real one. */
.ps-decision-body .ps-project-primary-action {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ps-decision-body .ps-project-action-body {
  padding: 18px;
}

/* The primary action stays on screen when the body scrolls — a half-clipped
   "Send request" is the one control that must never be out of reach. The
   parent drops its bottom padding so the sticky row can sit on the edge; a
   negative bottom margin would loosen the sticky constraint instead of
   tightening it. */
.ps-decision-body .ps-project-action-body:has(> .ps-project-form-actions) {
  padding-bottom: 0;
}

.ps-decision-body .ps-project-form-actions {
  position: sticky;
  bottom: 0;
  margin: 4px -18px 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line, #c8d1d7);
  background: var(--surface-soft, #edf1f3);
}

/* ==== The decision modal ==================================================
   One decision, centred, over a page that does not move. The drawer this
   replaces put a stat block and a work list beside the decision; both restated
   surfaces the project page already carries, so neither is here. The queue
   survives as a counter and a walk. It sits beneath the intake wizard's
   overlay (z-index 30) so "Add more evidence" still opens on top of it. */

.ps-decision-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(11, 19, 24, 0.42);
}

.ps-decision-modal {
  position: fixed;
  z-index: 21;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px));
  max-height: min(768px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 70px rgba(11, 21, 28, 0.34);
  overflow: hidden;
}

.ps-decision-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line, #c8d1d7);
}

.ps-decision-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #b87614);
}

.ps-decision-mark.is-waiting {
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-decision-mark svg {
  width: 16px;
  height: 16px;
}

.ps-decision-back,
.ps-decision-close,
.ps-decision-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--muted, #657280);
  cursor: pointer;
}

.ps-decision-back:hover,
.ps-decision-close:hover,
.ps-decision-step:hover:not(:disabled) {
  border-color: var(--line-strong, #b8c3cb);
  color: var(--ink, #101820);
}

.ps-decision-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.ps-decision-back svg,
.ps-decision-close svg,
.ps-decision-step svg {
  width: 15px;
  height: 15px;
}

.ps-decision-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-decision-titles h2 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ps-decision-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ps-decision-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line, #c8d1d7);
  background: var(--surface-soft, #edf1f3);
}

.ps-decision-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ps-decision-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong, #b8c3cb);
}

.ps-decision-dots i.is-on {
  width: 18px;
  border-radius: 3px;
  background: var(--blue, #2368a7);
}

.ps-decision-progress {
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ps-decision-spacer {
  flex: 1 1 auto;
}

/* The decision body: what it is about, what happened, then the choices. */

.ps-decision-context {
  margin: 0;
  color: var(--muted, #657280);
  font-size: 12px;
  line-height: 1.5;
}

.ps-decision-lede {
  margin: 11px 0 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.ps-decision-sub {
  margin: 7px 0 0;
  color: var(--muted, #657280);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Direct choices, not a recommendation card with the alternatives folded
   away. The first is the one Packshiver would take; the rest are equals. */

.ps-choices {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.ps-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 11px;
  background: var(--surface, #fff);
  color: var(--ink, #101820);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ps-choice:hover:not(:disabled) {
  border-color: var(--line-strong, #b8c3cb);
  background: #f4f8fb;
}

.ps-choice:focus-visible {
  outline: 2px solid var(--blue, #2368a7);
  outline-offset: 2px;
}

.ps-choice:disabled {
  opacity: 0.5;
  cursor: default;
}

.ps-choice-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
}

.ps-choice-mark svg {
  width: 15px;
  height: 15px;
}

.ps-choice-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-choice-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
}

.ps-choice-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted, #657280);
  font-size: 11.5px;
  line-height: 1.4;
}

.ps-choice-go {
  flex: 0 0 auto;
  color: var(--faint, #98a2ad);
}

.ps-choice-go svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ps-choice.is-primary {
  border-color: #1d2a35;
  background: #111c25;
  color: #fff;
}

.ps-choice.is-primary:hover:not(:disabled) {
  background: #1b2933;
}

.ps-choice.is-primary .ps-choice-copy small {
  color: #a9b7c2;
}

.ps-choice.is-primary .ps-choice-mark {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ps-choice.is-primary .ps-choice-go {
  color: #8ba0b1;
}

.ps-project-dashboard {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.65fr) minmax(260px, 0.95fr);
  align-items: start;
  gap: 18px;
}

.ps-project-dashboard.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.ps-project-primary-action {
  overflow: hidden;
}

.ps-project-primary-action.is-waiting {
  border-color: color-mix(in srgb, var(--blue, #2368a7) 24%, var(--line, #c8d1d7));
}

.ps-project-action-body {
  min-width: 0;
  padding: 22px;
}

.ps-project-action-body > h4 {
  margin: 0;
  color: var(--ink, #101820);
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.ps-project-action-body > p,
.ps-project-form-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted, #657280);
  font-size: 14px;
  line-height: 1.58;
}

.ps-project-comparison {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin: 20px 0 0;
}

.ps-project-comparison > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 15px 16px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 11px;
  background: var(--surface-soft, #edf1f3);
}

.ps-project-comparison dt {
  color: var(--muted, #657280);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ps-project-comparison dd {
  margin: 0;
  color: var(--ink, #101820);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 21px;
  font-weight: 700;
}

.ps-project-comparison small {
  overflow: hidden;
  color: var(--muted, #657280);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-project-comparison > span {
  align-self: center;
  color: var(--faint, #98a2ad);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ps-project-evidence-boundary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue-bg, #eaf2fb) 72%, transparent);
  color: color-mix(in srgb, var(--blue, #2368a7) 78%, var(--ink, #101820));
  font-size: 11px;
  line-height: 1.5;
}

.ps-project-evidence-boundary svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.ps-project-clear-state {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 28px;
}

.ps-project-clear-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
  font-size: 20px;
  font-weight: 800;
}

.ps-project-clear-state h3 {
  margin: 0;
  font-size: 21px;
}

.ps-project-clear-state p {
  margin: 6px 0 0;
  color: var(--muted, #657280);
  line-height: 1.5;
}

.ps-project-action-message {
  margin-bottom: 14px;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
  font-size: 12px;
  line-height: 1.45;
}

.ps-project-action-message.is-error {
  background: var(--red-bg, #fbefed);
  color: var(--red, #b33c35);
}

.ps-project-action-message.is-warning {
  display: grid;
  gap: 3px;
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #8b5b10);
}

.ps-project-waiting-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* Forms in the stable action surface */

.ps-project-email-form,
.ps-project-decision-form,
[data-ps-project-form="issue"] {
  display: grid;
  gap: 14px;
}

.ps-project-email-form label,
.ps-project-decision-form label,
.ps-project-email-form fieldset,
.ps-project-issue-support,
[data-ps-project-form="issue"] > label {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
}

.ps-project-email-form label > span,
.ps-project-decision-form label > span,
.ps-project-email-form legend,
.ps-project-issue-support legend,
[data-ps-project-form="issue"] > label > span {
  color: var(--ink, #101820);
  font-size: 11px;
  font-weight: 700;
}

.ps-project-email-form legend small,
.ps-project-issue-support legend small,
.ps-project-email-form label > span small,
.ps-project-decision-form label > span small,
[data-ps-project-form="issue"] > label > span small {
  margin-left: 5px;
  color: var(--muted, #657280);
  font-weight: 400;
}

.ps-project-email-form input,
.ps-project-email-form textarea,
.ps-project-decision-form textarea,
[data-ps-project-form="issue"] textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong, #b8c3cb);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--ink, #101820);
}

.ps-project-email-form input {
  min-height: 42px;
  padding: 0 12px;
}

.ps-project-email-form textarea,
.ps-project-decision-form textarea,
[data-ps-project-form="issue"] textarea {
  min-height: 112px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
}

.ps-project-email-form fieldset {
  padding: 0;
  border: 0;
}

.ps-project-issue-modes,
.ps-project-issue-support {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ps-project-issue-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ps-project-issue-modes > legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--ink, #101820);
  font-size: 11px;
  font-weight: 700;
}

.ps-project-issue-modes > label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 9px;
  background: var(--surface-soft, #edf1f3);
  cursor: pointer;
}

.ps-project-issue-modes > label:has(input:checked) {
  border-color: var(--blue, #2368a7);
  background: var(--blue-bg, #eaf2fb);
}

.ps-project-issue-modes > label.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ps-project-issue-modes input {
  margin-top: 2px;
}

.ps-project-issue-modes span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ps-project-issue-modes strong {
  font-size: 11px;
}

.ps-project-issue-modes small {
  color: var(--muted, #657280);
  font-size: 10px;
  line-height: 1.4;
}

.ps-project-attachments {
  display: grid;
  gap: 7px;
}

.ps-project-attachments label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 9px;
  background: var(--surface-soft, #edf1f3);
  cursor: pointer;
}

.ps-project-attachments input {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
}

.ps-project-attachments label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ps-project-attachments strong,
.ps-project-attachments small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-project-attachments strong {
  font-size: 11px;
}

.ps-project-attachments small {
  color: var(--muted, #657280);
  font-size: 10px;
}

.ps-project-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

.ps-project-source-note {
  margin: -2px 0 0;
  color: var(--muted, #657280);
  font-size: 10px;
  line-height: 1.5;
}

/* Vendor orders and shipments */

.ps-project-activity-preview,
.ps-project-section {
  margin-top: 18px;
  padding: 20px;
}

.ps-project-order-preview {
  margin-top: 18px;
}

.ps-project-dashboard > .ps-project-rail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.ps-project-dashboard > .ps-project-order-preview,
.ps-project-dashboard > .ps-project-rail > .ps-project-activity-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* When the neighbouring card is taller, the card's link stays anchored to
   its bottom edge instead of floating above the leftover space. */
.ps-project-dashboard > .ps-project-order-preview > footer,
.ps-project-dashboard > .ps-project-rail > .ps-project-activity-preview > footer {
  margin-top: auto;
  padding-top: 16px;
}
.ps-project-order-preview > header,
.ps-project-activity-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.ps-project-order-preview h3,
.ps-project-activity-preview h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.ps-project-order-preview > header p,
.ps-project-activity-preview > header p {
  margin: 6px 0 0;
  color: var(--muted, #657280);
  font-size: 11px;
  line-height: 1.45;
}

.ps-project-order-preview > footer,
.ps-project-activity-preview > footer {
  margin-top: 16px;
  padding-top: 4px;
}

.ps-shipment-link-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
}

.ps-shipment-link-icon svg {
  width: 17px;
  height: 17px;
}

.ps-shipment-link-state {
  color: var(--muted, #657280);
  font-size: 10px;
  white-space: nowrap;
}

/* Documents: the table IS the container — one white card holding a wireframe
   table (horizontal rules only, no pipes). The title line sits directly on
   the page background above it; every column header sorts. */

.ps-project-docs-block {
  margin-top: 18px;
}

.ps-project-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.ps-project-docs-title {
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.ps-project-docs-title h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.ps-project-docs-title span {
  color: var(--muted, #657280);
  font-size: 12.5px;
}

/* Activity */

.ps-project-feed {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-project-feed li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

/* Work-backed entries render as buttons that open the actions panel; the
   button takes over the row's grid so plain and actionable rows align. */
.ps-project-feed li:has(> .ps-project-feed-open) {
  display: block;
  padding: 0;
}

.ps-project-feed-open {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms ease;
}

.ps-project-feed-open:hover {
  background: color-mix(in srgb, var(--blue-bg, #eaf2fb) 70%, transparent);
}

.ps-project-feed li > div {
  min-width: 0;
}

.ps-project-feed strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.ps-project-feed p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-project-feed strong {
  display: block;
  font-size: 12px;
}

.ps-project-feed p {
  margin: 3px 0 0;
  color: var(--muted, #657280);
  font-size: 10px;
}

.ps-project-feed time {
  align-self: start;
  padding-top: 2px;
  color: var(--muted, #657280);
  font-size: 10px;
  white-space: nowrap;
}

.ps-project-feed-empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--muted, #657280);
  text-align: center;
}

.ps-project-feed-empty strong {
  color: var(--ink, #101820);
  font-size: 13px;
  font-weight: 650;
}

.ps-project-feed-empty > span:last-child {
  max-width: 30ch;
  font-size: 11.5px;
  line-height: 1.45;
}

/* Responsive */

@media (max-width: 1050px) {
  .ps-project-overview {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .ps-project-dashboard {
    grid-template-columns: minmax(0, 2.15fr) minmax(240px, 0.85fr);
  }

  .ps-project-summary {
    min-width: 280px;
  }
}

@media (max-width: 860px) {
  main.projects-page.ps-projects-v2 {
    padding: 20px 18px 52px;
  }

  .ps-projects-page-heading,
  .ps-project-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ps-project-header {
    gap: 18px;
  }

  .ps-project-header-tools {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .ps-project-header-buttons {
    justify-content: flex-start;
  }

  .ps-project-dashboard {
    grid-template-columns: 1fr;
  }

  /* Narrow lists keep select, project, and status; the count columns step
     aside. */
  .ps-projects-grid {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .ps-project-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

}

@media (max-width: 640px) {
  main.projects-page.ps-projects-v2 {
    padding: 20px max(11px, calc((100% - 620px) / 2)) 48px;
  }

  .ps-projects-page-heading h2,
  .ps-project-header h2 {
    font-size: 31px;
  }
.ps-projects-page-heading > .button {
    width: 100%;
  }

  .ps-projects-controls {
    flex-wrap: wrap;
  }

  .ps-projects-search {
    flex: 1 1 100%;
    order: 3;
  }

  .ps-projects-controls > .button {
    margin-left: auto;
  }

  .ps-project-row {
    min-height: 0;
    padding: 13px 14px;
  }

  .ps-project-status {
    justify-self: end;
  }

  .ps-project-header-buttons {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .ps-project-header-buttons > .button {
    width: 100%;
  }

  .ps-project-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .ps-project-tabs button {
    flex: 1 0 auto;
  }

  .ps-project-action-body {
    padding: 17px 15px;
  }

  .ps-project-action-body > h4 {
    font-size: 24px;
  }

  .ps-project-comparison {
    grid-template-columns: 1fr;
  }

  .ps-project-comparison > span {
    justify-self: center;
  }

  .ps-project-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ps-project-form-actions .button {
    width: 100%;
  }

  .ps-project-issue-modes {
    grid-template-columns: 1fr;
  }

  .ps-project-order-preview,
  .ps-project-activity-preview,
  .ps-project-section {
    padding: 15px;
  }
.ps-project-order-preview > header,
.ps-project-activity-preview > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ps-shipment-link-state {
    grid-column: 2;
    justify-self: start;
  }

  /* Narrow documents table keeps title and status; type and received fold. */
  .ps-docs-grid {
    grid-template-columns: minmax(0, 1fr) auto 12px;
    padding: 0 14px;
  }

  .ps-docs-grid > :nth-child(2),
  .ps-docs-grid > :nth-child(3),
  .ps-docs-grid > :nth-child(4) {
    display: none;
  }

  .ps-project-docs-head {
    margin-bottom: 8px;
    padding: 0 2px;
  }

  .ps-activity-grid {
    grid-template-columns: minmax(0, 1fr) auto 12px;
    padding: 0 14px;
  }

  .ps-activity-grid > :nth-child(2),
  .ps-activity-grid > :nth-child(3),
  .ps-activity-grid > :nth-child(4) {
    display: none;
  }

  .ps-project-feed li,
  .ps-project-feed-open {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .ps-project-feed time {
    grid-column: 2;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-projects-v2 *,
  .ps-projects-v2 *::before,
  .ps-projects-v2 *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Proposed-order review: a fixed-height modal for a self-contained setup task.
   It sits above the actions drawer (z-index 21) and below the intake wizard. */

.ps-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(11, 19, 24, 0.32);
}

.ps-review-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 25;
  width: min(880px, calc(100vw - 48px));
  height: min(620px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #f2f4f6;
  box-shadow: 0 30px 80px rgba(11, 19, 24, 0.35);
  transform: translate(-50%, -50%);
}

.ps-review-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 17px;
  background: var(--surface, #fff);
  border-bottom: 1px solid #dbe2e7;
}

.ps-review-head h3 {
  margin: 0 0 5px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.ps-review-head p {
  max-width: 620px;
  margin: 0;
  color: var(--muted, #657280);
  font-size: 12.5px;
  line-height: 1.45;
}

.ps-review-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
}

.ps-review-error {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #e2b4ae;
  border-radius: 10px;
  background: var(--red-bg, #fbefed);
  color: var(--red, #b33c35);
  font-size: 12.5px;
}

.ps-review-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-review-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px 16px;
  border: 1px solid #d5dce1;
  border-radius: 12px;
  background: var(--surface, #fff);
}

.ps-review-card.is-done {
  border-color: #9fd0b5;
}

.ps-review-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-review-mark svg {
  width: 21px;
  height: 21px;
}

.ps-review-mark.is-done {
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
}

.ps-review-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ps-review-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
}

.ps-review-identity div {
  display: flex;
  min-width: 0;
  gap: 5px;
  font-size: 11.5px;
}

.ps-review-identity dt {
  color: var(--muted, #657280);
}

.ps-review-identity dd {
  margin: 0;
  color: var(--ink, #101820);
  font-weight: 650;
}

.ps-review-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.ps-review-title strong {
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-review-order {
  flex: 0 0 auto;
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}

.ps-review-line,
.ps-review-source {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-review-line {
  color: #4d5966;
  font-size: 12px;
}

.ps-review-source {
  color: var(--muted, #657280);
  font-size: 11.5px;
}

.ps-review-line svg,
.ps-review-source svg,
.ps-review-confidence svg,
.ps-review-done svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: #8c98a4;
}

.ps-review-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 4px 9px 4px 7px;
  border-radius: 7px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
  font-size: 11px;
  font-weight: 650;
}

.ps-review-confidence.is-clear {
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
}

.ps-review-confidence.is-clear svg {
  color: var(--green, #1f7a50);
}

.ps-review-confidence.is-attention {
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #b87614);
}

.ps-review-confidence.is-attention svg {
  color: var(--amber, #b87614);
}

.ps-review-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ps-review-inline {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin-top: 3px;
  padding: 14px;
  border: 1px solid #dbe2e7;
  border-radius: 10px;
  background: var(--surface-soft, #f7f9fa);
}

.ps-review-inline-copy,
.ps-review-inline fieldset,
.ps-review-empty,
.ps-review-inline-actions {
  grid-column: 1 / -1;
}

.ps-review-inline-copy {
  display: grid;
  gap: 3px;
}

.ps-review-inline-copy strong {
  font-size: 13px;
}

.ps-review-inline-copy span,
.ps-review-empty {
  margin: 0;
  color: var(--muted, #657280);
  font-size: 11.5px;
  line-height: 1.4;
}

.ps-review-inline > label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4d5966;
  font-size: 11.5px;
  font-weight: 650;
}

.ps-review-inline label small {
  color: var(--muted, #657280);
  font-weight: 500;
}

.ps-review-inline input[type="text"],
.ps-review-inline input:not([type]) {
  width: 100%;
  min-width: 0;
}

.ps-review-inline fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ps-review-inline legend {
  margin-bottom: 6px;
  color: #4d5966;
  font-size: 11.5px;
  font-weight: 700;
}

.ps-review-branch {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #dbe2e7;
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
}

.ps-review-branch span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ps-review-branch strong {
  font-size: 12px;
}

.ps-review-branch small {
  font-size: 11px;
}

.ps-review-inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-review-more {
  gap: 7px;
}

.ps-review-more svg {
  color: currentColor;
}

.ps-review-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green, #1f7a50);
  font-size: 12.5px;
  font-weight: 700;
}

.ps-review-done svg {
  color: var(--green, #1f7a50);
}

.ps-review-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3;
  width: min(282px, calc(100vw - 64px));
  overflow: hidden;
  border: 1px solid #d5dce1;
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 28px rgba(11, 19, 24, 0.16);
}

.ps-review-menu-item {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink, #101820);
  cursor: pointer;
  text-align: left;
}

.ps-review-menu-item + .ps-review-menu-item {
  border-top: 1px solid #e8edf0;
}

.ps-review-menu-item:hover {
  background: var(--surface-soft, #edf1f3);
}

.ps-review-menu-item:hover strong {
  color: var(--blue, #2368a7);
}

.ps-review-menu-item strong {
  font-size: 12.5px;
  font-weight: 700;
}

.ps-review-menu-item small {
  color: var(--muted, #657280);
  font-size: 11px;
  line-height: 1.35;
}

.ps-review-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 24px;
  background: var(--surface, #fff);
  border-top: 1px solid #dbe2e7;
  color: var(--muted, #657280);
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .ps-review-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .ps-review-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .ps-review-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .ps-review-inline {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .ps-review-inline > label,
  .ps-review-inline-copy,
  .ps-review-inline fieldset,
  .ps-review-empty,
  .ps-review-inline-actions {
    grid-column: 1;
  }

  .ps-review-menu {
    width: 100%;
  }
}

.ps-review-done.is-quiet,
.ps-review-done.is-quiet svg {
  color: var(--muted, #657280);
}

.ps-review-card.is-done .ps-review-mark.is-done {
  background: var(--green-bg, #eaf6f0);
}

/* Overview action center: the next decision leads, branches carry the weight. */

.ps-next-decision {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #b9cfe4;
  border-radius: 14px;
  background: var(--blue-bg, #eaf2fb);
}

.ps-next-decision-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-next-decision-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #b9cfe4;
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--blue, #2368a7);
}

.ps-next-decision-mark svg {
  width: 20px;
  height: 20px;
}

.ps-next-decision strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ps-next-decision p {
  margin: 0;
  color: #4d5a66;
  font-size: 12.5px;
  line-height: 1.45;
}

.ps-next-decision-actions {
  flex: 0 0 auto;
}

/* Waiting rail */

.ps-project-waiting-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-project-waiting-list li {
  display: block;
  min-width: 0;
  padding: 0;
}

.ps-project-waiting-list li + li {
  border-top: 1px solid #e9edf0;
}

.ps-project-waiting-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-project-waiting-mark svg {
  width: 15px;
  height: 15px;
}

.ps-project-waiting-list strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.ps-project-waiting-list small {
  color: var(--muted, #657280);
  font-size: 11px;
}

@media (max-width: 860px) {
  .ps-next-decision {
    flex-wrap: wrap;
  }
}

.ps-project-waiting-more {
  margin: 10px 0 0;
  color: var(--muted, #657280);
  font-size: 11.5px;
}

.ps-project-status.is-bad {
  background: var(--red-bg, #fbefed);
  color: var(--red, #b33c35);
}

.ps-project-intake-mark svg,
.ps-project-clear-mark svg {
  width: 15px;
  height: 15px;
}
.ps-project-issue-modes i svg {
  width: 15px;
  height: 15px;
}

/* ==== One table system ====================================================
   Projects, Shipments, Documents and Activity all render this table. Every
   value here is the one the global Shipments table already uses
   (.shipments-table / .shipments-table-head / .shipment-row in app.css), so
   this is a promotion of an existing pattern rather than a new one. */

.ps-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
}

.ps-table-head {
  display: grid;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line, #c8d1d7);
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ps-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.ps-sort:hover,
.ps-sort.is-active {
  color: var(--ink, #101820);
}

.ps-sort-carets {
  display: inline-grid;
  line-height: 0;
}

.ps-sort-carets svg {
  display: block;
  width: 8px;
  height: 5px;
  color: var(--faint, #98a2ad);
}

.ps-sort-carets svg + svg {
  margin-top: 1.5px;
}

.ps-sort.is-active .ps-sort-carets svg.is-on {
  color: var(--blue, #2368a7);
}

.ps-table-body {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-table-row {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line, #c8d1d7);
  background: var(--surface, #fff);
  color: #202a33;
  font-size: 12px;
  text-align: left;
  transition: background-color 140ms ease;
}

button.ps-table-row {
  cursor: pointer;
}

button.ps-table-row:hover {
  background: #f4f8fb;
}

button.ps-table-row:focus-visible {
  outline: 2px solid var(--blue, #2368a7);
  outline-offset: -2px;
}

/* Only the row resting on the frame's own bottom edge drops its rule. When a
   footer follows, the row keeps it so the table still closes with a line. */
.ps-table-body:last-child > :last-child > .ps-table-row,
.ps-table-body:last-child > .ps-table-row:last-child {
  border-bottom: 0;
}

.ps-table-row.is-compact {
  min-height: 58px;
}

.ps-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-cell.is-muted {
  color: var(--muted, #657280);
}

.ps-cell-primary {
  min-width: 0;
}

.ps-cell-primary strong {
  display: block;
  overflow: hidden;
  color: var(--ink, #101820);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-cell-primary > span:not(.ps-cell-mark):not(.ps-cell-stack) {
  display: block;
  margin-top: 3px;
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
}

.ps-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.ps-badge.is-attention {
  background: var(--red-bg, #fbefed);
  color: var(--red, #b33c35);
}

.ps-badge.is-moving {
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #b87614);
}

.ps-badge.is-done {
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
}

.ps-badge.is-working {
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--muted, #657280);
  font-size: 12px;
}

/* Paging reads the way the global Shipments table's does. */
.ps-table-pages {
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.ps-table-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 42px 24px;
  text-align: center;
}

.ps-table-empty-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  border-radius: 11px;
  background: var(--surface-soft, #edf1f3);
  color: var(--muted, #657280);
}

.ps-table-empty-mark svg {
  width: 19px;
  height: 19px;
}

.ps-table-empty strong {
  font-size: 15px;
  font-weight: 650;
}

.ps-table-empty p {
  max-width: 460px;
  margin: 0;
  color: var(--muted, #657280);
  font-size: 12.5px;
  line-height: 1.5;
}

.ps-table-empty-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.ps-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.ps-table-count {
  color: var(--muted, #657280);
  font-size: 12px;
}

/* Shipments: one row per shipment, the order number a column not a heading. */

.ps-shipments-grid {
  grid-template-columns: minmax(170px, 1.5fr) 165px 120px minmax(150px, 1.2fr) minmax(150px, 1.15fr) 96px;
}

.ps-shipments-compact-grid {
  grid-template-columns: minmax(180px, 1.8fr) 132px minmax(150px, 1.2fr) 110px;
}

.ps-project-list-heading {
  margin-bottom: 14px;
}

.ps-project-list-heading h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.ps-project-list-heading p {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--muted, #657280);
  font-size: 11.5px;
  line-height: 1.45;
}

.ps-overview-shipments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.ps-overview-shipments-head h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
}

@media (max-width: 1100px) {
  .ps-shipments-grid {
    grid-template-columns: minmax(160px, 1.8fr) 130px minmax(140px, 1.1fr) 100px;
  }

  .ps-shipments-grid > :nth-child(2),
  .ps-shipments-grid > :nth-child(5),
  .ps-shipment-row > .ps-cell:nth-child(2),
  .ps-shipment-row > .ps-cell:nth-child(5) {
    display: none;
  }
}

/* The event drawer: a read-only record beside the table, not a workspace over
   it. The table keeps its place; the arrows walk the log without closing. */

/* With the record open the tab becomes two columns: the log keeps its place
   and the record sits beside it, never over it. */
.ps-project-activity-block.has-event,
.ps-project-docs-block.has-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: start;
  gap: 20px;
}

.ps-project-activity-block.has-event > .ps-project-docs-head,
.ps-project-docs-block.has-record > .ps-project-docs-head {
  grid-column: 1 / -1;
}

/* The table sheds the columns the record already shows, so headlines keep
   their width instead of truncating. */
.ps-project-activity-block.has-event .ps-activity-grid {
  grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 0.8fr) 14px;
}

.ps-project-activity-block.has-event .ps-activity-grid > :nth-child(2),
.ps-project-activity-block.has-event .ps-activity-grid > :nth-child(5) {
  display: none;
}

/* Documents sheds Type and Status the same way: the record states both. */
.ps-project-docs-block.has-record .ps-docs-grid {
  grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 0.9fr) 14px;
}

.ps-project-docs-block.has-record .ps-docs-grid > :nth-child(2),
.ps-project-docs-block.has-record .ps-docs-grid > :nth-child(5) {
  display: none;
}

.ps-event-drawer {
  min-width: 0;
  position: sticky;
  top: 18px;
  max-height: min(720px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 34px rgba(11, 19, 24, 0.10);
}

.ps-event-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #c8d1d7);
}

.ps-event-head .ps-projects-kicker {
  margin: 0;
}

.ps-event-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ps-event-step,
.ps-event-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line, #c8d1d7);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #101820);
  cursor: pointer;
}

.ps-event-step[disabled] {
  color: var(--faint, #98a2ad);
  cursor: default;
}

.ps-event-close {
  margin-left: 4px;
  border-color: transparent;
  color: var(--muted, #657280);
}

.ps-event-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.ps-event-mark-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.ps-event-body h3 {
  margin: 0 0 5px;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.ps-event-lede {
  margin: 0 0 14px;
  color: var(--muted, #657280);
  font-size: 12.5px;
}

.ps-event-lines {
  margin: 0;
}

.ps-event-lines > div {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f4;
}

.ps-event-lines dt {
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ps-event-lines dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.45;
}

.ps-event-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--line, #c8d1d7);
}

@media (max-width: 1100px) {
  .ps-project-activity-block.has-event,
  .ps-project-docs-block.has-record {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-project-docs-block.has-record .ps-docs-grid {
    grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 0.9fr) 14px;
  }

  .ps-event-drawer {
    max-height: none;
  }
}

.ps-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #657280);
  cursor: pointer;
}

.ps-banner-dismiss:hover {
  background: color-mix(in srgb, var(--ink, #101820) 6%, transparent);
  color: var(--ink, #101820);
}

/* Column layouts for the shared table. Documents and Activity now use the
   same frame, header band, row height, dividers, hover, focus and pills as
   Shipments and the global list — only the columns differ. */

.ps-docs-grid {
  grid-template-columns: minmax(0, 1.35fr) 140px 120px minmax(0, 1fr) 165px 14px;
}

.ps-activity-grid {
  grid-template-columns: minmax(0, 1.1fr) 185px 110px minmax(0, 0.85fr) 150px 14px;
}

.ps-cell-with-mark {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ps-cell-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #eef5ff;
  color: #2f73ce;
}

.ps-cell-mark svg {
  width: 16px;
  height: 16px;
}

.ps-cell-mark.is-attention {
  background: var(--amber-bg, #fff4df);
  color: var(--amber, #b87614);
}

.ps-cell-mark.is-waiting,
.ps-cell-mark.is-issue {
  background: var(--blue-bg, #eaf2fb);
  color: var(--blue, #2368a7);
}

.ps-cell-mark.is-bad {
  background: var(--red-bg, #fbefed);
  color: var(--red, #b33c35);
}

.ps-cell-mark.is-movement {
  background: #f5efff;
  color: #8056ca;
}

.ps-cell-mark.is-resolved {
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
}

.ps-cell-stack {
  min-width: 0;
  display: block;
}

.ps-cell-stack span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted, #657280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-cell-link {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ps-cell-link svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: #8c98a4;
}

.ps-cell-link.is-bad {
  color: var(--red, #b33c35);
}

.ps-row-arrow {
  color: var(--faint, #98a2ad);
  justify-self: end;
}

.ps-row-arrow svg {
  width: 16px;
  height: 16px;
}

button.ps-table-row:hover .ps-cell-primary strong,
button.ps-table-row:hover .ps-row-arrow {
  color: var(--blue, #2368a7);
}

.ps-table-row.is-selected {
  background: var(--blue-bg, #eaf2fb);
  box-shadow: inset 3px 0 0 var(--blue, #2368a7);
}

.ps-table-row.is-static {
  cursor: default;
}

.ps-projects-grid {
  grid-template-columns: 28px minmax(150px, 2.2fr) 180px 120px 120px 150px;
}

/* The title track is floored, not minmax(0, …): 570px of fixed tracks against a
   row narrower than that collapsed it to exactly 0px on every width below about
   1100, and the project name spilled out of a zero-width cell. */
.ps-projects-row-grid {
  display: grid;
  grid-template-columns: minmax(150px, 2.2fr) 180px 120px 120px 150px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
}

/* The view-wide `.ps-projects-v2 button { font-size: inherit }` reset outranks
   a single class, so the shared row states its size at the same specificity
   and every cell carries its own — nothing here depends on inheritance. */
.ps-projects-v2 button.ps-table-row,
.ps-projects-v2 div.ps-table-row {
  font-size: 12px;
}

.ps-cell,
.ps-cell-link,
.ps-table-row time {
  font-size: 12px;
}


/* What just happened, after the decision modal closes. */
.ps-project-confirmation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #b6dcc7;
  border-radius: 12px;
  background: var(--green-bg, #eaf6f0);
}

.ps-project-confirmation-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--green, #1f7a50);
}

.ps-project-confirmation-mark svg { width: 15px; height: 15px; }

.ps-project-confirmation p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #24523c;
  font-size: 12.5px;
  line-height: 1.45;
}

/* A failure belongs beside the button that caused it, not at the top of a
   form the operator has already scrolled past. */
.ps-form-error {
  flex: 1 1 100%;
  margin: 0 0 2px;
  color: var(--red, #b33c35);
  font-size: 12px;
  line-height: 1.45;
}

.ps-decision-body .ps-project-form-actions {
  flex-wrap: wrap;
}


/* A waiting item is still openable — reading about a request you sent is not
   the same as being able to look at it. */
.ps-project-waiting-open {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ps-project-waiting-open:hover { background: #f4f8fb; }

.ps-project-waiting-open:focus-visible {
  outline: 2px solid var(--blue, #2368a7);
  outline-offset: -2px;
}

.ps-project-waiting-open > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.ps-project-waiting-open .ps-row-arrow {
  flex: 0 0 auto;
  color: var(--faint, #98a2ad);
}

.ps-project-waiting-open .ps-row-arrow svg { display: block; width: 15px; height: 15px; }


/* ==== Projects table across widths =======================================
   These rules sit after the base declaration deliberately. The responsive
   overrides used to live 1,600 lines earlier in the file, which meant the base
   grid won every one of them on source order -- the collapse to two columns
   never actually happened, and the only rule still doing anything was the one
   that set display:none on three columns. */

/* Tighten the fixed tracks before anything has to fold. */
@media (min-width: 981px) and (max-width: 1120px) {
  .ps-projects-grid {
    grid-template-columns: 28px minmax(140px, 2.2fr) 132px 84px 92px 104px;
  }

  .ps-projects-row-grid {
    grid-template-columns: minmax(140px, 2.2fr) 132px 84px 92px 104px;
  }
}

/* Fold, do not delete. The shipment count, the document count and the last
   activity date were display:none below 860px, so every phone and small tablet
   silently lost them. They take a second line now, each carrying its name --
   from 980px down, which is where five tracks stop fitting beside the rail. */
@media (max-width: 980px) {
  .ps-projects-grid {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .ps-projects-grid > span:nth-child(n + 4) {
    display: none;
  }

  /* The row is two lines tall once the counts fold, so the select box sits with
     the title rather than drifting to the vertical middle of the stack. */
  .ps-project-row {
    align-items: start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ps-project-row > .ps-project-select {
    margin-top: 2px;
  }

  .ps-projects-row-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
  }

  .ps-projects-row-grid > .ps-cell-primary {
    grid-column: 1;
  }

  .ps-projects-row-grid > .ps-badge {
    grid-column: 2;
    justify-self: end;
  }

  .ps-projects-row-grid > .ps-cell {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    overflow: visible;
    white-space: normal;
  }

  /* Matches the shared fold label in app.css exactly. It is repeated rather
     than shared because the workspace contract keeps this stylesheet scoped to
     the Projects root -- it may not define a global selector. */
  .ps-projects-row-grid > .ps-cell::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--faint, #5b6675);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ==== Touch targets ====================================================
   Matches the 44px coarse-pointer floor the main stylesheet sets. The select
   box is the destructive control on this page, so the whole cell is the
   target, not the 16px square inside it. */

@media (pointer: coarse) {
  .ps-project-select {
    min-width: 44px;
    min-height: 44px;
  }

  .ps-project-select input {
    width: 22px;
    height: 22px;
  }

  .ps-projects-scope button {
    min-height: 44px;
  }
}