/* Chatsward marks — animation + layout rules for the shared brand icons (see shared/marks.js,
   the other half of the single runtime source, for the drawings, variants and wiring).
   Pages size the .cw-mark box with their own CSS; colour rides on currentColor. */

.cw-mark { display: inline-block; width: 24px; height: 24px; color: currentColor; flex: none; line-height: 0; }
.cw-mark svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.cw-mark--fill { width: 100%; height: 100%; }   /* for marks that fill a sized container */
/* Optical centring in buttons: the page glyph is 70 units wide in its 120 box (25 dead units each
   side — the fold's + needs the full box, so the viewBox must never be cropped). Pull the dead
   space back with margins of box-width x 25/120 so padding and gap measure from the drawn glyph. */
.cw-mark--btn24 { width: 24px; height: 24px; margin: 0 -5px; }

/* dc-anim / dc-anim2 (the DeepCheck check cycle) are SMIL, drawn and wired in marks.js like
   pg-anim; they need no rules here. */

/* ---------- pg-btn: the button variant of the page mark ----------
   Static page; while an ancestor carrying .cw-fold-trigger (usually the button itself) is
   hovered, the corners fold into the brand + and the chat lines fade. CSS d: transition —
   Chromium/Firefox animate it; Safari simply shows the static page, which is acceptable. */
.cwm-pgtxt { opacity: 1; transition: opacity .45s ease; }
.cwm-pgtl, .cwm-pgbr { transition: d .55s cubic-bezier(.55,0,.2,1); }
.cw-fold-trigger:hover .cwm-pgtl { d: path('M18 60 H60 V18'); }
.cw-fold-trigger:hover .cwm-pgbr { d: path('M102 60 H60 V102'); }
.cw-fold-trigger:hover .cwm-pgtxt { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cwm-pgtxt, .cwm-pgtl, .cwm-pgbr { transition: none; }
  .cw-fold-trigger:hover .cwm-pgtl { d: path('M72 18 H30 V60'); }
  .cw-fold-trigger:hover .cwm-pgbr { d: path('M48 102 H90 V60'); }
  .cw-fold-trigger:hover .cwm-pgtxt { opacity: 1; }
}