* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--brand); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
a { color: var(--accent-tx); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1rem; background: #fff; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--brand); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.brand img { display: block; height: 34px; width: auto; }
.brand img.cart { height: 1.7em; width: 1.7em; flex: none; margin-left: -.25rem; }
#nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; justify-content: flex-end; color: #404040; font-size: .95rem; }
#nav a, #nav button { color: #00658C; }
.bar { height: 4px; background: var(--kpm-bar); }

main { max-width: 74rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
video { display: block; width: 100%; max-width: 56rem; border-radius: 6px; background: #000; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 1.25rem; }
.narrow { max-width: 26rem; margin: 2rem auto; }
.lede { color: var(--ink-2); margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: .9rem; margin: .35rem 0; }
.message { padding: .6rem .8rem; border-radius: 6px; background: var(--accent-2); color: var(--ink); margin: 0 0 1rem; }
.message.bad { background: var(--bad-2); color: var(--bad); }

label { display: block; font-weight: 500; margin: 0 0 .9rem; }
input[type=email], input[type=password], input[type=search], input[type=tel], input:not([type]), .card.narrow input[type=text] {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
button, .button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); padding: .5rem .9rem; text-decoration: none; display: inline-block; }
button.primary, .button.primary { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); font-weight: 500; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; text-decoration: underline; color: inherit; }

.steps { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .8rem; }
.step { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #06222E; display: inline-grid; place-items: center; font-weight: 600; font-size: .9rem; }
.secret, .codes li { font-family: var(--font-mono); letter-spacing: .06em; word-break: break-all; }
.codes { list-style: none; padding: 0; columns: 2; margin: 0 0 1rem; }
.confirm-code { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 600; letter-spacing: .4em; text-indent: .4em; text-align: center; margin: .4rem 0 1rem; padding: .5rem 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface-2); color: var(--ink); }

.shop { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 52rem) { .shop { grid-template-columns: 1fr; } }
.basket { position: sticky; top: 1rem; }
.basket-lines { list-style: none; margin: 0 0 .75rem; padding: 0; }
.basket-lines li { padding: .45rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.basket-lines .hardware-heading { background: #EEF2F5; padding-left: .4rem; padding-right: .4rem; }
.basket-lines .row { display: flex; justify-content: space-between; gap: .5rem; font-weight: 500; }
.total { display: flex; justify-content: space-between; font-size: 1.1rem; margin: .5rem 0; }
.search { max-width: 28rem; }

.cal { margin: 0 0 .75rem; padding: 1rem; }
.cal header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.cal .part { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.cal .tags { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.tag { font-size: .78rem; padding: .05rem .5rem; border-radius: 99px; background: var(--accent-2); color: var(--accent-tx); }
.cal .tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.formats { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.formats label { margin: 0; font-weight: 500; }
.formats input { position: absolute; opacity: 0; }
.formats span { display: block; padding: .3rem .8rem; cursor: pointer; font-size: .9rem; }
.formats input:checked + span { background: var(--fill); color: var(--fill-ink); }
.formats input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: -3px; }
.cons { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem .75rem; margin: 0; padding: 0; list-style: none; }
.cons label { display: flex; gap: .45rem; align-items: baseline; margin: 0; font-weight: 400; padding: .15rem 0; }
.cons .def { color: var(--muted); font-size: .8rem; }
.bundle { border-left: 4px solid var(--accent); }
.bundles { margin: 0 0 1rem; }
.bundles summary { cursor: pointer; font-weight: 500; padding: .6rem .2rem; color: var(--accent-tx); }
.bundles .cal { margin-top: .5rem; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.order { margin: 0 0 .75rem; padding: .75rem 1rem; }
.order summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-weight: 500; }
.order .num { font-family: var(--font-mono); }
.state { font-size: .85rem; padding: .05rem .6rem; border-radius: 99px; background: var(--accent-2); color: var(--accent-tx); }
.state.approved { background: var(--good-2); color: var(--good); }
.state.cancelled { background: var(--bad-2); color: var(--bad); }
.state.attention { background: var(--warn-2); color: var(--warn); }
.order-body { margin-top: .75rem; }
.delivery { margin-top: 1rem; }

.backstore { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 52rem) { .backstore { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: .4rem; margin-bottom: .75rem; }
.tab.on { background: var(--fill); color: var(--fill-ink); border-color: var(--fill); }
.queue-list { list-style: none; margin: 0; padding: 0; }
.link-row { width: 100%; text-align: left; display: flex; flex-direction: column; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .55rem .2rem; }
.link-row:hover { background: var(--accent-2); }
.panel { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 1rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.bigcode { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: .08em; background: var(--surface-2); border: 1px dashed var(--rule); border-radius: 6px; padding: .6rem .8rem; word-break: break-all; }
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); max-width: 24rem; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }

select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
input[type=file] { display: block; margin-top: .25rem; }
#software form { max-width: 32rem; }
.release { margin: 0 0 .75rem; padding: 1rem; }
.hash { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; }

.filters { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin: .5rem 0 1rem; }
.filters label { margin: 0; }
.filters .check { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
/* The catalogue management forms: one column, every field the same width. */
form.stack { display: grid; gap: .6rem; max-width: 40rem; margin: .5rem 0 1rem; }
form.stack label { display: grid; gap: .25rem; margin: 0; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=tel], form.stack input[type=password], form.stack input:not([type]), form.stack select, form.stack textarea { width: 100%; box-sizing: border-box; margin-top: 0; padding: .5rem .6rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
form.stack label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
form.stack .actions { display: flex; gap: .5rem; }
form.stack > button { justify-self: start; }
form.stack input, form.stack select { min-height: 2.6rem; }
.tag.warn { background: var(--warn-2); color: var(--warn); }

#catalogue .queue-list > li, #signups .queue-list > li, #contacts .queue-list > li, #reps .queue-list > li, #invitations .queue-list > li { border-bottom: 1px solid var(--rule); padding: .6rem 0; }

[hidden] { display: none !important; }
.actions { align-items: flex-start; }

.grid { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.grid th { text-align: left; font-weight: 500; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--rule); padding: .4rem .5rem; }
.grid td { padding: .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.rates { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .75rem 0; }
.money { display: flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; }
.money input { width: 8rem; margin: 0; text-align: right; }
#prices, #catalogue, #software { margin-bottom: 1.25rem; }

#trials { margin-bottom: 1.25rem; }
.backstore { margin-top: 0; }

.spaced { margin-top: 1.5rem; }
.quote { white-space: pre-wrap; border-left: 3px solid var(--rule); padding-left: .75rem; margin: .5rem 0; }
#suggestions { margin-bottom: 1.25rem; }

.code-entry { margin: 0 0 1rem; }
.code-entry h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.next { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.next li { display: flex; gap: .6rem; align-items: flex-start; }

.print-only { display: none; }
@media print {
  .top, .bar, #message, h1, .lede, dialog { display: none; }
  .order:not(.print-this) { display: none; }
  .print-this { border: 0; box-shadow: none; padding: 0; }
  .print-this .print-only { display: block; font-weight: 600; margin: 0 0 1rem; }
  .print-this .delivery, .print-this button, .print-this summary .state { display: none; }
}

.warning { background: #FFF6E5; border: 1px solid #E8C873; border-radius: 6px; padding: .6rem .8rem; margin: 0 0 1rem; }
.change-line { padding: .6rem 0; border-top: 1px solid var(--rule); }
.change-line input[type=text], .change-line input:not([type]) { max-width: 9rem; }
.confirm-change { background: var(--surface); }
.inline { display: inline-flex; gap: .3rem; align-items: center; font-weight: 400; }

#orders-area { display: grid; gap: 1rem; margin: 0 0 1rem; }
#transactions h2 { margin: 0 0 .6rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.tile { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); font: inherit; }
.tile strong { font-size: 1.5rem; }
button.tile { cursor: pointer; }
button.tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.txn-wrap { overflow-x: auto; }
.txn { width: 100%; border-collapse: collapse; }
.txn th, .txn td { text-align: left; padding: .5rem .6rem; border-top: 1px solid var(--rule); vertical-align: top; }
.txn th { font-size: .85rem; color: var(--ink-2); border-top: 0; }
.txn .num { text-align: right; white-space: nowrap; }
.txn tr.selected td { background: #F1F8FB; }
.tag.warn { margin-left: .4rem; }
#nav .tag { margin-left: .4rem; }          /* the counts on the navigation tabs (D195, D329) */
.stepper { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin: 0 0 .6rem; }
.txn td:first-child { white-space: nowrap; }
.txn.sortable th .link-row { font: inherit; font-weight: 600; color: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.txn td:first-child .link-row { display: block; width: auto; text-align: left; padding: 0; border: 0; }       /* in a table the cell has the padding and the row has the rule: the name sits on the row's line like the other columns */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: .6rem 0; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-family: "Roboto Mono", monospace; }
.uid { margin: .6rem 0; }
.uid label { display: inline-flex; gap: .5rem; align-items: center; }
.uid input { width: 26rem; max-width: 100%; font-family: "Roboto Mono", monospace; }

.backtabs { flex-wrap: wrap; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--ground); z-index: 2; }
.backtabs .tab { padding: .45rem .8rem; }

/* the calibration list: closed rows grouped by section (shop and store front) */
.callist-tools { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.callist-tools input { flex: 1 1 16rem; }
.callist-note { margin: 0 0 .5rem; }
.calsection { border: 1px solid var(--rule); border-radius: 8px; margin: 0 0 .5rem; background: var(--surface); }
.calsection > summary { display: flex; gap: .75rem; align-items: baseline; padding: .65rem .9rem; cursor: pointer; font-weight: 600; list-style: none; }
.calsection > summary::-webkit-details-marker { display: none; }
.calsection > summary .name { flex: 1 1 auto; }
.calsection .calrow:last-child { border-bottom: 0; }
.calsection .calrow { margin: 0 .9rem; }
.calrow { border-bottom: 1px solid var(--rule); }
.calrow summary { display: flex; gap: .75rem; align-items: baseline; padding: .55rem .2rem; cursor: pointer; list-style: none; }
.calrow summary::-webkit-details-marker { display: none; }
.calrow summary::before { content: "\25B8"; color: var(--muted); }
.calrow[open] summary::before { content: "\25BE"; }
.calrow .name { flex: 1 1 auto; font-weight: 500; }
.calrow .part { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.calrow .count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.calrow .picked { font-size: .8rem; padding: .05rem .5rem; border-radius: 99px; background: var(--fill); color: var(--fill-ink); white-space: nowrap; }
.calbody { padding: .2rem .2rem .8rem 1.4rem; }
.compact { padding: .8rem 1rem; margin: 0 0 .8rem; }
.compact h2, .compact h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.compact .row { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.callist-tools select { flex: 0 0 auto; max-width: 18rem; }
.cons .n { margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.cons .row { display: flex; gap: .5rem; align-items: baseline; }

/* the shop: what each file is, three tabs, and a quiet footer (D67) */
.shoptabs { margin: 0 0 .75rem; }
#video-holder:not(:empty) { margin-bottom: 1.5rem; }
#panel-licences #video-holder:not(:empty) { margin-bottom: .75rem; }
#panel-licences .card + .card { margin-top: .75rem; }   /* the licences tab: the introduction video, the seats and the upgrades are three cards one under another (D244) */
.foot { max-width: 74rem; margin: 2rem auto 1rem; padding: 0 1rem; font-size: .9rem; color: var(--muted, #5b6770); }
.foot .language { display: inline-block; margin-left: 1rem; }
.foot .language select { display: inline-block; width: auto; margin: 0 0 0 .25rem; padding: .15rem .4rem; font-size: .9rem; }
.top .language { display: inline-block; margin: 0; font-size: .9rem; color: #404040; }
.top .language select { display: inline-block; width: auto; margin: 0 0 0 .25rem; padding: .15rem .4rem; font-size: .9rem; }

/* how good each constituent is: a line of statistics and a fitted-against-reference plot (D68) */
.fit { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin: .1rem 0 .5rem 1.6rem; font-size: .88rem; color: var(--ink-2, #404040); }
.fit .stats { font-family: var(--font-mono); }
.fit .stats .muted { font-family: inherit; font-size: .82rem; margin-top: .25rem; }
.fit-legend { margin: .25rem 0 .5rem; }
.fitbox { flex: 0 0 10rem; width: 10rem; }
@media (max-width: 40rem) { .fit { flex-direction: column; } .fitbox { flex-basis: auto; } }
.fitplot { width: 100%; height: auto; display: block; }
/* the plot grows to twice its size under the pointer (or when focused with the keyboard or tapped), out from its top right corner, so its numbers can be read (D184) */
.fitbox { position: relative; }
.fitbox:hover, .fitbox:focus { z-index: 10; }
.fitbox:hover .fitplot, .fitbox:focus .fitplot { transform: scale(2); transform-origin: top right; background: #fff; border-radius: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / 22%); }
@media (prefers-reduced-motion: no-preference) { .fitplot { transition: transform .12s ease-out, box-shadow .12s; } }
@media (max-width: 40rem) { .fitbox:hover .fitplot, .fitbox:focus .fitplot { transform-origin: top left; } }
.fitplot .frame { fill: #fff; stroke: #c9ced3; stroke-width: 1; }
.fitplot .ideal { stroke: #9aa4ad; stroke-width: 1; stroke-dasharray: 4 3; }
.fitplot .pt { fill: #00658C; fill-opacity: .55; }
.fitplot .tick { font-size: 9px; fill: #5b6770; font-family: var(--font-mono); }
.cons.fitted { grid-template-columns: 1fr; gap: .1rem 0; }
.cons.fitted > li { border-bottom: 1px solid var(--rule); padding-bottom: .25rem; }

/* the applications sheet: a short note under a constituent, closed until opened, and the category's intro above the list (D216) */
.cons-desc { margin: .05rem 0 .25rem 1.6rem; font-size: .85rem; }
.app-intro { margin: .25rem 0 .5rem; padding: .5rem .75rem; border-left: 3px solid var(--rule); font-size: .92rem; }
.app-intro p { margin: .15rem 0 0; }
.app-note { margin: .1rem 0 .4rem 1.6rem; font-size: .88rem; color: var(--ink-2, #404040); max-width: 46rem; }
/* In the many-column list an opened note takes the whole row, or it is read in a 13rem column. */
.cons > li:has(> .app-note[open]) { grid-column: 1 / -1; }
.app-note summary { cursor: pointer; }
.app-note p { margin: .3rem 0; }
.app-note ul { margin: .2rem 0 .2rem 1.1rem; padding: 0; }

/* a phone: the basket is below the list, so a bar stays on screen with the total and a way to it (D71) */
.basketbar { display: none; }
@media (max-width: 52rem) {
  .basketbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: .75rem; align-items: center; justify-content: space-between;
    padding: .6rem 1rem; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); }
  .basketbar[hidden] { display: none; }
  .shop { padding-bottom: 4.5rem; }
}

/* the instruments and licences page: a code that is easy to read and copy, and the manual route kept out of the way (D73) */
.codeline { margin: .5rem 0; padding: .6rem .8rem; background: var(--accent-2, #eaf4f8); border-radius: 6px; }
.bigcode.inline { display: inline-block; margin: 0 .25rem; padding: .15rem .5rem; font-size: 1.25rem; user-select: all; }
.manual { margin: 1rem 0; }
.manual summary { cursor: pointer; font-weight: 600; }

/* The shop's front: a grid of category tiles, each a pale block with a brand-blue pictogram, its name and its count (category-art.js). Five or so to a row where there is room. */
.cat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; margin: .5rem 0 .75rem; }
.cat-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .15rem; padding: 0; text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.cat-tile:hover, .cat-tile:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cat-art { display: flex; align-items: center; justify-content: center; height: 5.75rem; background: var(--accent-2); color: var(--brand); }
.cat-art svg { width: 4.1rem; height: 4.1rem; }
.cat-name { padding: .45rem .7rem 0; font-weight: 600; line-height: 1.2; }
.cat-count { padding: 0 .7rem .7rem; color: var(--muted); font-size: .85rem; }
.cat-picked { position: absolute; top: .4rem; right: .4rem; background: var(--good-2); color: var(--good); border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; font-weight: 600; }
.cat-back { font-weight: 600; }
.cat-all { margin: 0 0 .75rem; }
/* Twenty categories: five to a row, four where the basket sits beside the list on a narrower screen, two on a phone, so the rows come out even. */
@media (min-width: 52.01rem) and (max-width: 72rem) { .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact-sales { margin-top: .6rem; }
.contact-sales .panel textarea { margin-bottom: .6rem; }

fieldset.instrument { border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .8rem .2rem; margin: 0 0 .9rem; }
fieldset.instrument legend { font-weight: 500; padding: 0 .3rem; }
input[type=date] { display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }

label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
label.check input[type=radio], label.check input[type=checkbox] { margin: 0; }
/* The Cloudflare Turnstile widget (D170): drawn full width of the form, and only taking room when it has something to show (it can stay invisible until it needs the visitor). */
.human-check { max-width: 100%; }
.human-check:not(:empty) { margin: 0 0 .9rem; min-width: 0; }
.human-check iframe { max-width: 100%; }
/* The staff list: one compact line a person (a long list stays short), buttons small and on the same line. */
.people td { padding: .3rem .5rem; vertical-align: middle; }
.people .when { white-space: nowrap; }
.people td.actions { white-space: nowrap; text-align: right; }
.people td.actions button + button { margin-left: .4rem; }
.people button { padding: .2rem .6rem; font-size: .9rem; }

/* One footer rule (D188): links in a row, and on the sign-in page the language menu sits right under the card. */
.foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.foot .language { margin-left: 0; }
.foot-links { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.foot-links a[hidden] { display: none; }
.sign-in-foot { max-width: 26rem; margin: -1rem auto 1.5rem; justify-content: center; }
.new-here { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); }

/* The shop's file explainer: one line a person can read at a glance, the two cards behind it. */
.file-help-box { margin: 0 0 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.file-help-box > summary { display: flex; flex-wrap: wrap; gap: .15rem 1rem; align-items: baseline; padding: .6rem .9rem; cursor: pointer; }
.file-help-box .what { font-weight: 600; }
.file-help-box .prices { color: var(--ink-2); font-size: .92rem; }
.file-help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 .75rem .25rem; }
.file-help-cards h2 { font-size: 1.02rem; margin: 0 0 .25rem; }
.file-help-cards p { margin: 0 0 .35rem; }
@media (max-width: 40rem) { .file-help-cards { grid-template-columns: 1fr; } }
.bar-label { color: var(--muted); margin-right: .25rem; }

/* The Software and licences page: the UCal 5 to take is the first thing, large, with the three steps under it and where the licences stand beside it. */
.hero { padding: 1.5rem; margin: 0 0 1.5rem; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.hero-main h2 { font-size: 1.9rem; margin: .1rem 0 .5rem; }
.hero .eyebrow { margin: 0; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.hero .button.big { display: inline-block; margin: .9rem 0 .75rem; padding: .85rem 2.2rem; font-size: 1.15rem; }
.hero details.check { margin: .35rem 0 0; }
.hero details.check summary { cursor: pointer; color: var(--ink-2); }
.hero .hash { display: block; margin-top: .25rem; word-break: break-all; font-size: .8rem; }
.code-box { margin: .9rem 0 .5rem; padding: .85rem 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface-2); max-width: 34rem; }
.code-box .actions { display: flex; gap: .5rem; margin: .4rem 0; flex-wrap: wrap; }
.code-box input { flex: 1 1 14rem; min-width: 0; padding: .55rem .7rem; font-family: var(--font-mono); letter-spacing: .06em; }
.code-box .code-from { margin: .25rem 0 0; }
.hero .state-line#activation-done { margin: .9rem 0 0; }
.download-held { margin: .5rem 0 .75rem; }
.download-held button.big { padding: .85rem 2.2rem; font-size: 1.15rem; }
.download-held p { margin: .35rem 0 0; }
.hero-activation { padding: 1rem 1.1rem; background: var(--accent-2, #eaf4f8); border-radius: 8px; }
.hero-activation h3 { margin: 0 0 .35rem; font-size: 1rem; }
.hero-activation p { margin: 0 0 .4rem; }
.hero-activation .state-line { font-weight: 600; }
.hero-activation .state-line.on { color: var(--good); }
.hero-steps { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1.25rem; list-style: none; padding-left: 0; }
.hero-steps li { display: flex; gap: .6rem; align-items: flex-start; }
@media (max-width: 52rem) {
  .hero { padding: 1.1rem; }
  .hero-top { grid-template-columns: 1fr; gap: 1rem; }
  .hero-main h2 { font-size: 1.5rem; }
  .hero .button.big { display: block; text-align: center; }
  .download-held button.big { width: 100%; }
  .hero-steps { grid-template-columns: 1fr; }
}

/* The Instruments page: the Computer ID's technical name as a quiet hint, where to find it, and the register form folded away once there is an instrument. */
.hint { color: var(--muted); font-weight: 400; }
.where, .add-another { margin: .25rem 0 .75rem; }
.where summary, .add-another summary { cursor: pointer; color: var(--ink-2); }
.add-another > summary { font-weight: 600; margin-bottom: .5rem; }
@media (max-width: 40rem) { .cat-art { height: 4rem; } .cat-art svg { width: 2.9rem; height: 2.9rem; } }
.basketbar button { white-space: nowrap; flex: none; }

/* A system admin looking at a customer's storefront, read only (D242): a bar that stays on screen, and the buttons that would change something held. */
.look-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .5rem 1rem; background: var(--warn-2); color: var(--ink); border-bottom: 2px solid var(--warn); }
.look-text { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.look-bar button { min-height: 44px; }
a.button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.foot .copyright { flex-basis: 100%; margin: 0; font-size: .8rem; }
.sign-in-foot .copyright { text-align: center; }

/* A quote for a customer (D321) */
.cq-adder { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .6rem; }
.cq-adder label { display: flex; flex-direction: column; font-size: .85rem; }
.cq-lines { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cq-lines th, .cq-lines td { padding: .4rem .35rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.cq-lines .num { text-align: right; white-space: nowrap; }
.cq-lines .mono, .mono { font-family: "Roboto Mono", monospace; font-size: .85rem; overflow-wrap: anywhere; }
.cq-lines .cq-discount td { font-weight: 600; }
.cq-number { font-size: 1.6rem; margin: .2rem 0 .8rem; overflow-wrap: anywhere; }
.pre { white-space: pre-line; }