/* TrueDEM Portal — layout and components.
   Load AFTER tokens.css (which declares every --td-* value, light in :root and dark under
   [data-theme="dark"]). Class names are the portal's own, so markup ports as-is. */

:root {
    --td-font: var(--font-sans);
    --td-gradient-hero: linear-gradient(120deg, var(--td-hero-from) 0%, var(--td-hero-mid) 55%, var(--td-hero-to) 130%);
    --td-gradient-bar: linear-gradient(90deg, var(--td-accent-cyan), var(--td-hero-to));
}

html, body {
    margin: 0;
    font-family: var(--td-font);
    color: var(--td-ink);
    background: var(--td-surface-alt);
}

a { color: var(--td-primary); }
a:hover { color: var(--td-primary-hover); }

/* ============================================================ page primitives */

.td-page {
    padding: var(--td-space-6) var(--td-space-8);
    max-width: var(--td-page-max);
    margin: 0 auto;
}

.td-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--td-space-1) 0;
}

.td-page-subtitle {
    color: var(--td-ink-soft);
    margin: 0 0 var(--td-space-6) 0;
}

.td-card {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    box-shadow: var(--td-shadow);
    padding: var(--td-space-5);
}

.td-status-healthy  { color: var(--td-status-healthy); }
.td-status-advisory { color: var(--td-status-advisory); }
.td-status-degraded { color: var(--td-status-degraded); }
.td-status-outage   { color: var(--td-status-outage); }

.td-status-bg-healthy  { background: var(--td-status-healthy); }
.td-status-bg-advisory { background: var(--td-status-advisory); }
.td-status-bg-degraded { background: var(--td-status-degraded); }
.td-status-bg-outage   { background: var(--td-status-outage); }

.td-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--td-radius-round);
    flex: none;
}

.load-error { color: var(--td-status-outage); }

/* ============================================================ buttons
   Pill-shaped, with a 1px lift on hover. Metrics are Kendo's (the portal renders
   Telerik buttons): md 4/8px padding at 14/20, lg 8/8px at 16/24. */

.td-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--td-space-1);
    position: relative;
    padding: 4px 8px;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-pill);
    background: var(--td-surface);
    color: var(--td-ink);
    font: inherit;
    font-size: .875rem;
    line-height: 1.4285714286;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease,
                background-color .15s ease, border-color .15s ease;
}

.td-button-lg {
    padding: 8px 8px;
    font-size: 1rem;
    line-height: 1.5;
}

.td-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: var(--td-shadow-button);
}

.td-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.td-button:focus-visible {
    outline: 2px solid var(--td-primary);
    outline-offset: 2px;
}

.td-button-primary {
    border-color: var(--td-primary);
    background: var(--td-primary);
    color: var(--td-on-primary);
}

.td-button-primary:hover {
    border-color: var(--td-primary-hover);
    background: var(--td-primary-hover);
    color: var(--td-on-primary);
    box-shadow: var(--td-shadow-button-primary);
}

/* Flat: no border or fill; hover tints with the text colour at 8% (Kendo's overlay). */
.td-button-flat {
    border-color: transparent;
    background: transparent;
    color: inherit;
}

.td-button-flat:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: none;
}

.td-button-outline {
    border-color: currentColor;
    background: transparent;
    color: var(--td-ink);
}

/* On the navy hero, in both themes. */
.td-button-light {
    border-color: var(--td-hero-ink);
    background: var(--td-hero-ink);
    color: var(--td-hero-from);
    font-weight: 600;
}

.td-button-outline-light {
    border-color: rgba(255, 255, 255, .7);
    background: transparent;
    color: var(--td-hero-ink);
}

.td-button-outline-light:hover {
    border-color: var(--td-hero-ink);
    background: var(--td-hero-glass);
    color: var(--td-hero-ink);
}

/* ============================================================ app shell (signed-in) */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--td-space-2);
    padding: var(--td-space-2);
    background: var(--td-surface);
    color: var(--td-ink);
    border-bottom: 1px solid var(--td-border);
    font-size: .875rem;
}

/* The brand's signature: a 2px cyan-to-blue line under the app bar. */
.app-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--td-gradient-bar);
}

.app-bar-section {
    display: flex;
    align-items: center;
    gap: var(--td-space-2);
}

.app-bar-spacer { flex: 1; }

.app-menu-toggle {
    display: flex;
    padding: .35rem;
    border: none;
    border-radius: var(--td-radius-sm);
    background: none;
    color: var(--td-ink-soft);
    cursor: pointer;
}

.app-menu-toggle:hover {
    background: var(--td-surface-alt);
    color: var(--td-ink);
}

.app-logo {
    display: flex;
    align-items: center;
    color: var(--td-ink);
}

.app-logo img { height: 28px; display: block; }

.app-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.app-content {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - 50px);
    background: var(--td-surface-alt);
}

.app-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--td-space-2) var(--td-space-5);
    background: var(--td-surface);
    border-top: 1px solid var(--td-border);
    color: var(--td-ink-faint);
    font-size: .8rem;
}

/* The navigation drawer (a Telerik Drawer in the portal: these are its metrics). */
.td-drawer {
    flex: none;
    width: var(--td-drawer-width);
    background: var(--td-surface);
    border-right: 1px solid var(--td-border);
    overflow-x: hidden;
}

.td-drawer.is-mini { width: var(--td-drawer-mini); }

.td-drawer-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.td-drawer-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: var(--td-space-2) var(--td-space-4);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--td-ink-soft);
    text-decoration: none;
    cursor: pointer;
}

.td-drawer-item:hover {
    background: var(--td-surface-alt);
    color: var(--td-ink);
}

.td-drawer-item.is-selected,
.td-drawer-item.is-selected:hover {
    background: var(--td-primary-soft);
    color: var(--td-primary);
}

.drawer-header {
    padding: .35rem var(--td-space-4) .1rem;
    min-height: 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--td-ink-faint);
}

.drawer-text { white-space: nowrap; }

/* ============================================================ public shell */

.pub-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--td-surface-alt);
}

.pub-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--td-space-3) var(--td-space-8);
    background: var(--td-surface);
    border-bottom: 1px solid var(--td-border);
}

.pub-logo { display: flex; align-items: center; color: var(--td-ink); }
.pub-logo img { height: 32px; display: block; }

.pub-actions {
    display: flex;
    align-items: center;
    gap: var(--td-space-2);
}

.pub-main { flex: 1; }

.pub-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--td-space-4) var(--td-space-8);
    border-top: 1px solid var(--td-border);
    background: var(--td-surface);
    color: var(--td-ink-faint);
    font-size: .85rem;
}

.pub-footer a {
    margin-left: var(--td-space-4);
    color: var(--td-ink-soft);
    text-decoration: none;
}

.pub-footer a:hover { color: var(--td-primary); }

/* The official logo's navy lettering vanishes on dark: render it as a white mark. */
[data-theme="dark"] .pub-logo img,
[data-theme="dark"] .app-logo img,
[data-theme="dark"] .boot-logo {
    filter: brightness(0) invert(1);
}

/* ============================================================ hero */

.hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem var(--td-space-8) 5rem;
    background: var(--td-gradient-hero);
    color: var(--td-hero-ink);
}

.hero-decor { position: absolute; inset: 0; pointer-events: none; }

.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); }

.hero-glow-1 {
    width: 520px; height: 520px; left: -140px; top: -180px;
    background: radial-gradient(circle, rgba(0, 179, 214, .4) 0%, transparent 65%);
}

.hero-glow-2 {
    width: 640px; height: 640px; right: -180px; bottom: -260px;
    background: radial-gradient(circle, rgba(10, 130, 196, .55) 0%, transparent 65%);
}

/* The dot field: 1px dots on a 26px grid, faded out toward the edges. */
.hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 75% 90% at 50% 40%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 40%, black 20%, transparent 75%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--td-hero-max);
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    margin: 0 0 var(--td-space-4);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero p {
    max-width: var(--td-lede-max);
    margin: 0 auto var(--td-space-8);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--td-hero-ink-muted);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--td-space-3);
    justify-content: center;
}

/* Floating glass stat cards (hidden under 1100px). */
.hero-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 190px;
    padding: .9rem 1.1rem;
    border: 1px solid var(--td-hero-glass-line);
    border-radius: var(--td-radius-glass);
    background: var(--td-hero-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--td-shadow-glass);
    animation: hero-float 7s ease-in-out infinite;
}

.hero-card-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.hero-card-value { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.hero-trend-up { font-size: .75rem; font-weight: 700; color: var(--td-hero-signal); vertical-align: middle; }
.hero-card-sub { font-size: .78rem; color: rgba(255, 255, 255, .7); }

.hero-status-dot {
    width: 10px; height: 10px;
    border-radius: var(--td-radius-round);
    background: var(--td-hero-signal);
    box-shadow: 0 0 10px rgba(110, 245, 200, .9);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(110, 245, 200, .6); }
    50% { box-shadow: 0 0 14px rgba(110, 245, 200, 1); }
}

@media (max-width: 1100px) { .hero-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-card, .hero-status-dot { animation: none; } }

/* ============================================================ sections */

.home-section { margin: var(--td-space-10) 0; }
.home-section-head h2 { margin: 0 0 var(--td-space-1); font-size: 1.35rem; font-weight: 700; }
.home-section-head p { margin: 0 0 1.25rem; color: var(--td-ink-soft); }

/* ============================================================ theme toggle */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-round);
    background: var(--td-surface);
    color: var(--td-ink-soft);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.theme-toggle:hover {
    color: var(--td-primary);
    border-color: var(--td-primary);
    transform: translateY(-1px);
}

/* ============================================================ user menu */

.user-menu { position: relative; }

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 18rem;
    padding: .35rem .6rem;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-sm);
    background: transparent;
    color: var(--td-ink-soft);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] {
    background: var(--td-surface-alt);
    color: var(--td-ink);
}

.user-menu-toggle:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }

.user-menu-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1001;
    width: min(20rem, calc(100vw - 2rem));
    padding: .75rem 0 .25rem;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    background: var(--td-surface);
    color: var(--td-ink);
    box-shadow: var(--td-shadow-lift);
}

.user-menu-identity {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0 1rem .75rem;
    border-bottom: 1px solid var(--td-border);
}

.user-menu-tenant { color: var(--td-ink-faint); font-size: .8rem; }

.user-menu-section {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--td-border);
}

.user-menu-label {
    margin-bottom: .4rem;
    color: var(--td-ink-faint);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.user-menu-roles { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }

.user-menu-role {
    padding: .15rem .55rem;
    border-radius: var(--td-radius-pill);
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-size: .8rem;
    font-weight: 600;
}

.user-menu-signout { margin: 0; padding: .25rem .5rem 0; }
.user-menu-signout .td-button { width: 100%; justify-content: flex-start; }

/* ============================================================ range picker */

.range-picker {
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-sm);
    background: var(--td-surface);
}

.range-option {
    padding: .4rem .8rem;
    border: none;
    border-right: 1px solid var(--td-border);
    background: transparent;
    color: var(--td-ink-soft);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.range-option:last-child { border-right: none; }
.range-option:hover { background: var(--td-surface-alt); color: var(--td-ink); }
.range-option:focus-visible { outline: 2px solid var(--td-primary); outline-offset: -2px; }

.range-option[aria-pressed="true"],
.range-option[aria-pressed="true"]:hover {
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-weight: 600;
}

/* ============================================================ stat tiles */

.dev-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--td-space-3);
}

.dev-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem var(--td-space-4);
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-left: 3px solid var(--td-primary);
    border-radius: var(--td-radius);
}

.dev-stat.is-warn { border-left-color: var(--td-status-advisory); }
.dev-stat.is-bad { border-left-color: var(--td-status-degraded); }

.dev-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dev-stat-label {
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--td-ink-faint);
}

/* ============================================================ health tiles */

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--td-space-4);
}

.health-tile { display: flex; flex-direction: column; gap: .35rem; }
.health-tile-head { display: flex; align-items: center; gap: var(--td-space-2); }
.health-tile-name { font-weight: 600; }

.health-tile-status {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.health-tile-message { font-size: .85rem; line-height: 1.4; color: var(--td-ink-soft); }
.health-tile-meta { margin-top: auto; font-size: .8rem; color: var(--td-ink-faint); }

/* ============================================================ dashboard cards and tiles */

.dash-category {
    margin: var(--td-space-6) 0 var(--td-space-3);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--td-ink-faint);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--td-space-4);
}

.dash-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: var(--td-ink);
    text-decoration: none;
    border-left: 3px solid var(--td-primary);
    transition: box-shadow .15s ease, transform .15s ease;
}

.dash-card:hover {
    color: var(--td-ink);
    box-shadow: var(--td-shadow-lift);
    transform: translateY(-2px);
}

.dash-title { font-weight: 700; }
.dash-desc { font-size: .875rem; line-height: 1.4; color: var(--td-ink-soft); }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--td-space-4);
}

.dash-tile { display: flex; flex-direction: column; min-height: 220px; }
.dash-tile-title { margin: 0 0 var(--td-space-3); font-size: .95rem; font-weight: 700; color: var(--td-ink-soft); }

.tile-coming-soon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--td-space-2);
    border: 1px dashed var(--td-border);
    border-radius: var(--td-radius-sm);
    color: var(--td-ink-faint);
    font-size: .85rem;
}

.chart-meta {
    display: flex;
    align-items: center;
    gap: var(--td-space-2);
    margin-top: var(--td-space-2);
    font-size: .75rem;
    color: var(--td-ink-faint);
}

/* ============================================================ tags and badges */

.dev-tag {
    margin-left: .4rem;
    padding: .1rem .4rem;
    border-radius: var(--td-radius-sm);
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-size: .7rem;
}

.cache-badge {
    padding: .1rem .5rem;
    border-radius: var(--td-radius-pill);
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-weight: 600;
}

.dev-badge {
    padding: .15rem .4rem;
    border-radius: 4px;
    background: var(--td-gradient-bar);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
}

/* ============================================================ region cards */

.region-card { padding: .9rem var(--td-space-4); }
.region-head { display: flex; align-items: center; gap: var(--td-space-2); }
.region-name { flex: 1; font-weight: 600; }
.region-count { font-size: .8rem; color: var(--td-ink-faint); }

.region-incidents {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: var(--td-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.region-incidents li { font-size: .85rem; line-height: 1.35; }
.incident-workload { margin-right: .4rem; font-weight: 600; }
.incident-title { color: var(--td-ink-soft); }

.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--td-space-4);
    font-size: .8rem;
    color: var(--td-ink-soft);
}

.map-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

.legend-dot {
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: var(--td-radius-round);
    box-shadow: 0 0 0 1px var(--td-border);
}

/* ============================================================ boot splash */

.boot-splash {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    background: var(--td-surface);
}

.boot-logo { height: 46px; animation: boot-breathe 2.2s ease-in-out infinite; }

.boot-bar {
    width: 240px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--td-radius-pill);
    background: var(--td-surface-alt);
    box-shadow: inset 0 0 0 1px var(--td-border);
}

.boot-bar-fill {
    height: 100%;
    min-width: 6px;
    border-radius: var(--td-radius-pill);
    background: var(--td-gradient-bar);
}

.boot-status {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--td-ink-faint);
}

/* Silent by default: the logo and the bar say it is loading. Words only when it is slow: hidden for the first 8 seconds,
   then shown, in CSS alone (the CSP allows no inline script). */
.boot-status-slow { visibility: hidden; animation: boot-slow .3s ease-out 8s forwards; }

@keyframes boot-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes boot-slow { from { visibility: visible; opacity: 0; } to { visibility: visible; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-logo { animation: none; } .boot-status-slow { animation-duration: 1ms; } }

/* ============================================================ Telerik (Kendo) bridge
   For apps built on Telerik UI for Blazor (or Kendo UI): load AFTER the Kendo default theme.
   Every Kendo colour points at a --td-* token, so Telerik components follow the theme and
   the light/dark switch. Mapping --kendo-color-primary alone is not enough: Kendo also
   reads its *-on-surface / *-subtle variants (the loader is drawn with primary-on-surface)
   and falls back to its own orange (#ff6358). */

:root {
    --kendo-color-primary: var(--td-primary);
    --kendo-color-primary-hover: var(--td-primary-hover);
    --kendo-color-primary-active: var(--td-primary-hover);
    --kendo-color-primary-emphasis: var(--td-primary);
    --kendo-color-primary-subtle: var(--td-primary-soft);
    --kendo-color-on-primary: var(--td-on-primary);
    --kendo-color-primary-on-surface: var(--td-primary);
    --kendo-color-primary-on-subtle: var(--td-primary);
    --kendo-color-primary-subtle-hover: var(--td-primary-soft);
    --kendo-color-primary-subtle-active: var(--td-primary-soft);

    --kendo-color-surface: var(--td-surface-alt);
    --kendo-color-app-surface: var(--td-surface);
    --kendo-color-surface-alt: var(--td-surface);
    --kendo-color-on-app-surface: var(--td-ink);
    --kendo-color-subtle: var(--td-ink-soft);
    --kendo-color-border: var(--td-border);
    --kendo-color-border-alt: var(--td-border);

    --kendo-color-base: var(--td-surface);
    --kendo-color-base-hover: var(--td-surface-alt);
    --kendo-color-base-active: var(--td-surface-alt);
    --kendo-color-base-subtle: var(--td-surface-alt);
    --kendo-color-base-subtle-hover: var(--td-border);
    --kendo-color-on-base: var(--td-ink);
    --kendo-color-base-emphasis: var(--td-ink-soft);
    --kendo-color-base-on-surface: var(--td-ink);
    --kendo-color-base-on-subtle: var(--td-ink);
    --kendo-color-base-subtle-active: var(--td-border);

    --kendo-color-inverse: var(--td-navy);
    --kendo-color-on-inverse: var(--td-surface);
    --kendo-color-inverse-hover: var(--td-ink);
    --kendo-color-inverse-active: var(--td-ink);
    --kendo-color-inverse-emphasis: var(--td-ink-soft);
    --kendo-color-inverse-on-surface: var(--td-navy);
    --kendo-color-inverse-subtle: var(--td-surface-alt);
    --kendo-color-inverse-on-subtle: var(--td-ink);

    --kendo-color-success: var(--td-status-healthy);
    --kendo-color-warning: var(--td-status-advisory);
    --kendo-color-error: var(--td-status-outage);
    --kendo-color-success-on-surface: var(--td-status-healthy);
    --kendo-color-warning-on-surface: var(--td-status-advisory);
    --kendo-color-error-on-surface: var(--td-status-outage);
    --kendo-color-info-on-surface: var(--td-primary);
    --kendo-color-success-subtle: color-mix(in srgb, var(--td-status-healthy) 14%, var(--td-surface));
    --kendo-color-warning-subtle: color-mix(in srgb, var(--td-status-advisory) 14%, var(--td-surface));
    --kendo-color-error-subtle: color-mix(in srgb, var(--td-status-outage) 14%, var(--td-surface));
    --kendo-color-info-subtle: var(--td-primary-soft);
    --kendo-color-success-on-subtle: var(--td-status-healthy);
    --kendo-color-warning-on-subtle: var(--td-ink);
    --kendo-color-error-on-subtle: var(--td-status-outage);
    --kendo-color-info-on-subtle: var(--td-primary);

    --kendo-font-family: var(--td-font);
    --kendo-border-radius-md: var(--td-radius-sm);
}

.k-button {
    border-radius: var(--td-radius-pill);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease,
                background-color .15s ease, border-color .15s ease;
}

.k-button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--td-shadow-button); }
.k-button-solid-primary:hover, .k-button-primary:hover { box-shadow: var(--td-shadow-button-primary); }
.k-button:active { transform: translateY(0); box-shadow: none; }

/* Buttons inside inputs and pickers keep their rectangle and do not lift. */
.k-input-button,
.k-input-spinner .k-button,
.k-picker .k-button,
.k-spinner-increase,
.k-spinner-decrease {
    border-radius: var(--td-radius-sm);
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Telerik Drawer and AppBar, styled as the portal's. */
.app-bar.k-appbar { box-shadow: none; }
.k-drawer { background: var(--td-surface); border-right: 1px solid var(--td-border); }
.k-drawer-item { gap: .6rem; color: var(--td-ink-soft); }
.k-drawer-item.k-selected, .k-drawer-item.k-selected:hover { background: var(--td-primary-soft); color: var(--td-primary); }