/* Learn at home, train on playa (components/learn.js).
 *
 * The two blocks Welcome ends with. Each looks like what it is: documents are
 * wide rows you tap, videos are small tiles with a play mark, the calendar is a
 * timetable with the next session as its hero. It used to be eleven identically
 * styled cards followed by eight more, which is exactly why it read as a wall
 * of text — the eye had nothing to navigate by.
 *
 * The screen shell this file used to carry — the page header, the plan rail,
 * the numbered step headings, the flow column, the notes list and the contact
 * card — went with the Train screen on 2026-08-06. Welcome owns all six now,
 * once, for every block on the page.
 *
 * Tokens end to end: the containers are the shared `card()` (`.ui-card`), the
 * kickers are `sectionHead()` (`.ui-head`), and every spacing, size and radius
 * below is a token — `scripts/check-ui.js` holds the raw-px count at zero. */

/* --- learn at home --------------------------------------------------------- */

.learn-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--soon-bg);
  border-left: var(--border-accent) solid var(--soon);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--ink);
}

/* On the camp box the materials are simply not there. That is a fact to state,
 * not an alarm to raise — the alarm colour stays reserved for a real gap. */
.learn-callout--dead {
  background: var(--card);
  border-left-color: var(--soft);
}

.learn-callout-mark { flex: none; font-size: var(--size-body); line-height: 1.3; }

.learn-group { margin-bottom: var(--space-5); }

/* The Love Kitchen block is homework for a handful of people. It rides the
 * shared card (`card()` in components/ui.js); only the fill is overridden to
 * the recessed surface, so it sits back from the two everybody has to do. */
.learn-group--aside { background: var(--card); }

.learn-group-title {
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-1);
}

.learn-group-lead {
  font-size: var(--size-small);
  color: var(--soft);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
  max-width: 46em;
}

.learn-group-foot {
  font-size: var(--size-small);
  color: var(--soft);
  margin: var(--space-3) 0 0;
}

/* --- documents: wide rows you tap ------------------------------------------ */

.learn-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* One child since the read-tick came off, and still a flex row: it is what makes
 * `.learn-doc-open` stretch the full width instead of shrinking to its text. */
.learn-doc { display: flex; }

.learn-doc-open {
  flex: 1 1 260px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
  text-decoration: none;
}

.learn-doc-open:hover { border-color: var(--t-tea); }

.learn-doc-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--t-tea-t);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-body);
}


.learn-doc-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.learn-doc-name { font-size: var(--size-body); font-weight: var(--weight-semibold); }

.learn-doc-desc {
  font-size: var(--size-small);
  color: var(--soft);
  line-height: 1.45;
}

.learn-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--size-micro);
  color: var(--soft);
}

.learn-doc-est { font-variant-numeric: tabular-nums; }
.learn-dot { color: var(--line); }

/* Every outbound link says where it goes and that it leaves the app; a copy
 * served off this box says so instead. Two different words, two weights.
 *
 * The third state — "not on the camp box", drawn when a deployment refused to
 * show external links at all — went on 2026-08-06 with the refusal itself. */
.learn-ext { font-weight: var(--weight-semibold); color: var(--t-tea-deep); }
.learn-ext--local { font-weight: var(--weight-semibold); color: var(--live); }

/* --- videos: small tiles with a play mark ---------------------------------- */

.learn-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-2);
}

.learn-tiles > li { display: flex; }

.learn-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

.learn-tile:hover { border-color: var(--t-tea); }


/* No thumbnails to fetch, so the poster is drawn: a tinted band, a play mark
 * and the clip's number, which is enough to read as "video" at a glance. */
.learn-tile-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: var(--t-tea-t);
}


.learn-tile-play { font-size: var(--size-h3); color: var(--t-tea-deep); }

.learn-tile-index {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  color: var(--t-tea-deep);
  font-variant-numeric: tabular-nums;
}

.learn-tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.learn-tile-name { font-size: var(--size-small); font-weight: var(--weight-semibold); }

.learn-tile-desc {
  font-size: var(--size-micro);
  color: var(--soft);
  line-height: 1.45;
}

/* `.learn-inline-link` is gone — the calendar jump inside the Love Kitchen
 * sentence is app.css's `.linkish`, the one link-shaped button. */

/* --- the on-playa calendar ------------------------------------------------ */

.learn-days { display: flex; flex-direction: column; gap: var(--space-4); }

/* The hero: the next session on the shared card, tinted while the countdown
 * runs (design §10 — "one thing is next; everything else is a row"). */
.learn-next.is-soon { background: var(--soon-bg); }

.learn-next-what {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: 1.2;
}

.learn-next-where {
  margin: var(--space-1) 0 0;
  font-size: var(--size-small);
  color: var(--soft);
}

.learn-day-label {
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.learn-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* The shared row treatment — panel fill, hairline, control radius, territory
 * edge — tinted by state exactly as Live's rows are. */
.learn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: var(--border-accent) solid var(--t-tea);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
}

/* A camp meeting is not a training — it is the whole camp in one place, and it
 * is the one thing on here you cannot make up later. */
.learn-row--meeting { background: var(--card); border-left-color: var(--ink); }

.learn-row.is-now { background: var(--live-bg); }
.learn-row.is-soon { background: var(--soon-bg); }
.learn-row.is-next { border-left-width: 6px; }

.learn-row-time {
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  /* Wide enough for "12:00 pm–1:00 pm" on one line; the design's 128px folds
     every ranged event onto two. */
  width: 152px;
  flex: none;
}

.learn-row-body { flex: 1 1 200px; min-width: 0; }

.learn-row-title { display: block; font-size: var(--size-body); font-weight: var(--weight-semibold); }
.learn-row-icon { margin-right: var(--space-1); }

.learn-row-what {
  display: block;
  font-size: var(--size-small);
  color: var(--soft);
  line-height: 1.45;
  margin-top: var(--space-1);
}

.learn-row-where { flex: 0 1 190px; font-size: var(--size-micro); color: var(--soft); }

.learn-row-flag {
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  color: var(--soon);
}

.learn-row.is-now .learn-row-flag { color: var(--live); }
.learn-row.is-next .learn-row-flag { color: var(--t-tea-deep); }

@media (max-width: 560px) {
  /* The calendar stops being a table and becomes a stack: time, then what, then
     where. Two columns of 152px do not fit a phone. */
  .learn-row-time { width: auto; }
  .learn-row-where { flex: 1 1 100%; }
}