/* round 7 module (custreport), built by B3: existing variables only (var(--ink) … var(--on-accent,#fff)), no hex colours.
   R11 (A5): Customer P/N column, nothing clipped (stage, PO and notes wrap), US Letter print (named pages below), one letter per customer
   on "Print all customers", each on its own page. */
.cr-view{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.cr-pages{min-width:0;display:grid;gap:16px}
.cr-page{background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--sh);padding:26px 22px 20px;max-width:1040px;color:var(--ink);min-width:0;overflow-x:auto}
.cr-allbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--paper2);font-size:var(--fs-13,13px);max-width:1040px}
.cr-sp{flex:1}
.cr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.cr-brand{display:flex;align-items:center;gap:12px} .cr-brand b{font-size:var(--fs-19,19px)}
.cr-logo{display:block;width:58px;height:auto;padding:4px 5px;border-radius:6px;background:var(--on-accent,#fff)}   /* a white plate so the navy logo reads in dark mode too */
.cr-to{text-align:right} .cr-eyebrow{font-size:var(--fs-11,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cr-acct{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.25} .cr-asof{font-size:var(--fs-12,12px);font-variant-numeric:tabular-nums;color:var(--ink2);margin-top:2px}
.cr-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-13,13px)}
.cr-sum b{font-size:18px;font-weight:800;margin-right:2px} .cr-sum .ok b{color:var(--green-t,var(--green))} .cr-sum .risk b{color:var(--amber-t,var(--amber))} .cr-sum .late b{color:var(--ink)}
.cr-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-13,13px);margin-top:4px;table-layout:fixed;min-width:720px}   /* R11: fixed columns (as on paper) so Notes keeps its share */
.cr-tbl th{text-align:left;font-size:var(--fs-11,11px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);padding:9px 5px;border-bottom:1px solid var(--rule);background:none;position:static;vertical-align:bottom;line-height:1.3;white-space:normal}
.cr-th2{display:block;font-weight:600;letter-spacing:.03em;text-transform:none;color:var(--ink3)}
.cr-tbl td{padding:9px 5px;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere} .cr-tbl .n{text-align:right} .cr-tbl .cr-num{font-variant-numeric:tabular-nums} .cr-tbl td.n{white-space:nowrap} .cr-others .cr-num{font-variant-numeric:tabular-nums}
.cr-pn{font-family:var(--mono);font-size:var(--fs-12,12px);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cr-wo{font-weight:700;overflow-wrap:anywhere} .cr-po{font-size:var(--fs-11,11px);font-weight:500;color:var(--ink2);overflow-wrap:anywhere}
.cr-stage{display:inline-block;vertical-align:middle;font-size:var(--fs-11,11px);font-weight:700;padding:2px 7px;border-radius:4px;line-height:1.35;white-space:normal;background:var(--grey-l);color:var(--ink)} .cr-stage.plain{background:var(--grey-l);color:var(--ink2)}
.cr-pct .cr-num{white-space:nowrap} .cr-bar{display:block;width:100%;max-width:44px;margin-bottom:3px;height:6px;border-radius:3px;background:var(--grey-l);overflow:hidden}   /* bar above the %, so the narrow column never clips */
.cr-bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.cr-st{display:inline-block;font-size:var(--fs-11,11px);font-weight:700;padding:3px 8px;border-radius:5px;line-height:1.3;white-space:normal}
.cr-st.ok{background:var(--green);color:var(--green-ink,var(--on-accent,#fff))} .cr-st.risk{background:var(--amber);color:var(--amber-ink,var(--ink))}
.cr-st.late{background:var(--blue-l);color:var(--ink);font-variant-numeric:tabular-nums} .cr-st.none{background:var(--grey-l);color:var(--ink2)}   /* R11: a new ship date is news, not an alarm */
.cr-note{line-height:1.4} .cr-note .cr-np{display:none}
.cr-tbl col.cw-pn{width:15%} .cr-tbl col.cw-wo{width:13%} .cr-tbl col.cw-q{width:5%} .cr-tbl col.cw-stage{width:11%} .cr-tbl col.cw-pct{width:6%} .cr-tbl col.cw-d{width:10%} .cr-tbl col.cw-st{width:12%} .cr-tbl col.cw-note{width:auto}   /* notes take the rest (about 18%) */
.cr-edit{width:100%;font:inherit;font-size:var(--fs-12,12px);padding:4px 6px;border:1px dashed var(--rule);border-radius:6px;background:var(--field);color:var(--ink);resize:vertical}
.cr-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:var(--fs-11,11px);color:var(--ink2)}
.cr-rail .card{margin:0 0 12px} .cr-box{padding:14px 16px}
.cr-lbl{font-size:var(--fs-11,11px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.cr-sel{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--rule);border-radius:7px;background:var(--field);color:var(--ink);margin-bottom:8px}
.cr-opt{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:var(--fs-13,13px);cursor:pointer} .cr-opt.dim{opacity:.5}
.cr-view input.cr-sw{appearance:none;-webkit-appearance:none;width:36px;height:20px;padding:0;margin:0;vertical-align:middle;border-radius:20px;background:var(--grey-l);border:1px solid var(--rule);position:relative;cursor:pointer;flex:none;transition:background .15s}
.cr-view input.cr-sw:before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:var(--sh);transition:left .15s}
.cr-view input.cr-sw:checked{background:var(--green);border-color:var(--green)} .cr-view input.cr-sw:checked:before{left:18px} .cr-view input.cr-sw:disabled{cursor:default}
.cr-hint{margin:8px 0 10px;line-height:1.45}
.cr-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .cr-xl{width:100%;margin-top:8px}
.cr-others a{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule2);color:var(--ink);text-decoration:none;font-size:var(--fs-13,13px)}
.cr-others a:hover{color:var(--indigo)} .cr-others a span:last-child{white-space:nowrap} .cr-others .late{color:var(--red-t,var(--red))}
.cr-mhead{margin:8px 0} .cr-mbody{width:100%;font:12px/1.5 var(--mono);padding:8px;border:1px solid var(--rule);border-radius:8px;background:var(--paper2);color:var(--ink);resize:vertical}
@media (max-width:1100px){.cr-view{grid-template-columns:1fr}
  /* tablet: the letter first, then the customer picker / print buttons side by side with the other customers (scrolls) */
  .cr-rail{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .cr-rail .card{margin:0}   /* R10: the rail goes below the report (contract: side panels go below the main content) */
  .cr-rail .cr-others{max-height:260px;overflow-y:auto}
  .cr-page{padding:20px 18px 16px}}
@media (max-width:700px){.cr-rail{grid-template-columns:1fr} .cr-page{padding:16px 12px} .cr-head{flex-direction:column} .cr-to{text-align:left} }

/* R11 print: US Letter 8.5 × 11, portrait (0.5 in margins = 7.5 in of table), or landscape with the "Print landscape" option.
   Named pages keep this page size off every other page's print. The table header repeats on each sheet; rows never split;
   every cell wraps (no ellipsis, no fixed max-widths); each customer letter starts on a new sheet. Paper is always white ink-on-paper. */
@page crletter{size:letter portrait;margin:.5in .5in .55in}
@page crletterL{size:letter landscape;margin:.45in .5in .5in}
@media print{
  .cr-view{display:block}
  .cr-pages{display:block}
  .cr-page{page:crletter;border:0;border-radius:0;box-shadow:none;padding:0;max-width:none;overflow:visible;
    --paper:#fff;--paper2:#fff;--ink:#14141a;--ink2:#4a4a55;--ink3:#6a6a78;--rule:#cfcfd8;--grey-l:#ececf1;--blue-l:#e3ecfb;background:#fff;color:var(--ink)}   /* paper is white even when the app is in dark mode */
  .cr-land .cr-page{page:crletterL}
  .cr-page+.cr-page{break-before:page;page-break-before:always}
  .cr-head{break-inside:avoid;break-after:avoid} .cr-sum{break-after:avoid;font-size:11px;padding:8px 0} .cr-sum b{font-size:15px}
  .cr-brand b{font-size:15px} .cr-acct{font-size:19px} .cr-logo{width:52px;padding:0}
  .cr-tbl{table-layout:fixed;font-size:11px;min-width:0}
  .cr-tbl thead{display:table-header-group} .cr-tbl tfoot{display:table-footer-group}
  .cr-tbl th{font-size:11px;letter-spacing:.03em;padding:6px 4px;border-bottom:1.5px solid var(--ink)}
  .cr-tbl td{padding:5px 4px;line-height:1.3}
  .cr-tbl tr{break-inside:avoid;page-break-inside:avoid}
  .cr-tbl .cr-num{white-space:normal}
  .cr-pn{font-size:11px;overflow-wrap:break-word;word-break:normal}   /* a P/N breaks only where it must, not at every dash */
  .cr-pct{white-space:normal} .cr-bar{display:none}   /* the % alone on paper: the bar costs width */
  .cr-stage,.cr-st{font-size:11px;padding:2px 5px}
  .cr-page .cr-stage,.cr-page .cr-st{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cr-note .cr-np{display:inline}
  .cr-foot{break-inside:avoid;break-before:avoid;page-break-before:avoid;margin-top:8px}
  .cr-land .cr-tbl col.cw-note{width:24%}
}

/* R10 (G4) */
.cr-howto{margin:0 0 10px} .cr-howto>div{line-height:1.45;padding:4px 0;color:var(--ink2)}