/* ============================================================
   COMPIC — Communication Picture placeholders
   Easy Read pictograms (Compic / Boardmaker / Picture
   Communication Symbols style).

   Each .compic is a square slot a final pictogram will be
   dropped into. The ONE word inside it says what the picture
   should COMMUNICATE — not what it depicts.
     e.g. Planning · Feelings · Listening · Together
   ============================================================ */

.compic {
  --compic-size: 32mm;
  --compic-color: var(--das-purple, #7C295A);
  --compic-tint:  var(--das-purple-tint, #F2EAEE);

  width: var(--compic-size);
  height: var(--compic-size);
  flex: 0 0 var(--compic-size);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 4px 6px 6px;
  background: var(--compic-tint);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(124,41,90,0.06) 0 6px,
      transparent 6px 14px);
  border: 2.5px dashed var(--compic-color);
  border-radius: 4px;
  position: relative;
  overflow: hidden;

  page-break-inside: avoid;
  break-inside: avoid;
  vertical-align: middle;
}

.compic::before {
  content: "COMPIC";
  position: absolute;
  top: 3px; left: 0; right: 0;
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 6.5pt;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: var(--compic-color);
  opacity: 0.5;
  line-height: 1;
}

.compic > span {
  font-family: 'Maven Pro', system-ui, sans-serif;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.05;
  color: var(--compic-color);
  letter-spacing: -0.005em;
  text-wrap: balance;
  padding-top: 10px;
  word-break: break-word;
  hyphens: auto;
}

/* ---------- Color variants ---------- */
.compic.red    { --compic-color: var(--das-red);    --compic-tint: var(--das-red-tint); }
.compic.red {
  background-image:
    repeating-linear-gradient(135deg,
      rgba(172,36,42,0.07) 0 6px,
      transparent 6px 14px);
}
.compic.purple { --compic-color: var(--das-purple); --compic-tint: var(--das-purple-tint); }
.compic.orange { --compic-color: var(--das-orange); --compic-tint: var(--das-orange-tint); }
.compic.orange > span,
.compic.orange::before { color: #6B3A0E; }
.compic.orange {
  background-image:
    repeating-linear-gradient(135deg,
      rgba(243,112,33,0.10) 0 6px,
      transparent 6px 14px);
}
.compic.dark {
  --compic-color: #fff;
  --compic-tint: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.85);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.10) 0 6px,
      transparent 6px 14px);
}
.compic.dark > span,
.compic.dark::before { color: #fff; }

/* ---------- Sizes ---------- */
.compic.xs { --compic-size: 20mm; padding: 2px 4px 4px; }
.compic.xs::before { font-size: 5.5pt; top: 2px; letter-spacing: 0.18em; }
.compic.xs > span { font-size: 9pt; padding-top: 7px; }

.compic.sm { --compic-size: 26mm; }
.compic.sm > span { font-size: 11pt; padding-top: 8px; }

.compic.lg { --compic-size: 44mm; }
.compic.lg > span { font-size: 19pt; padding-top: 12px; }

.compic.xl { --compic-size: 60mm; }
.compic.xl > span { font-size: 26pt; padding-top: 14px; }
.compic.xl::before { font-size: 8pt; top: 6px; }

/* ---------- Strip — common row-of-3 pattern ---------- */
.compic-strip {
  display: flex;
  gap: 10px;
  margin: 4px 0 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.compic-strip.tight { gap: 6px; }
.compic-strip.center { justify-content: center; }

/* Float helpers (used inside steps/callouts) */
.compic.float-r { float: right; margin: 0 0 6px 14px; }
.compic.float-l { float: left;  margin: 0 14px 6px 0; }

/* Print: dashed borders + tinted bg should reproduce */
@media print {
  .compic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}