/* The Phase 1 art brief (Components/Pages/CommissionBrief.razor), and nothing else. Loaded only by that page,
   so deleting the page and this file together removes the brief whole (docs/FUTURE.md). Every colour and size
   is a token from tokens.css, so both themes come for free. */

.commission {
  padding-block: var(--space-lg) var(--space-2xl);
  display: grid;
  gap: var(--space-xl);
}
.commission > * { min-width: 0; }

.commission__head { display: grid; gap: var(--space-xs); max-width: var(--measure); }

.commission__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.commission__meta li {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-strong);
}

.commission__section { display: grid; gap: var(--space-sm); }
.commission__prose { max-width: var(--measure); display: grid; gap: var(--space-sm); }

/* The no-AI rule stands apart by its edge, in the accent: it is a condition of the work, not an error (DESIGN §1). */
.commission__rule {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-xs);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.commission__pair {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.commission__pair > * { min-width: 0; }
.commission__pair--top { align-items: start; }
.commission__part { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md); }

/* Bulleted lists carry the site's one motif, the lozenge, in the accent. */
.commission__marks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  max-width: var(--measure);
}
.commission__marks li { position: relative; padding-inline-start: 1.25rem; }
.commission__marks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--accent);
  -webkit-mask: var(--lozenge-mask) center / contain no-repeat;
          mask: var(--lozenge-mask) center / contain no-repeat;
}

.commission__refs {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.commission__ref-group { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.commission__ref-group li { font-size: var(--text-sm); }

.commission__spec { display: grid; gap: var(--space-xs); max-width: var(--measure); margin: 0; }
.commission__spec div { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: var(--space-xs); }
.commission__spec dt { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--fg-faint); }
.commission__spec dd { margin: 0; min-width: 0; }
@media (max-width: 34rem) {
  .commission__spec div { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

.commission__species {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.commission__card { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; padding: var(--space-md); }
.commission__card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
}
/* A small link gets vertical padding to a full tap target, as .field__hint a does (DESIGN §5). */
.commission__card header a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding-block: calc((var(--tap-min) - 1.15em) / 2);
}
.commission__card dl { display: grid; gap: var(--space-xs); margin: 0; font-size: var(--text-sm); }
.commission__card dt {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.commission__card dd { margin: var(--space-3xs) 0 0; }

.commission__layers-wrap { display: grid; gap: var(--space-2xs); }
.commission__layers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3xs);
  max-width: 26rem;
  counter-reset: layer;
}
.commission__layers li {
  counter-increment: layer;
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.commission__layers li::before {
  content: counter(layer);
  min-width: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Each layer steps in a little, so the list reads as a stack from back to front. */
.commission__layers li:nth-child(n+2) { margin-inline-start: 0.375rem; }
.commission__layers li:nth-child(n+4) { margin-inline-start: 0.75rem; }
.commission__layers li:nth-child(n+6) { margin-inline-start: 1.125rem; }
.commission__layers li:nth-child(n+8) { margin-inline-start: 1.5rem; }

.commission__caption { caption-side: top; text-align: start; padding: var(--space-xs); }
.commission__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.commission tfoot td { font-weight: 600; }

.commission__track { display: grid; gap: var(--space-xs); align-content: start; }
.commission__milestones { padding-inline-start: 1.5rem; margin: 0; display: grid; gap: var(--space-2xs); }
.commission__milestones li::marker { font-family: var(--font-ui); font-weight: 600; color: var(--accent); }
.commission__paid {
  display: inline-block;
  margin-inline-start: var(--space-3xs);
  padding: 0 var(--space-2xs);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.commission__reply {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-inline-start: 3px solid var(--accent);
}