/* ZazaG Dev design system components. Use with tokens.css. Every class starts with zz- so it can sit beside a page's own CSS. */

/* Page ground: cream paper with a dot grid */
.zz-page { background: var(--bg); color: var(--text); font-family: var(--display); font-size: var(--fs-body); line-height: var(--fs-bodyLineHeight);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 25%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.zz-h1 { font-weight: var(--fs-headingWeight); font-size: var(--fs-hero); line-height: var(--fs-heroLineHeight); letter-spacing: var(--fs-headingTracking); text-wrap: balance; }
.zz-h2 { font-weight: var(--fs-headingWeight); font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--fs-headingTracking); text-wrap: balance; }
.zz-h3 { font-weight: var(--fs-headingWeight); font-size: var(--fs-h3); letter-spacing: -.01em; }
.zz-label { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }

/* Highlight: a pastel box behind one word of a headline */
.zz-hl { display: inline-block; line-height: 1.04; padding: .02em .14em .08em; border-radius: var(--r-sm); background: var(--yt); }
.zz-hl.alt { background: var(--lx); }

/* Sticker card: ink outline, hard shadow, lifts on hover */
.zz-card { background: var(--card); border: var(--bw-card) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s4);
  transition: transform var(--ease-hover), box-shadow var(--ease-hover); }
.zz-card.lift:hover { transform: translate(-3px, -4px) rotate(-.6deg); box-shadow: var(--shadow-lifted); }
.zz-card.tint-yt { background: var(--yt); } .zz-card.tint-lx { background: var(--lx); } .zz-card.tint-rd { background: var(--rd); }
.zz-card.tint-li { background: var(--li); } .zz-card.tint-x { background: var(--x); }
.zz-card.dashed { border-style: dashed; }

/* Buttons */
.zz-btn { display: inline-flex; align-items: center; gap: 8px; font: 800 16px var(--display); color: var(--on-pop); background: var(--pop); border: var(--bw-card) solid var(--line);
  border-radius: var(--r-pill); padding: 12px 24px; box-shadow: var(--shadow); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.zz-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); }
.zz-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.zz-btn.ghost { background: var(--card); color: var(--text); }
.zz-btn.small { font-size: 13px; padding: 4px 12px; box-shadow: var(--shadow-small); }
.zz-btn:focus-visible, .zz-switch:focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }

/* Chips and status pills */
.zz-chip { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500; border: var(--bw-chip) solid var(--line); border-radius: var(--r-chip); padding: 0 6px; line-height: 18px; color: var(--text); background: var(--card); }
.zz-chip.yt { background: var(--yt); } .zz-chip.lx { background: var(--lx); } .zz-chip.rd { background: var(--rd); } .zz-chip.li { background: var(--li); } .zz-chip.x { background: var(--x); }
.zz-status { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500; border: var(--bw-chip) solid var(--line); border-radius: var(--r-pill); padding: 1px 10px; display: inline-block; color: var(--text); }
.zz-status.active { background: var(--go); color: #062b16; } .zz-status.planned { background: var(--lx); } .zz-status.completed { background: var(--rd); }

/* Day badge: the round, tilted counter */
.zz-badge { width: 150px; height: 150px; border-radius: 50%; background: var(--pop); color: var(--on-pop); border: var(--bw-card) solid var(--line); box-shadow: var(--shadow);
  display: grid; place-content: center; text-align: center; transform: rotate(-8deg); }
.zz-badge b { font-size: 60px; line-height: .9; } .zz-badge span { font-family: var(--mono); font-size: 13px; }

/* Sun and moon switch: the knob slides to the one in use */
.zz-switch { position: relative; width: 62px; height: 32px; padding: 0 7px; border-radius: var(--r-pill); border: var(--bw-card) solid var(--text); background: var(--card);
  display: inline-flex; align-items: center; justify-content: space-between; cursor: pointer; }
.zz-switch svg { width: 15px; height: 15px; position: relative; z-index: 1; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.zz-switch .sun circle { fill: #ffc233; } .zz-switch .moon path { fill: #c9b8ff; }
.zz-switch .knob { position: absolute; top: 3px; left: 3.5px; /* centre on the 15px icon: 7px padding + 7.5px - 11px */ width: 22px; height: 22px; border-radius: 50%; background: var(--rd); border: var(--bw-card) solid var(--line); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
:root[data-theme="dark"] .zz-switch .knob { background: var(--x); transform: translateX(29px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zz-switch .knob { background: var(--x); transform: translateX(29px); } }

/* Today bar */
.zz-today { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: var(--bw-card) solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow); padding: 6px 14px; font-family: var(--mono); font-size: 13px; }
.zz-today .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--go); }
.zz-today b { font-family: var(--display); font-size: 15px; white-space: nowrap; }
.zz-today { white-space: nowrap; max-width: 100%; }
.zz-today .bar { width: 90px; height: 8px; border: var(--bw-chip) solid color-mix(in srgb, var(--text) 55%, transparent); border-radius: var(--r-pill); overflow: hidden; }
.zz-today .bar i { display: block; height: 100%; background: var(--go); }
.zz-today .sum { color: var(--muted); } /* Progress look, the site's Today bar (owner, 2026-10-08) */
@media (max-width: 760px) { .zz-today .bar { width: 60px; } }

/* Platform calendar card: a row per goal, the week's total, 7 day dots */
.zz-pcard { border: var(--bw-card) solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--tint, var(--yt)) 55%, var(--card)); padding: 10px 12px 6px; box-shadow: var(--shadow-small); }
.zz-pcard.personal { background: var(--card); border-style: dashed; }
.zz-pcard .name { font-size: 15px; font-weight: 800; }
.zz-pcard .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; padding: 7px 0; border-top: var(--bw-chip) dashed color-mix(in srgb, var(--line) 25%, transparent); }
.zz-pcard .kind { font-size: 13px; font-weight: 600; } .zz-pcard .kind small { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.zz-pcard .sum { font-family: var(--mono); font-size: 12px; }
.zz-dots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; justify-items: center; }
.zz-dots i { width: 16px; height: 16px; border-radius: 50%; border: var(--bw-chip) solid var(--line); background: var(--card); }
.zz-dots i.on { background: var(--line); }
.zz-dots i.part { background: conic-gradient(var(--line) var(--p, 50%), var(--card) 0); }
.zz-dots i.miss { border-color: var(--pop); }
.zz-dots i.fut { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 50%, transparent); background: transparent; }
:root[data-theme="dark"] .zz-dots i.on { background: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zz-dots i.on { background: var(--text); } }
/* A day is its whole column (day button plus that day's dots). Script places .zz-col over the column
   under the pointer or the keyboard-focused day, and adds .col-on to the card while a day can open. */
.zz-pcard { position: relative; }
.zz-pcard.col-on { cursor: pointer; }
.zz-col { position: absolute; bottom: 4px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: color-mix(in srgb, var(--text) 9%, transparent); border: var(--bw-chip) solid color-mix(in srgb, var(--text) 45%, transparent); }
.zz-pcard.col-on .zz-col { opacity: 1; }

/* Follower count sticker */
.zz-count { border: var(--bw-card) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s3); background: var(--yt); transform: rotate(-1deg); }
.zz-count .n { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; margin: var(--s2) 0 2px; }
.zz-count .d { display: inline-block; margin-top: var(--s2); background: var(--card); border: var(--bw-chip) solid var(--line); border-radius: 8px; padding: 0 6px; font-family: var(--mono); font-size: 12px; }

/* Press-in motion for stickers entering the page; respects nothing being hidden at rest */
.zz-press { transform: translate(-8px, -14px) rotate(calc(var(--ease-tilt) * -1)) scale(1.05); transition: transform var(--ease-press), box-shadow var(--ease-press); }
.zz-press.in { transform: none; }

/* Live sticker cursor (cursor.js): the page draws the arrow; the system cursor hides once a mouse moves */
@media (pointer: fine) {
  html.zz-cursor-on, html.zz-cursor-on * { cursor: none !important; }
  html.zz-cursor-on :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"]) { cursor: text !important; }
}
.zz-cursor { position: fixed; left: 0; top: 0; width: 32px; height: 34px; pointer-events: none; z-index: 2147483647;
  transform-origin: 5px 3px; opacity: 0; transition: opacity .15s; will-change: transform; }
.zz-cursor.on { opacity: 1; }

/* Orange glow that remembers (dots.js, class zz-glow): a canvas behind the page that lights the background dots */
.zz-glow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }