/* Additions for the server-rendered pages. Colours, spacing and radii come from tokens.css. */
.inline-form { display: inline-flex; margin: 0; }
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); }
.login__card { width: min(440px, 100%); display: grid; gap: var(--sp-5); }
.login__tools { position: fixed; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); display: flex; gap: var(--sp-2); z-index: 2; }
.form { display: grid; gap: var(--sp-4); }
.form .btn { width: 100%; }
.input--code { font-family: var(--font-mono); font-size: 22px; letter-spacing: .3em; text-align: center; direction: ltr; }
.qr { display: grid; place-items: center; gap: var(--sp-3); }
.qr img { width: 220px; height: 220px; background: #fff; padding: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border-strong); }
.qr code, .codes li { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.qr code { font-size: 13px; word-break: break-all; text-align: center; padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border-radius: var(--r-sm); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.codes li { padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-sm); text-align: center; font-size: 15px; }
.stack { display: grid; gap: var(--sp-4); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.callout ul { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); list-style: disc; }
.muted { color: var(--text-2); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); align-items: start; }
.facts { display: grid; gap: var(--sp-3); }
.facts div { display: flex; justify-content: space-between; gap: var(--sp-4); border-block-end: 1px solid var(--border); padding-block-end: var(--sp-2); }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.pager { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.filters { padding: 0 var(--sp-5) var(--sp-4); overflow-x: auto; display: flex; gap: var(--sp-2); }
.filters a { white-space: nowrap; }
.filters a[aria-current="true"] { --btn-bg: var(--primary-soft); --btn-bd: var(--primary); }