/* ══════════════════════════════════════════════════════════════════════════
   canon-sched-principal.css — subcontract close-out drawer
   (feature_principal_closeout, js/scheduler/principalclose.js).

   A wide drawer over the board: the three checks, the service report and the
   invoice side by side, and one send at the foot. Below 900px the documents
   stack. Canon tokens only; every class is written only by principalclose.js.
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {
  .pclose-scrim {
    position: fixed; inset: 0; z-index: 1200;
    background: color-mix(in srgb, var(--c-text) 28%, transparent);
    display: flex; justify-content: flex-end;
  }
  .pclose {
    width: min(1180px, 94vw); height: 100%; overflow: auto;
    display: flex; flex-direction: column;
    background: var(--c-bg); color: var(--c-text);
    border-left: 1px solid var(--c-border);
    box-shadow: -18px 0 40px -24px rgb(0 0 0 / 35%);
  }
  .pclose-loading { padding: var(--sp-6); font-size: 13.5px; color: var(--c-text-2); display: flex; gap: var(--sp-2); align-items: center; }

  .pclose-head {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6) var(--sp-4); background: var(--c-card); border-bottom: 1px solid var(--c-border);
  }
  .pclose-head > div { flex: 1; min-width: 0; }
  .pclose-head h2 { margin: var(--sp-1) 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
  .pclose-head h2 span { font-weight: 500; color: var(--c-text-2); }
  .pclose-sub { font-size: 12.5px; color: var(--c-text-2); }
  .pclose-x {
    width: 34px; height: 34px; border-radius: var(--r-sm, 8px); border: 1px solid var(--c-border);
    background: var(--c-card); color: var(--c-text-2); cursor: pointer; display: grid; place-items: center;
  }
  .pclose-x:hover { color: var(--c-text); border-color: var(--c-text-2); }

  .pclose-checks {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--c-card); border-bottom: 1px solid var(--c-border);
  }
  .pclose-check { display: flex; gap: var(--sp-2_5); padding: var(--sp-4) var(--sp-5); min-width: 0; }
  .pclose-check + .pclose-check { border-left: 1px solid var(--c-border); }
  .pclose-check > i { font-size: 18px; margin-top: var(--sp-px); color: var(--c-muted); }
  .pclose-check.is-ok > i { color: var(--c-ok); }
  .pclose-check.is-warn > i { color: var(--c-warn); }
  .pclose-check b { display: block; font-size: 13.5px; font-weight: 600; }
  .pclose-check p { margin: calc(2 * var(--sp-px)) 0 0; font-size: 12.5px; line-height: 1.45; color: var(--c-text-2); }
  .pclose-fix { margin-top: var(--sp-2); display: flex; gap: var(--sp-1_5); flex-wrap: wrap; align-items: center; }
  .pclose-fix input {
    font: inherit; font-size: 13px; height: 32px; padding: 0 var(--sp-2_5); min-width: 0; width: 150px;
    border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px); background: var(--c-bg); color: var(--c-text);
  }

  .pclose-docs {
    flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6); align-items: start; align-content: start;
  }
  .pclose-doc-h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: 13.5px; }
  .pclose-doc-h span { color: var(--c-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .pclose-report, .pclose-paper {
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md, 10px);
    padding: var(--sp-5); min-height: 120px;
  }
  .pclose-empty { padding: var(--sp-4); font-size: 13px; color: var(--c-text-2); display: grid; gap: var(--sp-2); justify-items: start; }
  .pclose-empty p { margin: 0; }

  .pclose-paper-h { display: grid; gap: calc(2 * var(--sp-px)); margin-bottom: var(--sp-3); font-size: 12.5px; color: var(--c-text-2); }
  .pclose-paper-h b { font-size: 15px; color: var(--c-text); font-weight: 600; }
  .pclose-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .pclose-lines th { text-align: left; font-weight: 600; color: var(--c-muted); padding: var(--sp-1_5) var(--sp-1); border-bottom: 1px solid var(--c-border); }
  .pclose-lines td { padding: var(--sp-1_5) var(--sp-1); border-bottom: 1px solid var(--c-border); vertical-align: top; }
  .pclose-lines .n { text-align: right; white-space: nowrap; }
  .pclose-lines tr.h td { font-weight: 600; padding-top: var(--sp-3); }
  .pclose-lines tr.t td { color: var(--c-text-2); }
  .pclose-lines tr.hr td:first-child { box-shadow: inset 2px 0 0 var(--c-warn); padding-left: var(--sp-2); }
  .pclose-tot {
    display: grid; grid-template-columns: auto auto; justify-content: end; column-gap: var(--sp-5); row-gap: calc(2 * var(--sp-px));
    margin-top: var(--sp-3); font-size: 12.5px; font-variant-numeric: tabular-nums;
  }
  .pclose-tot b { text-align: right; font-weight: 500; }
  .pclose-tot .g { font-size: 14px; font-weight: 700; color: var(--c-text); }

  .pclose-foot {
    position: sticky; bottom: 0; display: flex; gap: var(--sp-5); align-items: flex-end; justify-content: space-between;
    padding: var(--sp-4) var(--sp-6); background: var(--c-card); border-top: 1px solid var(--c-border);
  }
  .pclose-how { display: grid; gap: var(--sp-1_5); min-width: 0; }
  .pclose-t { font-size: 12.5px; font-weight: 600; color: var(--c-text-2); }
  .pclose-seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
  .pclose-seg button {
    font: inherit; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 0 var(--sp-3);
    border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px); background: var(--c-card); color: var(--c-text-2); cursor: pointer;
  }
  .pclose-seg button[aria-checked="true"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
  .pclose-where { margin: 0; font-size: 12.5px; color: var(--c-text-2); }
  .pclose-switch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 600; cursor: pointer; }
  .pclose-switch input { width: 16px; height: 16px; accent-color: var(--c-accent, var(--accent)); }
  .pclose-switch input:disabled + span { color: var(--c-muted); }
  .pclose-acts { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

  @media (max-width: 900px) {
    .pclose { width: 100vw; border-left: 0; }
    .pclose-checks { grid-template-columns: 1fr; }
    .pclose-check + .pclose-check { border-left: 0; border-top: 1px solid var(--c-border); }
    .pclose-docs { grid-template-columns: 1fr; padding: var(--sp-4); }
    .pclose-head, .pclose-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .pclose-foot { flex-direction: column; align-items: stretch; }
    .pclose-acts { justify-content: stretch; }
    .pclose-acts .btn { flex: 1; }
  }
}