/* =====================================================================
   My Playground summary — styles for the server-rendered fragment.
   Cards are invitations and doorways, not KPI tiles: the count is never
   the largest thing on the card, and the label always reads as language.
   ===================================================================== */

.lif-summary { display: flex; flex-direction: column; gap: var(--lif-space-7); }

.lif-prototype-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-2) var(--lif-space-3);
  align-items: baseline;
  padding: var(--lif-space-2) var(--lif-space-4);
  border: 1px dashed var(--lif-status-attention);
  border-radius: var(--lif-radius);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-ink-soft);
}
.lif-prototype-banner__status { font-weight: 700; letter-spacing: 0.04em; color: var(--lif-status-attention); }

/* ---- 1. Welcome and orientation ---- */
.lif-welcome { display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-welcome__greeting {
  font-size: var(--lif-size-xxl);
  color: var(--lif-accent-deep);
  max-width: var(--lif-measure);
}
.lif-welcome__orientation { font-size: var(--lif-size-lg); color: var(--lif-ink); max-width: var(--lif-measure); }
.lif-welcome__since { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }

.lif-pathway {
  margin-top: var(--lif-space-2);
  padding: var(--lif-space-5);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface);
}
.lif-pathway__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-3);
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
}
.lif-pathway__title { font-family: var(--lif-font-ui); font-size: var(--lif-size-lg); font-weight: 600; }
.lif-pathway__progress { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); }
.lif-pathway__orientation { margin-top: var(--lif-space-3); color: var(--lif-ink-soft); max-width: var(--lif-measure); }
.lif-pathway__steps { list-style: none; margin-top: var(--lif-space-4); display: flex; flex-direction: column; gap: var(--lif-space-2); }
.lif-pathway__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lif-space-3);
  padding: var(--lif-space-3);
  border-radius: var(--lif-radius);
  background: var(--lif-surface-raised);
  border: 1px solid var(--lif-hairline);
}
/* State is carried by a shape and a screen-reader label, never colour alone. */
.lif-pathway__step-state {
  width: 1.1rem; height: 1.1rem; flex: none;
  border-radius: 50%;
  border: 2px solid var(--lif-ink-soft);
}
.lif-pathway__step[data-step-complete="true"] .lif-pathway__step-state {
  border-color: var(--lif-status-restful);
  background:
    linear-gradient(45deg, transparent 42%, var(--lif-surface-raised) 42% 58%, transparent 58%),
    var(--lif-status-restful);
}
.lif-pathway__step-label { flex: 1 1 12rem; }
.lif-pathway__step-link { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); }

/* ---- Section heads ---- */
.lif-section-head { display: flex; flex-direction: column; gap: var(--lif-space-1); margin-bottom: var(--lif-space-4); }
.lif-section-head__title { font-size: var(--lif-size-xl); }
.lif-section-head__orientation { color: var(--lif-ink-soft); max-width: var(--lif-measure); }

/* ---- 2. Meaningful current activity ---- */
.lif-activity__list { list-style: none; display: grid; gap: var(--lif-space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.lif-activity__item {
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-2);
  align-items: flex-start;
  padding: var(--lif-space-5);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface-raised);
  box-shadow: var(--lif-shadow);
}
.lif-activity__label { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--lif-ink-soft); }
.lif-activity__title { font-size: var(--lif-size-lg); }
.lif-activity__context { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); }

/* ---- 3. Discovery ---- */
.lif-discovery__list { list-style: none; display: grid; gap: var(--lif-space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.lif-discovery__item {
  padding: var(--lif-space-4);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
}
.lif-discovery__kind { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--lif-ink-soft); }
.lif-discovery__title { font-size: var(--lif-size-md); margin-top: var(--lif-space-1); }
.lif-discovery__meta { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); margin-top: var(--lif-space-1); }
.lif-discovery__routes { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); margin-top: var(--lif-space-4); }

/* ---- 4. Summary cards ---- */
.lif-cards__grid { list-style: none; display: grid; gap: var(--lif-space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.lif-cards__item { display: flex; }
.lif-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-3);
  padding: var(--lif-space-5);
  border: 1px solid var(--lif-hairline);
  border-top: 3px solid var(--lif-accent);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface-raised);
  box-shadow: var(--lif-shadow);
}
.lif-card__title { font-size: var(--lif-size-lg); }
.lif-card__link { text-decoration: none; color: var(--lif-accent-deep); }
.lif-card__link:hover { text-decoration: underline; }
.lif-card__orientation { color: var(--lif-ink-soft); font-size: var(--lif-size-sm); }
.lif-card__lines { margin: 0; display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-card__line {
  display: flex;
  gap: var(--lif-space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--lif-space-2) 0;
  border-bottom: 1px solid var(--lif-hairline);
}
.lif-card__line:last-child { border-bottom: 0; }
.lif-card__line-label { margin: 0; font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); }
.lif-card__line-link { color: var(--lif-ink); text-decoration: none; }
.lif-card__line-link:hover { color: var(--lif-accent-deep); text-decoration: underline; }
/* Counts stay quiet: a summary, never a score. */
.lif-card__line-count {
  margin: 0;
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-md);
  font-variant-numeric: tabular-nums;
  color: var(--lif-ink-soft);
}
.lif-card__line[data-count="0"] .lif-card__line-count { opacity: 0.75; }

@media (max-width: 40rem) {
  .lif-welcome__greeting { font-size: var(--lif-size-xl); }
  .lif-cards__grid, .lif-activity__list, .lif-discovery__list { grid-template-columns: minmax(0, 1fr); }
}