/* Player Card mockup — page-local glue.
   Composes design-system tokens (--s-*). Status colors via --s-feedback-*
   (ADR-0007); accents stay personality-only per constitutional rule 5.
   iPhone-first per docs/iphone-web-app-conventions.md. */

html, body { height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--s-surface-base);
  color: var(--s-text-primary);
  font-family: var(--p-font-body);
  font-size: var(--p-text-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-space-xl) var(--s-space-md);
  padding-top: max(var(--s-space-xl), env(safe-area-inset-top));
  padding-bottom: max(var(--s-space-xl), env(safe-area-inset-bottom));
  padding-inline: max(var(--s-space-md), env(safe-area-inset-left)) max(var(--s-space-md), env(safe-area-inset-right));
}

.page__header { max-width: 640px; margin-bottom: var(--s-space-xl); }
.page__title {
  font-family: var(--p-font-display);
  font-weight: var(--p-weight-semibold);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  margin: var(--s-space-sm) 0 var(--s-space-xs);
}
.page__sub { color: var(--s-text-muted); margin: 0; }
.page__foot { margin-top: var(--s-space-2xl); color: var(--s-text-soft); font-size: var(--p-text-13); }
.page__foot code { font-size: var(--p-text-12); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-space-lg);
  align-items: start;
}

/* ── the card ── */
.pcard {
  background: var(--s-surface-raised);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--s-radius-card);
  box-shadow: var(--s-shadow-md);
  padding: var(--s-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-md);
}
.pcard--attention { border-color: var(--s-border-strong); }
.pcard--stale { opacity: .92; }

.pcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-space-sm); }
.pcard__name {
  font-family: var(--p-font-display);
  font-weight: var(--p-weight-semibold);
  font-size: var(--p-text-26);
  margin: 0;
  line-height: 1.1;
}
.pcard__meta { color: var(--s-text-muted); font-size: var(--p-text-13); margin: 2px 0 0; }

/* pills — controls/badges are pills (rule 4); status via feedback tokens (ADR-0007) */
.pill {
  display: inline-flex; align-items: center;
  border-radius: var(--s-radius-control);
  padding: 4px 12px;
  font-size: var(--p-text-13);
  font-weight: var(--p-weight-medium);
  white-space: nowrap;
}
.pill--sm { padding: 2px 10px; font-size: var(--p-text-12); }
.pill--ok   { background: color-mix(in srgb, var(--s-feedback-success) 12%, transparent); color: var(--s-feedback-success); }
.pill--warn { background: color-mix(in srgb, var(--s-feedback-warning) 12%, transparent); color: var(--s-feedback-warning); }
.pill--bad  { background: color-mix(in srgb, var(--s-feedback-error) 10%, transparent); color: var(--s-feedback-error); }
.pill--note { background: var(--s-surface-sunken); color: var(--s-text-secondary); }

/* headline block — Last 10 LEFT (most recent), Last 20 RIGHT (trend), per Ry 2026-07-13 */
.pcard__headline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-space-md);
  background: var(--s-surface-base);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--s-radius-panel);
  padding: var(--s-space-md);
}
.pcard__hcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcard__cap-chip { margin: 4px 0 2px; }
.pcard__label {
  display: block;
  font-size: var(--p-text-12);
  font-weight: var(--p-weight-medium);
  letter-spacing: .02em;
  color: var(--s-text-muted);
  text-transform: uppercase;
}
.pcard__big {
  font-family: var(--p-font-display);
  font-weight: var(--p-weight-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--s-text-brand);
}
.pcard__big--bad { color: var(--s-feedback-error); }
.pcard__big--warn { color: var(--s-feedback-warning); }
.pcard__pct { font-size: 28px; font-weight: var(--p-weight-semibold); }
.spark { display: block; width: 120px; height: 32px; margin-top: 6px; }
.pcard__trendnote { font-size: var(--p-text-12); color: var(--s-text-soft); }
.pcard__headline-side { display: flex; flex-direction: column; gap: 4px; max-width: 150px; text-align: right; align-items: flex-end; }
.pcard__mid { font-family: var(--p-font-display); font-weight: var(--p-weight-semibold); font-size: var(--p-text-30); line-height: 1.1; }
.pcard__mid--warn { color: var(--s-feedback-warning); }
.gauge { font-size: var(--p-text-12); line-height: 1.35; }
.gauge--ok { color: var(--s-feedback-success); }
.gauge--warn { color: var(--s-feedback-warning); }

/* MPS bar */
.pcard__mps { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-space-sm); }
.bar { position: relative; height: 8px; background: var(--s-surface-sunken); border-radius: var(--s-radius-control); overflow: visible; }
.bar__fill { height: 100%; max-width: 100%; background: var(--s-text-brand); border-radius: var(--s-radius-control); }
.bar__fill--bad { background: var(--s-feedback-error); }
.bar__goal { position: absolute; top: -4px; width: 4px; height: 16px; background: var(--p-accent-yellow); border: 1px solid rgba(27,22,36,.35); border-radius: 2px; }
.pcard__mps-num { font-weight: var(--p-weight-bold); font-size: var(--p-text-17); white-space: nowrap; }
.pcard__mps-num small { color: var(--s-text-soft); font-weight: var(--p-weight-regular); }

/* weekly cap callout */
.pcard__cap { display: flex; align-items: center; gap: var(--s-space-sm); flex-wrap: wrap; }
.pcard__cap-note { font-size: var(--p-text-12); color: var(--s-text-muted); }

/* sections */
.pcard__section-label {
  display: block;
  font-size: var(--p-text-12);
  font-weight: var(--p-weight-medium);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--s-text-muted);
  margin-bottom: var(--s-space-xs);
}
.pcard__section-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--s-text-soft); }

.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-space-xs); }
.stat { background: var(--s-surface-base); border: 1px solid var(--s-border-subtle); border-radius: var(--s-radius-subtle); padding: var(--s-space-xs) var(--s-space-sm); text-align: center; }
.stat__n { display: block; font-family: var(--p-font-display); font-weight: var(--p-weight-bold); font-size: var(--p-text-22); line-height: 1.15; }
.stat__l { display: block; font-size: var(--p-text-12); color: var(--s-text-muted); }

.delta-list { list-style: none; display: flex; gap: var(--s-space-md); margin: 0; padding: 0; flex-wrap: wrap; font-size: var(--p-text-14); color: var(--s-text-secondary); }
.delta-list li { display: flex; align-items: center; gap: 5px; }
.delta { font-weight: var(--p-weight-bold); font-variant-numeric: tabular-nums; }
.delta--plus { color: var(--s-feedback-success); }
.delta--minus { color: var(--s-feedback-warning); }

.pcard__play-text { margin: 0; font-size: var(--p-text-15); }

.pcard__foot { border-top: 1px solid var(--s-border-subtle); padding-top: var(--s-space-sm); font-size: var(--p-text-12); color: var(--s-text-soft); }

/* stale card */
.pcard__stale-msg { font-family: var(--p-font-display); font-size: var(--p-text-20); font-weight: var(--p-weight-semibold); margin: 0 0 var(--s-space-xs); }
.pcard__stale-detail { margin: 0; color: var(--s-text-muted); font-size: var(--p-text-14); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 360px) {
  .pcard__headline { grid-template-columns: 1fr; }
}

/* v3 — trend line as its own full-width row under both numbers (Ry 2026-07-13) */
.pcard__trendrow {
  grid-column: 1 / -1;
  border-top: 1px solid var(--s-border-muted);
  padding-top: var(--s-space-sm);
  margin-top: var(--s-space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.spark--wide { width: 82%; max-width: 260px; height: 34px; margin: 0; }

/* v4 — section dividers (Ry 2026-07-13): score→YTD, YTD→week, week→play */
.pcard__ytd, .pcard__week, .pcard__play {
  border-top: 1px solid var(--s-border-muted);
  padding-top: var(--s-space-md);
}

/* v5 — 2-a-week pace flag under Official YTD (Ry 2026-07-13) */
.pace { margin: var(--s-space-xs) 0 0; font-size: var(--p-text-13); }
.pace--ok { color: var(--s-text-soft); }
.pace--flag { color: var(--s-feedback-warning); font-weight: var(--p-weight-medium); }

/* v6 — YTD tiles red below their prorated line; S→UC traffic light (Ry 2026-07-13) */
.stat { position: relative; }
.stat--below { border-color: color-mix(in srgb, var(--s-feedback-error) 45%, transparent); }
.stat--below .stat__n { color: var(--s-feedback-error); }
.stat__line { display: block; font-size: var(--p-text-11); color: var(--s-feedback-error); }
.suc { display: flex; align-items: baseline; gap: var(--s-space-sm); }
.suc__val { font-family: var(--p-font-display); font-weight: var(--p-weight-bold); font-size: var(--p-text-20); }
.suc__val--green { color: var(--s-feedback-success); }
.suc__val--yellow { color: var(--s-feedback-warning); }
.suc__val--red { color: var(--s-feedback-error); }
.suc__note { font-size: var(--p-text-12); color: var(--s-text-soft); }

/* v7 — closed bands + binary S→UC (Ry 2026-07-13) */
.stat--good { border-color: color-mix(in srgb, var(--s-feedback-success) 45%, transparent); }
.stat--good .stat__n { color: var(--s-feedback-success); }
.stat__line--good { color: var(--s-feedback-success); }
.stat--mid { border-color: color-mix(in srgb, var(--s-feedback-warning) 50%, transparent); }
.stat--mid .stat__n { color: var(--s-feedback-warning); }
.stat__line--mid { color: var(--s-feedback-warning); }

/* v9.1 — composite badge must never wrap the agent name (caught in self-review) */
.pcard__head > div:first-child { flex: 1 1 auto; min-width: 0; }
.pcard__head > .pill { flex: 0 0 auto; padding: 3px 10px; font-size: var(--p-text-12); }
.pcard__name { white-space: nowrap; }