/* Isolated export view: ordinary browser printing continues to use the guide. */
.colour-card-print {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: auto;
  padding: 32px max(24px, calc((100vw - 920px) / 2));
  background: #f7f5ef;
  color: #24332c;
  font: 16px/1.45 system-ui, sans-serif;
}
.colour-card-print h1 { font-size: 36px; margin: 24px 0 4px; }
.colour-card-print h2 { font-size: 20px; margin: 22px 0 12px; }
.colour-card-print .colour-card-subtitle { margin: 0 0 20px; }
.colour-card-print-controls { border-bottom: 1px solid #bcc4bc; padding-bottom: 20px; }
.colour-card-print-controls button { padding: 10px 16px; margin: 4px 8px 4px 0; border: 1px solid #24332c; border-radius: 4px; background: #fff; color: #24332c; cursor: pointer; }
.colour-card-print-controls button:focus-visible { outline: 3px solid #226c5c; outline-offset: 3px; }
.colour-card-swatches { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.colour-card-swatches li { display: flex; flex-direction: column; gap: 4px; min-width: 0; break-inside: avoid; }
.colour-card-swatch { display: block; height: 64px; border: 1px solid #b5bdb5; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.colour-card-swatches strong { font-size: 14px; overflow-wrap: anywhere; }
.colour-card-swatches code, .colour-card-swatches small { font-size: 12px; }
.colour-card-notes { margin-bottom: 32px; }
.colour-card-notes p { font-size: 14px; }
@media (max-width: 480px) { .colour-card-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  body.printing-colour-card > :not(.colour-card-print) { display: none !important; }
  body.printing-colour-card { background: white !important; margin: 0 !important; }
  body.printing-colour-card > .colour-card-print { display: block !important; position: static; inset: auto; overflow: visible; padding: 0; background: white; color: #18291f; font-size: 10pt; }
  .colour-card-print .colour-card-print-controls { display: none !important; }
  .colour-card-print h1 { font-size: 24pt; margin-top: 0; }
  .colour-card-print h2 { font-size: 13pt; margin-top: 14px; break-after: avoid; }
  .colour-card-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .colour-card-swatch { height: 40px; }
  .colour-card-swatches strong { font-size: 9pt; }
  .colour-card-swatches code, .colour-card-swatches small { font-size: 8pt; }
  .colour-card-notes p { font-size: 9pt; }
}