/* Home — DESIGN_SPEC.md §2 (Manuscript home + concept 2 garland). */

/* ---- Header (self-contained per spec §7 extension seam) ---- */
.home-header {
  padding: 30px 44px 14px;
  border-bottom: 1px solid var(--line);
}
.home-title {
  margin: 0;
  font-family: var(--font-latin);   /* English title, Spectral 600 */
  font-weight: 600;
  font-size: 34px;                  /* spec H1 34px */
  line-height: 1.15;
  color: var(--ink);
}
.home-subline {
  margin: 4px 0 0;
  font-size: 15px;
  font-style: italic;
  color: var(--ink-faint);
}

/* ---- Garland: gentle arc of flowers, one per item (spec §2, concept 2) ----
   All items share the row (no horizontal scroll): flowers flex-shrink so the
   whole garland is visible unclipped at both iPad targets (768 and 1024 wide).
   Each flower is a 48px-tall touch target; the visible bud is 18-24px. */
.garland {
  padding: 14px 8px 6px;
}
.garland-arc {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  min-height: 96px;                 /* 48px flower + up to 36px arc dip */
  max-width: 1040px;
  margin: 0 auto;
}

.flower {
  flex: 1 1 0;
  min-width: 0;                     /* allow shrink so 41 buds always fit */
  max-width: 26px;
  height: var(--touch-min, 48px);   /* 48px vertical touch target */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 400ms ease-out;   /* bud -> bloom (spec §4) */
}
.flower-disc {
  width: 100%;
  max-width: 22px;                  /* bud caps at 22px; shrinks to fit slot */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.flower--marigold .flower-disc {    /* exam-ready -> marigold #f39b1d */
  background: radial-gradient(circle at 38% 34%, var(--marigold-hi), var(--marigold) 65%, #c96a10);
  box-shadow: 0 2px 5px rgba(150, 80, 10, 0.35);
}
.flower--jasmine .flower-disc {     /* learning / not started -> white bud */
  background: radial-gradient(circle at 38% 34%, #fffdf6, var(--paper-deep) 70%, var(--scan-paper));
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 5px rgba(150, 80, 10, 0.2);
}
.flower--focus .flower-disc {       /* this week -> red #d94b2b, slightly larger */
  max-width: 24px;
  background: radial-gradient(circle at 38% 34%, #ff9a8a, var(--focus-red) 65%, #a12c12);
  box-shadow: 0 3px 7px rgba(140, 40, 10, 0.4);
}
.flower:hover { transform: translateY(var(--flower-y, 0)) scale(1.12); }

/* Reduced motion: the bud->bloom / hover growth becomes instant (spec §4). */
@media (prefers-reduced-motion: reduce) {
  .flower { transition: none; }
}

.garland-caption {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- Search ---- */
.search {
  padding: 8px 44px 4px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper-deep);
  border: 1px solid var(--accent);
  border-radius: 26px;
}
.search-icon { color: var(--accent); flex: 0 0 auto; }
.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-style: italic;
}
.search-field input::placeholder { color: var(--ink-faint); }
.search-field input:focus { outline: none; }
.search-field:focus-within { outline: 2px solid var(--focus-red); outline-offset: 2px; }

/* ---- Checklist: groups distributed across columns in landscape ---- */
.checklist {
  padding: 18px 44px 40px;
}
@media (min-width: 900px) and (orientation: landscape) {
  .checklist { column-count: 3; column-gap: 36px; }
}
@media (min-width: 1200px) {
  .checklist { column-count: 3; column-gap: 36px; }
}

.group {
  break-inside: avoid;
  margin-bottom: 22px;
}
.group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.group-name-kn {
  font-family: var(--font-kannada);
  font-size: 22px;                 /* spec group heading 22px */
  font-weight: 600;
  color: var(--ink-soft);
}
.group-meta {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.group-rows {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch-min);    /* 48px full-width touch target */
  padding: 6px 4px;
  border-bottom: 1px dotted var(--line);
  color: var(--ink);
}
.row:last-child { border-bottom: none; }
.row--focus { background: var(--paper-deep); }

.row-glyph { flex: 0 0 auto; color: var(--ink-soft); display: grid; place-items: center; }

.row-body { min-width: 0; flex: 1; }
.row-name {
  font-family: var(--font-kannada);
  font-size: 22px;                 /* spec item name 22px */
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.row-sub {
  font-family: var(--font-latin);
  font-size: 12.5px;
  color: var(--ink-faint);
}

.row-audio { flex: 0 0 auto; color: var(--accent); display: grid; place-items: center; }

.row-tag {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.row-tag--focus { color: var(--focus-red); font-weight: 600; }

.empty {
  padding: 24px 4px;
  font-size: 16px;
  color: var(--ink-faint);
}

.load-error {
  padding: 24px 44px;
  color: var(--focus-red);
}

/* Phone width: single column already (default), tighten paddings. */
@media (max-width: 560px) {
  .home-header, .search, .checklist { padding-left: 20px; padding-right: 20px; }
  .home-title { font-size: 28px; }
}