/* Oclin Home palette and typography, shared by login, portal and admin. */
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
:root {
    color-scheme: light;
    --tl-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tl-mono: "JetBrains Mono", ui-monospace, monospace;
    --tl-mist: #f1f5f8;
    --tl-surface: #ffffff;
    --tl-deep: #e7eef4;
    --tl-ink: #132338;
    --tl-ink-muted: #53657a;
    --tl-ink-faint: #6f8195;
    --tl-line: #d9e3ec;
    --tl-line-strong: #b8c8d8;
    --tl-header: #ffffff;
    --tl-accent: #1d60fb;
    --tl-action: #1d60fb;
    --tl-action-hover: #0f4fe6;
    --tl-blue-ink: #16469b;
    --tl-link: #1d60fb;
    --tl-link-hover: #0f4fe6;
    --tl-amber-ink: #7a4b00;
    --tl-ascii-mint: #1d60fb;
    --tl-ascii-bright: #1d60fb;
    --tl-ascii-code: #1d60fb;
    --tl-ascii-dust: #53657a;
    --tl-ascii-violet: #7353bd;
    --tl-glow-blue: rgba(29, 96, 251, .07);
    --tl-glow-green: rgba(119, 234, 169, .15);
    --tl-card-shadow: 0 24px 80px rgba(34, 61, 85, .07);
    --bs-body-font-family: var(--tl-font);
    --bs-body-bg: var(--tl-mist);
    --bs-body-bg-rgb: 241, 245, 248;
    --bs-body-color: var(--tl-ink);
    --bs-body-color-rgb: 19, 35, 56;
    --bs-emphasis-color: var(--tl-ink);
    --bs-emphasis-color-rgb: 19, 35, 56;
    --bs-heading-color: var(--tl-ink);
    --bs-secondary-color: var(--tl-ink-muted);
    --bs-secondary-color-rgb: 83, 101, 122;
    --bs-tertiary-color: var(--tl-ink-faint);
    --bs-tertiary-bg: var(--tl-mist);
    --bs-border-color: var(--tl-line);
}
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --tl-mist: #07111f;
    --tl-surface: #0c1b2f;
    --tl-deep: #050c17;
    --tl-ink: #f5f8fc;
    --tl-ink-muted: #a9b6c8;
    --tl-ink-faint: #8492a8;
    --tl-line: #24344b;
    --tl-line-strong: #3c506c;
    --tl-header: #091524;
    --tl-accent: #77eaa9;
    --tl-action: #77eaa9;
    --tl-action-hover: #9df2c3;
    --tl-blue-hover: #4680ff;
    --tl-blue-tint: #142d55;
    --tl-blue-ink: #8fb5ff;
    --tl-link: #8fb5ff;
    --tl-link-hover: #b9d0ff;
    --tl-green-tint: #12382c;
    --tl-green-ink: #77eaa9;
    --tl-amber-tint: #3b2c16;
    --tl-amber-ink: #f3c979;
    --tl-red-tint: #401f2c;
    --tl-red-ink: #ff9da9;
    --tl-ascii-mint: #77eaa9;
    --tl-ascii-bright: #d5fbe8;
    --tl-ascii-code: #7fa6ff;
    --tl-ascii-dust: #8fa1bc;
    --tl-ascii-violet: #ae98ff;
    --tl-glow-blue: rgba(29, 96, 251, .12);
    --tl-glow-green: rgba(119, 234, 169, .045);
    --tl-card-shadow: 0 24px 80px rgba(0, 0, 0, .14);
    --bs-body-bg-rgb: 7, 17, 31;
    --bs-body-color-rgb: 245, 248, 252;
    --bs-emphasis-color-rgb: 245, 248, 252;
    --bs-secondary-color-rgb: 169, 182, 200;
    --bs-secondary-bg: #12243b;
    --bs-secondary-bg-rgb: 18, 36, 59;
    --bs-tertiary-bg-rgb: 7, 17, 31;
    --bs-link-color: #8fb5ff;
    --bs-link-color-rgb: 143, 181, 255;
    --bs-link-hover-color: #b9d0ff;
    --bs-link-hover-color-rgb: 185, 208, 255;
    --bs-form-valid-color: #77eaa9;
    --bs-form-invalid-color: #ff9da9;
}
::selection { background: var(--tl-green); color: #07111f; }
.tl-header { background: var(--tl-header); color: var(--tl-ink); border-bottom: 1px solid var(--tl-line); }
.tl-brand, .tl-brand:hover, .tl-nav a:hover, .tl-nav a[aria-current="page"], .tl-link-button { color: var(--tl-ink); }
.tl-brand__product, .tl-account, .tl-nav a { color: var(--tl-ink-muted); }
.tl-brand__product { font: 400 .75rem var(--tl-mono); }
.tl-brand__logo { height: 1.5rem; }
.tl-admin-nav { background: var(--tl-surface); border-bottom: 1px solid var(--tl-line); }
.tl-admin-nav a { color: var(--tl-ink-muted); }
.tl-admin-nav a:hover, .tl-admin-nav a[aria-current="page"] { color: var(--tl-ink); }
.tl-theme {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--tl-line-strong);
    border-radius: 50%;
    background: var(--tl-surface);
    color: var(--tl-ink-muted);
    cursor: pointer;
}
.tl-theme:hover { background: var(--tl-mist); color: var(--tl-ink); }
.tl-theme[hidden], .tl-ascii-toggle[hidden] { display: none; }
.tl-theme__moon { display: none; }
[data-bs-theme="dark"] .tl-theme__sun { display: none; }
[data-bs-theme="dark"] .tl-theme__moon { display: block; }
/* Brukermenyen: navnet øverst til høyre, med tema og utlogging i nedtrekket. */
.tl-header__portal { margin-left: auto; font-size: .8125rem; }
.tl-header__portal + .tl-account { margin-left: 0; }
.tl-account__toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: 260px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--tl-line-strong);
    border-radius: 999px;
    background: var(--tl-surface);
    color: var(--tl-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.tl-account__toggle:hover, .tl-account__toggle[aria-expanded="true"] { background: var(--tl-mist); }
.tl-account__toggle:focus-visible { outline: 2px solid var(--tl-link); outline-offset: 2px; }
.tl-account__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tl-green);
    color: #07111f;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.tl-account__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-account__caret { flex: 0 0 auto; color: var(--tl-ink-muted); transition: transform .15s ease; }
.tl-account__toggle[aria-expanded="true"] .tl-account__caret { transform: rotate(180deg); }
.tl-account__menu {
    --bs-dropdown-min-width: 240px;
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-bg: var(--tl-surface);
    --bs-dropdown-color: var(--tl-ink);
    --bs-dropdown-border-color: var(--tl-line);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-divider-bg: var(--tl-line);
    --bs-dropdown-divider-margin-y: .375rem;
    --bs-dropdown-link-color: var(--tl-ink);
    --bs-dropdown-link-hover-color: var(--tl-ink);
    --bs-dropdown-link-hover-bg: var(--tl-mist);
    --bs-dropdown-link-active-color: var(--tl-ink);
    --bs-dropdown-link-active-bg: var(--tl-deep);
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-item-border-radius: 8px;
    --bs-dropdown-font-size: .875rem;
    box-shadow: var(--tl-card-shadow);
}
.tl-account__menu form { margin: 0; }
.tl-account__who { padding: .5rem .75rem; }
.tl-account__who strong { display: block; color: var(--tl-ink); font-weight: 600; }
.tl-account__who span { display: block; color: var(--tl-ink-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.tl-account__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tl-account__item[hidden] { display: none; }
.tl-switch {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--tl-line-strong);
    transition: background-color .15s ease;
}
.tl-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
[aria-checked="true"] > .tl-switch { background: var(--tl-accent); }
[aria-checked="true"] > .tl-switch::after { transform: translateX(14px); }
@media (max-width: 575.98px) {
    .tl-account__toggle { padding-right: 8px; gap: .35rem; }
    .tl-account__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tl-header__portal { font-size: .75rem; }
}
.tl-tab[aria-selected="true"] { border-bottom-color: var(--tl-accent); }
.form-control, .form-select { color: var(--tl-ink); }
.form-control:focus, .form-select:focus { background-color: var(--tl-surface); color: var(--tl-ink); }
.form-control::placeholder { color: var(--tl-ink-faint); opacity: 1; }
.card { --bs-card-bg: var(--tl-surface); --bs-card-color: var(--tl-ink); }
.modal { --bs-modal-bg: var(--tl-surface); --bs-modal-color: var(--tl-ink); }
.table { --bs-table-color: var(--tl-ink); --bs-table-hover-color: var(--tl-ink); }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: #8fb5ff; --bs-btn-hover-color: #b9d0ff; }
[data-bs-theme="dark"] .tl-chip[aria-pressed="true"],
[data-bs-theme="dark"] .tl-month[aria-pressed="true"],
[data-bs-theme="dark"] .tl-segment input:checked + label { background: var(--tl-green); border-color: var(--tl-green); color: var(--tl-black); }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #1c304a; --bs-btn-border-color: var(--tl-line-strong); --bs-btn-hover-bg: #2a4260; --bs-btn-hover-border-color: #2a4260; }

/* Login: a living mark beside a quiet, familiar email/code form. */
.tl-auth {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 0 5vw;
    padding: 0 clamp(24px, 5vw, 88px);
    background:
        radial-gradient(ellipse at 30% 34%, var(--tl-glow-blue), transparent 52%),
        radial-gradient(ellipse at 4% 80%, var(--tl-glow-green), transparent 44%),
        linear-gradient(155deg, var(--tl-mist), var(--tl-deep));
}
.tl-auth__header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 32px;
}
.tl-auth__header .tl-brand__logo { height: 26px; }
.tl-auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-block: 16px 48px;
}
.tl-auth__art {
    position: relative;
    width: 100%;
    height: clamp(240px, 36vh, 400px);
    margin-bottom: 28px;
}
.tl-auth__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tl-auth__ascii-anchor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(80%, 330px, 35vh);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.tl-auth__art-fallback { position: absolute; inset: 0; width: 70%; height: 100%; margin: auto; object-fit: contain; opacity: .65; }
.ascii-ready .tl-auth__art-fallback { display: none; }
.tl-ascii-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border: 1px solid var(--tl-line);
    border-radius: 999px;
    background: var(--tl-mist);
    color: var(--tl-ink-muted);
    font: 400 .625rem var(--tl-mono);
}
.tl-ascii-toggle:hover { color: var(--tl-accent); border-color: var(--tl-accent); }
.tl-ascii-toggle__icon { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.tl-ascii-toggle[aria-pressed="true"] .tl-ascii-toggle__icon {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 8px solid currentColor;
}
.tl-auth__eyebrow { margin: 0 0 18px; color: var(--tl-accent); font: 400 .6875rem var(--tl-mono); letter-spacing: .08em; }
.tl-auth__statement { margin: 0; color: var(--tl-ink); font-size: clamp(2.75rem, 4.7vw, 5rem); line-height: 1.02; font-weight: 500; letter-spacing: -.055em; }
.tl-auth__statement span { color: var(--tl-accent); }
.tl-auth__lead { margin: 22px 0 0; color: var(--tl-ink-muted); font-size: 1rem; line-height: 1.7; }
.tl-auth__form { display: flex; align-items: center; justify-content: center; min-width: 0; padding-block: 32px 48px; }
.tl-auth__card {
    width: 100%;
    max-width: 460px;
    padding: clamp(28px, 3vw, 48px);
    border: 1px solid var(--tl-line);
    border-radius: 24px;
    background: var(--tl-surface);
    box-shadow: var(--tl-card-shadow);
}
.tl-auth__card h1 { font-size: clamp(1.75rem, 2.3vw, 2.25rem); font-weight: 500; margin-bottom: 12px; letter-spacing: -.04em; }
.tl-auth__card strong { overflow-wrap: anywhere; }
.tl-auth__steps { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0 0 36px; padding: 0; color: var(--tl-ink-muted); font: 400 .6875rem var(--tl-mono); }
.tl-auth__steps li { display: inline-flex; align-items: center; gap: 7px; }
.tl-auth__steps span { padding: 4px 6px; border: 1px solid var(--tl-line); border-radius: 5px; }
.tl-auth__steps [aria-current="step"] { color: var(--tl-accent); }
.tl-auth__steps [aria-current="step"] span { border-color: var(--tl-accent); background: var(--tl-green-tint); }
.tl-auth__card .form-control { min-height: 52px; background: var(--tl-mist); }
.tl-auth__card .btn-primary {
    --bs-btn-bg: var(--tl-action);
    --bs-btn-border-color: var(--tl-action);
    --bs-btn-hover-bg: var(--tl-action-hover);
    --bs-btn-hover-border-color: var(--tl-action-hover);
    --bs-btn-active-bg: var(--tl-action-hover);
    --bs-btn-active-border-color: var(--tl-action-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    min-height: 52px;
    margin-top: 4px;
    text-align: left;
    border-radius: 999px;
    padding-inline: 20px;
}
[data-bs-theme="dark"] .tl-auth__card .btn-primary { --bs-btn-color: #07111f; --bs-btn-hover-color: #07111f; --bs-btn-active-color: #07111f; }
.tl-auth__card .btn-primary span { float: right; font-size: 1.2rem; }
.tl-code-input { font: 500 1.75rem var(--tl-mono) !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; padding-left: calc(.9rem + .3em) !important; }
.tl-auth__help { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--tl-line); color: var(--tl-ink-muted); font-size: .75rem; line-height: 1.6; }
.tl-auth__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; border-top: 1px solid var(--tl-line); color: var(--tl-ink-muted); font: 400 .625rem var(--tl-mono); }
@media (min-width: 1600px) { .tl-auth { padding-inline: max(88px, calc((100vw - 1440px) / 2)); } }
@media (max-width: 991.98px) {
    .tl-auth { gap: 0 32px; padding-inline: 28px; }
    .tl-auth__card { padding: 28px; }
    .tl-account { gap: .65rem; }
}
@media (max-width: 767.98px) {
    .tl-auth { grid-template-columns: minmax(0, 1fr); padding-inline: 24px; }
    .tl-auth__header { padding-block: 24px; }
    .tl-auth__header .tl-brand { gap: .4rem; }
    .tl-auth__header .tl-brand__logo { height: 21px; }
    .tl-auth__header .tl-brand__product { font-size: .625rem; }
    .tl-auth__brand { position: relative; padding-block: 8px 24px; min-height: 184px; justify-content: flex-end; }
    .tl-auth__art { position: absolute; width: 140px; height: 150px; right: -8px; top: -4px; margin: 0; }
    .tl-auth__ascii-anchor { width: 125px; }
    .tl-ascii-toggle { right: 8px; bottom: -12px; }
    .tl-auth__statement { font-size: 2.65rem; }
    .tl-auth__eyebrow { font-size: .5625rem; letter-spacing: .03em; margin-bottom: 12px; }
    .tl-auth__lead { font-size: .8125rem; margin-top: 14px; max-width: calc(100% - 96px); }
    .tl-auth__form { padding-block: 12px 36px; }
    .tl-auth__card { max-width: 520px; padding: 28px; border-radius: 20px; }
    .tl-auth__steps { margin-bottom: 24px; }
    .tl-auth__footer { font-size: .5625rem; }
    .tl-header__inner { gap: .75rem; }
}
@media (max-width: 374.98px) {
    .tl-auth { padding-inline: 16px; }
    .tl-auth__header .tl-brand__product { display: none; }
    .tl-auth__brand { padding-top: 100px; }
    .tl-auth__art { width: 112px; height: 96px; }
    .tl-auth__ascii-anchor { width: 90px; }
    .tl-auth__lead { max-width: none; }
    .tl-ascii-toggle { right: 0; bottom: 0; }
    .tl-auth__statement { font-size: 2.4rem; }
    .tl-auth__card { padding: 24px; }
    .tl-account { font-size: .6875rem; gap: .5rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .tl-header__inner { flex-wrap: wrap; min-height: 0; padding-top: 12px; gap: 0 1rem; }
    .tl-nav-wrap { order: 3; width: 100%; }
    .tl-nav { height: 44px; }
    :root { --tl-header-h: 97px; }
    :root.tl-admin { --tl-header-h: 97px; }
    .tl-admin .tl-header__inner { padding-bottom: 12px; }
}