/*
 * This site's own pages: markdown, docs, sign-in, errors, cookie preferences, the home page, and the admin pages.
 *
 * Everything else comes from the dashboard kit's stylesheets, loaded first from /css/kit/: the design tokens for light
 * and dark themes, base typography and .tdk-button, the app shell (header, sidebar, theme toggle, brand text), and
 * .tdk-card. They're copied from tyler-security-automation-bootstrap (web/packages/dashboard-kit/src/styles) by
 * scripts/Sync-DashboardKit.ps1. This file uses only kit tokens (--tdk-*), so a token change in the kit restyles this
 * site along with the team's dashboards.
 */

/* ---- Shell details the dashboard sets in its own app ---- */

.site-brand {
  color: inherit;
  text-decoration: none;
}

/* The white Tyler mark on an accent tile in light theme, bare on the dark header, as in the dashboard. */
.site-logo {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 3px;
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-shell-accent);
}

:root[data-theme='dark'] .site-logo {
  padding: 0;
  background: transparent;
}

/* The theme toggle carries both icons; the theme picks one, so it's right before scripts run. */
:root[data-theme='dark'] .site-theme-dark,
:root:not([data-theme='dark']) .site-theme-light {
  display: none;
}

.site-sign-out {
  display: contents;
  margin: 0;
}

.tdk-shell__user-item .tdk-icon {
  flex: none;
}

/* Elevated access: the avatar ring and Admin badge come from the kit's shell.css, as in the dashboard.
 * The header keeps its normal colors (no tdk-shell__header--elevated); the badge and ring are enough. */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-space-2) var(--tdk-space-6);
}

.site-footer-links {
  margin-left: auto;
}

.site-footer a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The content area already pads and centers; the older .container wrapper is a no-op inside it. */
.container {
  width: 100%;
}

/* ---- Status banners: demo mode and elevated access ---- */

.status-banner {
  display: flex;
  align-items: center;
  gap: var(--tdk-space-3);
  margin: calc(-1 * var(--tdk-space-2)) 0 var(--tdk-space-5);
  padding: var(--tdk-space-2) var(--tdk-space-4);
  border-radius: var(--tdk-radius-md);
  font-size: var(--tdk-text-sm);
}

.banner-tag {
  flex: none;
  padding: 1px var(--tdk-space-2);
  border-radius: var(--tdk-radius-pill);
  font-size: var(--tdk-text-xs);
  font-weight: var(--tdk-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-banner-demo {
  border: 1px solid var(--tdk-color-border-subtle);
  background: var(--tdk-color-surface-sunken);
  color: var(--tdk-color-text-secondary);
}

.status-banner-demo .banner-tag {
  background: var(--tdk-color-text);
  color: var(--tdk-color-surface);
}

.status-banner-elevated {
  border: 1px solid var(--tdk-sev-critical);
  background: color-mix(in srgb, var(--tdk-sev-critical) 12%, var(--tdk-color-surface));
  color: var(--tdk-color-text);
}

.status-banner-elevated .banner-tag {
  margin-left: auto;
  background: var(--tdk-sev-critical);
  color: var(--tdk-sev-critical-on);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: var(--tdk-space-1);
  padding: 1px var(--tdk-space-2);
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-color-surface-sunken);
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-xs);
  font-weight: var(--tdk-weight-semibold);
}

.role-badge-admin {
  background: var(--tdk-sev-critical);
  color: var(--tdk-sev-critical-on);
}

/* ---- Markdown pages: README, informational pages, docs ---- */

.content .markdown-body {
  max-width: 60rem;
}

.markdown-body {
  color: var(--tdk-color-text);
  line-height: var(--tdk-leading-normal, 1.6);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--tdk-color-heading);
  font-family: var(--tdk-font-heading);
  line-height: 1.25;
  margin: 1.75em 0 0.6em;
}

.markdown-body h1 {
  margin-top: 0;
  font-size: var(--tdk-text-2xl);
}

.markdown-body h2 {
  padding-bottom: var(--tdk-space-2);
  border-bottom: 1px solid var(--tdk-color-border-subtle);
  font-size: var(--tdk-text-xl);
}

.markdown-body h3 {
  font-size: var(--tdk-text-lg);
}

.markdown-body a {
  color: var(--tdk-color-link);
}

.markdown-body a:hover {
  color: var(--tdk-color-primary-hover);
}

.markdown-body code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--tdk-color-border-subtle);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-color-surface-sunken);
  font-family: var(--tdk-font-mono);
  font-size: 0.88em;
}

.markdown-body pre {
  overflow-x: auto;
  padding: var(--tdk-space-3) var(--tdk-space-4);
  border: 1px solid var(--tdk-color-border-subtle);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-color-surface-sunken);
  line-height: 1.5;
}

.markdown-body pre code {
  padding: 0;
  border: 0;
  background: none;
}

.markdown-body blockquote {
  margin: 1em 0;
  padding: var(--tdk-space-2) var(--tdk-space-4);
  border-left: 4px solid var(--tdk-color-primary);
  border-radius: 0 var(--tdk-radius-md) var(--tdk-radius-md) 0;
  background: var(--tdk-color-primary-soft);
  color: var(--tdk-color-text);
}

.markdown-body blockquote > :first-child {
  margin-top: 0;
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

/* Tables look like the dashboard's process tables. */
.markdown-body .table-wrap {
  margin: 1em 0;
  overflow-x: auto;
}

.markdown-body table {
  border-collapse: collapse;
  border: 1px solid var(--tdk-color-border-subtle);
  background: var(--tdk-panel-bg);
  font-size: var(--tdk-text-sm);
}

.markdown-body th {
  padding: var(--tdk-space-2) var(--tdk-space-3);
  border-bottom: 2px solid var(--tdk-color-border);
  background: var(--tdk-color-surface-alt);
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-xs);
  font-weight: var(--tdk-weight-bold);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.markdown-body td {
  padding: var(--tdk-space-2) var(--tdk-space-3);
  border-bottom: 1px solid var(--tdk-color-border-subtle);
  vertical-align: top;
}

.markdown-body tr:nth-child(even) td {
  background: var(--tdk-color-hover-wash);
}

.markdown-body img {
  max-width: 100%;
}

/* Copy button on code blocks, added by site.js. */
.markdown-body .code-block {
  position: relative;
}

.markdown-body .code-block pre {
  padding-right: 5rem;
}

.copy-button {
  position: absolute;
  top: var(--tdk-space-2);
  right: var(--tdk-space-2);
  padding: 2px var(--tdk-space-2);
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-color-surface);
  color: var(--tdk-color-text-secondary);
  font: inherit;
  font-size: var(--tdk-text-xs);
  cursor: pointer;
  opacity: 1;
}

.copy-button:hover,
.copy-button:focus-visible {
  border-color: var(--tdk-color-primary);
  opacity: 1;
}

.copy-button.copied {
  border-color: var(--tdk-color-primary);
  background: var(--tdk-color-primary);
  color: var(--tdk-color-primary-contrast);
}

/* ---- Docs: sidebar layout ---- */

.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--tdk-space-8);
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--tdk-header-height) + var(--tdk-space-4));
  max-height: calc(100vh - var(--tdk-header-height) - var(--tdk-space-8));
  overflow-y: auto;
  font-size: var(--tdk-text-sm);
}

.docs-nav {
  margin-top: var(--tdk-space-3);
}

.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav a {
  display: block;
  padding: var(--tdk-space-1) var(--tdk-space-3);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-color-text);
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--tdk-color-hover-wash);
}

.docs-nav a.active {
  background: var(--tdk-color-primary-soft);
  color: var(--tdk-color-link);
  font-weight: var(--tdk-weight-semibold);
}

.docs-nav-home {
  margin: var(--tdk-space-2) 0 var(--tdk-space-1);
  color: var(--tdk-color-text-muted) !important;
  font-size: var(--tdk-text-xs);
  font-weight: var(--tdk-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-toc {
  margin: 2px 0 var(--tdk-space-2) var(--tdk-space-3) !important;
  border-left: 1px solid var(--tdk-color-border-subtle);
}

.docs-toc a {
  padding: 2px var(--tdk-space-3);
  border-radius: 0;
  color: var(--tdk-color-text-secondary);
}

.docs-toc-3 a {
  padding-left: var(--tdk-space-6);
  font-size: var(--tdk-text-xs);
}

.docs-body {
  min-width: 0;
}

.docs-body table {
  width: 100%;
}

/* Keeps names from wrapping at every segment when the description is long. */
.docs-body td:first-child {
  min-width: 12rem;
}

/* Reference tables (first column is just a setting name): a third of the width, so most names fit on one line. */
.docs-body table:has(td:first-child > code:only-child) td:first-child {
  width: 33%;
}

/* Fallback for long names with no <wbr> points. */
.docs-body p > code,
.docs-body li > code {
  overflow-wrap: anywhere;
}

.docs-body :target {
  scroll-margin-top: calc(var(--tdk-header-height) + var(--tdk-space-4));
  animation: docs-target 1.6s ease-out;
}

@keyframes docs-target {
  from {
    background: var(--tdk-color-primary-soft);
  }

  to {
    background: transparent;
  }
}

.docs-pager {
  display: flex;
  gap: var(--tdk-space-4);
  margin-top: var(--tdk-space-10);
  padding-top: var(--tdk-space-5);
  border-top: 1px solid var(--tdk-color-border-subtle);
}

.docs-pager a {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--tdk-space-3) var(--tdk-space-4);
  border: 1px solid var(--tdk-panel-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-panel-bg);
  color: var(--tdk-color-link);
  font-weight: var(--tdk-weight-semibold);
  text-decoration: none;
}

.docs-pager a:hover {
  border-color: var(--tdk-color-primary);
}

.docs-pager span {
  color: var(--tdk-color-text-muted);
  font-size: var(--tdk-text-xs);
  font-weight: var(--tdk-weight-regular);
}

.docs-pager-next {
  margin-left: auto;
  text-align: right;
}

/* ---- Docs: home ---- */

.docs-lead {
  margin-top: 0;
  color: var(--tdk-color-text-secondary);
}

.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--tdk-space-4);
  margin: var(--tdk-space-8) 0 0;
  padding: 0;
  list-style: none;
}

/* A card in the kit's style: panel fill, hairline edge, accent top. */
.docs-card {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-space-1);
  height: 100%;
  padding: var(--tdk-space-4) var(--tdk-space-5);
  border: 1px solid var(--tdk-panel-border);
  border-top: 3px solid var(--tdk-color-primary);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-panel-bg);
  box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight);
  color: var(--tdk-color-text);
  text-decoration: none;
  transition:
    border-color var(--tdk-transition),
    box-shadow var(--tdk-transition);
}

.docs-card:hover,
.docs-card:focus-visible {
  border-color: var(--tdk-color-primary);
  box-shadow: var(--tdk-shadow-md);
}

.docs-card-title {
  color: var(--tdk-color-heading);
  font-size: var(--tdk-text-md);
  font-weight: var(--tdk-weight-semibold);
}

.docs-card-summary {
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-sm);
}

/* ---- Docs: search ---- */

.docs-search {
  position: relative;
}

.docs-search[hidden] {
  display: none;
}

.docs-search input {
  width: 100%;
  padding: var(--tdk-space-2) 2.2rem var(--tdk-space-2) var(--tdk-space-3);
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-color-surface);
  color: var(--tdk-color-text);
  font: inherit;
}

.docs-search input:focus {
  border-color: var(--tdk-color-focus);
  outline: 2px solid var(--tdk-color-focus);
  outline-offset: 1px;
}

.docs-search-key {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  padding: 0 0.4rem;
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-color-text-muted);
  font: var(--tdk-text-xs) var(--tdk-font-mono);
  pointer-events: none;
}

.docs-search input:focus ~ .docs-search-key {
  display: none;
}

.docs-search-hero {
  max-width: 640px;
  margin-top: var(--tdk-space-6);
  font-size: var(--tdk-text-md);
}

.docs-search-hero input {
  padding: var(--tdk-space-3) 2.5rem var(--tdk-space-3) var(--tdk-space-4);
}

.docs-search-hero .docs-search-key {
  top: 0.85rem;
}

.docs-results {
  position: absolute;
  z-index: var(--tdk-z-overlay);
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 420px);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--tdk-space-1);
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-color-surface);
  box-shadow: var(--tdk-shadow-lg);
  list-style: none;
}

.docs-results a {
  display: block;
  padding: var(--tdk-space-2) var(--tdk-space-3);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-color-text);
  text-decoration: none;
}

.docs-results [aria-selected='true'] a,
.docs-results a:hover {
  background: var(--tdk-color-primary-soft);
}

.docs-result-path {
  display: block;
  color: var(--tdk-color-link);
  font-size: var(--tdk-text-sm);
  font-weight: var(--tdk-weight-semibold);
}

.docs-result-snippet {
  display: block;
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-xs);
  line-height: 1.45;
}

.docs-results mark {
  border-radius: 2px;
  background: color-mix(in srgb, var(--tdk-sev-medium) 35%, transparent);
  color: inherit;
}

.docs-results-empty {
  padding: var(--tdk-space-2) var(--tdk-space-3);
  color: var(--tdk-color-text-muted);
  font-size: var(--tdk-text-sm);
}

/* ---- Docs: filter box above long tables ---- */

.table-filter {
  display: flex;
  align-items: center;
  gap: var(--tdk-space-3);
  margin: var(--tdk-space-4) 0 calc(-1 * var(--tdk-space-2));
}

.table-filter + .table-wrap {
  margin-top: var(--tdk-space-4);
}

.table-filter input {
  flex: 0 1 320px;
  padding: var(--tdk-space-1) var(--tdk-space-3);
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-color-surface);
  color: var(--tdk-color-text);
  font: inherit;
  font-size: var(--tdk-text-sm);
}

.table-filter input:focus {
  outline: 2px solid var(--tdk-color-focus);
  outline-offset: 1px;
}

.table-filter-count {
  color: var(--tdk-color-text-muted);
  font-size: var(--tdk-text-xs);
}

.markdown-body table.table-filtered tr td {
  background: transparent;
}

.markdown-body table.table-filtered tr.row-alt td {
  background: var(--tdk-color-hover-wash);
}

/* ---- Demo sign-in: one card per persona ---- */

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--tdk-space-4);
  max-width: 60rem;
  margin-top: var(--tdk-space-6);
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tdk-space-1);
  margin: 0;
  padding: var(--tdk-space-5);
  border: 1px solid var(--tdk-panel-border);
  border-top: 3px solid var(--tdk-color-primary);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-panel-bg);
  box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight);
}

.persona-card-admin {
  border-top-color: var(--tdk-sev-medium);
}

.persona-card .avatar {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--tdk-space-2);
  border-radius: 50%;
  background: var(--tdk-color-primary);
  color: var(--tdk-color-primary-contrast);
  font-weight: var(--tdk-weight-bold);
}

.persona-card-admin .avatar {
  background: var(--tdk-sev-medium);
  color: var(--tdk-sev-medium-on);
}

.persona-name {
  color: var(--tdk-color-heading);
  font-size: var(--tdk-text-md);
  font-weight: var(--tdk-weight-semibold);
}

.persona-email {
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-sm);
}

.persona-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-space-1);
  margin-bottom: var(--tdk-space-3);
}

/* ---- Error pages ---- */

.error-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--tdk-radius-lg);
  background: linear-gradient(
    120deg,
    var(--tdk-shell-accent),
    color-mix(in srgb, var(--tdk-shell-accent) 60%, var(--tdk-lane-risk))
  );
  color: #ffffff;
}

.error-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-space-8);
  padding: var(--tdk-space-10) var(--tdk-space-8);
}

.error-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.error-code {
  margin: 0;
  font-size: var(--tdk-text-3xl);
  font-weight: var(--tdk-weight-bold);
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.error-hero h1 {
  margin: var(--tdk-space-2) 0 var(--tdk-space-3);
  color: #ffffff;
  font-size: var(--tdk-text-2xl);
}

.error-message {
  margin: 0 0 var(--tdk-space-6);
  font-size: var(--tdk-text-md);
  opacity: 0.95;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-space-3);
}

/* On the accent panel: a white primary button and an outlined secondary. */
.error-hero .tdk-button {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--tdk-shell-accent);
}

.error-hero .tdk-button--secondary {
  background: transparent;
  color: #ffffff;
}

.error-watermark {
  flex: none;
  width: 220px;
  height: 220px;
  opacity: 0.85;
}

.error-details {
  padding-top: var(--tdk-space-5);
  color: var(--tdk-color-text-secondary);
}

.error-details p {
  margin: 0 0 var(--tdk-space-1);
}

.error-details code {
  padding: var(--tdk-space-1) var(--tdk-space-2);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-color-surface-sunken);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-text-sm);
  overflow-wrap: anywhere;
}

/* ---- Cookie banner: at the bottom of the screen until the visitor chooses. Not modal. ---- */

.cookie-banner {
  position: sticky;
  z-index: var(--tdk-z-overlay);
  bottom: 0;
  border-top: 3px solid var(--tdk-color-primary);
  background: var(--tdk-color-surface);
  box-shadow: var(--tdk-shadow-lg);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tdk-space-5);
  max-width: var(--tdk-content-max);
  margin: 0 auto;
  padding: var(--tdk-space-4) var(--tdk-space-6);
}

.cookie-banner-text {
  flex: 1 1 420px;
}

.cookie-banner h2 {
  margin: 0 0 var(--tdk-space-1);
  color: var(--tdk-color-heading);
  font-size: var(--tdk-text-md);
}

.cookie-banner p {
  margin: 0;
  color: var(--tdk-color-text-secondary);
  font-size: var(--tdk-text-sm);
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-space-2);
}

/* ---- Cookie preferences ---- */

.cookie-status {
  padding: var(--tdk-space-2) var(--tdk-space-4);
  border-left: 3px solid var(--tdk-color-primary);
  background: var(--tdk-color-primary-soft);
}

.cookie-preferences {
  max-width: 820px;
}

.cookie-category {
  margin: 0 0 var(--tdk-space-4);
  padding: var(--tdk-space-4) var(--tdk-space-5);
  border: 1px solid var(--tdk-panel-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-panel-bg);
}

.cookie-category-head {
  display: flex;
  align-items: center;
  gap: var(--tdk-space-3);
}

.cookie-category-head label {
  flex: 1;
  color: var(--tdk-color-heading);
  font-size: var(--tdk-text-md);
  font-weight: var(--tdk-weight-semibold);
}

.cookie-category p {
  margin: var(--tdk-space-2) 0;
  color: var(--tdk-color-text-secondary);
}

.cookie-category details {
  margin-top: var(--tdk-space-2);
  font-size: var(--tdk-text-sm);
}

.cookie-category summary {
  color: var(--tdk-color-link);
  cursor: pointer;
}

.cookie-category table {
  width: 100%;
  margin-top: var(--tdk-space-2);
  border-collapse: collapse;
}

.cookie-category th,
.cookie-category td {
  padding: var(--tdk-space-1) var(--tdk-space-2);
  border: 1px solid var(--tdk-color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.cookie-category th {
  background: var(--tdk-color-surface-alt);
}

.cookie-none {
  font-style: italic;
}

.cookie-toggle-state {
  color: var(--tdk-color-text-muted);
  font-size: var(--tdk-text-xs);
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-space-2);
  margin-top: var(--tdk-space-5);
}

/* A switch built from a checkbox: works without JavaScript, keeps native keyboard and screen-reader support. */
.cookie-toggle, .site-switch {
  position: relative;
  width: 2.6rem;
  height: 1.45rem;
  margin: 0;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-color-border);
  cursor: pointer;
  appearance: none;
  transition: background var(--tdk-transition);
}

.cookie-toggle::after, .site-switch::after {
  content: '';
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--tdk-transition);
}

.cookie-toggle:checked, .site-switch:checked {
  background: var(--tdk-color-primary);
}

.cookie-toggle:checked::after, .site-switch:checked::after {
  transform: translateX(1.12rem);
}

.cookie-toggle:disabled, .site-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cookie-toggle:focus-visible, .site-switch:focus-visible {
  outline: 2px solid var(--tdk-color-focus);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tdk-space-6);
  }

  .docs-sidebar {
    position: static;
    max-height: none;
  }

  .docs-results {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .error-watermark {
    position: absolute;
    right: -60px;
    bottom: -40px;
    width: 200px;
    height: 200px;
    opacity: 0.18;
  }

  .cookie-banner-actions .tdk-button {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-body :target {
    animation: none;
  }

  .cookie-toggle,
  .cookie-toggle::after {
    transition: none;
  }
}

/* ---- Admin pages: the JSON editor (Site/ConfigEditor.cs), AI skills, AI usage, API keys, roles, and the profile ---- */
/* Shared by every admin page; the class names are config-* because the JSON editor came first. */
.config-page h1 { margin: 0.25rem 0 0.4rem; font-size: 1.85rem; line-height: 1.25; }
.config-page h1 code { font-family: var(--tdk-font-mono); font-size: 0.9em; }
.config-page h2 { margin: 2rem 0 0.75rem; font-size: 1.25rem; }
.config-page code { font-family: var(--tdk-font-mono); font-size: 0.92em; }
.config-page a:not(.tdk-button) { color: var(--tdk-color-link); }

.config-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.config-lead { margin: 0 0 1.25rem; max-width: 46rem; color: var(--tdk-color-text-muted); }
.config-head .config-lead { margin-bottom: 0; }
.config-meta { margin: 0; font-size: 0.9rem; color: var(--tdk-color-text-muted); }
.config-subtitle, .config-record { font-weight: 400; color: var(--tdk-color-text-muted); }
.config-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--tdk-color-text-muted); }

.config-callout { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-left: 4px solid var(--tdk-color-primary); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-primary-soft); }
.config-callout p { margin: 0 0 0.4rem; }
.config-callout ul { margin: 0; padding-left: 1.25rem; }
.config-callout-success { border-left-color: var(--tdk-sev-low); background: var(--tdk-sev-low-bg); }
.config-callout-warning { border-left-color: var(--tdk-sev-medium); background: var(--tdk-sev-medium-bg); }
.config-callout-error { border-left-color: var(--tdk-sev-critical); background: var(--tdk-sev-critical-bg); }

/* Tables of documents and revisions */
.config-group h2 { font-family: var(--tdk-font-mono); font-size: 1.05rem; }
.config-table-wrap { overflow-x: auto; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); }
.config-table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.config-table th { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--tdk-color-border-subtle); background: var(--tdk-color-surface-alt); font-weight: 600; text-align: left; white-space: nowrap; }
.config-table td { padding: 0.6rem 0.8rem; border-top: 1px solid var(--tdk-color-border-subtle); vertical-align: top; }
.config-table tbody tr:first-child td { border-top: 0; }
.config-description, .config-by { font-size: 0.82rem; color: var(--tdk-color-text-muted); }
/* Names stay whole; on a narrow screen the table scrolls sideways instead. */
.config-table td > a > code, .config-table td > code { white-space: nowrap; }
.config-who { font-family: var(--tdk-font-mono); font-size: 0.92em; }
.config-row-actions { text-align: right; white-space: nowrap; }
.config-row-actions a + a { margin-left: 0.9rem; }
.config-badge { display: inline-block; padding: 0.05rem 0.6rem; border-radius: var(--tdk-radius-pill); background: var(--tdk-sev-low-bg); color: var(--tdk-sev-low-text); font-size: 0.8rem; font-weight: 600; }
.config-empty { padding: 2rem; border: 1px dashed var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); color: var(--tdk-color-text-muted); text-align: center; }
.config-empty p { margin: 0.25rem 0; }

/* Forms */
.config-form { display: flex; flex-direction: column; gap: 1.1rem; }
.config-form-narrow { max-width: 36rem; }
.config-filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; max-width: 36rem; margin: 0 0 1.25rem; }
.config-filter .config-field { flex: 1; min-width: 14rem; }
.config-field { display: flex; flex-direction: column; gap: 0.35rem; }
.config-field label { font-weight: 600; }
.config-optional { font-weight: 400; color: var(--tdk-color-text-muted); }
.config-hint { margin: 0; font-size: 0.85rem; color: var(--tdk-color-text-muted); }
.config-field input,
.config-field select { max-width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); color: var(--tdk-color-text); font: inherit; }
.config-json {
  width: 100%;
  height: 62vh;
  min-height: 22rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-color-surface-alt);
  color: var(--tdk-color-text);
  font-family: var(--tdk-font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}
.config-json[aria-invalid="true"] { border-color: var(--tdk-sev-critical); }
.config-statusbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; min-height: 1.4em; font-size: 0.82rem; color: var(--tdk-color-text-muted); }
.config-statusbar [data-state="valid"] { color: var(--tdk-sev-low-text); }
.config-statusbar [data-state="invalid"] { color: var(--tdk-sev-critical-text); }
.config-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.config-actions .config-danger-link { margin-left: auto; color: var(--tdk-sev-critical-text); }

/* Comparing revisions */
.config-diff-summary { margin: 0 0 0.5rem; font-size: 0.9rem; }
.diff-count-add { color: var(--tdk-sev-low-text); }
.diff-count-del { color: var(--tdk-sev-critical-text); }
.config-description-change del { background: var(--tdk-sev-critical-bg); }
.config-description-change ins { background: var(--tdk-sev-low-bg); text-decoration: none; }
.config-diff-wrap { margin-bottom: 1.25rem; overflow-x: auto; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); }
.config-diff { width: 100%; border-collapse: collapse; font-family: var(--tdk-font-mono); font-size: 0.82rem; line-height: 1.45; }
.config-diff td { padding: 0 0.6rem; vertical-align: top; white-space: pre; }
.config-diff .diff-num { width: 1%; color: var(--tdk-color-text-muted); text-align: right; user-select: none; }
.config-diff .diff-sign { width: 1%; padding: 0 0.25rem; user-select: none; }
.config-diff .diff-add { background: var(--tdk-sev-low-bg); }
.config-diff .diff-add .diff-sign { color: var(--tdk-sev-low-text); }
.config-diff .diff-del { background: var(--tdk-sev-critical-bg); }
.config-diff .diff-del .diff-sign { color: var(--tdk-sev-critical-text); }
.config-diff .diff-gap td { padding: 0.25rem 0.75rem; background: var(--tdk-color-surface-alt); color: var(--tdk-color-text-muted); font-family: var(--tdk-font-body); font-size: 0.8rem; }
.config-full { margin-top: 1.5rem; }
.config-full summary { font-weight: 600; cursor: pointer; }
.config-pre { max-height: 32rem; margin: 0.75rem 0 0; padding: 0.9rem 1rem; overflow: auto; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); background: var(--tdk-color-surface-alt); font-family: var(--tdk-font-mono); font-size: 0.82rem; line-height: 1.5; }

/* Administration (/admin): a card per tool */
.admin-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.admin-tool {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--tdk-color-border-subtle);
  border-top: 4px solid var(--tdk-color-primary);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-panel-bg);
  color: var(--tdk-color-text);
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.admin-tool:hover { border-color: var(--tdk-color-link); box-shadow: var(--tdk-shadow-md); color: var(--tdk-color-text); text-decoration: none; transform: translateY(-2px); }
.admin-tool:focus-visible { outline: 3px solid var(--tdk-color-primary); outline-offset: 3px; }
.admin-tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; border-radius: 10px; background: var(--tdk-color-primary-soft); color: var(--tdk-color-link); }
.admin-tool-title { font-size: 1.1rem; font-weight: 600; color: var(--tdk-color-link); }
.admin-tool-summary { flex: 1; font-size: 0.9rem; color: var(--tdk-color-text-muted); }
.admin-tool-status { margin-top: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--tdk-color-border-subtle); font-size: 0.85rem; font-weight: 600; }
.admin-tool-status-warning { color: var(--tdk-sev-medium-text); }
.admin-profile-note { color: var(--tdk-color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .admin-tool { transition: none; }
  .admin-tool:hover { transform: none; }
}

/* Profile (/profile) */
.profile-card { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--tdk-panel-border); border-top: 3px solid var(--tdk-color-primary); border-radius: var(--tdk-radius-md); background: var(--tdk-panel-bg); box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight); }
.profile-card-admin { border-top-color: var(--tdk-sev-medium); }
.profile-card .avatar { display: inline-grid; flex: none; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.3rem; font-weight: var(--tdk-weight-bold); background: var(--tdk-color-primary); color: var(--tdk-color-primary-contrast); }
.profile-card-admin .avatar { background: var(--tdk-sev-medium); color: var(--tdk-sev-medium-on); }
.profile-identity h1 { margin: 0; font-size: 1.6rem; }
.profile-email { margin: 0.1rem 0 0.5rem; color: var(--tdk-color-text-muted); }
.profile-identity .persona-roles { margin-bottom: 0; }
.profile-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 1rem; font-size: 0.925rem; }
.profile-facts dt { font-weight: 600; }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }

/* AI skills (/admin/ai-skills) and AI usage (/admin/ai-usage) */
.config-badge-off { background: var(--tdk-sev-none-bg); color: var(--tdk-sev-none-text); }
.config-badge-error { background: var(--tdk-sev-critical-bg); color: var(--tdk-sev-critical-text); }
.ai-context-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 1.5rem 0 0.5rem; }
.ai-context-head h3 { margin: 0; }
.ai-usage-give form { display: inline-block; }
.ai-usage-give form + form { margin-left: 0.35rem; }
.ai-usage-give .tdk-button { padding: 0.2rem 0.65rem; }

/* The range picker: .config-modes, as links. After `.config-page a` (above), which would otherwise colour them. */
.config-modes a { padding: 0.3rem 1rem; border-radius: var(--tdk-radius-pill); color: var(--tdk-color-link); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.config-page .config-modes a[aria-current="true"] { background: var(--tdk-color-primary); color: var(--tdk-color-primary-contrast); }
.config-modes a:focus-visible { outline: 2px solid var(--tdk-color-primary-hover); outline-offset: 2px; }
.ai-usage-activity { margin-bottom: 2rem; }
.ai-usage-activity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.ai-usage-activity-head h2 { margin: 0; }
.ai-usage-range { max-width: 100%; overflow-x: auto; }
.ai-usage-range a { white-space: nowrap; }
.ai-usage-asof { margin: -0.5rem 0 1rem; }
.ai-usage-export { margin-left: auto; }
.ai-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; gap: 1rem; margin-bottom: 1rem; }

/* The skill playground (Site/AiSkillPlayground.cs): a run panel on its own page and under the skill forms. */
.ai-playground { margin: 1.5rem 0; }
/* The kit's buttons are inline-flex, which would show a hidden Stop button. */
.ai-playground [hidden] { display: none; }
.ai-playground-output:empty { display: none; }
.ai-playground .tdk-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.ai-playground .tdk-card__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; align-items: start; }
.ai-playground-allowance { margin: 0; padding: 0.2rem 0.75rem; border-radius: var(--tdk-radius-pill); background: var(--tdk-color-surface-sunken); color: var(--tdk-color-text-secondary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ai-playground-allowance:empty { display: none; }
.ai-playground-allowance.is-at-limit { background: var(--tdk-sev-critical-bg); color: var(--tdk-sev-critical-text); }
.ai-playground-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-playground-how { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; font-size: 0.875rem; }
.ai-playground-result { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ai-playground-status { margin: 0; color: var(--tdk-color-text-secondary); font-size: 0.875rem; }
.ai-playground-status:empty { display: none; }
.ai-playground-output { min-height: 8rem; max-height: 32rem; margin: 0; padding: 0.75rem 1rem; overflow: auto; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface-sunken); color: var(--tdk-color-text); font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-playground-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ai-playground-badges:empty { display: none; }
.ai-playground-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0; font-size: 0.8125rem; }
.ai-playground-meta div { display: contents; }
.ai-playground-meta dt { color: var(--tdk-color-text-secondary); }
.ai-playground-meta dd { margin: 0; overflow-wrap: anywhere; }
.ai-playground-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 1rem; font-size: 0.875rem; }
.ai-playground-facts dt { color: var(--tdk-color-text-secondary); font-size: 0.75rem; }
.ai-playground-facts dd { margin: 0; }

/* ---- Charts (Site/SvgCharts.cs): server-rendered SVG, coloured by class only, since the CSP allows no style attributes.
   Series colours are the kit's categorical slots, each fixed to what it means: 1 within allowance, 2 extra requests,
   3-6 input, output, cache read, and cache write tokens (and their cost), 7 the error rate, 8 latency. Checked with the
   dataviz palette validator in light and dark. ---- */
.chart-card { margin-bottom: 1rem; min-width: 0; }
.chart-card .tdk-card__body { display: flex; flex-direction: column; gap: 0.75rem; }
.chart-mark--1 { fill: var(--tdk-chart-1); }
.chart-mark--2 { fill: var(--tdk-chart-2); }
.chart-mark--3 { fill: var(--tdk-chart-3); }
.chart-mark--4 { fill: var(--tdk-chart-4); }
.chart-mark--5 { fill: var(--tdk-chart-5); }
.chart-mark--6 { fill: var(--tdk-chart-6); }
.chart-mark--7 { fill: var(--tdk-chart-7); }
.chart-mark--8 { fill: var(--tdk-chart-8); }
/* Lines: 2px, round-ended; p95 is dashed, so it reads apart from the median without a second colour. */
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.chart-line--8 { stroke: var(--tdk-chart-8); }
.chart-line--dashed { stroke-dasharray: 5 4; }
.chart-mark--other { fill: var(--tdk-chart-de-emphasis); }
.chart-grid { stroke: var(--tdk-chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--tdk-chart-axis); stroke-width: 1; }
.chart-label { fill: var(--tdk-chart-label); font-size: calc(12px * var(--tdk-chart-font-scale, 1)); font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; }
.chart-band:hover .chart-hit, .chart-band.is-active .chart-hit { stroke: var(--tdk-chart-axis); stroke-width: 1; }
.chart-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
.chart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 18rem; }
/* 24 hours or 30 days: at least 24px a band, so each is a big enough target; a year by week, at least 14px. */
.chart-plot--dense { min-width: calc(52px + 720px); }
.chart-svg { display: block; overflow: visible; }
.chart-svg:focus-visible { outline: 2px solid var(--tdk-color-primary-hover); outline-offset: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--tdk-color-text-secondary); font-size: 0.8125rem; }
.chart-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-none { margin: 0; color: var(--tdk-color-text-secondary); }
.chart-rank { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
/* The kit's breakdown bars: name and value on one line, the bar under them at full width. */
.chart-rank__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.2rem 0.75rem; font-size: 0.875rem; }
.chart-rank__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-width: 0; }
.chart-rank__name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--tdk-weight-semibold); }
.chart-rank__detail { color: var(--tdk-color-text-secondary); font-size: 0.75rem; overflow-wrap: anywhere; }
.chart-rank__track { display: block; grid-column: 1 / -1; overflow: visible; }
.chart-rank__value { min-width: 3.5rem; color: var(--tdk-color-text); font-variant-numeric: tabular-nums; text-align: right; }
.chart-rank__row--other .chart-rank__label { color: var(--tdk-color-text-secondary); }
.chart-table summary { cursor: pointer; color: var(--tdk-color-link); font-size: 0.875rem; }
.chart-table .config-table-wrap { margin-top: 0.5rem; max-height: 24rem; overflow: auto; }
.chart-data td { font-variant-numeric: tabular-nums; text-align: right; }
.chart-data th[scope="row"] { font-weight: 400; }
.chart-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.chart-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); background: var(--tdk-chart-surface); }
.chart-kpi__label { color: var(--tdk-color-text-secondary); font-size: 0.8125rem; }
.chart-kpi__value { color: var(--tdk-color-text); font-size: 1.5rem; font-weight: var(--tdk-weight-semibold); font-variant-numeric: tabular-nums; }
.chart-kpi__caption { color: var(--tdk-color-text-secondary); font-size: 0.75rem; }
.chart-tooltip { position: absolute; z-index: var(--tdk-z-tooltip); max-width: 18rem; padding: 8px 10px; border: 1px solid var(--tdk-color-border-subtle); border-radius: 6px; background: var(--tdk-chart-surface); box-shadow: var(--tdk-shadow-md); color: var(--tdk-color-text); font-size: calc(12px * var(--tdk-chart-font-scale, 1)); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip__head { margin-bottom: 4px; color: var(--tdk-color-text-secondary); }
.chart-tooltip__row { display: flex; align-items: center; gap: 6px; }
.chart-tooltip__row strong { font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  .chart-mark, .chart-key rect, .chart-tooltip svg rect { forced-color-adjust: none; }
  .chart-mark--1, .chart-mark--3, .chart-mark--5 { fill: CanvasText; }
  .chart-mark--2, .chart-mark--4, .chart-mark--6 { fill: Highlight; }
  .chart-mark--7 { fill: CanvasText; }
  .chart-mark--8 { fill: Highlight; }
  .chart-mark--other { fill: GrayText; }
  .chart-line { forced-color-adjust: none; stroke: Highlight; }
  .chart-grid, .chart-axis { stroke: GrayText; }
  .chart-label { fill: CanvasText; }
  .chart-tooltip { border-color: CanvasText; }
}
@media print {
  .chart-card, .chart-kpi { break-inside: avoid; }
  .chart-mark, .chart-key { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ai-usage-range, .ai-usage-export, .chart-tooltip, .chart-table { display: none; }
  .chart-plot--dense { min-width: 0; }
}

/* API keys (/admin/api-keys): each key's throttling policy, changed in its row */
.api-key-policy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.api-key-policy select { padding: 0.2rem 0.4rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); color: var(--tdk-color-text); font: inherit; font-size: 0.875rem; }
.api-key-policy .tdk-button { padding: 0.2rem 0.65rem; }
.config-error-text { color: var(--tdk-sev-critical-text); }
.ai-environment-line { margin: 0 0 0.75rem; font-size: 0.925rem; }
.ai-skill-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; }
.ai-prompt { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); color: var(--tdk-color-text); font: inherit; font-size: 0.925rem; line-height: 1.5; resize: vertical; }
.config-json.ai-schema { height: auto; min-height: 10rem; }
.ai-prompt-pre { white-space: pre-wrap; }
.config-full h3 { margin: 1rem 0 0; font-size: 0.95rem; }

/* Visual editor and form preview (wwwroot/js/config-editor.js). Hidden until the script shows them. */
.config-modes[hidden], .config-visual[hidden], .config-json[hidden], .config-preview[hidden], .config-cursor[hidden] { display: none; }
.container.config-page-wide { max-width: 1440px; }
.config-workspace.has-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); gap: 1.75rem; align-items: start; }
.config-content-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.config-modes { display: inline-flex; padding: 2px; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-pill); background: var(--tdk-color-surface); }
.config-modes button { padding: 0.3rem 1rem; border: 0; border-radius: var(--tdk-radius-pill); background: transparent; color: var(--tdk-color-link); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.config-modes button[aria-pressed="true"] { background: var(--tdk-color-primary); color: var(--tdk-color-primary-contrast); }
.config-modes button:focus-visible { outline: 2px solid var(--tdk-color-primary-hover); outline-offset: 2px; }
.cv-mode-notice { font-size: 0.85rem; color: var(--tdk-sev-critical-text); }
.cv-mode-notice:empty { display: none; }

.config-visual { padding: 0.75rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface-alt); }
.cv-body { display: flex; flex-direction: column; gap: 0.5rem; }
.cv-group .cv-body { padding: 0.6rem 0 0.25rem 0.9rem; margin-left: 0.35rem; border-left: 2px solid var(--tdk-color-border-subtle); }
.cv-entry { position: relative; }
.cv-entry-value { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: start; padding: 0.2rem 0; }
.cv-entry-value > .cv-label { padding-top: 0.45rem; font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.cv-item.cv-entry-value { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.cv-key { display: block; margin-top: 0.1rem; color: var(--tdk-color-text-muted); font-family: var(--tdk-font-mono); font-size: 0.75rem; font-weight: 400; }
.cv-control { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cv-control input[type="text"], .cv-control input[type="number"], .cv-control select, .cv-control textarea,
.cv-add-field input, .cv-add-field select {
  width: 100%; max-width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); color: var(--tdk-color-text); font: inherit; font-size: 0.925rem;
}
.cv-control textarea { resize: vertical; line-height: 1.45; }
.cv-control .cv-number { max-width: 12rem; }
.cv-control [aria-invalid="true"] { border-color: var(--tdk-sev-critical); }
.cv-help { margin: 0; font-size: 0.8rem; color: var(--tdk-color-text-muted); }
.cv-check { display: inline-flex; align-items: center; gap: 0.5rem; padding-top: 0.4rem; font-size: 0.925rem; cursor: pointer; }
.cv-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--tdk-color-link); }
.cv-null { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.4rem; color: var(--tdk-color-text-muted); font-style: italic; }
.cv-link { padding: 0; border: 0; background: none; color: var(--tdk-color-link); font: inherit; font-style: normal; text-decoration: underline; cursor: pointer; }

.cv-group { border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); }
.cv-group > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.5rem 0.75rem; padding-right: 8.5rem; cursor: pointer; border-radius: var(--tdk-radius-sm); }
.cv-entry:not(.cv-item) > .cv-group > summary { padding-right: 3rem; }
.cv-group > summary:hover { background: var(--tdk-color-surface-alt); }
.cv-group > summary:focus-visible { outline: 2px solid var(--tdk-color-primary); outline-offset: 1px; }
.cv-group[open] > summary { border-bottom: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-sm) 6px 0 0; }
.cv-group[open] > .cv-body { padding-right: 0.75rem; padding-bottom: 0.75rem; }
.cv-group > summary .cv-label { font-weight: 600; }
.cv-group > summary .cv-key { display: inline; margin: 0; }
.cv-name { min-width: 0; overflow-wrap: anywhere; }
.cv-meta { color: var(--tdk-color-text-muted); font-size: 0.8rem; }
.cv-entry-group > .cv-actions { position: absolute; top: 0.3rem; right: 0.4rem; }
.cv-actions { display: flex; gap: 0.2rem; }
.cv-action { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 1px solid transparent; border-radius: var(--tdk-radius-sm); background: transparent; color: var(--tdk-color-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.cv-action:hover:not([disabled]) { border-color: var(--tdk-color-border-subtle); background: var(--tdk-color-surface-alt); color: var(--tdk-color-text); }
.cv-action[data-action="remove"]:hover:not([disabled]) { color: var(--tdk-sev-critical-text); }
.cv-action:focus-visible { outline: 2px solid var(--tdk-color-primary); outline-offset: 1px; }
.cv-action[disabled] { opacity: 0.35; cursor: default; }
.cv-empty { margin: 0; color: var(--tdk-color-text-muted); font-size: 0.875rem; font-style: italic; }
.cv-add-button { align-self: flex-start; padding: 0.3rem 0.8rem; border: 1px dashed var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: transparent; color: var(--tdk-color-link); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.cv-add-button:hover { border-style: solid; background: var(--tdk-color-primary-soft); }
.cv-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; padding: 0.6rem; border: 1px dashed var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); }
.cv-add-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 10rem; flex: 1 1 10rem; }
.cv-add-field label { font-size: 0.85rem; font-weight: 600; }
.cv-add-buttons { display: flex; gap: 0.5rem; }
.cv-add-buttons .tdk-button { padding: 0.35rem 1.1rem; }
.cv-error { flex-basis: 100%; margin: 0; color: var(--tdk-sev-critical-text); font-size: 0.85rem; }
.cv-error:empty { display: none; }

/* The form preview: drawn like the Teams app's form dialog, so its colors are Teams' own in either theme. */
.config-preview { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-md); background: var(--tdk-color-surface-alt); }
.config-page .config-preview h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.config-preview > .config-hint { margin-bottom: 0.75rem; }
.cv-preview-stale { margin: 0 0 0.75rem; color: var(--tdk-sev-critical-text); font-size: 0.85rem; }
.cv-preview-picker { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.9rem; }
.cv-preview-picker label { font-size: 0.85rem; font-weight: 600; }
.cv-preview-picker select { padding: 0.4rem 0.6rem; border: 1px solid var(--tdk-color-border); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); color: var(--tdk-color-text); font: inherit; font-size: 0.925rem; }
.cv-checks { margin-bottom: 0.9rem; padding: 0.6rem 0.8rem; border-left: 4px solid var(--tdk-sev-medium); border-radius: var(--tdk-radius-sm); background: var(--tdk-sev-medium-bg); font-size: 0.85rem; }
.cv-checks-title { margin: 0 0 0.25rem; font-weight: 600; }
.cv-checks ul { margin: 0; padding-left: 1.1rem; }
.cv-surface { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; border-radius: var(--tdk-radius-md); background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14); font-family: "Segoe UI", system-ui, sans-serif; color: #242424; }
.cv-surface-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cv-surface-description { margin: 0; color: #616161; font-size: 0.875rem; }
.cv-surface-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cv-surface-endpoint code { font-size: 0.78rem; overflow-wrap: anywhere; }
.cv-badge { padding: 0.05rem 0.5rem; border-radius: var(--tdk-radius-pill); background: #0f6cbd; color: #fff; font-size: 0.75rem; font-weight: 600; }
.cv-surface-fields { display: flex; flex-direction: column; gap: 0.9rem; }
.cv-pfield { display: flex; flex-direction: column; gap: 0.3rem; }
.cv-pfield > label { font-size: 0.875rem; font-weight: 600; }
.cv-required { color: #c50f1f; }
.cv-pfield input:not([type="checkbox"]), .cv-pfield select, .cv-pfield textarea {
  width: 100%; padding: 0.4rem 0.6rem; border: 1px solid #d1d1d1; border-bottom-color: #616161; border-radius: 4px; background: #fff; color: #242424; font: inherit; font-size: 0.875rem;
}
.cv-pfield textarea { resize: vertical; }
.cv-pfield [aria-invalid="true"] { border-color: #c50f1f; }
.cv-pcheck { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.cv-pcheck input { width: 1rem; height: 1rem; margin: 0; accent-color: #0f6cbd; }
.cv-field-error { margin: 0; color: #c50f1f; font-size: 0.8rem; }
.cv-surface-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
.cv-fake-button { min-width: 6rem; padding: 0.35rem 0.9rem; border: 1px solid #d1d1d1; border-radius: 4px; background: #fff; color: #242424; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.cv-fake-button:hover { background: #f5f5f5; }
.cv-fake-primary { border-color: #0f6cbd; background: #0f6cbd; color: #fff; }
.cv-fake-primary:hover { background: #115ea3; }
.cv-fake-button:focus-visible { outline: 2px solid #242424; outline-offset: 2px; }
.cv-payload { margin-top: 0.9rem; font-size: 0.85rem; }
.cv-payload:focus { outline: none; }
.cv-payload p { margin: 0 0 0.4rem; }
.cv-payload pre { max-height: 18rem; margin: 0; padding: 0.6rem 0.75rem; overflow: auto; border: 1px solid var(--tdk-color-border-subtle); border-radius: var(--tdk-radius-sm); background: var(--tdk-color-surface); font-family: var(--tdk-font-mono); font-size: 0.78rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .config-workspace.has-preview { display: block; }
  .config-preview { position: static; max-height: none; margin-top: 1.75rem; }
}

@media (max-width: 640px) {
  .config-page h1 { font-size: 1.5rem; }
  .config-json { height: 55vh; }
  .config-actions .config-danger-link { margin-left: 0; }
  .config-row-actions { text-align: left; }
  /* Labels go above their values; the item buttons stay on the label's row. */
  .config-visual { padding: 0.5rem; }
  .cv-entry-value { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-entry-value > .cv-control { grid-column: 1 / -1; grid-row: 2; }
  .cv-entry-value > .cv-label { padding-top: 0.25rem; }
  .cv-item.cv-entry-value { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-group .cv-body { padding-left: 0.5rem; margin-left: 0.15rem; }
  .cv-item > .cv-group > summary { padding-right: 0.75rem; }
  .cv-item.cv-entry-group { display: flex; flex-direction: column-reverse; gap: 0.2rem; }
  .cv-item.cv-entry-group > .cv-actions { position: static; justify-content: flex-end; }
  .cv-action { width: 2.25rem; height: 2.25rem; }
}

/* ---- The skill form: /admin/ai-skills/new and each skill's page (Site/AiSkillAdmin.cs, wwwroot/js/skill-form.js) ---- */
/* Four numbered steps, with a summary of what callers get beside them that stays in view, holding the buttons. */
.ai-skill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--tdk-space-6); align-items: start; }
.ai-skill-layout [hidden] { display: none; }
.ai-skill-steps { display: flex; flex-direction: column; gap: var(--tdk-space-5); min-width: 0; }
.ai-step { border: 1px solid var(--tdk-panel-border); border-radius: var(--tdk-radius-lg); background: var(--tdk-panel-bg); box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight); }
.ai-step-head { display: flex; align-items: flex-start; gap: var(--tdk-space-4); padding: var(--tdk-space-5) var(--tdk-space-6) var(--tdk-space-4); border-bottom: 1px solid var(--tdk-color-border-subtle); }
.ai-step-number { display: inline-grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tdk-color-primary-soft); color: var(--tdk-color-link); font-weight: var(--tdk-weight-bold); }
.config-page .ai-step-head h2 { margin: 0.1rem 0 0; font-size: var(--tdk-text-lg); }
.ai-step-lead { margin: 0.15rem 0 0; color: var(--tdk-color-text-muted); font-size: var(--tdk-text-sm); }
.ai-step-body { display: flex; flex-direction: column; gap: var(--tdk-space-5); padding: var(--tdk-space-5) var(--tdk-space-6) var(--tdk-space-6); }
.config-page .ai-subhead { margin: 0; padding-top: var(--tdk-space-5); border-top: 1px dashed var(--tdk-color-border-subtle); font-size: var(--tdk-text-md); }
.ai-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tdk-space-2); }
.ai-field-head code { font-size: 0.85em; }
.ai-counter { text-align: right; }
.ai-tips { padding: var(--tdk-space-3) var(--tdk-space-4); border-radius: var(--tdk-radius-md); background: var(--tdk-color-surface-alt); font-size: var(--tdk-text-sm); }
.ai-tips summary { display: inline-flex; align-items: center; gap: var(--tdk-space-2); color: var(--tdk-color-link); font-weight: var(--tdk-weight-semibold); cursor: pointer; }
.ai-tips ul { margin: var(--tdk-space-2) 0 0; padding-left: 1.25rem; color: var(--tdk-color-text-secondary); }

/* Choices as cards: the output format (radio buttons) and who may use it (checkboxes). */
.ai-choice-group { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.ai-choice-group legend { margin-bottom: var(--tdk-space-2); padding: 0; font-weight: var(--tdk-weight-semibold); }
.ai-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--tdk-space-3); }
.ai-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-space-3);
  padding: var(--tdk-space-3) var(--tdk-space-4);
  border: 1px solid var(--tdk-color-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-color-surface);
  cursor: pointer;
  transition: border-color var(--tdk-transition), background var(--tdk-transition), box-shadow var(--tdk-transition);
}
.ai-choice:hover { border-color: var(--tdk-color-primary); }
.ai-choice:has(input:checked) { border-color: var(--tdk-color-primary); background: var(--tdk-color-primary-soft); box-shadow: inset 0 0 0 1px var(--tdk-color-primary); }
.ai-choice:has(input:focus-visible) { outline: 2px solid var(--tdk-color-focus); outline-offset: 2px; }
.ai-choice input { flex: none; width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; accent-color: var(--tdk-color-primary); }
.ai-choice-body { display: flex; flex-direction: column; gap: 0.1rem; }
.ai-choice-title { color: var(--tdk-color-heading); font-weight: var(--tdk-weight-semibold); }
.ai-choice-text { color: var(--tdk-color-text-muted); font-size: var(--tdk-text-sm); }
.ai-switch-row { display: flex; align-items: flex-start; gap: var(--tdk-space-3); padding-top: var(--tdk-space-5); border-top: 1px dashed var(--tdk-color-border-subtle); cursor: pointer; }
.ai-switch-row > span { display: flex; flex-direction: column; gap: 0.1rem; }
.ai-switch-row .site-switch { margin-top: 0.15rem; }

/* The summary beside the steps. */
.ai-skill-aside { position: sticky; top: calc(var(--tdk-header-height) + var(--tdk-space-4)); }
.ai-summary { padding: var(--tdk-space-5); border: 1px solid var(--tdk-panel-border); border-top: 3px solid var(--tdk-color-primary); border-radius: var(--tdk-radius-lg); background: var(--tdk-panel-bg); box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight); }
.config-page .ai-summary-title { margin: 0 0 var(--tdk-space-4); font-size: var(--tdk-text-md); }
.ai-summary-list { display: flex; flex-direction: column; gap: var(--tdk-space-3); margin: 0 0 var(--tdk-space-5); }
.ai-summary-list dt { color: var(--tdk-color-text-muted); font-size: var(--tdk-text-xs); font-weight: var(--tdk-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.ai-summary-list dd { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.15rem 0 0; font-size: var(--tdk-text-sm); overflow-wrap: anywhere; }
.ai-summary-list dd code { font-size: var(--tdk-text-xs); }
.ai-summary-actions { display: flex; flex-direction: column; gap: var(--tdk-space-2); }
.ai-summary-actions .tdk-button { justify-content: center; }
.config-actions .ai-summary-delete, .ai-summary-delete { display: inline-flex; color: var(--tdk-sev-critical-text); align-items: center; justify-content: center; gap: var(--tdk-space-1); margin: var(--tdk-space-2) 0 0; font-size: var(--tdk-text-sm); }

@media (max-width: 1100px) {
  .ai-skill-layout { grid-template-columns: minmax(0, 1fr); }
  .ai-skill-aside { position: static; }
}

@media (max-width: 640px) {
  .ai-step-head, .ai-step-body { padding-left: var(--tdk-space-4); padding-right: var(--tdk-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-choice { transition: none; }
}

/* ---- Home page: "/" (Site/HomePage.cs). The radar is the kit's TdkRadar (css/kit/radar.css). ---- */
.home-page { display: flex; flex-direction: column; gap: var(--tdk-space-8); }
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tdk-space-8);
  overflow: hidden;
  padding: var(--tdk-space-8) var(--tdk-space-8);
  border: 1px solid var(--tdk-panel-border);
  border-radius: var(--tdk-radius-lg);
  background:
    radial-gradient(circle at 85% 50%, var(--tdk-color-primary-soft), transparent 60%),
    var(--tdk-panel-bg);
  box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight);
}
/* A faint grid behind the hero, like a situation-room display. */
.home-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--tdk-color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--tdk-color-border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  opacity: 0.6;
  pointer-events: none;
}
.home-hero > * { position: relative; }
.home-hero-copy { display: flex; flex-direction: column; gap: var(--tdk-space-4); max-width: 38rem; }
.home-eyebrow { display: inline-flex; align-items: center; gap: var(--tdk-space-2); margin: 0; color: var(--tdk-color-link); font-size: var(--tdk-text-sm); font-weight: var(--tdk-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.home-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tdk-sev-low); box-shadow: 0 0 0 0 var(--tdk-sev-low); animation: home-live 2.4s ease-out infinite; }
@keyframes home-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tdk-sev-low) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.6rem transparent; }
}
.home-hero h1 { margin: 0; color: var(--tdk-color-heading); font-size: clamp(2rem, 4vw, var(--tdk-text-hero)); line-height: var(--tdk-leading-tight); }
.home-highlight { color: var(--tdk-color-link); }
.home-lead { margin: 0; color: var(--tdk-color-text-secondary); font-size: var(--tdk-text-lg); }
.home-actions { display: flex; flex-wrap: wrap; gap: var(--tdk-space-3); margin-top: var(--tdk-space-2); }
.home-hero-radar { --home-radar-size: clamp(220px, 26vw, 320px); display: flex; flex-direction: column; align-items: center; gap: var(--tdk-space-4); }
.home-hero-radar .tdk-radar { --tdk-radar-size: var(--home-radar-size); }

/* The AI simulation on the dish (js/radar-ai.js): a packet out to the centre and back, the centre thinking, and the
 * verdict by the contact. Colours are the radar's own roles, so they follow the theme and forced colours with it. */
.home-radar-ai { pointer-events: none; }
.home-radar-ai__run--benign { --home-ai-color: var(--tdk-radar-signal); }
.home-radar-ai__run--review { --home-ai-color: var(--tdk-radar-track); }
.home-radar-ai__run--threat { --home-ai-color: var(--tdk-radar-threat); }
.home-radar-ai__link { opacity: 0; stroke: var(--home-ai-color); stroke-dasharray: 2 2; stroke-width: 0.75; }
.home-radar-ai__packet { opacity: 0; fill: var(--home-ai-color); }
.home-radar-ai__think { opacity: 0; fill: none; stroke: var(--home-ai-color); stroke-width: 1; }
/* Small text on a tinted dish, so the role colour is taken toward the heading colour to stay readable in both themes. */
.home-radar-ai__label {
  opacity: 0;
  fill: color-mix(in srgb, var(--home-ai-color) 70%, var(--tdk-color-heading));
  font: 700 6.5px var(--tdk-font-mono);
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--tdk-panel-bg);
  stroke-width: 2px;
}

/* The feed under the dish. Shown once the script starts it; a fixed height, so new entries don't move the page. */
.home-ai-feed { width: var(--home-radar-size); max-width: 100%; font-size: var(--tdk-text-xs); }
.home-ai-feed:not(.is-live) { display: none; }
.home-ai-feed-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--tdk-space-2); color: var(--tdk-color-text-muted); font-family: var(--tdk-font-mono); font-weight: var(--tdk-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.home-ai-feed-tag { padding: 0.05rem 0.45rem; border: 1px solid var(--tdk-color-border); border-radius: 999px; letter-spacing: 0.04em; }
.home-ai-feed-list { display: flex; flex-direction: column; gap: var(--tdk-space-2); height: 11.5rem; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.home-ai-entry {
  --home-ai-color: var(--tdk-sev-low);
  --home-ai-text: var(--tdk-sev-low-text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem var(--tdk-space-2);
  padding: var(--tdk-space-2) var(--tdk-space-3);
  border: 1px solid var(--tdk-panel-border);
  border-left: 3px solid var(--home-ai-color);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-panel-bg);
  animation: home-ai-in 240ms ease-out;
}
.home-ai-entry--review { --home-ai-color: var(--tdk-sev-medium); --home-ai-text: var(--tdk-sev-medium-text); }
.home-ai-entry--threat { --home-ai-color: var(--tdk-sev-critical); --home-ai-text: var(--tdk-sev-critical-text); }
.home-ai-verdict { color: var(--home-ai-text); font-family: var(--tdk-font-mono); font-weight: 700; }
.home-ai-meta { overflow: hidden; color: var(--tdk-color-text-muted); font-family: var(--tdk-font-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.home-ai-signal, .home-ai-answer { grid-column: 1 / -1; }
.home-ai-signal { color: var(--tdk-color-text); }
.home-ai-answer { min-height: 1lh; color: var(--tdk-color-text-secondary); }
/* Only the newest entry is shown in full; older ones keep their verdict and signal, on one line. */
.home-ai-entry:not(:first-child) :is(.home-ai-answer, .home-ai-meta) { display: none; }
.home-ai-entry:not(:first-child) .home-ai-signal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 2; }
@keyframes home-ai-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.home-section h2 { margin: 0 0 var(--tdk-space-4); font-size: var(--tdk-text-xl); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--tdk-space-4); margin: 0; padding: 0; list-style: none; }
.home-cards li { display: flex; }
.home-card {
  flex: 1;
  gap: var(--tdk-space-2);
  padding: var(--tdk-space-5);
  border-top: 3px solid var(--tdk-color-primary);
  color: var(--tdk-color-text);
  text-decoration: none;
  transition: border-color var(--tdk-transition), box-shadow var(--tdk-transition), transform var(--tdk-transition);
}
.home-card:hover { border-color: var(--tdk-color-primary); box-shadow: var(--tdk-shadow-md); color: var(--tdk-color-text); text-decoration: none; transform: translateY(-2px); }
.home-card:focus-visible { outline: 2px solid var(--tdk-color-focus); outline-offset: 3px; }
.home-card-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--tdk-space-1); border-radius: var(--tdk-radius-md); background: var(--tdk-color-primary-soft); color: var(--tdk-color-link); }
.home-card-title { color: var(--tdk-color-heading); font-size: var(--tdk-text-lg); font-weight: var(--tdk-weight-semibold); }
.home-card-summary { flex: 1; color: var(--tdk-color-text-muted); font-size: var(--tdk-text-sm); }
.home-card-go { display: inline-flex; align-items: center; gap: var(--tdk-space-1); margin-top: var(--tdk-space-2); color: var(--tdk-color-link); font-size: var(--tdk-text-sm); font-weight: var(--tdk-weight-semibold); }

@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); padding: var(--tdk-space-6); }
  .home-hero-radar { order: -1; }
  .home-hero::before { mask-image: linear-gradient(transparent, #000 40%); }
  /* Above the heading on a narrow screen, the feed would push the page's point too far down. */
  .home-ai-feed.is-live { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-live-dot { animation: none; }
  .home-ai-entry { animation: none; }
  .home-card { transition: none; }
  .home-card:hover { transform: none; }
}