/* Shared landing examples. Copied by deploy/tools/generate-week-examples.mts. */
.week-story > * { min-width: 0; }
.week-story .week-sample { margin: 0; box-shadow: none; }
.week-story .week-copy h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.week-story--wheel .week-copy { grid-column: 2; grid-row: 1; }
.week-story--wheel .week-sample { grid-column: 1; grid-row: 1; }
.week-story .week-sample h3 { margin-bottom: var(--sr-space-4); }
.week-story .week-sample .eyebrow { font-size: var(--sr-text-eyebrow); }
.week-example-wheel { display: block; width: 100%; height: auto; overflow: visible; }
.week-example-wheel__track { fill: color-mix(in srgb, var(--sr-area) var(--sr-wheel-track-opacity), var(--sr-surface)); }
.week-example-wheel__fill { fill: var(--sr-area); }
.week-example-wheel__number { fill: var(--sr-ink); opacity: var(--sr-wheel-number-opacity); font-size: var(--sr-wheel-number-size); font-family: var(--sr-font-ui); font-weight: 400; }
/* SVG text uses logo coordinates, so it scales with the diagram. */
.week-example-wheel__label { fill: var(--sr-ink); font-family: var(--sr-font-ui); font-size: var(--sr-wheel-label-size); font-weight: 400; }
.week-example-legend { display: none; }
.week-example-area--social { --sr-area: var(--sr-area-social); }
.week-example-area--meaningful { --sr-area: var(--sr-area-meaningful); }
.week-example-area--routines { --sr-area: var(--sr-area-routines); }
.week-example-area--goals { --sr-area: var(--sr-area-goals); }
.week-example-area--thinking { --sr-area: var(--sr-area-thinking); }
.week-story .day.filled { background: var(--sr-area); border-color: transparent; }
.week-story .day { width: 12px; height: 12px; }
.week-story .week-table__total { width: 2.75rem; }
.week-story .week-table td:last-child { padding-inline-start: 0; }
.week-story .week-table tbody th { overflow-wrap: anywhere; }
.area-rename-note { border-top: 1px solid var(--sr-line); padding-top: var(--sr-space-6); margin-top: var(--sr-space-8); }
.area-rename-note h3 { font-size: var(--sr-text-h2); margin-bottom: var(--sr-space-3); }
.area-rename-note p, .week-example-summary { color: var(--sr-ink-2); font-size: var(--sr-text-small); }
.week-example-summary { margin-bottom: var(--sr-space-6); }
@media (max-width: 760px) {
  .week-story--wheel .week-copy, .week-story--wheel .week-sample { grid-column: auto; grid-row: auto; }
  .week-story .week-sample { width: 100%; max-width: 36rem; margin-inline: auto; }
  .week-story .week-table__area { width: 30%; }
  .week-story .week-table__total { width: 2rem; }
  .week-story .week-table th { font-size: var(--sr-text-eyebrow); }
  .week-story .week-table tbody th, .week-story .week-table td { font-size: var(--sr-text-eyebrow); }
  .week-story .day { width: 10px; height: 10px; }
}
@media (max-width: 600px) {
  .week-example-wheel__label { display: none; }
  .week-example-wheel { margin-block: calc(-1 * var(--sr-space-4)) calc(-1 * var(--sr-space-8)); }
  .week-example-legend { display: grid; gap: var(--sr-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--sr-text-small); }
  .week-example-legend li { display: flex; align-items: baseline; gap: var(--sr-space-2); }
  .week-example-legend li::before { content: ""; width: var(--sr-space-2); height: var(--sr-space-2); border-radius: var(--sr-radius-full); background: var(--sr-area); flex-shrink: 0; }
  .week-example-legend li span:last-child { margin-inline-start: auto; white-space: nowrap; color: var(--sr-ink-2); }
}
@media (forced-colors: active) {
  .week-example-wheel__track { fill: Canvas; stroke: CanvasText; stroke-width: .15; }
  .week-example-wheel__fill { fill: Highlight; }
  .week-example-wheel__number { fill: CanvasText; opacity: 1; }
  .week-example-wheel__label { fill: CanvasText; }
  .week-story .day.filled { background: Highlight; forced-color-adjust: none; }
}