/* yard-prints.css — the yard's grid of activity cards (home 17g,
   2026-09-22). Pair with /shared/yard-prints.js and
   /shared/yard-pictograms.js. Totem materials: a paper mat holding a
   gesso window with a pictogram built from blocks, the name and the
   need's colour square under it. Shared by the home page's yard and the
   teacher's own shelf. Hover is the only motion in the yard; nothing
   moves at rest. */

.yard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 26px;
  align-items: start;
}

.yard-empty {
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--t-muted);
}

.yard-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--t-ink);
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--t-quick) var(--t-ease);
}

.yard-card:hover,
.yard-card.on,
.yard-card:focus-visible { transform: rotate(var(--rot, 0deg)) translateY(-5px); }

.yard-card:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 4px; }

/* The paper mat */
.yard-print {
  background: var(--t-paper);
  padding: 9px 9px 11px;
  box-shadow: 0 4px 6px rgba(50,35,15,0.24);
}

/* A teacher's own copy (18d, 2026-09-24): the mat is Sanded with grain,
   the same two gradients as the search plank, the "yours" marker
   wherever a copy sits beside built-ins */
.yard-print-own {
  background: var(--t-sanded);
  background-image: var(--t-grain);
}

/* The gesso window: the pictogram centred, the prompt hidden at the bottom */
.yard-window {
  background: var(--t-gesso);
  height: 156px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yard-pict {
  transition: transform 180ms var(--t-ease);
  transform-origin: 50% 0;
}

/* The lift is measured per card on its first hover (yard-prints.js
   fitLift): 14px unless the prompt would land on the picture, and a
   shrink from the top edge when the window is too short for both */
.yard-card.on .yard-pict,
.yard-card:focus-visible .yard-pict { transform: translateY(var(--lift, -14px)) scale(var(--shrink, 1)); }

/* A content card's window: the picture anchored at the top with room
   for a two-line hover line under it, and it never slides */
.yard-window-content {
  align-items: flex-start;
  padding-top: 11px;
  box-sizing: border-box;
}
.yard-card.on .yard-window-content .yard-pict,
.yard-card:focus-visible .yard-window-content .yard-pict { transform: none; }

.yard-prompt-box {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  text-align: center;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: var(--t-ink);
  pointer-events: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.yard-prompt {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms var(--t-ease), transform 180ms var(--t-ease);
}

.yard-card.on .yard-prompt,
.yard-card:focus-visible .yard-prompt { opacity: 1; transform: translateY(0); }

/* The time mark: a paper tag on the first card of each duration step */
.yard-mark {
  position: absolute;
  top: -12px;
  left: -10px;
  z-index: 1;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px 6px;
  background: var(--t-paper);
  color: var(--t-ink);
  box-shadow: 0 3px 4px rgba(50,35,15,0.22);
  transform: rotate(-2deg);
  white-space: nowrap;
}

/* Own copies: a kicker in spaced caps (the template's name, or MADE
   WITH AI) over the copy's own name */
.yard-name-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 11px;
  min-width: 0;
}
.yard-name-block .yard-name-row { margin-top: 0; }
.yard-kicker {
  font-family: var(--t-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Under the mat: the name and the need's square on one baseline */
.yard-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 11px;
  padding: 0 3px;
  min-width: 0;
}

.yard-name {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  /* Two lines before an ellipsis: "Both Sides of the R..." hid the
     name's point (a reviewer, 2026-09-28) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  min-width: 0;
}

.yard-need {
  width: 10px;
  height: 10px;
  flex: none;
  transform: translateY(-1px);
  background-image: none;
}

/* ── The pictograms: blocks only (shared/yard-pictograms.js) ── */
.pg-b {
  display: block;
  flex: none;
  transform: rotate(var(--rot, 0deg));
  clip-path: polygon(2% 8%, 98% 0, 100% 90%, 0 100%);
}

.pg-b.pg-flat { clip-path: none; }

.pg-shadow { box-shadow: 0 2px 3px rgba(50,35,15,0.22); }

/* Paints carry no grain in a pictogram; woods keep theirs */
.pg-b.t-yellow { background-image: none; }

.pg-stack,
.pg-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pg-stack > * + * { margin-top: -1px; }

.pg-row {
  display: flex;
  align-items: center;
}

.pg-plinth,
.pg-base {
  height: 6px;
  flex: none;
}

.pg-plinth { background: var(--t-walnut); }
.pg-base { background: var(--t-base); }

.pg-b.pg-letter {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--t-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-b.pg-check {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 10px;
  color: var(--t-ink);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}

.pg-check.pg-done { opacity: 0.55; }

.pg-arrow {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--t-muted-caps);
  padding-bottom: 10px;
  align-self: flex-end;
}

.pg-timer {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  color: var(--t-ink);
  background: var(--t-yellow);
  padding: 3px 14px 5px;
  min-width: 78px;
  text-align: center;
  transform: rotate(-1.5deg);
}

.pg-tag {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-ink);
  background: var(--t-yellow);
  background-image: none;
  padding: 3px 9px 4px;
  display: inline-block;
  transform: rotate(-1.5deg);
  clip-path: polygon(2% 8%, 98% 0, 100% 90%, 0 100%);
}

/* Vocab Match's joining line sits over the two columns: from the first
   term's right edge down to the second meaning */
.pg-join {
  position: absolute;
  left: 38px;
  top: 8px;
}
.pg-join.pg-join-words { left: 64px; top: 9px; }
.pg-join-words .pg-b { white-space: nowrap; }

/* A name over a slip, the fold picture's way of saying whose it is */
.pg-named {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.pg-name {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
  line-height: 1;
  padding-left: 3px;
  min-height: 9px;
}
.pg-plus {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  color: var(--t-muted-caps);
  padding-bottom: 5px;
}

/* Someone's Got You: the reply set in under the note */
.pg-reply {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding-left: 12px;
}
.pg-reply-mark {
  font-size: 14px;
  line-height: 1;
  color: var(--t-muted-caps);
  padding-top: 12px;
}

/* Snowball: the pair's own "We agree" stamped on the plank's corner */
.pg-stamped { position: relative; }
.pg-stamp {
  position: absolute;
  right: -8px;
  top: -17px;
}
.pg-stamp .pg-tag { transform: rotate(4deg); }

/* The arrival: the block that appears on hover */
.pg-arrive {
  display: block;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 180ms var(--t-ease), transform 180ms var(--t-ease);
}

span.pg-arrive { display: inline-block; }

.yard-card.on .pg-arrive,
.yard-card:focus-visible .pg-arrive { opacity: 1; transform: translateY(0); }

/* ── Real content on six cards (2026-09-24): slips of the activity's own
   text, student-style doodles, labelled bars. Reading text is the body
   face, small; nothing here is a caption of ours. ── */
.pg-slip {
  font-family: var(--t-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.25;
  color: var(--t-ink);
  padding: 5px 8px 6px;
  text-align: center;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.pg-slip.t-paper { background-image: none; }
/* Reading text on the darker paints is paper, as the Totem buttons are */
.pg-slip.t-magenta, .pg-slip.t-cyan, .pg-slip.t-green { color: var(--t-paper); }
.pg-slip-small { font-size: 10px; padding: 4px 6px 5px; }

/* Your words on the block (18d): the copy's topic in the need paint,
   in place of the pictogram's painted block, under it, or in the
   window's corner on a content card */
.pg-b.pg-word {
  width: auto !important;
  height: auto !important;
  display: inline-block;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 4px 8px 5px;
  color: var(--t-ink);
  white-space: nowrap;
  background-image: none;
}
.pg-topic-corner {
  position: absolute;
  right: 8px;
  bottom: 8px;
  transition: opacity 180ms var(--t-ease);
}
/* On hover the words fill the picture and the prompt takes the bottom, so the corner tag steps aside */
.yard-card.on .pg-topic-corner,
.yard-card:focus-visible .pg-topic-corner { opacity: 0; }
.pg-b.pg-initial {
  font-size: 14px;
}

/* A blank plank at rest whose words roll out on hover (owner
   2026-09-24: "block is empty, on hover it fills"): the text keeps its
   place, clipped away from the right */
.pg-fill {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 360ms var(--t-ease) 60ms;
}
.yard-card.on .pg-fill,
.yard-card:focus-visible .pg-fill { clip-path: inset(0 0 0 0); }

.pg-caps {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
  line-height: 1;
}

/* Live Poll: a label, a bar, a count on each line */
.pg-label {
  font-family: var(--t-body);
  font-weight: 600;
  font-size: 10px;
  color: var(--t-ink);
  width: 54px;
  text-align: right;
  flex: none;
  white-space: nowrap;
}
.pg-count {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 10px;
  color: var(--t-muted-caps);
  padding-left: 2px;
}

/* Draw Gallery: a two-by-two wall of drawings on paper squares */
.pg-wall {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 7px;
}
.pg-drawing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
}
.pg-drawing.t-paper { background-image: none; }
.pg-doodle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--t-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Snowball: two answers funnel into one */
.pg-funnel {
  display: flex;
  justify-content: center;
  gap: 22px;
  height: 20px;
  align-items: center;
}
.pg-funnel .pg-b { transform-origin: center; }
.pg-tag.t-paper { background: var(--t-paper); background-image: none; }

/* Closer: a person plank, head over body */
.pg-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ── The AI door's card: a dashed slot holding a sanded plank and BUILD IT ── */
.yard-slot {
  background: none;
  border: 3px dashed rgba(110,75,40,0.35);
  flex-direction: column;
  gap: 10px;
}

.yp-slot {
  width: 130px;
  height: 34px;
  background: var(--t-sanded);
  background-image: var(--t-grain);
  border-bottom: 3px dashed rgba(110,75,40,0.45);
}

.yp-chip {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-ink);
  background: var(--t-yellow);
  padding: 6px 12px 7px;
  transform: rotate(-1deg);
}

@media (max-width: 960px) {
  .yard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .yard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .yard-name { font-size: 16px; }
  /* A window about 160px wide: the widest pictogram (Snowball's three
     piles) fits once scaled */
  .yard-pict { zoom: 0.8; }
}

/* Motion reduced: nothing slides, the arrivals simply appear on hover */
@media (prefers-reduced-motion: reduce) {
  .yard-card, .yard-pict, .yard-prompt, .pg-arrive, .pg-fill { transition: none; }
}