/* /start, /start/code and /app: one column on a phone, the form beside the
   address plate from 52rem. Colours, type and spacing are the brand's own
   tokens (brand.css), so dark mode follows by itself. */
:root { caret-color: var(--primary); accent-color: var(--primary); }
::selection { background: color-mix(in srgb, var(--primary) 25%, var(--paper)); color: var(--ink); }
a { text-underline-offset: .2em; }
.num { font-variant-numeric: tabular-nums; }
body { overflow-x: hidden; }

.st-bar { border-bottom: var(--edge) solid var(--line); background: var(--paper); }
.st-bar-in { display: flex; align-items: center; gap: 0 var(--space); min-height: 4rem; }
.st-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); margin-right: auto; min-height: 2.75rem; }
.st-brand svg { width: 2rem; height: 2rem; }
.st-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); }
.st-link:hover { color: var(--primary); }

.st-main { padding-block: var(--space-lg) calc(var(--space-lg) * 2); }
.st-grid { display: grid; gap: var(--space-lg); align-items: start; }
.st-panel { border: var(--edge) solid var(--ink); border-radius: var(--radius); padding: calc(var(--space) * 1.5); background: var(--paper); min-width: 0; }
.st-narrow { max-width: 34rem; margin-inline: auto; }
.st-panel h1 { font-size: var(--text-xl); margin-bottom: var(--space); max-width: 22ch; }
.st-lead { margin: 0 0 var(--space); overflow-wrap: anywhere; }
:where(select, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-steps { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0 0 var(--space); font-size: var(--text-sm); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.st-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.st-steps .num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: var(--edge) solid currentColor; margin-right: .3rem; }
.st-steps li[aria-current="step"] .num { background: var(--primary); border-color: var(--primary); color: var(--primary-content); }

.st-form { display: grid; gap: var(--space); }
.st-required, .st-hint, .st-fine { font-size: var(--text-sm); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); margin: 0; }
.st-f { display: grid; gap: .35rem; min-width: 0; }
.st-f label, .st-plans legend { font-weight: 600; }
.st-req { color: var(--primary); }
.st-f .field, select.field { min-height: 2.75rem; font-size: max(1rem, var(--text-base)); }
select.field { background: var(--paper); }
.st-err { margin: 0; color: var(--danger); font-size: var(--text-sm); font-weight: 600; }
.st-notice { margin: 0 0 var(--space); padding: .8rem 1rem; border: var(--edge) solid var(--danger); border-radius: var(--radius); }
.st-ok { margin: 0 0 var(--space); padding: .8rem 1rem; border: var(--edge) solid var(--accent); border-radius: var(--radius); }
.st-row { display: grid; gap: var(--space); }

.st-slug details { border: 0; padding: 0; max-width: none; }
.st-slug summary { cursor: pointer; font-family: var(--font-body); font-size: var(--text-base); min-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .8rem; overflow-wrap: anywhere; }
.st-slug summary strong { font-weight: 600; }
.st-change { color: var(--primary); text-decoration: underline; }
.st-slug details[open] .st-change { display: none; }
.st-slug details > label { display: block; margin: .4rem 0 .35rem; }
.st-slug details > .st-hint, .st-slug details > .st-err, .st-slug details > .st-pick, .st-accept { margin-top: .35rem; }
.st-pick, .st-accept { font: inherit; min-height: 2.75rem; padding: .5em 1em; margin-top: .5rem; border: var(--edge) solid var(--primary); border-radius: var(--radius); background: transparent; color: var(--primary); cursor: pointer; font-weight: 600; }

.st-plans { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.st-plans legend { padding: 0; margin-bottom: .4rem; }
.st-plan { display: flex; gap: .8rem; align-items: center; min-height: 3.5rem; padding: .7rem 1rem; border: var(--edge) solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.st-plan:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.st-plan input { width: 1.3rem; height: 1.3rem; flex: none; }
.st-plan-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; flex: 1; }
.st-plan small { font-size: var(--text-sm); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }

.st-terms { grid-template-columns: auto 1fr; align-items: start; column-gap: .7rem; }
.st-terms input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; }
.st-terms label { font-weight: 400; }
.st-terms label a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; text-decoration: underline; }
.st-terms .st-hint { grid-column: 2; }
.st-terms .st-err { grid-column: 1 / -1; }
.st-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ff-btn { white-space: normal; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .6em 1.3em; border-radius: var(--radius); background: var(--primary); color: var(--primary-content); border: var(--edge) solid var(--primary); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--lift); transition: transform var(--pace) var(--ease), filter var(--pace) var(--ease); }
.ff-btn:hover { transform: translateY(calc(var(--hover-lift) * -1)); filter: brightness(1.07); }
.ff-btn[aria-busy="true"] { cursor: progress; filter: saturate(.7); }
.st-submit { width: 100%; }
.st-alt { margin: var(--space) 0 0; }
.st-alt a, .st-textbtn { display: inline-flex; align-items: center; min-height: 2.75rem; }
.st-again { margin-top: var(--space-lg); }
.st-textbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; }
.st-textbtn[aria-disabled="true"] { color: color-mix(in srgb, var(--ink) 60%, var(--paper)); text-decoration: none; cursor: default; }
.st-code { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 14rem; }

.site-plate { border: var(--edge) solid var(--line); border-radius: var(--radius); padding: calc(var(--space) * 1.5); background: color-mix(in srgb, var(--paper) 94%, var(--primary)); }
.plate-address { margin: 0 0 var(--space); font-size: var(--text-sm); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); overflow-wrap: anywhere; }
.plate-address .num { color: var(--primary); font-weight: 600; }
.plate-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; margin: 0 0 var(--space); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.plate-name.is-single { display: block; white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .plate-live { transition: opacity 90ms ease-out; }
  .plate-live.is-out { opacity: 0; }
}
.plate-line { margin: 0 0 var(--space-lg); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.plate-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .6em 1.3em; border-radius: var(--radius); border: var(--edge) solid var(--primary); color: var(--primary); font-weight: 600; }

.st-foot { padding-block: var(--space-lg); font-size: var(--text-sm); border-top: var(--edge) solid var(--line); }
.st-foot ul { display: flex; flex-wrap: wrap; gap: 0 var(--space); list-style: none; padding: 0; margin: .6rem 0 0; }
.st-foot a { display: inline-block; padding-block: .7rem; }

.app-card { border: var(--edge) solid var(--ink); border-radius: var(--radius); padding: calc(var(--space) * 1.5); max-width: 36rem; }
.app-card h2 { font-size: var(--text-lg); margin-bottom: var(--space); overflow-wrap: anywhere; }
.app-card dl { display: grid; gap: var(--space); margin: 0; }
.app-card dt { font-size: var(--text-sm); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.app-card dd { margin: 0; overflow-wrap: anywhere; }
.st-bar form { margin: 0; }
.st-bar .st-textbtn { color: var(--ink); }

@media (min-width: 40rem) { .st-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) {
  .st-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .site-plate { position: sticky; top: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { .ff-btn { transition: none; } .ff-btn:hover { transform: none; } }

/* A quiet word above the form, the plate's ghost times and the room's light behind the stage. */
.st-ref { margin: 0 0 var(--space); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font-size: var(--text-sm); }
.st-plan-line { flex-basis: 100%; font-size: var(--text-sm); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.plate-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--space); }
.plate-pill { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .9rem; border: var(--edge) dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--ink) 55%, var(--paper)); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.site-atmosphere { background-image: radial-gradient(60rem 28rem at 85% -10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%), radial-gradient(40rem 24rem at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); background-repeat: no-repeat; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  .site-atmosphere { animation: st-light 1.2s ease-out both; }
  @keyframes st-light { from { opacity: 0; } to { opacity: 1; } }
}