/* aurelle.institute additions to site.css.
   The one thing on this site is the seat card: an ink panel, the seat number in orange Fraunces, and every fact a client needs as plain text inside it. */

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }

/* The seat card: a locked unit of text. The pill says it is a sample; a real card carries no pill. */
.seat-card { position: relative; background: var(--ink); color: #fff; border-radius: var(--radius-panel); padding: var(--s-5) var(--s-3) var(--s-3); display: grid; gap: var(--s-3); width: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.seat-card[data-label]::before { content: attr(data-label); position: absolute; top: -0.85rem; left: 1rem; background: var(--orange); color: var(--ink); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); }
.seat-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-2); flex-wrap: wrap; }
.seat-card .number { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.seat-card .meta { color: #CFD6D2; font-weight: 500; font-size: var(--step--1); }
.seat-card .holder { margin: 0; color: #fff; font-weight: 600; font-size: var(--step-1); max-width: none; }
.seat-card .holder small { display: block; color: #CFD6D2; font-weight: 400; font-size: var(--step--1); margin-top: 0.15rem; }
.seat-card .lic { margin: 0; display: grid; gap: 0.6rem; }
.seat-card .lic > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: var(--s-2); padding-top: 0.6rem; border-top: 1px solid #3A4743; }
.seat-card .lic dt { color: #CFD6D2; font-size: var(--step--1); font-weight: 600; }
.seat-card .lic dd { margin: 0; line-height: 1.4; }
.seat-card .foot { margin: 0; padding-top: var(--s-2); border-top: 1px solid #3A4743; color: #CFD6D2; font-size: var(--step--1); max-width: none; }
.seat-card .foot a { color: #fff; }

/* Home: the six criteria as a numbered grid */
.criteria-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--s-4); counter-reset: chk; }
.criteria-index li { counter-increment: chk; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.criteria-index li::before { content: counter(chk); font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: var(--step-2); color: var(--spruce); line-height: 1; }
.criteria-index strong { display: block; }
.criteria-index span { color: var(--ink-soft); }

/* Criteria */
.criteria-list { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: crit; }
.criterion { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-2) var(--s-4); counter-increment: crit; }
.criterion h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: var(--step-2); line-height: 1.12; margin: 0; }
.criterion h3::before { content: counter(crit); display: block; color: var(--spruce); font-size: var(--step-1); margin-bottom: 0.25rem; }
.criterion dl { margin: 0; display: grid; gap: var(--s-2); }
.criterion dt { font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); }
.criterion dd { margin: 0.1rem 0 0; }
.criterion dd.fails { color: var(--red); }
@media (max-width: 800px) { .criterion { grid-template-columns: 1fr; } }

/* Price rows */
.price-rows { list-style: none; margin: 0 0 var(--s-2); padding: 0; border-top: 1px solid var(--line); }
.price-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.price-rows .amt { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: var(--step-2); color: var(--spruce); line-height: 1.1; text-align: right; }
.price-rows .amt small { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); }
.price-rows p { margin: 0.2rem 0 0; color: var(--ink-soft); }
@media (max-width: 640px) { .price-rows li { grid-template-columns: 1fr; } .price-rows .amt { text-align: left; } }

/* The roll and other tables: the empty state */
.table .empty { font-weight: 400; color: var(--ink-soft); padding: var(--s-4) 1rem; }

/* The application */
.apply-wrap { max-width: 720px; }
.progress { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; margin: 0 0 var(--s-3); }
.progress span { display: block; height: 100%; background: var(--spruce); width: 25%; }
.step { display: grid; gap: var(--s-3); }
.step h2 { font-size: var(--step-2); margin: 0; }
.step-nav { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.step-nav .save { margin-left: auto; }
@media (max-width: 560px) { .step-nav .save { margin-left: 0; flex-basis: 100%; justify-content: center; } }
.apply-wrap .form { max-width: none; }
.draft-note { border-left: 4px solid var(--spruce); background: var(--spruce-soft); padding: 0.8rem 1rem; border-radius: 0 10px 10px 0; margin: 0 0 var(--s-3); }
.linklike { background: none; border: 0; padding: 0.25rem 0; font: inherit; color: var(--spruce); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.linklike:hover { color: var(--ink); }
.save-note { margin: var(--s-2) 0 0; max-width: 620px; }
.summary { margin: 0; padding: var(--s-2) var(--s-3); background: var(--field); border-radius: 10px; }

/* Facts lists */
.facts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.facts .meta { color: var(--ink-soft); font-size: var(--step--1); text-align: right; }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; } .facts .meta { text-align: left; } }

/* A note directly under a numbered list needs air above it */
.steps + .small { margin-top: var(--s-3); }