/* /Components/AccountUnavailableComponent.razor.rz.scp.css */
/*
    The full page, because there is no shell around it — see the markup for why. Centred rather
    than pinned to the top: nothing else is on screen to align with.
*/

.lk-account-unavailable[b-bt6d9d6slw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--lk-space-4);
    /* The same ground the shell paints, so this does not read as a different application. Both
       shells render this inside ThemeProvider, so the token is always there and needs no
       fallback (#920). */
    background: var(--lk-canvas);
}

/* The whole page is this one message, so the empty state's 380px column, sized for a card, only
   breaks a two-sentence body over three lines. Uncapped here, it reads as one line where the
   screen is wide enough and still wraps on a phone (Martin, 2026-10-12). */
.lk-account-unavailable[b-bt6d9d6slw]  .lk-empty {
    max-width: none;
}
/* /Components/AgentLiveComponent.razor.rz.scp.css */
/* The view is the picture (Niklas 2026-10-16): the dialog is nearly the whole viewport
   (DialogWidth.Screen), the body is a column that fills it, and this row fills the body. */
.agent-live-screens[b-ta40zzhl1g] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--lk-space-3);
    justify-content: center;
    align-items: stretch;
}

/* One screen takes the whole width; two share it. Each is a column: the picture, then its caption. */
.agent-live-screen[b-ta40zzhl1g] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

/* A hidden screen stays hidden: the display above outranks the browser's own [hidden] rule, and the
   customer screen's empty panel showed on every device, single-screen cabinets too (BIL100,
   Niklas 2026-10-17). */
.agent-live-screen[hidden][b-ta40zzhl1g] {
    display: none;
}

/* The device's screen, live: portrait or landscape, and the dialog should not decide which. Fill
   the column and keep the aspect ratio, on the Prototype's soft navy behind the picture
   (app.css .agent-ov-media). A crosshair because clicking it drives the device. */
.agent-live-video[b-ta40zzhl1g] {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    background: var(--lk-navy-soft);
    object-fit: contain;
    cursor: crosshair;
    /* A thin frame so the screen reads against the surface in either theme (Niklas 2026-10-16):
       the card's own hairline, rounding and a light shadow, from the tokens. */
    box-sizing: border-box;
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    box-shadow: var(--lk-shadow-sm);
}

/* Watch only: the customer screen takes no clicks. */
.agent-live-video-customer[b-ta40zzhl1g] {
    cursor: default;
}

.agent-live-screen-caption[b-ta40zzhl1g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-1);
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
}

/* One large, one small: the large one has the row to itself; the other sits in the corner as a
   thumbnail, and a click on it swaps the two. */
.agent-live-screens-one .agent-live-screen-primary[b-ta40zzhl1g] {
    flex: 1 1 100%;
}

.agent-live-screens-one .agent-live-screen-thumb[b-ta40zzhl1g] {
    position: absolute;
    right: var(--lk-space-3);
    bottom: var(--lk-space-8);
    width: 22%;
    max-height: 38%;
    flex: none;
    padding: var(--lk-space-1);
    background: var(--lk-surface);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    box-shadow: var(--lk-shadow-lg);
    cursor: pointer;
}

.agent-live-screens-one .agent-live-screen-thumb .agent-live-video[b-ta40zzhl1g] {
    cursor: pointer;
}

.agent-live-screens-one .agent-live-screen-thumb .agent-live-screen-caption[b-ta40zzhl1g] {
    display: none;
}

/* The logs line in the dialog's footer, beside the buttons: what the download is doing (#1289). */
.agent-live-logs-status[b-ta40zzhl1g] {
    flex: 1;
    align-self: center;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
}
/* /Components/AgentSupportComponent.razor.rz.scp.css */
/* The Prototype draws this tab with inline styles throughout (BoxDetail.razor:499-576), and KeyboxSupportPage carried them until the kiosk shared them (2026-09-23) — a flex
   row for the status, a wrapping flex row of label-over-value pairs, and a wrapping row of
   buttons. The shapes are kept; the values come from tokens, because ADR 0003 and ADR 0005 keep
   colour and spacing out of component CSS. */

/* Status line: the badge and, beside it, how often the tablet is expected to check in. The
   interval is what makes "offline" mean something — three missed heartbeats of what? */
.agent-support-status[b-1518skw0um] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.agent-support-heartbeat[b-1518skw0um] {
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
}

/* A description list rather than the Prototype's divs: these are six label-value pairs, which is
   what dl is for, and it gives a screen reader the pairing without any ARIA. The Prototype's
   26px gap is the space-6 step. */
.agent-support-facts[b-1518skw0um] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-6);
    margin: 0 0 var(--lk-space-5);
}

/* The Prototype's label is <div class="dim" style="font-size:12px"> outside any .lrow, and .dim
   has a rule only under .lrow (app.css:163) — so on this card it inherits the body's --text, not
   the muted ink. What the reader sees is a dark 12px label over a semibold 14px value, and that
   is what is matched (structure agent against RNS10, 2026-09-23); the muted label v2 drew first
   followed the class name's intent rather than the rendered card. */
.agent-support-facts dt[b-1518skw0um] {
    color: var(--lk-text);
    font-size: var(--lk-font-size-label);
}

.agent-support-facts dd[b-1518skw0um] {
    margin: 0;
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

/* The payload has gone quiet: a check-in further back than a day. Colour is not the only carrier —
   the value itself is a date far in the past — so this is emphasis on a fact the text already
   states, which is the one way colour may be used alone. "Never checked in" is not marked: the
   Prototype draws it dark (structure agent against RNS10, 2026-09-23), and an app that has not
   reported yet is a different fact from one that has stopped. The repair loop (#1182) is marked the
   same way. Written under .agent-support-facts dd: the bare class lost to that rule's colour. */
.agent-support-facts dd.agent-support-alarm[b-1518skw0um] {
    color: var(--lk-err);
}

.agent-support-actions[b-1518skw0um] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
    align-items: center;
}

.agent-support-empty[b-1518skw0um] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-3);
}

/* The code for an agent waiting to be installed (#688), between the facts and the actions. */
.agent-support-install[b-1518skw0um] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.agent-support-lead[b-1518skw0um] {
    margin: 0;
    color: var(--lk-text-mut);
}

/* The installation code, read out over the phone to somebody standing at the cabinet. Big,
   spaced, and tabular so the digits line up and a 1 cannot be mistaken for a 7 at a glance. */
.agent-support-code[b-1518skw0um] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-stat);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--lk-text);
    font-variant-numeric: tabular-nums;
}

.agent-support-failure[b-1518skw0um] {
    margin: 0;
    color: var(--lk-err);
    font-size: var(--lk-font-size-caption);
}

/* The snapshot is a tablet's screen, portrait or landscape, and the dialog should not decide
   which. Fit inside it and keep the aspect ratio. */
.agent-support-snapshot[b-1518skw0um] {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    /* The Prototype draws the device's picture square-cornered (app.css .agent-ov-media); it is
       a screen of any shape, and a tile's percentage would round it into an ellipse (#563). */
}

.agent-support-hint[b-1518skw0um] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
    text-align: center;
}



/* The open window's facts: USB, network, keys — the card's own facts list (label over value,
   the same step between pairs), without the list's bottom margin, since it sits inside the row. */
.agent-support-usb-debugging-details[b-1518skw0um] {
    margin: var(--lk-space-2) 0 0;
}

/* The open window's status line: the badge and the way to close it, side by side, as the card's
   status line draws its badge beside its facts. */
.agent-support-usb-debugging-status[b-1518skw0um] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-1);
}


/* The window chooser's own width (#1292): the select belongs to Select's markup, so ::deep, and
   without a width the frame with a hidden label is the arrow alone. Wide enough for "60 minuter"
   in every language, no wider.

   Measured in the value's own font rather than fixed, as PaginationComponent's page-size picker
   is: Select lays the native select over its frame, so the text never sizes the box, and a width
   in rem does not follow the padding as the density changes (ADR 0007 point 9, #1437). The
   longest option is Finnish "60 minuuttia", 88.7px or 9.4ch in Inter at Select's 0.938rem
   (canvas, 2026-10-27); 11ch leaves room for the frame's border. The font is set here only so
   that ch resolves in that font, and the two spaces are Select's left padding and chevron room. */
.agent-support-usb-debugging-row[b-1518skw0um]  .lk-select {
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    width: calc(11ch + var(--lk-space-4) + var(--lk-space-10));
}

/* ── Live support ───────────────────────────────────────── */


.agent-support-hint-left[b-1518skw0um] {
    margin: 0;
    text-align: left;
}

/* The live view's video is AgentLiveComponent's, and its rule went with it (#804). */

/* The release's explanation, one paragraph in the dialog. */
.agent-support-release-text[b-1518skw0um] {
    margin: 0;
    line-height: var(--lk-line-height-body);
}

/* What a release costs in unsent events, under the explanation (#1577). */
.agent-support-release-warning[b-1518skw0um] {
    margin-top: var(--lk-space-3);
}

/* ── The card's parts (Niklas 2026-10-16) ──────────────── */

/* Actions and settings as sections with a small heading each, so the card reads top to bottom:
   what the device is, what you can do, what it is set to. */
.agent-support-section[b-1518skw0um] {
    margin-top: var(--lk-space-5);
}

.agent-support-heading[b-1518skw0um] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

/* The actions' feedback sits under the buttons, not at the foot of the card. */
.agent-support-section > .agent-support-hint[b-1518skw0um],
.agent-support-section > .agent-support-failure[b-1518skw0um],
.agent-support-section[b-1518skw0um]  > .lk-notice {
    margin-top: var(--lk-space-3);
}

/* The settings: one row per setting, the words on the left and the control on the right, a
   hairline between rows — the shape the reminder switches and the settings pages use. */
.agent-support-settings[b-1518skw0um] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.agent-support-setting[b-1518skw0um] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.agent-support-setting-text[b-1518skw0um] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    min-width: 0;
    flex: 1;
}

.agent-support-setting-title[b-1518skw0um] {
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.agent-support-setting-note[b-1518skw0um] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* "Sent — confirmed when the device checks in": the one line that is about now, not about the setting. */
.agent-support-setting-status[b-1518skw0um] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

.agent-support-setting-control[b-1518skw0um] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lk-space-3);
    flex: none;
}

/* Under 40rem the control drops under its words rather than squeezing them. */
@media (max-width: 40rem) {
    .agent-support-setting[b-1518skw0um] {
        flex-direction: column;
        align-items: stretch;
    }

    .agent-support-setting-control[b-1518skw0um] {
        justify-content: flex-start;
    }
}

/* Under the adb connect line: how the first computer gets in (lyker-agent!61). */
.agent-support-usb-debugging-hint[b-1518skw0um] {
    margin: var(--lk-space-1) 0 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
}
/* /Components/Avatar.razor.rz.scp.css */
.lk-avatar[b-qhpphv986s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--lk-avatar-size);
    height: var(--lk-avatar-size);
    border-radius: var(--lk-radius-pill);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: calc(var(--lk-avatar-size) * 0.36);
    letter-spacing: 0.0125em;
    user-select: none;
}

.lk-avatar-neutral[b-qhpphv986s] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.lk-avatar-accent[b-qhpphv986s] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}
/* /Components/BackLink.razor.rz.scp.css */
/* The Prototype's BackLink (Components/Ui/BackLink.razor): 13px semibold secondary text, a 16px
   chevron, and 12px to the title below. Its chevron sits on the column's edge — no padding pushing
   it in — so the link lines up with the eyebrow and title under it.

   Block-level but only as wide as its content (`width: fit-content`), so the space below belongs to
   the link itself and no page needs a wrapper row to hold it apart from the header. */
.lk-back-link[b-s66yuegs38] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-1);
    width: fit-content;
    margin-bottom: var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
    text-decoration: none;
    border-radius: var(--lk-radius-sm);
    transition: color var(--lk-transition);
}

/* Colour only, as in the Prototype. The earlier copies drew a filled pill on hover, and a pill needs
   padding — which is what had pushed the text off the column edge. */
.lk-back-link:hover[b-s66yuegs38] {
    color: var(--lk-ink);
}

/* Keyboard focus stays visible: this is the way off a form, and it sits among other controls. */
.lk-back-link:focus-visible[b-s66yuegs38] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}
/* /Components/Badge.razor.rz.scp.css */
.lk-badge[b-4d36yz96f1] {
    /* A badge is a word or two on one line; squeezed, it moves as a whole (2026-10-16). */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    min-height: 1.5rem;
    padding: var(--lk-space-0-5) var(--lk-space-3);
    border-radius: var(--lk-radius-pill);
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-badge);
    line-height: 1.3;
}

.lk-badge[b-4d36yz96f1]  .lk-badge-icon {
    flex: 0 0 auto;
}

.lk-badge-dot[b-4d36yz96f1] {
    flex: 0 0 auto;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--lk-radius-pill);
    background: currentColor;
}

.lk-badge-neutral[b-4d36yz96f1] {
    background: var(--lk-navy-soft);
    color: var(--lk-text-sec);
}

.lk-badge-ok[b-4d36yz96f1] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.lk-badge-warn[b-4d36yz96f1] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.lk-badge-error[b-4d36yz96f1] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.lk-badge-info[b-4d36yz96f1] {
    background: var(--lk-info-soft);
    color: var(--lk-info);
}

.lk-badge-accent[b-4d36yz96f1] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}
/* /Components/BankIdGlyph.razor.rz.scp.css */
/*
    The box is the logo plus BankID's clear zone (the viewBox is cropped to it), 1.05 wide for
    every 1 high. Never under 40 px high (2.5rem): below that the word cannot be read.
*/
.lk-bankid[b-1pzepbe9xq] {
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 370.5 / 353.3;
}

/* In a button: 40 px, with room above and below so the button stands 56 px tall. */
.lk-bankid-button[b-1pzepbe9xq] {
    height: 2.5rem;
    margin-block: var(--lk-space-2);
}

/* In a row beside its label, such as the licence card: 40 px and no extra room. */
.lk-bankid-row[b-1pzepbe9xq] {
    height: 2.5rem;
}

/* On its own, above a heading: the QR view, waiting, switched off. */
.lk-bankid-standalone[b-1pzepbe9xq] {
    height: 3.5rem;
}
/* /Components/BankIdSigningDialog.razor.rz.scp.css */
.signing-veil[b-dcnweu6if9] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lk-space-4);
    background: var(--lk-scrim);
}

/* Only the panel is the dialog's own; what is inside it is BankIdWaitingComponent's (#768). */
.signing-panel[b-dcnweu6if9] {
    width: min(25rem, 100%);
    max-height: 100%;
    padding: var(--lk-space-6);
    overflow-y: auto;
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-lg);
}
/* /Components/BankIdWaitingComponent.razor.rz.scp.css */
/*
    LoginPage's waiting block, moved here with the markup (#746); the sign-in screen's own copy
    went when it moved onto this component (#768).
*/

.lk-bankid-waiting[b-cgy6hmu1nw] {
    text-align: center;
}

.lk-bankid-waiting-mark[b-cgy6hmu1nw] {
    display: flex;
    justify-content: center;
    margin: 0 auto var(--lk-space-6);
}

.lk-bankid-waiting-title[b-cgy6hmu1nw] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.lk-bankid-waiting-intro[b-cgy6hmu1nw] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/*
    The code brings its own white ground and quiet zone — it is a PNG — so only the frame is
    styled. Nothing that tints or inverts the image: a recoloured code is one a phone gives up on.
*/
.lk-bankid-waiting-qr[b-cgy6hmu1nw] {
    display: block;
    width: 12.25rem;
    height: auto;
    margin: var(--lk-space-5) auto 0;
    padding: var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
}

.lk-bankid-waiting-device[b-cgy6hmu1nw] {
    margin-top: var(--lk-space-5);
}

.lk-bankid-waiting-status[b-cgy6hmu1nw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-6) 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    text-align: center;
}
/* /Components/Button.razor.rz.scp.css */
.lk-button[b-l9e0sq8dmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    box-sizing: border-box;
    border-radius: var(--lk-radius-control);
    border: var(--lk-border-width) solid transparent;
    font-family: var(--lk-font-ui);
    font-weight: 600;
    letter-spacing: 0.00625em;
    cursor: pointer;
    user-select: none;
    /* The label may wrap in a language with longer words — Finnish especially — but the
       button must not collapse. Height grows instead of text being cut off (ADR 0002). */
    text-align: center;
    transition: background var(--lk-transition), border-color var(--lk-transition), color var(--lk-transition), box-shadow var(--lk-transition);
}

.lk-button-label[b-l9e0sq8dmx] {
    min-width: 0;
    /* A button's words stay on one line; a toolbar that runs out of room wraps whole buttons. */
    white-space: nowrap;
}

.lk-button-full[b-l9e0sq8dmx] {
    display: flex;
    width: 100%;
}

/* Square, with the padding removed so the icon sits in the middle. */
.lk-button-icon-only[b-l9e0sq8dmx] {
    padding: 0;
    aspect-ratio: 1;
}

.lk-button-icon-only.lk-button-small[b-l9e0sq8dmx] {
    width: var(--lk-control-height-sm);
}

.lk-button-icon-only.lk-button-medium[b-l9e0sq8dmx] {
    width: var(--lk-control-height-md);
}

.lk-button-icon-only.lk-button-large[b-l9e0sq8dmx] {
    width: var(--lk-control-height-lg);
}

/* ── Sizes ──────────────────────────────────────────────── */

.lk-button-small[b-l9e0sq8dmx] {
    min-height: var(--lk-control-height-sm);
    padding: 0 var(--lk-control-padding-sm);
    font-size: var(--lk-font-size-label);
}

.lk-button-medium[b-l9e0sq8dmx] {
    min-height: var(--lk-control-height-md);
    padding: 0 var(--lk-control-padding-md);
    font-size: var(--lk-font-size-ui);
}

.lk-button-large[b-l9e0sq8dmx] {
    min-height: var(--lk-control-height-lg);
    padding: 0 var(--lk-control-padding-lg);
    font-size: 0.969rem;
}

/* ── Variants ───────────────────────────────────────────── */

.lk-button-primary[b-l9e0sq8dmx] {
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    border-color: var(--lk-navy);
}

.lk-button-primary:hover:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-navy-hover);
    border-color: var(--lk-navy-hover);
}

.lk-button-accent[b-l9e0sq8dmx] {
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
    border-color: var(--lk-magenta);
}

.lk-button-accent:hover:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-magenta-hover);
    border-color: var(--lk-magenta-hover);
}

.lk-button-secondary[b-l9e0sq8dmx] {
    background: var(--lk-surface);
    color: var(--lk-ink);
    border-color: var(--lk-line-strong);
}

.lk-button-secondary:hover:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-surface-alt);
}

.lk-button-secondary:active:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-sunken);
}

.lk-button-ghost[b-l9e0sq8dmx] {
    background: transparent;
    color: var(--lk-ink);
    border-color: transparent;
}

.lk-button-ghost:hover:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-ghost-hover);
}

.lk-button-ghost:active:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-sunken);
}

.lk-button-danger[b-l9e0sq8dmx] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
    border-color: transparent;
}

.lk-button-danger:hover:not(:disabled)[b-l9e0sq8dmx],
.lk-button-danger:active:not(:disabled)[b-l9e0sq8dmx] {
    background: var(--lk-err);
    /* On the solid error surface the label flips to the color that pairs with a strong
       fill, which is the same one the accent button uses. */
    color: var(--lk-magenta-contrast);
}

/* The confirmation the Save button turns into for a moment: the Danger button's shape in the
   confirmation colours. Not pressed in that state, so no hover of its own. */
.lk-button-success[b-l9e0sq8dmx] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
    border-color: transparent;
}

/* ── States ─────────────────────────────────────────────── */

/* focus-visible rather than focus: the keyboard user needs the ring, the mouse user
   should not get one after every click (ADR 0007). */
.lk-button:focus-visible[b-l9e0sq8dmx] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-button:disabled[b-l9e0sq8dmx] {
    opacity: 0.45;
    cursor: not-allowed;
}

.lk-button[aria-busy="true"][b-l9e0sq8dmx] {
    /* Waiting is not the same as unavailable, so it keeps full contrast. */
    opacity: 1;
    cursor: progress;
}
/* /Components/Card.razor.rz.scp.css */
.lk-card[b-27ecwn1k71] {
    box-sizing: border-box;
    background: var(--lk-surface);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    box-shadow: var(--lk-shadow-sm);
}

.lk-card-padded[b-27ecwn1k71] {
    padding: var(--lk-space-5);
}

.lk-card-elevated[b-27ecwn1k71] {
    box-shadow: var(--lk-shadow-md);
}
/* /Components/CardHeader.razor.rz.scp.css */
/*
    The design's .card-head: a row across the top of a card, with a rule under it.

    It reaches the card's edges, so the card it sits in must be Card Padded="false" and the
    card's body must carry its own padding. That is how the design builds these — .card without
    .pad, a head with its own padding, a body with its own — and it is what makes the rule span
    the full width instead of stopping short of it.
*/
.lk-card-head[b-m6teou5kwl] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);

    /* The box an action may stretch its target over, so a whole head can be the control while
       the action stays the one element that is focused. FieldGroupComponent's collapsible toggle
       does that (#759); a head's rule and padding are unaffected. */
    position: relative;
}

/* Even vertical padding, 16px 20px, as the Prototype draws its card heads everywhere but one
   screen (ADR 0063, #686): BoxDetail, KioskDetail, NewLoan and PartnerDetail inline `16px 20px`,
   FieldGroup and the settings and detail cards `15px 20px`, which the spacing scale (#528) makes
   16. Its shared `.card-head` class is `16px 20px 14px`, but only the start page uses it — this
   was 16/20/12 after that class until 2026-09-25, 4px shorter than every other head.

   Only when the head pads itself — inside an already-padded card it would be padding twice. */
.lk-card-head-inset[b-m6teou5kwl] {
    padding: var(--lk-space-4) var(--lk-space-5);
}

/* Space under a head that has no rule and no padding of its own, so the body does not start
   against the heading. */
.lk-card-head:not(.lk-card-head-inset)[b-m6teou5kwl] {
    margin-bottom: var(--lk-space-4);
}

.lk-card-head-divided[b-m6teou5kwl] {
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

/*
    15.5px in the design, not the 26px a page title takes. line-height: normal rather than the
    body's 1.6 for the reason the overview's panel heading records: 1.6 made the row taller than
    the design's and put the whole header block on a different rhythm.
*/
/* The text block takes the row's spare width, so title and subtitle stack while the icon and
   the actions keep their size. */
.lk-card-head-text[b-m6teou5kwl] {
    flex: 1;
    min-width: 0;
}

.lk-card-head-title[b-m6teou5kwl] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-card-title);
    line-height: normal;
    color: var(--lk-ink);
}

.lk-card-head-subtitle[b-m6teou5kwl] {
    margin: var(--lk-space-1) 0 0;
    font-size: var(--lk-font-size-label);
    line-height: normal;
    color: var(--lk-text-sec);
}

/* Aligns with the title rather than the middle of a two-line text block. */
.lk-card-head:has(.lk-card-head-subtitle)[b-m6teou5kwl] {
    align-items: flex-start;
}

/* The icon takes the row's colour by default; the tone below overrides it. */
.lk-card-head-icon[b-m6teou5kwl] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--lk-ink);
}

.lk-card-head-icon-accent[b-m6teou5kwl] {
    color: var(--lk-magenta-ink);
}

.lk-card-head-actions[b-m6teou5kwl] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    flex: 0 0 auto;
}
/* /Components/ChangeDueDialog.razor.rz.scp.css */
/* The due-date dialog (loans package MR 3): the return dialog's summary list, then the fields. */

.loan-due-summary[b-osej4hifny] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lk-space-2) var(--lk-space-4);
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.loan-due-summary dt[b-osej4hifny] {
    color: var(--lk-text-sec);
}

.loan-due-summary dd[b-osej4hifny] {
    margin: 0;
    font-weight: 600;
    color: var(--lk-text);
}

.loan-due-fields[b-osej4hifny] {
    display: grid;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-5);
}

.loan-due-error[b-osej4hifny] {
    margin: var(--lk-space-4) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* The quick picks, a row of small ghost buttons under the field. */
.loan-due-picks[b-osej4hifny] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}
/* /Components/Checkbox.razor.rz.scp.css */
.lk-checkbox[b-r7a4xajjzv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--lk-checkbox-size);
    height: var(--lk-checkbox-size);
    padding: 0;
    background: var(--lk-surface);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-checkbox);
    cursor: pointer;
    transition: background var(--lk-transition), border-color var(--lk-transition);
}

.lk-checkbox-checked[b-r7a4xajjzv],
.lk-checkbox-mixed[b-r7a4xajjzv] {
    background: var(--lk-navy);
    border-color: var(--lk-navy);
}

.lk-checkbox:disabled[b-r7a4xajjzv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-checkbox:focus-visible[b-r7a4xajjzv] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-checkbox-dash[b-r7a4xajjzv] {
    width: 0.5625rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background: var(--lk-navy-contrast);
}

/* The tick belongs to the Icon component's markup, so reaching it needs ::deep. */
[b-r7a4xajjzv] .lk-checkbox-tick {
    color: var(--lk-navy-contrast);
}

/* ── The box with its label ─────────────────────────────── */

/*
    Rendered whether or not there is a label, so the component has one shape. With no label it
    contains the button alone and lays out exactly as the bare button did.
*/
.lk-checkbox-field[b-r7a4xajjzv] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
}

/*
    Clickable, so the words are part of the target the way a native label's are. The cursor says
    so, and the text does not select on a double click that was meant as two ticks.
*/
.lk-checkbox-text[b-r7a4xajjzv] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text);
    cursor: pointer;
    user-select: none;
}

/* Disabled is the button's state, and the label has to follow it or it invites a click that
   does nothing. :has so the rule stays with the box that owns the state. */
.lk-checkbox-field:has(.lk-checkbox:disabled) .lk-checkbox-text[b-r7a4xajjzv] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Dialog.razor.rz.scp.css */
/* The element itself is only the box. It carries no padding or background, so the panel
   inside can scroll while the header and footer stay put. */
.lk-dialog[b-iu68ykzdbk] {
    box-sizing: border-box;
    width: calc(100vw - var(--lk-space-8));
    max-height: calc(100vh - var(--lk-space-10));
    padding: 0;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.lk-dialog-narrow[b-iu68ykzdbk] {
    max-width: 24rem;
}

.lk-dialog-medium[b-iu68ykzdbk] {
    max-width: 32rem;
}

.lk-dialog-wide[b-iu68ykzdbk] {
    max-width: 48rem;
}

.lk-dialog-extra-wide[b-iu68ykzdbk] {
    max-width: 60rem;
}

/* Nearly the whole viewport (Niklas 2026-10-16, the live view): the box takes a fixed height so
   the body can grow to fill it, and the body lays its content out as a column that fills. */
.lk-dialog-screen[b-iu68ykzdbk] {
    width: 95vw;
    max-width: 95vw;
    height: 90vh;
    max-height: 90vh;
}

.lk-dialog-screen .lk-dialog-panel[b-iu68ykzdbk] {
    height: 100%;
}

.lk-dialog-screen .lk-dialog-body[b-iu68ykzdbk] {
    display: flex;
    flex-direction: column;
}

/* The theme's scrim, shared by every dimmed page in the portal. It is a token like any other
   colour (ADR 0003 point 3), and its two values are what keeps it reading as "behind" in both
   themes (#920). */
.lk-dialog[b-iu68ykzdbk]::backdrop {
    background: var(--lk-scrim);
}

.lk-dialog-panel[b-iu68ykzdbk] {
    display: flex;
    flex-direction: column;
    /* Inherited from the element, so the panel can never be taller than the viewport. */
    max-height: inherit;
    background: var(--lk-surface);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    box-shadow: var(--lk-shadow-lg);
}

.lk-dialog-head[b-iu68ykzdbk] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-4);
    flex: 0 0 auto;
    padding: var(--lk-space-5) var(--lk-space-5) var(--lk-space-4);
}

.lk-dialog-heading[b-iu68ykzdbk] {
    flex: 1;
    min-width: 0;
}

.lk-dialog-title[b-iu68ykzdbk] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title);
    line-height: var(--lk-line-height-tight);
    color: var(--lk-ink);
}

.lk-dialog-subtitle[b-iu68ykzdbk] {
    margin: var(--lk-space-2) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-mut);
}

.lk-dialog-head[b-iu68ykzdbk]  .lk-dialog-close {
    flex: 0 0 auto;
    /* Pulled back so the icon lines up with the panel's edge rather than the button's box. */
    margin: calc(var(--lk-space-1) * -1) calc(var(--lk-space-2) * -1) 0 0;
}

/* The only part that scrolls. A long form keeps its title and its buttons in view. */
.lk-dialog-body[b-iu68ykzdbk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--lk-space-5) var(--lk-space-5);
}

.lk-dialog-foot[b-iu68ykzdbk] {
    display: flex;
    /* Whole buttons drop to the next line on a narrow screen; a button's label never breaks
       (Button.razor.css, 2026-10-16). */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--lk-space-3);
    flex: 0 0 auto;
    padding: var(--lk-space-4) var(--lk-space-5);
    background: var(--lk-surface-alt);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: 0 0 var(--lk-radius-card) var(--lk-radius-card);
}

/* Narrow screens: the dialog sits at the bottom, where a thumb reaches, and gives up its
   bottom corners to sit flush with the edge. */
@media (max-width: 30rem) {
    .lk-dialog[b-iu68ykzdbk] {
        width: 100vw;
        max-width: none;
        max-height: 90vh;
        margin: auto auto 0;
    }

    .lk-dialog-panel[b-iu68ykzdbk] {
        border-radius: var(--lk-radius-card) var(--lk-radius-card) 0 0;
    }

    .lk-dialog-foot[b-iu68ykzdbk] {
        border-radius: 0;
    }
}
/* /Components/EmptyState.razor.rz.scp.css */
/*
    Two looks, chosen by where the empty state sits rather than by the caller (#529).

    - On the page background: the page-level one. The large solid navy tile and 18px heading, for a
      screen or a gate with nothing else on it.
    - Inside a Card: the in-card one. A dashed tile on the alternate surface and smaller type — the
      Prototype's own empty state. Its markup (es-tile, es-title, es-sub) is the only empty state
      the Prototype actually draws: 10 of 10, on Home, Partners, PartnerDetail and Settings, and
      every one inside a card. The large variant is defined in its app.css but drawn nowhere.

    Counted in v2 on 2026-09-28 before this change, the page-level look was drawn inside a card on
    every card-held empty state but the overview's three — the lists, the key tabs, the partner
    and settings cards, the shop — because the size was a parameter and only the overview set it.
    Reading the placement leaves no parameter to forget.

    The padding is the same in both: 48px 24px, the vertical 48 being what the Prototype renders
    for all ten (its two .empty-state rules collide and the later one's padding wins). #529 asked
    whether that was intended; the answer given was to follow the rest of the design, and the rest
    of the design is one rhythm. What is smaller in a card is the mark and the type.
*/

.lk-empty[b-c4mposjmk4] {
    max-width: 23.75rem;
    margin: 0 auto;
    padding: var(--lk-space-12) var(--lk-space-6);
    text-align: center;
}

.lk-empty-mark[b-c4mposjmk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto var(--lk-space-4);
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-text-sec);
}

.lk-empty-title[b-c4mposjmk4] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-title-sm);
    color: var(--lk-ink);
}

.lk-empty-body[b-c4mposjmk4] {
    margin: 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
    text-wrap: pretty;
}

.lk-empty-action[b-c4mposjmk4] {
    display: flex;
    justify-content: center;
    margin-top: var(--lk-space-5);
}

/* ── Inside a card ──────────────────────────────────────────
   The box spans the card, so the rule below reaches both edges as the rows' own rules do. The
   narrow centred column — 380px less the side padding — is kept on the text instead, so lines
   wrap where they did. */
.lk-card .lk-empty[b-c4mposjmk4] {
    max-width: none;
}

/* A padded card already brings 20px. Without this the text sat 68px from the card's top edge in a
   padded card and 48px in an unpadded one, which is most of why the portal's empty states looked
   like several designs. The same 48px 24px from the card's edge either way. */
.lk-card-padded .lk-empty[b-c4mposjmk4] {
    padding: calc(var(--lk-space-12) - var(--lk-space-5)) calc(var(--lk-space-6) - var(--lk-space-5));
}

/* A rule above only under a card head that draws none of its own — the overview's panels. Under
   a divided head it would be a second rule, and anywhere else there is nothing above to separate.
   The Prototype's rule is for the same case: its start-page head is its only one without one. */
.lk-card-head-inset:not(.lk-card-head-divided) + .lk-empty[b-c4mposjmk4] {
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-card .lk-empty-title[b-c4mposjmk4],
.lk-card .lk-empty-body[b-c4mposjmk4] {
    max-width: calc(23.75rem - 2 * var(--lk-space-6));
    margin-inline: auto;
}

/* Dashed and on the alternate surface, not the solid navy tile of the page-level one — the design
   uses the dash to say "nothing here yet" rather than "here is a thing". */
.lk-card .lk-empty-mark[b-c4mposjmk4] {
    width: 2.875rem;
    height: 2.875rem;
    margin-bottom: var(--lk-space-2);
    border: var(--lk-border-hairline) dashed var(--lk-line-strong);
    background: var(--lk-surface-alt);
    color: var(--lk-text-mut);
}

/* 22px in the 46px tile, the Prototype's es-tile. The markup draws one size; the placement is
   only known here. */
.lk-card .lk-empty-mark[b-c4mposjmk4]  svg {
    width: 1.375rem;
    height: 1.375rem;
}

.lk-card .lk-empty-title[b-c4mposjmk4] {
    margin-bottom: var(--lk-space-2);
    font-size: var(--lk-font-size-ui);
    /* A heading sets its own leading. Inheriting the body's 1.6 made every one-line title
       six pixels taller than the design's, which is small until it happens on every card. */
    line-height: normal;
    color: var(--lk-text);
}

.lk-card .lk-empty-body[b-c4mposjmk4] {
    max-width: 15rem;
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
    color: var(--lk-text-mut);
}
/* /Components/ErrorBanner.razor.rz.scp.css */
/*
    The Prototype's .error-banner.

    Colours come from tokens, and so does every spacing value (ADR 0005 point 4): the design's
    14px of vertical padding rounds to --lk-space-4 and its 1px and 2px nudges to --lk-space-0-5,
    as #528 rounds the rest of the portal. The 1.5px rule is --lk-border-width. Where the design
    asks for a size the scales do not have (a 14px corner, 13.5px of text) the value is written
    out, as EmptyState writes out its own sizes.

    The banner owns no outer margin. Where it sits is the calling screen's business, and a
    component that reserves space below itself is one every caller then has to work around.
*/

.lk-error-banner[b-qsj2icnbkr] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-err);
    border-radius: 14px;
    background: var(--lk-err-soft);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--lk-text);
}

/* Does not shrink, and sits a hair below the cap height of the first line of text. */
.lk-error-banner-mark[b-qsj2icnbkr] {
    flex: 0 0 auto;
    margin-top: var(--lk-space-0-5);
    color: var(--lk-err);
}

.lk-error-banner-body[b-qsj2icnbkr] {
    min-width: 0;
}

.lk-error-banner-title[b-qsj2icnbkr] {
    display: block;
    margin-bottom: var(--lk-space-0-5);
    font-size: 14px;
    font-weight: 700;
    color: var(--lk-err);
}

/*
    The message is in the ordinary text colour, not the error colour. Two weights of red in one
    box makes the sentence harder to read than it makes it urgent, and the heading and the border
    have already said that something is wrong.
*/
.lk-error-banner-message[b-qsj2icnbkr] {
    display: block;
}
/* /Components/EventDayGroupsComponent.razor.rz.scp.css */
/* A person's events by day (#266, #492): a heading over a card of rows per day. The rows are
   KeyHistoryListComponent's, class for class, so the histories read the same; the day grouping is
   the Prototype's own for both person histories (Profile.razor rows 83–103, ColleagueDetail.razor
   rows 127–150). */

.event-days[b-wl7905xewf] {
    display: grid;
    gap: var(--lk-space-5);
}

.event-days-day[b-wl7905xewf] {
    display: grid;
    gap: var(--lk-space-2);
}

/* The Prototype's day label: display face, bold, uppercase and tracked, muted — the eyebrow's
   treatment in the text colour rather than the accent, since it labels a group and not a page. */
.event-days-heading[b-wl7905xewf] {
    margin: 0 var(--lk-space-0-5);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

.event-days-rows[b-wl7905xewf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* As KeyHistoryListComponent's row, measured there (#648). */
.event-days-row[b-wl7905xewf] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.event-days-row:last-child[b-wl7905xewf] {
    border-bottom: none;
}

.event-days-mark[b-wl7905xewf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--lk-radius-pill);
    flex: none;
}

/* The events table's tone per type, as on the key's history. */
.event-days-mark-neutral[b-wl7905xewf] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.event-days-mark-ok[b-wl7905xewf] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.event-days-mark-warn[b-wl7905xewf] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.event-days-mark-error[b-wl7905xewf] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.event-days-mark-info[b-wl7905xewf] {
    background: var(--lk-info-soft);
    color: var(--lk-info);
}

.event-days-mark-accent[b-wl7905xewf] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}

.event-days-what[b-wl7905xewf] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    flex: 1;
    min-width: 0;
}

.event-days-title[b-wl7905xewf] {
    font-family: var(--lk-font-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.event-days-sub[b-wl7905xewf] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

.event-days-when[b-wl7905xewf] {
    display: inline-flex;
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Narrow: the time drops under the event, as on the key's history. */
@media (max-width: 40rem) {
    .event-days-row[b-wl7905xewf] {
        flex-wrap: wrap;
        gap: var(--lk-space-1) var(--lk-space-3);
    }

    .event-days-what[b-wl7905xewf] {
        flex-basis: calc(100% - 38px - var(--lk-space-3));
    }

    .event-days-when[b-wl7905xewf] {
        margin-left: calc(38px + var(--lk-space-3));
    }
}
/* /Components/FieldGroupComponent.razor.rz.scp.css */
/* The head is CardHeader's, and the card is unpadded so the head's rule reaches both edges — see
   the component's own file. What is left here is the body. */

.lk-field-group-body[b-d88yvh335g] {
    display: grid;

    /* The design's 20px body padding and 16px gap (design/key-detail.jsx:53), on the spacing
       scale: space-5 is 20px, space-4 is 16px. */
    padding: var(--lk-space-5);
    gap: var(--lk-space-4);

    /* Set per instance by the component. The fallback is the same default, so a group whose style
       attribute is stripped still lays out the way the design draws it rather than collapsing. */
    grid-template-columns: repeat(var(--lk-field-group-columns, 2), minmax(0, 1fr));
}

/* minmax(0, 1fr) above rather than 1fr: a grid track defaults to min-content, so one long
   unbroken value — a terms paragraph, a long organisation name — would push its column wider than
   half and shove the other one off. */

/* One column on a narrow screen. 60rem is the breakpoint ColleagueDetailPage already collapses
   its own two-column grid at, and max-width is inclusive, so 960px is one column in both. */
@media (max-width: 60rem) {
    .lk-field-group-body[b-d88yvh335g] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lk-field-group-action[b-d88yvh335g] {
    padding: 0 var(--lk-space-5) var(--lk-space-5);
}

/* The heading's buttons. Positioned so they stack above the toggle's ::after below, which would
   otherwise cover them in a collapsible group and turn a press on Save into a toggle. */
.lk-field-group-head-actions[b-d88yvh335g] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    position: relative;
    z-index: 1;
}

/* The disclosure of a collapsible group, drawn as the key page's lending card draws its chevron
   (LendingPolicyComponent.razor.css): a small square with the glyph centred, secondary text, a
   soft ground under the pointer, turned over when open. */
.lk-field-group-toggle[b-d88yvh335g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-control-height-sm);
    height: var(--lk-control-height-sm);
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-sm);
    background: none;
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition);
}

/* The whole head is the target: the button's ::after covers CardHeader's row, which is its
   positioning box. There is still only one control to tab to and one thing announced. */
.lk-field-group-toggle[b-d88yvh335g]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.lk-field-group-toggle:hover[b-d88yvh335g] {
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

.lk-field-group-toggle:focus-visible[b-d88yvh335g] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* The glyph turns, not the button. A transformed button becomes the containing block of its own
   ::after, which would shrink the target to the button the moment the group opens. ::deep because
   the svg is Icon's markup. */
.lk-field-group-toggle[b-d88yvh335g]  svg {
    transition: transform var(--lk-transition);
}

.lk-field-group-toggle[aria-expanded="true"][b-d88yvh335g]  svg {
    transform: rotate(180deg);
}
/* /Components/FormActions.razor.rz.scp.css */
/* The dialog footer's shape (Dialog.razor.css .lk-dialog-foot): whole buttons drop to the next line on
   a narrow screen, a button's label never breaks. */
.lk-form-actions[b-l9j0ene3gj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) var(--lk-space-5);
    background: var(--lk-surface-alt);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: 0 0 var(--lk-radius-card) var(--lk-radius-card);
}

.lk-form-actions-after-cards[b-l9j0ene3gj] {
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
}
/* /Components/Icon.razor.rz.scp.css */
.lk-icon[b-w4d9x3m5jo] {
    display: block;
    flex: 0 0 auto;
}
/* /Components/ImpersonationBannerComponent.razor.rz.scp.css */
/*
    Magenta, which nothing else in the portal uses as a surface. That is the point: acting as
    somebody else must not be mistakable for part of the furniture, in any of the four layouts
    this appears in. The design's own accent, not a colour picked here.
*/
.lk-impersonation[b-k76h8n2hrn] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
}

.lk-impersonation-label[b-k76h8n2hrn] {
    font-size: 0.719rem;
    opacity: 0.85;
}

.lk-impersonation-row[b-k76h8n2hrn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
}

/* Takes the spare width so the stop button stays at the far edge, however wide the layout is. */
.lk-impersonation-name[b-k76h8n2hrn] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: var(--lk-font-size-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Same magenta and contrast as the rest of the banner: it is the banner's own news, and a red
    line on magenta would be illegible. The wording carries the failure (#504).
*/
.lk-impersonation-failure[b-k76h8n2hrn] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
}

/*
    The button sits on magenta rather than on the surrounding surface, so it cannot inherit the
    ghost variant's colours and stay legible. ::deep because the element belongs to Button, and
    the class lands on the <button> itself — Splat merges it into that component's class list.

    Under the row, the wrapper this file owns (ADR 0007 point 8, #1082). The wrapper also decides
    the hover: without it Button's own .lk-button-ghost:hover:not(:disabled) outranked the rule
    below, so an idle button turned the ghost hover's near-white under its white label.
*/
.lk-impersonation-row[b-k76h8n2hrn]  button.lk-impersonation-stop {
    background: var(--lk-magenta-hover);
    color: var(--lk-magenta-contrast);
}

.lk-impersonation-row[b-k76h8n2hrn]  button.lk-impersonation-stop:hover {
    background: var(--lk-magenta-ink);
}
/* /Components/KeyCategoryGrantComponent.razor.rz.scp.css */
/* The chips that grant, and the list of what is granted. Moved from PartnerDetailPage.razor.css
   unchanged when the colleague's key access tab became the second user (#492). */

/* The caller's card is unpadded (Card Padded="false"), so each section brings its own 16px 20px —
   the Prototype's 16px 20px on the chip area and 14px 20px on the rows, 12px being the scale's step. */
.key-category-grant[b-qwa2b2t646] {
    padding: var(--lk-space-4) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-category-grant-chips[b-qwa2b2t646] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

/* The chips themselves are ToggleChip's since #1219. */

.key-category-grant-note[b-qwa2b2t646],
.key-category-grant-empty[b-qwa2b2t646] {
    margin: var(--lk-space-3) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.key-category-grant-empty[b-qwa2b2t646] {
    margin-top: 0;
}

/* ── What is granted ────────────────────────────────────── */

.key-category-granted-list[b-qwa2b2t646] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-category-granted-item[b-qwa2b2t646] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-category-granted-item:last-child[b-qwa2b2t646] {
    border-bottom: none;
}

.key-category-granted-mark[b-qwa2b2t646] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text-sec);
}

.key-category-granted-name[b-qwa2b2t646] {
    flex: 1;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
}

.key-category-granted-revoke[b-qwa2b2t646] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-lg);
    height: var(--lk-icon-button-size-lg);
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-control);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
    transition: var(--lk-transition);
}

.key-category-granted-revoke:hover:not(:disabled)[b-qwa2b2t646] {
    background: var(--lk-ghost-hover);
    color: var(--lk-err);
}

.key-category-granted-revoke:focus-visible[b-qwa2b2t646] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.key-category-granted-revoke:disabled[b-qwa2b2t646] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/LendingPolicyComponent.razor.rz.scp.css */
/* The card is unpadded so the header row reaches both edges and its rule spans the full width —
   the design builds these as .card without .pad, a head with its own padding, a body with its
   own. */

/* The whole row is the disclosure, as in the Prototype. A button, so it resets like one. */
/* The head's row: the disclosure, grown to fill it, and the actions a settings tab puts beside
   it. The rule under an open head is drawn here so it runs under the actions too. */
.lk-lending-policy-row[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
}

.lk-lending-policy-row-open[b-fpa8rdfat8] {
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-lending-policy-head-actions[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--lk-space-2);
    padding-right: var(--lk-space-5);
}

.lk-lending-policy-head[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex: 1 1 auto;
    min-width: 0;
    /* Even top and bottom: the head is a row of its own while the card is closed, and the Prototype
       pads it 15px both ways around a 32px expand button (LendingPolicyCard.razor). */
    padding: var(--lk-space-4) var(--lk-space-5);
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

/* The rule appears only when the card is open, so a collapsed card is one clean line. */
.lk-lending-policy-head:focus-visible[b-fpa8rdfat8] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: -2px;
    border-radius: var(--lk-radius-card);
}

.lk-lending-policy-mark[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--lk-magenta-ink);
}

.lk-lending-policy-title[b-fpa8rdfat8] {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: 0.969rem;
    color: var(--lk-ink);
}

/* Magenta, as the Prototype draws it — not muted. It names which key this policy is for, and the
   colour is what ties it to the heading rather than to the fields below. */
.lk-lending-policy-context[b-fpa8rdfat8] {
    color: var(--lk-magenta-ink);
}

/* The Prototype's .expander (app.css:216): a 32px square the chevron sits centred in, secondary
   text, a soft ground under the pointer. It was the bare 16px glyph in muted text, which left the
   closed card 11px lower than the Prototype's and the one control that opens it hard to see
   (measured 2026-09-14). The whole head stays the target; this only draws it. */
.lk-lending-policy-chevron[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--lk-control-height-sm);
    height: var(--lk-control-height-sm);
    margin-left: var(--lk-space-1);
    border-radius: var(--lk-radius-sm);
    color: var(--lk-text-sec);
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-lending-policy-head:hover .lk-lending-policy-chevron[b-fpa8rdfat8] {
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

.lk-lending-policy-head[aria-expanded="true"] .lk-lending-policy-chevron[b-fpa8rdfat8] {
    transform: rotate(180deg);
}

.lk-lending-policy-body[b-fpa8rdfat8] {
    padding: var(--lk-space-5);
}

/* The design's grey box, carrying the switch that decides whether the fields apply. */
.lk-lending-policy-override[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    margin-bottom: var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.lk-lending-policy-override-text[b-fpa8rdfat8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.lk-lending-policy-override-title[b-fpa8rdfat8] {
    font-weight: 600;
    color: var(--lk-text);
}

.lk-lending-policy-override-hint[b-fpa8rdfat8] {
    margin-top: var(--lk-space-1);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.lk-lending-policy-state[b-fpa8rdfat8] {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* One grid for every field, which is how the Prototype lays this out — not three sub-cards. */
.lk-lending-policy-fields[b-fpa8rdfat8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lk-space-4);
}

@media (max-width: 60rem) {
    .lk-lending-policy-fields[b-fpa8rdfat8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dimmed as well as disabled: opacity alone carries the state only to somebody who can see it,
   and every control inside is disabled in its own right. */
.lk-lending-policy-fields-off[b-fpa8rdfat8] {
    opacity: 0.45;
}

.lk-lending-policy-wide[b-fpa8rdfat8] {
    grid-column: 1 / -1;
}

.lk-lending-policy-switch[b-fpa8rdfat8] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.lk-lending-policy-switch-text[b-fpa8rdfat8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-lending-policy-switch-label[b-fpa8rdfat8] {
    font-weight: 600;
    color: var(--lk-text);
}

/* The same sentence a field carries under it, in the same voice — so that a switch showing an
   inherited value does not read as this key's own setting. */
.lk-lending-policy-switch-note[b-fpa8rdfat8] {
    margin-top: var(--lk-space-1);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* The trail sits between the title and the chevron, and gives up its room first on a narrow
   card — the heading and the disclosure matter more than the orientation. */
[b-fpa8rdfat8] .lk-lending-policy-levels {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
/* /Components/ListLayout.razor.rz.scp.css */
/* The toolbar's own rules are the shared .lk-list-toolbar in app.css, because the controls inside
   it carry .lk-list-toolbar-* classes of their own and those have to reach into TextField and
   Select without ::deep on every page. */

/* The same 16px the toolbar leaves above the card, so a banner between them sits evenly. */
.lk-list-layout-banner[b-bvmix1q5c1] {
    margin-bottom: var(--lk-space-4);
}

/* A page passes a banner that is only sometimes there — an @if inside the slot — so the slot is
   set while nothing renders in it. Without this the empty wrapper would still leave 16px. Razor
   drops whitespace-only text between tags, so an unrendered @if leaves the element truly empty. */
.lk-list-layout-banner:empty[b-bvmix1q5c1] {
    display: none;
}

/* The figures sit as the banner does, 16px above the card, and bring their own inner layout. */
.lk-list-layout-figures[b-bvmix1q5c1] {
    margin-bottom: var(--lk-space-4);
}

.lk-list-layout-figures:empty[b-bvmix1q5c1] {
    display: none;
}
/* /Components/LoadingRegion.razor.rz.scp.css */
/* The region itself draws nothing. It exists to be named and to be reported busy; the shapes
   inside it are the caller's, and the layout is the only thing this file decides. */

.lk-loading-region-stack[b-zb9l8hqvpm] {
    display: grid;
    gap: var(--lk-space-4);
}

.lk-loading-region-tight[b-zb9l8hqvpm] {
    display: grid;
    gap: var(--lk-space-3);
}

.lk-loading-region-row[b-zb9l8hqvpm] {
    display: flex;
    align-items: center;
}

/* Separates the region from the header above it. A margin rather than a gap on the parent,
   because the parent is the page and the page has no say in what this element is. */
.lk-loading-region-spaced[b-zb9l8hqvpm] {
    margin-top: var(--lk-space-4);
}
/* /Components/LoanExtendPopoverComponent.razor.rz.scp.css */
/* The quick extension (the Aktiva lån redesign, point 4): a 344px panel in the top layer, placed by
   RowActions.razor.js as the row menu is. The control that opens it is the caller's. */

.lk-extend[b-wowkc4jt58] {
    position: relative;
    display: inline-flex;
}

.lk-extend-backdrop[b-wowkc4jt58] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.lk-extend-backdrop[popover][b-wowkc4jt58] {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.lk-extend-panel[b-wowkc4jt58] {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    margin: 0;
    overflow: visible;
    visibility: hidden;
    z-index: 21;
    display: grid;
    gap: var(--lk-space-3);
    width: 21.5rem;
    padding: var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-lg);
    text-align: left;
    white-space: normal;
    font-weight: 400;
    color: var(--lk-text);
}

/* Where the script could not place it: under the control, inside the row. */
.lk-extend-panel-inline[b-wowkc4jt58] {
    position: absolute;
    top: calc(100% + var(--lk-space-1));
    right: 0;
    left: auto;
    visibility: visible;
}

.lk-extend-head[b-wowkc4jt58] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-2);
}

.lk-extend-head strong[b-wowkc4jt58] {
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
    color: var(--lk-ink);
}

.lk-extend-head span[b-wowkc4jt58] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-extend-quick[b-wowkc4jt58] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-2);
}

.lk-extend-quick-pick[b-wowkc4jt58] {
    display: grid;
    gap: var(--lk-space-0-5);
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--lk-transition);
}

.lk-extend-quick-pick strong[b-wowkc4jt58] {
    font-size: var(--lk-font-size-ui);
    color: var(--lk-ink);
}

.lk-extend-quick-pick span[b-wowkc4jt58] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-extend-quick-pick:hover[b-wowkc4jt58] {
    background: var(--lk-ghost-hover);
}

.lk-extend-quick-pick[aria-pressed="true"][b-wowkc4jt58] {
    border-color: var(--lk-navy);
    background: var(--lk-navy-soft);
}

.lk-extend-or[b-wowkc4jt58] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    text-align: center;
    color: var(--lk-text-mut);
}

.lk-extend-month[b-wowkc4jt58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lk-extend-month-name[b-wowkc4jt58] {
    font-weight: 700;
    color: var(--lk-ink);
}

.lk-extend-step[b-wowkc4jt58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-md);
    height: var(--lk-icon-button-size-md);
    border: 0;
    border-radius: var(--lk-radius-control);
    background: transparent;
    color: var(--lk-text-sec);
    cursor: pointer;
}

.lk-extend-step:disabled[b-wowkc4jt58] {
    cursor: default;
    color: var(--lk-line-strong);
}

.lk-extend-calendar[b-wowkc4jt58] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Drawn inside the list's table, so its header and cell rules reach in: reset here. */
.lk-extend-calendar th[b-wowkc4jt58],
.lk-extend-calendar td[b-wowkc4jt58] {
    height: auto;
    border: 0;
    background: none;
    box-shadow: none;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

/* The list's sticky headings (#1284) reach the weekday row too, and once the panel scrolls inside
   itself (#1398) that row stuck in the middle of the dates. */
.lk-extend-calendar th[b-wowkc4jt58] {
    position: static;
}

/* The same rules' band behind a heading row: with the cell no longer positioned it would cover the
   dates, and the reset above already means the weekday row to have no background. */
.lk-extend-calendar th[b-wowkc4jt58]::before {
    content: none;
}

.lk-extend-calendar th[b-wowkc4jt58] {
    padding: 0 0 var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
    text-align: center;
    color: var(--lk-text-mut);
}

.lk-extend-calendar td[b-wowkc4jt58] {
    padding: var(--lk-space-0-5);
    text-align: center;
}

.lk-extend-day[b-wowkc4jt58] {
    width: 36px;
    height: var(--lk-calendar-day-height);
    border: var(--lk-border-hairline) solid transparent;
    border-radius: var(--lk-radius-control);
    background: transparent;
    font: inherit;
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
    cursor: pointer;
}

.lk-extend-day:hover:not(:disabled)[b-wowkc4jt58] {
    background: var(--lk-ghost-hover);
}

.lk-extend-day:disabled[b-wowkc4jt58] {
    cursor: default;
    color: var(--lk-line-strong);
}

/* Today with a ring, the chosen day filled navy. */
.lk-extend-day.is-today[b-wowkc4jt58] {
    border-color: var(--lk-line-strong);
    font-weight: 700;
}

.lk-extend-day[aria-pressed="true"][b-wowkc4jt58] {
    border-color: var(--lk-navy);
    background: var(--lk-navy);
    font-weight: 700;
    color: var(--lk-navy-contrast);
}

.lk-extend-times[b-wowkc4jt58] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
}

.lk-extend-times-label[b-wowkc4jt58] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-extend-time[b-wowkc4jt58] {
    padding: var(--lk-space-1) var(--lk-space-2);
    border: var(--lk-border-hairline) solid transparent;
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    font: inherit;
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
    cursor: pointer;
}

.lk-extend-time[aria-pressed="true"][b-wowkc4jt58] {
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
}

.lk-extend-other[b-wowkc4jt58] {
    border-color: var(--lk-line);
    background: var(--lk-surface);
    font-weight: 400;
    color: var(--lk-text-sec);
}

.lk-extend-foot[b-wowkc4jt58] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-extend-new[b-wowkc4jt58] {
    display: block;
    margin-right: auto;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-extend-new > span:first-child[b-wowkc4jt58] {
    display: block;
}

.lk-extend-gain[b-wowkc4jt58] {
    margin-left: var(--lk-space-1);
}

.lk-extend-new strong[b-wowkc4jt58] {
    font-size: var(--lk-font-size-ui);
    color: var(--lk-ink);
}

.lk-extend-none[b-wowkc4jt58] {
    font-weight: 400;
}

.lk-extend-gain[b-wowkc4jt58] {
    font-weight: 700;
    color: var(--lk-ok);
}

.lk-extend-quick-pick:focus-visible[b-wowkc4jt58],
.lk-extend-day:focus-visible[b-wowkc4jt58],
.lk-extend-time:focus-visible[b-wowkc4jt58],
.lk-extend-step:focus-visible[b-wowkc4jt58] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}
/* /Components/LoanListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells, and the same shape the key list
   already uses. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding
   is the bottom of the card (ListLayout). A 16px gap here stacked on top of it. */
.loan-list[b-mmkxb7uqhn] {
    display: grid;
}

/* The row heading is the key's name — it is what identifies the row, so it is a <th> and not a
   cell. It still has to read as a name rather than as a heading. */
.loan-table-name[b-mmkxb7uqhn] {
    font-weight: 600;
    color: var(--lk-text);
}

/* On an inner span, not on the <th>: a cell that is display: flex is no longer a table cell and
   draws its hairline under its own content rather than at the row's bottom. */
.loan-table-name-inner[b-mmkxb7uqhn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The date columns hold "Today 17:00" and "Fri 11 Jul 09:30", which wrap badly in a narrow
   column and read as two rows when they do. */
.loan-table td.loan-table-muted[b-mmkxb7uqhn] {
    white-space: nowrap;
}

/* The borrower and the keybox are names, and names are allowed to be long. Only the dates are
   held on one line, so this puts wrapping back for the two that need it.

   By class rather than by nth-child, which is how it was written until the checkbox column
   arrived: a positional selector counts every cell, so adding one in front shifted the borrower
   from child 2 to child 3 and the rule would have started holding the wrong column on one line.
   Nothing would have gone red — the dates would simply have wrapped and the names stopped. */
.loan-table tbody td.loan-table-wraps[b-mmkxb7uqhn] {
    white-space: normal;
}

/* ── Picking rows for a reminder ────────────────────────── */

/* Top-aligned because the name cell beside it can run to two lines when it carries a reason, and a
   box that drifts to the middle of that no longer looks like it belongs to the row's first line. */
.loan-table-select[b-mmkxb7uqhn],
.loan-table-select-heading[b-mmkxb7uqhn] {
    width: 34px;
    padding-right: 0;
    vertical-align: top;
}

/* The name and, when there is one, the reason the row cannot be picked. A column inside the flex
   row, so the mark stays beside the name rather than beside the pair. */
.loan-table-name-text[b-mmkxb7uqhn] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
}

/* ── Loading ────────────────────────────────────────────── */

.loan-list-loading-row[b-mmkxb7uqhn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* ── The row's expander, and the chain it opens (#604) ──── */

/* The chevron carries lk-row-link, so its ::after is the overlay that makes the whole row
   press it. Everything visible about it is here; the stretching is in app.css, shared with
   the four lists that link instead of expanding. */
.loan-row-toggle[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--lk-icon-button-size-md);
    height: var(--lk-icon-button-size-md);
    border: var(--lk-border-hairline) solid var(--lk-line);
    background: var(--lk-surface-alt);
    border-radius: var(--lk-radius-pill);
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: var(--lk-transition);
}

/* The Aktiva lån redesign (point 1): a round chevron that turns when the row is open, the whole
   row with the pointer and the key's name underlined on hover, so the row reads as one that opens. */
.loan-row-toggle[b-mmkxb7uqhn]  svg {
    transition: transform 0.15s ease;
}

.loan-table tbody tr.lk-row-linked[b-mmkxb7uqhn] {
    cursor: pointer;
}

.loan-table tbody tr.lk-row-linked:hover .loan-table-key[b-mmkxb7uqhn] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.loan-table tbody tr.is-open .loan-row-toggle[b-mmkxb7uqhn] {
    border-color: var(--lk-navy);
    color: var(--lk-navy);
}

.loan-table tbody tr.is-open .loan-row-toggle[b-mmkxb7uqhn]  svg {
    transform: rotate(180deg);
}

/* The focus ring belongs on the chevron and not on the row: the overlay has no size of its
   own to draw around, so a ring on the row link would be invisible. Keyboard users get the
   chevron highlighted, which is the control they actually moved to. */
.loan-row-toggle:focus-visible[b-mmkxb7uqhn] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.loan-row-detail > td[b-mmkxb7uqhn] {
    padding: 0 var(--lk-space-4) var(--lk-space-4);
    background: var(--lk-surface);
}

/* ── The detail: the loan's timeline in a card (the redesign, point 7) ── */

.loan-detail[b-mmkxb7uqhn] {
    display: grid;
    gap: 0;
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-sm);
    font-weight: 400;
    white-space: normal;
}

.loan-detail-card[b-mmkxb7uqhn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--lk-space-6);
    padding: var(--lk-space-5);
}

@media (max-width: 89.99rem) {
    .loan-detail-card[b-mmkxb7uqhn] {
        grid-template-columns: minmax(0, 1fr) 250px;
    }
}

/* History has no "Hos just nu": the timeline takes the card. */
.loan-detail-card.is-single[b-mmkxb7uqhn] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 52rem) {
    .loan-detail-card[b-mmkxb7uqhn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.loan-detail-main[b-mmkxb7uqhn] {
    display: grid;
    gap: var(--lk-space-4);
    align-content: start;
}

.loan-detail-head[b-mmkxb7uqhn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-2);
}

.loan-detail-heading[b-mmkxb7uqhn] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-sec);
}

.loan-detail-receipt[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-detail-receipt strong[b-mmkxb7uqhn] {
    margin-left: var(--lk-space-1);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--lk-text);
}

.loan-detail-failed[b-mmkxb7uqhn] {
    margin: 0;
    font-size: var(--lk-font-size-body);
    color: var(--lk-err);
}

.loan-detail[b-mmkxb7uqhn]  .loan-detail-loading {
    margin: 0;
    display: grid;
    gap: var(--lk-space-2);
    font-size: var(--lk-font-size-body);
    color: var(--lk-text-sec);
}

/* The steps: a mark on a rail and the words beside it. Done steps a filled mark, waiting ones a
   dashed ring in their colour (the request magenta, a takeover blue), the due time dashed grey. */
.loan-timeline[b-mmkxb7uqhn] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}

.loan-step[b-mmkxb7uqhn] {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--lk-space-3);
    padding-bottom: var(--lk-space-4);
}

.loan-step:last-child[b-mmkxb7uqhn] {
    padding-bottom: 0;
}

.loan-step:not(:last-child)[b-mmkxb7uqhn]::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: 0;
    width: var(--lk-border-thick);
    background: var(--lk-line);
}

.loan-step-mark[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
}

.loan-step.is-handed-over .loan-step-mark[b-mmkxb7uqhn] {
    background: var(--lk-info);
    color: var(--lk-surface);
}

.loan-step.is-reminder .loan-step-mark[b-mmkxb7uqhn] {
    background: var(--lk-text-sec);
    color: var(--lk-surface);
}

.loan-step.is-extension-approved .loan-step-mark[b-mmkxb7uqhn] {
    background: var(--lk-ok);
    color: var(--lk-surface);
}

.loan-step.is-extension-declined .loan-step-mark[b-mmkxb7uqhn],
.loan-step.is-handover-ended .loan-step-mark[b-mmkxb7uqhn] {
    background: var(--lk-sunken);
    color: var(--lk-text-sec);
}

.loan-step.is-waiting .loan-step-mark[b-mmkxb7uqhn],
.loan-step.is-future .loan-step-mark[b-mmkxb7uqhn] {
    border: var(--lk-border-thick) dashed currentColor;
    background: var(--lk-surface);
}

.loan-step.is-extension-requested .loan-step-mark[b-mmkxb7uqhn] {
    color: var(--lk-magenta);
}

.loan-step.is-awaiting-takeover .loan-step-mark[b-mmkxb7uqhn] {
    color: var(--lk-info);
}

.loan-step.is-future .loan-step-mark[b-mmkxb7uqhn] {
    color: var(--lk-text-mut);
}

.loan-step-body[b-mmkxb7uqhn] {
    display: grid;
    gap: var(--lk-space-1);
    padding-top: var(--lk-space-1);
}

/* The waiting request stands out: a soft magenta panel, as the row it belongs to. */
.loan-step.is-extension-requested .loan-step-body[b-mmkxb7uqhn] {
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-magenta-soft);
    border-radius: var(--lk-radius-card);
    background: var(--lk-magenta-soft);
}

.loan-step-title[b-mmkxb7uqhn],
.loan-step-text[b-mmkxb7uqhn],
.loan-step-quote[b-mmkxb7uqhn] {
    margin: 0;
}

.loan-step-title strong[b-mmkxb7uqhn] {
    font-weight: 700;
    color: var(--lk-ink);
}

.loan-step-when[b-mmkxb7uqhn] {
    margin-left: var(--lk-space-2);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-step-title[b-mmkxb7uqhn],
.loan-step-quote[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-ui);
}

.loan-step-text[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.loan-step-quote[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-label);
    font-style: italic;
    color: var(--lk-text-sec);
}

/* "✓ Signerat med BankID": the word in BankID's blue, never the symbol alone (the BankID spec). */
.loan-step-bankid[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    margin-left: var(--lk-space-2);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
    white-space: nowrap;
}

.loan-step-bankid strong[b-mmkxb7uqhn] {
    font-weight: 700;
    /* BankID's blue on a light ground, white on a dark one (#1381). */
    color: var(--lk-bankid-ink);
}

.loan-step-actions[b-mmkxb7uqhn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-2);
}

/* BankID's whole logo once per detail, 56px tall with its clear zone (the BankID spec). */
.loan-bankid[b-mmkxb7uqhn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.loan-bankid[b-mmkxb7uqhn]  .loan-bankid-logo {
    flex: none;
    height: 56px;
    width: auto;
}

.loan-bankid p[b-mmkxb7uqhn] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

/* "Hos just nu": whoever has the key, on a quiet panel beside the timeline. */
.loan-holder[b-mmkxb7uqhn] {
    display: grid;
    gap: var(--lk-space-3);
    align-content: start;
    padding: var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.loan-holder-who[b-mmkxb7uqhn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.loan-holder-name[b-mmkxb7uqhn],
.loan-holder-since[b-mmkxb7uqhn] {
    display: block;
}

.loan-holder-name[b-mmkxb7uqhn] {
    font-weight: 700;
    color: var(--lk-ink);
}

.loan-holder-since[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-holder-facts[b-mmkxb7uqhn] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--lk-space-2);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text);
}

.loan-holder-facts li[b-mmkxb7uqhn] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    overflow-wrap: anywhere;
}

.loan-holder-facts li.is-muted[b-mmkxb7uqhn] {
    color: var(--lk-text-mut);
}

.loan-holder-facts[b-mmkxb7uqhn]  svg {
    flex: none;
    margin-top: var(--lk-space-1);
    color: var(--lk-text-mut);
}

/* The loan's own actions under the card: Förläng and Påminn, the return to the right. */
.loan-detail-bar[b-mmkxb7uqhn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.loan-detail-bar[b-mmkxb7uqhn]  .loan-detail-return {
    margin-left: auto;
}

/* ── The row's lines (the redesign, points 6, 9 and 10) ── */

/* A request for more time waits (#1323): in the request's colour, under the key's name. */
.loan-table-extension[b-mmkxb7uqhn] {
    display: block;
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

/* "Ingen mottagare", "Ingen e-post – bara SMS": calm, an info mark and grey, not a fault. */
.loan-table-note[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
    color: var(--lk-text-mut);
}

.loan-table-name-inner:has(.loan-table-note)[b-mmkxb7uqhn],
.loan-table-name-inner:has(.loan-table-extension)[b-mmkxb7uqhn] {
    align-items: flex-start;
}

/* The person, and under it since when and for how long, or whom it was handed over from. */
.loan-table-person[b-mmkxb7uqhn] {
    color: var(--lk-text);
}

.loan-table-who[b-mmkxb7uqhn],
.loan-table-sub[b-mmkxb7uqhn],
.loan-table-due-at[b-mmkxb7uqhn],
.loan-table-due-status[b-mmkxb7uqhn] {
    display: block;
}

.loan-table-who-unknown[b-mmkxb7uqhn] {
    color: var(--lk-text-mut);
}

.loan-table-sub[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-table-handed[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    color: var(--lk-info);
}

/* The due time, and the status under it (the status column went, point 10). */
.loan-table td.loan-table-due[b-mmkxb7uqhn] {
    white-space: nowrap;
    color: var(--lk-text);
}

.loan-table-due-at.is-past-due[b-mmkxb7uqhn] {
    color: var(--lk-err);
}

.loan-table-due-status[b-mmkxb7uqhn] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-table-due-text.is-past-due[b-mmkxb7uqhn] {
    font-weight: 600;
    color: var(--lk-err);
}

.loan-table-due-text.is-due-soon[b-mmkxb7uqhn] {
    font-weight: 600;
    color: var(--lk-warn);
}

.loan-dot[b-mmkxb7uqhn] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--lk-radius-pill);
}

.loan-dot.is-past-due[b-mmkxb7uqhn] {
    background: var(--lk-err);
}

.loan-dot.is-due-soon[b-mmkxb7uqhn] {
    background: var(--lk-warn);
}

/* "Ingen tidsgräns": quiet, no edge and no colour. */
.loan-table-no-due[b-mmkxb7uqhn] {
    color: var(--lk-text-mut);
}

/* The bell after the status: already reminded (#599). ::deep because the svg is Icon's root. */
.loan-table-due-status[b-mmkxb7uqhn]  svg.loan-reminded {
    flex: none;
    color: var(--lk-warn);
}

/* ── Attention and the open row (point 2) ───────────────── */

/* A 3px edge on the first cell says why the row needs attention: magenta for a waiting request
   (the row faintly tinted too), red for late, yellow for due soon. Inset shadows rather than
   borders, so the columns do not move. The open row's navy edge wins over them. */
.loan-table tbody tr.loan-row-pending > :first-child[b-mmkxb7uqhn] {
    box-shadow: inset var(--lk-accent-edge-width) 0 0 var(--lk-magenta);
}

.loan-table tbody tr.loan-row-pending > *[b-mmkxb7uqhn] {
    background: var(--lk-magenta-soft);
}

.loan-table tbody tr.loan-row-past-due > :first-child[b-mmkxb7uqhn] {
    box-shadow: inset var(--lk-accent-edge-width) 0 0 var(--lk-err);
}

.loan-table tbody tr.loan-row-due-soon > :first-child[b-mmkxb7uqhn] {
    box-shadow: inset var(--lk-accent-edge-width) 0 0 var(--lk-warn);
}

.loan-table tbody tr.is-open > :first-child[b-mmkxb7uqhn] {
    box-shadow: inset var(--lk-accent-edge-width) 0 0 var(--lk-navy);
}

.loan-row-detail > td:first-child[b-mmkxb7uqhn] {
    box-shadow: inset var(--lk-accent-edge-width) 0 0 var(--lk-navy);
}

/* The group headings: small capitals and the count beside them, on the page's own band. */
.loan-table tbody tr.loan-group > th[b-mmkxb7uqhn] {
    padding-top: var(--lk-space-4);
    padding-bottom: var(--lk-space-2);
    background: var(--lk-surface);
    text-align: left;
    font-weight: 400;
}

.loan-group-title[b-mmkxb7uqhn] {
    margin-right: var(--lk-space-2);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-sec);
}

.loan-group-count[b-mmkxb7uqhn] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* ── Column widths (the redesign, point 10) ─────────────── */

.loan-col-select[b-mmkxb7uqhn] {
    width: 44px;
}

.loan-col-person[b-mmkxb7uqhn] {
    width: 22%;
}

.loan-col-keybox[b-mmkxb7uqhn] {
    width: 14%;
}

.loan-col-due[b-mmkxb7uqhn] {
    width: 18%;
}

/* "✓ Återlämna" and ⋯ on a wide row; below 1440 px only Svara and ⋯ (the list rule).

   Written as the span plus the padding .lk-list-table gives the last cell (8px left, 20px right)
   rather than as their sum, as #922 did for the other lists: the padding scales with --lk-density
   and a summed number does not, so at the airy density the buttons' room shrank by whatever the
   padding gained (ADR 0007 point 9, #1437). The spans are the old 200px and 128px less that
   padding, so nothing moves at the default density. The table's layout is the default, so the
   width is a floor and a longer translation still widens the column. */
.loan-col-actions[b-mmkxb7uqhn] {
    width: calc(10.75rem + var(--lk-space-2) + var(--lk-space-5));
}

@media (max-width: 89.99rem) {
    .loan-col-actions[b-mmkxb7uqhn] {
        width: calc(6.25rem + var(--lk-space-2) + var(--lk-space-5));
    }
}

/* ── The due cell as the quick extension (point 4) ──────── */

/* The cell's content as a button: a ring on hover, the clock after it saying it opens. */
.loan-due-trigger[b-mmkxb7uqhn] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: calc(-1 * var(--lk-space-1)) calc(-1 * var(--lk-space-2));
    padding: var(--lk-space-1) var(--lk-space-2);
    border: var(--lk-border-hairline) solid transparent;
    border-radius: var(--lk-radius-control);
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: var(--lk-transition);
}

.loan-due-trigger:hover[b-mmkxb7uqhn],
.loan-due-trigger[aria-expanded="true"][b-mmkxb7uqhn] {
    border-color: var(--lk-line-strong);
    background: var(--lk-surface);
}

.loan-due-trigger:focus-visible[b-mmkxb7uqhn] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.loan-due-content[b-mmkxb7uqhn] {
    display: grid;
}

.loan-due-trigger[b-mmkxb7uqhn]  svg.loan-due-clock {
    flex: none;
    color: var(--lk-text-mut);
}

/* The detail's right column: who has the key now, and under it how the loan was signed (arenden#28). */
.loan-detail-side[b-mmkxb7uqhn] {
    display: grid;
    gap: var(--lk-space-3);
    align-content: start;
}
/* /Components/LoanSignatureComponent.razor.rz.scp.css */
/* The card "Signerat" (arenden#28, design P1–P4), in the grey of "Hos just nu" above it. */
.loan-signature[b-4v1vinyfsf] {
    display: grid;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.loan-signature-head[b-4v1vinyfsf] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
}

.loan-signature-heading[b-4v1vinyfsf] {
    flex: 1;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-sec);
}

.loan-signature-larger[b-4v1vinyfsf] {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-magenta-ink);
    cursor: pointer;
}

/* The paper the signature was written on: white, a thin frame and a baseline. Never larger than the PNG. */
.loan-signature-plate[b-4v1vinyfsf] {
    position: relative;
    padding: var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
}

.loan-signature-plate[b-4v1vinyfsf]::after {
    content: "";
    position: absolute;
    left: var(--lk-space-3);
    right: var(--lk-space-3);
    bottom: 22%;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.loan-signature-plate img[b-4v1vinyfsf] {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.loan-signature-plate.is-large[b-4v1vinyfsf] {
    max-width: 35rem;
    margin: 0 auto;
}

.loan-signature-text[b-4v1vinyfsf],
.loan-signature-where[b-4v1vinyfsf],
.loan-signature-none[b-4v1vinyfsf],
.loan-signature-note[b-4v1vinyfsf] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    line-height: 1.45;
}

.loan-signature-text[b-4v1vinyfsf] {
    color: var(--lk-text-sec);
}

.loan-signature-text strong[b-4v1vinyfsf] {
    color: var(--lk-text);
}

.loan-signature-where[b-4v1vinyfsf],
.loan-signature-note[b-4v1vinyfsf] {
    color: var(--lk-text-mut);
}

.loan-signature-none[b-4v1vinyfsf] {
    color: var(--lk-text-sec);
}

.loan-signature-note[b-4v1vinyfsf] {
    margin-top: var(--lk-space-3);
}

.loan-signature-bankid[b-4v1vinyfsf] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* BankID's spec: the whole logo, on white. */
.loan-signature-bankid-logo[b-4v1vinyfsf] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: var(--lk-radius-sm);
    background: var(--lk-surface);
}
/* /Components/LoanTermsApprovalsComponent.razor.rz.scp.css */
/* The card "Godkända villkor" (#1531, mockup p1), in the grey of "Signerat" above it. */
.loan-terms-approvals[b-yziayflg56] {
    display: grid;
    gap: var(--lk-space-2);
    padding: var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.loan-terms-approvals-heading[b-yziayflg56] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-sec);
}

.loan-terms-approvals-list[b-yziayflg56] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loan-terms-approval[b-yziayflg56] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.loan-terms-approval-who[b-yziayflg56] {
    flex: 1;
    min-width: 0;
}

.loan-terms-approval-name[b-yziayflg56],
.loan-terms-approval-how[b-yziayflg56],
.loan-terms-approval-note[b-yziayflg56] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    line-height: 1.45;
}

.loan-terms-approval-how[b-yziayflg56],
.loan-terms-approval-note[b-yziayflg56] {
    color: var(--lk-text-mut);
}

.loan-terms-approval-show[b-yziayflg56] {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-magenta-ink);
    white-space: nowrap;
    cursor: pointer;
}

/* The terms as approved: plain text, its own line breaks kept. */
.loan-terms-approval-terms[b-yziayflg56] {
    margin: 0 0 var(--lk-space-3);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Logo.razor.rz.scp.css */
.lk-logo[b-mk9jumdll2] {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--lk-logo-size) * 0.32);
}

.lk-logo-tile[b-mk9jumdll2] {
    position: relative;
    flex: 0 0 auto;
    width: var(--lk-logo-size);
    height: var(--lk-logo-size);
    border-radius: calc(var(--lk-logo-size) * 0.28);
    background: var(--lk-logo-tile);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lk-logo-glyph[b-mk9jumdll2] {
    display: block;
    width: calc(var(--lk-logo-size) * 0.56);
    height: calc(var(--lk-logo-size) * 0.56);
    /* The glyph sits on the navy tile in both themes, so its contrast color is the one
       that pairs with navy — never the page's text color. */
    color: var(--lk-rail-text);
}

.lk-logo-word[b-mk9jumdll2] {
    /* The vector wordmark: its height sets its size and the width follows the drawing. The box
       is 108.6 units for 68.9 units of capitals, so 0.6 of the tile gives capitals of 0.38 —
       about as tall as the Montserrat word they replace. */
    display: block;
    height: calc(var(--lk-logo-size) * 0.6);
    width: auto;
    flex: 0 0 auto;
    color: var(--lk-ink);
}
/* /Components/NameChoiceComponent.razor.rz.scp.css */
/*
    The onboarding card's spacing, moved here with the markup (#530). Nothing about the card is
    styled from here — the component contributes the question and its own rhythm, and the screen
    around it owns the surface it sits on.
*/

.lk-name-choice-label[b-ce92kq9z22] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-text-sec);
}

.lk-name-choice-description[b-ce92kq9z22] {
    margin: var(--lk-space-2) 0 0;
    font-size: 12.5px;
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-mut);
}

.lk-name-choice-options[b-ce92kq9z22] {
    display: grid;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-2);
}

.lk-name-choice-row[b-ce92kq9z22] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-2);
}

/* The field takes the row; the button keeps its own width. TextField renders its own markup, so
   reaching its root needs ::deep — without it this rule matches nothing, silently. */
.lk-name-choice[b-ce92kq9z22]  .lk-name-choice-field {
    flex: 1;
}
/* /Components/NavigationDrawerComponent.razor.rz.scp.css */
/*
    Nothing above the narrow width. The 60rem is NarrowQuery in the component, and the width both
    shells already collapsed at; max-width is inclusive, so 960px is narrow in both places.
*/
.lk-navigation-drawer-host[b-9g721aef5j] {
    display: none;
}

/*
    Stays at the top while the page scrolls under it, so the menu is one tap away from anywhere.
    The host is what sticks, not the bar inside it: a sticky element cannot leave its parent, and
    the host is exactly as tall as the bar, so a sticky bar scrolled away with the page. The host's
    parent is the shell, which is as tall as the page.
*/
@media (max-width: 60rem) {
    .lk-navigation-drawer-host[b-9g721aef5j] {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
    }
}

/* ── The bar ────────────────────────────────────────────── */

.lk-narrow-bar[b-9g721aef5j] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-2) var(--lk-space-4);
}

.lk-narrow-bar-rail[b-9g721aef5j] {
    background: var(--lk-rail);
}

.lk-narrow-bar-light[b-9g721aef5j] {
    background: var(--lk-surface);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-narrow-bar-brand[b-9g721aef5j] {
    display: inline-flex;
    border-radius: var(--lk-radius-control);
    text-decoration: none;
}

.lk-narrow-bar-brand:focus-visible[b-9g721aef5j],
.lk-navigation-drawer-brand:focus-visible[b-9g721aef5j],
.lk-navigation-drawer-user-link:focus-visible[b-9g721aef5j] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* Pushed to the far edge, and cut short rather than wrapped: a long organisation name must not
   make the bar two lines tall. */
.lk-narrow-bar-organization[b-9g721aef5j] {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
}

/* On navy, the things drawn by other components take the rail's colours — as the rail itself
   sets them for its own, in SidebarLayout.razor.css. ::deep because the markup is theirs. */
.lk-narrow-bar-rail .lk-narrow-bar-organization[b-9g721aef5j] {
    color: var(--lk-rail-text);
}

.lk-narrow-bar-rail[b-9g721aef5j]  .lk-logo-word {
    color: var(--lk-rail-text);
}

.lk-narrow-bar-rail[b-9g721aef5j]  .lk-narrow-bar-toggle {
    color: var(--lk-rail-text);
}

.lk-narrow-bar-rail[b-9g721aef5j]  .lk-narrow-bar-toggle:hover {
    background: var(--lk-rail-surface);
}

/* ── The drawer ─────────────────────────────────────────── */

/*
    The rail, slid in from the left: its width, its navy and its padding. It leaves a strip of
    the page showing, so there is always backdrop to tap to get out.

    The element is the box and the panel inside is what carries content. A click whose target is
    the <dialog> itself therefore landed on the backdrop, which is how Dialog.razor.js tells the
    two apart.
*/
.lk-navigation-drawer[b-9g721aef5j] {
    box-sizing: border-box;
    width: 15.625rem;
    max-width: calc(100vw - var(--lk-space-12));
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--lk-rail);
    overflow: hidden;
}

/* The same scrim as Dialog and the reconnect overlay. */
.lk-navigation-drawer[b-9g721aef5j]::backdrop {
    background: var(--lk-scrim);
}

.lk-navigation-drawer-panel[b-9g721aef5j] {
    /* Read by NavigationMenu, so the active entry's marker reaches the drawer's edge as it reaches
       the rail's. */
    --lk-rail-padding-x: var(--lk-space-4);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--lk-space-5) var(--lk-rail-padding-x);

    /* The panel scrolls, not the <dialog>. Leaving the panel with the mouse closes the drawer, and
       a scrollbar on the dialog would sit outside the panel, so reaching for it would close the
       menu it scrolls. */
    overflow-y: auto;

    /* Scrolling past the drawer's end stops there, rather than scrolling the page behind it that
       the drawer is covering. */
    overscroll-behavior: contain;

    /* The portal's thin scrollbar (app.css) has a thumb meant for white surfaces, and on the navy
       it drew a pale stripe down the drawer's edge whenever the menu outgrew the screen. */
    scrollbar-color: var(--lk-rail-surface-strong) transparent;
}

/* In a scrolling column the parts would otherwise shrink to fit rather than make it scroll. */
.lk-navigation-drawer-panel > *[b-9g721aef5j] {
    flex-shrink: 0;
}

.lk-navigation-drawer-head[b-9g721aef5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding: 0 0 var(--lk-space-5) var(--lk-space-2);
}

.lk-navigation-drawer-brand[b-9g721aef5j] {
    display: inline-flex;
    border-radius: var(--lk-radius-control);
    text-decoration: none;
}

.lk-navigation-drawer-organization[b-9g721aef5j] {
    padding-bottom: var(--lk-space-4);
}

/* The person and the way out, at the foot of the drawer when the menu is short and under the
   last entry when it is long — the rail's rule, for the rail's reason. */
.lk-navigation-drawer-user[b-9g721aef5j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    margin-top: auto;
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-rail-line);
}

.lk-navigation-drawer-user-link[b-9g721aef5j] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex: 1 1 100%;
    min-width: 0;
    border-radius: var(--lk-radius-control);
    text-decoration: none;
}

.lk-navigation-drawer-user-text[b-9g721aef5j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-navigation-drawer-user-name[b-9g721aef5j] {
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-rail-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-navigation-drawer-user-role[b-9g721aef5j] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-rail-text-mut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Logga ut" with its icon on a row of its own under the person, as in the rail (lyker/arenden#3). */
.lk-navigation-drawer-user[b-9g721aef5j]  .lk-navigation-drawer-signout {
    flex: 1 1 100%;
}

.lk-navigation-drawer-panel .lk-navigation-drawer-user[b-9g721aef5j]  .lk-navigation-drawer-signout .lk-button {
    width: 100%;
    justify-content: center;
    gap: var(--lk-space-2);
    background: var(--lk-rail-surface);
    border: var(--lk-border-hairline) solid var(--lk-rail-line);
    color: var(--lk-rail-text);
}

.lk-navigation-drawer-panel .lk-navigation-drawer-user[b-9g721aef5j]  .lk-navigation-drawer-signout .lk-button:hover {
    background: var(--lk-rail-surface-strong);
}

/* The drawer is navy in both themes, as the rail is, so the other components' markup takes the
   rail's colours here. */
.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-logo-word {
    color: var(--lk-rail-text);
}

.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-avatar-neutral {
    background: var(--lk-rail-surface-strong);
    color: var(--lk-rail-text);
}

.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-navigation-drawer-close,
.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-signout .lk-button {
    color: var(--lk-rail-text-mut);
}

.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-navigation-drawer-close:hover,
.lk-navigation-drawer-panel[b-9g721aef5j]  .lk-signout .lk-button:hover {
    background: var(--lk-rail-surface);
    color: var(--lk-rail-text);
}
/* /Components/NavigationMenu.razor.rz.scp.css */
/*
    The links are rendered by NavLink, so they sit in that component's markup and do not
    carry this component's scope attribute. Every rule that targets a link therefore needs
    ::deep — without it these rules would look correct and do nothing.
*/

.lk-nav[b-em4efasvds] {
    display: flex;
    gap: var(--lk-space-1);
}

.lk-nav-rail[b-em4efasvds] {
    flex-direction: column;
}

.lk-nav-bar[b-em4efasvds] {
    flex-direction: row;
    flex-wrap: wrap;
}

.lk-nav[b-em4efasvds]  .lk-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-nav[b-em4efasvds]  .lk-nav-item.active {
    font-weight: 600;
}

.lk-nav[b-em4efasvds]  .lk-nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* The label may wrap onto a second line in a language with longer words rather than being
   cut off (ADR 0002). */
.lk-nav[b-em4efasvds]  .lk-nav-label {
    min-width: 0;
}

/* ── In the navy rail ───────────────────────────────────── */

.lk-nav-rail[b-em4efasvds]  .lk-nav-item {
    color: var(--lk-rail-text-sec);
}

.lk-nav-rail[b-em4efasvds]  .lk-nav-item:hover {
    background: var(--lk-rail-surface);
    color: var(--lk-rail-text);
}

.lk-nav-rail[b-em4efasvds]  .lk-nav-item.active {
    background: var(--lk-rail-surface-strong);
    color: var(--lk-rail-text);
}

/* The magenta marker reaches out to the edge of the rail. The rail publishes its own
   horizontal padding so this does not have to guess at it. */
.lk-nav-rail[b-em4efasvds]  .lk-nav-item.active::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--lk-rail-padding-x, var(--lk-space-4)));
    top: var(--lk-space-2);
    bottom: var(--lk-space-2);
    width: 0.25rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--lk-magenta);
}

/* ── In the top bar ─────────────────────────────────────── */

.lk-nav-bar[b-em4efasvds]  .lk-nav-item {
    padding: var(--lk-space-2) var(--lk-space-4);
    color: var(--lk-text-sec);
}

.lk-nav-bar[b-em4efasvds]  .lk-nav-item:hover {
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

.lk-nav-bar[b-em4efasvds]  .lk-nav-item.active {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

/* ── Group heading ──────────────────────────────────────── */

/*
    The design's "ADMIN" label over Lyker's own entries, in the same manner as "ORGANISATION"
    over the switcher — same size, weight, tracking and muted rail colour, so the two read as
    the same kind of thing rather than as two labels that happen to be small.

    A <p> and not a heading element: the nav already carries its own label as a landmark, and
    an h2 inside it would put a heading in the document outline for a grouping that is a visual
    aid, not a section of the page.

    No ::deep. This element is written by NavigationMenu itself, unlike .lk-nav-item, which
    NavLink renders.
*/
.lk-nav-group[b-em4efasvds] {
    margin: var(--lk-space-4) 0 var(--lk-space-1);
    padding: 0 var(--lk-space-3);
    font-size: 0.688rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lk-rail-text-mut);
}

/* The first heading needs no space above it — there is nothing for it to separate from. */
.lk-nav-group:first-child[b-em4efasvds] {
    margin-top: 0;
}

/* ── A disabled entry (ADR 0049) ────────────────────────── */

/*
    An entry the reader's company could open and this reader cannot: in its place, visibly off,
    and doing nothing under the pointer. The same 0.45 as a disabled Button, so "off" looks the
    same wherever the portal says it. The hover rules above are cancelled per shell rather than
    with a :not() on each of them, so the enabled rules stay as they were.

    No ::deep for the span's own class selector would be needed — NavigationMenu writes the span
    itself — but the rules it has to beat are ::deep ones, so these are written the same way to
    match their specificity and win by coming later.
*/
.lk-nav[b-em4efasvds]  .lk-nav-item-disabled {
    opacity: 0.45;
    cursor: default;
}

.lk-nav-rail[b-em4efasvds]  .lk-nav-item-disabled:hover {
    background: none;
    color: var(--lk-rail-text-sec);
}

.lk-nav-bar[b-em4efasvds]  .lk-nav-item-disabled:hover {
    background: none;
    color: var(--lk-text-sec);
}
/* /Components/NotFoundComponent.razor.rz.scp.css */
.not-found-home[b-kni8quw4tm] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
    text-decoration: none;
    transition: color var(--lk-transition);
}

.not-found-home:hover[b-kni8quw4tm] {
    color: var(--lk-ink);
}
/* /Components/Notice.razor.rz.scp.css */
.lk-notice[b-kxyflgmmf6] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-5);
    /* The Prototype's own border (KeyDetail.razor:204): the tone colour at 20%, which there is no
       token for. Mixed rather than hardcoded so it follows the theme in both light and dark.
       --lk-notice-tone is what each tone class below sets; the border, the ground and the icon all
       read it, so a tone is one line rather than three rules that can disagree (#731). */
    border: var(--lk-border-hairline) solid color-mix(in srgb, var(--lk-notice-tone) 20%, transparent);
    border-radius: var(--lk-radius-card);
    background: var(--lk-notice-tone-soft);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
    line-height: 1.55;
}

/* The Prototype maps its tone straight onto --{tone} and --{tone}-soft (Notice.razor:22-23). The
   same tokens here, chosen by class rather than built into a variable name. The Prototype's Notice
   has no error tone; the red comes from the keybox's wrong-environment card (BoxDetail.razor:228),
   which draws the same shape by hand (#779). */
.lk-notice-info[b-kxyflgmmf6] {
    --lk-notice-tone: var(--lk-info);
    --lk-notice-tone-soft: var(--lk-info-soft);
}

.lk-notice-warn[b-kxyflgmmf6] {
    --lk-notice-tone: var(--lk-warn);
    --lk-notice-tone-soft: var(--lk-warn-soft);
}

.lk-notice-ok[b-kxyflgmmf6] {
    --lk-notice-tone: var(--lk-ok);
    --lk-notice-tone-soft: var(--lk-ok-soft);
}

.lk-notice-error[b-kxyflgmmf6] {
    --lk-notice-tone: var(--lk-err);
    --lk-notice-tone-soft: var(--lk-err-soft);
}

.lk-notice-content[b-kxyflgmmf6] {
    flex: 1;
    min-width: 0;
}

/* The Prototype's Notice title: 13.5px bold ink, 4px above the text. 13px is the scale's step. */
.lk-notice-title[b-kxyflgmmf6] {
    margin: 0 0 var(--lk-space-1);
    font-weight: 700;
    color: var(--lk-ink);
}

/* The Prototype's 12px above its buttons, 10px between them — the scale's 12px and 8px. */
.lk-notice-actions[b-kxyflgmmf6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

/* ::deep because the svg is Icon's markup, not this component's, so a scoped selector without it
   matches nothing. The rule this was moved from wrote `> :first-child` and never coloured the icon. */
.lk-notice[b-kxyflgmmf6]  .lk-icon {
    color: var(--lk-notice-tone);
    flex: none;
}
/* /Components/OrganizationRequiredComponent.razor.rz.scp.css */
/*
    The sentence shown above content that is rendered read-only. The replacement shape has no
    styling of its own — it is an EmptyState, which already carries it.

    Quiet on purpose: it explains why the screen is as it is, and it is not the thing the reader
    came for. Same weight as the other notes on the key detail, so a screen that shows one of each
    does not look like two different kinds of message.
*/

.lk-organization-required-note[b-pwzaij8q0q] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-tight);
    color: var(--lk-text-mut);
}

/*
    Beside the actions instead of above them, on the same line as the buttons the sentence is
    about — a SectionHeader action row, which is a centred flex row.

    The margin above would lift the text off that line, and without a width the sentence takes
    its natural one and pushes the buttons aside. Both rules used to live on the screens, four
    copies of them (#320); the placement is the component's now, so the screens keep only the
    choice of where the note goes.

    18rem because three of the four copies had it and the fourth had 16rem for no recorded
    reason. One value, chosen once, rather than a fourth guess on the next screen.
*/
.lk-organization-required-note-beside[b-pwzaij8q0q] {
    margin: 0;
    max-width: 18rem;
}
/* /Components/OrganizationSwitcherComponent.razor.rz.scp.css */
/* The menu is positioned against this, so it needs to be the containing block. */
.lk-org-switcher[b-azetjkxx7l] {
    position: relative;
}

.lk-org-rail-switcher[b-azetjkxx7l] {
    width: 100%;
}

.lk-org[b-azetjkxx7l] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    box-sizing: border-box;
    padding: var(--lk-space-2) var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    border: var(--lk-border-hairline) solid transparent;
    font-family: var(--lk-font-ui);
    text-align: left;
}

.lk-org-interactive[b-azetjkxx7l] {
    cursor: pointer;
}

.lk-org-interactive:focus-visible[b-azetjkxx7l] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-org-mark[b-azetjkxx7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--lk-radius-sm);
}

/* The caption and the name sat flush, 0px apart, and read as one cramped block (#964, Martin,
   2026-10-05). One step between them separates a label from its value; the half step was
   tried first and was still too tight. */
.lk-org-text[b-azetjkxx7l] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    min-width: 0;
}

.lk-org-caption[b-azetjkxx7l] {
    font-size: 0.688rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lk-org-name[b-azetjkxx7l] {
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── In the navy rail ───────────────────────────────────── */

.lk-org-rail[b-azetjkxx7l] {
    width: 100%;
    background: var(--lk-rail-surface);
    color: var(--lk-rail-text);
}

.lk-org-rail .lk-org-mark[b-azetjkxx7l] {
    width: 1.875rem;
    height: 1.875rem;
    background: var(--lk-rail-surface-strong);
    color: var(--lk-rail-text);
}

.lk-org-rail .lk-org-caption[b-azetjkxx7l] {
    color: var(--lk-rail-text-mut);
}

.lk-org-rail.lk-org-interactive:hover[b-azetjkxx7l] {
    background: var(--lk-rail-surface-strong);
}

/* ── In the top bar ─────────────────────────────────────── */

.lk-org-bar[b-azetjkxx7l] {
    max-width: 16.25rem;
    background: var(--lk-surface);
    border-color: var(--lk-line-strong);
    color: var(--lk-ink);
}

.lk-org-bar .lk-org-mark[b-azetjkxx7l] {
    width: 1.625rem;
    height: 1.625rem;
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.lk-org-bar.lk-org-interactive:hover[b-azetjkxx7l] {
    background: var(--lk-surface-alt);
}

/* ── The menu ───────────────────────────────────────────── */

/*
    A light surface in both shells: in the rail it is a panel laid over the navy, not a piece
    of it, so it takes the page's surface colours rather than the rail's.

    Above the rail and the top bar, which both sit at 10, and below the dialog overlay at
    1000 — a menu must cover the shell it belongs to and never a modal.
*/
.lk-org-menu[b-azetjkxx7l] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    box-sizing: border-box;
    margin-top: var(--lk-space-1);
    padding: var(--lk-space-1);
    max-height: 20rem;
    overflow-y: auto;
    background: var(--lk-surface);
    border: var(--lk-border-hairline) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    box-shadow: var(--lk-shadow-lg);
}

/* The pill sits at the right-hand end of the bar, so the menu hangs from that edge rather
   than stretching the width of the actions. It opens downward here as it does in the rail,
   which is an assumption rather than a ported behaviour — the Prototype has only one shell.
   #341.

   The floor is wider than the pill on purpose: the pill is only as wide as the organisation
   it happens to be showing, and a menu that inherited that width wrapped "Alla organisationer"
   onto two lines. Longer words in Finnish and the other Nordic languages (ADR 0002) would
   have been worse, and the wrap is not visible in a bUnit test. */
.lk-org-bar-switcher .lk-org-menu[b-azetjkxx7l] {
    left: auto;
    min-width: max(100%, 13rem);
    max-width: 20rem;
}

/* The search box stays put while a long list scrolls under it (#1123). It is TextField's
   markup, so ::deep. Its own background is what hides the rows passing beneath, and the
   negative margin pulls it up over the menu's padding so nothing shows through above it. */
.lk-org-menu[b-azetjkxx7l]  .lk-org-search {
    position: sticky;
    top: calc(-1 * var(--lk-space-1));
    z-index: 1;
    margin-top: calc(-1 * var(--lk-space-1));
    padding-top: var(--lk-space-1);
    padding-bottom: var(--lk-space-1);
    background: var(--lk-surface);
}

.lk-org-menu-empty[b-azetjkxx7l] {
    margin: 0;
    padding: var(--lk-space-2) var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text-mut);
}

.lk-org-menu-item[b-azetjkxx7l] {
    padding: var(--lk-space-2) var(--lk-space-3);
    border-radius: var(--lk-radius-sm);
    background: none;
    border: none;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-org-menu-item:hover[b-azetjkxx7l] {
    background: var(--lk-surface-alt);
}

.lk-org-menu-item:focus-visible[b-azetjkxx7l] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* The same marking the navigation uses for the page you are on, for the same reason. */
.lk-org-menu-item-on[b-azetjkxx7l] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
    font-weight: 600;
}

/* The chevron belongs to the Icon component's markup, so it needs ::deep to be reached. */
[b-azetjkxx7l] .lk-org-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 0.7;
}
/* /Components/OwningOrganizationComponent.razor.rz.scp.css */
/* "Belongs to: ‹organisation›" beside a record's id in the heading (ADR 0084). */
.lk-owning-organization[b-v4p3vmepe6] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    white-space: nowrap;
}

.lk-owning-organization[b-v4p3vmepe6]  .lk-owning-organization-icon {
    color: var(--lk-text-mut);
}
/* /Components/PageErrorBoundary.razor.rz.scp.css */
/*
    The boundary's error state: the banner, and under it the two ways forward.
    The banner owns no outer margin, so the gap between it and the actions is set here.
*/

.lk-page-error[b-kciop6jzqv] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
}

.lk-page-error-actions[b-kciop6jzqv] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.lk-page-error-home[b-kciop6jzqv] {
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.lk-page-error-home:hover[b-kciop6jzqv] {
    text-decoration: underline;
}
/* /Components/PaginationComponent.razor.rz.scp.css */
.lk-pagination[b-fyz5q9kqjg] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    /* Wraps rather than squeezing: the range text grows with the word for "showing", and
       Finnish is the long one (ADR 0002). */
    flex-wrap: wrap;
    /* 20px at the sides, lining the pager up with the rows above it — the Prototype insets both
       by the same amount (app.css .pager and .lrow). It was 16px, which is a whole step off the
       row and reads as a misalignment rather than as a rounding (#528 covers 1-2px, not this). */
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.lk-pagination-range[b-fyz5q9kqjg] {
    /* Takes the slack, so the size picker and the arrows sit together at the far end. */
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* The numbers in "Showing 1–20 of 47", darker and bolder than the words around them, in digits of
   one width so the line does not shuffle as the pages turn. The Prototype's `.pager b` (app.css:169). */
.lk-pagination-value[b-fyz5q9kqjg] {
    font-weight: 600;
    color: var(--lk-text);
    font-variant-numeric: tabular-nums;
}

/* The page-size picker at the pager's height, not a form's. The Prototype draws it 34px tall
   (Keys.razor:102), the same height as the arrow buttons beside it — which here are Button's small
   size. At Select's own 48px it stood a head taller than the arrows it sits with. Only the height:
   the Prototype's select text is 15px in the text colour, not the pager's 13px, and Select's own
   value already matches that. Reached with ::deep because the frame is Select's markup.

   The width is measured in the value's own font rather than fixed, and it cannot follow the content
   instead: Select lays the native select over its frame with position:absolute, so the text never
   sizes the box. A fixed 7.5rem cut "100 / page" off under the chevron (#725). 11ch holds the longest
   option in all six languages, and the two spaces are Select's own left padding and chevron room. */
.lk-pagination[b-fyz5q9kqjg]  .lk-pagination-size {
    flex: none;
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    width: calc(11ch + var(--lk-space-4) + var(--lk-space-10));
}

/* min-height, because that is what Select sets: a plain height would lose to it. */
.lk-pagination[b-fyz5q9kqjg]  .lk-pagination-size .lk-select-frame {
    min-height: var(--lk-control-height-sm);
}

.lk-pagination-steps[b-fyz5q9kqjg] {
    display: flex;
    flex: none;
    gap: var(--lk-space-2);
}
/* /Components/PhoneNumberDialog.razor.rz.scp.css */
/* The sentence above the field: what the number is for. */
.phone-number-dialog-explanation[b-8adcme0gy1] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Components/PolicyLevelsComponent.razor.rz.scp.css */
/* Three pills with a chevron between them, as the design draws the trail. The chevron is a CSS
   pseudo-element rather than an icon component: it is punctuation between two labels, and an icon
   in the markup would put it in the reading order as content. */

.lk-policy-levels[b-vq4uqrz6da] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-policy-level[b-vq4uqrz6da] {
    padding: var(--lk-space-1) var(--lk-space-2);
    border-radius: 999px;
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    white-space: nowrap;
}

/* Between the pills, not inside them. As a plain ::before the chevron sat within the next item's
   padding, so the current level's filled pill read "› Nyckel" with the arrow in the pink. The
   Prototype draws the chevron as its own element between two pills (LendingPolicyCard.razor).
   Positioned into a margin on the item instead, it stays punctuation and stays out of the pill. */
.lk-policy-level + .lk-policy-level[b-vq4uqrz6da] {
    position: relative;
    margin-left: var(--lk-space-4);
}

.lk-policy-level + .lk-policy-level[b-vq4uqrz6da]::before {
    content: "›";
    position: absolute;
    right: 100%;
    width: var(--lk-space-4);
    text-align: center;
    color: var(--lk-text-mut);
    font-weight: 400;
}

/* The level this card is for. Colour and a filled pill, not colour alone. */
.lk-policy-level-current[b-vq4uqrz6da] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}
/* /Components/ReadOnlyFieldComponent.razor.rz.scp.css */
.lk-read-only-field[b-1dhghqcchc] {
    display: block;
}

.lk-read-only-field-label[b-1dhghqcchc] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

/* The frame of a field that cannot be typed into: the sunken surface rather than the raised
   one a TextField uses, so the difference is visible before anyone clicks it. */
.lk-read-only-field-frame[b-1dhghqcchc] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    box-sizing: border-box;
    min-height: var(--lk-field-height);
    padding: 0 var(--lk-space-3);
    background: var(--lk-surface-alt);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
}

.lk-read-only-field-value[b-1dhghqcchc] {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    color: var(--lk-text);
    /* A long address wraps rather than pushing the badge out of the card. */
    overflow-wrap: anywhere;
}

.lk-read-only-field-empty[b-1dhghqcchc] {
    color: var(--lk-text-mut);
}

[b-1dhghqcchc] .lk-read-only-field-icon {
    flex: 0 0 auto;
    color: var(--lk-text-mut);
}

/* The trailing badge keeps its width; the value wraps before it does. */
.lk-read-only-field-trailing[b-1dhghqcchc] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
/* /Components/ReconnectDialog.razor.rz.scp.css */
/*
    The reconnect dialog (#197), styled as a floating card on a dimmed page. The tokens it
    reads are published by the static ThemeProvider around it in App.razor (#1006): without
    one every var() here was undefined and the card drew as bare text.

    Which paragraph shows is decided by the state classes Blazor puts on the dialog, so the
    visibility rules come first and are the part of this file that must match the template's
    class names exactly. The rest is the Prototype's look, carried onto the tokens.

    Sizes the scale does not carry (the 84px pulse, the 44px tile, the 400px card) are written
    out, as EmptyState and ErrorBanner write out theirs.
*/

.components-reconnect-first-attempt-visible[b-5bis2nap1d],
.components-reconnect-repeated-attempt-visible[b-5bis2nap1d],
.components-reconnect-failed-visible[b-5bis2nap1d],
.components-pause-visible[b-5bis2nap1d],
.components-resume-failed-visible[b-5bis2nap1d],
.lk-reconnect-rejected-visible[b-5bis2nap1d] {
    display: none;
}

/* Ours (#1006): the server no longer knows the circuit, and the page is about to reload. */
.lk-reconnect.lk-reconnect-rejected .lk-reconnect-rejected-visible[b-5bis2nap1d] {
    display: block;
}

.lk-reconnect.lk-reconnect-rejected .components-reconnect-first-attempt-visible[b-5bis2nap1d],
.lk-reconnect.lk-reconnect-rejected .components-reconnect-repeated-attempt-visible[b-5bis2nap1d],
.lk-reconnect.lk-reconnect-rejected .lk-reconnect-rings[b-5bis2nap1d] {
    display: none;
}

.lk-reconnect.components-reconnect-show .components-reconnect-first-attempt-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-paused .components-pause-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-resume-failed .components-resume-failed-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-failed .components-reconnect-failed-visible[b-5bis2nap1d] {
    display: block;
}

/* The button rows are flex, but only in the state that owns them. */
.lk-reconnect.components-reconnect-failed .lk-reconnect-buttons.components-reconnect-failed-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-paused .lk-reconnect-buttons.components-pause-visible[b-5bis2nap1d],
.lk-reconnect.components-reconnect-resume-failed .lk-reconnect-buttons.components-resume-failed-visible[b-5bis2nap1d] {
    display: flex;
}

/* The pulse means "trying". It stops when trying has stopped. */
.lk-reconnect.components-reconnect-failed .lk-reconnect-rings[b-5bis2nap1d],
.lk-reconnect.components-reconnect-paused .lk-reconnect-rings[b-5bis2nap1d],
.lk-reconnect.components-reconnect-resume-failed .lk-reconnect-rings[b-5bis2nap1d] {
    display: none;
}

.lk-reconnect[b-5bis2nap1d] {
    width: min(400px, calc(100vw - 2 * var(--lk-space-6)));
    margin: 22vh auto;
    padding: var(--lk-space-8) var(--lk-space-8) var(--lk-space-6);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: 18px;
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    box-shadow: var(--lk-shadow-lg);
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: lk-reconnect-fade-out-b-5bis2nap1d 0.4s both;
}

.lk-reconnect[open][b-5bis2nap1d] {
    animation: lk-reconnect-slide-up-b-5bis2nap1d 0.9s cubic-bezier(0.05, 0.89, 0.25, 1.02), lk-reconnect-fade-in-b-5bis2nap1d 0.4s ease-in-out;
    animation-fill-mode: both;
}

.lk-reconnect[b-5bis2nap1d]::backdrop {
    background: var(--lk-scrim);
    backdrop-filter: blur(3px);
    animation: lk-reconnect-fade-in-b-5bis2nap1d 0.4s ease-in-out;
}

.lk-reconnect-container[b-5bis2nap1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lk-space-2);
}

.lk-reconnect-logo[b-5bis2nap1d] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: var(--lk-space-1);
}

.lk-reconnect-mark[b-5bis2nap1d] {
    position: relative;
    z-index: 1;
    display: inline-flex;
}

.lk-reconnect-rings span[b-5bis2nap1d] {
    position: absolute;
    inset: 0;
    margin: auto;
    border: var(--lk-border-thick) solid var(--lk-magenta);
    border-radius: 50%;
    animation: lk-reconnect-ring-b-5bis2nap1d 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lk-reconnect-rings span:nth-child(2)[b-5bis2nap1d] {
    animation-delay: -0.9s;
}

.lk-reconnect p[b-5bis2nap1d] {
    margin: 0;
    text-align: center;
}

.lk-reconnect-title[b-5bis2nap1d] {
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--lk-ink);
}

.lk-reconnect-hint[b-5bis2nap1d] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--lk-text-sec);
}

.lk-reconnect-buttons[b-5bis2nap1d] {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

@keyframes lk-reconnect-slide-up-b-5bis2nap1d {
    0% { transform: translateY(26px) scale(0.97); }
    100% { transform: translateY(0); }
}

@keyframes lk-reconnect-fade-in-b-5bis2nap1d {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes lk-reconnect-fade-out-b-5bis2nap1d {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes lk-reconnect-ring-b-5bis2nap1d {
    0% { width: 44px; height: 44px; opacity: 0; }
    10% { opacity: 0.7; }
    100% { width: 84px; height: 84px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lk-reconnect[b-5bis2nap1d],
    .lk-reconnect[open][b-5bis2nap1d],
    .lk-reconnect[b-5bis2nap1d]::backdrop,
    .lk-reconnect-rings span[b-5bis2nap1d] {
        animation: none;
        opacity: 1;
    }
}
/* /Components/RecordId.razor.rz.scp.css */
/* Small and out of the way: an id is read by nobody and copied by support. Tokens only. */

.lk-record-id[b-9t96t4h4rl] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.lk-record-id-label[b-9t96t4h4rl] {
    font-weight: 600;
    white-space: nowrap;
}

/* The guid in the mono face the design uses for ids; it may break anywhere rather than overflow. */
.lk-record-id-value[b-9t96t4h4rl] {
    font-family: var(--lk-font-mono);
    font-size: var(--lk-font-size-label);
    overflow-wrap: anywhere;
    color: var(--lk-text-sec);
}

.lk-record-id-copy[b-9t96t4h4rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: var(--lk-space-1);
    border: none;
    border-radius: var(--lk-radius-sm);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-record-id-copy:hover[b-9t96t4h4rl] {
    background: var(--lk-surface-alt);
    color: var(--lk-text);
}

.lk-record-id-copy:focus-visible[b-9t96t4h4rl] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-record-id-copied[b-9t96t4h4rl] {
    white-space: nowrap;
}
/* /Components/RemindersComponent.razor.rz.scp.css */
/* The same chrome as LendingPolicyComponent — the two cards sit under each other and any
   difference between them reads as a mistake rather than as a distinction. */

/* The head's row: the disclosure, grown to fill it, and the actions a settings tab puts beside
   it. The rule under an open head is drawn here so it runs under the actions too. */
.lk-reminders-row[b-azfbo5fmae] {
    display: flex;
    align-items: center;
}

.lk-reminders-row-open[b-azfbo5fmae] {
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-reminders-head-actions[b-azfbo5fmae] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--lk-space-2);
    padding-right: var(--lk-space-5);
}

.lk-reminders-head[b-azfbo5fmae] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex: 1 1 auto;
    min-width: 0;
    /* Even top and bottom: the head is a row of its own while the card is closed, and the Prototype
       pads it 15px both ways around a 32px expand button (LendingPolicyCard.razor). */
    padding: var(--lk-space-4) var(--lk-space-5);
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.lk-reminders-head:focus-visible[b-azfbo5fmae] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: -2px;
    border-radius: var(--lk-radius-card);
}

.lk-reminders-mark[b-azfbo5fmae] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--lk-magenta-ink);
}

.lk-reminders-title[b-azfbo5fmae] {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: 0.969rem;
    color: var(--lk-ink);
}

/* Magenta, as the Prototype draws it. */
.lk-reminders-context[b-azfbo5fmae] {
    color: var(--lk-magenta-ink);
}

/* The Prototype's .expander (app.css:216): a 32px square the chevron sits centred in, secondary
   text, a soft ground under the pointer. It was the bare 16px glyph in muted text, which left the
   closed card 11px lower than the Prototype's and the one control that opens it hard to see
   (measured 2026-09-14). The whole head stays the target; this only draws it. */
.lk-reminders-chevron[b-azfbo5fmae] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--lk-control-height-sm);
    height: var(--lk-control-height-sm);
    margin-left: var(--lk-space-1);
    border-radius: var(--lk-radius-sm);
    color: var(--lk-text-sec);
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-reminders-head:hover .lk-reminders-chevron[b-azfbo5fmae] {
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

.lk-reminders-head[aria-expanded="true"] .lk-reminders-chevron[b-azfbo5fmae] {
    transform: rotate(180deg);
}

/* One grid for the timing fields and a row list for the channels — the Prototype has no sub-cards
   here either. */
.lk-reminders-grid[b-azfbo5fmae] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lk-space-4);
}

/* ::deep because the class is handed to Select, whose root wears Select's scope. Half the row less
   half the gap, so its right edge lines up with the left column's below it. */
.lk-reminders-grid[b-azfbo5fmae]  .lk-reminders-interval {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--lk-space-2));
}

@media (max-width: 60rem) {
    .lk-reminders-grid[b-azfbo5fmae] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lk-reminders-grid[b-azfbo5fmae]  .lk-reminders-interval {
        max-width: none;
    }
}

/* Channels are rows divided by a rule, as the design draws them. */
.lk-reminders-channels[b-azfbo5fmae] {
    margin-top: var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-reminders-channels .lk-reminders-channel + .lk-reminders-channel[b-azfbo5fmae] {
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.lk-reminders-body[b-azfbo5fmae] {
    padding: var(--lk-space-5);
}

/* The master switch, in the design's grey box: it decides whether the fields below apply. */
.lk-reminders-switch-row[b-azfbo5fmae] {
    margin-bottom: var(--lk-space-4);
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.lk-reminders-switch-text[b-azfbo5fmae] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.lk-reminders-switch-label[b-azfbo5fmae] {
    font-weight: 600;
    color: var(--lk-text);
}

.lk-reminders-switch-note[b-azfbo5fmae] {
    margin-top: var(--lk-space-1);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.lk-reminders-state[b-azfbo5fmae] {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.lk-reminders-fields[b-azfbo5fmae] {
    display: grid;
    gap: var(--lk-space-4);
}

.lk-reminders-channel[b-azfbo5fmae] {
    padding: var(--lk-space-3) 0;
}

/* Dimmed as well as disabled: opacity alone carries the state only to somebody who can see it,
   and the controls underneath are disabled in their own right. */
.lk-reminders-fields-inactive[b-azfbo5fmae] {
    opacity: 0.45;
}

.lk-reminders-wide[b-azfbo5fmae] {
    grid-column: 1 / -1;
}

.lk-reminders-channel[b-azfbo5fmae] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* A channel the organisation has not enabled: the whole row dims, not only the switch. The text
   staying at full strength read as an available option with a broken control. */
.lk-reminders-channel-off .lk-reminders-switch-label[b-azfbo5fmae],
.lk-reminders-channel-off .lk-reminders-switch-note[b-azfbo5fmae] {
    color: var(--lk-text-mut);
}

.lk-reminders-channel-off[b-azfbo5fmae] {
    opacity: 0.55;
}

[b-azfbo5fmae] .lk-reminders-levels {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
/* /Components/ReportChart.razor.rz.scp.css */
/* The report's bar chart: tokens only, as every drawing in the portal (ADR 0007 point 8). */

.report-chart[b-cm84aqvfw9] {
    width: 100%;
}

.report-chart-svg[b-cm84aqvfw9] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 140;
    /* The drawing scales to the card's width, and on a wide screen that made it 350px tall
       (#1407): capped, the bars squeeze down instead (preserveAspectRatio="none"). */
    max-height: 12rem;
}

/* One cell per bar, so each label sits under its own bar whatever the width. */
.report-chart-labels[b-cm84aqvfw9] {
    display: flex;
    margin: var(--lk-space-1) auto 0;
}

.report-chart-bar[b-cm84aqvfw9] {
    fill: var(--lk-magenta);
    opacity: 0.85;
}

.report-chart-bar:hover[b-cm84aqvfw9] {
    opacity: 1;
}

.report-chart-axis[b-cm84aqvfw9] {
    stroke: var(--lk-line);
    stroke-width: 1;
}

.report-chart-label[b-cm84aqvfw9] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}
/* /Components/ReportStatCard.razor.rz.scp.css */
/* The report's summary card: KeyboxStatCard's rules, on this component's own inner element. */

.report-stat-inner[b-08v7bm6c3v] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-card);
}

.report-stat-label[b-08v7bm6c3v] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    letter-spacing: 0.0375rem;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

.report-stat-value[b-08v7bm6c3v] {
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-stat);
    line-height: normal;
    color: var(--lk-ink);
    font-variant-numeric: tabular-nums;
}

.report-stat-inner-warn[b-08v7bm6c3v] {
    background: var(--lk-warn-soft);
    box-shadow: 0 0 0 var(--lk-border-hairline) var(--lk-warn);
}

.report-stat-inner-warn .report-stat-value[b-08v7bm6c3v] {
    color: var(--lk-warn);
}
/* /Components/ResellerMarkComponent.razor.rz.scp.css */
/* The rail stays navy in both themes, so the line and the label use the rail's own tokens. */

.lk-reseller-mark[b-95kn702ibt] {
    display: grid;
    gap: var(--lk-space-2);
    justify-items: start;
    margin-bottom: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-rail-line);
}

.lk-reseller-mark-label[b-95kn702ibt] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-rail-text-mut);
}

/* About as tall as the rail's own text, and never wider than the rail. */
.lk-reseller-mark-image[b-95kn702ibt] {
    display: block;
    max-height: 1.75rem;
    max-width: 100%;
    width: auto;
    height: auto;
}
/* /Components/ReturnKeyDialog.razor.rz.scp.css */
/* Lifted out of LoanMainPage.razor.css with the dialog (#850). */

/* ── The return dialog ──────────────────────────────────── */

/* A description list, because that is what these are: a label and the value it names. The rows
   read as "Key: 996" to a screen reader without anything being written to say so. */
.loan-return-summary[b-qytmwso1y1] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lk-space-2) var(--lk-space-4);
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.loan-return-summary dt[b-qytmwso1y1] {
    color: var(--lk-text-sec);
}

.loan-return-summary dd[b-qytmwso1y1] {
    margin: 0;
    font-weight: 600;
    color: var(--lk-text);
}

/* The choice of who handed the key back, under the summary it belongs to. */
.loan-return-returner[b-qytmwso1y1] {
    display: grid;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-5);
}

/* Who gets the receipt, and the box that sends none (S3). Under the returner, which decides it. */
.loan-return-receipt[b-qytmwso1y1] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-5);
}

.loan-return-receipt-line[b-qytmwso1y1] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
}

.loan-return-error[b-qytmwso1y1] {
    margin: var(--lk-space-4) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Components/RowActions.razor.rz.scp.css */
/* A list row's actions (#1327): one visible action and ⋯, only ⋯ (and a pending "Svara") below 90rem. */

.lk-row-actions[b-jo4rv7q1s4] {
    position: relative;
    display: inline-flex;
    gap: var(--lk-space-2);
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.lk-row-actions-icon[b-jo4rv7q1s4],
.lk-row-actions-more[b-jo4rv7q1s4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-control-height-sm);
    height: var(--lk-control-height-sm);
    padding: 0;
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text-sec);
    cursor: pointer;
}

.lk-row-actions-icon:hover[b-jo4rv7q1s4],
.lk-row-actions-more:hover[b-jo4rv7q1s4],
.lk-row-actions-more[aria-expanded="true"][b-jo4rv7q1s4] {
    color: var(--lk-text);
    border-color: var(--lk-text-mut);
}

.lk-row-actions-icon:focus-visible[b-jo4rv7q1s4],
.lk-row-actions-more:focus-visible[b-jo4rv7q1s4],
.lk-row-actions-item:focus-visible[b-jo4rv7q1s4],
.lk-row-actions-link:focus-visible[b-jo4rv7q1s4] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-row-actions-link[b-jo4rv7q1s4] {
    display: inline-flex;
    gap: var(--lk-space-1);
    align-items: center;
    color: var(--lk-magenta-ink);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
}

/* The click outside: a transparent layer under the menu over the whole window. A popover in the
   top layer when the script shows it (the row's clip-path would cut it to the row otherwise). */
.lk-row-actions-backdrop[b-jo4rv7q1s4] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.lk-row-actions-backdrop[popover][b-jo4rv7q1s4] {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* A popover in the top layer, placed by RowActions.razor.js — above the row's clip-path and the
   cell's overflow. Hidden until placed, so it never flashes at the corner. The popover's own
   defaults (centred, inset 0) give way to the script's top and left. */
.lk-row-actions-menu[b-jo4rv7q1s4] {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    margin: 0;
    overflow: visible;
    visibility: hidden;
    z-index: 21;
    display: grid;
    min-width: 13rem;
    padding: var(--lk-space-1);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-md);
    text-align: left;
}

/* When the script could not place it: under the button inside the row, as before #1327's fix. */
.lk-row-actions-menu-inline[b-jo4rv7q1s4] {
    position: absolute;
    top: calc(100% + var(--lk-space-1));
    right: 0;
    left: auto;
    visibility: visible;
}

.lk-row-actions-item[b-jo4rv7q1s4] {
    display: flex;
    gap: var(--lk-space-2);
    align-items: center;
    width: 100%;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: none;
    border-radius: var(--lk-radius-control);
    background: none;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lk-row-actions-item:hover:not(:disabled)[b-jo4rv7q1s4] {
    background: var(--lk-surface-alt);
}

.lk-row-actions-item:disabled[b-jo4rv7q1s4] {
    color: var(--lk-text-mut);
    cursor: default;
}

.lk-row-actions-item-destructive[b-jo4rv7q1s4] {
    color: var(--lk-err);
}

.lk-row-actions-divider[b-jo4rv7q1s4] {
    height: var(--lk-border-hairline);
    margin: var(--lk-space-1) var(--lk-space-2);
    background: var(--lk-line);
}

/* Wide: the first action stands on the row, so the menu does not repeat it. */
.lk-row-actions-item-narrow[b-jo4rv7q1s4] {
    display: none;
}

/* Narrow (below 1440 px): only ⋯ and a pending question stay on the row (rule 3). */
@media (max-width: 89.99rem) {
    .lk-row-actions-primary[b-jo4rv7q1s4] {
        display: none;
    }

    .lk-row-actions-item-narrow[b-jo4rv7q1s4] {
        display: flex;
    }
}

/* A ⋯ whose menu would hold only the action already on the row: hidden on a wide row. */
@media (min-width: 90rem) {
    .lk-row-actions-more-narrow[b-jo4rv7q1s4] {
        display: none;
    }
}
/* /Components/SaveButtonComponent.razor.rz.scp.css */
/* The button and, beside it, the status element a screen reader hears. The status is hidden
   visually by the shared utility; this only keeps the two from stacking. */
.lk-save-button[b-k4ho2618jo] {
    display: inline-flex;
    align-items: center;
}
/* /Components/SectionHeader.razor.rz.scp.css */
/*
    The actions drop to their own row before the heading is squeezed.

    Without the wrap they competed with the title for the same row, and the title is the half
    that cannot give: a greeting is one long unbreakable token when the account has no name
    claim and falls back to the e-mail address (#211). At the widths this is actually looked
    at, "Hej martin.bjorkvall@schotte.se 👋" broke across three lines — the greeting, the
    address, and the waving hand alone on the last one — while the design fitted it on one.

    flex-wrap on the container and flex-shrink: 0 on the actions, rather than a breakpoint:
    where the wrap happens depends on how long the name is, and no width knows that.
*/
.lk-section-header[b-h8ecj9rn0b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--lk-space-4);
    margin-bottom: var(--lk-space-5);
}

/*
    The heading gets a whole line before the actions get any of it.

    min-width: max-content is what does it. flex-wrap alone was not enough: a flex item with
    min-width: 0 shrinks as far as it is told to, so the actions kept their place on the row and
    the heading wrapped instead — "Hej", the address, and the waving hand on three lines. With
    max-content the text refuses to go below its single-line width, so the line cannot hold both
    and the actions move down. Decision by @martin 2026-09-02: sooner the buttons on their own
    row than three lines of greeting.

    It only bites when the greeting is long, which is when the account has no name claim and it
    falls back to the whole e-mail address (#211). A "Hej Martin" leaves room for both and
    nothing moves.

    Released again below 56rem. max-content cannot shrink, so on a screen narrower than the
    heading itself it would push the page sideways — and a horizontal scrollbar is worse than a
    wrapped greeting. 56rem is where this heading stops fitting beside the rail; the phone
    answer proper is still #198.
*/
.lk-section-header-text[b-h8ecj9rn0b] {
    flex: 1 1 auto;
    min-width: max-content;
}

@media (max-width: 56rem) {
    .lk-section-header-text[b-h8ecj9rn0b] {
        min-width: 0;
    }
}

.lk-section-header-eyebrow[b-h8ecj9rn0b] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-eyebrow);
    /* normal, not a ratio, and not the body's 1.6. The design sets no line-height on the header
       block at all, so each line takes its own face's metrics. Measured side by side at 1920 the
       eyebrow was 18px tall against the design's 14, the heading 30 against 35 and the subtitle
       23 against 17 — the whole block on a different rhythm. */
    line-height: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lk-magenta-ink);
}

/* One rule for every level: the level says where the section sits, the styling says how
   it looks, and the two are deliberately not tied together. */
.lk-section-header-title[b-h8ecj9rn0b] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title);
    letter-spacing: -0.02em;
    line-height: normal;
    color: var(--lk-ink);
}

/*
    A heading with something beside it gets a row to share. The design's gap is 12px, and it
    wraps rather than pushing the badge off the edge when the name is long.

    The element only exists when there is an aside, so every other heading in the portal keeps
    the markup it had. That matters here: min-width: max-content above is a tuned rule with a
    recorded decision behind it, and a layout change in this component reaches every screen.
*/
.lk-section-header-heading[b-h8ecj9rn0b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
}

/* The badge keeps its own type — it is not part of the 26px display heading it sits next to. */
.lk-section-header-aside[b-h8ecj9rn0b] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 400;
    letter-spacing: normal;
}

/*
    Emoji do not follow the display font's weight or letter-spacing, so the flourish is left
    at its natural size rather than stretched to match the heading.

    The gap is a margin rather than a space in the markup: a literal space would be left
    behind in every heading that has no decoration, which is most of them.
*/
.lk-section-header-decoration[b-h8ecj9rn0b] {
    margin-left: var(--lk-space-1);
    font-weight: 400;
    letter-spacing: normal;
}

.lk-section-header-subtitle[b-h8ecj9rn0b] {
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: normal;
    color: var(--lk-text-sec);
}

.lk-section-header-actions[b-h8ecj9rn0b] {
    display: flex;
    /* Whole buttons move to the next row when they do not fit; a label never breaks inside a
       button (Button.razor.css). The report page's four actions at 390px broke "Ladda ner Excel"
       over three lines before this (project agent 2026-10-16). */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
    flex: 0 0 auto;
}

/* On a narrow screen the actions drop under the heading rather than squeezing it. */
@media (max-width: 40rem) {
    .lk-section-header[b-h8ecj9rn0b] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/SegmentedControl.razor.rz.scp.css */
/* The design's Segmented and the Prototype's .seg (app.css:180-182): a sunken track, 4px of
   padding, and the chosen item raised on a surface with the small shadow. Tokens only; the
   Prototype's 8px 18px item padding is the scale's space-2 and space-4 (#528). */

.lk-segmented[b-70d4pbd4sn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--lk-space-1);
    padding: var(--lk-space-1);
    border-radius: var(--lk-radius-control);
    background: var(--lk-sunken);
}

.lk-segmented-item[b-70d4pbd4sn] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) var(--lk-space-4);
    border: 0;
    border-radius: var(--lk-radius-sm);
    background: transparent;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text-sec);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition), box-shadow var(--lk-transition);
}

.lk-segmented-item:hover:not(:disabled)[b-70d4pbd4sn] {
    color: var(--lk-ink);
}

/* Read-only (#745), as Toggle draws it: dimmed, and the pointer says it will not respond. */
.lk-segmented-item:disabled[b-70d4pbd4sn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-segmented-item-on[b-70d4pbd4sn] {
    background: var(--lk-surface);
    color: var(--lk-ink);
    box-shadow: var(--lk-shadow-sm);
}

/* focus-visible rather than focus, as on Button: the keyboard user needs the ring, the mouse user
   should not get one after every click (ADR 0007). The ring sits outside the raised item so it is
   not mistaken for the raised state. */
.lk-segmented-item:focus-visible[b-70d4pbd4sn] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.lk-segmented-label[b-70d4pbd4sn] {
    min-width: 0;
}
/* /Components/Select.razor.rz.scp.css */
/*
    The frame, the label and the message below are the same shapes as TextField's, and they
    are written out again here rather than shared.

    The reason: CSS isolation scopes every rule to its own component, so sharing would mean
    lifting the field frame into app.css and rewriting TextField to use it. That is a change
    to a component that is already built and tested, for the benefit of the second control
    that needs it.

    It is a duplication with a real cost — change the focus ring here and TextField keeps the
    old one. Worth consolidating when a third control wants the same frame, which is the point
    at which the rewrite pays for itself. Written here rather than filed as an issue: there is
    nothing for anyone to go and do until that third control exists, and this is where whoever
    builds it will be standing.
*/

.lk-select[b-rjti2r8w5u] {
    display: block;
}

.lk-select-label[b-rjti2r8w5u] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

/* Off the screen but still in the accessibility tree, so the control keeps its name. Not
   display:none and not visibility:hidden — both remove it from the tree as well, which is the
   thing this must not do. */
.lk-select-label-hidden[b-rjti2r8w5u] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lk-select-required[b-rjti2r8w5u] {
    margin-left: var(--lk-space-0-5);
    color: var(--lk-magenta-ink);
}

.lk-select-frame[b-rjti2r8w5u] {
    /* The chevron is positioned over the frame rather than laid beside the select, so that the
       select fills the whole box and a click anywhere in it opens the list. Laid out as a flex
       sibling it took its own column, and the strip under it belonged to the frame — clicking the
       arrow, which is the obvious place to click, did nothing at all. */
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    box-sizing: border-box;
    min-height: var(--lk-field-height);
    padding: 0 var(--lk-space-4);
    background: var(--lk-surface);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    transition: border-color var(--lk-transition), box-shadow var(--lk-transition);
}

/* Soft glow, matching TextField — see the note there for why it is not --lk-focus. On
   :focus-visible rather than :focus-within (ADR 0007 point 2), so the browser decides when the ring
   shows. Chrome still matches a <select> after a mouse click (seen in Chrome 152, #1433), so there
   the ring shows for the mouse as well; that is Chrome's call, not something this rule can undo. */
.lk-select-frame:has(.lk-select-input:focus-visible)[b-rjti2r8w5u] {
    border-color: var(--lk-magenta);
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-magenta-soft);
}

.lk-select-input[b-rjti2r8w5u] {
    min-width: 0;
    /* Laid over the whole frame, not sat inside it. As a flex child the select covered only its own
       line box, so the frame's padding, the space above and below the text, and the icon all
       swallowed the click — the list opened only when the text itself was hit. Covering the frame
       makes every pixel inside the border open it, which is what a box with a border and an arrow
       promises.

       An absolutely positioned box is laid against its ancestor's padding box, so the frame's own
       padding no longer indents the value — the select has to carry that itself. Left matches the
       frame's 16px so a select and a text field line their content up; right leaves room for the
       chevron drawn over it — the Prototype's 40px, because 20px let a long option run under it. */
    position: absolute;
    inset: 0;
    width: 100%;
    /* The browser's own arrow cannot be styled and sits somewhere different in each one, so
       it is removed and replaced with the design's chevron. */
    appearance: none;
    border: 0;
    padding: 0 var(--lk-space-10) 0 var(--lk-space-4);
    background: transparent;
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    color: var(--lk-text);
    cursor: pointer;
}

.lk-select-input:focus[b-rjti2r8w5u] {
    /* The frame carries focus for the whole control. */
    outline: none;
}

.lk-select-input:disabled[b-rjti2r8w5u] {
    cursor: not-allowed;
}

/* The list itself is drawn by the operating system, which does not inherit the page's
   colours. Setting both keeps a dark-theme portal from opening a white list. */
.lk-select-input option[b-rjti2r8w5u] {
    background: var(--lk-surface);
    color: var(--lk-text);
}

.lk-select-message[b-rjti2r8w5u] {
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-select-message-error[b-rjti2r8w5u] {
    color: var(--lk-err);
}

/* ── States ─────────────────────────────────────────────── */

.lk-select-invalid .lk-select-frame[b-rjti2r8w5u] {
    border-color: var(--lk-err);
}

.lk-select-invalid .lk-select-frame:has(.lk-select-input:focus-visible)[b-rjti2r8w5u] {
    border-color: var(--lk-err);
}

.lk-select-disabled .lk-select-frame[b-rjti2r8w5u] {
    background: var(--lk-surface-alt);
    opacity: 0.6;
}

/* ::deep, because these belong to the Icon component's markup and do not carry this
   component's scope attribute. Without it the rules would silently do nothing. */
/* Above the select, which now covers the frame — and transparent to the pointer, so clicking the
   icon opens the list rather than landing on decoration. */
[b-rjti2r8w5u] .lk-select-icon {
    position: relative;
    z-index: 1;
    color: var(--lk-text-mut);
    pointer-events: none;
}

/* Room for the icon, so the chosen value does not start underneath it. :has() rather than a
   modifier class: whether there is an icon is already expressed by the markup. */
.lk-select-frame:has(.lk-select-icon) .lk-select-input[b-rjti2r8w5u] {
    padding-left: calc(var(--lk-space-4) + 18px + var(--lk-space-2));
}

/* Over the select's right edge, and still pointer-events:none so it never swallows the click —
   now the element underneath is the select itself rather than the frame. */
[b-rjti2r8w5u] .lk-select-chevron {
    position: absolute;
    z-index: 1;
    right: var(--lk-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--lk-text-mut);
    pointer-events: none;
}
/* /Components/SiteLocationFormComponent.razor.rz.scp.css */
/* "Hitta hit" (#1323 step C): the place and the hours on the left, the app on the right, as the mockup. */

/*
    Side by side when both columns fit the space the page gives the form, stacked otherwise (#1516).
    A wrapping row rather than a grid with a viewport breakpoint: a flex item never shrinks below
    its content, and the row wraps as soon as the two contents do not fit, so the left column can
    no longer run under the right one when a sidebar narrows the page. The bases keep the
    mockup's 1.6 : 1 split; the left one is about the width the opening hours need.
*/
.site-form[b-7ua7jcgplq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-5);
    align-items: flex-start;
}

.site-form-main[b-7ua7jcgplq] {
    flex: 1.6 1 29.5rem;
    display: grid;
    gap: var(--lk-space-5);
}

.site-form-side[b-7ua7jcgplq] {
    flex: 1 1 18.5rem;
}

.site-fields[b-7ua7jcgplq],
.site-app[b-7ua7jcgplq] {
    display: grid;
    gap: var(--lk-space-3);
}

.site-row[b-7ua7jcgplq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-3);
}

@media (max-width: 32rem) {
    .site-row[b-7ua7jcgplq] {
        grid-template-columns: 1fr;
    }
}

.site-hint[b-7ua7jcgplq] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.site-hours[b-7ua7jcgplq] {
    display: grid;
    gap: var(--lk-space-2);
}

.site-hours-row[b-7ua7jcgplq] {
    display: grid;
    grid-template-columns: 6rem auto 1fr 1fr;
    gap: var(--lk-space-3);
    align-items: center;
    min-height: 2.5rem;
}

/* On a phone the day and its switch share a line, and the two times go under them. */
@media (max-width: 32rem) {
    .site-hours-row[b-7ua7jcgplq] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .site-hours-row[b-7ua7jcgplq]  .lk-toggle {
        justify-self: end;
    }
}

.site-hours-day[b-7ua7jcgplq],
.site-app-title[b-7ua7jcgplq],
.site-preview-name[b-7ua7jcgplq] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.site-hours-closed[b-7ua7jcgplq] {
    grid-column: span 2;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.site-app-switch[b-7ua7jcgplq] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.site-preview-head[b-7ua7jcgplq] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.site-preview[b-7ua7jcgplq] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: center;
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
}

.site-preview-text[b-7ua7jcgplq] {
    flex: 1 1 auto;
    min-width: 0;
}

.site-preview-button[b-7ua7jcgplq] {
    flex: 0 0 auto;
    padding: var(--lk-space-1) var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-pill);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-text);
}

.site-error[b-7ua7jcgplq] {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Components/Skeleton.razor.rz.scp.css */
.lk-skeleton[b-xrq8sutiee] {
    display: block;
    background: linear-gradient(
        90deg,
        var(--lk-skeleton-base) 0%,
        var(--lk-skeleton-highlight) 40%,
        var(--lk-skeleton-base) 80%
    );
    background-size: 800px 100%;
    animation: lk-shimmer-b-xrq8sutiee 1.4s linear infinite;
}

/* A sweeping highlight across a whole page of placeholders is a lot of movement for
   someone who is sensitive to it. The shape still reads as "not here yet" without it. */
@media (prefers-reduced-motion: reduce) {
    .lk-skeleton[b-xrq8sutiee] {
        animation: none;
        background: var(--lk-skeleton-base);
    }
}

@keyframes lk-shimmer-b-xrq8sutiee {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}
/* /Components/SoftwareCardComponent.razor.rz.scp.css */
/* The versions with the page's action beside them, wrapping under them when the card is narrow. */
.software-card-body[b-flclwydsqb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-5);
    padding: var(--lk-space-5);
}

.software-card-facts[b-flclwydsqb] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--lk-space-8);
    /* 220px and the 0.5px tracking below are literals on purpose: the Prototype uses them on the
       cabinet's and the kiosk's cards only (BoxDetail.razor, KioskDetail.razor), and the scale has
       no width or tracking tokens. A few cards do not make a token (ADR 0063, #811). */
    min-width: 220px;
    margin: 0;
}

.software-card-facts dt[b-flclwydsqb] {
    margin-bottom: var(--lk-space-1);
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-eyebrow);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.software-card-facts dd[b-flclwydsqb] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
    color: var(--lk-ink);
    font-variant-numeric: tabular-nums;
}

.software-card-muted[b-flclwydsqb] {
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-ui);
}

.software-card-error[b-flclwydsqb] {
    padding: 0 var(--lk-space-5) var(--lk-space-5);
}
/* /Components/SortableColumnHeader.razor.rz.scp.css */
/* Block padding only. The inline padding is the list's own (.lk-list-table in app.css: 8px, 20px on
   the first and last cell), so a sortable heading starts where every other cell in its column
   starts. This used to be `padding: 0`, and with the button's own 12px inside it the sortable
   headings sat 4px right of their column — 12px on the first one — while the plain headings beside
   them lined up. The Prototype's .sort-h has no padding and aligns exactly (2026-09-14).

   4px above and below, not 0, so a sortable heading is as tall as a plain one: 4 + the button's 32 +
   4 is the 40px of the Prototype's header band (.lrow-head, 12px + 15px + 12px, plus its border). A
   plain heading in the same row already makes it 40.5px, which is why this went unseen on seven
   lists — and why the keybox's keys, the one table whose every heading is sortable, drew a 32.5px
   band (#680). */
.lk-sort-header[b-ostd1ev94b] {
    padding-block: var(--lk-space-1);
    text-align: left;
}

/* The hover pill keeps its breathing room by reaching out into the cell's padding rather than by
   pushing the text in: negative inline margin, and the width grown by the same amount. */
.lk-sort-button[b-ostd1ev94b] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    width: calc(100% + 2 * var(--lk-space-3));
    margin-inline: calc(-1 * var(--lk-space-3));
    box-sizing: border-box;
    padding: var(--lk-space-2) var(--lk-space-3);
    background: transparent;
    border: none;
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-mut);
    text-align: left;
    /* A button does not inherit these from the header row — the user-agent stylesheet stops
       them at the form control — so the list header's small caps have to be asked for. Without
       these two lines the sortable headings render sentence case beside plain ones in caps, in
       the same row. The Prototype hit the same wall and wrote it into .sort-h (app.css:155). */
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition);
}

.lk-sort-button:hover[b-ostd1ev94b] {
    background: var(--lk-ghost-hover);
    color: var(--lk-ink);
}

/* focus-visible rather than focus, as on Button: the keyboard user needs the ring, the
   mouse user should not get one after every click (ADR 0007). */
.lk-sort-button:focus-visible[b-ostd1ev94b] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-sort-label[b-ostd1ev94b] {
    min-width: 0;
}

/* One chevron, turned. Descending points down, ascending is the same glyph rotated, so no
   icon needs adding to IconPaths for this (ADR 0006).

   ::deep on all four, and it is load-bearing: these classes go onto <Icon>, so the <svg> that
   carries them is Icon's markup and wears Icon's scope, not this component's. Written plainly
   they compile to `.lk-sort-indicator[b-<this component>]` and match nothing at all — which is
   how every sortable heading in the portal came to show its chevron whether or not the column
   was sorted, and how ascending and descending came to look identical. #580, which is #568's
   defect in a shared component, on eight list screens.

   The convention test could not see it: `IndicatorClass()` builds these names in C#, and the
   test reads literal class attributes. Found by measuring the generated
   `obj/.../SortableColumnHeader.razor.rz.scp.css` against the rendered header, 2026-09-08. */
.lk-sort-button[b-ostd1ev94b]  .lk-sort-indicator {
    flex: none;
    transition: transform var(--lk-transition), opacity var(--lk-transition);
}

.lk-sort-button[b-ostd1ev94b]  .lk-sort-indicator-ascending {
    transform: rotate(180deg);
}

/* The unsorted column keeps the chevron so the heading does not change width when it becomes
   the sorted one, but fades it until it means something. It returns on hover, because that is
   when the heading is about to be pressed. */
.lk-sort-button[b-ostd1ev94b]  .lk-sort-indicator-inactive {
    opacity: 0;
}

.lk-sort-button:hover[b-ostd1ev94b]  .lk-sort-indicator-inactive,
.lk-sort-button:focus-visible[b-ostd1ev94b]  .lk-sort-indicator-inactive {
    opacity: 0.5;
}
/* /Components/Spinner.razor.rz.scp.css */
.lk-spinner[b-nspu40jy4i] {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--lk-spinner-size, 1rem);
    height: var(--lk-spinner-size, 1rem);
    border: var(--lk-border-thick) solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: lk-spin-b-nspu40jy4i 0.7s linear infinite;
}

/* Respect a reader who has asked the system to reduce motion. The spinner still reads as
   "busy" through its shape; it simply stops turning. */
@media (prefers-reduced-motion: reduce) {
    .lk-spinner[b-nspu40jy4i] {
        animation-duration: 2.4s;
    }
}

@keyframes lk-spin-b-nspu40jy4i {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/StatusDot.razor.rz.scp.css */
.lk-status-dot[b-aopgvmqfwe] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* The tone is one custom property, read by whichever mark is drawn. */
.lk-status-dot-ok[b-aopgvmqfwe] {
    --lk-status-color: var(--lk-ok);
}

.lk-status-dot-warn[b-aopgvmqfwe] {
    --lk-status-color: var(--lk-warn);
}

.lk-status-dot-error[b-aopgvmqfwe] {
    --lk-status-color: var(--lk-err);
}

.lk-status-dot-idle[b-aopgvmqfwe] {
    --lk-status-color: var(--lk-text-mut);
}

.lk-status-dot-mark[b-aopgvmqfwe] {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-status-color);
}

/* The check: a filled disc with the glyph cut out in the surface colour. The cross: an open
   ring with the glyph in the tone. Same footprint, so a column of them lines up; a different
   silhouette, so they are told apart without the colour — which is the point. */
.lk-status-dot-mark-check[b-aopgvmqfwe],
.lk-status-dot-mark-cross[b-aopgvmqfwe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    box-sizing: border-box;
}

.lk-status-dot-mark-check[b-aopgvmqfwe] {
    color: var(--lk-surface);
}

.lk-status-dot-mark-cross[b-aopgvmqfwe] {
    background: transparent;
    border: var(--lk-border-width) solid var(--lk-status-color);
    color: var(--lk-status-color);
}
/* /Components/StepIndicator.razor.rz.scp.css */
/* One row, never wrapped: a wrapped row puts a step's bar first on the new line, joined to
   nothing. When space runs out a label of two words breaks onto two lines instead — at phone
   width that is "Välj företag". */
.lk-steps[b-934yc2xmq6] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-steps-step[b-934yc2xmq6] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
}

/* The number in the circle, or a tick once the step is done. */
.lk-steps-mark[b-934yc2xmq6] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-sunken);
    color: var(--lk-text-mut);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
}

.lk-steps-label[b-934yc2xmq6] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 500;
    color: var(--lk-text-mut);
}

.lk-steps-step-current .lk-steps-mark[b-934yc2xmq6] {
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
}

.lk-steps-step-current .lk-steps-label[b-934yc2xmq6] {
    font-weight: 700;
    color: var(--lk-ink);
}

.lk-steps-step-done .lk-steps-mark[b-934yc2xmq6] {
    background: var(--lk-ok);
    color: var(--lk-navy-contrast);
}

/* The bar joining a step to the one before it. It sits inside the step, so the step's own gap
   already stands between it and the mark; the right margin makes up the difference to the
   Prototype's 12px on each side. */
.lk-steps-step + .lk-steps-step[b-934yc2xmq6]::before {
    content: "";
    /* Fixed. A bar allowed to shrink makes Chrome under-measure the step's natural width, so the
       labels broke onto two lines even with room to spare (measured 2026-09-21). */
    flex: 0 0 26px;
    height: var(--lk-border-thick);
    margin: 0 var(--lk-space-1) 0 var(--lk-space-3);
    background: var(--lk-line);
}
/* /Components/TabRow.razor.rz.scp.css */
/* The row and its tabs, both here rather than the tab's rules in Tab.razor.css.

   Every rule below the nav needs ::deep, and that is not decoration. A Tab is usually a NavLink, a
   component, so the anchor it renders never receives a b-* scope attribute of its own — not this
   file's and not Tab's either, whose root element is the NavLink rather than an element of Tab's
   markup. The one element that does carry a scope is this nav, so the anchors are reached as its
   descendants. Without ::deep the nav gets styled, the anchors do not, and nothing reports it —
   the row renders as plain underlined links. That was #339's !305, found in the browser and not by
   a test, because a test asserting styling would have been the wrong test (ADR 0015 point 11). */
.lk-tab-row[b-vij785d3rq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-6);
    margin-bottom: var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

/* Measured against the Prototype's `.tabs` (app.css:176-178) on 2026-09-14: 14.5px text with no
   side padding, 26px between tabs, the idle tab in secondary text and the current one in ink over a
   magenta rule. It had been 16px, padded 8px 12px, 4px apart, muted, and magenta on magenta — a
   bigger, looser row than the Prototype's, copied identically into the tab rows. 24px and 12px are
   the spacing scale's nearest steps to 26px and 14px (#528). */
.lk-tab-row[b-vij785d3rq]  .lk-tab {
    padding: 0 0 var(--lk-space-3);
    border: 0;
    /* The same width on both states so that switching tabs does not move the row by a pixel. */
    border-bottom: var(--lk-border-thick) solid transparent;
    background: none;
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text-sec);
    text-decoration: none;

    /* Down by the border rather than centred in the box, so the underline of the current tab reads
       as one line with the rule below the row. */
    margin-bottom: calc(-1 * var(--lk-border-hairline));
}

.lk-tab-row[b-vij785d3rq]  .lk-tab:hover {
    color: var(--lk-ink);
}

.lk-tab-row[b-vij785d3rq]  .lk-tab:focus-visible {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-control);
}

/* Colour and a border, not colour alone: the current tab has to be findable without seeing the
   difference between two greys. */
.lk-tab-row[b-vij785d3rq]  .lk-tab-current {
    border-bottom-color: var(--lk-magenta);
    color: var(--lk-ink);
}

/* A tab the reader's company could open and this reader cannot (ADR 0049 point 2). In its place,
   visibly off, and doing nothing under the pointer — the same 0.45 as a disabled Button and a
   disabled menu entry. Tab draws it as a span, so it is never current and never focused. */
.lk-tab-row[b-vij785d3rq]  .lk-tab-disabled {
    opacity: 0.45;
    cursor: default;
}

.lk-tab-row[b-vij785d3rq]  .lk-tab-disabled:hover {
    color: var(--lk-text-sec);
}
/* /Components/TermsTextComponent.razor.rz.scp.css */
/* The checkout's terms typography, moved here from ShopCheckoutPage so the terms page's preview
   draws the same thing (#538). pre-wrap keeps the line breaks, which are all the formatting the
   terms have. */
.shop-terms-text[b-ax330vm62u] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: 1.7;
    white-space: pre-wrap;
}
/* /Components/TextArea.razor.rz.scp.css */
/*
    Shaped after TextField's input, from the same tokens, so a screen carrying both does not look
    like it borrowed one of them from somewhere else. No colour or spacing literals — everything
    comes from PortalTheme, which is what keeps light and dark honest without a second set of
    rules.
*/

.lk-textarea[b-0gw3h60m0d] {
    display: block;
    width: 100%;
}

.lk-textarea-label[b-0gw3h60m0d] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

.lk-textarea-input[b-0gw3h60m0d] {
    display: block;
    width: 100%;
    padding: var(--lk-space-3);
    /* The same border and focus as the frame of TextField and Select. It had a 1px pale border
       and the button's outline ring, so next to them on a form it was the odd one out. */
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    transition: border-color var(--lk-transition), box-shadow var(--lk-transition);
    background: var(--lk-surface);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-body);
    line-height: 1.6;
    color: var(--lk-text);

    /* Vertical only. Horizontal resizing lets the box out of the page's grid, and a field wider
       than its container is a layout bug the reader made themselves. */
    resize: vertical;
}

/* :focus rather than :focus-visible, like TextField: a click into a text box matches
   :focus-visible anyway, so the two only differ in what they would promise. */
.lk-textarea-input:focus[b-0gw3h60m0d] {
    outline: none;
    border-color: var(--lk-magenta);
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-magenta-soft);
}

/* A pseudo-class rather than a Disabled modifier class, the way Button does it: the state is
   already on the element and a second source for it can only go out of step. */
.lk-textarea-input:disabled[b-0gw3h60m0d] {
    cursor: not-allowed;
    color: var(--lk-text-mut);
}

.lk-textarea-hint[b-0gw3h60m0d] {
    margin: var(--lk-space-1) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}
/* /Components/TextField.razor.rz.scp.css */
.lk-field[b-bzhvd21l7g] {
    display: block;
}

.lk-field-label-row[b-bzhvd21l7g] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-2);
}

.lk-field-label[b-bzhvd21l7g] {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

/* Off the screen, still in the accessibility tree. The same block as Select's
   .lk-select-label-hidden — the margin is what cancels the row's margin-bottom, so the frame
   sits where it would with no label at all. */
.lk-field-label-row-hidden[b-bzhvd21l7g] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lk-field-label-action[b-bzhvd21l7g] {
    flex: 0 0 auto;
}

.lk-field-required[b-bzhvd21l7g] {
    margin-left: var(--lk-space-0-5);
    color: var(--lk-magenta-ink);
}

.lk-field-frame[b-bzhvd21l7g] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    box-sizing: border-box;
    min-height: var(--lk-field-height);
    /* No padding of its own: the input carries it, so the input reaches the border and a click
       anywhere in the box lands on it. See .lk-field-input. */
    padding: 0;
    /* The positioning context for the icon, which is laid over the input. */
    position: relative;
    background: var(--lk-surface);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    transition: border-color var(--lk-transition), box-shadow var(--lk-transition);
}

/* The ring sits on the frame, not the input, so the icon and suffix are inside it.

   The glow is --lk-magenta-soft, not --lk-focus. --lk-focus is the button ring; on a field
   it is loud enough to read as an error, which is what the invalid state next to it means.
   The Prototype uses the soft token here (portal app.css .f-input:focus-within) and that is
   what runs today.

   It shows on mouse click too, and cannot be made keyboard-only: a click into a text input
   matches :focus-visible in every browser, by design, because the element is about to be
   typed into. The Prototype hit the same wall and wrote it down at app.css:30-33. Softening
   is the fix; hiding it on mouse would need modality tracking in JavaScript, portal-wide. */
.lk-field-frame:focus-within[b-bzhvd21l7g] {
    border-color: var(--lk-magenta);
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-magenta-soft);
}

.lk-field-input[b-bzhvd21l7g] {
    /* Stretched to the frame's full height and carrying the frame's side padding, rather than
       sitting as a line of text in the middle of it. As a bare line box the input was 19px tall
       inside a 48px frame, and the padding, the space above and below the text and the icon all
       belonged to the frame — a click there did nothing. The same defect Select had; not the same
       fix, because the icon, suffix and alert here are laid out beside the input in a row. */
    flex: 1;
    align-self: stretch;
    min-width: 0;
    border: 0;
    border-radius: calc(var(--lk-radius-control) - var(--lk-border-width));
    /* 16px to the text, as in the Prototype: .f-input pads 14px and the browser adds 2px inside the
       input (app.css:186-187). 12px put every value 4px nearer the border than the design has it
       (measured on /keys/{id} 2026-09-15, #676). */
    padding: 0 var(--lk-space-4);
    background: transparent;
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    color: var(--lk-text);
}

/* Something follows on the right: the row's gap spaces it, and the trailing item takes the edge. */
.lk-field-input:not(:last-child)[b-bzhvd21l7g] {
    padding-right: 0;
}

/* The icon is laid over the input's left padding instead of beside it, so clicking the icon
   focuses the field too. The padding puts the text where it was, one gap after the icon. */
.lk-field-frame:has(.lk-field-icon) .lk-field-input[b-bzhvd21l7g] {
    padding-left: calc(var(--lk-space-4) + 18px + var(--lk-space-2));
}

/* Autofill. The browser paints a filled field's background itself, with !important, so it cannot
   be overridden — and because it paints the input's box, not the frame, it used to show as a
   yellow rectangle inside the field. Tabbing in opens the password manager, which is why it looked
   like a focus effect. An inset shadow in the surface colour covers the paint; the text colour has
   to be set again because the browser changes that too. */
.lk-field-input:-webkit-autofill[b-bzhvd21l7g] {
    -webkit-box-shadow: 0 0 0 100vmax var(--lk-surface) inset;
    box-shadow: 0 0 0 100vmax var(--lk-surface) inset;
    -webkit-text-fill-color: var(--lk-text);
    caret-color: var(--lk-text);
}

/* The same rule again rather than a selector list: a browser that does not know one of the two
   pseudo-classes drops the whole list, and the field would be yellow there. */
.lk-field-input:autofill[b-bzhvd21l7g] {
    box-shadow: 0 0 0 100vmax var(--lk-surface) inset;
    -webkit-text-fill-color: var(--lk-text);
    caret-color: var(--lk-text);
}

.lk-field-input:focus[b-bzhvd21l7g] {
    /* The frame shows focus for the whole control; a second ring inside it would be noise. */
    outline: none;
}

/* app.css gives every keyboard-focused input the button ring (input:focus-visible). Inside a frame
   that is the second ring the rule above means to prevent: on the old 19px input it was the
   rectangle in the middle of the field when tabbing in, and on the stretched input it lies over the
   frame's border and makes it look thicker than a Select's. The frame already shows focus. */
.lk-field-input:focus-visible[b-bzhvd21l7g] {
    box-shadow: none;
    border-radius: calc(var(--lk-radius-control) - var(--lk-border-width));
}

.lk-field-input[b-bzhvd21l7g]::placeholder {
    color: var(--lk-text-mut);
    opacity: 1;
}

.lk-field-suffix[b-bzhvd21l7g] {
    flex: 0 0 auto;
    pointer-events: none;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.lk-field-message[b-bzhvd21l7g] {
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lk-field-message-error[b-bzhvd21l7g] {
    color: var(--lk-err);
}

/* ── States ─────────────────────────────────────────────── */

.lk-field-invalid .lk-field-frame[b-bzhvd21l7g] {
    border-color: var(--lk-err);
}

.lk-field-invalid .lk-field-frame:focus-within[b-bzhvd21l7g] {
    /* Focus must not hide the fact that the value is wrong. */
    border-color: var(--lk-err);
}

.lk-field-disabled .lk-field-frame[b-bzhvd21l7g] {
    background: var(--lk-surface-alt);
    opacity: 0.6;
}

.lk-field-disabled .lk-field-input[b-bzhvd21l7g] {
    cursor: not-allowed;
}

/* ::deep, because these elements belong to the Icon component's markup and do not carry
   this component's scope attribute. Without it the rules would silently do nothing. */
/* Laid over the input's left padding (see .lk-field-input): taken out of the row so the input
   starts at the frame's edge, above the input so it is not covered, and transparent to the pointer
   so a click on it lands in the field. */
[b-bzhvd21l7g] .lk-field-icon {
    position: absolute;
    z-index: 1;
    left: var(--lk-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--lk-text-mut);
    pointer-events: none;
}

[b-bzhvd21l7g] .lk-field-alert {
    flex: 0 0 auto;
    color: var(--lk-err);
}

/* The trailing item takes the frame's right padding, now that the frame has none. */
.lk-field-suffix:last-child[b-bzhvd21l7g],
[b-bzhvd21l7g] .lk-field-alert {
    margin-right: var(--lk-space-4);
}
/* /Components/ThemeProvider.razor.rz.scp.css */
/*
    Tokens that do not change between themes: type, radii, control heights, borders — and
    the spacing scale derived from the density variable.

    They are declared here rather than in a global stylesheet for one concrete reason: a
    custom property whose value contains var() is resolved on the element where it is
    declared. --lk-space-4 must therefore be declared on the same element that carries
    --lk-density, which is this one. Declared at :root it would silently resolve against
    the wrong density.
*/

.lk-theme[b-mbcelru2gm] {
    /* Type. The families are loaded in wwwroot; the stack degrades to system fonts. */
    --lk-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --lk-font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
    /* Ids and other machine strings (RecordId). The platform's own mono face, as code editors use. */
    --lk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --lk-font-size-eyebrow: 0.719rem;
    /* 12px. The badge's type, between the eyebrow and the caption. Badge wrote it as a literal
       because the scale had nothing there, and a pill half a pixel bigger than the pills beside it
       is worse than a literal (#570). Something that must sit the same size as a badge, such as
       the device enrolment code, is drawn as a Badge rather than sized to look like one. */
    --lk-font-size-badge: 0.75rem;
    --lk-font-size-caption: 0.781rem;
    --lk-font-size-label: 0.813rem;
    --lk-font-size-ui: 0.906rem;
    --lk-font-size-body: 1rem;
    --lk-font-size-title-sm: 1.125rem;
    /* 15.5px. The design's heading inside a card, which is a different size from the page's own
       heading and was missing from this table — so card headings were given --lk-font-size-title
       and rendered at the page title's size (#562). The overview's panel heading found the same
       number first and wrote it as a literal. */
    --lk-font-size-card-title: 0.969rem;
    /* 22px. The number on a statistics card — bigger than a card heading, smaller than the
       overview's KPI figure, and a size the table did not have. Added rather than written as a
       literal in the one stylesheet that wants it, which is the move --lk-font-size-card-title
       above was added to make and #570 is open about not making. The design export draws no
       statistics card at all, so the Prototype's .stat-value governs (app.css:542). */
    --lk-font-size-stat: 1.375rem;
    --lk-font-size-title: 1.625rem;
    --lk-font-size-display: 2.125rem;

    --lk-line-height-tight: 1.15;
    --lk-line-height-body: 1.6;

    /* Controls. Fixed on purpose: density changes the rhythm around a control,
       never the control itself. */
    --lk-control-height-sm: 2.125rem;
    --lk-control-height-md: 2.75rem;
    --lk-control-height-lg: 3.25rem;
    --lk-field-height: 3rem;
    /* The design's Check is 20px square and its Toggle 44 by 26 (portal-kit.jsx:290, 274). */
    --lk-checkbox-size: 1.25rem;
    --lk-toggle-width: 2.75rem;
    --lk-toggle-height: 1.625rem;
    /* The square buttons that carry only an icon inside a row, a chip or a picker, at the three
       sizes the portal draws them (#1437): 24px for a remove or discard mark, 28px for a stepper's
       minus and plus or a row's expand toggle, 32px for a revoke. Square, so one size each serves
       for width and height. Whether three is one or two too many is the design's question; a token
       only keeps the answer in one place. */
    --lk-icon-button-size-sm: 1.5rem;
    --lk-icon-button-size-md: 1.75rem;
    --lk-icon-button-size-lg: 2rem;
    /* 30px. A day in the loan extension's calendar, a button in a grid cell (#1437). */
    --lk-calendar-day-height: 1.875rem;

    --lk-radius-sm: 0.5rem;
    --lk-radius-checkbox: 0.375rem;
    --lk-radius-control: 0.75rem;
    --lk-radius-card: 1rem;
    /* A proportion, not a length: the design draws every tile at 28% of its size
       (portal-kit.jsx:131, `borderRadius: size * 0.28`), and the Prototype's square tiles from
       32 to 84px all land between 25% and 31%. A flat 18px was right for a 64px mark and twice
       too round for a 34px one (#563). A percentage resolves against the box, so it is only for
       square elements — anything else takes a length (--lk-radius-control and friends). */
    --lk-radius-tile: 28%;
    --lk-radius-pill: 999px;

    --lk-border-hairline: 1px;
    --lk-border-width: 1.5px;
    --lk-focus-ring-width: 3px;
    /* 2px. The heavier line, where a hairline would vanish: a spinner's ring (portal-kit.jsx:227),
       a timeline's connector and a radio mark's ring (eshop.jsx:300, 397), a pulse ring
       (eshop.jsx:456), and the current tab's underline. Six stylesheets wrote it as a literal
       until #1428; a line's weight is a token like its colour (ADR 0003 point 3). */
    --lk-border-thick: 2px;
    /* 3px. The coloured edge down the side of a row that says why it needs attention, or that it is
       the open one; the design draws a selected row's edge the same way (key-detail.jsx:657). Its
       own token rather than --lk-focus-ring-width, which has the same number and means something
       else (#1428). */
    --lk-accent-edge-width: 3px;

    /* Spacing. Every step scales with density (ADR 0005), so no component or screen ever
       writes a fixed value for margin, padding or gap — in markup or in its stylesheet. ADR 0005
       point 4 and its Consequences say "component CSS" in so many words; #528 records a reading
       that limited the rule to pixels inlined in markup, and the ADR, which kept the rule when it
       was rewritten on 2026-09-22, is the source (#921).

       The scale costs something: the design's hand-tuned 14/18/15/13px round to 16/20/16/12 here.
       That divergence is accepted and written up in #528, so that a screen sitting 1-2px off
       the design on spacing is not reported as a fault every time one is compared. A value that
       sits exactly between two steps rounds up.

       --lk-space-0-5 is the one step below --lk-space-1. The design separates the two lines of a
       text stack (a name and the address under it) by 2px in close to twenty places, and there
       rounding to the scale is not 1-2px of drift: it removes the gap or doubles it (#921). #528's
       rejection of half steps between the others stands. */
    --lk-density: 1;
    --lk-space-0-5: calc(0.125rem * var(--lk-density));
    --lk-space-1: calc(0.25rem * var(--lk-density));
    --lk-space-2: calc(0.5rem * var(--lk-density));
    --lk-space-3: calc(0.75rem * var(--lk-density));
    --lk-space-4: calc(1rem * var(--lk-density));
    --lk-space-5: calc(1.25rem * var(--lk-density));
    --lk-space-6: calc(1.5rem * var(--lk-density));
    --lk-space-8: calc(2rem * var(--lk-density));
    --lk-space-10: calc(2.5rem * var(--lk-density));
    --lk-space-12: calc(3rem * var(--lk-density));
    /* 56px. The design's wide-screen shell padding, and the only place it is used so far. */
    --lk-space-14: calc(3.5rem * var(--lk-density));

    /* Padding inside controls does not scale — it is part of the control's shape. */
    --lk-control-padding-sm: 0.75rem;
    --lk-control-padding-md: 1.125rem;
    --lk-control-padding-lg: 1.5rem;

    --lk-transition: 0.15s ease;

    min-height: 100vh;
    background: var(--lk-canvas);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);

    /*
        normal, not the body ratio — and that is the design's shape rather than a smaller number
        picked to close a gap.

        The design sets no line-height on the body at all. It applies 1.5 or 1.6 per element, and
        only where there is prose: a hero subtitle, an empty state's sentence, an error banner.
        A label, a field value, a table cell and a heading are single lines and take the font's
        own metrics.

        This declared 1.6 for everything, so every one-line row in the portal was about 6px
        taller than the design's and the difference accumulated down a page — measured at 927px
        against 844 on the kiosk detail. The cost was also paid piecemeal: three components had
        already found this on their own and set line-height: normal to escape it, each recording
        the same discovery separately (SectionHeader's eyebrow, PanelCard's title, CardHeader).

        Prose is unaffected. Every place that wants the ratio already asks for it by name —
        EmptyState, Dialog, Checkbox, AuthLayout, LoginPage, LoanApprovalPage and the rest — which
        is opting in, the way the design does it. --lk-line-height-body stays exactly as it was
        for them.
    */
    line-height: normal;
}

/*
    A theme that only carries tokens and draws nothing of its own: App.razor's around the
    reconnect and crash dialogs (#1006). Both are hidden until needed, so that element is empty
    on every page — but as a plain .lk-theme it still took min-height: 100vh and painted the
    canvas, an empty light screen after the app. Every page scrolled one screen past its end, and
    the rail's navy stopped where the shell did (#1133).

    display: contents gives the element no box at all, while what inherits from it — the custom
    properties, the font and the text colour — still reaches the dialogs. Verified on staging
    2026-10-14: the document came back to the shell's height (2563px to 1641px on /keys), and the
    reconnect dialog kept its background, font and width.
*/
.lk-theme.lk-theme-tokens-only[b-mbcelru2gm] {
    display: contents;
}
/* /Components/Toggle.razor.rz.scp.css */
.lk-toggle[b-7b82rw2wpy] {
    position: relative;
    flex: 0 0 auto;
    width: var(--lk-toggle-width);
    height: var(--lk-toggle-height);
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-track-off);
    cursor: pointer;
    transition: background 0.18s ease;
}

.lk-toggle-on[b-7b82rw2wpy] {
    background: var(--lk-magenta);
}

.lk-toggle:disabled[b-7b82rw2wpy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-toggle:focus-visible[b-7b82rw2wpy] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-toggle-knob[b-7b82rw2wpy] {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-knob);
    box-shadow: var(--lk-knob-shadow);
    transition: left 0.18s ease;
}

.lk-toggle-on .lk-toggle-knob[b-7b82rw2wpy] {
    left: 1.3125rem;
}

/* The state is carried by position and colour, not by the movement. Someone who has asked
   for less motion still sees which way the switch is set. */
@media (prefers-reduced-motion: reduce) {
    .lk-toggle[b-7b82rw2wpy],
    .lk-toggle-knob[b-7b82rw2wpy] {
        transition: none;
    }
}
/* /Components/ToggleChip.razor.rz.scp.css */
/* The Prototype's .pick-chip, moved from KeyCategoryGrantComponent.razor.css unchanged when the
   colleague's borrowable keys became the second user (#1219). The pressed state is on aria-pressed;
   the fill and the tick are what carry it visually. */
.lk-toggle-chip[b-yfop4n42j8] {
    display: inline-flex;
    align-items: center;
    /* The Prototype's 7px between tick and name; 8px is the nearest step. */
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: var(--lk-transition);
}

.lk-toggle-chip:hover:not(:disabled)[b-yfop4n42j8] {
    border-color: var(--lk-navy);
    color: var(--lk-ink);
}

.lk-toggle-chip:focus-visible[b-yfop4n42j8] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.lk-toggle-chip:disabled[b-yfop4n42j8] {
    opacity: 0.6;
    cursor: default;
}

/* The Prototype's .pick-chip.on is magenta (app.css:263), and so is every other selected state in
   v2 that was measured against it — the policy levels and the loan chips. Navy is for buttons
   (Martin, 2026-09-16), and this is a selection, not a button's look. */
.lk-toggle-chip-on[b-yfop4n42j8] {
    border-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}
/* /Components/UnexpectedErrorDialog.razor.rz.scp.css */
/*
    The crash dialog, over a dimmed page.

    Blazor controls display on the outer element and nothing else, so the layout has to work
    with display:block: the card is centred with auto margins rather than with flex, which
    Blazor's inline display:block would override.

    The reload control keeps its `reload` class as well as ours: blazor.web.js finds the
    element to reload by that class name.
*/

.lk-crash[b-p3o5c7rt7c] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: 0 var(--lk-space-4);
    background: var(--lk-scrim);
    font-family: var(--lk-font-ui);
}

.lk-crash-card[b-p3o5c7rt7c] {
    position: relative;
    max-width: 460px;
    margin: 16vh auto 0;
    padding: var(--lk-space-6);
    border: var(--lk-border-width) solid var(--lk-err);
    border-radius: 16px;
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-lg);
    text-align: center;
    color: var(--lk-text);
    font-size: 13.5px;
    line-height: 1.55;
}

.lk-crash p[b-p3o5c7rt7c] {
    margin: 0;
}

.lk-crash-title[b-p3o5c7rt7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin-bottom: var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--lk-err);
}

.lk-crash-mark[b-p3o5c7rt7c] {
    display: inline-flex;
}

.lk-crash-reload[b-p3o5c7rt7c] {
    display: inline-flex;
    margin-top: var(--lk-space-4);
    padding: var(--lk-control-padding-sm) var(--lk-control-padding-lg);
    border-radius: var(--lk-radius-control);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    cursor: pointer;
}

.lk-crash-reload:hover[b-p3o5c7rt7c] {
    background: var(--lk-navy-hover);
}

.lk-crash-reload:focus-visible[b-p3o5c7rt7c] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}
/* /Layouts/AuthLayout.razor.rz.scp.css */
.auth-shell[b-ys77xg55ar] {
    display: flex;
    min-height: 100vh;
    background: var(--lk-canvas);
}

/* ── The brand panel ────────────────────────────────────── */

.auth-brand[b-ys77xg55ar] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 0 0 46%;
    padding: var(--lk-space-12) var(--lk-space-12) var(--lk-space-10);
    background: var(--lk-rail);
    color: var(--lk-rail-text);
}

/* The glows sit behind everything, so the content is lifted above them rather than the
   glows being pushed back — position:relative on the children is enough. */
.auth-brand-logo[b-ys77xg55ar],
.auth-brand-body[b-ys77xg55ar],
.auth-brand-footer[b-ys77xg55ar] {
    position: relative;
}

.auth-glow[b-ys77xg55ar] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-glow-primary[b-ys77xg55ar] {
    top: -7.5rem;
    right: -7.5rem;
    width: 28.75rem;
    height: 28.75rem;
    background: radial-gradient(circle, var(--lk-rail-glow-primary), transparent 70%);
}

.auth-glow-secondary[b-ys77xg55ar] {
    bottom: -5rem;
    left: -3.75rem;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, var(--lk-rail-glow-secondary), transparent 70%);
}

.auth-brand-body[b-ys77xg55ar] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    max-width: 26.25rem;
}

.auth-brand-headline[b-ys77xg55ar] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.auth-brand-text[b-ys77xg55ar] {
    margin: var(--lk-space-4) 0 0;
    font-size: var(--lk-font-size-body);
    line-height: var(--lk-line-height-body);
    color: var(--lk-rail-text-sec);
    text-wrap: pretty;
}

.auth-brand-points[b-ys77xg55ar] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
    margin: var(--lk-space-8) 0 0;
    padding: 0;
    list-style: none;
}

.auth-brand-point[b-ys77xg55ar] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    font-size: var(--lk-font-size-ui);
}

.auth-brand-point-mark[b-ys77xg55ar] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--lk-radius-sm);
    background: var(--lk-rail-surface-strong);
}

.auth-brand-footer[b-ys77xg55ar] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-rail-text-mut);
}

/* The logo sits on the navy panel in both themes, so its wordmark needs the contrast
   colour rather than the page's ink. ::deep because it belongs to Logo (ADR 0007). */
.auth-brand[b-ys77xg55ar]  .lk-logo-word {
    color: var(--lk-rail-text);
}

/* ── The form side ──────────────────────────────────────── */

.auth-main[b-ys77xg55ar] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--lk-space-10);
}

/* ── Narrow screens ─────────────────────────────────────── */

/*
    The brand panel is decoration; the form is the job. Below the breakpoint the panel is
    dropped entirely rather than stacked, so a phone shows the form straight away instead of
    a screen of marketing to scroll past. The proper design for phones is still open (#198).
*/
@media (max-width: 60rem) {
    .auth-brand[b-ys77xg55ar] {
        display: none;
    }

    .auth-main[b-ys77xg55ar] {
        padding: var(--lk-space-6) var(--lk-space-4);
        align-items: flex-start;
    }
}

/*
    Acting as somebody else. Placement only — the look belongs to ImpersonationBannerComponent. Reachable
    here because the shell sends an impersonated person without a chosen organisation to
    /choose-organization.
*/
.auth-main[b-ys77xg55ar]  .auth-impersonation {
    width: min(100%, 24rem);
    margin: 0 auto var(--lk-space-4);
}
/* /Layouts/PublicLayout.razor.rz.scp.css */
.public-shell[b-xymiwwp8ys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* dvh and not vh: on a phone, vh is the viewport with the browser chrome hidden, so a page
       sized to it is a page that scrolls by exactly the height of the address bar. */
    min-height: 100dvh;
    padding: var(--lk-space-6) var(--lk-space-4) var(--lk-space-10);
    background: var(--lk-canvas);
}

.public-brand[b-xymiwwp8ys] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.public-main[b-xymiwwp8ys] {
    width: 100%;
    /* The card stops growing well before the page does. A terms paragraph set across a desktop
       window is a line nobody's eye can follow back. */
    max-width: 30rem;
    margin-top: var(--lk-space-5);
}

/*
    Acting as somebody else. Only placement here; the look is ImpersonationBannerComponent's, so the
    same block appears in all four layouts. Above the card and inside the shell's own width,
    because this layout is mobile first and the card is what the eye lands on.
*/
.public-shell[b-xymiwwp8ys]  .public-impersonation {
    width: min(100%, 26rem);
    margin: 0 auto var(--lk-space-4);
}
/* /Layouts/SidebarLayout.razor.rz.scp.css */
.lk-shell[b-dzcqylndpd] {
    --lk-rail-width: 15.625rem;

    display: flex;
    min-height: 100vh;

    /*
        The rail's navy is painted here, by the shell, and not by the rail itself.

        The rail is no longer as tall as the page — it is a screen tall, so that the signed-in
        person can sit at the foot of the screen rather than the foot of the document. Something
        still has to carry the colour the rest of the way down on a long page, or the column
        would end mid-scroll and the canvas would show through beneath it.

        A gradient with a hard stop rather than a pseudo-element: it needs no stacking context,
        nothing to position, and it cannot end up over the content.
    */
    background: linear-gradient(
        to right,
        var(--lk-rail) 0 var(--lk-rail-width),
        var(--lk-canvas) var(--lk-rail-width));
}

/* ── The rail ───────────────────────────────────────────── */

.lk-rail[b-dzcqylndpd] {
    /* Published so the navigation's active marker can reach the rail's edge without
       guessing at this value. */
    --lk-rail-padding-x: var(--lk-space-4);

    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--lk-rail-width);
    padding: var(--lk-space-5) var(--lk-rail-padding-x);

    /*
        A screen tall, not a page tall.

        align-self keeps it from stretching to the shell's height, which is the whole document;
        min-height then makes it at least a screenful. That is what lets the block below sit at
        the foot of the screen when the menu is short, and grow past it when the menu is long.

        The background is the shell's (above), because this box no longer reaches the bottom of a
        long page.
    */
    align-self: flex-start;
    min-height: 100vh;

    /*
        And it stays put while the page scrolls (#1270, Niklas 2026-10-16: "irriterande att den
        åker ner"). Sticky at the top, never taller than the screen; a menu longer than the screen
        scrolls inside the rail. That last part is the one thing Martin's 2026-09-02 decision above
        avoided — a rail that scrolls on its own — and it is accepted now because a rail that rides
        away was the bigger irritation. The sign-out block keeps its two positions: at the foot of
        the screen for a short menu, under the last entry for a long one.
    */
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;

    /*
        Pinned sideways as well (#1283, Niklas 2026-10-16: "menyn bumpar fram och tillbaka"). A
        page wider than the window — a list with many columns in a window that is not full width —
        scrolls the document sideways too, and a sticky-at-the-top rail rode along with it. left: 0
        holds it at the window's edge on that axis for as long as the shell has room, which is the
        whole window's width.

        It paints its own navy from here on, because the shell's band below moves with the document
        when that scrolls sideways and would slide out from under a rail that does not. The band
        stays as what is behind the rail, nothing more.

        z-index, because a list page's sticky parts (its title, toolbar and column headings, #1284)
        are positioned too and come later in the document; without a level of its own the rail
        would be drawn under them when a wide page scrolls sideways. 3 is above the heads' 2 and the
        headings' 1, and under everything that floats (the drawer's 5, the switcher's 20, the
        dialogs).
    */
    left: 0;
    z-index: 3;
    background: var(--lk-rail);
}

/* A link now, so it needs to lay out like the block it replaced rather than like text. */
.lk-rail-brand[b-dzcqylndpd] {
    display: block;
    padding: 0 var(--lk-space-2) var(--lk-space-5);
}

.lk-rail-organization[b-dzcqylndpd] {
    padding-bottom: var(--lk-space-4);
}

/*
    The nav element belongs to NavigationMenu, so reaching it needs ::deep.

    It takes the height of its entries and no more. It used to be flex: 1, which made it grow to
    fill the rail — and the rail is as tall as the page, not as tall as the screen. On a screen
    with a long list the signed-in person and the way out were pushed to the foot of the whole
    page, far below the last menu entry and out of sight until you scrolled to the very bottom.

    Decision by @martin 2026-09-02, after comparing against the Prototype at a short window
    height. Two other shapes were considered and rejected: a rail that scrolls on its own, as the
    Prototype does, hides entries with nothing to say they are there; and pinning the block to the
    bottom of the viewport leaves it stranded away from the menu it belongs to. Sitting directly
    under the last entry is what keeps it findable — "if we don't pin logout close to the menu, it
    can be perceived as lost."

    The page still scrolls as one, which is deliberate: nothing here scrolls independently, so
    there is no second scrollbar and nothing can be hidden without the page saying so.
*/
.lk-rail[b-dzcqylndpd]  .lk-rail-navigation {
    flex: 0 0 auto;
}

/*
    Two positions, and which one it takes depends on how long the menu is.

    margin-top: auto eats whatever room is left in the rail, so:

    * menu shorter than the screen — the block is pushed to the foot of the screen
    * menu longer than the screen — there is no room left, the margin collapses to nothing, and
      the block sits directly under the last entry, reached by scrolling the page

    Both are what was asked for, and one property covers them because the rail is exactly a
    screen tall until its own contents make it taller.
*/
.lk-rail-user[b-dzcqylndpd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    margin-top: auto;
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-rail-line);
}

/* The reseller's mark sits at the foot with the person (W1): it takes the auto margin, and the
   person follows straight after it rather than splitting the room left. */
.lk-rail[b-dzcqylndpd]  .lk-rail-reseller {
    margin-top: auto;
}

.lk-rail[b-dzcqylndpd]  .lk-rail-reseller + .lk-rail-user {
    margin-top: 0;
}

/* The avatar and the name are one link to the profile, on a row of their own: sign-out is the
   next row (lyker/arenden#3). */
.lk-rail-user-link[b-dzcqylndpd] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex: 1 1 100%;
    min-width: 0;
    border-radius: var(--lk-radius-control);
    text-decoration: none;
}

.lk-rail-user-link:hover .lk-rail-user-name[b-dzcqylndpd] {
    text-decoration: underline;
}

.lk-rail-user-link:focus-visible[b-dzcqylndpd] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.lk-rail-user-text[b-dzcqylndpd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-rail-user-name[b-dzcqylndpd] {
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-rail-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-rail-user-role[b-dzcqylndpd] {
    font-size: 0.719rem;
    color: var(--lk-rail-text-mut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Logga ut" with its icon, the rail's full width under the person, outlined so it reads as a
   button on the navy (lyker/arenden#3). */
.lk-rail-user[b-dzcqylndpd]  .lk-rail-signout {
    flex: 1 1 100%;
}

.lk-rail .lk-rail-user[b-dzcqylndpd]  .lk-rail-signout .lk-button {
    width: 100%;
    justify-content: center;
    gap: var(--lk-space-2);
    background: var(--lk-rail-surface);
    border: var(--lk-border-hairline) solid var(--lk-rail-line);
    color: var(--lk-rail-text);
}

.lk-rail .lk-rail-user[b-dzcqylndpd]  .lk-rail-signout .lk-button:hover {
    background: var(--lk-rail-surface-strong);
}

/*
    The rail stays dark in both themes, so the components inside it cannot use the page's
    ink and surface colors. ::deep is required because these elements belong to the
    components' own markup — without it these rules would do nothing at all (ADR 0007).
*/

.lk-rail[b-dzcqylndpd]  .lk-logo-word {
    color: var(--lk-rail-text);
}

.lk-rail[b-dzcqylndpd]  .lk-avatar-neutral {
    background: var(--lk-rail-surface-strong);
    color: var(--lk-rail-text);
}

.lk-rail[b-dzcqylndpd]  .lk-signout .lk-button {
    color: var(--lk-rail-text-mut);
}

.lk-rail[b-dzcqylndpd]  .lk-signout .lk-button:hover {
    background: var(--lk-rail-surface);
    color: var(--lk-rail-text);
}

/* ── Acting as somebody else ──────────────────────── */

/*
    Only where it sits. What it looks like belongs to ImpersonationBannerComponent, which draws the
    same block in all four layouts — the rail must not own the appearance of something three
    other layouts also show.
*/
.lk-rail[b-dzcqylndpd]  .lk-rail-impersonation {
    margin-bottom: var(--lk-space-3);
}

/* ── Content ────────────────────────────────────────────── */

.lk-main[b-dzcqylndpd] {
    flex: 1;
    min-width: 0;
    /*
        Not a scroll container (#1270). It had overflow: auto, which made this column the
        scrollport of every sticky element inside it — and the column never scrolls itself, the
        document does, so the shop's cart dock sat "sticky" and rode away with the page all the
        same. min-width: 0 is what keeps wide content from stretching the column; anything wider
        than that scrolls in its own wrapper, as the terms pages and the account form already do.
    */
    overflow: visible;
    /* Named, because a stuck page title carries this much air with it, and the stuck heads
       paint over the sides (app.css, #1386). */
    --lk-main-padding-top: var(--lk-space-8);
    --lk-main-padding-inline: var(--lk-space-10);
    padding: var(--lk-main-padding-top) var(--lk-main-padding-inline) var(--lk-space-10);
}

/*
    The column cap is the Prototype's, 1720px — `app.css:83`, `.main-inner { max-width: 1720px }`.

    This carried max-width: 62.5rem (1000px), taken faithfully from the design export:
    shell-auth.jsx:100 has exactly `maxWidth: 1000, margin: '0 auto'` on ShellA. Measured against
    the Prototype at 1440 the difference was not subtle — content 1000 against 1110, starting 55px
    further right, so the gap between the rail and the first card was 95px where the Prototype has
    40. Every screen sat too narrow and too far over, not just the overview.

    ADR 0015 point 2 settles which source wins: "drar den och Prototypen åt olika håll vinner
    Prototypen, eftersom den är det som körs". No ADR covers content width itself.

    1720 and not "no cap": the first reading of this said the Prototype had none, from measuring
    at 1440 where a 1720px cap does not bind. It binds above roughly 2080px of viewport. Worth
    remembering as a method note — a single width cannot tell a missing rule from a dormant one.

    The origin is `fa617c1` in the Prototype, "Use full screen width", @niklas 2026-07-09. Its
    message settles why the export says something else: "The design artboards were fixed at
    1320px (hence the 1000px content cap), but on real screens the content should use the width."
    The same commit carries the wide-screen padding below, and the cabinet grid's 420px minimum
    in Pages/Keyboxes/KeyboxListComponent.razor.css — all three were one decision.
*/
.lk-main-inner[b-dzcqylndpd] {
    max-width: 107.5rem;
    margin: 0 auto;
    min-width: 0;
}

/*
    Wide screens get more air, as in the Prototype:
    `@media (min-width: 1800px) { .main { padding: 40px 56px 48px } }`.

    Without it v2's content started 16px further left than the design's at 1920, which is where
    this is actually looked at. 56px needs --lk-space-14; it sits on the same 4px grid as every
    other step, it was simply never needed before.
*/
@media (min-width: 1800px) {
    .lk-main[b-dzcqylndpd] {
        --lk-main-padding-top: var(--lk-space-10);
        --lk-main-padding-inline: var(--lk-space-14);
        padding: var(--lk-main-padding-top) var(--lk-main-padding-inline) var(--lk-space-12);
    }
}

/* ── Skip link ──────────────────────────────────────────── */

/*
    Off-screen until it is focused. Someone navigating by keyboard should not have to tab
    through eight navigation entries on every page to reach the content.
*/
.lk-skip-link[b-dzcqylndpd] {
    position: absolute;
    left: -9999px;
    z-index: 10;
    padding: var(--lk-space-3) var(--lk-space-4);
    background: var(--lk-surface);
    color: var(--lk-ink);
    border-radius: var(--lk-radius-control);
    box-shadow: var(--lk-shadow-md);
    font-weight: 600;
    text-decoration: none;
}

.lk-skip-link:focus[b-dzcqylndpd] {
    left: var(--lk-space-3);
    top: var(--lk-space-3);
}

/* ── Narrow screens ─────────────────────────────────────── */

/*
    The design is drawn at 1320 wide and says nothing about small screens. Below 60rem the rail
    is hidden and NavigationDrawerComponent takes over: a bar across the top with the menu
    button, and the rail's contents in a drawer (#198). Until then the rail became a band of
    wrapped entries above the content, which kept everything reachable and looked it.

    The banner in the content is the narrow window's only; above it the rail carries its own.
*/
.lk-main-inner[b-dzcqylndpd]  .lk-main-impersonation {
    display: none;
}

/* The terms notice has no place in the rail, so it is drawn over the content at every width (#1200). */
.lk-main-inner[b-dzcqylndpd]  .lk-main-notice {
    margin-bottom: var(--lk-space-5);
}

@media (max-width: 60rem) {
    .lk-shell[b-dzcqylndpd] {
        flex-direction: column;
        background: var(--lk-canvas);
    }

    .lk-rail[b-dzcqylndpd] {
        display: none;
    }

    .lk-main-inner[b-dzcqylndpd]  .lk-main-impersonation {
        display: block;
        margin-bottom: var(--lk-space-5);
    }

    .lk-main[b-dzcqylndpd] {
        --lk-main-padding-top: var(--lk-space-6);
        --lk-main-padding-inline: var(--lk-space-4);
        padding: var(--lk-main-padding-top) var(--lk-main-padding-inline) var(--lk-space-8);
    }
}
/* /Layouts/TopbarLayout.razor.rz.scp.css */
.lk-shell[b-5p3s7hq6nm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--lk-canvas);
}

/* ── The bar ────────────────────────────────────────────── */

.lk-topbar[b-5p3s7hq6nm] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-6);
    flex: 0 0 auto;
    min-height: 4.5rem;
    padding: var(--lk-space-2) var(--lk-space-8);
    background: var(--lk-surface);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

/* The nav element belongs to NavigationMenu, so reaching it needs ::deep. */
.lk-topbar[b-5p3s7hq6nm]  .lk-topbar-navigation {
    flex: 1;
    justify-content: center;
}

.lk-topbar-actions[b-5p3s7hq6nm] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The avatar is a link to the profile. The ring goes on the link rather than the avatar,
   because the link is what takes focus. */
.lk-topbar-profile[b-5p3s7hq6nm] {
    display: inline-flex;
    border-radius: var(--lk-radius-pill);
    text-decoration: none;
}

.lk-topbar-profile:focus-visible[b-5p3s7hq6nm] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* ── Content ────────────────────────────────────────────── */

/* The design gives this shell more air and a slightly wider column than the sidebar one. */
.lk-main[b-5p3s7hq6nm] {
    flex: 1;
    min-width: 0;
    overflow: auto;
    /* Named, because a stuck page title carries this much air with it, and the stuck heads
       paint over the sides (app.css, #1386). */
    --lk-main-padding-top: var(--lk-space-10);
    --lk-main-padding-inline: var(--lk-space-10);
    padding: var(--lk-main-padding-top) var(--lk-main-padding-inline) var(--lk-space-12);
}

/*
    Same 1720px cap as the sidebar shell, and for the same reason — see SidebarLayout.razor.css.

    This said 66.25rem (1060px), the design export's ShellB value. Both shells took their cap
    from `design/shell-auth.jsx`, which is locked to the artboard's 1320px width; the Prototype
    left that behind in `fa617c1` ("Use full screen width", @niklas 2026-07-09), whose message
    says the cap "was an artboard artefact". Raising only the sidebar shell would have left this
    one narrow, and the two shells are meant to differ in placement, not in how much of the
    screen they use.
*/
.lk-main-inner[b-5p3s7hq6nm] {
    max-width: 107.5rem;
    margin: 0 auto;
}

/* The wide-screen padding from the same commit. */
@media (min-width: 1800px) {
    .lk-main[b-5p3s7hq6nm] {
        --lk-main-padding-top: var(--lk-space-10);
        --lk-main-padding-inline: var(--lk-space-14);
        padding: var(--lk-main-padding-top) var(--lk-main-padding-inline) var(--lk-space-12);
    }
}

/* ── Skip link ──────────────────────────────────────────── */

.lk-skip-link[b-5p3s7hq6nm] {
    position: absolute;
    left: -9999px;
    z-index: 10;
    padding: var(--lk-space-3) var(--lk-space-4);
    background: var(--lk-surface);
    color: var(--lk-ink);
    border-radius: var(--lk-radius-control);
    box-shadow: var(--lk-shadow-md);
    font-weight: 600;
    text-decoration: none;
}

.lk-skip-link:focus[b-5p3s7hq6nm] {
    left: var(--lk-space-3);
    top: var(--lk-space-3);
}

/* ── Narrow screens ─────────────────────────────────────── */

/*
    As in the sidebar shell: below 60rem the bar is hidden and NavigationDrawerComponent takes
    over (#198). The bar wrapped its navigation onto a second row until then.

    The notification bell goes with it. It is a placeholder that opens nothing, and a drawer
    entry for it would promise a feature that is not there.
*/
@media (max-width: 60rem) {
    .lk-topbar[b-5p3s7hq6nm] {
        display: none;
    }

    .lk-main[b-5p3s7hq6nm] {
        padding: var(--lk-space-6) var(--lk-space-4) var(--lk-space-8);
    }
}

/*
    Acting as somebody else. Placement only — the look belongs to ImpersonationBannerComponent, which
    draws the same block in the rail shell (ADR 0005).
*/
.lk-main-inner[b-5p3s7hq6nm]  .lk-topbar-impersonation {
    margin-bottom: var(--lk-space-5);
}
/* /Pages/Account/ConfirmDevicePage.razor.rz.scp.css */
/* The sign-in screen's shape (LoginPage.razor.css), for the step that ends the sign-in (#1195). */

.confirm-device[b-n2tjxhnpno] {
    width: 100%;
    max-width: 23.75rem;
}

.confirm-device-title[b-n2tjxhnpno] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.confirm-device-intro[b-n2tjxhnpno] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.confirm-device-message[b-n2tjxhnpno] {
    margin: var(--lk-space-5) 0 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
}

.confirm-device[b-n2tjxhnpno]  .confirm-device-form {
    display: grid;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-6);
}

.confirm-device-again[b-n2tjxhnpno] {
    margin-top: var(--lk-space-3);
}

.confirm-device-exit[b-n2tjxhnpno] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-6);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Pages/Account/CreateAccountPage.razor.rz.scp.css */
/* The Prototype's .auth-form: the same column as the sign-in form. */
.create-account[b-kircaep2di] {
    width: 100%;
    max-width: 23.75rem;
}

.create-account[b-kircaep2di]  .create-account-back {
    margin-bottom: var(--lk-space-4);
}

.create-account-title[b-kircaep2di] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.create-account-intro[b-kircaep2di] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/* ── The form ───────────────────────────────────────────── */

.create-account[b-kircaep2di]  .create-account-form {
    display: grid;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-6);
}

/* The same box as the sign-in page's message, for the same reason: it says "this did not
   work, here is why", and nothing about it needs to shout. */
.create-account-message[b-kircaep2di] {
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
}

.create-account-divider[b-kircaep2di] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: var(--lk-space-5) 0;
}

.create-account-divider[b-kircaep2di]::before,
.create-account-divider[b-kircaep2di]::after {
    content: "";
    flex: 1;
    height: var(--lk-border-hairline);
    background: var(--lk-line);
}

.create-account-divider-text[b-kircaep2di] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* The Prototype's .auth-alt. */
.create-account-alternative[b-kircaep2di] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-5) 0 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.create-account-link[b-kircaep2di] {
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.create-account-link:hover[b-kircaep2di] {
    text-decoration: underline;
}

/* ── Sent ───────────────────────────────────────────────── */

.create-account-done[b-kircaep2di] {
    text-align: center;
}

/* The Prototype's .bankid-wait .glyph, on the ok colour: the mail has gone, nothing is waiting. */
.create-account-done-mark[b-kircaep2di] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: 0 auto var(--lk-space-6);
    border-radius: 1.5rem;
    background: var(--lk-ok);
    color: var(--lk-navy-contrast);
}

.create-account-done-action[b-kircaep2di] {
    margin-top: var(--lk-space-6);
}
/* /Pages/Account/CreateCompanyAccountPage.razor.rz.scp.css */
/* The Prototype's .auth-form.wider: a little wider than the sign-in form, because the company
   choice lists a name, a registration number and a role on one line. */
.create-company[b-dmiklgeqyw] {
    width: 100%;
    max-width: 30rem;
}

.create-company[b-dmiklgeqyw]  .create-company-steps {
    margin-bottom: var(--lk-space-6);
}

.create-company-title[b-dmiklgeqyw] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.625rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.create-company-intro[b-dmiklgeqyw] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.create-company-actions[b-dmiklgeqyw] {
    margin-top: var(--lk-space-5);
}

/* The error's two buttons, one above the other, as the Prototype stacks them. */
.create-company-actions-stacked[b-dmiklgeqyw] {
    display: grid;
    gap: var(--lk-space-2);
}

/* ── The centred states: fetching, done, failed ──────────── */

/* The Prototype's .bankid-wait, which it uses for every state that is a mark and a sentence. */
.create-company-state[b-dmiklgeqyw] {
    text-align: center;
}

.create-company-mark[b-dmiklgeqyw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: 0 auto var(--lk-space-6);
    border-radius: 1.5rem;
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
}

.create-company-mark-ok[b-dmiklgeqyw] {
    background: var(--lk-ok);
    color: var(--lk-navy-contrast);
}

.create-company-mark-error[b-dmiklgeqyw] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.create-company-spinner[b-dmiklgeqyw] {
    display: flex;
    justify-content: center;
    margin: var(--lk-space-6) 0 0;
    color: var(--lk-text-mut);
}

/* ── Choosing the company ────────────────────────────────── */

/* The Prototype's .auth-ok-chip: who identified, in a quiet green pill. */
.create-company-identified[b-dmiklgeqyw] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-4) 0 0;
    padding: var(--lk-space-1) var(--lk-space-3);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-ok-soft);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ok);
}

.create-company[b-dmiklgeqyw]  .create-company-none {
    margin-top: var(--lk-space-5);
}

.create-company-choices[b-dmiklgeqyw] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-5);
}

/* The Prototype's line under the list: small and muted, with the sign-up page's link (#769). */
.create-company-missing[b-dmiklgeqyw] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.create-company-link[b-dmiklgeqyw] {
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.create-company-link:hover[b-dmiklgeqyw] {
    text-decoration: underline;
}

/* The Prototype's .org-choice: a tile, the name over its number and role, and the radio last. */
.create-company-choice[b-dmiklgeqyw] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    cursor: pointer;
    transition: border-color var(--lk-transition), background var(--lk-transition);
}

.create-company-choice:hover[b-dmiklgeqyw] {
    background: var(--lk-surface-alt);
}

.create-company-choice:has(.create-company-choice-input:checked)[b-dmiklgeqyw] {
    border-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
}

.create-company-choice:has(.create-company-choice-input:focus-visible)[b-dmiklgeqyw] {
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.create-company-choice:has(.create-company-choice-input:disabled)[b-dmiklgeqyw] {
    cursor: default;
}

/* Drawn last, where the Prototype puts its radio, while staying first in the markup so the
   label's text is what a screen reader reads with it. */
.create-company-choice-input[b-dmiklgeqyw] {
    order: 3;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--lk-magenta);
}

.create-company-choice-tile[b-dmiklgeqyw] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-navy);
}

.create-company-choice-text[b-dmiklgeqyw] {
    display: grid;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.create-company-choice-name[b-dmiklgeqyw] {
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    color: var(--lk-ink);
}

.create-company-choice-meta[b-dmiklgeqyw] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* The terms step (#1200): each text in its own scroll box, the tick under it. */
.create-company-terms[b-dmiklgeqyw] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}

.create-company-terms-title[b-dmiklgeqyw] {
    margin: 0;
    font-size: var(--lk-font-size-ui);
}

.create-company-terms-text[b-dmiklgeqyw] {
    max-height: 240px;
    overflow: auto;
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
    text-align: left;
}

.create-company-terms-tick[b-dmiklgeqyw] {
    margin-top: var(--lk-space-3);
    text-align: left;
}
/* /Pages/Account/GoogleMark.razor.rz.scp.css */
/*
    Colours outside the theme, deliberately, as in MicrosoftMark: these belong to Google.
    Theming them would make the mark wrong rather than consistent.
*/

.lk-google-mark[b-kxs6jkruhk] {
    flex: 0 0 auto;
    width: var(--lk-google-size, 1.0625rem);
    height: var(--lk-google-size, 1.0625rem);
}

.lk-google-red[b-kxs6jkruhk] {
    fill: #ea4335;
}

.lk-google-blue[b-kxs6jkruhk] {
    fill: #4285f4;
}

.lk-google-yellow[b-kxs6jkruhk] {
    fill: #fbbc05;
}

.lk-google-green[b-kxs6jkruhk] {
    fill: #34a853;
}
/* /Pages/Account/LoginPage.razor.rz.scp.css */
.login[b-pbk63zqe07] {
    width: 100%;
    max-width: 23.75rem;
}

.login-title[b-pbk63zqe07] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.login-intro[b-pbk63zqe07] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/* ── i samarbete med (the reseller register, W1) ────────── */

/* Lyker Key and the reseller side by side, about equally tall, with the words between. */
.login-reseller[b-pbk63zqe07] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-6);
}

.login-reseller-with[b-pbk63zqe07] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.login-reseller-image[b-pbk63zqe07] {
    display: block;
    max-height: 1.75rem;
    max-width: 10rem;
    width: auto;
    height: auto;
}

/* ── Messages ───────────────────────────────────────────── */

/*
    One style for every outcome — wrong password, unconfirmed email, two-step verification.
    They are all "this did not sign you in, here is why", and colouring some of them as errors
    and others as information would suggest a difference that does not help the reader.
*/
.login-message[b-pbk63zqe07] {
    margin: var(--lk-space-5) 0 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
}

.login-handover[b-pbk63zqe07] {
    margin-top: var(--lk-space-3);
}

/* ── Methods ────────────────────────────────────────────── */

.login-methods[b-pbk63zqe07] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-6);
}

.login-divider[b-pbk63zqe07] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: var(--lk-space-5) 0;
}

/* The rules are drawn with pseudo-elements so the text stays the only real content —
   nothing for a screen reader to read out as an element. */
.login-divider[b-pbk63zqe07]::before,
.login-divider[b-pbk63zqe07]::after {
    content: "";
    flex: 1;
    height: var(--lk-border-hairline);
    background: var(--lk-line);
}

.login-divider-text[b-pbk63zqe07] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* ── The email form ─────────────────────────────────────── */

.login[b-pbk63zqe07]  .login-form {
    display: grid;
    gap: var(--lk-space-3);
}

.login-link[b-pbk63zqe07] {
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.login-link:hover[b-pbk63zqe07] {
    text-decoration: underline;
}

/* ── Create an account ──────────────────────────────────── */

/* The Prototype's .auth-alt: one quiet line, the question and the link side by side. */
.login-alternative[b-pbk63zqe07] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-5) 0 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* .login-link is sized for the label row; here it follows the sentence it sits in. */
.login-alternative-link[b-pbk63zqe07] {
    font-size: inherit;
}

/* ── Create a company account ───────────────────────────── */

/* The Prototype's .auth-company: a quiet full-width row under the form, not a third button
   competing with the ways to sign in. */
.login-company[b-pbk63zqe07] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-ink);
    text-decoration: none;
    transition: background var(--lk-transition);
}

.login-company:hover[b-pbk63zqe07] {
    background: var(--lk-navy-soft);
}

.login-company:focus-visible[b-pbk63zqe07] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.login[b-pbk63zqe07]  .login-company-chevron {
    color: var(--lk-text-mut);
}
/* /Pages/Account/MicrosoftMark.razor.rz.scp.css */
/*
    The only place in the portal that names colours outside the theme, and deliberately so:
    these belong to Microsoft. Theming them would make the mark wrong rather than consistent.
*/

.lk-ms-mark[b-5lqp5xsvjc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    flex: 0 0 auto;
    width: var(--lk-ms-size, 1.0625rem);
    height: var(--lk-ms-size, 1.0625rem);
}

.lk-ms-square[b-5lqp5xsvjc] {
    border-radius: 1px;
}

.lk-ms-red[b-5lqp5xsvjc] {
    background: #f25022;
}

.lk-ms-green[b-5lqp5xsvjc] {
    background: #7fba00;
}

.lk-ms-blue[b-5lqp5xsvjc] {
    background: #00a4ef;
}

.lk-ms-yellow[b-5lqp5xsvjc] {
    background: #ffb900;
}
/* /Pages/Colleagues/ColleagueActivityListComponent.razor.rz.scp.css */
/* Scoped to the list. Tokens only — no colour or spacing literals. The frame itself is the
   shared .lk-list-table (app.css); only what is this table's own sits here. */

/* "Today 11:12" and the method under it stay on their lines however narrow the window. */
.colleague-activity-when[b-vv85002u44] {
    white-space: nowrap;
}

/* The periods are one muted line of ranges; a long one wraps inside its cell. */
.colleague-activity-periods[b-vv85002u44] {
    overflow-wrap: anywhere;
}

/* The end time never wraps (#1327, rule 6), as the start time does not. */
.colleague-activity-ended[b-vv85002u44] {
    white-space: nowrap;
}
/* /Pages/Colleagues/ColleagueDetailPage.razor.rz.scp.css */
/* The Prototype's 1.2fr / 1fr split — contact on the left, role on the right. It collapses
   early rather than at a phone width, for the same reason the profile does: the right column
   holds a single control, and two narrow columns read worse than one wide one well before the
   layout runs out of room. */
.colleague-detail[b-w6z5xthobv] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

@media (max-width: 60rem) {
    .colleague-detail[b-w6z5xthobv] {
        grid-template-columns: 1fr;
    }
}

/* The left column's three cards, 16px apart — the same gap as between the columns. */
.colleague-detail-column[b-w6z5xthobv] {
    display: grid;
    gap: var(--lk-space-4);
    min-width: 0;
}

/* ── Role ───────────────────────────────────────────────── */

.colleague-detail-role[b-w6z5xthobv] {
    display: grid;
    gap: var(--lk-space-3);
}

/* What the phone number is for (#1266), under it. */
.colleague-detail-phone-hint[b-w6z5xthobv] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.colleague-detail-role-readonly[b-w6z5xthobv],
.colleague-detail-no-role[b-w6z5xthobv] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* The outcome of a role change. Both live in the flow rather than over the control, so neither
   covers the picker the reader may want to try again. */
.colleague-detail-status[b-w6z5xthobv] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-ok);
}

.colleague-detail-error[b-w6z5xthobv] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* ── What the role may do ───────────────────────────────── */

.colleague-detail-capabilities[b-w6z5xthobv] {
    padding: var(--lk-space-3);
    background: var(--lk-surface-alt);
    border-radius: var(--lk-radius-control);
}

.colleague-detail-capabilities-title[b-w6z5xthobv] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.colleague-detail-capabilities ul[b-w6z5xthobv] {
    display: grid;
    gap: var(--lk-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.colleague-detail-capabilities li[b-w6z5xthobv] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    /* The design's 13px. body is 16, which made the list read louder than the picker above it. */
    font-size: var(--lk-font-size-label);
    color: var(--lk-text);
}

[b-w6z5xthobv] .colleague-detail-capabilities li .lk-icon {
    flex: 0 0 auto;
    color: var(--lk-ok);
}

/* ── Loading ────────────────────────────────────────────── */

/* The loading region is PageStateComponent's element since #787, in its TightStack layout — what the
   rule that stood here asked for. A rule here would no longer reach it. */

/* ── Leaving, removing, coming back (#1234) ─────────────────────────────── */

.colleague-detail-left[b-w6z5xthobv] {
    margin-bottom: var(--lk-space-4);
}

.colleague-detail-departure-note[b-w6z5xthobv],
.colleague-detail-departure-status[b-w6z5xthobv],
.colleague-detail-departure-error[b-w6z5xthobv] {
    margin: 0 0 var(--lk-space-4);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.colleague-detail-departure-note[b-w6z5xthobv] {
    color: var(--lk-text-sec);
}

.colleague-detail-departure-status[b-w6z5xthobv] {
    color: var(--lk-ok);
}

.colleague-detail-departure-error[b-w6z5xthobv] {
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-sm);
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.colleague-detail-leave[b-w6z5xthobv] {
    display: grid;
    gap: var(--lk-space-2);
}

.colleague-detail-leave p[b-w6z5xthobv] {
    margin: 0;
}

.colleague-detail-leave-blocked[b-w6z5xthobv] {
    color: var(--lk-err);
    font-weight: 600;
}

.colleague-detail-leave-caption[b-w6z5xthobv] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.colleague-detail-leave-list[b-w6z5xthobv] {
    margin: 0;
    padding-left: var(--lk-space-5);
    font-size: var(--lk-font-size-label);
}
/* /Pages/Colleagues/ColleagueHistoryListComponent.razor.rz.scp.css */
/* A colleague's history (#492). The days and their rows are EventDayGroupsComponent's; what is left
   here is the frame around them and the loading rows, as in ProfileHistoryListComponent. */

.colleague-history[b-5mbaj82bq7] {
    display: grid;
    gap: var(--lk-space-5);
}

/* ── Loading ────────────────────────────────────────────── */

.colleague-history-loading-row[b-5mbaj82bq7] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
}
/* /Pages/Colleagues/ColleagueImportPage.razor.rz.scp.css */
/* The three steps of the import, one card each, top to bottom (#1523, as the key import). */
.people-import-steps[b-t6n0ppzfkv] {
    display: grid;
    gap: var(--lk-space-4);
}

/* The body of each step, since the card is unpadded so that the head's rule can reach the card's
   edges (CardHeader's own file, #1293): the padding the card used to carry, and the one place on
   the page that padded twice is gone. */
.people-import-body[b-t6n0ppzfkv] {
    padding: var(--lk-space-4) var(--lk-space-5);
}

.people-import-text[b-t6n0ppzfkv] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-body);
    color: var(--lk-text-mut);
}

.people-import-actions[b-t6n0ppzfkv] {
    display: flex;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

/* The file picker: the browser's own control, labelled, so the chosen file name is shown by the browser. */
.people-import-file[b-t6n0ppzfkv] {
    display: grid;
    gap: var(--lk-space-1);
    margin-bottom: var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text);
}

.people-import-file-label[b-t6n0ppzfkv] {
    font-weight: 600;
}

.people-import-file-errors[b-t6n0ppzfkv] {
    margin: 0;
    padding-left: var(--lk-space-4);
}

.people-import-errors[b-t6n0ppzfkv] {
    margin-top: var(--lk-space-3);
}

.people-import-errors-row[b-t6n0ppzfkv] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The people already there (mockup p4r): a calm list under the check, not an error. */
.people-import-existing[b-t6n0ppzfkv] {
    margin-top: var(--lk-space-4);
}

.people-import-existing-title[b-t6n0ppzfkv] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-body);
    font-weight: 600;
    color: var(--lk-text);
}

.people-import-existing-list[b-t6n0ppzfkv] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--lk-space-1);
}

.people-import-existing-list li[b-t6n0ppzfkv] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.people-import-existing-name[b-t6n0ppzfkv] {
    color: var(--lk-text);
}

.people-import-existing-match[b-t6n0ppzfkv] {
    flex: 1;
    color: var(--lk-text-mut);
}

/* "Skicka inbjudan till alla nya" and how it goes out, as on /colleagues/new. */
.people-import-invite[b-t6n0ppzfkv] {
    display: grid;
    gap: var(--lk-space-1);
}

.people-import-invite-text[b-t6n0ppzfkv] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.people-import-done[b-t6n0ppzfkv] {
    margin: 0;
}
/* /Pages/Colleagues/ColleagueKeyAccessPage.razor.rz.scp.css */
/* The notice, then the card, spaced as the key's access tab spaces its note and cards. */
.colleague-key-access[b-3ab2yf3coa] {
    display: grid;
    gap: var(--lk-space-4);
}

/* Every key the person may borrow (#841), one row each: the key, and under it every route. Spaced as
   the key's access tab spaces its people, since the two lists are one answer from two sides. */
/* The filter by route (#1219), between the card's header and its rows, padded and ruled as the
   category chips are on the card above, since the two rows of chips sit one card apart. */
.colleague-borrowable-filter[b-3ab2yf3coa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    padding: var(--lk-space-4) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.colleague-borrowable-list[b-3ab2yf3coa] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.colleague-borrowable-row[b-3ab2yf3coa] {
    display: grid;
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.colleague-borrowable-row:last-child[b-3ab2yf3coa] {
    border-bottom: none;
}

.colleague-borrowable-name[b-3ab2yf3coa] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.colleague-borrowable-name:hover[b-3ab2yf3coa] {
    text-decoration: underline;
}

.colleague-borrowable-name:focus-visible[b-3ab2yf3coa] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-control);
}

/* Every route, so it wraps rather than truncates: a line cut after the first route would read as the
   only one there is. */
.colleague-borrowable-routes[b-3ab2yf3coa] {
    margin-top: var(--lk-space-0-5);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

/* A refused grant or revoke, inside the card and above the chips it concerns. */
.colleague-key-access-error[b-3ab2yf3coa] {
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-5) 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* The missing-tag badge under the key's name (#1273): the row is a grid, so the badge is its own
   line already — left-aligned with the name and a small gap above, not indented as if it were the
   tail of an inline that wrapped (Niklas 2026-10-16). The class is handed to a component, so ::deep (ADR 0007). */
[b-3ab2yf3coa] .colleague-borrowable-missing-tag {
    justify-self: start;
    margin-top: var(--lk-space-1);
}
/* /Pages/Colleagues/ColleagueListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells. Same shape as the key list. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding is
   the bottom of the card. A 16px gap here stacked on top of it. */
.colleague-list[b-wi7b6f68ea] {
    display: grid;
}

/* The row heading is the person — it is what identifies the row, so it is a <th> and not a cell.
   The avatar and the two lines of text sit beside each other. */
.colleague-table-name[b-wi7b6f68ea] {
    font-weight: 400;
}

/* On an inner span, not on the <th>: a cell that is display: flex is no longer a table cell and
   draws its hairline under its own content rather than at the row's bottom. */
.colleague-table-name-inner[b-wi7b6f68ea] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.colleague-table-identity[b-wi7b6f68ea] {
    display: grid;
    min-width: 0;
}

/* The name and the pending badge on one line, 8px apart as in the design (screens.jsx:494). */
.colleague-table-name-line[b-wi7b6f68ea] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
}

/* A person can be in several categories; the badges wrap rather than widen the column. */
.colleague-table-categories[b-wi7b6f68ea] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-1);
}

/* An anchor since #605, because it is what carries the row's link. It keeps looking like the
   name rather than like a link: the row is the affordance, and the Prototype underlines nothing
   here. The underline on hover is the same one the partner and keybox names already had. */
.colleague-table-person[b-wi7b6f68ea] {
    font-weight: 600;
    color: var(--lk-text);
    text-decoration: none;
}

.colleague-table-person:hover[b-wi7b6f68ea] {
    text-decoration: underline;
}

/* The address under the name. It wraps rather than being clipped: an address cut off halfway is
   worse than one on two lines, because the visible half looks like the whole of it. */
.colleague-table-contact[b-wi7b6f68ea] {
    margin-top: var(--lk-space-0-5);
    /* The Prototype's .lrow .mut: 12.5px (Prototype app.css:164). */
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

/* The date column is .mut in the Prototype (Colleagues.razor:84) — 12.5px and text-mut — where
   most other lists write .dim. So this one is fainter and smaller than its siblings on purpose,
   and the other lists' -table-muted are not wrong for being different. */
.colleague-table-muted[b-wi7b6f68ea] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    white-space: nowrap;
}

/* ── Loading ────────────────────────────────────────────── */

.colleague-list-loading-row[b-wi7b6f68ea] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Colleagues/ColleagueMainPage.razor.rz.scp.css */
/* The toolbar and the card are ListLayout's (2026-09-16), the key list's layout. The
   search field and the role, category and status filters take their widths from the shared
   lk-list-toolbar-* classes, so nothing here sizes them (#725). */

/* The note beside the invite button carries its own placement now — the component takes
   Placement="BesideActions" and shapes itself for a header row (#320).

   This screen held the third of the four copies. */

/* The loading region's gap below the header is PageStateComponent's LoadingSpaced since #787. The
   region is the component's element, which a rule here no longer reaches. */

/* "Visa inaktiverade" sits level with the filters (#1234). */
.colleagues-show-left[b-wn4hevi0uu] {
    display: flex;
    align-items: center;
}
/* /Pages/Colleagues/ColleagueNewPage.razor.rz.scp.css */
/* "Lägg till person" (the approved mockup "Personer utan inbjudan", p2). Tokens only. */

.colleague-new-skeleton-gap[b-c668hgoox7] {
    margin-top: var(--lk-space-2);
}

/* The two kinds of person, side by side above the form. */
.colleague-new-kinds[b-c668hgoox7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.colleague-new-kind[b-c668hgoox7] {
    display: flex;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-ink);
}

.colleague-new-kind-icon[b-c668hgoox7] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
}

.colleague-new-kind-text[b-c668hgoox7] {
    display: block;
    margin-top: var(--lk-space-1);
    color: var(--lk-text-sec);
}

.colleague-new-form[b-c668hgoox7] {
    display: flex;
    flex-direction: column;
}

.colleague-new-fields[b-c668hgoox7] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}

.colleague-new-pair[b-c668hgoox7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--lk-space-4);
}

.colleague-new-half[b-c668hgoox7] {
    max-width: calc(50% - var(--lk-space-2));
}

@media (max-width: 40rem) {
    .colleague-new-half[b-c668hgoox7] {
        max-width: none;
    }
}

.colleague-new-label[b-c668hgoox7] {
    display: block;
    margin-bottom: var(--lk-space-2);
    padding: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
}

.colleague-new-hint[b-c668hgoox7] {
    margin: var(--lk-space-1) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* The role as three cards, one chosen (p2). */
.colleague-new-roles[b-c668hgoox7] {
    margin: 0;
    padding: 0;
    border: 0;
}

.colleague-new-role-cards[b-c668hgoox7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--lk-space-3);
}

.colleague-new-role[b-c668hgoox7] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-ink);
    cursor: pointer;
}

.colleague-new-role.is-chosen[b-c668hgoox7] {
    border-color: var(--lk-ink);
    background: var(--lk-navy-soft);
}

.colleague-new-role:focus-within[b-c668hgoox7] {
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.colleague-new-role input[b-c668hgoox7] {
    margin: var(--lk-space-0-5) 0 0;
    accent-color: var(--lk-ink);
}

.colleague-new-role-text[b-c668hgoox7] {
    display: block;
    margin-top: var(--lk-space-1);
    color: var(--lk-text-sec);
}

/* "Skicka inbjudan nu" in its own band, with what it will do under it. */
.colleague-new-invite[b-c668hgoox7] {
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.colleague-new-invite-text[b-c668hgoox7] {
    margin: var(--lk-space-1) 0 0;
    padding-left: calc(1.25rem + var(--lk-space-2));
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.colleague-new-failure[b-c668hgoox7] {
    margin: 0;
    color: var(--lk-err);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}
/* /Pages/Colleagues/GroupPickerComponent.razor.rz.scp.css */
/* The chips above the add, wrapping as the colleague list's category badges do. */

.group-picker[b-w4cnnvchwk] {
    display: grid;
    gap: var(--lk-space-3);
}

.group-picker-chips[b-w4cnnvchwk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

/* A chip: the badge's shape with a remove inside it. Drawn here rather than as a Badge, because a
   Badge is a label and this is a control. */
.group-picker-chip[b-w4cnnvchwk] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    padding: 0 var(--lk-space-1) 0 var(--lk-space-3);
    min-height: var(--lk-control-height-sm);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface-alt);
    border: var(--lk-border-hairline) solid var(--lk-line);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
}

.group-picker-chip-name[b-w4cnnvchwk] {
    overflow-wrap: anywhere;
}

.group-picker-remove[b-w4cnnvchwk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-sm);
    height: var(--lk-icon-button-size-sm);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: background var(--lk-transition), color var(--lk-transition);
}

.group-picker-remove:hover:not(:disabled)[b-w4cnnvchwk] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.group-picker-remove:focus-visible[b-w4cnnvchwk] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.group-picker-remove:disabled[b-w4cnnvchwk] {
    cursor: not-allowed;
    opacity: 0.5;
}

.group-picker-none[b-w4cnnvchwk] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Pages/Colleagues/InviteColleagueDialog.razor.rz.scp.css */
/* Fields stacked in one column. The Prototype's modal does the same; a two-column form here
   would put the contact field beside the way of reaching them, which is the one pair that has
   to be read in order. */

.invite-form[b-7n23o54tnd] {
    display: grid;
    gap: var(--lk-space-4);
}

/* A failure that is nobody's fault. Field-level problems go on the field instead, so this is
   only ever the API being unreachable or broken. */
.invite-failure[b-7n23o54tnd] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* The groups (#1170): a label of its own over the picker, since the picker's select hides its label
   to read as the add rather than as a field. */
.invite-colleague-groups[b-7n23o54tnd] {
    display: grid;
    gap: var(--lk-space-2);
}

.invite-colleague-groups-label[b-7n23o54tnd] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

/* SMS off for the organisation (#1206): the same bar /loans/new shows for its approval, with the
   way onwards. */
.invite-notice[b-7n23o54tnd] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.invite-notice strong[b-7n23o54tnd] {
    display: block;
    color: var(--lk-ink);
}

.invite-notice a[b-7n23o54tnd] {
    display: inline-block;
    margin-top: var(--lk-space-1);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

.invite-notice-error[b-7n23o54tnd] {
    border-color: var(--lk-err);
    background: var(--lk-err-soft);
}

.invite-notice-error strong[b-7n23o54tnd] {
    color: var(--lk-err);
}
/* /Pages/Devices/DeviceMainPage.razor.rz.scp.css */
/*
    Scoped to the page. Tokens only — no colour or spacing literals.

    The card is a two-column split: everything known about the hardware on the left, the
    timestamps and the one action on the right. It collapses to one column early, because the
    hardware line carries a lot of small facts and they stop being readable before the card
    itself gets narrow.
*/

/* The skeleton's gap, the list's below so the rows do not shift when they replace it, is the loading
   region's own TightStack layout since #786. The region is PageStateComponent's element, which a
   rule here no longer reaches. */

.devices-list[b-qckadcl76f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* The design's 12px. space-4 is 16 — a step out, not the #528 rounding. */
    gap: var(--lk-space-3);
}

/*
    ::deep, because "devices-card" is a class handed to the Card component and lands on Card's
    own root element — which carries Card's scope id, not this page's. Without ::deep the rule
    matched nothing and said nothing: the card fell back to display:block, the aside stacked
    under the main column instead of beside it, and every row was 232px where the design draws
    141. It went unseen from 2026-09-02 to 2026-09-07 because the Agents table was empty
    locally, so the card had never once been rendered with data in it.

    The two rules below this one work without ::deep, and that contrast is the trap: they are
    aimed at .devices-card-main and .devices-card-aside, which are this page's own markup passed
    in as ChildContent, so they carry this page's scope. Same file, same-looking selectors, two
    different outcomes.
*/
.devices-list[b-qckadcl76f]  .devices-card {
    display: flex;
    align-items: flex-start;
    /* The design's 18px, which the scale rounds to 20 (#528). space-6 is 24 — a whole step
       past it, which is the difference between rounding and drift. */
    gap: var(--lk-space-5);
    flex-wrap: wrap;
}

.devices-card-main[b-qckadcl76f] {
    flex: 1;
    min-width: 17rem;
}

.devices-card-aside[b-qckadcl76f] {
    display: grid;
    gap: var(--lk-space-3);
    justify-items: end;
    text-align: right;
    min-width: 11rem;
}

.devices-card-heading[b-qckadcl76f] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
}

/*
    The enrolment code is read off the device's own waiting screen and typed into nothing — it
    is matched by eye against the physical board. Monospace and letter-spacing so that O and 0
    are told apart at a glance, which is the whole job of this element.

    Everything else is the Badge's own. In the design it is a .badge.info, the same badge as the
    hardware tags beside it, and until 2026-09-16 this was a span copying the badge by hand — which
    drifted to 22px tall and 4px/8px padding against the design's 24px and 0 10px, so the code
    sat lower than the tags next to it. Only the typeface is this page's business now.

    ::deep, because the class is handed to Badge and lands on its root, under Badge's scope id.
    .devices-card-heading is this page's own markup, passed into Card as ChildContent.
*/
.devices-card-heading[b-qckadcl76f]  .devices-code {
    font-family: var(--lk-font-mono, ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace);
    letter-spacing: 0.08em;
}

/* The design's card heading size, 15.5px — the token added in #562. Without it the model name
   inherited the body size and sat a step below the code badge it is meant to lead. */
.devices-model[b-qckadcl76f] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
    color: var(--lk-ink);
}

.devices-meta[b-qckadcl76f],
.devices-network[b-qckadcl76f],
.devices-seen[b-qckadcl76f] {
    margin: var(--lk-space-2) 0 0;
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

/* The small print: the design writes 12.5px on the network line and both seen lines, against 13px
   on the hardware line above. Both are .dim there, and .dim means text-sec (Prototype app.css:163)
   — that it matches nothing on a card is the Prototype's bug, so the colour is its intent, not
   its rendering. text-mut here was a step too faint. */
.devices-network[b-qckadcl76f],
.devices-seen[b-qckadcl76f] {
    font-size: var(--lk-font-size-caption);
}

.devices-seen[b-qckadcl76f] {
    display: grid;
    gap: var(--lk-space-1);
    margin: 0;
}

.devices-tags[b-qckadcl76f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

/* Confirmation of something that just happened, not a warning — quiet, and it goes away on
   the next action rather than needing dismissal. */
.devices-notice[b-qckadcl76f] {
    margin-bottom: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-ok-soft);
    color: var(--lk-text);
    font-size: var(--lk-font-size-label);
}

/* In ListLayout's banner, which brings the spacing under it (#1392). */
.lk-list-layout-banner .devices-notice[b-qckadcl76f] {
    margin-bottom: 0;
}

.devices-form[b-qckadcl76f] {
    display: grid;
    gap: var(--lk-space-4);
}

.devices-form-lead[b-qckadcl76f],
.devices-form-empty[b-qckadcl76f] {
    margin: 0;
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

@media (max-width: 44rem) {
    .devices-card-aside[b-qckadcl76f] {
        justify-items: start;
        text-align: left;
        min-width: 0;
    }
}

/* ── Every agent, under the queue ─────────────────────────── */

/* minmax(0, 1fr), not the implicit auto column: a grid item's minimum is its content's, so the
   table's full width widened the whole section and the page scrolled sideways on a phone
   instead of the table inside its card (#1392). */
.devices-all[b-qckadcl76f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lk-space-4);
    margin-top: var(--lk-space-6);
}

/* Read as the heading's last line since #1392: the heading's own margin is the space above it,
   so the section's gap is taken back rather than added to it (44px under the subtitle, against
   16px to the toolbar below). */
.devices-rollout[b-qckadcl76f] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--lk-space-4));
}

.devices-rollout-trigger[b-qckadcl76f] {
    flex-basis: 100%;
    font-size: var(--lk-font-size-caption);
}

.devices-table-auto[b-qckadcl76f] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    flex-wrap: wrap;
}

/* "Update selected" with the register's version, at the toolbar's right end, where the cabinet
   list keeps its view switch (Niklas 2026-10-08, #1392). */
.devices-update[b-qckadcl76f] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
}

.devices-update-hint[b-qckadcl76f] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

/* The selection boxes for Lyker's staff, as the cabinet list's (#958). */
.devices-table-select-column[b-qckadcl76f] {
    width: 3rem;
}

/* The version it runs, the register's newer one, and the last run's outcome, on one line. */
.devices-table-version[b-qckadcl76f] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    flex-wrap: wrap;
}

/* Remove beside Assign on a waiting card (Niklas 2026-10-08). */
.devices-card-actions[b-qckadcl76f] {
    display: flex;
    gap: var(--lk-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Name over the board's facts, as the cabinet and kiosk tables stack name over place. */
.devices-table-identity[b-qckadcl76f] {
    display: grid;
    gap: var(--lk-space-1);
    min-width: 0;
}

.devices-table-name[b-qckadcl76f] {
    font-weight: 600;
}

.devices-table-meta[b-qckadcl76f] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

.devices-table-link[b-qckadcl76f] {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    margin-right: var(--lk-space-2);
}

.devices-table-link:hover[b-qckadcl76f] {
    text-decoration: underline;
}

/* The name with its "Ny" badge beside it. */
.devices-table-name[b-qckadcl76f] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    flex-wrap: wrap;
}

/* The status and the last-seen time never wrap (#1327, rule 6). */
.devices-table-status[b-qckadcl76f],
.devices-table-seen[b-qckadcl76f] {
    white-space: nowrap;
}
/* /Pages/Events/EventListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells. Same shape as the identity
   list. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding
   is the bottom of the card (ListLayout). A 16px gap here stacked on top of it. */
.event-list[b-z8r5thwtj7] {
    display: grid;
}

/* The timestamp identifies the row, so it is a <th> rather than a cell — the event's own id is
   never shown. Tabular figures so a column of times lines up digit under digit, which is what
   makes a log scannable; without them a 1 is narrower than a 7 and the minutes drift. */
.event-table-time[b-z8r5thwtj7] {
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
    color: var(--lk-text-sec);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The Prototype's widths (AdminEvents.razor:72-78): date 140px, keybox 150px, slot 60px, key
   170px, user 150px, the event flex: 1, in a row padded 20px at the edges with no gap between the
   spans. A column's width includes its cells' padding, so each is the span plus the padding tokens
   .lk-list-table gives its cells — 8px a side, and the row's 20px instead on the outer side of the
   first and last columns. The user is the last column, except in the "All organisations" mode,
   where the Prototype's Organisation column (150px) follows it (#510).

   Written as span plus tokens rather than as their sum (168px for the date, say): the padding
   scales with --lk-density and a summed number does not, so at the airy density the span shrank
   by whatever the padding gained (ADR 0007 point 9, #922). The table's layout is the default, so
   each width is a floor and a column grows for a word that does not fit. */
.event-table-col-date[b-z8r5thwtj7] {
    width: calc(8.75rem + var(--lk-space-5) + var(--lk-space-2));
}

/* The event was the Prototype's flex: 1 column and took every pixel the others did not — on a
   wide screen a metre of nothing after "Fel nyckel isatt", with the cabinet, key and person
   squeezed to their floors at the far right (Niklas 2026-10-16, /events at 1920). Now it has a
   floor like the rest, wide enough for the longest event word with its icon, and the slack goes
   to the three name columns, which are the ones that hold long values. */
.event-table-col-event[b-z8r5thwtj7] {
    width: calc(13rem + 2 * var(--lk-space-2));
}

.event-table-col-keybox[b-z8r5thwtj7] {
    min-width: calc(9.375rem + 2 * var(--lk-space-2));
}

.event-table-col-slot[b-z8r5thwtj7] {
    width: calc(3.75rem + 2 * var(--lk-space-2));
}

.event-table-col-key[b-z8r5thwtj7] {
    min-width: calc(10.625rem + 2 * var(--lk-space-2));
}

.event-table-col-user[b-z8r5thwtj7] {
    min-width: calc(9.375rem + var(--lk-space-2) + var(--lk-space-5));
}

.event-table-col-user-inner[b-z8r5thwtj7] {
    min-width: calc(9.375rem + 2 * var(--lk-space-2));
}

.event-table-col-organization[b-z8r5thwtj7] {
    width: calc(9.375rem + var(--lk-space-2) + var(--lk-space-5));
}

/* Icon and word on one line, the icon in the secondary ink. The icon is decoration — the word
   says it — so it is allowed to be the part that goes if the row is squeezed. */
.event-table-kind[b-z8r5thwtj7] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    color: var(--lk-text-sec);
}

/* 13px, the Prototype's span (AdminEvents.razor:86), a step below the row. */
.event-table-kind-word[b-z8r5thwtj7] {
    min-width: 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text);
}

/* A warning, in the Prototype's err ink and a heavier weight, icon included. */
.event-table-kind-warn[b-z8r5thwtj7],
.event-table-kind-warn .event-table-kind-word[b-z8r5thwtj7] {
    color: var(--lk-err);
}

.event-table-kind-warn .event-table-kind-word[b-z8r5thwtj7] {
    font-weight: 600;
}

/* The size and ink are the shared .lk-list-muted; what is its own is that names break anywhere. */
.event-table-muted[b-z8r5thwtj7] {
    overflow-wrap: anywhere;
}

/* ── Loading ────────────────────────────────────────────── */

.event-list-loading-row[b-z8r5thwtj7] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Events/EventMainPage.razor.rz.scp.css */
/* The toolbar is the shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15): a
   search field with the type, keybox and date filters beside it. It wraps when five controls do
   not fit on one line. */

/* The loading region's gap below the header is PageStateComponent's LoadingSpaced since #787. The
   region is the component's element, which a rule here no longer reaches. */
/* /Pages/Identities/IdentityAssignmentComponent.razor.rz.scp.css */
/* Rows of what is set, then the caller's add row. Lives inside a FieldGroupComponent, which brings
   the card and the heading. */

.identity-assignment[b-evxwsbr968] {
    display: grid;
    gap: var(--lk-space-3);
}

.identity-assignment-list[b-evxwsbr968] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.identity-assignment-row[b-evxwsbr968] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    min-height: var(--lk-space-8);
    padding: var(--lk-space-1) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.identity-assignment-row:last-child[b-evxwsbr968] {
    border-bottom: none;
}

/* Role and permission names are the API's identifiers, so they wrap anywhere rather than push the
   remove button off the row. */
.identity-assignment-name[b-evxwsbr968] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-ink);
}

.identity-assignment-empty[b-evxwsbr968] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* A change the API refused. Under the rows, beside what it was about. */
.identity-assignment-error[b-evxwsbr968] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* The picker or field takes the room; the button keeps its own width. */
.identity-assignment-add[b-evxwsbr968] {
    display: flex;
    align-items: flex-end;
    gap: var(--lk-space-2);
}

.identity-assignment-add[b-evxwsbr968]  > :first-child {
    flex: 1;
    min-width: 0;
}
/* /Pages/Identities/IdentityDetailPage.razor.rz.scp.css */
/* The details card, then e-mail and phone, one under the other. */

.identity-detail[b-amdhurw0er] {
    display: grid;
    gap: var(--lk-space-4);
    max-width: 48rem;
}

/* The fields land in FieldGroupComponent's grid, so the form itself is only a wrapper that does not
   take a cell of its own. */
.identity-detail-form[b-amdhurw0er] {
    display: contents;
}

/* A save the API refused, under the fields it was about. Spans the group's two columns. */
.identity-detail-error[b-amdhurw0er] {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Pages/Identities/IdentityListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells. Same shape as the colleague
   list. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding
   is the bottom of the card (ListLayout). A 16px gap here stacked on top of it. */
.identity-list[b-347kia1i4s] {
    display: grid;
}

/* The name identifies the row, so it is a <th> rather than a cell. */
.identity-table-name[b-347kia1i4s] {
    font-weight: 600;
    color: var(--lk-text);
    overflow-wrap: anywhere;
}

/* The name as a link to the identity (#959): the name's own look, underlined on hover, as the
   colleague list's. */
.identity-table-link[b-347kia1i4s] {
    color: inherit;
    text-decoration: none;
}

.identity-table-link:hover[b-347kia1i4s] {
    text-decoration: underline;
}

/* Roles come several to a row and wrap rather than clip: a truncated list of roles looks like a
   complete one, which is the wrong way for this screen to be wrong. */
.identity-table-badges[b-347kia1i4s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-1);
}

/* The organisations and the date are the Prototype's `.mut` at 12px (AdminIdentities.razor:72,
   85): the muted ink and the caption step, the nearest the scale has (#528). */
.identity-table-muted[b-347kia1i4s],
.identity-table-created[b-347kia1i4s] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.identity-table-created[b-347kia1i4s] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The Prototype's widths (AdminIdentities.razor:54-59): type 110px, roles 210px, organisations
   180px, the action 130px and the date 95px, the name flex: 1, in a row padded 20px at the edges
   with no gap. Each column is its span plus the padding tokens .lk-list-table gives its cells, 8px
   a side; the last carries the row's 20px on its right instead.

   Written as span plus tokens rather than as their sum (123px for the date, say): the padding
   scales with --lk-density and a summed number does not, so at the airy density the span shrank
   by whatever the padding gained (ADR 0007 point 9, #922). The table's layout is the default, so
   each width is a floor and a column grows for a word that does not fit. */
.identity-table-col-type[b-347kia1i4s] {
    width: calc(6.875rem + 2 * var(--lk-space-2));
}

.identity-table-col-roles[b-347kia1i4s] {
    width: calc(13.125rem + 2 * var(--lk-space-2));
}

.identity-table-col-organizations[b-347kia1i4s] {
    width: calc(11.25rem + 2 * var(--lk-space-2));
}

.identity-table-col-action[b-347kia1i4s] {
    width: calc(8.125rem + 2 * var(--lk-space-2));
}

.identity-table-col-created[b-347kia1i4s] {
    width: calc(5.9375rem + var(--lk-space-2) + var(--lk-space-5));
}

/* ── Loading ────────────────────────────────────────────── */

.identity-list-loading-row[b-347kia1i4s] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The Act-as column. Right-aligned so the buttons form one edge rather than a ragged one, as
   the Prototype's `justify-content: flex-end`. Its width is the column's. */
.identity-table-action[b-347kia1i4s] {
    text-align: right;
    white-space: nowrap;
}
/* /Pages/Identities/IdentityMainPage.razor.rz.scp.css */
/* The toolbar is the shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15): a
   search field with the type and role filters beside it. */

/* The loading region's gap below the header is PageStateComponent's LoadingSpaced since #787. The
   region is the component's element, which a rule here no longer reaches. */

/* The line inside the confirmation, muted as the category confirmation's is. This read
   --lk-ink-mut, which is not a token, so the line took the inherited colour (#564). */
.identities-confirm-body[b-ysh998pt4i] {
    margin: 0;
    color: var(--lk-text-mut);
    line-height: 1.5;
}
/* /Pages/Identities/IdentityNewPage.razor.rz.scp.css */
/* One column of fields in one card, as /kiosks/new has it. Narrow enough that a name field does
   not stretch across a wide screen. */

.identity-new-body[b-z45eyib74j] {
    max-width: 48rem;
}

.identity-new-fields[b-z45eyib74j] {
    display: grid;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}

/* A failure the person cannot fix on a field, so it sits with the form. */
.identity-new-failure[b-z45eyib74j] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.identity-new-skeleton-field[b-z45eyib74j] {
    margin-top: var(--lk-space-4);
}

.identity-new-skeleton-gap[b-z45eyib74j] {
    margin-top: var(--lk-space-2);
}

/* The new application's client id and secret, one under the other, each taken whole with its copy
   button (#1367). */
.identity-new-client[b-z45eyib74j] {
    display: grid;
    gap: var(--lk-space-3);
}

.identity-new-client-next[b-z45eyib74j] {
    margin: var(--lk-space-4) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Pages/Invitations/InvitationPage.razor.rz.scp.css */
/* One centred card on the public layout, as onboarding. */
.invitation[b-k79tb0n6ma] {
    width: min(100%, 520px);
    margin: 0 auto;
}

/* The onboarding card's title, which this page sits beside in the same layout. */
.invitation-title[b-k79tb0n6ma] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--lk-ink);
}

.invitation-intro[b-k79tb0n6ma] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
}

.invitation-note[b-k79tb0n6ma] {
    margin: 0 0 var(--lk-space-4);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.invitation-actions[b-k79tb0n6ma] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-4);
    margin-top: var(--lk-space-4);
}

.invitation-error[b-k79tb0n6ma] {
    margin-bottom: var(--lk-space-3);
}
/* /Pages/Keyboxes/AcknowledgeMissingEventsDialog.razor.rz.scp.css */
.acknowledge-missing-fields[b-zq3iu27bam] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
}

.acknowledge-missing-count[b-zq3iu27bam] {
    margin: 0;
    text-align: right;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.acknowledge-missing-count-over[b-zq3iu27bam] {
    color: var(--lk-err);
}

.acknowledge-missing-hint[b-zq3iu27bam] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.acknowledge-missing-error[b-zq3iu27bam] {
    margin: 0;
    color: var(--lk-err);
    font-size: var(--lk-font-size-caption);
}
/* /Pages/Keyboxes/AlcoholLockCalibrationLine.razor.rz.scp.css */
.alcohol-line[b-oigcqjmhym] {
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.alcohol-line-warn[b-oigcqjmhym] {
    background: var(--lk-warn-soft);
}

.alcohol-line-err[b-oigcqjmhym] {
    background: var(--lk-err-soft);
}

.alcohol-line-row[b-oigcqjmhym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    color: var(--lk-text-sec);
}

.alcohol-line-text[b-oigcqjmhym] {
    flex: 1;
    min-width: 12rem;
    font-size: var(--lk-font-size-ui);
    color: var(--lk-ink);
}

.alcohol-line-muted[b-oigcqjmhym] {
    color: var(--lk-text-sec);
}

.alcohol-line-days[b-oigcqjmhym] {
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
}

.alcohol-line-warn .alcohol-line-days[b-oigcqjmhym] {
    color: var(--lk-warn);
}

.alcohol-line-err .alcohol-line-days[b-oigcqjmhym] {
    color: var(--lk-err);
}

.alcohol-line-note[b-oigcqjmhym] {
    margin: var(--lk-space-2) 0 0;
    padding-left: var(--lk-space-8);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}
/* /Pages/Keyboxes/AlcoholLockCalibrationsComponent.razor.rz.scp.css */
.alcohol-history-empty[b-yo7vm53k37] {
    margin: 0;
    padding: 0 var(--lk-space-5) var(--lk-space-5);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text-sec);
}

.alcohol-history-scroll[b-yo7vm53k37] {
    overflow-x: auto;
}

.alcohol-history-table[b-yo7vm53k37] {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: var(--lk-font-size-ui);
}

.alcohol-history-table th[b-yo7vm53k37],
.alcohol-history-table td[b-yo7vm53k37] {
    padding: var(--lk-space-3) var(--lk-space-5);
    text-align: left;
    vertical-align: middle;
    color: var(--lk-text);
}

.alcohol-history-table thead th[b-yo7vm53k37] {
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
    color: var(--lk-text-sec);
    background: var(--lk-surface-alt);
}

.alcohol-history-table tbody tr + tr[b-yo7vm53k37] {
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.alcohol-history-table tbody th[b-yo7vm53k37] {
    font-weight: 600;
    color: var(--lk-ink);
}

.alcohol-history-muted[b-yo7vm53k37] {
    color: var(--lk-text-mut);
}

.alcohol-history-action[b-yo7vm53k37] {
    text-align: right;
    white-space: nowrap;
}

/* A date reads as one: "17 okt. 2026" never breaks over two lines. */
.alcohol-history-table tbody th[b-yo7vm53k37],
.alcohol-history-table tbody td:nth-child(2)[b-yo7vm53k37] {
    white-space: nowrap;
}
/* /Pages/Keyboxes/KeyboxCredentialRotationComponent.razor.rz.scp.css */
/* One short paragraph, the status, one row of buttons and the latest outcome. Tokens only
   (ADR 0003, ADR 0005). */
.keybox-credentials-text[b-j1taebsqvs] {
    color: var(--lk-text-mut);
    margin: 0 0 var(--lk-space-4);
}

/* The status lines stack with the same gap whether there is one of them or three. */
.keybox-credentials-status[b-j1taebsqvs] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
}

.keybox-credentials-changed[b-j1taebsqvs] {
    margin: 0;
}

.keybox-credentials-actions[b-j1taebsqvs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-4);
}

.keybox-credentials-done[b-j1taebsqvs] {
    margin-top: var(--lk-space-3);
}

/* --lk-err: this read --lk-danger, which is not a token, so the failure was drawn in the
   inherited text colour rather than red (#564). */
.keybox-credentials-failure[b-j1taebsqvs] {
    color: var(--lk-err);
    margin: var(--lk-space-3) 0 0;
}
/* /Pages/Keyboxes/KeyboxDeviceSettingsComponent.razor.rz.scp.css */
/* A toggle is one line of text and takes the whole row, rather than half of a two-column group
   beside nothing. No ::deep: the div is written in this file's markup and handed to
   FieldGroupComponent as child content, so it carries this file's scope attribute itself. */
.keybox-device-wide[b-hvm5lpclzs] {
    grid-column: 1 / -1;
}
/* /Pages/Keyboxes/KeyboxEventListComponent.razor.rz.scp.css */
/* The same table as the organisation-wide feed, one column shorter. A real table rather than the
   Prototype's flex rows, because the data is tabular and a table announces row and column without
   anything being written for it — the same reasoning as SortableColumnHeader, which owns the
   header cells.

   A copy of EventListComponent's rules rather than a shared stylesheet, and that is the cost of
   splitting the component (#641). Scoped CSS is per component by construction: a shared file would
   have to be global, and a global .event-table would then style two components from outside their
   own scope, which is the thing scoped CSS exists to stop. The shared part is the behaviour, in
   BaseEventListComponent — the shapes are allowed to drift because the Prototype draws them
   separately. */

.keybox-event-list[b-rn32mqvzy9] {
    display: grid;
    gap: var(--lk-space-4);
}

/* No table-layout: fixed, though the Prototype's flex: 1 on event, key and user
   (BoxDetail.razor:461-476) shares the rest exactly equally and a fixed table would too. A fixed
   table holds every sized column to its width whatever is in it, so a heading that is longer in
   Finnish than in Swedish is clipped at the column's edge — the column ADR 0002's Consequences
   name. Under the default layout a column's width is a floor instead: the column grows for a word
   that does not fit, and the three unsized columns share the rest by their content, as on the
   organisation-wide feed (#922). */

/* The timestamp identifies the row, so it is a <th> rather than a cell. Tabular figures so a
   column of times lines up digit under digit, which is what makes a log scannable; without them a
   1 is narrower than a 7 and the minutes drift.

   12.5px at the row's own weight: the Prototype's span is `.dim` with font-size:12.5px
   (BoxDetail.razor:470), the same as the organisation-wide feed's date, which EventListComponent
   already draws that way. This one was 14.5px at 500 (#750). */
.keybox-event-table-time[b-rn32mqvzy9] {
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
    color: var(--lk-text-sec);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The Prototype's event cell (BoxDetail.razor:466-469): a small dot and the word in the ui face,
   semibold, one line with an ellipsis. Muted dot and plain text as a rule; the error colour on both
   for a warning. The dot is decoration — the word carries the meaning, and the colour is on the
   word too. */
.keybox-event-table-kind[b-rn32mqvzy9] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    min-width: 0;
}

.keybox-event-table-kind-dot[b-rn32mqvzy9] {
    flex: 0 0 auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-text-mut);
}

.keybox-event-table-kind-word[b-rn32mqvzy9] {
    min-width: 0;
    font-weight: 600;
    color: var(--lk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keybox-event-table-kind-warn .keybox-event-table-kind-dot[b-rn32mqvzy9],
.keybox-event-table-kind-warn .keybox-event-table-kind-word[b-rn32mqvzy9] {
    color: var(--lk-err);
    background-color: var(--lk-err);
}

.keybox-event-table-kind-warn .keybox-event-table-kind-word[b-rn32mqvzy9] {
    background-color: transparent;
}

/* The Prototype's widths (BoxDetail.razor:461-476): the date span 170px and the slot span 70px
   inside a row padded 20px at the edges, the event, the key and the user flex: 1.

   ON <col>, NOT ON th. The date and user headings are SortableColumnHeader's own <th>, rendered
   outside this component's scope, so "thead th:nth-child(1)" never matched the date heading and
   the browser's auto layout gave the date about 440px of a 1200px table while the slot rule, on a
   plain <th> of this component, did apply (structure agent, staging 2026-09-23; !520 claimed the
   Prototype's widths and had not measured). A <col> is this component's markup.

   A column's width includes its cells' padding, and the Prototype's 170px is the span alone. So
   each width is written as the span plus the padding tokens .lk-list-table gives its cells — the
   first cell's 20px on the left (th:first-child) and 8px on the right, 8px a side for the slot —
   rather than as their sum. The sum, 198px and 86px, held only at the compact density: the padding
   scales with --lk-density and a summed number does not, so at the airy density the span shrank by
   whatever the padding gained (ADR 0007 point 9, #922). */
.keybox-event-table-col-date[b-rn32mqvzy9] {
    width: calc(10.625rem + var(--lk-space-5) + var(--lk-space-2));
}

.keybox-event-table-col-slot[b-rn32mqvzy9] {
    width: calc(4.375rem + 2 * var(--lk-space-2));
}

/* The size and ink are the shared .lk-list-muted. It had the ink without the size, so the slot
   and user read a step larger than the Prototype's .dim beside a 13px key name (#750). */
.keybox-event-table-muted[b-rn32mqvzy9] {
    overflow-wrap: anywhere;
}

/* The key name, in the one place a key name is coloured. The Prototype's cabinet log draws it in
   magenta ink against the muted columns either side of it (BoxDetail.razor:474) — on a log about
   one cabinet, which key an event touched is the column a reader scans for, and the colour is what
   makes that possible without a heavier weight. The organisation-wide feed leaves it muted, so this
   rule is deliberately not in EventListComponent's stylesheet. See KeyNameClass (#678). */
.keybox-event-table-key[b-rn32mqvzy9] {
    /* 13px, as the dash that stands in for it and as the Prototype's span (BoxDetail.razor:474).
       Without it the name was the one cell in the row at the table's full size (#750). */
    font-size: var(--lk-font-size-label);
    color: var(--lk-magenta-ink);
    overflow-wrap: anywhere;
}

/* ── Loading ────────────────────────────────────────────── */

.keybox-event-list-loading-row[b-rn32mqvzy9] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Keyboxes/KeyboxEventsPage.razor.rz.scp.css */
/* The toolbar is the shared list toolbar (.lk-list-toolbar in app.css) since #680, as the key's
   history tab has been since #679. It had its own copy here, which #679 left alone while !427 was
   rewriting this page, and the copy had drifted: a 15rem minimum on the search, and a breakpoint
   at 40rem where every other list stacks at 48rem. */

/* /Pages/Keyboxes/KeyboxHardwarePage.razor.rz.scp.css */
/* The hardware tab (#1271). Colours and spacing are tokens only; the bars' widths are the one value
   set inline, because they are data (KeySlotWear.Width), as KeyboxListComponent's slot meter is. */
.keybox-hardware[b-0vioj7agy0] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-5);
}

/* Door openings per board, then the most used lock: three across where there is room. */
.keybox-hardware-stats[b-0vioj7agy0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--lk-space-4);
}

/* A narrow screen scrolls the table, not the page. */
.keybox-hardware-scroll[b-0vioj7agy0] {
    overflow-x: auto;
}

.keybox-hardware-table[b-0vioj7agy0] {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-family: var(--lk-font-ui);
}

.keybox-hardware-table th[b-0vioj7agy0],
.keybox-hardware-table td[b-0vioj7agy0] {
    padding: var(--lk-space-3) var(--lk-space-5);
    text-align: left;
    vertical-align: middle;
}

.keybox-hardware-table thead th[b-0vioj7agy0] {
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-text-sec);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.keybox-hardware-table tbody tr + tr[b-0vioj7agy0] {
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.keybox-hardware-slot[b-0vioj7agy0] {
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title-sm);
    color: var(--lk-ink);
    width: 4rem;
}

.keybox-hardware-main[b-0vioj7agy0] {
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.keybox-hardware-sub[b-0vioj7agy0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* "History" is a ghost Button; its class lands on Button's own element, hence ::deep. */
.keybox-hardware-sub[b-0vioj7agy0]  .keybox-hardware-history {
    min-height: 0;
    padding: 0 var(--lk-space-1);
    color: var(--lk-magenta-ink);
    text-decoration: underline;
}

.keybox-hardware-bar[b-0vioj7agy0] {
    display: block;
    height: var(--lk-space-1);
    margin-top: var(--lk-space-2);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-sunken);
    overflow: hidden;
}

.keybox-hardware-fill[b-0vioj7agy0] {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.keybox-hardware-fill-lock[b-0vioj7agy0] {
    background: var(--lk-navy);
}

.keybox-hardware-fill-blue[b-0vioj7agy0] {
    background: var(--lk-info);
}

.keybox-hardware-fill-red[b-0vioj7agy0] {
    background: var(--lk-err);
}

.keybox-hardware-action[b-0vioj7agy0] {
    text-align: right;
    white-space: nowrap;
}

.keybox-hardware-foot[b-0vioj7agy0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}
/* /Pages/Keyboxes/KeyboxHealthComponent.razor.rz.scp.css */
/* The cabinet's health card (#1105). Tokens only, as every drawing in the portal (ADR 0007 point 8):
   CPU in magenta, memory in navy, the same two in the swatches beside their numbers. */

.keybox-health-body[b-sr5deea9dg] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) var(--lk-space-5);
}

.keybox-health-facts[b-sr5deea9dg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-3) var(--lk-space-6);
    margin: 0;
    font-family: var(--lk-font-ui);
}

.keybox-health-facts dt[b-sr5deea9dg] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

.keybox-health-facts dd[b-sr5deea9dg] {
    margin: 0;
    font-weight: 600;
    color: var(--lk-text);
}

.keybox-health-swatch[b-sr5deea9dg] {
    display: inline-block;
    width: var(--lk-space-3);
    height: var(--lk-space-1);
    border-radius: var(--lk-radius-pill);
}

.keybox-health-swatch-cpu[b-sr5deea9dg] {
    background: var(--lk-magenta);
}

.keybox-health-swatch-memory[b-sr5deea9dg] {
    background: var(--lk-navy);
}

.keybox-health-chart[b-sr5deea9dg] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 140;
}

.keybox-health-grid[b-sr5deea9dg] {
    stroke: var(--lk-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.keybox-health-line[b-sr5deea9dg] {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.keybox-health-line-cpu[b-sr5deea9dg] {
    stroke: var(--lk-magenta);
}

.keybox-health-line-memory[b-sr5deea9dg] {
    stroke: var(--lk-navy);
}

.keybox-health-period[b-sr5deea9dg] {
    display: flex;
    justify-content: space-between;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.keybox-health-muted[b-sr5deea9dg] {
    margin: 0;
    color: var(--lk-text-mut);
}
/* /Pages/Keyboxes/KeyboxKeyListComponent.razor.rz.scp.css */
/* Same shape as the colleague and key tables: a real table, because the data is tabular and a
   table announces row and column without anything being written for it.

   The toolbar above the card is the shared list toolbar (.lk-list-toolbar in app.css), which
   carries its own 16px below it — so this wrapper adds no gap of its own (#680). */

/* The Prototype gives the name two parts of the row and the status one (BoxDetail.razor:384-386). */
.keybox-key-table-status[b-og5ib2af1e] {
    width: 33%;
}

/* The slot number is the column people scan down, so it is set in the display face and given a
   fixed width — a number that moves left and right between rows is harder to read than one that
   does not. */
.keybox-key-table-slot[b-og5ib2af1e] {
    width: 6rem;
    font-family: var(--lk-font-display);
    font-weight: 700;
    color: var(--lk-ink);
}

/* Quieter than a number, because it is the absence of one. */
.keybox-key-table-no-slot[b-og5ib2af1e] {
    font-family: var(--lk-font-ui);
    font-weight: 400;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* The row's text colour, not ink: the Prototype's .lrow .name is var(--text), and ink is kept for
   the slot number beside it. Measured 2026-09-15 (#680); the key list's name inherits the same way. */
.keybox-key-table-name[b-og5ib2af1e] {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.keybox-key-table-name:hover[b-og5ib2af1e] {
    text-decoration: underline;
}

/* The name and, under it, the missing-tag badge (#1273): the key list's two-line stack, the badge
   left-aligned with the name and a small gap above (Niklas 2026-10-16). One line without it. */
.keybox-key-table-key[b-og5ib2af1e] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-1);
    vertical-align: middle;
}
/* /Pages/Keyboxes/KeyboxKeysPage.razor.rz.scp.css */


/* The missing-tag notice sits above the list's toolbar (#1273). The class is handed to a component, so ::deep (ADR 0007). */
[b-8caci1v5zr] .keybox-keys-missing-tag {
    margin-bottom: var(--lk-space-4);
}
/* /Pages/Keyboxes/KeyboxListComponent.razor.rz.scp.css */
/* Cards rather than rows, following the Prototype's grid. A cabinet is a physical object with a
   place and a state, and there are a handful of them — a table would give it columns it does not
   have and an ordering nobody asked for. */

.keybox-list[b-07gl9rc10k] {
    display: grid;
    gap: var(--lk-space-4);
}

/* auto-fill with a minimum, as the Prototype does: one column on a phone, as many as fit on a
   wide screen, without a breakpoint per size.

   26.25rem is the Prototype's 420px. This said 20rem (320px), which took the pattern from
   `fa617c1` ("Use full screen width", @niklas 2026-07-09) but not its number — that commit set
   the minimum precisely so that a wide screen gets three columns of a readable width. At 320px
   it gets more columns, each narrower. The loading grid below carries the same value so the
   layout does not jump when the real cards arrive. Capped at the column's width, as the kiosk
   grid is, so a phone narrower than 420px gets one card that fits rather than one that sticks
   out past the screen (#1386). */
.keybox-grid[b-07gl9rc10k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26.25rem), 1fr));
    gap: var(--lk-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Every card as tall as the tallest in its row. The grid stretches the <li> to the row already;
   what did not follow was the <a> inside it, so a card with an update badge came out 152px next
   to one of 135px without (structure agent, staging 2026-09-23; the Prototype's are all 155px).
   A flex <li> stretches its one child to its own height. */
.keybox-grid > li[b-07gl9rc10k] {
    display: flex;
}

/* The whole card is one anchor. Grid rather than flex so the identity column is the one that
   gives way when the name is long — the mark and the status keep their size. */
.keybox-card[b-07gl9rc10k] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* The identity row takes whatever height the card is given and the meter sits at the bottom
       of it, so a badge more or less in one card never moves the meter in any of them. */
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lk-space-3);
    width: 100%;
    box-sizing: border-box;
    /* The Prototype's .card.pad.hover: 20px of padding and the medium shadow at rest — .hover is
       a static class there, not a pointer state. Both were a step short here, which made the
       cards read flatter and tighter than every other card on the screen. */
    padding: var(--lk-space-5);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-md);
    text-decoration: none;
    color: inherit;
    transition: var(--lk-transition);
}

.keybox-card:hover[b-07gl9rc10k] {
    background: var(--lk-ghost-hover);
    border-color: var(--lk-line-strong);
}

.keybox-card:focus-visible[b-07gl9rc10k] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.keybox-card-mark[b-07gl9rc10k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    /* 12.9px on this 46px mark, the Prototype's 13px. */
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
    flex: none;
}

.keybox-card-identity[b-07gl9rc10k] {
    display: grid;
    gap: var(--lk-space-1);
    min-width: 0;
}

/* The display font, as the Prototype gives the cabinet name on its card — it is the one thing
   read from across a room. Truncated rather than wrapped: a name that takes two lines pushes the
   place out of alignment with every neighbouring card. */
.keybox-card-name[b-07gl9rc10k] {
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title-sm);
    color: var(--lk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keybox-card-place[b-07gl9rc10k] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-1);
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.keybox-card-place span[b-07gl9rc10k] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keybox-card-status[b-07gl9rc10k] {
    display: grid;
    justify-items: end;
    gap: var(--lk-space-1);
    flex: none;
}

/* Tabular figures so the eight characters line up card to card — it is an identifier being
   scanned down a column, not prose. */
.keybox-card-reference[b-07gl9rc10k] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--lk-text-mut);
}

/* ── The meter ──────────────────────────────────────────────
   The Prototype's "Använda platser 12 / 20" with a bar (Boxes.razor:60-65, .meter in app.css:
   8px track on the sunken ground, pill radius, magenta fill — muted when the cabinet is offline).
   A fourth row across the card's three columns, 18px under the identity row; space-4 is the
   scale's nearest step. */
.keybox-card-meter[b-07gl9rc10k] {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-1);
}

.keybox-card-meter-label[b-07gl9rc10k] {
    display: flex;
    justify-content: space-between;
    gap: var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

.keybox-card-meter-count[b-07gl9rc10k] {
    font-weight: 600;
    color: var(--lk-text);
    font-variant-numeric: tabular-nums;
}

.keybox-card-meter-track[b-07gl9rc10k] {
    display: block;
    height: 0.5rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-sunken);
    overflow: hidden;
}

.keybox-card-meter-fill[b-07gl9rc10k] {
    display: block;
    height: 100%;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-magenta);
}

.keybox-card-meter-fill-idle[b-07gl9rc10k] {
    background: var(--lk-text-mut);
}

/* ── Loading ────────────────────────────────────────────── */

/* ::deep, because the element is now LoadingRegion's root and carries its scope id, not this
   file's. The card grid is this list's own shape, so it stays here rather than becoming a
   variant on the component (ADR 0007 point 8). */
.keybox-list[b-07gl9rc10k]  .keybox-list-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26.25rem), 1fr));
    gap: var(--lk-space-4);
}

/* The skeleton borrows the card's frame so the grid does not resize when the real cards arrive. */
.keybox-card-skeleton[b-07gl9rc10k] {
    grid-template-columns: auto minmax(0, 1fr);
}

.keybox-card-skeleton:hover[b-07gl9rc10k] {
    background: var(--lk-surface);
    border-color: var(--lk-line);
}

.keybox-card-skeleton-lines[b-07gl9rc10k] {
    display: grid;
    gap: var(--lk-space-2);
    min-width: 0;
}

/* ── The table view ─────────────────────────────────────────
   The same shape as the key and colleague tables (.lk-list-table in app.css carries the band,
   the cells and the linked row); what is here is this table's own columns. */

/* The selection boxes for Lyker's staff (#958): the box and the cell's padding, nothing more. */
.keybox-table-select-column[b-07gl9rc10k] {
    width: 3rem;
}

/* Name over place, as the card stacks them, without the card's display face: in a row the name
   is one of five cells, not the thing read from across a room. */
.keybox-table-identity[b-07gl9rc10k] {
    display: grid;
    gap: var(--lk-space-1);
    min-width: 0;
}

.keybox-table-name[b-07gl9rc10k] {
    color: inherit;
    font-weight: 600;
    text-decoration: none;

    /* One line, ending in an ellipsis — the same three declarations the card's name has carried
       since it was built (.keybox-card-name). The table's cell is `overflow: hidden` without
       `text-overflow`, so a long name was sliced mid-character with nothing to say it had been
       cut; this is the list mode @niklas described, where the cards were already right (#1151).

       Not wrapped: the rows were made the same height on purpose, and a two-line name would undo
       that for one row in a list. The full name is in the
       cabinet's own page, and the title attribute is not used here because a row is a link and the
       browser's own tooltip on the cell would fight it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keybox-table-name:hover[b-07gl9rc10k] {
    text-decoration: underline;
}

.keybox-table-place[b-07gl9rc10k] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);

    /* The place ellipses for the same reason as the name above it: an address is often longer than
       a name, and this is the line that overflowed first. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The number column (#1147). Tabular figures so a column of numbers lines up; not muted the way
   the eight characters of the guid were, because the number is the row's own name now. */
.keybox-table-number[b-07gl9rc10k] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The card's meter, a row high: the count over a short track. */
.keybox-table-meter[b-07gl9rc10k] {
    display: grid;
    gap: var(--lk-space-1);
    width: 7rem;
}

.keybox-table-meter-count[b-07gl9rc10k] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On an inner span, never on the td (see the markup). */
/* Two lines, always: the version, and under it the badge's line — occupied by a hidden badge
   when there is nothing to say. Wrapping the badge beside the version made rows with one 71px
   and rows without 62px (structure agent, staging 2026-09-23); a reserved line keeps every row
   the same height at every width, and the badge can never reach the next cell. */
.keybox-table-version[b-07gl9rc10k] {
    display: grid;
    justify-items: start;
    gap: var(--lk-space-1);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.keybox-table-version > span:first-child[b-07gl9rc10k] {
    white-space: nowrap;
}

.keybox-table-version-badge[b-07gl9rc10k] {
    max-width: 100%;
}

/* Same box, no ink and no announcement: visibility keeps the height that display: none drops. */
.keybox-table-version-badge-empty[b-07gl9rc10k] {
    visibility: hidden;
}

/* ── How the width is shared in list mode (#1151, @niklas chose the wider minimum) ───────────────
   Before this, the only column with a declared width was the checkbox, so under
   `table-layout: fixed` every other column took an equal share: about 8.2rem each at the old
   52rem minimum. That is what made both halves of the complaint true at once — the name had too
   little room and the columns to the right were cramped.

   Each column that holds something of a known size says how much it needs; the name column says
   nothing and therefore takes everything left over, which is what a fixed layout does with an
   undeclared column. Add a column and give it a width here, or the name silently loses that much.

   `::deep`, under the table's own class: the widths sit on headers rendered by
   SortableColumnHeader, whose markup carries that component's scope and not this one's. Without
   ::deep these rules would match nothing and do it silently (the house rule in CLAUDE.md). The
   plain <th> for Status is a descendant too, so it is reached the same way and the block stays
   uniform. */
.keybox-table[b-07gl9rc10k] {
    /* 3 (select) + 8 + 9 + 9 + 11 + 10 = 50rem of sized columns in the widest case — every column
       drawn at once, for a system administrator looking at all organisations — which leaves the
       name about 18rem. The old 52rem would have left it 2rem, worse than before.

       The cost, chosen deliberately: the card's horizontal scroll (.lk-table-scroll) now starts at
       a wider window than it used to. The alternative was dropping a column on a narrow screen,
       which hides information instead of moving it. */
    min-width: 68rem;
}

.keybox-table[b-07gl9rc10k]  .keybox-col-number {
    /* "RNS129" needs far less, but the migration turned display names into numbers and the longest
       name in production was 31 characters (#1147). Those want tidying by hand; until then they
       ellipse rather than being invisible. */
    width: 8rem;
}

.keybox-table[b-07gl9rc10k]  .keybox-col-status {
    /* The dot, and the word beside it. Sized for the longest translation rather than the Swedish. */
    width: 9rem;
}

.keybox-table[b-07gl9rc10k]  .keybox-col-slots {
    /* "12 / 20" and the meter track under it. */
    width: 9rem;
}

.keybox-table[b-07gl9rc10k]  .keybox-col-version {
    /* "2026.9.7.2573" is thirteen characters. The update badge is on its own line and needs no
       width of its own. */
    width: 11rem;
}

.keybox-table[b-07gl9rc10k]  .keybox-col-tenant {
    /* A company name, which ellipses: there is no length that fits every one of them. */
    width: 10rem;
}

/* The connection never wraps (#1327, rule 6). */
.keybox-table-status[b-07gl9rc10k] {
    white-space: nowrap;
}
/* /Pages/Keyboxes/KeyboxMainPage.razor.rz.scp.css */
/* The toolbar is the shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15): the
   search field, and the status filter beside it. */

/* The loading region's gap above it is PageStateComponent's LoadingSpaced (#786). The rule that
   stood here reached an element the page no longer owns. */

/* The view switch at the right end of the toolbar — the design's ListToolbar keeps a `right`
   slot there. margin-left: auto pushes it past the search and the filter; when the toolbar
   stacks on a narrow screen (48rem, app.css) it simply becomes the last row. */
.keyboxes-view-switch[b-ygqo8937oy] {
    margin-left: auto;
}

/* ── Synchronize, for Lyker's staff (#958) ──────────────────
   The loan list's selection bar and outcome, property for property (LoanScreenComponent.razor.css,
   LoanMainPage.razor.css), so the two bulk actions in the portal look like one. Both sit in
   ListLayout's banner slot since #1386, which brings the margin under them. */
.keyboxes-selection-bar[b-ygqo8937oy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-magenta);
    border-radius: var(--lk-radius-card);
    background: var(--lk-magenta-soft);
}

/* Pushes the buttons to the far end. */
.keyboxes-selection-count[b-ygqo8937oy] {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

.keyboxes-selection-actions[b-ygqo8937oy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
}


.keyboxes-command-outcome[b-ygqo8937oy] {
    display: grid;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

/* The banner's margin goes under the last of them; this one is between the outcome and the bar. */
.keyboxes-command-outcome:not(:last-child)[b-ygqo8937oy] {
    margin-bottom: var(--lk-space-4);
}

.keyboxes-command-accepted[b-ygqo8937oy],
.keyboxes-command-failed[b-ygqo8937oy] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin: 0;
    padding: var(--lk-space-2) var(--lk-space-3);
    border-radius: var(--lk-radius-control);
}

.keyboxes-command-accepted[b-ygqo8937oy] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

/* Warning, not error, as the reminders: a cabinet the command did not reach is news. */
.keyboxes-command-failed[b-ygqo8937oy] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}
/* /Pages/Keyboxes/KeyboxNewPage.razor.rz.scp.css */
/* The Prototype's modal on a page: one column, with slots and location side by side
   (Boxes.razor:89). The device settings follow as groups of their own (#759). */

/* The cabinet's card and the device groups under it, one column of cards. Wide enough for the
   groups' two-up fields (FieldGroupComponent), narrow enough that a name field does not stretch
   across a wide screen. The skeleton draws inside it too (#786): the loading region is
   PageStateComponent's element now, which a rule here no longer reaches. */
.keybox-new-body[b-t2yht5e5zf] {
    display: grid;
    gap: var(--lk-space-4);
    max-width: 48rem;
}

.keybox-new-form[b-t2yht5e5zf] {
    display: grid;
    gap: var(--lk-space-4);
}

.keybox-new-pair[b-t2yht5e5zf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-4);
}

/* A phone has no room for two fields in a row. */
@media (max-width: 30rem) {
    .keybox-new-pair[b-t2yht5e5zf] {
        grid-template-columns: 1fr;
    }
}

/* A failure the person cannot fix on a field, so it sits with the form. */
.keybox-new-failure[b-t2yht5e5zf] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.keybox-new-skeleton-field[b-t2yht5e5zf] {
    margin-top: var(--lk-space-4);
}

.keybox-new-skeleton-gap[b-t2yht5e5zf] {
    margin-top: var(--lk-space-2);
}
/* /Pages/Keyboxes/KeyboxPageLayout.razor.rz.scp.css */
/* The statistics row above the tab row. The Prototype has four columns (.stat-row, app.css:536)
   and so does this, but only for a reader who gets four cards: the uptime card is System:Admin
   only, so the row holds three or four depending on who is looking.

   The column count therefore follows the card count rather than being written once. A modifier
   class rather than auto-fit, so both counts land on exactly the Prototype's layout instead of on
   whatever a minmax() happens to produce at a given width.

   Two on a narrow screen either way, as the Prototype's own breakpoint does at 720px. An odd card
   over a full-width row beats four columns squeezed to fit. */
.keybox-header-stats[b-u9hrswibkb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.keybox-header-stats-4[b-u9hrswibkb] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 45rem) {
    .keybox-header-stats[b-u9hrswibkb],
    .keybox-header-stats-4[b-u9hrswibkb] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Keyboxes/KeyboxSettingsPage.razor.rz.scp.css */
/*
    The Prototype draws this tab as a stack of cards with inline styles (BoxDetail.razor:70-363).
    The shapes are kept — cards in a column with the save button in the first card's heading, a head
    with the switch or badge on the right, a row with a growing text block and a button beside it,
    the door's segmented row — and the values come from tokens.
*/

.keybox-settings[b-jpqfcgsr6d] {
    display: grid;
    gap: var(--lk-space-4);
}

/* Inside a two-column field group, a field that takes the whole row — the Prototype's Span2. */
.keybox-settings-wide[b-jpqfcgsr6d] {
    grid-column: 1 / -1;
}

/* The body of a card whose head is CardHeader's: the same 20px the field group's body carries. */
.keybox-settings-body[b-jpqfcgsr6d] {
    padding: var(--lk-space-5);
}

/* The interlock's fields, laid out as a field group's body is (FieldGroupComponent.razor.css),
   under a head that FieldGroupComponent cannot draw: the switch sits in the head, not under the
   fields. */
.keybox-settings-fields[b-jpqfcgsr6d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}

@media (max-width: 60rem) {
    .keybox-settings-fields[b-jpqfcgsr6d] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A label over something that is not a field — the door's row of choices — drawn as TextField
   draws its own. */
.keybox-settings-label[b-jpqfcgsr6d] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.keybox-settings-label-inline[b-jpqfcgsr6d] {
    margin: 0;
}

/* The interlock's switch with its label beside it, in the card's head. */
.keybox-settings-switch[b-jpqfcgsr6d] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-3);
}


.keybox-settings-row[b-jpqfcgsr6d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-5);
}

.keybox-settings-grow[b-jpqfcgsr6d] {
    flex: 1;
    /* 220px is a literal on purpose, as in SoftwareCardComponent: the Prototype uses it on these
       cards only, and the scale has no width tokens. A few cards do not make a token (ADR 0063,
       #811). */
    min-width: 220px;
}

.keybox-settings p[b-jpqfcgsr6d] {
    margin: 0;
}

.keybox-settings-muted[b-jpqfcgsr6d] {
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-ui);
}

.keybox-settings-hint[b-jpqfcgsr6d] {
    margin-top: var(--lk-space-2);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-caption);
    line-height: var(--lk-line-height-body);
}

/* A code somebody keys into a cabinet or reads out over the phone: big, spaced, tabular. */
.keybox-settings-code[b-jpqfcgsr6d] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-stat);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--lk-text);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Keyboxes/KeyboxStatCard.razor.rz.scp.css */
/*
    The cabinet's statistics card — the Prototype's .stat (app.css:536-547).

    Every rule hangs off keybox-stat-inner rather than off the Card, because the class on <Card>
    carries Card's scope id and not this file's. See the markup for the long version; the short
    version is that a rule aimed at the Card would match nothing and say nothing about it.
*/

.keybox-stat-inner[b-beywpgnunh] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    padding: var(--lk-space-3) var(--lk-space-4);
    /* The card's own radius, so the warning tint below is cut off by the corner's curve rather
       than squared off just inside it. */
    border-radius: var(--lk-radius-card);
}

.keybox-stat-label[b-beywpgnunh] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    letter-spacing: 0.0375rem;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

.keybox-stat-value[b-beywpgnunh] {
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-stat);
    line-height: normal;
    color: var(--lk-ink);
    /* Lined-up digits, so three cards side by side do not look ragged. Same reason as KpiCard. */
    font-variant-numeric: tabular-nums;
}

/* ── The warning tint ───────────────────────────────────────
   Broken slots, when there are any.

   The Prototype recolours the card's border as well (.stat-warn { border-color: var(--warn) }),
   and so does this — asked for on 2026-09-23 after the two were compared. The border belongs to
   Card's own element, which this stylesheet cannot reach, so it is not restyled: it is covered. The
   inner fills the unpadded card to its border, so a hairline ring drawn just outside the inner,
   with the same radius, lands exactly on the card's own hairline and reads as one recoloured
   border rather than two. */
.keybox-stat-inner-warn[b-beywpgnunh] {
    background: var(--lk-warn-soft);
    box-shadow: 0 0 0 var(--lk-border-hairline) var(--lk-warn);
}

.keybox-stat-inner-warn .keybox-stat-value[b-beywpgnunh] {
    color: var(--lk-warn);
}
/* /Pages/Keyboxes/KeyboxSupportPage.razor.rz.scp.css */
/* The decommission card's one button, padded as the kiosk's lifecycle card is (#1571). */
.keybox-lifecycle[b-jpshnzftm3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-5);
    padding: var(--lk-space-5);
}
/* /Pages/Keyboxes/KeyboxVersionPickerComponent.razor.rz.scp.css */
/* The width is measured in the option's own font rather than fixed, and it cannot follow the text
   instead: Select lays the native select over its frame with position:absolute, so the text never
   sizes the box — the same reason PaginationComponent measures its page-size picker (#725). The font
   is set here only so that ch resolves in the value's font, 0.938rem being Select's own.

   16ch holds the longest version the build can produce — YEAR.MONTH.DAY.<pipeline id>
   (.gitlab-ci.yml, set-version), with up to a five-digit id. It was 24ch while the production badge
   rode along in the option (#1081); #1174 took the badge out. The two spaces are Select's left
   padding and chevron room, so the box follows the density as the padding does. */
.keybox-version-picker[b-b6hgdco5ek] {
    font-family: var(--lk-font-ui);
    font-size: 0.938rem;
    width: calc(16ch + var(--lk-space-4) + var(--lk-space-10));
}
/* /Pages/Keyboxes/KeySlotPartHistoryDialog.razor.rz.scp.css */
.key-slot-history[b-fzf68kmxsv] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-slot-history-row[b-fzf68kmxsv] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
}

.key-slot-history-row + .key-slot-history-row[b-fzf68kmxsv] {
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.key-slot-history-text[b-fzf68kmxsv] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-1);
    min-width: 0;
}

.key-slot-history-title[b-fzf68kmxsv] {
    font-weight: 600;
    color: var(--lk-text);
}

.key-slot-history-sub[b-fzf68kmxsv] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.key-slot-history-value[b-fzf68kmxsv] {
    font-weight: 600;
    color: var(--lk-ink);
    text-align: right;
}

.key-slot-history-error[b-fzf68kmxsv] {
    margin: 0;
    color: var(--lk-err);
}
/* /Pages/Keyboxes/KeySlotPartResetDialog.razor.rz.scp.css */
.key-slot-reset-parts[b-j9ssd5fhmb] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
    margin: 0 0 var(--lk-space-4);
    padding: 0;
    border: 0;
}

.key-slot-reset-parts legend[b-j9ssd5fhmb] {
    margin-bottom: var(--lk-space-2);
    padding: 0;
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.key-slot-reset-error[b-j9ssd5fhmb] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-err);
    font-size: var(--lk-font-size-caption);
}

/* Who the replacement is registered on, pushing the buttons right. */
.key-slot-reset-by[b-j9ssd5fhmb] {
    flex: 1;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}
/* /Pages/Keyboxes/RegisterAlcoholLockCalibrationDialog.razor.rz.scp.css */
.register-calibration-fields[b-87jltulpaa] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
}

.register-calibration-when[b-87jltulpaa] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--lk-space-3);
}

.register-calibration-count[b-87jltulpaa] {
    margin: 0;
    text-align: right;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.register-calibration-count-over[b-87jltulpaa] {
    color: var(--lk-err);
}

.register-calibration-by[b-87jltulpaa] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.register-calibration-error[b-87jltulpaa] {
    margin: 0;
    color: var(--lk-err);
    font-size: var(--lk-font-size-caption);
}

.register-calibration-spacer[b-87jltulpaa] {
    flex: 1;
}

.register-calibration-until[b-87jltulpaa] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

@media (max-width: 40rem) {
    .register-calibration-when[b-87jltulpaa] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Keys/BookingTimeline.razor.rz.scp.css */
/* The day as a bar. Taken stretches are outlined and dashed, the chosen one is filled — a
   difference in shape as well as in colour, so it survives being read by someone who does not
   separate the two hues. Same reasoning as the key list's status dots. */

.booking-timeline-track[b-ghh0eoffq2] {
    position: relative;
    height: var(--lk-control-height-lg);
    border-radius: var(--lk-radius-control);
    background: var(--lk-sunken);
    border: var(--lk-border-width) solid var(--lk-line);
    overflow: hidden;
}

.booking-timeline-busy[b-ghh0eoffq2],
.booking-timeline-chosen[b-ghh0eoffq2] {
    position: absolute;
    top: var(--lk-space-1);
    bottom: var(--lk-space-1);
    display: flex;
    align-items: center;
    padding: 0 var(--lk-space-2);
    border-radius: var(--lk-radius-sm);
    overflow: hidden;
}

.booking-timeline-busy[b-ghh0eoffq2] {
    background: var(--lk-surface-alt);
    border: var(--lk-border-width) dashed var(--lk-text-sec);
}

/* Draggable, so it says so with the cursor. touch-action:none stops the browser scrolling the
   page instead of handing us the pointer moves on a touch screen. */
.booking-timeline-chosen[b-ghh0eoffq2] {
    background: var(--lk-magenta);
    justify-content: center;
    box-shadow: var(--lk-shadow-sm);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.booking-timeline-chosen-dragging[b-ghh0eoffq2] {
    cursor: grabbing;
}

/* The two edges. Wide enough to hit without magnifying the block, and inside it so they never
   overlap a neighbouring booking. */
.booking-timeline-handle[b-ghh0eoffq2] {
    position: absolute;
    top: var(--lk-space-1);
    bottom: var(--lk-space-1);
    width: var(--lk-space-2);
    border-radius: var(--lk-radius-sm);
    background: var(--lk-magenta-contrast);
    opacity: 0.55;
    cursor: ew-resize;
}

.booking-timeline-handle-start[b-ghh0eoffq2] {
    left: 3px;
}

.booking-timeline-handle-end[b-ghh0eoffq2] {
    right: 3px;
}

/* The track owns the gesture once a drag starts, so it must not scroll under the pointer. */
.booking-timeline-track[b-ghh0eoffq2] {
    touch-action: none;
}

.booking-timeline-busy-label[b-ghh0eoffq2],
.booking-timeline-chosen-label[b-ghh0eoffq2] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    white-space: nowrap;
}

.booking-timeline-busy-label[b-ghh0eoffq2] {
    color: var(--lk-text);
}

.booking-timeline-chosen-label[b-ghh0eoffq2] {
    color: var(--lk-magenta-contrast);
}

.booking-timeline-scale[b-ghh0eoffq2] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--lk-space-1);
}

.booking-timeline-hour[b-ghh0eoffq2] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);

    /* Digits of equal width, so the scale does not jitter between hours. */
    font-variant-numeric: tabular-nums;
}
/* /Pages/Keys/KeyAccessPage.razor.rz.scp.css */
/* ── The info banner ────────────────────────────────────── */

/* The Prototype's info callout above the cards (KeyDetail.razor:204) is Components/Notice since the
   second one appeared (#673). Only its place on this page is left here. */
.key-access-note[b-19c25gmuu5] {
    margin: var(--lk-space-4) 0;
}

/* ── The two cards ──────────────────────────────────────── */

/* Side by side, people on the left and partners on the right, which is the Prototype's own
   composition — `grid-template-columns: 1fr 1fr` in KeyDetail.razor before portal@9ae78a2 removed
   the people half with its invented rows — and the design export's (key-detail.jsx:101). Restored
   in #760, now that #753 answers the people half with real data.

   `align-items: start` so a short card keeps its own height instead of stretching to the taller
   one: a card of three rows padded out to eight looks like it is still loading. */
.key-access-cards[b-19c25gmuu5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

/* One column before the cards get too narrow to read. Two lists of names and sources need more
   room than the design's own breakpoint gives them, so this is set at the width where a name and
   its source line stop fitting side by side rather than at a device size. */
@media (max-width: 64rem) {
    .key-access-cards[b-19c25gmuu5] {
        grid-template-columns: 1fr;
    }
}

/* The link out to the collaborations, in the partner card's head. A link and not a Button: it goes
   somewhere, and middle-click should work — and Button renders only a <button>. So it takes the
   ghost small Button's measurements from the same tokens (Button.razor.css), because the Prototype
   draws it as `btn ghost sm` (KeyDetail.razor:212). Its 34px is also what gives the card head the
   design's height; the text link it replaced was 24px and the head 12px short (#648). */
.key-access-partners-link[b-19c25gmuu5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    box-sizing: border-box;
    min-height: var(--lk-control-height-sm);
    padding: 0 var(--lk-control-padding-sm);
    border: var(--lk-border-width) solid transparent;
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    letter-spacing: 0.00625em;
    color: var(--lk-ink);
    text-decoration: none;
    transition: background var(--lk-transition);
}

.key-access-partners-link:hover[b-19c25gmuu5] {
    background: var(--lk-ghost-hover);
}

.key-access-partners-link:active[b-19c25gmuu5] {
    background: var(--lk-sunken);
}

.key-access-partners-link:focus-visible[b-19c25gmuu5] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* ── The rows ───────────────────────────────────────────── */

/* Both cards draw the same row: a 34px mark, a name, and a muted second line saying where the
   access is inherited from. That sameness is the reason the cards stand beside each other — the
   Prototype's two-column form has no column headings and no fixed badge column, and the table this
   page used until #760 was measured against the full width the partner card had while it stood
   alone (#648). The row itself is the same shape as the partner people list
   (PartnerPeoplePage.razor.css), so a reader meets one kind of person row in the portal.

   The row hover and the stretched link on the partner card come from li.lk-row-linked in app.css,
   as on every other linked list. */
.key-access-list[b-19c25gmuu5] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-access-row[b-19c25gmuu5] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-access-row:last-child[b-19c25gmuu5] {
    border-bottom: none;
}

.key-access-identity[b-19c25gmuu5] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.key-access-name[b-19c25gmuu5] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Focus is ringed on the name, as on the partner list (PartnerListComponent.razor.css), so every
   linked list in the portal shows it the same way. */
a.key-access-name:focus-visible[b-19c25gmuu5] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-control);
}

/* "Inherited from: Organisation · Category: Properties". Every route, so it wraps rather than
   truncates — a line cut off after the first source would read as the only route there is, which
   is the one thing this screen must not say. */
.key-access-inherit[b-19c25gmuu5] {
    margin-top: var(--lk-space-0-5);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

/* Same square mark as the Bookings tab. The people card uses Avatar at the same 34px instead,
   which is the Prototype's own distinction: a person gets initials, an organisation gets the
   building tile. */
.key-access-mark[b-19c25gmuu5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
    flex: none;
}

/* The chevron at the end of a linked row. Decoration — the row is already a link and its name
   announces where it goes. */
.key-access-chevron[b-19c25gmuu5] {
    display: inline-flex;
    flex: none;
    color: var(--lk-text-mut);
}

/* Icon is a child component, so its svg carries Icon's scope and not this page's. */
.key-access-chevron[b-19c25gmuu5]  svg {
    display: block;
}

/* ── Loading ────────────────────────────────────────────── */

/* The rows inside the skeleton's card, not the loading region. The region is PageStateComponent's
   since #782 and sits outside the card, where a rule from this file cannot reach it; this element
   is written in the page, so the rule still applies. */
.key-access-loading[b-19c25gmuu5] {
    display: grid;
    gap: var(--lk-space-4);
}

.key-access-loading-row[b-19c25gmuu5] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Keys/KeyAuditListComponent.razor.rz.scp.css */
/* One key's change log: a row list like the History tab (#1155). */

.key-audit-rows[b-n53j93os7x] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-audit-row[b-n53j93os7x] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-audit-row:last-child[b-n53j93os7x] {
    border-bottom: none;
}

.key-audit-mark[b-n53j93os7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--lk-radius-pill);
    flex: none;
}

.key-audit-mark-neutral[b-n53j93os7x] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.key-audit-mark-ok[b-n53j93os7x] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.key-audit-mark-warn[b-n53j93os7x] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.key-audit-mark-error[b-n53j93os7x] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.key-audit-what[b-n53j93os7x] {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: var(--lk-space-1);
}

.key-audit-title[b-n53j93os7x] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-weight: 600;
    color: var(--lk-text);
}

.key-audit-actor[b-n53j93os7x],
.key-audit-reason[b-n53j93os7x] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.key-audit-reason[b-n53j93os7x] {
    color: var(--lk-err);
    overflow-wrap: anywhere;
}

/* The changes: field, old, arrow, new on one line each; the old value struck through so the
   direction reads without the arrow for somebody who cannot see it. */
.key-audit-changes[b-n53j93os7x] {
    margin: var(--lk-space-1) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--lk-space-0-5);
}

.key-audit-change[b-n53j93os7x] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lk-space-2);
    font-size: var(--lk-font-size-label);
}

.key-audit-field[b-n53j93os7x] {
    color: var(--lk-text-mut);
}

.key-audit-field[b-n53j93os7x]::after {
    content: ":";
}

.key-audit-old[b-n53j93os7x] {
    text-decoration: line-through;
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

.key-audit-new[b-n53j93os7x] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.key-audit-arrow[b-n53j93os7x] {
    color: var(--lk-text-mut);
}

.key-audit-when[b-n53j93os7x] {
    flex: none;
}

.key-audit-loading-row[b-n53j93os7x] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-5);
}
/* /Pages/Keys/KeyAuditPage.razor.rz.scp.css */
/* The line that says what the log covers, between the tabs and the card (#1155). */
.key-audit-scope[b-k5x9voqj5a] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Pages/Keys/KeyBookingPage.razor.rz.scp.css */
/* Calendar beside the summary, as the Prototype has it — the calendar is where the work
   happens, so it takes the wider column. They stack on a narrow screen: two columns of this
   width would leave the day tiles too small to hit. */
.key-booking-layout[b-8x70nregh4] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

@media (max-width: 900px) {
    .key-booking-layout[b-8x70nregh4] {
        grid-template-columns: 1fr;
    }
}

/* The skeleton draws its two cards inside .key-booking-layout too (#782). It had a copy of the rule
   above on the loading region itself, which a rule from this file no longer reaches: the region is
   PageStateComponent's element, not the page's. */

/* ── The fortnight ──────────────────────────────────────── */

.key-booking-week[b-8x70nregh4] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.key-booking-week-title[b-8x70nregh4] {
    flex: 1;
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title);
    font-weight: 700;
    color: var(--lk-ink);
}

.key-booking-week-nav[b-8x70nregh4] {
    display: flex;
    gap: var(--lk-space-1);
}

.key-booking-days[b-8x70nregh4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--lk-space-2);
    margin-bottom: var(--lk-space-5);
}

.key-booking-day[b-8x70nregh4] {
    display: grid;
    justify-items: center;
    gap: var(--lk-space-1);
    padding: var(--lk-space-3) var(--lk-space-1);
    border: var(--lk-border-width) solid var(--lk-line);
    /* 12px, the Prototype's day cell (BookKey.razor:73). Not a tile: it is taller than wide, and
       a percentage radius on it would draw an ellipse (#563). */
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    cursor: pointer;
    transition: var(--lk-transition);
}

.key-booking-day:hover:not(:disabled)[b-8x70nregh4] {
    border-color: var(--lk-line-strong);
}

.key-booking-day:focus-visible[b-8x70nregh4] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* Chosen is a thicker border and a tinted ground, not colour alone — the tile has to read as
   picked without relying on hue. */
.key-booking-day-selected[b-8x70nregh4] {
    border-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
}

.key-booking-day:disabled[b-8x70nregh4] {
    background: var(--lk-surface-alt);
    cursor: default;
    opacity: 0.55;
}

.key-booking-day-name[b-8x70nregh4] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--lk-text-mut);
}

.key-booking-day-number[b-8x70nregh4] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title);
    font-weight: 800;
    color: var(--lk-ink);
    font-variant-numeric: tabular-nums;
}

.key-booking-day-selected .key-booking-day-number[b-8x70nregh4] {
    color: var(--lk-magenta-ink);
}

.key-booking-day-note[b-8x70nregh4] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    min-height: 1em;
}

/* ── The day ────────────────────────────────────────────── */

.key-booking-day-header[b-8x70nregh4] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--lk-space-3);
}

.key-booking-day-title[b-8x70nregh4] {
    flex: 1;
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-body);
    font-weight: 700;
    color: var(--lk-ink);
}

.key-booking-legend[b-8x70nregh4] {
    display: flex;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
}

.key-booking-legend-item[b-8x70nregh4] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

.key-booking-swatch[b-8x70nregh4] {
    width: var(--lk-space-5);
    height: var(--lk-space-3);
    border-radius: var(--lk-radius-sm);
}

.key-booking-swatch-busy[b-8x70nregh4] {
    background: var(--lk-surface-alt);
    border: var(--lk-border-width) dashed var(--lk-text-sec);
}

.key-booking-swatch-chosen[b-8x70nregh4] {
    background: var(--lk-magenta);
}

.key-booking-times[b-8x70nregh4] {
    display: flex;
    align-items: flex-end;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
    margin-top: var(--lk-space-4);
}

/* The field element belongs to the TextField component, so reaching it needs ::deep — without
   it these two rules would read as correct and do nothing at all (ADR 0007). */
.key-booking-times[b-8x70nregh4]  .lk-field {
    flex: 1;
    min-width: 130px;
}

.key-booking-allday[b-8x70nregh4] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding-bottom: var(--lk-space-3);
}

.key-booking-allday-label[b-8x70nregh4] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
}

.key-booking-status[b-8x70nregh4] {
    margin: var(--lk-space-3) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* ── The summary ────────────────────────────────────────── */

/* The card element belongs to the Card component, hence ::deep — same as PanelCard. */
[b-8x70nregh4] .key-booking-summary {
    display: grid;
    gap: var(--lk-space-4);
}

.key-booking-summary-title[b-8x70nregh4] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-body);
    font-weight: 700;
    color: var(--lk-ink);
}

.key-booking-facts[b-8x70nregh4] {
    margin: 0;
    display: grid;
    gap: var(--lk-space-2);
}

.key-booking-fact[b-8x70nregh4] {
    display: flex;
    align-items: baseline;
    gap: var(--lk-space-3);
}

.key-booking-fact-label[b-8x70nregh4] {
    flex: 1;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.key-booking-fact-value[b-8x70nregh4] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
    text-align: right;
}

/* ── Who it is booked for ───────────────────────────────── */

.key-booking-person[b-8x70nregh4] {
    display: grid;
    gap: var(--lk-space-2);
}

.key-booking-person-label[b-8x70nregh4] {
    display: block;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
    margin-bottom: var(--lk-space-2);
}

/* The chosen person, marked the way the chosen day is: a tinted ground and a stronger border,
   so it reads as settled rather than as another field waiting to be filled in. */
.key-booking-person-row[b-8x70nregh4] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-magenta);
    border-radius: var(--lk-radius-control);
    background: var(--lk-magenta-soft);
}

.key-booking-matches[b-8x70nregh4] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    overflow: hidden;
}

.key-booking-match[b-8x70nregh4] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    width: 100%;
    padding: var(--lk-space-2) var(--lk-space-3);
    background: var(--lk-surface);
    text-align: left;
    cursor: pointer;
}

.key-booking-matches li + li .key-booking-match[b-8x70nregh4] {
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.key-booking-match:hover[b-8x70nregh4] {
    background: var(--lk-ghost-hover);
}

.key-booking-match:focus-visible[b-8x70nregh4] {
    outline: none;
    box-shadow: inset 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.key-booking-match-text[b-8x70nregh4] {
    flex: 1;
    min-width: 0;
}

.key-booking-match-name[b-8x70nregh4],
.key-booking-match-mail[b-8x70nregh4] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.key-booking-match-name[b-8x70nregh4] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
}

.key-booking-match-mail[b-8x70nregh4] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.key-booking-note[b-8x70nregh4] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    line-height: var(--lk-line-height-body);
}

.key-booking-failure[b-8x70nregh4] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* ── The receipt ────────────────────────────────────────── */

.key-booking-receipt-line[b-8x70nregh4] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
    text-align: center;
}

.key-booking-code[b-8x70nregh4] {
    display: grid;
    justify-items: center;
    gap: var(--lk-space-1);
    margin-top: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-radius: var(--lk-radius-card);
    background: var(--lk-info-soft);
}

.key-booking-code-label[b-8x70nregh4] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-text-sec);
}

/* Wide spacing and equal-width digits: this is read off a screen and typed into a cabinet
   keypad, so the digits have to be told apart at a glance. */
.key-booking-code-value[b-8x70nregh4] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-display);
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--lk-ink);
    font-variant-numeric: tabular-nums;
}

/* The day's taken stretches in words. The timeline beside it is aria-hidden by design, so
   this is where the same information is actually readable — see the note in the markup. */
.key-booking-taken-list[b-8x70nregh4] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    margin: var(--lk-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.key-booking-taken-item[b-8x70nregh4] {
    display: flex;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.key-booking-taken-time[b-8x70nregh4] {
    color: var(--lk-text-sec);
    font-variant-numeric: tabular-nums;
}

/* The name in the main text colour beside the secondary time. This read --lk-text-pri, which is
   not a token (#564). */
.key-booking-taken-name[b-8x70nregh4] {
    color: var(--lk-text);
}
/* /Pages/Keys/KeyBookingsPage.razor.rz.scp.css */
/* The row above the list that holds Book this key — the Prototype's toolbar (KeyDetail.razor:245):
   12px between its parts and 16px down to the card. */
.key-bookings-toolbar[b-ad8r65fe4v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

/* Why the button beside it refuses. The whole sentence rather than the Prototype's "inget skåp",
   which names the state and not the consequence; the row wraps, so it has the width to say it. */
.key-bookings-note[b-ad8r65fe4v] {
    flex: 1 1 16rem;
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* ── The rows ───────────────────────────────────────────── */

/* A list and not a table: every row carries the same one key, so there are no columns to line up
   and nothing to sort by. The Prototype draws .lrow here for the same reason. */
.key-bookings-list[b-ad8r65fe4v] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The Prototype's row here is .lrow with its own 15px 20px and 14px between the parts
   (KeyDetail.razor:267), rounded to the spacing scale as #528 does: 16px and 16px. The last row
   keeps no hairline so it does not draw a line along the card's own edge. */
.key-bookings-row[b-ad8r65fe4v] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-4) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-bookings-row:last-child[b-ad8r65fe4v] {
    border-bottom: none;
}

/* A bare 18px glyph in the secondary text colour — the Prototype has no tile behind it here. The
   34px tile this replaced came from the Access tab, where the Prototype does draw one (#648). */
.key-bookings-icon[b-ad8r65fe4v] {
    display: inline-flex;
    flex: none;
    color: var(--lk-text-sec);
}

.key-bookings-when[b-ad8r65fe4v] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    flex: 1;
    min-width: 0;
}

.key-bookings-window[b-ad8r65fe4v] {
    font-family: var(--lk-font-ui);
    font-weight: 600;
    color: var(--lk-text);
}

/* The Prototype's .mut at 12.5px (KeyDetail.razor:271): muted, the caption step. */
.key-bookings-who[b-ad8r65fe4v] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* Tabular figures so the digits line up between rows, and never wrapped — a code broken across
   two lines is a code somebody reads wrong. The space between the two groups does the job the
   letter-spacing did, so there is none. */
.key-bookings-code[b-ad8r65fe4v] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.key-bookings-actions[b-ad8r65fe4v] {
    display: inline-flex;
    flex: none;
}

/* The trash in the error colour, as the Prototype draws it. ::deep because the class is handed to
   Button, so the <button> wears Button's scope and not this page's. */
.key-bookings-actions[b-ad8r65fe4v]  .key-bookings-remove:not(:disabled) {
    color: var(--lk-err);
}

/* Narrow: the badges and the action drop under the window rather than squeezing it to nothing. The
   icon stays on the first line beside the window it belongs to — 18px, the glyph's own size, plus
   the row's gap. */
@media (max-width: 40rem) {
    .key-bookings-row[b-ad8r65fe4v] {
        flex-wrap: wrap;
    }

    .key-bookings-when[b-ad8r65fe4v] {
        flex-basis: calc(100% - 18px - var(--lk-space-4));
    }
}

/* ── Loading, and the dialog ────────────────────────────── */

/* The rows inside the skeleton's card, not the loading region. The region is PageStateComponent's
   since #782 and sits outside the card, where a rule from this file cannot reach it; this element
   is written in the page, so the rule still applies. */
.key-bookings-loading[b-ad8r65fe4v] {
    display: grid;
    gap: var(--lk-space-4);
}

.key-bookings-loading-row[b-ad8r65fe4v] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.key-bookings-summary[b-ad8r65fe4v] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lk-space-2) var(--lk-space-4);
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.key-bookings-summary dt[b-ad8r65fe4v] {
    color: var(--lk-text-mut);
}

.key-bookings-summary dd[b-ad8r65fe4v] {
    margin: 0;
    color: var(--lk-text);
}

.key-bookings-error[b-ad8r65fe4v] {
    margin: var(--lk-space-3) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Pages/Keys/KeyDetailPage.razor.rz.scp.css */
/* One column of groups. The Prototype's detail tab is a single stack too — the fields are
   related to each other top to bottom, and a second column would put the cabinet beside the
   name rather than after it. */
.key-detail-form[b-v1ykaundio] {
    display: grid;
    gap: var(--lk-space-4);
}

/* Says why something is missing or fixed — the read-only note, and the one that stands in for
   an unreadable category picker. */
.key-detail-note[b-v1ykaundio] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* A failure the person cannot fix, so it sits with the form rather than on a field. */
.key-detail-failure[b-v1ykaundio] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* ── Loading ────────────────────────────────────────────── */

/* The two cards' spacing is the loading region's own Stack layout since #782. The region is
   PageStateComponent's element, which a rule here no longer reaches; the rules below are on
   elements the page writes inside it, so they still apply. */

.key-detail-skeleton-field[b-v1ykaundio] {
    margin-top: var(--lk-space-4);
}

.key-detail-skeleton-gap[b-v1ykaundio] {
    margin-top: var(--lk-space-2);
}

/* The tag number is a long, so the field stays type=number — a numeric keypad is right for it.
   The spinner arrows are not: nobody reaches an RFID tag by stepping one at a time, and the
   arrows invite exactly that.

   ::deep, because the class is handed to TextField and therefore lands on that component's own
   markup, which never carries this page's scope attribute. Without it the rule compiles, matches
   nothing, and reports nothing — the trap NoScopedRuleTargetsAClassHandedToAComponent exists for. */
.key-detail-form[b-v1ykaundio]  .key-detail-rfid input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.key-detail-form[b-v1ykaundio]  .key-detail-rfid input[type="number"]::-webkit-outer-spin-button,
.key-detail-form[b-v1ykaundio]  .key-detail-rfid input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* The eviction warning under the slot picker. Amber rather than red: choosing an occupied slot is
   allowed and sometimes the point — it is a consequence to read, not a refusal. */
.key-detail-slot-warning[b-v1ykaundio] {
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-warn-ink, var(--lk-text-sec));
}

/* The deleted-key notice sits between the tabs and the form (#1150). The notice itself has no
   margin: where it sits is the page's business. */
.key-detail-deleted[b-v1ykaundio] {
    margin-bottom: var(--lk-space-4);
}

.key-detail-delete-bookings[b-v1ykaundio] {
    margin: var(--lk-space-2) 0 0;
    font-weight: 600;
}

/* The missing-tag notice sits between the header and the tabs (#1273). The rule is on the page's
   own wrapper: a bare ::deep on the Notice had no element of this page around it and matched
   nothing (#1412). */
.key-detail-missing-tag[b-v1ykaundio] {
    margin-bottom: var(--lk-space-5);
}
/* /Pages/Keys/KeyHistoryListComponent.razor.rz.scp.css */
/* One key's history: a row list, not a table. The Prototype draws .lrow here because there are no
   columns to line up — every row is the same key, and the only sortable thing is time, which is
   already the order. */

.key-history-rows[b-lseor750o7] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The Prototype's row: 14px 20px with 14px between the parts. 12px on the scale rather than 16:
   the two text lines here sit 4px apart against the Prototype's 2px, so 16px made every row 71px
   against 66px — 125px over a page of 25. 12px lands at 67 (measured 2026-09-14, #648). The last
   row keeps no hairline so it does not draw a line along the card's own edge. */
.key-history-row[b-lseor750o7] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.key-history-row:last-child[b-lseor750o7] {
    border-bottom: none;
}

/* A circle, unlike the square marks on the Bookings and Access tabs, and that is the Prototype's
   own distinction: those two mark a thing (a booking, a company) and this marks an event. */
.key-history-mark[b-lseor750o7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--lk-radius-pill);
    flex: none;
}

/* The tones the events table already gives each type, so the same kind of event is the same
   colour in both places. Set here rather than inline because a component's markup carries no
   colour values — Button.razor's rule. */
.key-history-mark-neutral[b-lseor750o7] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.key-history-mark-ok[b-lseor750o7] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.key-history-mark-warn[b-lseor750o7] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.key-history-mark-error[b-lseor750o7] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.key-history-mark-info[b-lseor750o7] {
    background: var(--lk-info-soft);
    color: var(--lk-info);
}

.key-history-mark-accent[b-lseor750o7] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}

.key-history-what[b-lseor750o7] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    flex: 1;
    min-width: 0;
}

.key-history-title[b-lseor750o7] {
    font-family: var(--lk-font-ui);
    font-weight: 600;
    color: var(--lk-text);
}

/* The Prototype's .mut at 12.5px (KeyDetail.razor:347): muted, the caption step. */
.key-history-sub[b-lseor750o7] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

/* The time sits in a neutral Badge, as the Prototype draws it (KeyDetail.razor:349). Tabular
   figures so a column of timestamps lines up between rows, and never wrapped — a timestamp broken
   across two lines reads as two values. */
.key-history-when[b-lseor750o7] {
    display: inline-flex;
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Narrow: the timestamp drops under the event rather than squeezing the description to nothing.
   The description takes the whole line beside the mark, which is what makes the row wrap at all —
   with only flex: 1 it shrank instead, and the title broke over three lines beside the badge
   (seen at 400px, #648). The badge then lines up under the text, past the 38px mark. */
@media (max-width: 40rem) {
    .key-history-row[b-lseor750o7] {
        flex-wrap: wrap;
        gap: var(--lk-space-1) var(--lk-space-3);
    }

    .key-history-what[b-lseor750o7] {
        flex-basis: calc(100% - 38px - var(--lk-space-3));
    }

    .key-history-when[b-lseor750o7] {
        margin-left: calc(38px + var(--lk-space-3));
    }
}

/* ── Loading ────────────────────────────────────────────── */

.key-history-loading-row[b-lseor750o7] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
}
/* /Pages/Keys/KeyHistoryPage.razor.rz.scp.css */
/* ── The toolbar ────────────────────────────────────────── */

/* The shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15). This file held the
   most carefully measured copy of it — the Prototype's sizing property for property, with selects
   that may shrink from their width so the row stays on one line (Martin 2026-09-14) — and that
   measurement is what the shared rules now carry for every list. */

/* No loading rule: the region is PageStateComponent's since #782, and the rule that stood here
   reached an element the page no longer owns. The one shape inside the card needs no layout. */
/* /Pages/Keys/KeyImportPage.razor.rz.scp.css */
/* The three steps of the import, one card each, top to bottom (#1162). */
.key-import-steps[b-46mjrp908t] {
    display: grid;
    gap: var(--lk-space-4);
}

/* The body of each step, since the card is unpadded so that the head's rule can reach the card's
   edges (CardHeader's own file, #1293): the padding the card used to carry, and the one place on
   the page that padded twice is gone. */
.key-import-body[b-46mjrp908t] {
    padding: var(--lk-space-4) var(--lk-space-5);
}

.key-import-text[b-46mjrp908t] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-body);
    color: var(--lk-text-mut);
}

.key-import-actions[b-46mjrp908t] {
    display: flex;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

/* The file picker: the browser's own control, labelled, so the chosen file name is shown by the browser. */
.key-import-file[b-46mjrp908t] {
    display: grid;
    gap: var(--lk-space-1);
    margin-bottom: var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text);
}

.key-import-file-label[b-46mjrp908t] {
    font-weight: 600;
}

.key-import-file-errors[b-46mjrp908t] {
    margin: 0;
    padding-left: var(--lk-space-4);
}

.key-import-errors[b-46mjrp908t] {
    margin-top: var(--lk-space-3);
}

.key-import-errors-row[b-46mjrp908t] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Pages/Keys/KeyListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells. */

/* No gap. The pager sits straight under the last row, its hairline the row's lower edge, as in the
   Prototype's card. A 16px grid gap here opened a strip between the table and the pager — the
   single largest vertical difference on the screen (measured 2026-09-14). The ceiling notice, the
   only other child that wanted space, carries its own padding instead. */
.key-list[b-ak21si0kdz] {
    display: grid;
}

/* The row heading is the key's name — it is what identifies the row, so it is a <th> and not a
   cell. It still has to read as a name rather than as a heading. */
.key-table-name[b-ak21si0kdz] {
    font-weight: 600;
    color: var(--lk-text);
}

/* The flex row lives on an inner span so the <th> stays a table cell and draws its hairline at the
   row's bottom, whatever height the row has (see the markup). */
.key-table-name-inner[b-ak21si0kdz] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The name carries the row's link since #605, and keeps looking like the name: the row is the
   affordance. Same treatment as the partner and keybox names, which were links already. */
.key-table-name-link[b-ak21si0kdz] {
    color: inherit;
    text-decoration: none;
}

.key-table-name-link:hover[b-ak21si0kdz] {
    text-decoration: underline;
}

/* ── Loading ────────────────────────────────────────────── */

.key-list-loading-row[b-ak21si0kdz] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* ── Column widths ──────────────────────────────────────── */

/* The Prototype pins every column but the name, which takes the slack (Keys.razor: 150px for the
   cabinet, 130px for the category, 160px for the status, 130px for the actions). Without them the
   table sizes to its content, so on a short list the status ends up halfway across the card
   instead of at the right-hand end.

   Per module rather than in app.css: the lists share a look, but not a set of columns.

   The Prototype's spans are measured edge to edge, so here they are the cell's content plus the
   padding tokens .lk-list-table gives it, 8px a side: 150px is 134px of content and 16px of
   padding. Written that way rather than as the sum because the padding scales with --lk-density
   and a summed number does not, so at the airy density the content shrank by whatever the padding
   gained (ADR 0007 point 9, #922). The table's layout is the default, so each width is a floor and
   a column grows for a word that does not fit. */
/* ::deep because these classes are handed to SortableColumnHeader, so the cell carries that
   component's scope and not this file's — without it the rule matches nothing and says nothing
   (#568, and the convention test that now guards it). The category joined them when it became
   sortable (#226). The other two sit on plain <th> elements this file owns, so they need no such
   thing. */
.key-table[b-ak21si0kdz]  .key-col-keybox {
    width: calc(8.375rem + 2 * var(--lk-space-2));
}

.key-table[b-ak21si0kdz]  .key-col-category {
    width: calc(7.125rem + 2 * var(--lk-space-2));
}

.key-table[b-ak21si0kdz]  .key-col-status {
    width: calc(9rem + 2 * var(--lk-space-2));
}

/* 130px of content, as in the Prototype, plus the cell's own padding. The other widths are the
   Prototype's spans measured edge to edge and come out the same here; this one is the last cell,
   whose 8px + 20px padding the Prototype keeps outside the span (on .lrow) and a table keeps inside
   it. At a flat 8.125rem every column from the cabinet onward started 28px right of the
   Prototype's (measured 2026-09-14). */
.key-table .key-col-actions[b-ak21si0kdz] {
    width: calc(8.125rem + var(--lk-space-2) + var(--lk-space-5));
}

/* The number column (#1146): narrow. ::deep, since the heading is SortableColumnHeader's markup,
   as for the other sized columns below. */
.key-table[b-ak21si0kdz]  .key-col-number {
    width: 8rem;
}

.key-table-number[b-ak21si0kdz] {
    white-space: nowrap;
    font-weight: 600;
}

/* The organisation column, drawn in "All organisations" only. On a plain <th> this file owns, so
   no ::deep. The cabinet column's width, since the two hold the same kind of name. */
.key-table .key-col-organization[b-ak21si0kdz] {
    width: calc(8.375rem + 2 * var(--lk-space-2));
}

.key-table-organization[b-ak21si0kdz] {
    overflow-wrap: anywhere;
}

/* The cabinet and, under it, the missing-tag badge (#1273): a deliberate two-line stack, the badge
   left-aligned with the label and a small gap above. Inline after the label it wrapped on its own
   in the 134px column, indented by its margin, and the row grew askew (Niklas 2026-10-16). A row
   without the badge is one line, as before. */
.key-table-cabinet[b-ak21si0kdz] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-1);
    vertical-align: middle;
}
/* /Pages/Keys/KeyMainPage.razor.rz.scp.css */
/* The toolbar and the card are ListLayout's (2026-09-16). This page was the model for it:
   the toolbar rules that lived here — the 380px search cap, the 170px category and cabinet
   selects, the 150px status select, and one column below 48rem — are the shared .lk-list-toolbar
   classes in app.css, value for value. */

/* The note beside the create button shapes itself — Placement="BesideActions" (#320). This
   screen's copy had max-width: 16rem where the other three had 18rem; the component now carries
   the one value. */

/* The loading region's gap above it is PageStateComponent's LoadingSpaced (#782). The rule that
   stood here reached an element the page no longer owns. */
/* /Pages/Kiosks/KioskDetailPage.razor.rz.scp.css */
/* The cabinet's Detaljer (KeyboxSettingsPage.razor.css): a column of full-width cards, 16px
   apart. The save button is in the first card's heading since 2026-10-13; it was a toolbar of its
   own above the cards, and a 40rem column before 2026-09-23. */
.kiosk-detail[b-adw4tx6nmg] {
    display: grid;
    gap: var(--lk-space-4);
}

/* The loading region is PageStateComponent's element since #786, in its default Stack layout —
   what the rule that stood here asked for. A rule here would no longer reach it. */

/* ── Installation code ──────────────────────────────────── */

.kiosk-setup[b-adw4tx6nmg] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-5);
    flex-wrap: wrap;
    padding: var(--lk-space-5);
}

.kiosk-setup-code[b-adw4tx6nmg] {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Big, spaced and tabular: this is read off a screen and typed into a device across the room,
   so the digits are the content rather than decoration on it. */
.kiosk-setup-pin[b-adw4tx6nmg] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title);
    /* Raw, like every other letter-spacing in the portal — there is no scale for it. */
    letter-spacing: 0.125rem;
    font-variant-numeric: tabular-nums;
    line-height: normal;
    color: var(--lk-ink);
}

.kiosk-setup-none[b-adw4tx6nmg] {
    margin: 0;
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text-mut);
}

/* The design's .f-hint: 12.5px in the muted ink. At 13px this sentence wrapped to a second line
   beside the button, making the card 17px taller than the design's. */
.kiosk-setup-hint[b-adw4tx6nmg] {
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-caption);
    line-height: normal;
    color: var(--lk-text-mut);
}

.kiosk-setup-error[b-adw4tx6nmg] {
    padding: 0 var(--lk-space-5) var(--lk-space-5);
}

/* ── Settings re-sent (#1191) ───────────────────────────── */

/* SoftwareCardComponent's shape with one button and nothing to the left of it. */
.kiosk-resync[b-adw4tx6nmg],
.kiosk-lifecycle[b-adw4tx6nmg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-5);
    padding: var(--lk-space-5);
}

.kiosk-resync-muted[b-adw4tx6nmg] {
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-ui);
}

.kiosk-resync-error[b-adw4tx6nmg] {
    padding: 0 var(--lk-space-5) var(--lk-space-5);
}
/* /Pages/Kiosks/KioskEventsPage.razor.rz.scp.css */
/* The kiosk's event log, moved here with the card in #657. The rules are the ones that stood in
   KioskDetailPage.razor.css: CSS isolation is per component, so a page that renders this markup
   carries its own copy rather than reaching into another page's scope. */

/* The loading region is PageStateComponent's element since #786, in its default Stack layout. The
   column with a gap that stood here held a single skeleton, so the gap never showed. */

.kiosk-events[b-mqto11kk14] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-event[b-mqto11kk14] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.kiosk-event:last-child[b-mqto11kk14] {
    border-bottom: none;
}

.kiosk-event-body[b-mqto11kk14] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    flex: 1;
    min-width: 0;
}

/* The Prototype's subject line is 600 at 14px. Read from its markup rather than measured: the
   local test kiosk has no events. */
.kiosk-event-subject[b-mqto11kk14] {
    font-family: var(--lk-font-ui);
    font-weight: 600;
    color: var(--lk-ink);
}

/* The Prototype's .dim with an inline 12.5px. .dim has a rule only under .lrow, so on this card
   its colour never applies; its intent is --text-sec, as on the kiosk list's kind line. */
.kiosk-event-meta[b-mqto11kk14] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-sec);
}

/* The design's one muted line where a log has nothing in it yet. */
.kiosk-events-empty[b-mqto11kk14],
.kiosk-events-failed[b-mqto11kk14] {
    margin: 0;
    padding: var(--lk-space-5);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text-mut);
}

/* The one that says something went wrong, so it is not read as the ordinary quiet log it
   replaces. */
.kiosk-events-failed[b-mqto11kk14] {
    color: var(--lk-err);
}
/* /Pages/Kiosks/KioskListComponent.razor.rz.scp.css */
/* The kiosk cards. Tokens only — no colour, spacing or radius values live here. */

/* 26.25rem is the Prototype's 420px, the same track the keybox grid uses — that number is
   chosen so a wide screen gets three columns of a readable width, not rounded to a whole rem.
   The min() guard keeps a 420px track from overflowing a narrower column than itself. */
.kiosk-list[b-c9e0q7kha8] {
    display: grid;
    gap: var(--lk-space-4);
}

/* min-width: 0 because .kiosk-list is a grid too: as its item this one was never narrower than
   its own min-content, the full 420px track, and the min() guard below never got to act. On a
   phone the cards ran past the window and the page scrolled sideways (#1400). */
.kiosk-cards[b-c9e0q7kha8],
.kiosk-list-region[b-c9e0q7kha8]  .kiosk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26.25rem), 1fr));
    gap: var(--lk-space-4);
    min-width: 0;
}

.kiosk-card[b-c9e0q7kha8] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-4);
    width: 100%;
    box-sizing: border-box;
    padding: var(--lk-space-5);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    /* The Prototype's card carries .hover as a static class, so these cards sit at the medium
       shadow at rest rather than lifting to it on pointer. */
    box-shadow: var(--lk-shadow-md);
    font: inherit;
    /* A <button> does not inherit text colour — it defaults to the platform's buttontext, which
       measured as pure black against the portal's #2B2B4E. Nothing renders black today because
       every line inside sets its own colour, so this is the trap rather than the symptom: the
       next line added to this card would be black and look like a theme fault. The keybox
       card's <a> already sets colour: inherit for the same reason. */
    color: var(--lk-text);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: var(--lk-transition);
}

/* The border carries the hover, not the shadow: the card already rests at the Prototype's
   elevation, so lifting it further would be an invention rather than a port. */
.kiosk-card:hover[b-c9e0q7kha8] {
    border-color: var(--lk-line-strong);
}

.kiosk-card:focus-visible[b-c9e0q7kha8] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.kiosk-card-head[b-c9e0q7kha8] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.kiosk-card-icon[b-c9e0q7kha8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: var(--lk-radius-tile);
    /* The Prototype's .itile, the same pair the keybox card's mark uses. It read as a disabled
       control in the sunken grey with muted ink. */
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

/* min-width:0 so a long name ellipses instead of pushing the status out of the card. */
.kiosk-card-identity[b-c9e0q7kha8] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
    flex: 1;
    min-width: 0;
}

/* --lk-font-size-subtitle was never a token: the declaration was invalid, so the name fell back
   to the inherited body size at normal weight. The Prototype gives it 800/18px, which is
   --lk-font-size-title-sm and the weight the keybox card's name already carries. */
.kiosk-card-name[b-c9e0q7kha8] {
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title-sm);
    color: var(--lk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The Prototype's .dim, whose rule exists only under .lrow — on a card it matches nothing and the
   line renders at full body strength. Its intent is 13px in --text-sec, which is what the keybox
   card's place line carries, and the muted tone this had was a guess at a rule that never applied. */
.kiosk-card-kind[b-c9e0q7kha8] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.kiosk-card-status[b-c9e0q7kha8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--lk-space-1);
    flex: 0 0 auto;
}

/* --lk-font-mono is not a token, so this declaration was invalid and the id fell back to the
   inherited UI face — which happens to be the Prototype's, so nothing looked wrong. Written out as
   the UI face, as the keybox card's reference is. Caption size rather than the Prototype's 11.5px,
   the same rounding the keybox card accepted in #674. */
.kiosk-card-short-id[b-c9e0q7kha8] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--lk-text-mut);
}

.kiosk-card-version[b-c9e0q7kha8] {
    display: flex;
    justify-content: space-between;
    /* At the bottom of the card whatever the head's height, so the version line sits on one line
       across a row of cards (Niklas 2026-09-23). The grid already stretches the cards. */
    margin-top: auto;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.kiosk-card-version-value[b-c9e0q7kha8] {
    color: var(--lk-text);
}

/* ── The table view ─────────────────────────────────────────
   The cabinet list's table (KeyboxListComponent.razor.css), one column fewer. */

.kiosk-table-identity[b-c9e0q7kha8] {
    display: grid;
    gap: var(--lk-space-1);
    min-width: 0;
}

.kiosk-table-name[b-c9e0q7kha8] {
    color: inherit;
    font-weight: 600;
    text-decoration: none;

    /* One line, ending in an ellipsis — the same three declarations the card's name has carried
       since it was built (.kiosk-card-name). The table's cell is `overflow: hidden` without
       `text-overflow`, so a long name was sliced mid-character with nothing to say it had been
       cut; this is the list mode @niklas described, where the cards were already right (#1151).

       Not wrapped: the rows were made the same height on purpose, and a two-line name would undo
       that for one row in a list. The full name is in the
       kiosk's own page, and the title attribute is not used here because a row is a link and the
       browser's own tooltip on the cell would fight it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiosk-table-name:hover[b-c9e0q7kha8] {
    text-decoration: underline;
}

.kiosk-table-place[b-c9e0q7kha8] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);

    /* The place ellipses for the same reason as the name above it: an address is often longer than
       a name, and this is the line that overflowed first. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The number column (#1148). Tabular figures so a column of numbers lines up; not muted the way
   the eight characters of the guid were, because the number is the row's own name now. */
.kiosk-table-number[b-c9e0q7kha8] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On an inner span, never on the td: a flex td is not a table cell and stopped stretching to the
   row, which drew its border mid-row and left the dash at the top (structure agent, 2026-09-23). */
/* Two lines, always: the version, and under it the badge's line — occupied by a hidden badge
   when there is nothing to say. Wrapping the badge beside the version made rows with one 71px
   and rows without 62px (structure agent, staging 2026-09-23); a reserved line keeps every row
   the same height at every width, and the badge can never reach the next cell. */
.kiosk-table-version[b-c9e0q7kha8] {
    display: grid;
    justify-items: start;
    gap: var(--lk-space-1);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.kiosk-table-version > span:first-child[b-c9e0q7kha8] {
    white-space: nowrap;
}

.kiosk-table-version-badge[b-c9e0q7kha8] {
    max-width: 100%;
}

/* Same box, no ink and no announcement: visibility keeps the height that display: none drops. */
.kiosk-table-version-badge-empty[b-c9e0q7kha8] {
    visibility: hidden;
}

/* ── How the width is shared in list mode (#1151) ────────────────────────────────────────────────
   The cabinet list's reasoning, one column fewer and no checkbox. See
   KeyboxListComponent.razor.css for why each column is sized and the name is not. */
.kiosk-table[b-c9e0q7kha8] {
    /* 8 + 9 + 9 + 11 = 37rem of sized columns, leaving the name about 18rem at this minimum. */
    min-width: 55rem;
}

.kiosk-table[b-c9e0q7kha8]  .kiosk-col-number {
    width: 8rem;
}

.kiosk-table[b-c9e0q7kha8]  .kiosk-col-kind {
    /* "Självbetjäning" is fourteen characters, and the Finnish is no shorter. */
    width: 9rem;
}

.kiosk-table[b-c9e0q7kha8]  .kiosk-col-status {
    width: 9rem;
}

.kiosk-table[b-c9e0q7kha8]  .kiosk-col-version {
    width: 11rem;
}

/* The connection never wraps (#1327, rule 6). */
.kiosk-table-status[b-c9e0q7kha8] {
    white-space: nowrap;
}
/* /Pages/Kiosks/KioskMainPage.razor.rz.scp.css */
/* The toolbar is the shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15). */

/* While the user is read: the toolbar's place, so the page does not jump when it arrives. The
   cards' own skeletons are KioskListComponent's. */
.kiosks-loading[b-7j1bg1rtjx] {
    margin-block-end: var(--lk-space-4);
}

/* The view switch at the right end of the toolbar, as on the cabinet list. */
.kiosks-view-switch[b-7j1bg1rtjx] {
    margin-left: auto;
}
/* /Pages/Kiosks/KioskNewPage.razor.rz.scp.css */
/* The Prototype's modal on a page: one column of fields in one card, as /keyboxes/new has it.
   Narrow enough that a name field does not stretch across a wide screen. */

.kiosk-new-body[b-rg8c73f1g3] {
    max-width: 48rem;
}

.kiosk-new-fields[b-rg8c73f1g3] {
    display: grid;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}

/* A failure the person cannot fix on a field, so it sits with the form. */
.kiosk-new-failure[b-rg8c73f1g3] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.kiosk-new-skeleton-field[b-rg8c73f1g3] {
    margin-top: var(--lk-space-4);
}

.kiosk-new-skeleton-gap[b-rg8c73f1g3] {
    margin-top: var(--lk-space-2);
}
/* /Pages/Loans/BookingListComponent.razor.rz.scp.css */
/* The booking table. Mirrors the loan table next door on purpose: the two sit in the same
   module, one click apart, and a reader moving between them should not feel the density or
   the alignment change. Kept as its own file rather than a shared one because the columns
   differ — sharing would mean a stylesheet with two shapes in it. */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells, and the same shape the key list
   already uses. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding
   is the bottom of the card (ListLayout). A 16px gap here stacked on top of it. */
.booking-list[b-ksadpykq7r] {
    display: grid;
}

/* The row heading is the key's name — it is what identifies the row, so it is a <th> and not a
   cell. It still has to read as a name rather than as a heading. */
.booking-table-name[b-ksadpykq7r] {
    font-weight: 600;
    color: var(--lk-text);
}

/* On an inner span, not on the <th>: a cell that is display: flex is no longer a table cell and
   draws its hairline under its own content rather than at the row's bottom. */
.booking-table-name-inner[b-ksadpykq7r] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The date columns hold "Today 17:00" and "Fri 11 Jul 09:30", which wrap badly in a narrow
   column and read as two rows when they do. */
.booking-table td.booking-table-muted[b-ksadpykq7r] {
    white-space: nowrap;
}

/* Who it is booked for is a name, and names may wrap (#1327, rule 6). By class: the positional
   rule that stood here (children 2 and 3) let the start date wrap once the cabinet column went. */
.booking-table tbody td.booking-table-wraps[b-ksadpykq7r] {
    white-space: normal;
}

/* ── Loading ────────────────────────────────────────────── */

.booking-list-loading-row[b-ksadpykq7r] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The access code. Tabular figures so the digits line up between rows, and never wrapped —
   a code broken across two lines is a code somebody reads wrong. */
.booking-table-code[b-ksadpykq7r] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* On an inner span, not on the <td>: a cell that is display: flex stops being a table cell. */
.booking-table-status-inner[b-ksadpykq7r] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-1);
    flex-wrap: wrap;
}
/* /Pages/Loans/ExtensionRequestDialog.razor.rz.scp.css */
/* The extension dialog (#1323): the borrower's words, the two times side by side, the conflict. */

.loan-extension-message[b-hbwn3fipmh] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: flex-start;
    margin: 0 0 var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.loan-extension-message-text[b-hbwn3fipmh] {
    display: block;
    color: var(--lk-text);
}

.loan-extension-message-meta[b-hbwn3fipmh] {
    display: block;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.loan-extension-times[b-hbwn3fipmh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-3);
}

@media (max-width: 520px) {
    .loan-extension-times[b-hbwn3fipmh] {
        grid-template-columns: 1fr;
    }
}

.loan-extension-fields[b-hbwn3fipmh] {
    display: grid;
    gap: var(--lk-space-3);
}

[b-hbwn3fipmh] .loan-extension-conflict {
    margin-top: var(--lk-space-4);
}

.loan-extension-error[b-hbwn3fipmh] {
    margin: var(--lk-space-4) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* The note sits at the footer's start, the buttons at its end. */
.loan-extension-told[b-hbwn3fipmh] {
    margin-right: auto;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}
/* /Pages/Loans/LoanApprovalPage.razor.rz.scp.css */
/* Measured against the Prototype's /g/{code} on 2026-10-01 (#758). The card is a phone-sized
   form, not a page: its heading is the small title, its lead and terms the Prototype's small
   text, and its labels the colour every field label has (TextField, Select). The card's padding
   stays the shared Card's; the Prototype's 24px is an inline one-off on this card (ADR 0063). */
.approve-title[b-19189d4l29] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
    line-height: var(--lk-line-height-tight);
    color: var(--lk-ink);
}

.approve-lead[b-19189d4l29] {
    margin: var(--lk-space-2) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/* ── The field labels ───────────────────────────────────── */

.approve-label[b-19189d4l29] {
    margin: var(--lk-space-5) 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.approve-keys[b-19189d4l29] {
    display: grid;
    gap: var(--lk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.approve-row[b-19189d4l29] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    box-sizing: border-box;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-magenta-ink);
}

/* The row's colour is the icon's, through currentColor. The text sets its own, so a key name
   does not come out magenta. */
.approve-row-text[b-19189d4l29] {
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    /* Long key names wrap rather than being cut off — the borrower has to be able to read
       which keys they are agreeing to. */
    overflow-wrap: anywhere;
    color: var(--lk-text);
}

/* ── The terms ──────────────────────────────────────────── */

.approve-terms[b-19189d4l29] {
    max-height: 11.25rem;
    overflow-y: auto;
    padding: var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
    /* The lender typed paragraphs into a settings field. Keep them. */
    white-space: pre-line;
}

.approve-terms:focus-visible[b-19189d4l29] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* ── Approving ──────────────────────────────────────────── */

.approve-action[b-19189d4l29] {
    margin-top: var(--lk-space-5);
}

.approve-error[b-19189d4l29] {
    display: block;
    margin: var(--lk-space-4) 0 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-err);
    border-radius: var(--lk-radius-control);
    background: var(--lk-err-soft);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/* ── Approved ───────────────────────────────────────────── */

.approve-done[b-19189d4l29] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--lk-space-3) 0 var(--lk-space-2);
}

.approve-done-mark[b-19189d4l29] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--lk-space-4);
    border-radius: var(--lk-radius-tile);
    background: var(--lk-ok);
    color: var(--lk-navy-contrast);
}
/* /Pages/Loans/LoanBookingPage.razor.rz.scp.css */
/* ── The remove dialog ──────────────────────────────────── */

/* A description list, because that is what these are: a label and the value it names. The rows
   read as "Key: 996" to a screen reader without anything being written to say so. */
.booking-remove-summary[b-l54hqsl7vr] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lk-space-2) var(--lk-space-4);
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.booking-remove-summary dt[b-l54hqsl7vr] {
    color: var(--lk-text-sec);
}

.booking-remove-summary dd[b-l54hqsl7vr] {
    margin: 0;
    font-weight: 600;
    color: var(--lk-text);
}

.booking-remove-error[b-l54hqsl7vr] {
    margin: var(--lk-space-4) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

/* ── The toolbar ────────────────────────────────────────── */

/* The shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15). */
/* /Pages/Loans/LoanMainPage.razor.rz.scp.css */
/* ── What the reminders did ─────────────────────────────── */

/* Above the table, as the Prototype puts its feedback badge. Two lines at most: how many went, and
   which ones did not. */
.loan-reminder-outcome[b-jkvhz3at5t] {
    display: grid;
    gap: var(--lk-space-2);
    margin-bottom: var(--lk-space-4);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.loan-reminder-sent[b-jkvhz3at5t],
.loan-reminder-failed[b-jkvhz3at5t] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin: 0;
    padding: var(--lk-space-2) var(--lk-space-3);
    border-radius: var(--lk-radius-control);
}

.loan-reminder-sent[b-jkvhz3at5t] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

/* Warning and not error. Something did not arrive, and #430 is explicit that this is news rather
   than a task — an error colour would ask the administrator to go and fix it. */
.loan-reminder-failed[b-jkvhz3at5t] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}
/* /Pages/Loans/LoanScreenComponent.razor.rz.scp.css */
/* The toolbar above the table is ListLayout's (2026-09-16), the key list's layout: the
   search field, the status filter beside it on the active screen, the cabinet filter, and the
   reminder channel. The cabinet filter takes the shared filter width, as on /keys and /events
   (#749).

   No override of the shared toolbar any more. It lined the row up on flex-end because the reminder
   channel kept a visible label; the channel's choices now say what they pick ("Remind by email"),
   so its label is hidden like the others and the row centres as every other list's does
   (fidelity pass 2026-09-21). */

/* ── The reminder bar ───────────────────────────────────── */

/* Only on screen while something is picked, as the Prototype has it. Tinted and outlined so it
   reads as a state the table is in rather than as another row of the toolbar. */
.loan-reminder-bar[b-fqtql25sd4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--lk-space-3);
    /* No margin: the space under it is ListLayout's banner slot. */
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-magenta);
    border-radius: var(--lk-radius-card);
    background: var(--lk-magenta-soft);
}

/* Pushes the channel and the button to the far end, which is where the Prototype puts them. */
.loan-reminder-count[b-fqtql25sd4] {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

/* The channel sits in the toolbar, not in the bar — see the comment on the Select for why.

   Wider than any shared toolbar width, because its choices are sentences: "Påminn via e-post" was
   cut to "Påminn via e-pos" at the wide filter's 180px, and "Muistuta tekstiviestillä" is longer
   still. Select cannot size itself to its choices — the native select is laid over the frame — so
   the width is given here. ::deep because the class lands on Select's own root, which carries its
   scope and not this component's.

   Measured in the value's own font, as PaginationComponent's page-size picker is, so that it
   follows the padding as the density changes (ADR 0007 point 9, #1437). The longest choice is
   Icelandic "Minna á samkvæmt stillingum", 209.2px or 22.3ch in Inter at Select's 0.938rem
   (canvas, 2026-10-27); 24ch leaves room for the frame's border. The 15rem this replaced left
   184px for the text and cut the Swedish "Påminn enligt inställningarna" (202.5px) under the
   chevron. The font is set only so that ch resolves in it; the two spaces are Select's left
   padding and chevron room. */
@media (min-width: 48.0625rem) {
    /* Above the narrow width only, where the shared toolbar stacks and stretches every control
       to 100% — this rule is more specific than that one and would otherwise win there too. */
    .loan-screen[b-fqtql25sd4]  .loan-reminder-channel {
        font-family: var(--lk-font-ui);
        font-size: 0.938rem;
        width: calc(24ch + var(--lk-space-4) + var(--lk-space-10));
    }
}

/* ── The chips and "Filter" (the Aktiva lån redesign, point 3) ── */

/* The chips take the start of the row; the search and "Filter" go to the end. */
.loan-chips[b-fqtql25sd4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin-right: auto;
}

.loan-chip[b-fqtql25sd4] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface);
    font: inherit;
    font-size: var(--lk-font-size-body);
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: var(--lk-transition);
}

.loan-chip strong[b-fqtql25sd4] {
    font-weight: 700;
    color: var(--lk-ink);
}

.loan-chip:hover[b-fqtql25sd4] {
    background: var(--lk-ghost-hover);
}

.loan-chip[aria-pressed="true"][b-fqtql25sd4] {
    border-color: var(--lk-navy);
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.loan-chip:focus-visible[b-fqtql25sd4] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.loan-chip-dot[b-fqtql25sd4] {
    width: 7px;
    height: 7px;
    border-radius: var(--lk-radius-pill);
}

.loan-chip-dot.is-pending[b-fqtql25sd4] {
    background: var(--lk-magenta);
}

.loan-chip-dot.is-past-due[b-fqtql25sd4] {
    background: var(--lk-err);
}

.loan-chip-dot.is-due-soon[b-fqtql25sd4] {
    background: var(--lk-warn);
}

/* The folded filters on a line of their own under the row; on history the one filter stays inline. */
.loan-filter-row[b-fqtql25sd4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
    flex-basis: 100%;
    justify-content: flex-end;
}

.loan-filter-row.is-inline[b-fqtql25sd4] {
    display: contents;
}

@media (max-width: 48rem) {
    .loan-chips[b-fqtql25sd4] {
        margin-right: 0;
    }

    .loan-filter-row[b-fqtql25sd4] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Loans/NewBookingKeyDialog.razor.rz.scp.css */
/* The key picker of "Ny bokning" (lyker/arenden#26): a search and one row per key, as on /loans/new. */
.new-booking-key[b-lx645g95l8] {
    display: grid;
    gap: var(--lk-space-3);
}

.new-booking-key-rows[b-lx645g95l8] {
    display: grid;
    gap: var(--lk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.new-booking-key-row[b-lx645g95l8] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    width: 100%;
    padding: var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    font: inherit;
    text-align: left;
    color: var(--lk-text-mut);
    cursor: pointer;
}

.new-booking-key-row:hover[b-lx645g95l8] {
    border-color: var(--lk-line-strong);
    background: var(--lk-surface-alt);
}

.new-booking-key-icon[b-lx645g95l8] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lk-radius-sm);
    background: var(--lk-navy-soft);
    color: var(--lk-navy);
}

.new-booking-key-text[b-lx645g95l8] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.new-booking-key-name[b-lx645g95l8] {
    font-weight: 600;
    color: var(--lk-text);
}

.new-booking-key-sub[b-lx645g95l8] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}
/* /Pages/Loans/NewLoanPage.razor.rz.scp.css */
/* ── The two columns ────────────────────────────────────── */

/* The picker gets the room, the summary is the narrow column beside it — the Prototype's
   1.6fr / 1fr. It collapses to one column early: the summary is what the reader acts on, and a
   summary squeezed to half a phone is worse than a summary underneath. */
.new-loan-layout[b-2s9ib3o7wb] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

@media (max-width: 60rem) {
    .new-loan-layout[b-2s9ib3o7wb] {
        grid-template-columns: 1fr;
    }
}

.new-loan-picker[b-2s9ib3o7wb] {
    min-width: 0;
}

/* Sticky so the summary stays in view while a long key list scrolls past it. Dropped along with
   the two columns — sticky inside a single column would pin it over the list it belongs to.

   ::deep because the element carrying this class is Card's own <div>, not one written here, so it
   does not get this page's scope attribute. Without it the rule compiles and matches nothing —
   the same trap KeyBookingPage's summary card documents. What Card *contains* is written in this
   page, so everything below needs no ::deep. */
[b-2s9ib3o7wb] .new-loan-summary {
    position: sticky;
    top: var(--lk-space-4);
}

@media (max-width: 60rem) {
    [b-2s9ib3o7wb] .new-loan-summary {
        position: static;
    }
}

/* The Prototype's panel title is 15.5px/700 (NewLoan.razor:117), the design's heading inside a
   card. This read --lk-font-size-subtitle, which was never a token, so the declaration was invalid
   and the title fell back to the inherited size (#564). */
.new-loan-summary-title[b-2s9ib3o7wb] {
    margin: 0 0 var(--lk-space-4);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
    color: var(--lk-ink);
}

/* ── Searching and the rows ─────────────────────────────── */

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-search {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-search > :first-child {
    flex: 1;
    min-width: 0;
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-status-unknown {
    margin-bottom: var(--lk-space-4);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-rows {
    display: grid;
    gap: var(--lk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row is a button, so it needs the button reset — the browser's own background, border and
   centred text would otherwise fight every rule below. */
.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    width: 100%;
    box-sizing: border-box;
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row:hover:not(:disabled) {
    border-color: var(--lk-line-strong);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row:focus-visible {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* Chosen and unavailable are pseudo-free because they are not states of the control — they are
   what the row is. Button.razor's rule about pseudo-classes is about hover, focus and disabled. */
.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-chosen {
    border-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-unavailable {
    cursor: default;
    opacity: 0.55;
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-magenta-ink);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-text {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: var(--lk-space-0-5);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-name {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-ink);
    overflow-wrap: anywhere;
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-sub {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-row-add {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--lk-space-1);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

/* ── The summary's fields ───────────────────────────────── */

.new-loan-field-label[b-2s9ib3o7wb] {
    margin: var(--lk-space-5) 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-mut);
}

.new-loan-field-label:first-of-type[b-2s9ib3o7wb] {
    margin-top: 0;
}

/* Dashed, so an empty slot reads as somewhere something goes rather than as a finished box. */
.new-loan-placeholder[b-2s9ib3o7wb] {
    margin: 0;
    padding: var(--lk-space-5) var(--lk-space-4);
    border: var(--lk-border-width) dashed var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    text-align: center;
    color: var(--lk-text-mut);
}

.new-loan-chosen[b-2s9ib3o7wb] {
    display: grid;
    gap: var(--lk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.new-loan-chip[b-2s9ib3o7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-magenta-ink);
}

.new-loan-chip-text[b-2s9ib3o7wb] {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: var(--lk-space-0-5);
}

.new-loan-chip-name[b-2s9ib3o7wb] {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-ink);
    overflow-wrap: anywhere;
}

.new-loan-chip-sub[b-2s9ib3o7wb] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

/* ── Notices: the terms warning and the two bars ────────── */

.new-loan-notice[b-2s9ib3o7wb] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin: var(--lk-space-4) 0 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.new-loan-notice strong[b-2s9ib3o7wb] {
    display: block;
    color: var(--lk-ink);
}

/* The link onwards is what keeps a bar from being a dead end, so it has to look like one. */
.new-loan-notice a[b-2s9ib3o7wb] {
    display: inline-block;
    margin-top: var(--lk-space-1);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

.new-loan-notice-info[b-2s9ib3o7wb] {
    border-color: var(--lk-info);
    background: var(--lk-info-soft);
    color: var(--lk-text-sec);
}

.new-loan-notice-warn[b-2s9ib3o7wb] {
    border-color: var(--lk-warn);
    background: var(--lk-warn-soft);
}

.new-loan-notice-error[b-2s9ib3o7wb] {
    border-color: var(--lk-err);
    background: var(--lk-err-soft);
}

.new-loan-notice-error strong[b-2s9ib3o7wb] {
    color: var(--lk-err);
}

/* The borrower picker shows a notice of its own, and its markup is in that component rather than
   in this page — so the rules above, which are scoped to this page, do not reach it. Repeated
   through ::deep rather than copied into the picker's own stylesheet: the same three classes then
   have one definition instead of two that drift. */
.new-loan-picker[b-2s9ib3o7wb]  .new-loan-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin: 0 0 var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.new-loan-picker[b-2s9ib3o7wb]  .new-loan-notice-info {
    border-color: var(--lk-info);
    background: var(--lk-info-soft);
}

/* ── The BankID tick and the actions ────────────────────── */

/* The box and its wording side by side. The wording is not a <label for=...>: Checkbox is a
   button carrying role="checkbox", not an <input>, so there is no form control for a label to
   point at. The box stays the only control. */
.new-loan-bankid[b-2s9ib3o7wb] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-4);
}

.new-loan-bankid-text[b-2s9ib3o7wb] {
    display: grid;
    min-width: 0;
    gap: var(--lk-space-0-5);
}

.new-loan-bankid-label[b-2s9ib3o7wb] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-ink);
}

/* The hint is a <span> in this block rather than the <p> it is elsewhere, so it needs the margin
   reset that the paragraph rule was carrying. */
.new-loan-bankid-text .new-loan-hint[b-2s9ib3o7wb] {
    margin: 0;
}

.new-loan-hint[b-2s9ib3o7wb] {
    margin: var(--lk-space-1) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-mut);
}

.new-loan-policy-note[b-2s9ib3o7wb] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-5);
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.new-loan-actions[b-2s9ib3o7wb] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}

/* ── The dialogs ────────────────────────────────────────── */

.new-loan-dialog-body[b-2s9ib3o7wb] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-body);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

.new-loan-waiting[b-2s9ib3o7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: 0 0 var(--lk-space-4);
    padding: var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-info);
    border-radius: var(--lk-radius-control);
    background: var(--lk-info-soft);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.new-loan-resent[b-2s9ib3o7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-3) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ok);
}

.new-loan-done[b-2s9ib3o7wb] {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--lk-space-3);
}

.new-loan-done-mark[b-2s9ib3o7wb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-ok);
    color: var(--lk-navy-contrast);
}
/* /Pages/Onboarding/OnboardingPage.razor.rz.scp.css */
/*
    The Prototype's onboarding card: a heading, a sentence, two sections one under the other,
    and the button that opens the portal.

    Spacing is on the --lk-space-* scale like every other screen's (ADR 0005 point 4, which holds
    for screens as well as for Components/): the Prototype's 26, 20, 18, 16, 8, 7, 6 and 4px round
    to the nearest step, a tie upwards, as #528 rounds the rest of the portal. No line moves by
    more than 2px, and the card follows the density setting (#921).

    Sizes are another matter. The type (19px, 13px, 12.5px) and the code field's 160px are the
    Prototype's own, written out as it writes them rather than mapped onto --lk-font-size-*.

    Colours stay on tokens throughout, so the card follows the theme like every other screen.
*/

/*
    Card renders its own markup, so its padding is only reachable through ::deep. The Prototype
    passes padding:26px here; Card's own --lk-space-5 is 20px.
*/
.onboarding[b-9q6co9vn33]  .lk-card {
    padding: var(--lk-space-6);
}

.onboarding-title[b-9q6co9vn33] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--lk-ink);
}

.onboarding-intro[b-9q6co9vn33] {
    margin: var(--lk-space-2) 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--lk-text-mut);
}

/*
    ErrorBanner owns no outer margin, so the screen places it. The Prototype's is 16px below and
    nothing above, which puts it directly under the intro — read as cramped, but it is what the
    screen does, and the sections below keep their own 20px because adjacent margins collapse.
*/
.onboarding[b-9q6co9vn33]  .onboarding-error {
    margin: 0 0 var(--lk-space-4);
}

/* ── Sections ───────────────────────────────────────────── */

.onboarding-section[b-9q6co9vn33] {
    margin-top: var(--lk-space-5);
}

/*
    The Prototype's .f-label. Its 7px and the row's 6px are adjacent sibling margins and
    collapse to 7px, which is what the two sit apart by there; here both round to --lk-space-2
    and collapse to 8px.
*/
.onboarding-label[b-9q6co9vn33] {
    display: block;
    margin-bottom: var(--lk-space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-text-sec);
}

/*
    Field and button side by side. align-items so the button keeps its own height rather than
    stretching when the field grows a message underneath — invisible while nothing is wrong,
    which is the state the Prototype draws.
*/
.onboarding-row[b-9q6co9vn33] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-2);
}

/* The value takes the row; the code is short and is given only what a code needs. */
.onboarding[b-9q6co9vn33]  .onboarding-value {
    flex: 1;
}

.onboarding[b-9q6co9vn33]  .onboarding-code {
    width: 160px;
}

.onboarding-sent[b-9q6co9vn33] {
    margin: var(--lk-space-2) 0 0;
    font-size: 12.5px;
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-mut);
}

.onboarding[b-9q6co9vn33]  .onboarding-badge {
    margin-top: var(--lk-space-2);
}

/* ── Done ───────────────────────────────────────────────── */

.onboarding-done[b-9q6co9vn33] {
    margin-top: var(--lk-space-6);
}

/* ── The name ───────────────────────────────────────────── */

/* The list of names and the free text row are NameChoiceComponent's, and are styled there
   (#530). What stays here is the hint below them, which is this screen's own. */

/*
    The Prototype's hint under the list, at its 12px. Set apart from .onboarding-sent, which is
    12.5px and says something about the step in progress rather than about the choice.
*/
.onboarding-hint[b-9q6co9vn33] {
    margin: var(--lk-space-4) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lk-text-sec);
}

/* ── The way out ────────────────────────────────────────── */

/*
    Under the Done button and set apart from it, so nothing about the row competes with the step
    the screen is actually for (#505). One line: the sentence, then the button that acts on it.

    ::deep on the button because the markup is SignOutComponent's — a rule aimed straight at
    .onboarding-exit-action from here matches nothing and reports nothing.
*/
.onboarding-exit[b-9q6co9vn33] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--lk-space-1);
    margin-top: var(--lk-space-5);
}

.onboarding-exit-text[b-9q6co9vn33] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--lk-text-mut);
}

.onboarding-exit[b-9q6co9vn33]  .onboarding-exit-action {
    display: inline-flex;
}
/* /Pages/Organizations/ChooseOrganizationPage.razor.rz.scp.css */
/* The choice sits in the AuthLayout's right-hand panel, so it sets its own width rather than
   filling the column — a list of three companies stretched across a desktop reads as a table. */
.choose[b-ubkm8od5eo] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-6);
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}

/* The skeleton is a LoadingRegion carrying this class, so the rule reaches it through ::deep. */
.choose-list[b-ubkm8od5eo],
.choose[b-ubkm8od5eo]  .choose-list {
    display: grid;
    gap: var(--lk-space-2);
}

/* A row, not a button in the design's sense — full width, left aligned, with the chevron
   pinned to the end. It uses the same surface and hairline as Card so the two read as the
   same family without Card's padding. */
.choose-option[b-ubkm8od5eo] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    width: 100%;
    box-sizing: border-box;
    padding: var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    color: var(--lk-ink);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    text-align: left;
    cursor: pointer;
    transition: var(--lk-transition);
}

.choose-option:hover[b-ubkm8od5eo] {
    border-color: var(--lk-line-strong);
    background: var(--lk-surface-alt);
}

.choose-option:focus-visible[b-ubkm8od5eo] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.choose-mark[b-ubkm8od5eo] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
    color: var(--lk-navy);
}

.choose-text[b-ubkm8od5eo] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.choose-name[b-ubkm8od5eo] {
    font-weight: 600;
    line-height: var(--lk-line-height-tight);
}

/* The organisation number under the name, and the explanation under "All organisations". */
.choose-meta[b-ubkm8od5eo] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

.choose-option[b-ubkm8od5eo]  .choose-chevron {
    flex: 0 0 auto;
    color: var(--lk-text-sec);
}
/* /Pages/Organizations/NoOrganizationPage.razor.rz.scp.css */
.no-organization[b-lw71hdx42g] {
    width: min(100%, 520px);
    margin: 0 auto;
}

.no-organization-title[b-lw71hdx42g] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--lk-ink);
}

.no-organization-body[b-lw71hdx42g] {
    margin: 0 0 var(--lk-space-4);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    color: var(--lk-text);
}

.no-organization-actions[b-lw71hdx42g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-4);
}
/* /Pages/Organizations/OrganizationListComponent.razor.rz.scp.css */
/* Same shape as the identity list (#959): a real table, the pager straight under the last row. */

.organization-list[b-zj44nr2nfg] {
    display: grid;
}

/* The name identifies the row, so it is a <th> rather than a cell. */
.organization-table-name[b-zj44nr2nfg] {
    font-weight: 600;
    color: var(--lk-text);
    overflow-wrap: anywhere;
}

.organization-table-link[b-zj44nr2nfg] {
    color: inherit;
    text-decoration: none;
}

.organization-table-link:hover[b-zj44nr2nfg] {
    text-decoration: underline;
}

/* The number and the date in the identity list's muted caption, in tabular figures so a column
   of them keeps one width. */
.organization-table-muted[b-zj44nr2nfg],
.organization-table-created[b-zj44nr2nfg] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Span plus the padding tokens .lk-list-table gives its cells, as the identity list writes them,
   so the widths follow --lk-density (ADR 0007 point 9). The date column is the identity list's;
   the registration number fits 12 digits and a hyphen. */
.organization-table-col-number[b-zj44nr2nfg] {
    width: calc(8.75rem + 2 * var(--lk-space-2));
}

.organization-table-col-sold-via[b-zj44nr2nfg] {
    width: 22%;
}

.organization-table-col-reseller[b-zj44nr2nfg] {
    width: 20%;
}

/* The badge and the count on one line, as in S5. */
.organization-table-reseller[b-zj44nr2nfg] {
    white-space: nowrap;
}

.organization-table-customers[b-zj44nr2nfg] {
    margin-left: var(--lk-space-2);
}

.organization-table-col-created[b-zj44nr2nfg] {
    width: calc(5.9375rem + var(--lk-space-2) + var(--lk-space-5));
}

/* ── Loading ────────────────────────────────────────────── */

.organization-list-loading-row[b-zj44nr2nfg] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Organizations/OrganizationNewPage.razor.rz.scp.css */
/* One column of fields in one card, as /identities/new has it. */

.organization-new-body[b-ijiftpwd1x] {
    max-width: 48rem;
}

.organization-new-fields[b-ijiftpwd1x] {
    display: grid;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}


/* A failure the person cannot fix on a field, so it sits with the form. */
.organization-new-failure[b-ijiftpwd1x] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.organization-new-skeleton-field[b-ijiftpwd1x] {
    margin-top: var(--lk-space-4);
}

.organization-new-skeleton-gap[b-ijiftpwd1x] {
    margin-top: var(--lk-space-2);
}
/* /Pages/Overview/AlcoholLockDuePanel.razor.rz.scp.css */
.alcohol-due-head[b-qmgki2bltg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-5) var(--lk-space-5) var(--lk-space-3);
}

.alcohol-due-title[b-qmgki2bltg] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-title-sm);
    color: var(--lk-ink);
}

.alcohol-due-failed[b-qmgki2bltg],
.alcohol-due-loading[b-qmgki2bltg] {
    margin: 0;
    padding: 0 var(--lk-space-5) var(--lk-space-5);
    color: var(--lk-text-sec);
}

.alcohol-due-list[b-qmgki2bltg] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alcohol-due-row[b-qmgki2bltg] {
    display: grid;
    grid-template-columns: 2.25rem 1.6fr 1.3fr 9.5rem 4.5rem;
    gap: var(--lk-space-4);
    align-items: center;
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    color: inherit;
    text-decoration: none;
}

.alcohol-due-row:hover[b-qmgki2bltg] {
    background: var(--lk-surface-alt);
}

.alcohol-due-row:focus-visible[b-qmgki2bltg] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: -2px;
}

.alcohol-due-mark[b-qmgki2bltg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lk-radius-sm);
    background: var(--lk-navy-soft);
    color: var(--lk-text-sec);
}

.alcohol-due-mark-warn[b-qmgki2bltg] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.alcohol-due-mark-err[b-qmgki2bltg] {
    background: var(--lk-err-soft);
    color: var(--lk-err);
}

.alcohol-due-name[b-qmgki2bltg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alcohol-due-cabinet[b-qmgki2bltg] {
    font-weight: 600;
    color: var(--lk-ink);
}

.alcohol-due-sub[b-qmgki2bltg],
.alcohol-due-org[b-qmgki2bltg] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.alcohol-due-org[b-qmgki2bltg] {
    color: var(--lk-text-sec);
}

.alcohol-due-days[b-qmgki2bltg] {
    text-align: right;
    font-family: var(--lk-font-display);
    font-weight: 800;
    color: var(--lk-text-mut);
}

.alcohol-due-days-warn[b-qmgki2bltg] {
    color: var(--lk-warn);
}

.alcohol-due-days-err[b-qmgki2bltg] {
    color: var(--lk-err);
}

.alcohol-due-foot[b-qmgki2bltg] {
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

@media (max-width: 48rem) {
    .alcohol-due-row[b-qmgki2bltg] {
        grid-template-columns: 2.25rem 1fr auto;
    }

    .alcohol-due-org[b-qmgki2bltg],
    .alcohol-due-days[b-qmgki2bltg] {
        display: none;
    }
}
/* /Pages/Overview/KpiCard.razor.rz.scp.css */
/*
    kpi-inner carries the card's padding, because the Card is rendered with Padded="false".
    See the comment in the markup for why: the watermark needs a clipping box with the card's
    shape, and that box has to be an element this component owns.

    It is also what every ::deep rule below anchors to. ::deep compiles to
    "[this component's scope id] <selector>", so without an element of our own in the tree
    there is nothing for it to hang off and the rules match nothing at all — silently.
*/

.kpi-inner[b-jp9fmrep3j] {
    position: relative;
    overflow: hidden;
    padding: var(--lk-space-5);
    /* The same radius as Card's own, so the watermark is cut off by the corner's curve
       rather than by a square edge sitting just inside it. */
    border-radius: var(--lk-radius-card);
}

/* ── Watermark ──────────────────────────────────────────────
   The oversized icon behind the number. It sits under everything, tipped and pushed past
   the bottom-right corner so only a corner of it shows.

   ::deep because the icon is the Icon component's own <svg>. Everything below it needs a
   stacking context of its own, or the number renders behind the decoration — hence the
   position on the three text elements rather than a z-index on this one, which would need
   the same rules anyway and would put the ordering somewhere less obvious. */
[b-jp9fmrep3j] .kpi-watermark {
    position: absolute;
    right: -1rem;
    bottom: -1.375rem;
    transform: rotate(-14deg);
    color: var(--lk-navy-soft);
    pointer-events: none;
}

[b-jp9fmrep3j] .kpi-watermark-accent {
    color: var(--lk-magenta-soft);
}

[b-jp9fmrep3j] .kpi-watermark-info {
    color: var(--lk-info-soft);
}

[b-jp9fmrep3j] .kpi-watermark-ok {
    color: var(--lk-ok-soft);
}

/* ── Tile ───────────────────────────────────────────────────  */

.kpi-mark[b-jp9fmrep3j] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--lk-space-3);
    border-radius: 0.6875rem;
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.kpi-mark-accent[b-jp9fmrep3j] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}

.kpi-mark-info[b-jp9fmrep3j] {
    background: var(--lk-info-soft);
    color: var(--lk-info);
}

.kpi-mark-ok[b-jp9fmrep3j] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

/* ── Text ───────────────────────────────────────────────────  */

.kpi-value[b-jp9fmrep3j] {
    position: relative;
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-display);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--lk-ink);
    /* Lined-up digits, so three cards side by side do not look ragged. */
    font-variant-numeric: tabular-nums;
}

/*
    Both of these take the font's own leading rather than inheriting the body's 1.6, which is
    for paragraphs. Inheriting it made the label 21px tall against the design's 16 and the note
    20 against 15, pushing the whole card 8px taller.

    normal, not a ratio: the design sets no line-height on these at all, so each one gets its
    face's own metrics — measured between 1.19 and 1.29 across its display and UI faces. No
    single number reproduces that, and --lk-line-height-tight (1.15) undershot every one.
*/

.kpi-label[b-jp9fmrep3j] {
    position: relative;
    margin: var(--lk-space-2) 0 0;
    font-size: var(--lk-font-size-label);
    line-height: normal;
    color: var(--lk-text-sec);
}

.kpi-note[b-jp9fmrep3j] {
    position: relative;
    margin: var(--lk-space-1) 0 0;
    font-size: var(--lk-font-size-caption);
    line-height: normal;
    color: var(--lk-text-mut);
}

/* The organisation's line (#1399, alternative C): small, under a rule, quieter than the reader's own figure. */
.kpi-footer[b-jp9fmrep3j] {
    position: relative;
    margin: var(--lk-space-3) 0 0;
    padding-top: var(--lk-space-2);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-caption);
    line-height: normal;
    color: var(--lk-text-mut);
}
/* /Pages/Overview/OverviewPage.razor.rz.scp.css */
/* The same gap the counts keep to the panels below them. The partnership band keeps it too: like
   the banner, it owns no outer margin. */
.overview-error[b-lja7w0e7wb],
.overview-partnership[b-lja7w0e7wb] {
    margin-bottom: var(--lk-space-5);
}

.overview-kpis[b-lja7w0e7wb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lk-space-4);
    margin-bottom: var(--lk-space-5);
}

/* The design gives the loans panel roughly half again the width of the side column.

   No align-items, so the loans card stretches to the height of the side column — that is the
   grid's default and what the design does. Setting it to start made the loans card only as tall
   as its own content: 263px against the design's 438 at the same width, so the left half of the
   row stopped short while the right ran on. The side column below keeps align-content: start,
   which is a different thing: it stops the two cards *inside* it from stretching to fill. */
.overview-panels[b-lja7w0e7wb] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--lk-space-4);
}

.overview-side[b-lja7w0e7wb] {
    display: grid;
    gap: var(--lk-space-4);
    align-content: start;
}

/* ── Rows ───────────────────────────────────────────────── */

.overview-list[b-lja7w0e7wb] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.overview-row[b-lja7w0e7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.overview-row-tight[b-lja7w0e7wb] {
    padding-top: var(--lk-space-3);
    padding-bottom: var(--lk-space-3);
}

.overview-row-mark[b-lja7w0e7wb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6875rem;
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.overview-row-mark-ok[b-lja7w0e7wb] {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

/* A booking row can carry a third line, the access code, and the Prototype keeps the date column
   at the top of the row rather than centred against all three. */
.overview-row-top[b-lja7w0e7wb] {
    align-items: flex-start;
}

/* The date column in the bookings panel: the day in magenta over the date in muted, both on one
   line each, as the Prototype stacks them. */
.overview-row-when[b-lja7w0e7wb] {
    display: flex;
    flex-direction: column;
    flex: 0 0 3.625rem;
    font-family: var(--lk-font-display);
    font-size: 0.688rem;
    text-align: center;
    white-space: nowrap;
}

.overview-row-day[b-lja7w0e7wb] {
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lk-magenta-ink);
}

.overview-row-date[b-lja7w0e7wb] {
    font-weight: 700;
    color: var(--lk-text-mut);
}

.overview-row-code[b-lja7w0e7wb] {
    font-variant-numeric: tabular-nums;
}

.overview-row-code strong[b-lja7w0e7wb] {
    color: var(--lk-text);
}

.overview-row-text[b-lja7w0e7wb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Key names are long and the column is narrow, so one line with an ellipsis beats a
   name that wraps to three. The full name is on the key's own screen. */
.overview-row-title[b-lja7w0e7wb] {
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-row-meta[b-lja7w0e7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-1);
    margin-top: var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.overview-row-aside[b-lja7w0e7wb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--lk-space-1);
    flex: 0 0 auto;
    text-align: right;
}

.overview-row-note[b-lja7w0e7wb] {
    font-size: 0.75rem;
    color: var(--lk-text-sec);
    white-space: nowrap;
}

/* The clock sits in the Icon component's markup, so it needs ::deep. */
[b-lja7w0e7wb] .overview-row-icon {
    color: var(--lk-text-mut);
}

/* ── Loading ────────────────────────────────────────────── */

.overview-skeleton-gap[b-lja7w0e7wb] {
    margin: var(--lk-space-4) 0 var(--lk-space-3);
}

.overview-skeleton-row[b-lja7w0e7wb] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-4);
}

.overview-skeleton-lines[b-lja7w0e7wb] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-2);
    flex: 1;
}

/* The explanation beside the switched-off actions is the component's own business now: it takes
   Placement="BesideActions" and shapes itself for a header row (#320). The wrapper and the two
   ::deep rules that used to sit here are gone, along with the colour override they carried —
   nothing recorded why the note was a shade darker here than on the three other screens. */

/* ── Narrow screens ─────────────────────────────────────── */

/* Both grids collapse to one column rather than squeezing. The proper answer for phones
   is still an open question for the designer (#198). */
@media (max-width: 60rem) {
    .overview-kpis[b-lja7w0e7wb],
    .overview-panels[b-lja7w0e7wb] {
        grid-template-columns: 1fr;
    }
}

/* The way from the extension band to /loans (#1323): a link styled as the band's small action. */
.overview-extensions-link[b-lja7w0e7wb] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

/* Lyker's alcohol locks to calibrate (#1326), between the counts and the lists. */
.overview-alcohol[b-lja7w0e7wb] {
    margin-bottom: var(--lk-space-5);
}

/* The organisation's line in the reader's own cards (#1399, alternative C): a quiet link, overdue in red when there are any. */
.overview-organization-line[b-lja7w0e7wb] {
    color: inherit;
    text-decoration: none;
}

.overview-organization-line:hover[b-lja7w0e7wb] {
    color: var(--lk-ink);
    text-decoration: underline;
}

.overview-organization-late[b-lja7w0e7wb] {
    font-weight: 600;
    color: var(--lk-err);
}
/* /Pages/Overview/PanelCard.razor.rz.scp.css */
/* The card element belongs to the Card component, hence ::deep (ADR 0007). */
[b-gay46zcepm] .panel {
    display: flex;
    flex-direction: column;
}

/* The head and its title are CardHeader's (#567). The link is this panel's own, and sets its own
   leading rather than inheriting the body's 1.6, which made it 21px tall against the design's 16. */
.panel-link[b-gay46zcepm] {
    flex: 0 0 auto;
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    line-height: normal;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.panel-link:hover[b-gay46zcepm] {
    text-decoration: underline;
}
/* /Pages/Overview/PartnershipAcceptedComponent.razor.rz.scp.css */
/* The Prototype's 8B: the ok tone, 16px round, 20px by 24px inside. */
.partnership-accepted[b-bjof9029cl] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5) var(--lk-space-6);
    border-radius: var(--lk-radius-card);
    background: var(--lk-ok-soft);
}

.partnership-accepted-mark[b-bjof9029cl] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface);
    color: var(--lk-ok);
}

.partnership-accepted-text[b-bjof9029cl] {
    flex: 1;
    min-width: 0;
}

.partnership-accepted-title[b-bjof9029cl] {
    margin: 0 0 var(--lk-space-1);
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-body);
    color: var(--lk-ink);
}

.partnership-accepted-body[b-bjof9029cl] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* A link, since it goes somewhere, drawn as the Prototype's small secondary button. Button has
   no link form, so the look is written here rather than borrowed. */
.partnership-accepted-link[b-bjof9029cl] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    flex: 0 0 auto;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-label);
    color: var(--lk-ink);
    text-decoration: none;
    white-space: nowrap;
}

.partnership-accepted-link:hover[b-bjof9029cl] {
    background: var(--lk-surface-alt);
}
/* /Pages/Overview/PartnershipRequestComponent.razor.rz.scp.css */
/* The Prototype's 7B band: navy, 16px round, 24px by 26px inside. Sizes are rounded to the scale
   as the rest of the overview is (#528). */
.partnership-request[b-xti9l18yjf] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-6);
    border-radius: var(--lk-radius-card);
    background: var(--lk-rail);
    color: var(--lk-rail-text);
}

.partnership-request-mark[b-xti9l18yjf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-rail-surface-strong);
}

.partnership-request-text[b-xti9l18yjf] {
    flex: 1;
    min-width: 0;
}

/* Magenta, not the Prototype's #FF8CBE: that is the dark theme's magenta ink, and the light theme
   has no token for pink on navy (#817). */
.partnership-request-eyebrow[b-xti9l18yjf] {
    margin: 0 0 var(--lk-space-1);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lk-magenta);
}

.partnership-request-title[b-xti9l18yjf] {
    margin: 0 0 var(--lk-space-1);
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: var(--lk-font-size-title-sm);
    line-height: normal;
    color: var(--lk-rail-text);
}

.partnership-request-body[b-xti9l18yjf],
.partnership-request-error[b-xti9l18yjf] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: var(--lk-line-height-body);
    color: var(--lk-rail-text-sec);
}

.partnership-request-error[b-xti9l18yjf] {
    margin-top: var(--lk-space-2);
    font-weight: 600;
    color: var(--lk-rail-text);
}

.partnership-request-actions[b-xti9l18yjf] {
    display: flex;
    gap: var(--lk-space-3);
    flex: 0 0 auto;
}

/* The Prototype's decline is an outline in white on the navy. Secondary is an outline on the
   page's surface, so its colours are turned over here — the Button draws it, hence ::deep. */
.partnership-request-actions[b-xti9l18yjf]  .partnership-request-decline {
    border-color: var(--lk-rail-text-mut);
    background: transparent;
    color: var(--lk-rail-text);
}

.partnership-request-actions[b-xti9l18yjf]  .partnership-request-decline:hover:not(:disabled) {
    background: var(--lk-rail-surface-strong);
}

@media (max-width: 60rem) {
    .partnership-request[b-xti9l18yjf] {
        flex-wrap: wrap;
    }

    .partnership-request-actions[b-xti9l18yjf] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Partners/PartnerDetailPage.razor.rz.scp.css */
/* The access tab. The chips that grant and the list of what is granted are
   KeyCategoryGrantComponent's since #492, which moved their rules there unchanged. */

/* The loading region is PageStateComponent's element since #787, in its TightStack layout — what the
   rule that stood here asked for. A rule here would no longer reach it. */
/* /Pages/Partners/PartnerHeaderComponent.razor.rz.scp.css */
/* The notices — everything both tab pages draw before their own content that is not a shared
   component. The back link above them is BackLink, and the tab row is TabRow. */

/* ── Notices ────────────────────────────────────────────── */

.partner-notice[b-e2bhnqo2kj] {
    margin-bottom: var(--lk-space-4);
}

.partner-detail-error[b-e2bhnqo2kj] {
    margin-bottom: var(--lk-space-4);
    color: var(--lk-err);
}

.partner-detail-error p[b-e2bhnqo2kj] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}
/* /Pages/Partners/PartnerInvitePage.razor.rz.scp.css */
/* The invitation flow: three steps, two branches, one receipt. The Prototype centres it in a
   narrow column, which is right — it is a form, not a table, and a full-width form makes the eye
   travel further than the fields do. */

.invite-page[b-8t75n22zcm] {
    max-width: 45rem;
    margin: 0 auto;
}

/* ── The step row ───────────────────────────────────────── */

/* The row itself is StepIndicator's; the page only places it. */
.invite-page[b-8t75n22zcm]  .invite-steps {
    margin-bottom: var(--lk-space-6);
}

/* ── Search results ─────────────────────────────────────── */

.invite-page[b-8t75n22zcm]  .invite-search {
    margin-bottom: var(--lk-space-3);
}

.invite-hits[b-8t75n22zcm] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.invite-hit-list[b-8t75n22zcm] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

/* A button rather than a link: choosing a company sends a request (the lookup) rather than going
   somewhere, and the address does not change. */
.invite-hit[b-8t75n22zcm] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    width: 100%;
    padding: var(--lk-space-3) var(--lk-space-2);
    border: none;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
    background: transparent;
    text-align: left;
    color: var(--lk-text);
    cursor: pointer;
    transition: var(--lk-transition);
}

.invite-hit:hover:not(:disabled)[b-8t75n22zcm] {
    background: var(--lk-ghost-hover);
}

.invite-hit:focus-visible[b-8t75n22zcm] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: -2px;
}

.invite-hit:disabled[b-8t75n22zcm] {
    opacity: 0.6;
    cursor: default;
}

.invite-hit-mark[b-8t75n22zcm],
.invite-admins-mark[b-8t75n22zcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text-sec);
}

.invite-admins-mark[b-8t75n22zcm] {
    border-radius: var(--lk-radius-pill);
}

.invite-hit-text[b-8t75n22zcm] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.invite-hit-name[b-8t75n22zcm] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
}

.invite-hit-detail[b-8t75n22zcm] {
    margin-top: var(--lk-space-0-5);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* ── How it works ───────────────────────────────────────── */

.invite-how[b-8t75n22zcm] {
    margin-top: var(--lk-space-5);
}

.invite-how-heading[b-8t75n22zcm] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-eyebrow);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--lk-magenta-ink);
}

.invite-how-cards[b-8t75n22zcm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lk-space-3);
}

@media (max-width: 48rem) {
    .invite-how-cards[b-8t75n22zcm] {
        grid-template-columns: 1fr;
    }
}

.invite-how-mark[b-8t75n22zcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text-sec);
}

.invite-how-title[b-8t75n22zcm] {
    margin: 0 0 var(--lk-space-1);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    color: var(--lk-ink);
}

.invite-how-body[b-8t75n22zcm] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
    color: var(--lk-text-mut);
}

/* ── The chosen company, notices and actions ────────────── */

.invite-page[b-8t75n22zcm]  .invite-chosen,
.invite-page[b-8t75n22zcm]  .invite-admins {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-3);
}

.invite-page[b-8t75n22zcm]  .invite-notice {
    margin-bottom: var(--lk-space-3);
}

.invite-page[b-8t75n22zcm]  .invite-error {
    margin-bottom: var(--lk-space-3);
    color: var(--lk-err);
}

.invite-error p[b-8t75n22zcm] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.invite-link[b-8t75n22zcm] {
    color: var(--lk-navy);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.invite-contact[b-8t75n22zcm] {
    display: grid;
    gap: var(--lk-space-3);
}

.invite-actions[b-8t75n22zcm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}

/* ── The receipt ────────────────────────────────────────── */

.invite-page[b-8t75n22zcm]  .invite-sent {
    margin-bottom: var(--lk-space-3);
    text-align: center;
}

.invite-sent-mark[b-8t75n22zcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: var(--lk-space-4);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.invite-sent-title[b-8t75n22zcm] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title);
    font-weight: 800;
    color: var(--lk-ink);
}

.invite-sent-body[b-8t75n22zcm] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: 1.55;
    color: var(--lk-text-sec);
}

.invite-timeline[b-8t75n22zcm] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--lk-space-4);
}

.invite-timeline-step[b-8t75n22zcm] {
    display: flex;
    gap: var(--lk-space-3);
}

.invite-timeline-mark[b-8t75n22zcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-navy-soft);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    color: var(--lk-ink);
}

.invite-timeline-text[b-8t75n22zcm] {
    display: grid;
}

.invite-timeline-title[b-8t75n22zcm] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.invite-timeline-body[b-8t75n22zcm] {
    margin-top: var(--lk-space-1);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
    color: var(--lk-text-mut);
}
/* /Pages/Partners/PartnerListComponent.razor.rz.scp.css */
/* The Prototype draws these rows as flex divs. They are a real table here, because the data is
   tabular and a table announces row and column without anything being written for it — the same
   reasoning as SortableColumnHeader, which owns the header cells. Same shape as the colleague
   list, and deliberately so: two lists that answer "who" should not look like two designs. */

/* No gap, as on the key list: the pager sits straight under the last row, and its own padding
   is the bottom of the card (ListLayout). A 16px gap here stacked on top of it. */
.partner-list[b-6pgi6lijv5] {
    display: grid;
}

/* An invitation has nothing to open, so its row does not pretend otherwise: no hover lift, and
   the name is plain text rather than a link. */
.partner-table tbody tr.partner-row-inert:hover[b-6pgi6lijv5] {
    background: transparent;
}

.partner-identity[b-6pgi6lijv5] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The building mark, as the Prototype's tile. Square with a soft radius rather than the round
   avatar the colleague list uses — this is a company, not a person, and the shape is the only
   thing carrying that at a glance. */
.partner-mark[b-6pgi6lijv5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text-sec);
}

.partner-identity-text[b-6pgi6lijv5] {
    display: grid;
    min-width: 0;
}

.partner-name[b-6pgi6lijv5] {
    font-weight: 600;
    color: var(--lk-text);
    text-decoration: none;
}

a.partner-name:hover[b-6pgi6lijv5] {
    color: var(--lk-ink);
    text-decoration: underline;
}

a.partner-name:focus-visible[b-6pgi6lijv5] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-control);
}

/* The registration number under the name. It wraps rather than being clipped: half a number
   looks like a whole one. */
.partner-registration-number[b-6pgi6lijv5] {
    margin-top: var(--lk-space-0-5);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    overflow-wrap: anywhere;
}

.partner-direction[b-6pgi6lijv5],
.partner-people[b-6pgi6lijv5] {
    color: var(--lk-text-sec);
    white-space: nowrap;
}

.partner-people-none[b-6pgi6lijv5] {
    color: var(--lk-text-mut);
}

/* The chevron column: as narrow as its icon. The alignment is the shared .lk-list-actions. */
.partner-table-actions[b-6pgi6lijv5] {
    width: 1%;
}

.partner-row-chevron[b-6pgi6lijv5] {
    display: inline-flex;
    color: var(--lk-text-mut);
}

/* ── Loading ────────────────────────────────────────────── */

.partner-list-loading-row[b-6pgi6lijv5] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-2);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.partner-list-loading-row:last-child[b-6pgi6lijv5] {
    border-bottom: none;
}
/* /Pages/Partners/PartnerMainPage.razor.rz.scp.css */
/* The toolbar is the shared .lk-list-toolbar in app.css, the key list's (Martin 2026-09-15). Only a
   search field here: the Prototype has no other control on this screen either, and the two lists
   it holds — partnerships and pending invitations — are one question rather than two filters. */

/* The loading region's gap below the header is PageStateComponent's LoadingSpaced since #787. The
   region is the component's element, which a rule here no longer reaches. */
/* /Pages/Partners/PartnerPeoplePage.razor.rz.scp.css */
/* The people tab: who at the partner is covered, and who has been blocked. */

/* The loading region is PageStateComponent's element since #787, in its TightStack layout — what the
   rule that stood here asked for. A rule here would no longer reach it. */

/* In the header strip's action slot, right-aligned: the Prototype's 12.5px muted note beside the
   title. Allowed to wrap, because the Swedish sentence is long and the title needs the room more. */
.partner-people-note[b-t9lbusgudm] {
    margin: 0;
    max-width: 28rem;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    text-align: right;
}

.partner-people-list[b-t9lbusgudm] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.partner-person[b-t9lbusgudm] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.partner-person:last-child[b-t9lbusgudm] {
    border-bottom: none;
}

/* Dimmed, as the Prototype dims a blocked row — but the badge beside the name is what actually
   says it. Opacity alone would leave the state invisible to anyone who cannot compare two rows. */
.partner-person-blocked[b-t9lbusgudm] {
    opacity: 0.65;
}

.partner-person-identity[b-t9lbusgudm] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.partner-person-name[b-t9lbusgudm] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
}

.partner-person-blocked-at[b-t9lbusgudm] {
    margin-top: var(--lk-space-0-5);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}
/* /Pages/Profile/AddContactDialog.razor.rz.scp.css */
.add-contact-form[b-f9le0dzsxg] {
    display: grid;
    gap: var(--lk-space-4);
}

.add-contact-sent[b-f9le0dzsxg] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
    overflow-wrap: anywhere;
}

/* A failure the person cannot fix, so it sits with the form rather than on a field. */
.add-contact-failure[b-f9le0dzsxg] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Pages/Profile/ChangeNameDialog.razor.rz.scp.css */
.change-name-gap[b-ikpf4zque4] {
    margin-top: var(--lk-space-2);
}

/* The same voice as the onboarding's hint under the name: 12px, secondary, set off from the
   question rather than beside it. */
.change-name-hint[b-ikpf4zque4] {
    margin: var(--lk-space-4) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lk-text-sec);
}

/* The add-contact dialog's failure box, unchanged: a problem the person cannot fix sits with
   the form rather than on a field, and the two dialogs on this screen should not differ in how
   that looks. */
.change-name-failure[b-ikpf4zque4] {
    margin: var(--lk-space-3) 0 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}
/* /Pages/Profile/ProfileHistoryListComponent.razor.rz.scp.css */
/* The person's history (#266). The days and their rows are EventDayGroupsComponent's (#492); what
   is left here is the frame around them and the loading rows. */

.profile-history[b-ak7nelg0ta] {
    display: grid;
    gap: var(--lk-space-5);
}

/* ── Loading ────────────────────────────────────────────── */

.profile-history-loading-row[b-ak7nelg0ta] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-4);
}
/* /Pages/Profile/ProfilePage.razor.rz.scp.css */
/* The Prototype's 1.2fr / 1fr split. It collapses early rather than at a phone width: the
   right column holds a single control, and two narrow columns read worse than one wide one
   well before the layout actually runs out of room. */
.profile-grid[b-27dwxic8nr] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

.profile-column[b-27dwxic8nr] {
    display: grid;
    gap: var(--lk-space-4);
}

@media (max-width: 60rem) {
    .profile-grid[b-27dwxic8nr] {
        grid-template-columns: 1fr;
    }
}

/* ── Loading ────────────────────────────────────────────── */

.profile-skeleton-field[b-27dwxic8nr] {
    margin-top: var(--lk-space-4);
}

.profile-skeleton-gap[b-27dwxic8nr] {
    margin-top: var(--lk-space-2);
}

/* The numbers SMS go to (#1266), under the verified ones in the same card: a hairline between
   the two kinds, the sentence that says what these are for, then one field per organisation. */
.profile-sms-numbers[b-27dwxic8nr] {
    display: grid;
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.profile-sms-number-intro[b-27dwxic8nr] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

/* One organisation's number with its Change beside it (#1266). */
.profile-sms-row[b-27dwxic8nr] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--lk-space-3);
}

/* Add phone number, right under the verified numbers it adds to (#1266). */
.profile-add-phone[b-27dwxic8nr] {
    display: flex;
}
/* /Pages/Profile/ProfileSignInsPage.razor.rz.scp.css */
/* "Today 11:12" and the method under it stay on their lines however narrow the window (#1130). */
.profile-sign-ins-when[b-ibw9ok0dpj] {
    white-space: nowrap;
}

/* The end time never wraps (#1327, rule 6), as the start does not. */
.profile-sign-ins-ended[b-ibw9ok0dpj] {
    white-space: nowrap;
}
/* /Pages/Reports/ReportMainPage.razor.rz.scp.css */
/* The catalogue proposal of 2026-10-16: a toolbar, the recent row, small area headings and a grid
   of row cards. Tokens only (ADR 0007 point 8); the proposal's 340px column is 21.25rem. */

.report-catalogue-toolbar[b-9i8rcn4oxd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-5);
}

.report-catalogue-toolbar[b-9i8rcn4oxd]  .report-catalogue-search {
    flex: 1 1 16rem;
    max-width: 26rem;
}

.report-catalogue-areas[b-9i8rcn4oxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

/* ── Recently used ─────────────────────────────────────── */

.report-catalogue-recent[b-9i8rcn4oxd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-3) var(--lk-space-4);
    margin-bottom: var(--lk-space-6);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
}

.report-catalogue-recent-label[b-9i8rcn4oxd] {
    margin-right: var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

.report-catalogue-recent-chip[b-9i8rcn4oxd] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--lk-space-2);
    padding: var(--lk-space-1) var(--lk-space-3);
    border-radius: var(--lk-radius-sm);
    background: var(--lk-sunken);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    text-decoration: none;
    transition: var(--lk-transition);
}

.report-catalogue-recent-chip:hover[b-9i8rcn4oxd] {
    background: var(--lk-ghost-hover);
}

.report-catalogue-recent-chip:focus-visible[b-9i8rcn4oxd] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.report-catalogue-recent-when[b-9i8rcn4oxd] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* ── Areas ─────────────────────────────────────────────── */

.report-catalogue-area[b-9i8rcn4oxd] {
    margin-bottom: var(--lk-space-6);
}

/* Small, upper-case and grey: a label over a group, not a heading that competes with the cards. */
.report-catalogue-area-title[b-9i8rcn4oxd] {
    margin: 0 0 var(--lk-space-3);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-eyebrow);
    line-height: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

.report-catalogue-grid[b-9i8rcn4oxd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21.25rem, 1fr));
    gap: var(--lk-space-3);
}

/* ── Cards ─────────────────────────────────────────────── */

/* The card is the link: the whole surface opens the report, as the overview's panels do. A row:
   the icon tile, the words, the figure where there is one, and the chevron. */
.report-catalogue-card[b-9i8rcn4oxd] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    color: inherit;
    text-decoration: none;
    transition: var(--lk-transition);
}

.report-catalogue-card:hover[b-9i8rcn4oxd] {
    border-color: var(--lk-line-strong);
    box-shadow: var(--lk-shadow-sm);
}

.report-catalogue-card:focus-visible[b-9i8rcn4oxd] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.report-catalogue-card-icon[b-9i8rcn4oxd] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-sunken);
    color: var(--lk-navy);
}

.report-catalogue-card-text[b-9i8rcn4oxd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.report-catalogue-name[b-9i8rcn4oxd] {
    font-family: var(--lk-font-ui);
    font-weight: 600;
    font-size: var(--lk-font-size-card-title);
    color: var(--lk-ink);
}

/* Two lines at most: the sentence is a hint, the report page says the rest. */
.report-catalogue-description[b-9i8rcn4oxd] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--lk-space-0-5);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.report-catalogue-figure[b-9i8rcn4oxd] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.report-catalogue-figure-value[b-9i8rcn4oxd] {
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-title);
    line-height: var(--lk-line-height-tight);
    color: var(--lk-ink);
}

.report-catalogue-figure-warn .report-catalogue-figure-value[b-9i8rcn4oxd] {
    color: var(--lk-warn);
}

.report-catalogue-figure-label[b-9i8rcn4oxd] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.report-catalogue-chevron[b-9i8rcn4oxd] {
    display: grid;
    place-items: center;
    color: var(--lk-text-mut);
}
/* /Pages/Reports/ReportMinePage.razor.rz.scp.css */
/* "Mina rapporter" (#1324, C1–C6). */

[b-29wyjs3zcq] .report-mine-error {
    margin-bottom: var(--lk-space-4);
}

.report-mine-table[b-29wyjs3zcq] {
    min-width: 46rem;
}

.report-mine-col-when[b-29wyjs3zcq] {
    width: 17%;
}

/* Each width is the span plus the padding .lk-list-table gives the cell (8px a side; 20px on the
   right of the last), not their sum, as #922 did for the other lists: the padding scales with
   --lk-density and a summed number does not (ADR 0007 point 9, #1437). The spans are the old
   240px and 176px less that padding, so nothing moves at the default density, and the table's
   layout is the default, so a longer translation still widens the column. */
.report-mine-col-status[b-29wyjs3zcq] {
    width: calc(14rem + 2 * var(--lk-space-2));
}

.report-mine-col-actions[b-29wyjs3zcq] {
    width: calc(9.25rem + var(--lk-space-2) + var(--lk-space-5));
}

.report-mine-name-cell[b-29wyjs3zcq] {
    font-weight: 400;
}

.report-mine-name[b-29wyjs3zcq],
.report-mine-sub[b-29wyjs3zcq],
.report-mine-cell > span[b-29wyjs3zcq] {
    display: block;
}

.report-mine-name[b-29wyjs3zcq] {
    font-weight: 700;
    color: var(--lk-ink);
    text-decoration: none;
}

a.report-mine-name:hover[b-29wyjs3zcq] {
    text-decoration: underline;
}

.report-mine-sub[b-29wyjs3zcq] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.report-mine-none[b-29wyjs3zcq],
.report-mine-muted[b-29wyjs3zcq] {
    color: var(--lk-text-mut);
}

/* The schedules whose owner lost access (C2): a red box first, with "Ta över". */
.report-mine-ownerless[b-29wyjs3zcq] {
    margin-bottom: var(--lk-space-5);
    border: var(--lk-border-hairline) solid var(--lk-err);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    overflow: hidden;
}

.report-mine-ownerless-head[b-29wyjs3zcq] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    background: var(--lk-err-soft);
    color: var(--lk-text);
}

.report-mine-ownerless-head[b-29wyjs3zcq]  svg {
    flex: none;
    margin-top: var(--lk-space-0-5);
    color: var(--lk-err);
}

.report-mine-ownerless-row[b-29wyjs3zcq] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto auto;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

@media (max-width: 60rem) {
    .report-mine-ownerless-row[b-29wyjs3zcq] {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.report-mine-others-title[b-29wyjs3zcq] {
    margin: var(--lk-space-6) 0 var(--lk-space-1);
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
    color: var(--lk-ink);
}

.report-mine-others-body[b-29wyjs3zcq] {
    margin: 0 0 var(--lk-space-3);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* C5: one line per send. */
.report-history[b-29wyjs3zcq] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-history-row[b-29wyjs3zcq] {
    display: grid;
    grid-template-columns: 9rem auto minmax(0, 1fr);
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.report-history-row:last-child[b-29wyjs3zcq] {
    border-bottom: 0;
}

.report-history-when[b-29wyjs3zcq] {
    color: var(--lk-text);
}

.report-history-detail[b-29wyjs3zcq] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.report-history-empty[b-29wyjs3zcq],
.report-history-failed[b-29wyjs3zcq] {
    margin: 0;
    color: var(--lk-text-sec);
}

.report-history-failed[b-29wyjs3zcq] {
    color: var(--lk-err);
}

/* C4: what is taken over. */
.report-take-over-summary[b-29wyjs3zcq] {
    display: grid;
    gap: var(--lk-space-1);
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
    color: var(--lk-text);
}

.report-take-over-summary .report-take-over-recipients[b-29wyjs3zcq] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.report-take-over-body[b-29wyjs3zcq] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-text-sec);
}
/* /Pages/Reports/ReportPage.razor.rz.scp.css */
.report-region[b-jpif24ftik] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-4);
}

/* The summary figures across the top, as many as fit. */
.report-summary[b-jpif24ftik] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--lk-space-3);
}

/* The column toggles, a row under the toolbar. */
.report-columns[b-jpif24ftik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2) var(--lk-space-4);
}

.report-columns-label[b-jpif24ftik] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-sec);
}

.report-cell-number[b-jpif24ftik] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.report-cell-time[b-jpif24ftik] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.report-link[b-jpif24ftik] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* The zone the files use: the list card's footer line — a hairline above, the card's own side
   padding, small and muted — rather than a sentence flush against the table with no room around
   it (project agent 2026-10-16). */
.report-note[b-jpif24ftik] {
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-5) var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* The caveat, when opened from the info button: a notice under the header, above the report. */
.report-caveat[b-jpif24ftik] {
    margin-bottom: var(--lk-space-4);
}

/* Saved and scheduled reports (#1324, A1–A3): a line between the files and Spara/Schemalägg. */
.report-actions-divider[b-jpif24ftik] {
    align-self: center;
    width: var(--lk-border-hairline);
    height: var(--lk-space-5);
    margin: 0 var(--lk-space-1);
    background: var(--lk-line);
}

/* What a saved report's schedule does, under the heading (A3). */
.report-saved-badges[b-jpif24ftik] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin: calc(-1 * var(--lk-space-3)) 0 var(--lk-space-4);
}
/* /Pages/Reports/ReportScheduleDialog.razor.rz.scp.css */
/* The schedule form (#1324, B1–B7): when and what on the left, who on the right; one column when narrow. */
.report-schedule[b-0ivtike71k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--lk-space-6);
}

@media (max-width: 47.99rem) {
    .report-schedule[b-0ivtike71k] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.report-schedule-when[b-0ivtike71k],
.report-schedule-who[b-0ivtike71k] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
    min-width: 0;
}

.report-schedule-field[b-0ivtike71k] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-2);
}

.report-schedule-label[b-0ivtike71k],
.report-schedule-only-title[b-0ivtike71k] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
}

.report-schedule-hint[b-0ivtike71k] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
    color: var(--lk-text-mut);
}

.report-schedule-hint-indent[b-0ivtike71k] {
    padding-left: calc(var(--lk-space-6) + var(--lk-space-1));
}

.report-schedule-days[b-0ivtike71k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

.report-schedule-pair[b-0ivtike71k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--lk-space-3);
}

.report-schedule-only[b-0ivtike71k] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--lk-space-3) var(--lk-space-4);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.report-schedule-only > div[b-0ivtike71k] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
}

.report-schedule-search[b-0ivtike71k] {
    position: relative;
}

.report-schedule-suggestions[b-0ivtike71k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: var(--lk-space-1) 0 0;
    padding: var(--lk-space-1);
    list-style: none;
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-md);
}

.report-schedule-suggestion[b-0ivtike71k] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: center;
    width: 100%;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: none;
    border-radius: var(--lk-radius-control);
    background: none;
    color: var(--lk-text);
    text-align: left;
    cursor: pointer;
}

.report-schedule-suggestion:hover:not(:disabled)[b-0ivtike71k],
.report-schedule-suggestion:focus-visible[b-0ivtike71k] {
    background: var(--lk-surface-alt);
    outline: none;
}

.report-schedule-suggestion:disabled[b-0ivtike71k] {
    color: var(--lk-text-mut);
    cursor: default;
}

.report-schedule-problem[b-0ivtike71k] {
    margin: var(--lk-space-1) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-err);
}

.report-schedule-recipients[b-0ivtike71k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-schedule-recipient[b-0ivtike71k] {
    display: flex;
    gap: var(--lk-space-3);
    align-items: center;
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.report-schedule-recipient:last-child[b-0ivtike71k] {
    border-bottom: none;
}

.report-schedule-row-text[b-0ivtike71k] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.report-schedule-row-name[b-0ivtike71k] {
    overflow: hidden;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-schedule-row-sub[b-0ivtike71k] {
    overflow: hidden;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-schedule-external-icon[b-0ivtike71k] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.report-schedule-resend[b-0ivtike71k] {
    align-self: flex-start;
    margin-top: var(--lk-space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--lk-magenta-ink);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    cursor: pointer;
}

.report-schedule-remove[b-0ivtike71k] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--lk-control-height-sm);
    height: var(--lk-control-height-sm);
    padding: 0;
    border: none;
    border-radius: var(--lk-radius-control);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
}

.report-schedule-remove:hover[b-0ivtike71k],
.report-schedule-remove:focus-visible[b-0ivtike71k] {
    color: var(--lk-text);
    background: var(--lk-surface-alt);
    outline: none;
}

.report-schedule-next[b-0ivtike71k] {
    margin-left: auto;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

/* Five frequencies on one line in the column (B1): the items share the width with tighter padding. */
.report-schedule-frequency[b-0ivtike71k]  .lk-segmented-item {
    flex: 1 1 auto;
    padding-inline: var(--lk-space-2);
}
/* /Pages/ReportSubscriptions/ReportSubscriptionPage.razor.rz.scp.css */
/* One centred card on the public layout, as the invitation (the Designagent's E1–E7). */
.report-subscription[b-259trel40h] {
    width: min(100%, 460px);
    margin: 0 auto;
}

.report-subscription-body[b-259trel40h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) var(--lk-space-2);
    text-align: center;
}

.report-subscription-icon[b-259trel40h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--lk-space-2);
    border-radius: var(--lk-radius-tile);
}

.report-subscription-icon.accent[b-259trel40h] {
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}

.report-subscription-icon.neutral[b-259trel40h] {
    background: var(--lk-navy-soft);
    color: var(--lk-ink);
}

.report-subscription-icon.ok[b-259trel40h] {
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.report-subscription-icon.warn[b-259trel40h] {
    background: var(--lk-warn-soft);
    color: var(--lk-warn);
}

.report-subscription-title[b-259trel40h] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 23px;
    color: var(--lk-ink);
}

.report-subscription-lead[b-259trel40h] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: 1.6;
    color: var(--lk-text-sec);
}

.report-subscription-body[b-259trel40h]  .report-subscription-action {
    width: 100%;
    margin-top: var(--lk-space-4);
}
/* /Pages/Resellers/ResellerMainPage.razor.rz.scp.css */
/* The register: the notice, then one table. The table itself is .lk-list-table's, from app.css. */

.reseller-list[b-qsatgofi71] {
    display: grid;
    gap: var(--lk-space-4);
}

/* The name identifies the row, so it is a <th>, as in the organisation list. */
.reseller-table-name[b-qsatgofi71] {
    font-weight: 600;
    color: var(--lk-text);
    overflow-wrap: anywhere;
}

.reseller-table-link[b-qsatgofi71] {
    color: inherit;
    text-decoration: none;
}

.reseller-table-link:hover[b-qsatgofi71] {
    text-decoration: underline;
}

.reseller-table-muted[b-qsatgofi71] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Loading ────────────────────────────────────────────── */

.reseller-list-loading-row[b-qsatgofi71] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}
/* /Pages/Settings/CompanyLogoSlotComponent.razor.rz.scp.css */
/* One slot as a row in the company profile (aterforsaljare-design/v2 S1–S3): the logo on the left,
   what the slot is for in the middle, the action on the right. Hairlines between rows. */

.logo-slot[b-gzhwbu63bg] {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lk-space-4);
    padding: var(--lk-space-4) 0;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

/* ── The logo, on the surface it is made for ────────────── */

.logo-slot-preview[b-gzhwbu63bg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    border: var(--lk-border-hairline) solid var(--lk-line);
}

.logo-slot-preview-dark[b-gzhwbu63bg] {
    background: var(--lk-rail);
    border-color: var(--lk-rail);
}

.logo-slot-preview-light[b-gzhwbu63bg] {
    background: var(--lk-surface);
}

.logo-slot-preview-empty[b-gzhwbu63bg] {
    border-style: dashed;
}

/* A proposal is dashed in the accent, as the proposed fields are: "förslag" is that, not a colour. */
.logo-slot-preview-proposal[b-gzhwbu63bg] {
    border: var(--lk-border-width) dashed var(--lk-magenta);
}

.logo-slot-preview-error[b-gzhwbu63bg] {
    border-color: var(--lk-err);
}

.logo-slot-image[b-gzhwbu63bg] {
    display: block;
    max-width: 100%;
    max-height: 3.5rem;
    width: auto;
    height: auto;
}

.logo-slot-example[b-gzhwbu63bg] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: 0;
}

.logo-slot-example-image[b-gzhwbu63bg] {
    display: block;
    width: 5rem;
    height: auto;
}

.logo-slot-example-label[b-gzhwbu63bg] {
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-mut);
}

/* ── What the slot is for ───────────────────────────────── */

.logo-slot-body[b-gzhwbu63bg] {
    display: grid;
    gap: var(--lk-space-1);
    min-width: 0;
}

.logo-slot-head[b-gzhwbu63bg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
}

.logo-slot-title[b-gzhwbu63bg] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    color: var(--lk-ink);
}

.logo-slot-qualifier[b-gzhwbu63bg] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.logo-slot-usage[b-gzhwbu63bg] {
    margin: 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.logo-slot-rules[b-gzhwbu63bg],
.logo-slot-note[b-gzhwbu63bg] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.logo-slot-unsaved[b-gzhwbu63bg] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

.logo-slot-error[b-gzhwbu63bg] {
    margin: 0;
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-err);
}

/* ── The action ─────────────────────────────────────────── */

.logo-slot-actions[b-gzhwbu63bg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.logo-slot-filled-by-fetch[b-gzhwbu63bg] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
    white-space: nowrap;
}

/* Narrow: the logo above, the action below the text. */
@media (max-width: 1100px) {
    .logo-slot[b-gzhwbu63bg] {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .logo-slot-actions[b-gzhwbu63bg] {
        justify-content: flex-start;
    }
}
/* /Pages/Settings/CompanyResearchComponent.razor.rz.scp.css */
.research-steps[b-lqueu0a1cy] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-3);
}

.research-step[b-lqueu0a1cy] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
}

.research-step-title[b-lqueu0a1cy] {
    font-weight: 600;
    color: var(--lk-text);
}

.research-step-hint[b-lqueu0a1cy] {
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
}

/* The sole trader's note above the steps (#1389). */
.research-sole-trader[b-lqueu0a1cy],
.research-cancel-failed[b-lqueu0a1cy] {
    margin-bottom: var(--lk-space-3);
}
/* /Pages/Settings/KeyLicenseCardComponent.razor.rz.scp.css */
/* The Licence card (#1211): four sections stacked in one column, since the card is a column of
   its own on the settings page (#1228). It was two by two while it ran the full width. */
/* The body pads itself: the card is unpadded so the head's rule spans it (#1240), as the
   Company profile card does. */
.key-license-body[b-hshsusfo8t] {
    padding: var(--lk-space-5);
}

.key-license-grid[b-hshsusfo8t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lk-space-5);
}

.key-license-heading[b-hshsusfo8t] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lk-text-mut);
}

/* ── The meter ──────────────────────────────────────────── */

.key-license-count[b-hshsusfo8t] {
    margin: 0 0 var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
    color: var(--lk-ink);
}

.key-license-meter[b-hshsusfo8t] {
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface-alt);
}

.key-license-meter-fill[b-hshsusfo8t] {
    height: 100%;
    border-radius: inherit;
    background: var(--lk-ok);
    transition: width 200ms ease-out;
}

.key-license-meter.is-near .key-license-meter-fill[b-hshsusfo8t] {
    background: var(--lk-warn);
}

.key-license-meter.is-full .key-license-meter-fill[b-hshsusfo8t] {
    background: var(--lk-err);
}

.key-license-breakdown[b-hshsusfo8t],
.key-license-price[b-hshsusfo8t],
.key-license-empty[b-hshsusfo8t] {
    margin: var(--lk-space-2) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.key-license-manual[b-hshsusfo8t] {
    margin-top: var(--lk-space-4);
}

.key-license-manual-actions[b-hshsusfo8t] {
    display: flex;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-2);
}

/* ── The three licences (#1304, mockup l1) ─────────────── */

/* One licence: the mark, the body (name and state, price, note, sub-rows), and its switch at the right. */
.key-license-item[b-hshsusfo8t] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) 0;
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.key-license-item:first-of-type[b-hshsusfo8t] {
    border-top: 0;
    padding-top: 0;
}

.key-license-mark[b-hshsusfo8t] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

/* BankID's logo stands on the card's own ground: no plate, which made it look like ours and
   coloured it (bankid-logo/FILER.md §3). */
.key-license-mark-bankid[b-hshsusfo8t] {
    background: none;
}

.key-license-item-body[b-hshsusfo8t] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--lk-space-1);
}

.key-license-item-title[b-hshsusfo8t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-card-title);
    color: var(--lk-ink);
}

.key-license-price[b-hshsusfo8t] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
}

.key-license-note[b-hshsusfo8t] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.key-license-package[b-hshsusfo8t],
.key-license-keys[b-hshsusfo8t] {
    margin-top: var(--lk-space-3);
}

/* A setting that belongs to a licence: indented on a soft plate under it, its own switch at the right. */
.key-license-subrow[b-hshsusfo8t] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-3);
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.key-license-subrow-text[b-hshsusfo8t] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lk-space-1);
}

.key-license-subrow-title[b-hshsusfo8t] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
}

/* ── The confirmation (#1304, mockups l2 and l3) ───────── */

.key-license-confirm-text[b-hshsusfo8t] {
    margin: 0 0 var(--lk-space-3);
}

/* ── History (#1304, mockup l4) ─────────────────────────── */

.key-license-history-list[b-hshsusfo8t] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-license-history-row[b-hshsusfo8t] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-2) 0;
    border-top: var(--lk-border-width) solid var(--lk-line);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text);
}

.key-license-history-row:first-child[b-hshsusfo8t] {
    border-top: 0;
}

.key-license-history-when[b-hshsusfo8t] {
    color: var(--lk-text-mut);
    white-space: nowrap;
}

.key-license-history-main[b-hshsusfo8t] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-1);
}

.key-license-history-line[b-hshsusfo8t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-2);
}

.key-license-history-what[b-hshsusfo8t] {
    font-weight: 600;
}

.key-license-history-who[b-hshsusfo8t] {
    color: var(--lk-text-mut);
}

/* A row built from the old change log has no name to show (#1304 decision 4). */
.key-license-history-changelog[b-hshsusfo8t] {
    font-style: italic;
}

/* Which licence a row is about: a small chip, a colour per licence. */
.key-license-chip[b-hshsusfo8t] {
    padding: 0.125rem var(--lk-space-2);
    border-radius: var(--lk-radius-pill);
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
    background: var(--lk-surface-alt);
    color: var(--lk-ink);
}

.key-license-chip-sms[b-hshsusfo8t] {
    background: var(--lk-info-soft);
    color: var(--lk-info);
}

.key-license-chip-bankid[b-hshsusfo8t] {
    background: var(--lk-ok-soft);
    color: var(--lk-ink);
}

/* ── This month's usage (#1210) ─────────────────────────── */

.key-license-usage[b-hshsusfo8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.key-license-usage-line[b-hshsusfo8t] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text);
}

.key-license-usage-unavailable[b-hshsusfo8t],
.key-license-usage-note[b-hshsusfo8t] {
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.key-license-usage-nav[b-hshsusfo8t] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--lk-space-3);
}

.key-license-usage-count[b-hshsusfo8t] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.key-license-usage-total td[b-hshsusfo8t] {
    font-weight: 700;
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.key-license-usage-note[b-hshsusfo8t] {
    margin: var(--lk-space-3) 0 0;
}
/* /Pages/Settings/LogoAiLineComponent.razor.rz.scp.css */
.logo-ai-line[b-c864jq2cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
    margin: 0;
    padding-top: var(--lk-space-2);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.logo-ai-line[b-c864jq2cd5]  .logo-ai-icon {
    color: var(--lk-magenta-ink);
}

.logo-ai-line[data-rendering="rules"][b-c864jq2cd5]  .logo-ai-icon {
    color: var(--lk-text-mut);
}

.logo-ai-text[b-c864jq2cd5] {
    color: var(--lk-ink);
}

.logo-ai-switch[b-c864jq2cd5] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: underline;
    cursor: pointer;
}

/* focus-visible rather than focus, as on Button (ADR 0007). */
.logo-ai-switch:focus-visible[b-c864jq2cd5] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}
/* /Pages/Settings/LogoBackgroundLineComponent.razor.rz.scp.css */
/* The line under the slots (arenden#38), as the AI's line beside it: calm, the switch as a link. */
.logo-background-line[b-j5r1nhvfkg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
    margin: 0;
    padding-top: var(--lk-space-2);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-mut);
}

.logo-background-text[b-j5r1nhvfkg] {
    color: var(--lk-ink);
}

.logo-background-switch[b-j5r1nhvfkg] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: underline;
    cursor: pointer;
}

.logo-background-switch:disabled[b-j5r1nhvfkg] {
    cursor: default;
    opacity: 0.6;
}

/* focus-visible rather than focus, as on Button (ADR 0007). */
.logo-background-switch:focus-visible[b-j5r1nhvfkg] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}
/* /Pages/Settings/LogoFilePickerComponent.razor.rz.scp.css */
/* The native file input inside a label, as on /keys/import, drawn as the outlined button. */
.logo-file-picker[b-jh9f6hivse] {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-ink);
    background: var(--lk-surface);
    cursor: pointer;
    white-space: nowrap;
}

/* Keyboard only (ADR 0007 point 2): a file input does not match :focus-visible after a click. */
.logo-file-picker:has(:focus-visible)[b-jh9f6hivse] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.logo-file-picker-disabled[b-jh9f6hivse] {
    color: var(--lk-text-mut);
    cursor: default;
}

/* The input is InputFile's element, so it carries the component's scope: ::deep under the label.
   It covers the label invisibly, so a click anywhere on it opens the picker. */
.logo-file-picker[b-jh9f6hivse]  .logo-file-picker-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.logo-file-picker-disabled[b-jh9f6hivse]  .logo-file-picker-file {
    cursor: default;
}
/* /Pages/Settings/LykerCardComponent.razor.rz.scp.css */
.lyker-card-head[b-fqu4lpsh10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding: var(--lk-space-4) var(--lk-space-5) 0;
}

.lyker-card-body[b-fqu4lpsh10] {
    display: grid;
    gap: var(--lk-space-4);
    padding: var(--lk-space-4) var(--lk-space-5) var(--lk-space-5);
}

.lyker-card-switch[b-fqu4lpsh10] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding-bottom: var(--lk-space-4);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.lyker-card-switch-text[b-fqu4lpsh10] {
    display: grid;
    flex: 1 1 auto;
    gap: var(--lk-space-1);
}

.lyker-card-title[b-fqu4lpsh10] {
    font-family: var(--lk-font-display);
    font-weight: 700;
    font-size: var(--lk-font-size-card-title);
    color: var(--lk-ink);
}

.lyker-card-note[b-fqu4lpsh10] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lyker-card-sold-via[b-fqu4lpsh10] {
    display: grid;
    gap: var(--lk-space-3);
}

/* "Det här ser organisationen": Lyker Key, i samarbete med, the reseller. */
.lyker-card-preview[b-fqu4lpsh10] {
    display: grid;
    gap: var(--lk-space-2);
    padding: var(--lk-space-3);
    border-radius: var(--lk-radius-sm);
    background: var(--lk-sunken);
}

.lyker-card-preview-label[b-fqu4lpsh10] {
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lk-text-sec);
}

.lyker-card-preview-lockup[b-fqu4lpsh10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

.lyker-card-preview-with[b-fqu4lpsh10] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.lyker-card-preview-logo[b-fqu4lpsh10] {
    max-height: 22px;
    max-width: 120px;
    object-fit: contain;
}

.lyker-card-preview-name[b-fqu4lpsh10] {
    font-weight: 700;
    color: var(--lk-ink);
}

.lyker-card-error[b-fqu4lpsh10] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-err);
}
/* /Pages/Settings/ProposalSourceComponent.razor.rz.scp.css */
/* The quiet line under a proposal (S3): text only, green when confirmed and amber when not. */

.proposal-source[b-4qm8vuie26] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
    margin-top: var(--lk-space-1);
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.proposal-source-verdict[b-4qm8vuie26] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    cursor: help;
}

.proposal-source-verdict:focus-visible[b-4qm8vuie26] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.proposal-source-confirmed .proposal-source-verdict[b-4qm8vuie26] {
    color: var(--lk-ok);
}

.proposal-source-unconfirmed .proposal-source-verdict[b-4qm8vuie26] {
    color: var(--lk-warn);
}

.proposal-source-part[b-4qm8vuie26] {
    overflow-wrap: anywhere;
}

/* The details: on hover over the line, or opened by a tap on the verdict. */
.proposal-source-details[b-4qm8vuie26] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: min(20rem, 90vw);
    margin-top: var(--lk-space-1);
    padding: var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-md);
    color: var(--lk-text);
}

.proposal-source:hover .proposal-source-details[b-4qm8vuie26],
.proposal-source-details[data-open][b-4qm8vuie26] {
    display: block;
}

.proposal-source-details-title[b-4qm8vuie26] {
    margin: 0 0 var(--lk-space-1);
    font-weight: 700;
    color: var(--lk-ink);
}

.proposal-source-details-text[b-4qm8vuie26],
.proposal-source-details-hint[b-4qm8vuie26] {
    margin: 0;
    line-height: 1.45;
}

.proposal-source-details-hint[b-4qm8vuie26] {
    margin-top: var(--lk-space-2);
    color: var(--lk-text-mut);
}
/* /Pages/Settings/ResellerPreviewComponent.razor.rz.scp.css */
/* Three small tiles in a row that wraps. Lyker Key and the reseller about equally tall. */

.reseller-preview[b-7spizip7ar] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-4);
}

.reseller-preview-item[b-7spizip7ar] {
    display: grid;
    gap: var(--lk-space-2);
    margin: 0;
}

.reseller-preview-tile[b-7spizip7ar] {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: var(--lk-space-3);
    min-height: 5rem;
    padding: var(--lk-space-4) var(--lk-space-5);
    border-radius: var(--lk-radius-card);
    border: var(--lk-border-hairline) solid var(--lk-line);
}

.reseller-preview-dark[b-7spizip7ar] {
    background: var(--lk-rail);
    border-color: var(--lk-rail);
}

.reseller-preview-light[b-7spizip7ar] {
    background: var(--lk-canvas);
}

.reseller-preview-receipt[b-7spizip7ar] {
    background: var(--lk-surface);
}

/* The Lyker Key word is the Logo component's, ink by default: light on the navy tile, as the rail
   draws it. ::deep because the word is the component's own markup. */
.reseller-preview-dark[b-7spizip7ar]  .lk-logo-word {
    color: var(--lk-rail-text);
}

/* A fixed height, as tall as the Lyker Key mark beside it, and never shrunk by the row: the
   tile grows to hold both instead of clipping the reseller's. */
.reseller-preview-image[b-7spizip7ar] {
    display: block;
    flex: none;
    height: 1.5rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
}

/* The thin line between the two marks. */
.reseller-preview-rule[b-7spizip7ar] {
    align-self: stretch;
    width: var(--lk-border-hairline);
    background: var(--lk-line-strong);
}

.reseller-preview-rule-dark[b-7spizip7ar] {
    background: var(--lk-rail-line);
}

.reseller-preview-with[b-7spizip7ar] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
    white-space: nowrap;
}

.reseller-preview-caption[b-7spizip7ar] {
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}
/* /Pages/Settings/SettingsCategoryPage.razor.rz.scp.css */
/* Two columns: the tree on the left at a fixed width, the selected category on the right. The
   Prototype uses grid-template-columns: 320px 1fr; the same shape, with the width in a token-sized
   unit so it tracks the type scale rather than a pixel guess. */

.categories-layout[b-7t5osxkapq] {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

/* One column below this: side by side, the detail column gets too narrow for a labelled field
   before the tree gets too narrow for a nested name. */
@media (max-width: 62rem) {
    .categories-layout[b-7t5osxkapq] {
        grid-template-columns: 1fr;
    }
}

/* The loading region's gap above it is PageStateComponent's LoadingSpaced (#784). The rule that
   stood here reached an element the page no longer owns. */

/* ── The tree ───────────────────────────────────────────── */

.categories-tree-list[b-7t5osxkapq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A button, not a div with an onclick: the rows are the navigation of this screen and the
   keyboard has to reach them. Full width so the whole row is the target.

   The Prototype's row (Settings.razor, _tab == 3): edge to edge on a rule of its own, 12px by 18px
   with 22px per level of depth (rounded to the scale, #528), and a 3px edge on the left that is
   transparent until the row is chosen, so choosing one does not move its text. */
.categories-tree-row[b-7t5osxkapq] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    width: 100%;
    padding: var(--lk-space-3) var(--lk-space-4);
    /* The depth arrives as a custom property from the markup, which knows the nesting; the size of
       one step is design and stays here. */
    padding-left: calc(var(--lk-space-4) + var(--category-depth, 0) * var(--lk-space-5));
    border: none;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
    border-left: calc(var(--lk-border-width) * 2) solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-text);
    text-align: left;
    cursor: pointer;
}

/* The card head already draws a rule under itself. */
.categories-tree-list > li:first-child .categories-tree-row[b-7t5osxkapq] {
    border-top: none;
}

.categories-tree-row:hover[b-7t5osxkapq] {
    background: var(--lk-ghost-hover);
}

/* The same ring the buttons use, so a keyboard user sees one focus style on the screen. Inset,
   because the row reaches the card's edges and an outer ring would be clipped by them. */
.categories-tree-row:focus-visible[b-7t5osxkapq] {
    outline: none;
    box-shadow: inset 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* The icon in the secondary ink, as the Prototype has it, and magenta with the text when chosen. */
.categories-tree-row[b-7t5osxkapq]  svg {
    color: var(--lk-text-sec);
}

/* Over the hover too: the row just clicked is still under the pointer. */
.categories-tree-row-selected[b-7t5osxkapq],
.categories-tree-row-selected:hover[b-7t5osxkapq] {
    border-left-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
}

.categories-tree-row-selected[b-7t5osxkapq]  svg {
    color: var(--lk-magenta-ink);
}

.categories-tree-name[b-7t5osxkapq] {
    flex: 1;
    overflow-wrap: anywhere;
}

.categories-tree-footer[b-7t5osxkapq] {
    padding: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

/* ── The selected category ──────────────────────────────── */

/* The Prototype's context band over the right-hand column: magenta on its soft ground, the key
   icon and one line of semibold text. */
.categories-context[b-7t5osxkapq] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-magenta);
    border-radius: var(--lk-radius-control);
    background: var(--lk-magenta-soft);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-magenta-ink);
}

.categories-context[b-7t5osxkapq]  svg {
    flex: 0 0 auto;
}

.categories-layout[b-7t5osxkapq]  .categories-detail {
    display: grid;
    gap: var(--lk-space-4);
}

/* The name and its two buttons on one row, the buttons on the field's baseline. */
.categories-detail-row[b-7t5osxkapq] {
    display: flex;
    align-items: flex-end;
    gap: var(--lk-space-3);
    flex-wrap: wrap;
}

.categories-detail-row[b-7t5osxkapq]  .categories-detail-name {
    flex: 1;
    min-width: 12rem;
}

.categories-detail-note[b-7t5osxkapq] {
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

/* The right-hand column is two cards now — the category and its fields — so it needs a stack of
   its own rather than being a single grid cell. */
.categories-detail-column[b-7t5osxkapq] {
    display: grid;
    gap: var(--lk-space-4);
    align-content: start;
    /* Without this the column refuses to shrink below the widest field label, and the tree gets
       squeezed instead of the card wrapping. */
    min-width: 0;
}

/* ── The category's metadata fields ─────────────────────── */

.categories-layout[b-7t5osxkapq]  .categories-meta {
    display: grid;
}

.categories-meta-empty[b-7t5osxkapq] {
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

/* Inside the unpadded card: the rows run edge to edge on their rules, 20px in, as the Prototype's
   `.lrow` (13px 20px). The list in the new-field dialog keeps its own inset. */
.categories-meta-empty.categories-meta-edge[b-7t5osxkapq] {
    padding: var(--lk-space-4) var(--lk-space-5);
}

.categories-meta-edge .categories-meta-row[b-7t5osxkapq] {
    padding: var(--lk-space-3) var(--lk-space-5);
}

.categories-meta-list[b-7t5osxkapq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.categories-meta-row[b-7t5osxkapq] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

/* The first row sits under the heading, which is separation enough. */
.categories-meta-row:first-child[b-7t5osxkapq] {
    border-top: none;
}

.categories-meta-name[b-7t5osxkapq] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--lk-text);
    overflow-wrap: anywhere;
}

/* ── The new-field dialog ───────────────────────────────── */

.categories-field[b-7t5osxkapq] {
    display: grid;
    gap: var(--lk-space-4);
}

.categories-field-existing[b-7t5osxkapq] {
    display: grid;
    gap: var(--lk-space-2);
}

.categories-field-subheading[b-7t5osxkapq] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    color: var(--lk-text-mut);
}

/* "or create a new one", with a rule either side. The rules are drawn on the pseudo-elements so
   the text stays one element and a screen reader reads it as one phrase. */
.categories-field-divider[b-7t5osxkapq] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-label);
}

.categories-field-divider[b-7t5osxkapq]::before,
.categories-field-divider[b-7t5osxkapq]::after {
    content: "";
    flex: 1;
    height: var(--lk-border-hairline);
    background: var(--lk-line);
}

.categories-field-note[b-7t5osxkapq] {
    margin: 0;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

.categories-create[b-7t5osxkapq],
.categories-delete-move[b-7t5osxkapq] {
    display: grid;
    gap: var(--lk-space-4);
}

.categories-confirm-body[b-7t5osxkapq] {
    margin: 0;
    color: var(--lk-text-mut);
    line-height: 1.5;
}
/* /Pages/Settings/SettingsGroupsPage.razor.rz.scp.css */
/* One card of rows to its edges, as the key categories page draws its field list (#1153, groups since #1170). */

.settings-groups-list[b-lkgd33wroo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.settings-groups-row[b-lkgd33wroo] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-5);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.settings-groups-name[b-lkgd33wroo] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--lk-text);
    overflow-wrap: anywhere;
}

.settings-groups-confirm-body[b-lkgd33wroo] {
    margin: 0;
    line-height: 1.5;
}

/* The key access card below the list: page-owned wrapper, so nothing here styles the component. */
.settings-groups-access[b-lkgd33wroo] {
    margin-top: var(--lk-space-4);
}

.settings-groups-access-error[b-lkgd33wroo] {
    margin: 0;
    padding: var(--lk-space-3) var(--lk-space-4);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.settings-groups-access-loading[b-lkgd33wroo] {
    padding: var(--lk-space-4);
}
/* /Pages/Settings/SettingsLendingPage.razor.rz.scp.css */
/* The policy itself is LendingPolicyComponent and styles itself (#826). What is left here is the
   page's own loading state. */

/* ── Loading ────────────────────────────────────────────── */

.lending-skeleton-row[b-c3t9r6eqtl] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}
/* /Pages/Settings/SettingsMainPage.razor.rz.scp.css */
/* Two columns (#1228, Niklas): the company profile — language and region included — on the
   left, the Licence card as a column of its own on the right. The Prototype's 1.3fr / 1fr split:
   the profile has two columns of fields and wants the room; the licence card stacks its sections. */
.settings-grid[b-zi5kkharxr] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--lk-space-4);
    align-items: start;
}

/* The street address takes the full width of the field group's two columns — a postal address is
   longer than a postcode, and the Prototype gives it the same span. */
.settings-field-wide[b-zi5kkharxr] {
    grid-column: 1 / -1;
}

@media (max-width: 60rem) {
    .settings-grid[b-zi5kkharxr] {
        grid-template-columns: 1fr;
    }
}

/* The Licence card's column; the card itself has no margin, where it sits is the page's business. */
/* The right column: Lyker's card above the licence (#1341, S2), apart as the cards on the left are. */
.settings-license[b-zi5kkharxr] {
    display: grid;
    gap: var(--lk-space-4);
    align-content: start;
    min-width: 0;
}

/* ── "Hämta" and its proposals (#1341, aterforsaljare-design/v2 S1–S3) ── */

/* The quiet line under the heading in a customer's view: the logo is fetched, never uploaded. */
.settings-fetch-line[b-zi5kkharxr] {
    margin: calc(-1 * var(--lk-space-2)) 0 0;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

.settings-proposal-cell[b-zi5kkharxr] {
    min-width: 0;
}

/* A proposed value: dashed in the accent on a soft wash. That, and the "Förslag" mark, say "proposal";
   the field is a component of its own, so the page reaches into it with ::deep. */
.settings-proposed[b-zi5kkharxr]  .lk-field-frame {
    border: var(--lk-border-width) dashed var(--lk-magenta);
    background: var(--lk-magenta-soft);
}

.settings-proposal-mark[b-zi5kkharxr] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-1);
}

.settings-proposal-discard[b-zi5kkharxr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-sm);
    height: var(--lk-icon-button-size-sm);
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-control);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
}

.settings-proposal-discard:hover[b-zi5kkharxr] {
    color: var(--lk-ink);
    background: var(--lk-sunken);
}

.settings-proposal-discard:focus-visible[b-zi5kkharxr] {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

/* ── The logo: three slots under the fields ─────────────── */

.settings-logo[b-zi5kkharxr] {
    margin-top: var(--lk-space-3);
    padding-top: var(--lk-space-4);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.settings-logo-head[b-zi5kkharxr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lk-space-2);
    margin-bottom: var(--lk-space-2);
}

.settings-logo-title[b-zi5kkharxr] {
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    color: var(--lk-ink);
}

.settings-logo-sub[b-zi5kkharxr] {
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* The whole series' picker at the head's end, over the slots (#1408). The picker is its own
   component, so the class lands in its scope: ::deep under the section. */
.settings-logo[b-zi5kkharxr]  .settings-logo-series {
    margin-left: auto;
}

.settings-logo-error[b-zi5kkharxr] {
    margin: 0 0 var(--lk-space-2);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.settings-logo-dialog-text[b-zi5kkharxr] {
    margin: 0;
}
/* /Pages/Settings/SettingsRemindersPage.razor.rz.scp.css */
/* The screen is one shared card, so there is almost nothing to style here — everything inside the
   card belongs to RemindersComponent and is styled there. What is left is the loading state, which
   the card cannot draw because it is not rendered yet. */

/* ── Loading ────────────────────────────────────────────── */

.reminders-skeleton-row[b-d6rc1tn803] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}
/* /Pages/Settings/SettingsResellerPage.razor.rz.scp.css */
/* The tab Återförsäljare (#1341, S4): the line, commission beside customers, then what customers see. */

.settings-reseller[b-mrgpytzb90] {
    display: grid;
    gap: var(--lk-space-4);
}

.settings-reseller-intro[b-mrgpytzb90] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin: 0;
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.settings-reseller-grid[b-mrgpytzb90] {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    gap: var(--lk-space-4);
    align-items: start;
}

@media (max-width: 64rem) {
    .settings-reseller-grid[b-mrgpytzb90] {
        grid-template-columns: 1fr;
    }
}

.settings-reseller-body[b-mrgpytzb90] {
    display: grid;
    gap: var(--lk-space-4);
    padding: var(--lk-space-5);
}

/* A table cell stays one; the number goes on its own line under the name. */
.settings-reseller-customer[b-mrgpytzb90] {
    font-weight: 600;
    color: var(--lk-text);
}

.settings-reseller-customer .settings-reseller-muted[b-mrgpytzb90] {
    display: block;
}

.settings-reseller-link[b-mrgpytzb90] {
    color: inherit;
    text-decoration: none;
}

.settings-reseller-link:hover[b-mrgpytzb90] {
    text-decoration: underline;
}

.settings-reseller-muted[b-mrgpytzb90] {
    margin: 0;
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
    color: var(--lk-text-mut);
}

.settings-reseller-show-all[b-mrgpytzb90] {
    justify-self: start;
    margin: var(--lk-space-3) var(--lk-space-5) var(--lk-space-4);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--lk-magenta);
    cursor: pointer;
}

.settings-reseller-show-all:focus-visible[b-mrgpytzb90] {
    border-radius: var(--lk-radius-sm);
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
}

.settings-reseller-failure[b-mrgpytzb90] {
    margin: 0;
    padding: var(--lk-space-3);
    background: var(--lk-err-soft);
    border-radius: var(--lk-radius-sm);
    font-size: var(--lk-font-size-label);
    color: var(--lk-err);
}

.settings-reseller-skeleton-row[b-mrgpytzb90] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}
/* /Pages/Shop/ShopAdminCategoryPage.razor.rz.scp.css */
/*
    Scoped to the page. No colour or spacing literals — everything comes from the tokens in
    PortalTheme, which is what keeps light and dark honest without a second set of rules.
*/

/* The skeleton rows' gap is the loading region's own TightStack layout since #783. The region is
   PageStateComponent's element, which a rule here no longer reaches. */

.shop-categories-actions[b-ojs4lxmgom] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--lk-space-3);
}

.shop-categories-list[b-ojs4lxmgom] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-categories-row[b-ojs4lxmgom] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-categories-row:last-child[b-ojs4lxmgom] {
    border-bottom: none;
}

/*
    The row opener fills the space so the whole row is the target, not just the words. It is a
    button rather than a div with an onclick — the Prototype's shape — so that the keyboard
    reaches the rows in order and a screen reader announces them as actions.
*/
.shop-categories-open[b-ojs4lxmgom] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.shop-categories-open-static[b-ojs4lxmgom] {
    cursor: default;
}

.shop-categories-open:hover .shop-categories-name[b-ojs4lxmgom] {
    color: var(--lk-magenta);
}

.shop-categories-open:focus-visible[b-ojs4lxmgom] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-sm);
}

.shop-categories-tone[b-ojs4lxmgom] {
    width: 10px;
    height: 10px;
    border-radius: var(--lk-radius-pill);
    flex: 0 0 auto;
}

/*
    The four tones the shop knows. A class each rather than an interpolated inline style: the
    set is fixed at compile time, and Tone arrives from the API as an unvalidated string.
*/
.tone-info[b-ojs4lxmgom] {
    background: var(--lk-info);
}

.tone-accent[b-ojs4lxmgom] {
    background: var(--lk-magenta);
}

.tone-navy[b-ojs4lxmgom] {
    background: var(--lk-navy);
}

.tone-ok[b-ojs4lxmgom] {
    background: var(--lk-ok);
}

.shop-categories-name[b-ojs4lxmgom] {
    color: var(--lk-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-categories-count[b-ojs4lxmgom],
.shop-categories-locked[b-ojs4lxmgom] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    flex: 0 0 auto;
}

.shop-categories-locked[b-ojs4lxmgom] {
    max-width: 22ch;
    text-align: right;
    line-height: 1.4;
}

.shop-categories-form[b-ojs4lxmgom] {
    display: grid;
    gap: var(--lk-space-4);
}

.shop-categories-tones-label[b-ojs4lxmgom] {
    display: block;
    margin-bottom: var(--lk-space-2);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-categories-tone-options[b-ojs4lxmgom] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

.shop-categories-tone-option[b-ojs4lxmgom] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface);
    color: var(--lk-text);
    cursor: pointer;
    font: inherit;
}

.shop-categories-tone-option:hover[b-ojs4lxmgom] {
    border-color: var(--lk-line-strong);
}

.shop-categories-tone-option:focus-visible[b-ojs4lxmgom] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-categories-tone-option.is-chosen[b-ojs4lxmgom] {
    border-color: var(--lk-navy);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
}

/*
    The chosen swatch would vanish into the navy fill, so it turns into the contrast colour and
    keeps the chip readable as "this one" rather than as a colour sample.
*/
.shop-categories-tone-option.is-chosen .shop-categories-tone[b-ojs4lxmgom] {
    background: var(--lk-navy-contrast);
}

@media (max-width: 640px) {
    .shop-categories-row[b-ojs4lxmgom] {
        flex-wrap: wrap;
    }

    .shop-categories-locked[b-ojs4lxmgom] {
        max-width: none;
        text-align: left;
    }
}
/* /Pages/Shop/ShopAdminOrderPage.razor.rz.scp.css */
/*
    Scoped to the page. No colour or spacing literals — everything comes from the tokens in
    PortalTheme, as the other three shop administration stylesheets do.

    The row is a grid so that the header and every row share one set of columns; the Prototype
    hand-widths each span, which drifts as soon as one row's content differs.

    EVERY COLUMN IS minmax(0, …) AND NOT A BARE FRACTION. A bare 1fr means minmax(auto, 1fr), and
    an auto minimum refuses to shrink below its content — a long customer name or a wide status
    selector then pushes the table past the card and the page scrolls sideways. The product
    dialog shipped with that fault and it was found in the browser, not by a test; the same rule
    is written down there.
*/

/* The skeleton rows' gap is the loading region's own TightStack layout since #783. The region is
   PageStateComponent's element, which a rule here no longer reaches. */

.shop-orders-filter[b-jd1ds99onq] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--lk-space-3);
}

/* ::deep because .lk-select is the component's own root — the same rule without it matches
   nothing and reports nothing. */
.shop-orders-filter[b-jd1ds99onq]  .lk-select {
    min-width: 15rem;
}

/*
    The status cell is `auto` so the selector keeps its natural width, and the four text columns
    share what is left.
*/
.shop-orders-head[b-jd1ds99onq],
.shop-orders-line[b-jd1ds99onq] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lk-space-3);
}

.shop-orders-head[b-jd1ds99onq] {
    padding: 0 0 var(--lk-space-2);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-orders-head-total[b-jd1ds99onq] {
    text-align: right;
}

.shop-orders-list[b-jd1ds99onq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-orders-row[b-jd1ds99onq] {
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-orders-row:last-child[b-jd1ds99onq] {
    border-bottom: none;
}

/*
    The opener spans the five text columns of the grid it sits in, so the whole row up to the
    status is one target. A button rather than a div with an onclick — the Prototype's shape —
    so the keyboard reaches the rows in order.
*/
.shop-orders-open[b-jd1ds99onq] {
    display: grid;
    grid-column: 1 / 6;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--lk-space-3);
    width: 100%;
    min-width: 0;
    padding: var(--lk-space-3) 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.shop-orders-open:focus-visible[b-jd1ds99onq] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    /* The portal's focus-ring radius (app.css, a:focus-visible). The row is wide and short, and a
       tile's percentage would round it into a pill (#563). */
    border-radius: var(--lk-radius-sm);
}

.shop-orders-number[b-jd1ds99onq] {
    color: var(--lk-text);
    font-weight: 600;
}

.shop-orders-date[b-jd1ds99onq],
.shop-orders-customer[b-jd1ds99onq],
.shop-orders-by[b-jd1ds99onq] {
    overflow: hidden;
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-orders-total[b-jd1ds99onq] {
    color: var(--lk-text);
    font-weight: 700;
    text-align: right;
}

.shop-orders-status[b-jd1ds99onq] {
    display: flex;
    justify-content: flex-end;
    padding: var(--lk-space-3) 0;
}

/* ── The expanded row ────────────────────────────────────── */

.shop-orders-detail[b-jd1ds99onq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-5);
    padding: 0 0 var(--lk-space-4) var(--lk-space-4);
}

.shop-orders-lines[b-jd1ds99onq] {
    flex: 1 1 17rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.shop-orders-item[b-jd1ds99onq] {
    display: flex;
    align-items: baseline;
    gap: var(--lk-space-2);
    padding: var(--lk-space-1) 0;
    font-size: var(--lk-font-size-label);
}

/* An option belongs to the product above it, and the indent is what says so. */
.shop-orders-item-option[b-jd1ds99onq] {
    padding-left: var(--lk-space-5);
    color: var(--lk-text-sec);
}

.shop-orders-qty[b-jd1ds99onq] {
    color: var(--lk-text-sec);
    font-variant-numeric: tabular-nums;
}

.shop-orders-name[b-jd1ds99onq] {
    flex: 1;
    min-width: 0;
    color: var(--lk-text);
}

.shop-orders-price[b-jd1ds99onq] {
    color: var(--lk-text);
    font-weight: 600;
}

/*
    A definition list: every row here is a label and its value, which is what dl means. The grid
    keeps the values aligned without the labels needing a fixed width.
*/
.shop-orders-facts[b-jd1ds99onq] {
    display: grid;
    flex: 0 1 20rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--lk-space-2) var(--lk-space-3);
    margin: 0;
    font-size: var(--lk-font-size-label);
}

.shop-orders-facts dt[b-jd1ds99onq] {
    color: var(--lk-text);
    font-weight: 600;
}

.shop-orders-facts dd[b-jd1ds99onq] {
    margin: 0;
    color: var(--lk-text-sec);
}

/*
    Narrow: the grid becomes one column per row, so each cell stacks. The head is meaningless
    then — it labels columns that no longer exist — and it is aria-hidden anyway.
*/
@media (max-width: 900px) {
    .shop-orders-head[b-jd1ds99onq] {
        display: none;
    }

    .shop-orders-line[b-jd1ds99onq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-orders-open[b-jd1ds99onq] {
        grid-column: 1;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--lk-space-1);
        padding-bottom: var(--lk-space-2);
    }

    .shop-orders-total[b-jd1ds99onq] {
        text-align: left;
    }

    .shop-orders-status[b-jd1ds99onq] {
        justify-content: flex-start;
        padding-top: 0;
    }

    .shop-orders-detail[b-jd1ds99onq] {
        padding-left: 0;
    }
}
/* /Pages/Shop/ShopAdminProductDetailPage.razor.rz.scp.css */
/* The dialog's form on a page: one card, as /keyboxes/new and /kiosks/new have it, and as wide
   as the dialog was (Dialog's wide size), so the two-column rows and the pack rows keep the room
   they were laid out for. */

.shop-product-detail-body[b-tkccgvuv05] {
    max-width: 48rem;
}

.shop-product-detail-skeleton-field[b-tkccgvuv05] {
    margin-top: var(--lk-space-4);
}

.shop-product-detail-skeleton-gap[b-tkccgvuv05] {
    margin-top: var(--lk-space-2);
}
/* /Pages/Shop/ShopAdminProductFormComponent.razor.rz.scp.css */
/*
    Scoped to the form. No colour or spacing literals — everything comes from the tokens in
    PortalTheme, as the category page's stylesheet does.

    The child components (TextField, Select, Button, Checkbox) style themselves; nothing here
    reaches into them, so no ::deep is needed. The rules lay the form out and style the two
    things that are this file's own markup: the price-type radio group and the image row.

    EVERY GRID COLUMN BELOW IS minmax(0, …) AND NOT A BARE FRACTION. A bare 1fr means
    minmax(auto, 1fr), and an auto minimum refuses to shrink below the column's content — so a
    long select option or a field label pushed the form wider than the dialog and the whole
    thing scrolled sideways with the right-hand column cut off. Found in the browser; no test
    would have caught it, because the markup and the state were correct throughout.
*/

.shop-product-form[b-9m96jb4pvc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lk-space-4);
}

.shop-product-two[b-9m96jb4pvc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--lk-space-4);
}

.shop-product-label[b-9m96jb4pvc] {
    display: block;
    margin-bottom: var(--lk-space-2);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

/* The price type — the same chip shape the category tones use. */
.shop-product-type-options[b-9m96jb4pvc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

.shop-product-type-option[b-9m96jb4pvc] {
    display: inline-flex;
    align-items: center;
    padding: var(--lk-space-2) var(--lk-space-3);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-surface);
    color: var(--lk-text);
    cursor: pointer;
    font: inherit;
}

.shop-product-type-option:hover[b-9m96jb4pvc] {
    border-color: var(--lk-line-strong);
}

.shop-product-type-option:focus-visible[b-9m96jb4pvc] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-product-type-option.is-chosen[b-9m96jb4pvc] {
    border-color: var(--lk-navy);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
}

.shop-product-active[b-9m96jb4pvc] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.shop-product-active-text[b-9m96jb4pvc] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

/* Packs and options: a heading with its add button, then one row per line. */
.shop-product-lines[b-9m96jb4pvc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-product-lines-head[b-9m96jb4pvc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
}

.shop-product-lines-head .shop-product-label[b-9m96jb4pvc] {
    margin-bottom: 0;
}

.shop-product-line[b-9m96jb4pvc] {
    display: grid;
    align-items: end;
    gap: var(--lk-space-3);
}

.shop-product-pack[b-9m96jb4pvc] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.shop-product-option[b-9m96jb4pvc] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
}

/* A contract period (#1214): label, months, monthly price, installation fee, remove. */
.shop-product-period[b-9m96jb4pvc] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* The categories (#1215): a fieldset of checkboxes, two or three to a row. */
.shop-product-categories[b-9m96jb4pvc] {
    margin: 0 0 var(--lk-space-4);
    padding: 0;
    border: 0;
}

.shop-product-categories-list[b-9m96jb4pvc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2) var(--lk-space-4);
    margin: var(--lk-space-2) 0;
}

/* The gap between box and words belongs to Checkbox since #463; what is left here is the row's
   own alignment. The padding matches the space a TextField's label takes above its input, so the
   box sits on the same line as the fields beside it. */
.shop-product-option-required[b-9m96jb4pvc] {
    display: inline-flex;
    align-items: center;
    padding-bottom: var(--lk-space-2);
    white-space: nowrap;
}

/* This row is an annotation beside two labelled fields, not a field of its own, so it keeps the
   smaller secondary type it has always had rather than the component's default. ::deep because
   the element is Checkbox's markup — the same rule without it matches nothing and reports
   nothing. Same shape as the two customer-facing option lists. */
.shop-product-option-required[b-9m96jb4pvc]  .lk-checkbox-text {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

.shop-product-line[b-9m96jb4pvc]  .shop-product-line-remove {
    margin-bottom: var(--lk-space-1);
}

/* Images. */
.shop-product-images[b-9m96jb4pvc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-product-images .shop-product-label[b-9m96jb4pvc] {
    margin-bottom: 0;
}

.shop-product-thumbs[b-9m96jb4pvc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-3);
}

.shop-product-thumb[b-9m96jb4pvc] {
    position: relative;
    display: inline-block;
}

.shop-product-thumb img[b-9m96jb4pvc] {
    display: block;
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-tile);
}

.shop-product-thumb[b-9m96jb4pvc]  .shop-product-thumb-delete {
    position: absolute;
    top: calc(-1 * var(--lk-space-2));
    right: calc(-1 * var(--lk-space-2));
    background: var(--lk-surface);
    border-radius: var(--lk-radius-pill);
}

.shop-product-upload[b-9m96jb4pvc] {
    display: grid;
    gap: var(--lk-space-2);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-product-upload[b-9m96jb4pvc]  .shop-product-file {
    color: var(--lk-text);
    font: inherit;
    font-weight: 400;
}

.shop-product-hint[b-9m96jb4pvc] {
    margin: 0;
    padding: var(--lk-space-3);
    /* 12px, the Prototype's hint box (ShopAdminProductModal.razor). A text box, not a tile (#563). */
    border-radius: var(--lk-radius-control);
    background: var(--lk-info-soft);
    color: var(--lk-info);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

/* The dialog's footer: Cancel, then Save, at the right. */
.shop-product-actions[b-9m96jb4pvc] {
    display: flex;
    justify-content: flex-end;
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    border-top: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-product-image-error[b-9m96jb4pvc] {
    margin: 0;
    color: var(--lk-err);
    font-size: var(--lk-font-size-label);
}

@media (max-width: 640px) {
    .shop-product-two[b-9m96jb4pvc],
    .shop-product-pack[b-9m96jb4pvc],
    .shop-product-option[b-9m96jb4pvc],
    .shop-product-period[b-9m96jb4pvc] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Shop/ShopAdminProductPage.razor.rz.scp.css */
/*
    Scoped to the page. No colour or spacing literals — everything comes from the tokens in
    PortalTheme, as the category page's stylesheet does.

    The row is a grid so that the header and every row share one set of columns; the Prototype
    hand-widths each span, which drifts as soon as one row's content differs.
*/

/* The skeleton rows' gap is the loading region's own TightStack layout since #783. The region is
   PageStateComponent's element, which a rule here no longer reaches. */

.shop-products-actions[b-nod8aoqtxe] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--lk-space-3);
}

.shop-products-head[b-nod8aoqtxe],
.shop-products-row[b-nod8aoqtxe] {
    display: grid;
    /*
        Fixed widths for the price, the status and the delete button (#1294, Niklas 2026-10-16:
        "kategorierna kan väl ligga lite finare"). The header and every row are separate grids,
        and an auto column is sized from its own content — "Pris" is narrower than "1 190 kr/mån",
        "Status" narrower than the badge, the header's delete cell is empty — so the two fr
        columns before them came out at a different width in the header and in each row, and
        "Kategori" never sat above the badges. Widths the widest content fits: the monthly price,
        the status badge with its dot, the small ghost button.
    */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 7.5rem 6rem 2.5rem;
    align-items: center;
    gap: var(--lk-space-3);
}

/* The categories, left under their header, wrapping with a small gap when there are several. */
.shop-products-category[b-nod8aoqtxe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-1);
    min-width: 0;
}

.shop-products-head[b-nod8aoqtxe] {
    padding: 0 0 var(--lk-space-2);
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-products-list[b-nod8aoqtxe] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-products-row[b-nod8aoqtxe] {
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-hairline) solid var(--lk-line);
}

.shop-products-row:last-child[b-nod8aoqtxe] {
    border-bottom: none;
}

/*
    The row opener fills its column so the whole cell is the target. A link rather than a div
    with an onclick — the Prototype's shape — so the keyboard reaches the rows in order. It was a
    button until #764 gave the product an address; the underline is what a link adds.
*/
.shop-products-open[b-nod8aoqtxe] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.shop-products-open:hover .shop-products-name[b-nod8aoqtxe] {
    color: var(--lk-magenta);
}

.shop-products-open:focus-visible[b-nod8aoqtxe] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
    border-radius: var(--lk-radius-sm);
}

.shop-products-thumb[b-nod8aoqtxe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-surface-alt);
}

.shop-products-thumb img[b-nod8aoqtxe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The glyph draws itself at 32px; the thumb is a box around it, not a scale. */
.shop-products-thumb[b-nod8aoqtxe]  .shop-glyph {
    display: inline-flex;
    color: var(--lk-text-sec);
}

.shop-products-text[b-nod8aoqtxe] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shop-products-name[b-nod8aoqtxe] {
    color: var(--lk-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-products-description[b-nod8aoqtxe] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-products-price[b-nod8aoqtxe] {
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.shop-products-head-price[b-nod8aoqtxe] {
    text-align: right;
}

@media (max-width: 720px) {
    .shop-products-head[b-nod8aoqtxe] {
        display: none;
    }

    .shop-products-row[b-nod8aoqtxe] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-products-open[b-nod8aoqtxe] {
        grid-column: 1 / -1;
    }

    .shop-products-price[b-nod8aoqtxe] {
        text-align: left;
    }
}
/* /Pages/Shop/ShopAdminTermsPage.razor.rz.scp.css */
/*
    Scoped to the page. No colour or spacing literals — everything comes from the tokens in
    PortalTheme, which is what keeps light and dark honest without a second set of rules.
*/

/* The skeleton rows' gap is the loading region's own TightStack layout since #783. The region is
   PageStateComponent's element, which a rule here no longer reaches. */

.shop-terms-head[b-8w5oef8ock] {
    display: flex;
    align-items: center;
    margin-bottom: var(--lk-space-3);
}

.shop-terms-none[b-8w5oef8ock] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-label);
}

.shop-terms-actions[b-8w5oef8ock] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-4);
}

/* Takes the room, so the button stays at the right edge and the confirmation sits beside it
   rather than pushing it around when it appears. */
.shop-terms-hint[b-8w5oef8ock] {
    flex: 1;
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
}


@media (max-width: 640px) {
    .shop-terms-actions[b-8w5oef8ock] {
        flex-wrap: wrap;
    }

    .shop-terms-hint[b-8w5oef8ock] {
        flex: 1 0 100%;
    }
}
/* /Pages/Shop/ShopCartDrawer.razor.rz.scp.css */
/* ── Docked beside the catalogue (#1213): a plain column, sticky, scrolling on its own ─── */

.shop-cart-dock[b-b7nsq3n35e] {
    position: sticky;
    top: var(--lk-space-4);
    box-sizing: border-box;
    /* A column, so the panel inside takes the dock's height and scrolls in it (lyker/arenden#29): the
       panel's height: 100% is the drawer's, and against a dock with only a max-height it resolved to
       the content's own height, which the dock then clipped — a full cart could not be scrolled. */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--lk-space-8));
    overflow: hidden;
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-sm);
}

/* In the dock the panel fills what the dock allows and scrolls there; min-height: 0 lets a flex item
   shrink below its content (#1522). */
.shop-cart-dock .shop-cart-drawer-panel[b-b7nsq3n35e] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* ── The panel: a modal <dialog> pinned to the right edge ─────────────────────────── */

.shop-cart-drawer[b-b7nsq3n35e] {
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 0 auto;
    width: 27rem;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--lk-surface);
    box-shadow: var(--lk-shadow-lg);
    overflow: hidden;
}

/* Slides in from the right when opened; a plain appearance for anyone who asked for less motion. */
.shop-cart-drawer[open][b-b7nsq3n35e] {
    animation: shop-cart-drawer-in-b-b7nsq3n35e 220ms ease-out;
}

@keyframes shop-cart-drawer-in-b-b7nsq3n35e {
    from { transform: translateX(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-cart-drawer[open][b-b7nsq3n35e] {
        animation: none;
    }
}

/* The same scrim as Dialog and the navigation drawer. */
.shop-cart-drawer[b-b7nsq3n35e]::backdrop {
    background: var(--lk-scrim);
}

/* On a narrow screen the panel is the screen. */
@media (max-width: 40rem) {
    .shop-cart-drawer[b-b7nsq3n35e] {
        width: 100vw;
    }
}

.shop-cart-drawer-panel[b-b7nsq3n35e] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--lk-space-5) var(--lk-space-5) var(--lk-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shop-cart-drawer-head[b-b7nsq3n35e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    margin-bottom: var(--lk-space-4);
}

.shop-cart-drawer-title[b-b7nsq3n35e] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-card-title);
    font-weight: 700;
}

.shop-cart-drawer-count[b-b7nsq3n35e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--lk-space-2);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
    font-size: var(--lk-font-size-caption);
    font-weight: 700;
}

.shop-cart-drawer-empty[b-b7nsq3n35e] {
    padding: var(--lk-space-6) 0;
}

/* ── The lines ───────────────────────────────────────────────────────────────────── */

.shop-cart-drawer-lines[b-b7nsq3n35e] {
    flex: 1 0 auto;
}

.shop-cart-drawer-line[b-b7nsq3n35e] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.shop-cart-drawer-thumb[b-b7nsq3n35e] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
}

.shop-cart-drawer-thumb img[b-b7nsq3n35e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-cart-drawer-what[b-b7nsq3n35e] {
    display: grid;
    flex: 1 1 auto;
    gap: var(--lk-space-1);
    min-width: 0;
}

.shop-cart-drawer-name[b-b7nsq3n35e] {
    overflow: hidden;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-cart-drawer-meta[b-b7nsq3n35e] {
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.shop-cart-drawer-controls[b-b7nsq3n35e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    margin-top: var(--lk-space-1);
}

.shop-cart-drawer-total[b-b7nsq3n35e] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shop-cart-drawer-unit[b-b7nsq3n35e] {
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
}

.shop-cart-drawer-remove[b-b7nsq3n35e] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--lk-space-1);
    border: none;
    border-radius: var(--lk-radius-sm);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-cart-drawer-remove:hover[b-b7nsq3n35e] {
    background: var(--lk-ghost-hover);
    color: var(--lk-err);
}

.shop-cart-drawer-remove:focus-visible[b-b7nsq3n35e] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* ── The sums and the way on ─────────────────────────────────────────────────────── */

.shop-cart-drawer-sum[b-b7nsq3n35e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-3);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.shop-cart-drawer-sum b[b-b7nsq3n35e] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shop-cart-drawer-note[b-b7nsq3n35e] {
    margin: 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.shop-cart-drawer-actions[b-b7nsq3n35e] {
    display: grid;
    gap: var(--lk-space-2);
}

.shop-cart-drawer-checkout[b-b7nsq3n35e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-lg);
    border-radius: var(--lk-radius-control);
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.shop-cart-drawer-checkout:hover[b-b7nsq3n35e] {
    background: var(--lk-magenta-hover);
}

.shop-cart-drawer-checkout:focus-visible[b-b7nsq3n35e] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* ── Options under a subscription line, and the shared summary (#1167) ──────────────── */

.shop-cart-drawer-options[b-b7nsq3n35e] {
    display: grid;
    gap: var(--lk-space-0-5);
    margin-top: var(--lk-space-1);
}

/* Name and price on one line, the name wrapping (#1169), as in the product view. */
.shop-cart-drawer-option[b-b7nsq3n35e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--lk-space-3);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.shop-cart-drawer-option-label[b-b7nsq3n35e] {
    color: var(--lk-text-sec);
    overflow-wrap: anywhere;
}

.shop-cart-drawer-option-price[b-b7nsq3n35e] {
    color: var(--lk-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.shop-cart-drawer-summary[b-b7nsq3n35e] {
    margin: var(--lk-space-4) 0;
}
/* /Pages/Shop/ShopCartPage.razor.rz.scp.css */
/* ── Back to the catalogue ──────────────────────────────── */

.shop-cart-back[b-oi4l6rxkre] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.shop-cart-back:hover[b-oi4l6rxkre] {
    background: var(--lk-ghost-hover);
}

.shop-cart-back:focus-visible[b-oi4l6rxkre],
.shop-cart-empty-link:focus-visible[b-oi4l6rxkre] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-cart-empty-link[b-oi4l6rxkre] {
    display: inline-flex;
    align-items: center;
    height: var(--lk-control-height-md);
    padding: 0 var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.shop-cart-empty-link:hover[b-oi4l6rxkre] {
    background: var(--lk-navy-hover);
}

/* ── Layout ─────────────────────────────────────────────── */

.shop-cart[b-oi4l6rxkre] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: var(--lk-space-5);
    margin-top: var(--lk-space-4);
}

/* The summary drops under the lines before the rows themselves have to reflow — a row that
   wraps loses the column the eye reads the totals down. */
@media (max-width: 60rem) {
    .shop-cart[b-oi4l6rxkre] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.shop-cart-lines[b-oi4l6rxkre] {
    display: grid;
    gap: var(--lk-space-4);
    min-width: 0;
}

/* ── Group headings ─────────────────────────────────────── */

.shop-cart-group[b-oi4l6rxkre] {
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
}

.shop-cart-group-row[b-oi4l6rxkre] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
}

.shop-cart-group-total[b-oi4l6rxkre] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding-top: var(--lk-space-3);
    margin-top: var(--lk-space-2);
    border-top: var(--lk-border-width) solid var(--lk-line);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.shop-cart-group-total b[b-oi4l6rxkre] {
    color: var(--lk-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── One line ───────────────────────────────────────────── */

.shop-cart-line[b-oi4l6rxkre] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) 0;
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.shop-cart-line:last-of-type[b-oi4l6rxkre] {
    border-bottom: none;
}

.shop-cart-thumb[b-oi4l6rxkre] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: var(--lk-radius-tile);
    background: var(--lk-navy-soft);
}

.shop-cart-thumb img[b-oi4l6rxkre] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-cart-what[b-oi4l6rxkre] {
    display: grid;
    flex: 1 1 auto;
    gap: var(--lk-space-0-5);
    min-width: 0;
}

.shop-cart-name[b-oi4l6rxkre] {
    overflow: hidden;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-cart-meta[b-oi4l6rxkre] {
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.shop-cart-total[b-oi4l6rxkre] {
    flex: 0 0 auto;
    min-width: 6rem;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.shop-cart-unit[b-oi4l6rxkre] {
    color: var(--lk-text-mut);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
}

/* ── The bin ────────────────────────────────────────────── */

.shop-cart-remove[b-oi4l6rxkre] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--lk-space-1);
    border: none;
    border-radius: var(--lk-radius-sm);
    background: none;
    color: var(--lk-text-mut);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-cart-remove:hover[b-oi4l6rxkre] {
    background: var(--lk-ghost-hover);
    color: var(--lk-err);
}

.shop-cart-remove:focus-visible[b-oi4l6rxkre] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* Holds the column open where a required option has no bin, so the prices above and below it
   stay in one line rather than stepping sideways around the gap. */
.shop-cart-remove-spacer[b-oi4l6rxkre] {
    flex: 0 0 auto;
    width: 1.75rem;
}

/* ── Options under a subscription ───────────────────────── */

.shop-cart-options[b-oi4l6rxkre] {
    display: grid;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) 0 var(--lk-space-3) var(--lk-space-6);
}

.shop-cart-option[b-oi4l6rxkre] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
}

.shop-cart-option-label[b-oi4l6rxkre] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.shop-cart-option-kind[b-oi4l6rxkre] {
    color: var(--lk-text-mut);
}

.shop-cart-option-kind[b-oi4l6rxkre]::before {
    content: " · ";
}

.shop-cart-option-price[b-oi4l6rxkre] {
    flex: 0 0 auto;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Summary column ─────────────────────────────────────── */

.shop-cart-summary[b-oi4l6rxkre] {
    min-width: 0;
}

.shop-cart-summary-title[b-oi4l6rxkre] {
    margin: 0 0 var(--lk-space-4);
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
}

/* ── On to the checkout ─────────────────────────────────── */

.shop-cart-checkout[b-oi4l6rxkre] {
    margin-top: var(--lk-space-4);
}

.shop-cart-checkout-link[b-oi4l6rxkre] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-lg);
    border-radius: var(--lk-radius-control);
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.shop-cart-checkout-link:hover[b-oi4l6rxkre] {
    background: var(--lk-magenta-hover);
}

.shop-cart-checkout-link:focus-visible[b-oi4l6rxkre] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}
/* /Pages/Shop/ShopCheckoutPage.razor.rz.scp.css */
/* ── Back to the cart ───────────────────────────────────── */

.checkout-back[b-x3jz7trdkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.checkout-back:hover[b-x3jz7trdkr] {
    background: var(--lk-ghost-hover);
}

.checkout-back:focus-visible[b-x3jz7trdkr],
.checkout-blocked-link:focus-visible[b-x3jz7trdkr] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.checkout-blocked-link[b-x3jz7trdkr] {
    display: inline-flex;
    align-items: center;
    height: var(--lk-control-height-md);
    padding: 0 var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
}

/* ── Layout ─────────────────────────────────────────────── */

.checkout[b-x3jz7trdkr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
    gap: var(--lk-space-5);
    margin-top: var(--lk-space-4);
}

@media (max-width: 64rem) {
    .checkout[b-x3jz7trdkr] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checkout-main[b-x3jz7trdkr] {
    display: grid;
    gap: var(--lk-space-4);
    min-width: 0;
}

.checkout-aside[b-x3jz7trdkr] {
    min-width: 0;
}

.checkout-error[b-x3jz7trdkr] {
    margin: 0;
    color: var(--lk-err);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

/* ── Sections ───────────────────────────────────────────── */

.checkout-section[b-x3jz7trdkr] {
    margin: 0 0 var(--lk-space-3);
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-ui);
    font-weight: 800;
}

.checkout-section-row[b-x3jz7trdkr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
}

.checkout-section-note[b-x3jz7trdkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

/* ── Buyer ──────────────────────────────────────────────── */

.checkout-buyer[b-x3jz7trdkr],
.checkout-buyer-who[b-x3jz7trdkr] {
    display: grid;
    flex: 1 1 auto;
    gap: var(--lk-space-0-5);
    min-width: 0;
}

.checkout-buyer-name[b-x3jz7trdkr] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
}

.checkout-buyer-org[b-x3jz7trdkr] {
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

/* ── Address fields ─────────────────────────────────────── */

.checkout-fields[b-x3jz7trdkr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-3);
}

.checkout-field-wide[b-x3jz7trdkr] {
    grid-column: 1 / -1;
}

@media (max-width: 30rem) {
    .checkout-fields[b-x3jz7trdkr] {
        grid-template-columns: 1fr;
    }
}

/* ── Invoice choice ─────────────────────────────────────── */

/* The address fields, under the choice that opened them (#1298). */
.checkout-invoice-fields[b-x3jz7trdkr] {
    margin-top: var(--lk-space-4);
}

.checkout-invoice-choice[b-x3jz7trdkr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lk-space-3);
}

@media (max-width: 30rem) {
    .checkout-invoice-choice[b-x3jz7trdkr] {
        grid-template-columns: 1fr;
    }
}

.checkout-choice[b-x3jz7trdkr] {
    display: grid;
    gap: var(--lk-space-0-5);
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    text-align: left;
    cursor: pointer;
    transition: var(--lk-transition);
}

.checkout-choice:hover[b-x3jz7trdkr] {
    background: var(--lk-ghost-hover);
}

.checkout-choice.is-active[b-x3jz7trdkr] {
    border-color: var(--lk-magenta);
    background: var(--lk-magenta-soft);
}

.checkout-choice:focus-visible[b-x3jz7trdkr] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.checkout-choice-title[b-x3jz7trdkr] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.checkout-choice-note[b-x3jz7trdkr] {
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

/* ── Order summary column ───────────────────────────────── */

.checkout-summary-title[b-x3jz7trdkr] {
    margin: 0 0 var(--lk-space-4);
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
}

.checkout-lines[b-x3jz7trdkr] {
    display: grid;
    gap: var(--lk-space-2);
    padding-bottom: var(--lk-space-3);
    margin-bottom: var(--lk-space-3);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

/* A grid, not a flex row (#1169): the name column may shrink to nothing and wrap, so the price
   stays inside the card instead of being pushed past its edge by a long option name. */
.checkout-line[b-x3jz7trdkr] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--lk-space-2);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.checkout-line.is-option[b-x3jz7trdkr] {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: var(--lk-space-5);
    color: var(--lk-text-sec);
}

.checkout-line-quantity[b-x3jz7trdkr] {
    color: var(--lk-text-mut);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.checkout-line-name[b-x3jz7trdkr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.checkout-line-price[b-x3jz7trdkr] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Terms ──────────────────────────────────────────────── */

.checkout-terms[b-x3jz7trdkr] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
}

/* Checkbox renders no visible text of its own — Label becomes aria-label only (#463) — so the
   words sit beside it and the component keeps the accessible name. */
.checkout-terms-text[b-x3jz7trdkr] {
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

.checkout-terms-link[b-x3jz7trdkr] {
    padding: 0;
    border: none;
    background: none;
    color: var(--lk-magenta-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-terms-link:focus-visible[b-x3jz7trdkr] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.checkout-terms-error[b-x3jz7trdkr],
.checkout-terms-changed[b-x3jz7trdkr] {
    margin: var(--lk-space-2) 0 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
}

.checkout-terms-error[b-x3jz7trdkr] {
    color: var(--lk-err);
}

.checkout-terms-changed[b-x3jz7trdkr] {
    color: var(--lk-warn);
}

.checkout-terms-missing[b-x3jz7trdkr] {
    margin: var(--lk-space-4) 0 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

/* The terms text itself is TermsTextComponent's, shared with the terms page's preview (#538). */

/* ── Place the order ────────────────────────────────────── */

.checkout-place[b-x3jz7trdkr] {
    margin-top: var(--lk-space-4);
}

/* What the button is waiting for, under the button (#485). Muted like the note below it: it
   reports progress, it is not a warning. */
.checkout-placing[b-x3jz7trdkr] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
    text-align: center;
}

.checkout-sign-note[b-x3jz7trdkr] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.5;
    text-align: center;
}
/* /Pages/Shop/ShopMainPage.razor.rz.scp.css */
/* ── Loading ────────────────────────────────────────────── */

/* The region's own layout is PageStateComponent's Stack since #783. The rule that stood here
   reached an element the page no longer owns; the one below is on an element the page writes
   inside it, so it still applies. */

.shop-skeleton-gap[b-f2ntoje01i] {
    margin: var(--lk-space-3) 0 var(--lk-space-2);
}

/* ── Why the buy path is missing ────────────────────────── */

/* ── Category chips ─────────────────────────────────────── */

.shop-chips[b-f2ntoje01i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin: var(--lk-space-4) 0;
}

.shop-chip[b-f2ntoje01i] {
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-pill, 999px);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-chip:hover[b-f2ntoje01i] {
    background: var(--lk-ghost-hover);
}

/* State as a class driven by aria-pressed's own value would be neater, but the chip is a
   button and :focus-visible already carries the keyboard story — this is the selected one. */
.shop-chip.is-active[b-f2ntoje01i] {
    background: var(--lk-magenta-soft);
    border-color: var(--lk-magenta);
    color: var(--lk-magenta-ink);
}

.shop-chip:focus-visible[b-f2ntoje01i] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* ── Category headings ──────────────────────────────────── */

.shop-category-heading[b-f2ntoje01i] {
    display: flex;
    align-items: baseline;
    gap: var(--lk-space-2);
    margin: var(--lk-space-5) 0 var(--lk-space-3);
    /* A known height, so the cart dock can be pushed down by exactly this block (#1270). */
    line-height: var(--lk-line-height-tight);
}

.shop-category-name[b-f2ntoje01i] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
}

.shop-category-count[b-f2ntoje01i] {
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

/* ── The catalogue beside the cart (#1213) ──────────────── */

/* One column until the cart docks; then the catalogue takes what is left and the cart its own
   width. minmax(0, …) so a wide product card cannot push the cart off the page. */
.shop-layout[b-f2ntoje01i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lk-space-4);
    align-items: start;
}

.shop-layout.has-cart[b-f2ntoje01i] {
    grid-template-columns: minmax(0, 1fr) 22rem;
}

/*
    The cart's top meets the product cards, not the category heading above them (#1270): the dock
    is pushed down by exactly the first heading's block — its top margin, one line of the
    category name, and its bottom margin. The dock belongs to ShopCartDrawer, so ::deep.
*/
.shop-layout.has-cart[b-f2ntoje01i]  .shop-cart-dock {
    margin-top: calc(var(--lk-space-5) + var(--lk-font-size-ui) * var(--lk-line-height-tight) + var(--lk-space-3));
}

.shop-catalogue[b-f2ntoje01i] {
    min-width: 0;
}

/* ── The grid ───────────────────────────────────────────── */

/* auto-fill with a minimum rather than a column count: the sidebar and the viewport both move,
   and a fixed count would either crush the cards or leave a gap at the end. */
.shop-grid[b-f2ntoje01i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--lk-space-4);
}

/* The whole card opens the product (#1166): the shell lifts on hover, the name is the button and
   its ::after stretches over the card. Packs, options and the buy row sit above the stretch. */
.shop-card-shell[b-f2ntoje01i] {
    border-radius: var(--lk-radius-card);
    transition: var(--lk-transition);
}

.shop-card-shell:hover[b-f2ntoje01i] {
    box-shadow: var(--lk-shadow-md);
    transform: translateY(-1px);
}

/* Every card in a row the same height, the buy row at the bottom of each (#1175). The grid
   stretches the shells to the row; the card's root is rendered by the Card component, so the
   page's scoped rule only reaches it through ::deep under the shell — a plain `> *` matched
   nothing, which is why the RFID reader's card, with no packs to choose, came out shorter. The
   root is a flex column so the card inside can grow to it, and .shop-price-row's margin-top:
   auto then lands every "Add to cart" on the same line. */
.shop-card-shell[b-f2ntoje01i]  > .lk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .shop-card-shell:hover[b-f2ntoje01i] {
        transform: none;
    }
}

.shop-card[b-f2ntoje01i] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--lk-space-3);
    min-height: 100%;
}

.shop-thumb[b-f2ntoje01i] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 0;
    border-radius: var(--lk-radius-control);
    background: var(--lk-ghost-hover);
    overflow: hidden;
}

.shop-thumb img[b-f2ntoje01i] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-card-link[b-f2ntoje01i] {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.shop-card-link[b-f2ntoje01i]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--lk-radius-control);
}

.shop-card-link:focus-visible[b-f2ntoje01i] {
    outline: none;
}

.shop-card-link:focus-visible[b-f2ntoje01i]::after {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-card-shell:has(.shop-card-link:hover) .shop-card-name[b-f2ntoje01i] {
    text-decoration: underline;
}

.shop-packs[b-f2ntoje01i],
.shop-options[b-f2ntoje01i],
.shop-price-row[b-f2ntoje01i] {
    position: relative;
    z-index: 1;
}

.shop-card-body[b-f2ntoje01i] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--lk-space-2);
}

.shop-card-name[b-f2ntoje01i] {
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
}

.shop-card-description[b-f2ntoje01i] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

/* ── Packs and options ──────────────────────────────────── */

.shop-packs[b-f2ntoje01i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
}

.shop-pack[b-f2ntoje01i] {
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    /* A chip has a fixed height, so a label that wrapped would fall outside it. The row of chips
       wraps instead: a long label ("36 månader – installation 4 900 kr") takes a row of its own. */
    white-space: nowrap;
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-pack.is-active[b-f2ntoje01i] {
    border-color: var(--lk-magenta);
    font-weight: 700;
}

.shop-pack:focus-visible[b-f2ntoje01i] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-options[b-f2ntoje01i] {
    display: grid;
    gap: var(--lk-space-2);
}

.shop-options-caption[b-f2ntoje01i] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-option[b-f2ntoje01i] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
}

/* Checkbox renders its own Label since #463. What stays here is the card's smaller type for the
   option rows, reached with ::deep because the element belongs to the component's markup. */
.shop-option[b-f2ntoje01i]  .lk-checkbox-text {
    font-size: var(--lk-font-size-label);
}

/* ── Price row ──────────────────────────────────────────── */

/* margin-top:auto pins this to the bottom of the card so the buttons line up across a row of
   cards whose descriptions are different lengths. */
/* The price and the button share the row while both fit; when the column is narrow the button
   drops under the price instead of squeezing "från 1 980 kr/mån" onto three lines (Niklas
   2026-10-13: the price on one line, simple and visible). */
.shop-price-row[b-f2ntoje01i] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lk-space-2) var(--lk-space-3);
    margin-top: auto;
    padding-top: var(--lk-space-2);
}

.shop-price-row > div[b-f2ntoje01i] {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-price-row[b-f2ntoje01i]  .shop-add {
    flex: 0 0 auto;
    margin-left: auto;
}

.shop-price[b-f2ntoje01i] {
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 700;
    white-space: nowrap;
}

.shop-price-note[b-f2ntoje01i] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.35;
}

/* ── The way to the cart ────────────────────────────────── */

/* The cart button in the heading (#1166): the count beside the icon, a bump when something
   lands. The bump is a transform, dropped for anyone who asked for less motion. */
.shop-cart-button[b-f2ntoje01i] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: none;
    border-radius: var(--lk-radius-pill);
    background: var(--lk-magenta-soft);
    color: var(--lk-magenta-ink);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-cart-button:hover[b-f2ntoje01i] {
    background: var(--lk-magenta);
    color: var(--lk-magenta-contrast);
}

.shop-cart-button:focus-visible[b-f2ntoje01i] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-cart-button.is-bumped[b-f2ntoje01i] {
    animation: shop-cart-bump-b-f2ntoje01i 450ms ease-out;
}

@keyframes shop-cart-bump-b-f2ntoje01i {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .shop-cart-button.is-bumped[b-f2ntoje01i] {
        animation: none;
    }
}

/* ── Options on the card (#1167): a count and a hint, not the chips ─────────────────── */

.shop-card-options[b-f2ntoje01i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-1) var(--lk-space-2);
    margin: 0;
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.shop-card-options-count[b-f2ntoje01i] {
    color: var(--lk-text);
    font-weight: 600;
}

.shop-card-options-hint[b-f2ntoje01i] {
    color: var(--lk-text-mut);
}
/* /Pages/Shop/ShopOrderListPage.razor.rz.scp.css */
/* ── Back to the catalogue ──────────────────────────────── */

.orders-back[b-omvqo3fh7w] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.orders-back:hover[b-omvqo3fh7w] {
    background: var(--lk-ghost-hover);
}

.orders-back:focus-visible[b-omvqo3fh7w],
.orders-empty-link:focus-visible[b-omvqo3fh7w] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.orders-empty-link[b-omvqo3fh7w] {
    display: inline-flex;
    align-items: center;
    height: var(--lk-control-height-md);
    padding: 0 var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-decoration: none;
}

.orders-skeleton[b-omvqo3fh7w] {
    padding: var(--lk-space-4);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

/* ── The table ──────────────────────────────────────────── */

/* One shared column definition for the header and every row, so the two cannot drift apart. */
.orders-head[b-omvqo3fh7w],
.orders-row[b-omvqo3fh7w] {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        8.5rem
        minmax(0, 1fr)
        minmax(9rem, auto)
        7rem
        2rem;
    align-items: center;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3) var(--lk-space-4);
    text-align: left;
}

.orders-head[b-omvqo3fh7w] {
    border-bottom: var(--lk-border-width) solid var(--lk-line);
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.orders-row[b-omvqo3fh7w] {
    width: 100%;
    border: none;
    border-bottom: var(--lk-border-width) solid var(--lk-line);
    background: none;
    font: inherit;
    cursor: pointer;
    transition: var(--lk-transition);
}

.orders-row:hover[b-omvqo3fh7w],
.orders-row.is-open[b-omvqo3fh7w] {
    background: var(--lk-ghost-hover);
}

.orders-row:focus-visible[b-omvqo3fh7w] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: -2px;
}

.orders-col-number[b-omvqo3fh7w] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    min-width: 0;
}

.orders-tile[b-omvqo3fh7w] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--lk-radius-sm);
    background: var(--lk-navy-soft);
    color: var(--lk-text-sec);
}

.orders-number[b-omvqo3fh7w] {
    overflow: hidden;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.orders-col-date[b-omvqo3fh7w],
.orders-col-by[b-omvqo3fh7w] {
    overflow: hidden;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-org[b-omvqo3fh7w]::before {
    content: " · ";
}

.orders-org[b-omvqo3fh7w] {
    color: var(--lk-text-mut);
}

.orders-col-total[b-omvqo3fh7w] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.orders-col-status[b-omvqo3fh7w] {
    display: flex;
    justify-content: flex-start;
}

.orders-col-chevron[b-omvqo3fh7w] {
    display: flex;
    justify-content: center;
    color: var(--lk-text-mut);
}

/* The columns beyond the number stop earning their width before the row does — the number and
   the chevron are what the eye needs to keep scanning and expanding. */
@media (max-width: 64rem) {
    .orders-head[b-omvqo3fh7w] {
        display: none;
    }

    .orders-row[b-omvqo3fh7w] {
        grid-template-columns: minmax(0, 1fr) auto 2rem;
        row-gap: var(--lk-space-1);
    }

    .orders-col-date[b-omvqo3fh7w],
    .orders-col-by[b-omvqo3fh7w] {
        grid-column: 1 / -1;
    }
}

/* ── The expanded row ───────────────────────────────────── */

.orders-detail[b-omvqo3fh7w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-6);
    padding: var(--lk-space-2) var(--lk-space-4) var(--lk-space-5) var(--lk-space-10);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.orders-detail-lines[b-omvqo3fh7w] {
    display: grid;
    flex: 1 1 17rem;
    gap: var(--lk-space-2);
    min-width: 0;
}

.orders-line[b-omvqo3fh7w] {
    display: flex;
    align-items: baseline;
    gap: var(--lk-space-2);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.orders-line.is-option[b-omvqo3fh7w] {
    padding-left: var(--lk-space-5);
    color: var(--lk-text-sec);
}

.orders-line-quantity[b-omvqo3fh7w] {
    flex: 0 0 auto;
    color: var(--lk-text-mut);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.orders-line-name[b-omvqo3fh7w] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-line-price[b-omvqo3fh7w] {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.orders-detail-facts[b-omvqo3fh7w] {
    display: grid;
    flex: 0 1 19rem;
    gap: var(--lk-space-2);
    align-content: start;
}

.orders-fact[b-omvqo3fh7w] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

.orders-fact b[b-omvqo3fh7w] {
    color: var(--lk-text);
}

.orders-signed[b-omvqo3fh7w] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    margin: var(--lk-space-1) 0 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}
/* /Pages/Shop/ShopOrderPlacedPage.razor.rz.scp.css */
.placed[b-a0ci7tpa44] {
    max-width: 36rem;
    margin: var(--lk-space-5) auto 0;
}

.placed-head[b-a0ci7tpa44] {
    margin-bottom: var(--lk-space-5);
    text-align: center;
}

.placed-check[b-a0ci7tpa44] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto var(--lk-space-4);
    border-radius: var(--lk-radius-pill);
    background: var(--lk-ok-soft);
    color: var(--lk-ok);
}

.placed-title[b-a0ci7tpa44] {
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-display);
    font-weight: 800;
}

.placed-subtitle[b-a0ci7tpa44] {
    margin: var(--lk-space-3) 0 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: 1.6;
}

.placed-number-row[b-a0ci7tpa44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-3);
    padding-bottom: var(--lk-space-3);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.placed-number-caption[b-a0ci7tpa44] {
    margin: 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

.placed-number[b-a0ci7tpa44] {
    margin: 0;
    color: var(--lk-text);
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.placed-lines[b-a0ci7tpa44] {
    display: grid;
    gap: var(--lk-space-2);
    padding: var(--lk-space-3) 0;
    margin-bottom: var(--lk-space-3);
    border-bottom: var(--lk-border-width) solid var(--lk-line);
}

.placed-line[b-a0ci7tpa44] {
    display: flex;
    align-items: baseline;
    gap: var(--lk-space-2);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.placed-line.is-option[b-a0ci7tpa44] {
    padding-left: var(--lk-space-5);
    color: var(--lk-text-sec);
}

.placed-line-quantity[b-a0ci7tpa44] {
    flex: 0 0 auto;
    color: var(--lk-text-mut);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.placed-line-name[b-a0ci7tpa44] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.placed-line-price[b-a0ci7tpa44] {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.placed-delivery[b-a0ci7tpa44] {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-space-3);
    padding: var(--lk-space-3);
    margin-top: var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-info-soft);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    line-height: 1.5;
}

.placed-delivery > :first-child[b-a0ci7tpa44] {
    flex: 0 0 auto;
    color: var(--lk-info);
}

.placed-onward[b-a0ci7tpa44] {
    margin-top: var(--lk-space-4);
}

.placed-link[b-a0ci7tpa44] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lk-control-height-lg);
    border-radius: var(--lk-radius-control);
    background: var(--lk-navy);
    color: var(--lk-navy-contrast);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    text-decoration: none;
    transition: var(--lk-transition);
}

.placed-link:hover[b-a0ci7tpa44] {
    background: var(--lk-navy-hover);
}

.placed-link:focus-visible[b-a0ci7tpa44] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}
/* /Pages/Shop/ShopProductDialog.razor.rz.scp.css */
/* CSS isolation is per component, so the pack and option styles on ShopMainPage do not reach
   this markup — the two files carry near-identical rules on purpose rather than by oversight.
   The alternative, a shared pack/option component, is worth doing the moment a third surface
   needs them; with two it would be an abstraction built for its own sake. */

/* Lower than the card's 16:9 (#1229): the choices must be in view when the dialog opens, and a
   full-height picture pushed them under the fold on a laptop. */
/* The page's notice at the top of the view, when ordering is off (#1297). */
.shop-dialog-blocked[b-s5ntb61l1e] {
    margin-bottom: var(--lk-space-4);
}

.shop-dialog-image[b-s5ntb61l1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 1;
    margin-bottom: var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-ghost-hover);
    overflow: hidden;
}

.shop-dialog-image img[b-s5ntb61l1e] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Raw text with its line breaks kept (#1169): the description is written in paragraphs and
   "–" lists, and nothing here is markup (ADR 0053). */
.shop-dialog-text[b-s5ntb61l1e] {
    margin: 0 0 var(--lk-space-4);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
    line-height: 1.55;
    white-space: pre-line;
}

/* ── The gallery's thumbnails (#1169) ───────────────────── */

.shop-dialog-thumbs[b-s5ntb61l1e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin: calc(-1 * var(--lk-space-2)) 0 var(--lk-space-4);
}

.shop-dialog-thumb[b-s5ntb61l1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 3rem;
    padding: 0;
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-sm);
    background: var(--lk-ghost-hover);
    cursor: pointer;
    overflow: hidden;
    transition: var(--lk-transition);
}

.shop-dialog-thumb img[b-s5ntb61l1e] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-dialog-thumb.is-active[b-s5ntb61l1e] {
    border-color: var(--lk-magenta);
}

.shop-dialog-thumb:focus-visible[b-s5ntb61l1e] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-packs[b-s5ntb61l1e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-space-2);
    margin-bottom: var(--lk-space-4);
}

.shop-pack[b-s5ntb61l1e] {
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-pack.is-active[b-s5ntb61l1e] {
    border-color: var(--lk-magenta);
    font-weight: 700;
}

.shop-pack:focus-visible[b-s5ntb61l1e] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.shop-options[b-s5ntb61l1e] {
    display: grid;
    gap: var(--lk-space-2);
}

.shop-options-caption[b-s5ntb61l1e] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

/* Checkbox renders its own Label since #463, so what is left here is the one thing this screen
   wants differently: the option list is a dense row inside a card, at the smaller label size
   rather than the component's own. ::deep because the element is the component's markup — the
   same rule without it matches nothing and reports nothing. */
.shop-option[b-s5ntb61l1e]  .lk-checkbox-text {
    font-size: var(--lk-font-size-label);
}

/* ── Options with prices, and the price box (#1167) ─────────────────────────────────── */

/* One row per option on a tinted surface, three columns that line up down the list: the name
   takes the room, the price and the answer keep to their own columns on the right, so every price
   stands in the same place and each Ja/Nej sits beside its own text. On a narrow screen the name
   takes the first line and the price and the answer share the second. */
.shop-option[b-s5ntb61l1e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--lk-space-3);
    row-gap: var(--lk-space-2);
    padding: var(--lk-space-2) var(--lk-space-3);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

@media (max-width: 560px) {
    .shop-option[b-s5ntb61l1e] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-option-name[b-s5ntb61l1e] {
        grid-column: 1 / -1;
    }
}

.shop-option-price[b-s5ntb61l1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    justify-self: end;
    white-space: nowrap;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shop-price-box[b-s5ntb61l1e] {
    display: grid;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-4);
    padding: var(--lk-space-4);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface-alt);
}

.shop-price-box-line[b-s5ntb61l1e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-3);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

.shop-price-box-line b[b-s5ntb61l1e] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shop-price-box-line.is-option[b-s5ntb61l1e] {
    color: var(--lk-text-sec);
}

.shop-price-box-line.is-total[b-s5ntb61l1e] {
    padding-top: var(--lk-space-2);
    border-top: var(--lk-border-width) solid var(--lk-line);
    font-size: var(--lk-font-size-ui);
}

.shop-price-box-line.is-total b[b-s5ntb61l1e] {
    font-weight: 700;
}

.shop-price-box-note[b-s5ntb61l1e] {
    margin: 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}

/* ── The choices come first, and say when they are not made (#1229) ──────────────────── */

.shop-choice[b-s5ntb61l1e] {
    margin-bottom: var(--lk-space-4);
}

.shop-choice-caption[b-s5ntb61l1e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lk-space-2);
    margin: 0 0 var(--lk-space-2);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

/* "Required" beside the caption while nothing is chosen, in the warning colour rather than the
   error one: nothing has gone wrong yet. */
.shop-choice-missing[b-s5ntb61l1e] {
    color: var(--lk-warn);
    font-weight: 500;
}

.shop-options-caption[b-s5ntb61l1e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lk-space-2);
}

/* A pack that is the only one is shown, not pressed. */
span.shop-pack[b-s5ntb61l1e] {
    display: inline-flex;
    align-items: center;
    cursor: default;
}

/* The option row: name and price on the left, the yes/no on the right, wrapping on a narrow screen. */
.shop-option-name[b-s5ntb61l1e] {
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
}

/* ── The two kinds of choice, drawn the same way (#1235) ───────────────────────────────── */

/* A hollow mark until chosen, a filled one after: what a radio looks like, on a button that
   also carries the words. The chosen item gets the brand border and a tinted surface so the
   state is read at a glance, not from a bold weight alone. */
.shop-choice-mark[b-s5ntb61l1e] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: var(--lk-border-thick) solid var(--lk-line-strong);
    border-radius: 50%;
    background: var(--lk-surface);
    transition: var(--lk-transition);
}

.shop-pack.is-active .shop-choice-mark[b-s5ntb61l1e],
.shop-answer-option.is-on .shop-choice-mark[b-s5ntb61l1e] {
    border-color: var(--lk-magenta);
    box-shadow: inset 0 0 0 3px var(--lk-surface);
    background: var(--lk-magenta);
}

/* The period cards: one per row, the price and the fee under the label. */
.shop-period-choices[b-s5ntb61l1e] {
    flex-direction: column;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2);
    border: var(--lk-border-width) dashed transparent;
    border-radius: var(--lk-radius-control);
}

.shop-period-choice[b-s5ntb61l1e] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-3);
    height: auto;
    min-height: var(--lk-control-height-sm);
    padding: var(--lk-space-2) var(--lk-space-3);
    text-align: left;
}

.shop-period-choice.is-active[b-s5ntb61l1e] {
    background: var(--lk-ghost-hover);
}

.shop-period-choice-text[b-s5ntb61l1e] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-0-5);
    min-width: 0;
}

.shop-period-choice-detail[b-s5ntb61l1e] {
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-caption);
    font-weight: 400;
}

/* Yes / No: two outlined buttons, neither chosen until the buyer picks. */
.shop-answer[b-s5ntb61l1e] {
    display: flex;
    flex: 0 0 auto;
    gap: var(--lk-space-2);
    padding: var(--lk-space-0-5);
    border: var(--lk-border-width) dashed transparent;
    border-radius: var(--lk-radius-control);
}

.shop-answer-option[b-s5ntb61l1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-2);
    height: var(--lk-control-height-sm);
    padding: 0 var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-answer-option.is-on[b-s5ntb61l1e] {
    border-color: var(--lk-magenta);
    background: var(--lk-ghost-hover);
    font-weight: 700;
}

.shop-answer-option:focus-visible[b-s5ntb61l1e] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

/* Until a choice is made, the group is outlined in the warning colour: the eye is drawn to
   what is still to do, in the colour the caption uses for "du måste välja en". */
.shop-period-choices.is-open[b-s5ntb61l1e],
.shop-answer.is-open[b-s5ntb61l1e] {
    border-color: var(--lk-warn);
}

/* The long description folded under the price (#1229): the card and the subtitle already say
   what the product is; the fold keeps the choices in view. */
.shop-dialog-more[b-s5ntb61l1e] {
    margin-top: var(--lk-space-4);
}

.shop-dialog-more summary[b-s5ntb61l1e] {
    cursor: pointer;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 600;
}

.shop-dialog-more .shop-dialog-text[b-s5ntb61l1e] {
    margin: var(--lk-space-3) 0 0;
}

/* Why the add button is not live yet, beside it in the footer. */
.shop-dialog-missing[b-s5ntb61l1e] {
    align-self: center;
    margin-right: auto;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
}
/* /Pages/Shop/ShopQuantityStepper.razor.rz.scp.css */
.shop-stepper[b-iquqylq27u] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--lk-space-1);
    padding: var(--lk-space-0-5);
    border: var(--lk-border-width) solid var(--lk-line-strong);
    border-radius: var(--lk-radius-control);
    background: var(--lk-surface);
}

.shop-stepper-button[b-iquqylq27u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-md);
    height: var(--lk-icon-button-size-md);
    border: none;
    border-radius: var(--lk-radius-sm);
    background: none;
    color: var(--lk-text-sec);
    cursor: pointer;
    transition: var(--lk-transition);
}

.shop-stepper-button:hover:not(:disabled)[b-iquqylq27u] {
    background: var(--lk-ghost-hover);
    color: var(--lk-text);
}

.shop-stepper-button:disabled[b-iquqylq27u] {
    color: var(--lk-text-mut);
    cursor: not-allowed;
}

.shop-stepper-button:focus-visible[b-iquqylq27u] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 1px;
}

.shop-stepper-count[b-iquqylq27u] {
    min-width: 1.75rem;
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Shop/ShopSummaryComponent.razor.rz.scp.css */
.shop-summary[b-bfqryya5ej] {
    display: grid;
    gap: var(--lk-space-3);
}

.shop-summary-group[b-bfqryya5ej] {
    display: grid;
    gap: var(--lk-space-2);
}

.shop-summary-caption[b-bfqryya5ej] {
    margin: 0;
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-label);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shop-summary-caption.is-accent[b-bfqryya5ej] {
    color: var(--lk-magenta-ink);
}

.shop-summary-line[b-bfqryya5ej] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lk-space-3);
    color: var(--lk-text-sec);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-ui);
}

.shop-summary-line b[b-bfqryya5ej] {
    color: var(--lk-text);
    font-weight: 600;
    /* Figures line up in a column only if they share a width per digit. */
    font-variant-numeric: tabular-nums;
    /* A figure is read as one thing: it never breaks across lines (#1254). The label wraps instead. */
    white-space: nowrap;
}

.shop-summary-line.is-total[b-bfqryya5ej] {
    padding-top: var(--lk-space-2);
    border-top: var(--lk-border-width) solid var(--lk-line);
    color: var(--lk-text);
    font-weight: 700;
}

.shop-summary-line.is-total b[b-bfqryya5ej] {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-size-title-sm);
    font-weight: 800;
}

.shop-summary-line.is-total.is-accent b[b-bfqryya5ej] {
    color: var(--lk-magenta-ink);
}

.shop-summary-divider[b-bfqryya5ej] {
    height: var(--lk-border-width);
    background: var(--lk-line);
}

.shop-summary-note[b-bfqryya5ej] {
    margin: 0;
    color: var(--lk-text-mut);
    font-family: var(--lk-font-ui);
    font-size: var(--lk-font-size-caption);
    line-height: 1.6;
}
/* /Pages/Support/SupportPage.razor.rz.scp.css */
/* The same column as the sign-in and sign-up forms, so the page sits where they do. */
.support[b-7horob8ugv] {
    width: 100%;
    max-width: 23.75rem;
}

.support[b-7horob8ugv]  .support-back {
    margin-bottom: var(--lk-space-4);
}

.support-title[b-7horob8ugv] {
    margin: 0;
    font-family: var(--lk-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--lk-ink);
}

.support-intro[b-7horob8ugv] {
    margin: var(--lk-space-3) 0 0;
    font-size: var(--lk-font-size-ui);
    line-height: var(--lk-line-height-body);
    color: var(--lk-text-sec);
}

/* ── The two ways in ────────────────────────────────────── */

.support-contacts[b-7horob8ugv] {
    display: grid;
    gap: var(--lk-space-3);
    margin: var(--lk-space-6) 0 0;
}

.support-contact[b-7horob8ugv] {
    display: grid;
    gap: var(--lk-space-1);
    padding: var(--lk-space-4);
    border: var(--lk-border-hairline) solid var(--lk-line);
    border-radius: var(--lk-radius-control);
}

.support-contact-label[b-7horob8ugv] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    font-size: var(--lk-font-size-label);
    color: var(--lk-text-sec);
}

.support-contact-mark[b-7horob8ugv] {
    display: inline-flex;
    color: var(--lk-text-mut);
}

.support-contact-value[b-7horob8ugv] {
    margin: 0;
}

.support-contact-link[b-7horob8ugv] {
    font-size: var(--lk-font-size-ui);
    font-weight: 600;
    color: var(--lk-magenta-ink);
    text-decoration: none;
}

.support-contact-link:hover[b-7horob8ugv] {
    text-decoration: underline;
}
/* /Pages/Terms/OrganisationTermsPage.razor.rz.scp.css */
.organisation-terms-text[b-b4eua4w3z9] {
    max-height: 420px;
    overflow: auto;
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.organisation-terms-attest[b-b4eua4w3z9] {
    padding-top: var(--lk-space-3);
}

.organisation-terms-actions[b-b4eua4w3z9] {
    padding-top: var(--lk-space-3);
}

.organisation-terms-done-title[b-b4eua4w3z9] {
    margin: 0 0 var(--lk-space-2);
}

/* The note while acting as the administrator (#1236). */
.organisation-terms-impersonating[b-b4eua4w3z9] {
    margin-bottom: var(--lk-space-4);
}
/* /Pages/Terms/TermsAdminPage.razor.rz.scp.css */
.terms-admin-warning[b-q07lf7c2xw] {
    margin-bottom: var(--lk-space-3);
}

.terms-admin-head[b-q07lf7c2xw] {
    display: flex;
    gap: var(--lk-space-2);
    align-items: center;
    margin-bottom: var(--lk-space-3);
}

.terms-admin-none[b-q07lf7c2xw] {
    color: var(--lk-text-sec);
}

.terms-admin-actions[b-q07lf7c2xw] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    margin-top: var(--lk-space-3);
}

.terms-admin-hint[b-q07lf7c2xw] {
    margin-right: auto;
    color: var(--lk-text-sec);
    font-size: var(--lk-font-size-caption);
}

.terms-admin-history[b-q07lf7c2xw] {
    margin-top: var(--lk-space-4);
}

.terms-admin-history-title[b-q07lf7c2xw] {
    margin: 0 0 var(--lk-space-2);
    font-size: var(--lk-font-size-ui);
}

.terms-admin-history-list[b-q07lf7c2xw] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.terms-admin-history-row[b-q07lf7c2xw] {
    display: flex;
    align-items: center;
    gap: var(--lk-space-2);
    padding: var(--lk-space-2) 0;
    border-top: var(--lk-border-width) solid var(--lk-line);
}

.terms-admin-history-row > :last-child[b-q07lf7c2xw] {
    margin-left: auto;
}
/* /Pages/Terms/TermsPage.razor.rz.scp.css */
.terms-page[b-r61rzfv9j2] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-4);
}

.terms-title[b-r61rzfv9j2] {
    margin: 0;
}

.terms-intro[b-r61rzfv9j2] {
    margin: 0;
    color: var(--lk-text-sec);
}

.terms-document[b-r61rzfv9j2] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-2);
}

.terms-document-title[b-r61rzfv9j2] {
    margin: 0;
    font-size: var(--lk-font-size-ui);
}

/* The text in its own scroll box, so a long document never pushes the tick off the screen. */
.terms-document-text[b-r61rzfv9j2] {
    max-height: 320px;
    overflow: auto;
    padding: var(--lk-space-3);
    border: var(--lk-border-width) solid var(--lk-line);
    border-radius: var(--lk-radius-card);
    background: var(--lk-surface-alt);
}

.terms-accept[b-r61rzfv9j2] {
    padding-top: var(--lk-space-2);
}

.terms-actions[b-r61rzfv9j2] {
    padding-top: var(--lk-space-2);
}
/* /Pages/Usage/UsageAdminPage.razor.rz.scp.css */
/* Lyker's usage and invoice basis (#1207, on the report engine since #1300). Tokens only. */

.usage-info[b-yrkd0quddl] {
    margin-bottom: var(--lk-space-3);
}

.usage-region[b-yrkd0quddl] {
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-4);
}

.usage-summary[b-yrkd0quddl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--lk-space-3);
}

/* Counts and amounts line up on the right, digit under digit. */
.usage-count[b-yrkd0quddl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*
    The sortable headings (SMS, BankID, Belopp) are SortableColumnHeader's cells, which this file's
    .usage-count does not reach: they stood left while their figures stood right (Niklas 2026-10-22,
    #1407). Right-aligned here, with the chevron before the label so the label's last letter sits
    over the figures' last digit, as the plain headings beside them do.
*/
.usage-list[b-yrkd0quddl]  .lk-sort-header.usage-count {
    text-align: right;
}

.usage-list[b-yrkd0quddl]  .lk-sort-header.usage-count .lk-sort-button {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.usage-amount[b-yrkd0quddl] {
    white-space: nowrap;
}

/* The estimate's badge under the amount rather than beside it, so every amount ends at the column's
   edge, badge or not (#1407). */
.usage-amount[b-yrkd0quddl]  .lk-badge {
    display: flex;
    width: fit-content;
    margin: var(--lk-space-1) 0 0 auto;
}

.usage-toggle-col[b-yrkd0quddl] {
    width: calc(1.5rem + var(--lk-space-3));
}

/* The breakdown toggle: a plain button with the chevron, the row's own control. */
.usage-row-toggle[b-yrkd0quddl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lk-icon-button-size-sm);
    height: var(--lk-icon-button-size-sm);
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-control);
    background: transparent;
    color: var(--lk-text-sec);
    cursor: pointer;
}

.usage-row-toggle:hover[b-yrkd0quddl] {
    background: var(--lk-ghost-hover);
}

.usage-row-toggle:focus-visible[b-yrkd0quddl] {
    outline: var(--lk-focus-ring-width) solid var(--lk-focus);
    outline-offset: 2px;
}

.usage-org-link[b-yrkd0quddl] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.usage-breakdown td[b-yrkd0quddl] {
    background: var(--lk-surface-alt);
    font-size: var(--lk-font-size-label);
}

.usage-reason[b-yrkd0quddl] {
    display: block;
    font-size: var(--lk-font-size-caption);
    color: var(--lk-text-mut);
}

/* Under the list's card since #1386, where the region's gap used to space it. */
.usage-note[b-yrkd0quddl] {
    margin: var(--lk-space-4) 0 0;
}