/* Bazzr Studio: the plan sheet used on the sector pages. */

/* The plan sheet: a light object on the dark stage. */

.sheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--white);
  color: var(--navy);
}

.sheet-kicker,
.sheet-note,
.ms-when,
.sheet-total dt {
  font-size: var(--text-small);
  color: var(--ink-soft);
}

.sheet-title {
  margin-top: var(--space-2);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.sheet-summary {
  margin-top: var(--space-4);
  color: var(--ink-soft);
  line-height: 1.5;
}

.ms-list {
  width: 100%;
  margin-top: var(--space-5);
  counter-reset: ms;
}

.ms {
  counter-increment: ms;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}

.ms-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 500;
  line-height: 1.3;
}

.ms-name::before {
  content: counter(ms) ". ";
  color: var(--ink-soft);
  font-weight: 400;
}

.ms-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ms-track {
  display: grid;
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  gap: 3px;
  margin-top: var(--space-3);
  padding: 3px;
  background: var(--paper);
  border-radius: var(--radius-pill);
}

.ms-bar {
  height: 0.5rem;
  background: linear-gradient(90deg, var(--cobalt), var(--electric));
  border-radius: var(--radius-pill);
}

.ms-when {
  margin-top: var(--space-2);
}

.sheet-total {
  display: flex;
  gap: 2.5rem;
  width: 100%;
  padding-top: var(--space-5);
  border-top: 2px solid var(--navy);
}

.sheet-total dd {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.sheet-note {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}