/* SparkLab — decorative doodle positioning classes.
 * Replaces the inline style="" that sl_doodle() used to emit. Loaded globally.
 * The base .doodle rule (position:absolute; etc.) lives in styles.css; these
 * classes only add placement/size. Passed as the 2nd arg to sl_doodle().
 * Positions preserved exactly from the prior inline styles. */

/* Inline doodles — sit inside a line of text (e.g. an eyebrow) */
.dd-inline    { position: static; display: inline-flex; width: 16px; height: 16px; }
.dd-inline-18 { position: static; display: inline-flex; width: 18px; height: 18px; }

/* Corner / overlay placements */
.dd-c1  { top: 18px;  right: 22px;  width: 30px; height: 30px; }
.dd-c2  { top: 18px;  right: 22px;  width: 28px; height: 28px; }
.dd-c3  { top: 18px;  right: 24px;  width: 30px; height: 30px; }
.dd-c4  { bottom: 8px; right: -8px; width: 34px; height: 34px; z-index: 3; }
.dd-c5  { top: 22px;  right: 30px;  width: 60px; height: 14px; }
.dd-c6  { top: 20px;  left: 24px;   width: 28px; height: 28px; }
.dd-c7  { top: -8px;  left: -6px;   width: 38px; height: 38px; z-index: 3; }
.dd-c8  { top: 18px;  right: 24px;  width: 28px; height: 28px; }
.dd-c9  { bottom: 20px; right: 28px; width: 30px; height: 30px; }
.dd-c10 { top: -8px;  right: 6px;   width: 44px; height: 44px; z-index: 3; }
.dd-c11 { bottom: 6px; left: -8px;  width: 38px; height: 38px; z-index: 3; }
.dd-c12 { top: 22px;  right: 30px;  width: 48px; height: 48px; }
.dd-c13 { top: -8px;  left: -6px;   width: 34px; height: 34px; z-index: 3; }
.dd-c14 { top: 18px;  right: 22px;  width: 54px; height: 13px; }
.dd-c15 { top: 22px;  right: 30px;  width: 56px; height: 34px; }
.dd-c16 { top: 22px;  right: 30px;  width: 40px; height: 40px; }
.dd-c17 { top: 22px;  right: 30px;  width: 34px; height: 34px; }
.dd-c18 { top: -8px;  left: -6px;   width: 40px; height: 40px; z-index: 3; }
.dd-c19 { bottom: 0;  right: 30px;  width: 32px; height: 32px; }
.dd-c20 { top: 22px;  left: 26px;   width: 64px; height: 16px; }
.dd-c21 { bottom: 26px; left: 40px; width: 30px; height: 30px; }
.dd-c22 { top: -10px; left: -6px;   width: 50px; height: 50px; z-index: 3; }
.dd-c23 { top: 6px;   right: -4px;  width: 58px; height: 36px; z-index: 3; }
.dd-c24 { bottom: 14px; right: -8px; width: 40px; height: 40px; z-index: 3; }
.dd-c25 { top: -4px;  right: 26px;  width: 26px; height: 26px; }
.dd-c26 { top: 18px;  left: 22px;   width: 30px; height: 30px; }
.dd-c27 { bottom: 18px; right: 24px; width: 30px; height: 30px; }
.dd-c28 { top: -8px;  left: -6px;   width: 36px; height: 36px; z-index: 3; }
.dd-c29 { bottom: 8px; right: -8px; width: 40px; height: 40px; z-index: 3; }
.dd-c30 { top: 18px;  left: 24px;   width: 30px; height: 30px; }
.dd-c31 { top: 20px;  left: 24px;   width: 26px; height: 26px; }
.dd-c32 { bottom: 20px; right: 28px; width: 28px; height: 28px; }
.dd-c33 { top: 8px;   right: 14px;  width: 46px; height: 46px; }