/* =====================================================================
   Zomra activity board layout, on the teaching design system.

   The weekly activity-board.html files all share one vocabulary of
   elements (header, how-to strip, cards, drop zones, a 2x2 matrix, 1-5
   and 1-10 scales, a closing strip). This file styles that vocabulary in the
   light design system, so every board is on brand from one stylesheet.

   A board links three sheets, in order:
     tokens.css   (the design system variables and base)
     board.css    (this file, the board layout)
   plus the Google Fonts for Source Serif 4, Inter, JetBrains Mono.

   Light-first, like the rest of the system: parchment field, white
   cards, soft tinted zones, accents do the work. No dark fills.
   Boards are a fixed 1600px wide so they render to a clean wide PNG.
   Spacing is deliberately roomy, this is a workshop board people read
   from across a call, so elements get air to breathe.
   ===================================================================== */

html, body { margin: 0; padding: 0; background: var(--c-parchment); }

.board {
  width: 1600px; box-sizing: border-box;
  padding: 64px 68px 56px;
  background: var(--c-parchment);
  color: var(--c-ink);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.eyebrow {
  color: var(--c-teal-deep); font-size: 15px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.title {
  font-family: var(--font-voice); font-weight: 600;
  font-size: 48px; letter-spacing: -0.01em; line-height: 1.1;
  margin: 14px 0 0; color: var(--c-crimson);
}

/* ---- How-to strip: a light "tip" callout with numbered steps ---- */
.howto {
  margin-top: 32px; margin-bottom: 4px; background: var(--c-blue-soft); color: var(--c-ink);
  border-left: 6px solid var(--c-blue); border-radius: var(--radius);
  padding: 20px 26px; font-size: 17px; line-height: 1.5;
}
.howto-label {
  display: inline-block; color: var(--c-blue); font-weight: 700;
  letter-spacing: 0.06em; font-size: 13px; text-transform: uppercase; margin-right: 14px;
}
.step { display: inline-block; margin-left: 18px; white-space: nowrap; }
.step b {
  display: inline-block; width: 24px; height: 24px; line-height: 24px;
  text-align: center; background: var(--c-teal); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 700; margin-right: 8px;
}

/* ---- Grid (floats, to match the original board markup) ----
   Wider gutters than the original for more air between zones. */
.clear:after { content: ""; display: block; clear: both; }
.row { margin-top: 36px; }
.board > .card { margin-top: 36px; }
.card .row { margin-top: 24px; }
.col { float: left; box-sizing: border-box; }
.c2 { float: left; box-sizing: border-box; width: 47%; }
.c3 { float: left; box-sizing: border-box; width: 31%; }
.c4 { float: left; box-sizing: border-box; width: 22.75%; }
.m2 { margin-left: 6%; }
.m3 { margin-left: 3.5%; }
.m4 { margin-left: 3%; }

/* ---- Card ---- */
.card {
  background: var(--c-white); border-radius: var(--radius);
  border: 1px solid var(--c-line-warm); border-top: 4px solid var(--c-crimson);
  box-shadow: var(--shadow-sm);
  padding: 28px 30px 32px; box-sizing: border-box;
}
.card-h { font-family: var(--font-system); font-size: 23px; font-weight: 600; color: var(--c-ink); margin: 2px 0 6px; }
.card-sub { font-size: 15px; color: var(--c-ink-soft); line-height: 1.45; margin-bottom: 8px; }
.cap { font-size: 13px; color: var(--c-silver); margin: 14px 0 2px; letter-spacing: 0.02em; }

/* ---- 2x2 matrix ---- */
.quad { width: 100%; border-collapse: separate; border-spacing: 16px; margin-top: 4px; }
.qcell {
  width: 50%; height: 128px; background: var(--c-parchment);
  border: 1px dashed var(--c-line); border-radius: var(--radius-sm);
  vertical-align: top; padding: 16px;
}
.qtag {
  display: inline-block; background: var(--c-teal); color: #fff;
  font-size: 14px; font-weight: 600; padding: 5px 13px; border-radius: var(--radius-pill);
}
.qsub { display: block; margin-top: 10px; font-size: 12px; color: var(--c-ink-soft); }

/* ---- 1 to 5 and 1 to 10 scales ---- */
.scale { margin-bottom: 22px; }
.scale:last-child { margin-bottom: 0; }
.scale-name { font-size: 16px; font-weight: 600; color: var(--c-ink); margin-bottom: 12px; }
.track { width: 100%; border-collapse: collapse; }
.track td { width: 20%; text-align: center; }
.track.t10 td { width: 10%; }
.node {
  display: inline-block; width: 40px; height: 40px; line-height: 36px;
  text-align: center; border: 2px solid var(--c-teal); border-radius: 50%;
  color: var(--c-teal-deep); font-size: 16px; font-weight: 700; background: var(--c-teal-soft);
}

/* ---- Drop zones, four soft tints ---- */
.dz { border-radius: var(--radius); padding: 20px 22px; min-height: 176px; box-sizing: border-box; border: 2px dashed; }
.dz-h { font-size: 20px; font-weight: 600; }
.dz-sub { font-size: 13px; color: var(--c-ink-soft); margin-top: 4px; line-height: 1.45; }
.dz-hint { margin-top: 46px; text-align: center; font-size: 12px; color: var(--c-silver); letter-spacing: 0.1em; text-transform: uppercase; }

.dz + .dz { margin-top: 18px; }

.dz.t { background: var(--c-teal-soft);    border-color: var(--c-teal); }    .dz.t .dz-h { color: var(--c-teal-deep); }
.dz.c { background: var(--c-crimson-soft); border-color: var(--c-crimson); } .dz.c .dz-h { color: var(--c-crimson-deep); }
.dz.n { background: var(--c-blue-soft);    border-color: var(--c-blue); }    .dz.n .dz-h { color: var(--c-blue); }
.dz.s { background: var(--c-gold-soft);    border-color: var(--c-gold); }    .dz.s .dz-h { color: var(--c-gold-text); }

/* ---- Closing strip: a "reflect" callout in crimson ---- */
.strip {
  margin-top: 36px; background: var(--c-crimson-soft);
  border: 1px solid #EAC9C6; border-left: 6px solid var(--c-crimson);
  border-radius: var(--radius); padding: 20px 26px; font-size: 16px;
  line-height: 1.5; color: var(--c-ink);
}
.strip-tag {
  display: inline-block; color: var(--c-crimson-deep); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; margin-right: 12px;
}
.strip b { color: var(--c-crimson-deep); }

/* ---- Footer ---- */
.foot { margin-top: 32px; text-align: center; font-size: 13px; color: var(--c-silver); letter-spacing: 0.12em; text-transform: uppercase; }