/*
* Auth-server overlay on top of Blueprint's baseline (`blueprint.css`
* loaded first in Layout.tsx). Blueprint handles typography, form
* controls, callouts, headings, the card surface, intent colours, and
* — now that components own their own state via React — the in-flight
* spinner + disabled treatment too. This file is purely the bits
* Blueprint doesn't ship:
*
* - page background + auth-shell centering / max-width
* - cross-document View Transitions
* - layout helpers (button rows, key-value lists on the profile
* page, the permission/connections lists)
*
* Anything Blueprint already provides should NOT be redefined here —
* we want the auth pages to look like the rest of the Njord app
* surface, not a near-miss.
*/
body {
background: #f6f7f9;
}
/* Njord brandmark above the auth card. Anchored to "/" — clicking it
* mid-flow aborts back to the portal landing. */
.auth-brand {
display: flex;
justify-content: center;
margin: 3rem 0 1rem;
/* No mobile tap flash on the logo link; keep the focus ring for
* keyboard users only (clicking must not leave a highlight border). */
-webkit-tap-highlight-color: transparent;
}
.auth-brand:focus:not(:focus-visible) {
outline: none;
}
.auth-brand img {
display: block;
height: 72px;
width: 72px;
}
/* App-style header variant for the wide hub pages: logo + "Your Account",
* left-aligned with the card below. Width/centering mirror .auth-shell--wide
* so the logo's left edge lines up with the card's. The header is the page's
* wrapping the home link (Layout.tsx), so the element selector must
* outrank Blueprint's `.bp6-running-text h1` typography (same specificity,
* later stylesheet — ours wins). */
h1.auth-brand--header {
justify-content: flex-start;
max-width: 640px;
margin: 3rem auto 1rem;
font-size: 1.25rem;
font-weight: 600;
line-height: normal;
}
.auth-brand--header a {
display: flex;
align-items: center;
gap: 0.75rem;
color: #1c2127;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.auth-brand--header a:hover {
color: #1c2127;
text-decoration: none;
}
.auth-brand--header a:focus:not(:focus-visible) {
outline: none;
}
.auth-brand--header img {
height: 40px;
width: 40px;
}
.auth-shell {
max-width: 420px;
margin: 0 auto 4rem;
padding: 2rem;
}
/* Wider variant for the signed-in portal hubs (account home, passkeys),
* which carry settings-style sections + lists rather than a single
* focused form. The login / consent / confirm flow keeps the narrow
* width. */
.auth-shell--wide {
max-width: 640px;
}
/* ---------------------------------------------------------------------
* Cross-document View Transitions (Chrome 126+, Safari TP). Native
* crossfade between full-page navigations when both pages opt in.
* Other browsers no-op cleanly.
* ------------------------------------------------------------------ */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.15s;
}
/* ---------------------------------------------------------------------
* Layout helpers Blueprint doesn't ship
* ------------------------------------------------------------------ */
/* Key/value list for the profile page. Blueprint has no equivalent. */
dl.profile {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5rem 1rem;
margin: 0 0 1.5rem;
}
dl.profile dt {
font-weight: 500;
color: #5c7080;
font-size: 0.875rem;
}
/* The Sign-in Methods section renders two consecutive dl.profile lists
(interactive factors, then API keys). Each grid sizes its own max-content
label column, so a fixed label column keeps the two aligned. */
dl.profile.factors {
grid-template-columns: 7rem 1fr;
}
dl.profile dd {
margin: 0;
}
/* Inline strings we want to look code-like (User keys, sub claims, etc.) */
.muted-code {
font-family: "SF Mono", Menlo, monospace;
font-size: 0.8125rem;
color: #5c7080;
word-break: break-all;
}
/* Lists with no bullets (permission list on consent, connected apps on profile) */
ul.permission-list,
ul.connections {
list-style: none;
padding: 0;
margin: 0.5rem 0 1.5rem;
}
ul.permission-list > li {
padding: 0.5rem 0;
}
/* Consent domain-scope grid: Read/Write/Delete checkboxes in a row per domain */
.scope-grid-cells {
display: flex;
gap: 1.25rem;
margin-top: 0.375rem;
}
.scope-grid-cells .bp6-control.bp6-inline {
margin-right: 0;
}
/* Show-once API-key secret on the created page */
pre.api-key-secret {
padding: 0.75rem;
background: #f6f7f9;
border: 1px solid #d8e1e8;
border-radius: 3px;
font-size: 0.9375rem;
word-break: break-all;
white-space: pre-wrap;
user-select: all;
}
ul.connections > li {
padding: 0.5rem 0;
border-top: 1px solid #ebf1f5;
}
ul.connections > li:first-child {
border-top: 0;
}
/* Sections on the account home. The page shell (auth-shell) is already a
* bp6-card, so nesting more cards reads as boxes-in-a-box; instead each
* section gets Blueprint's Section-header treatment — the with a
* divider underneath (mirrors bp6-section-header, which isn't in our
* compiled subset) — and generous spacing between sections. */
.profile-section {
margin: 0 0 2rem;
}
.profile-section > h2.bp6-heading {
padding-bottom: 0.5rem;
/* Blueprint's section-header divider ($pt-divider-black) — clearly
* darker than the #ebf1f5 row separators inside the lists, so the
* two levels of line read as different hierarchy. */
border-bottom: 1px solid rgba(17, 20, 24, 0.15);
margin-bottom: 0.75rem;
}
/* Identity line: "Signed in as …" on the left, the light Sign out as a
* right-aligned link on the same line (baseline-aligned, mirroring the
* session rows' right-hand Sign out… links). */
.signed-in-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
/* Session rows: main content (device, meta, apps) on the left; the
* navigation action (a link) on the right. */
li.session-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
/* Subtle cue for the row backing this browser's session: a faint rounded
* tint, deliberately quieter than a callout. The symmetric negative
* margins bleed the tint slightly past the text column on both sides
* (like a hover highlight), so the row's text stays exactly aligned
* with its siblings. */
/* Selector matches ul.connections > li's specificity+1 — the plain
* li.session-row--current form loses the padding to that rule, which
* left the bled row's text misaligned. */
ul.connections > li.session-row--current {
background: rgba(45, 114, 210, 0.06);
border-radius: 4px;
margin: 0 -0.75rem;
padding: 0.5rem 0.75rem;
}
/* Hand-rolled "This device" pill in Blueprint's minimal-primary-Tag
* colours — the Tag component's CSS is deliberately excluded from the
* compiled Blueprint subset (see blueprint-subset.scss), so a class of
* our own is cheaper than importing it. */
.device-pill {
display: inline-block;
margin-left: 0.5rem;
padding: 0.125rem 0.5rem;
border-radius: 2px;
background: rgba(45, 114, 210, 0.1);
color: #215db0;
font-size: 0.75rem;
font-weight: 500;
/* No vertical-align override: an inline-block's default baseline is
* its text's baseline, which keeps the pill's label on the same
* baseline as the device name beside it. */
}
/* The account-wide "Sign out everywhere…" is the page's one destructive,
* everything-at-once action — Blueprint danger colours set it apart from
* the per-row (blue) sign-out links. */
.session-row-action--danger {
color: #cd4246;
}
.session-row-action--danger:hover {
color: #ac2f33;
}
/* "Older login activity" FYI block below the sessions-card footer:
* informational only (no action links), so it reads quieter and smaller
* than the actionable rows above it. */
.legacy-activity {
margin-top: 1.5rem;
font-size: 0.8125rem;
}
.legacy-activity-title {
font-weight: 500;
margin-bottom: 0.25rem;
}
.legacy-activity > div + div {
margin-top: 0.125rem;
}
.session-row-action {
flex: none;
white-space: nowrap;
}
/* Confirmation screens: the primary (large) button + a plain Cancel link,
* vertically centred with clear space between them. */
.confirm-actions {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 0.5rem;
}
/* A secondary form action (consent "Cancel", logout "No") that must stay a
* real submit — its deny/cancel is a CSRF-safe POST that has to work without
* JS — but reads as a link, matching the Cancel link on the confirm pages.
* Colours mirror Blueprint's light-mode anchor (the auth pages aren't dark). */
.link-button {
appearance: none;
-webkit-appearance: none;
background: none;
border: none;
padding: 0;
font: inherit;
color: #215db0;
cursor: pointer;
}
.link-button:hover {
color: #184a90;
text-decoration: underline;
}
.link-button:disabled {
color: #5c7080;
cursor: default;
text-decoration: none;
}
/* "Sign out everywhere": description on the left, the (right-aligned) link
* as the closing action of the sessions section. */
.signout-all {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-top: 1.5rem;
}
/* "← Back to your account" on sub-pages — clear separation from the form
* / list above it. Scoped under `.bp6-running-text` so it outranks
* Blueprint's `.bp6-running-text p { margin: 0 0 12px }` (specificity
* 0,1,1), which would otherwise zero the top margin on this
. */
.bp6-running-text .portal-back {
margin-top: 2rem;
}
ul.permission-list .bp6-text-muted {
margin-top: 0.125rem;
}
/* Checkbox row for the consent screen. Blueprint's bp6 Checkbox has the
* visual treatment; we just provide block-level spacing + the
* description-under-label two-line layout. */
.permission-list .bp6-control {
margin: 0;
}
.permission-list .bp6-control + .bp6-text-muted {
margin: 0 0 0 1.5rem;
}