/* Klaxon atomic design: foundations, atoms, molecules, organisms.
   Visual authority: docs/design/DESIGN_GUIDELINES.md. */
:root {
  color-scheme:light; --kx-canvas:#F1F5F9; --kx-surface:#FFFFFF; --kx-subtle:#E8EEF5;
  --kx-ink:#071827; --kx-muted:#52657A; --kx-line:#D3DEE8; --kx-control:#708297;
  --kx-brand:#FFB020; --kx-primary:#2563EB; --kx-link:#1D4ED8; --kx-focus:#2563EB;
  --kx-positive:#166534; --kx-positive-bg:#DCFCE7; --kx-error:#B91C1C; --kx-error-bg:#FEE2E2;
  --kx-warning:#92400E; --kx-warning-bg:#FEF3C7; --icon-ink:var(--kx-ink);
}
html.dark {
  color-scheme:dark; --kx-canvas:#071827; --kx-surface:#0F2236; --kx-subtle:#162F47;
  --kx-ink:#DCE8F4; --kx-muted:#A7B8CB; --kx-line:#2D465E; --kx-control:#71869C;
  --kx-link:#8BB8FF; --kx-focus:#8BB8FF; --kx-positive:#86EFAC; --kx-positive-bg:#12392C;
  --kx-error:#FCA5A5; --kx-error-bg:#421F2C; --kx-warning:#FCD34D; --kx-warning-bg:#3A2E16;
}
body.kx-app {background:var(--kx-canvas);color:var(--kx-ink);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.5;-webkit-font-smoothing:antialiased}
.kx-app h1 {font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.02em}
.kx-app h2 {font-weight:600;letter-spacing:-.015em}
.kx-app h3 {font-weight:600;letter-spacing:-.01em}
.kx-app :is(button,input,select,textarea){font:inherit;touch-action:manipulation}
.kx-app button:active:not(:disabled){transform:none}
.kx-app :is(button,a,input,select,textarea,[tabindex]):focus-visible {outline:2px solid var(--kx-focus);outline-offset:2px;box-shadow:none}
.kx-app [hidden]{display:none!important}
/* Named control atoms; compatibility selectors let existing page hooks migrate safely. */
.kx-app .kx-button {display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--kx-control);border-radius:.5rem;background:var(--kx-surface);color:var(--kx-ink);font-weight:500;line-height:1.25rem;text-decoration:none;box-shadow:none;transition:background-color 150ms ease-out;max-width:100%}
.kx-app .kx-button:hover {background:var(--kx-subtle)}
.kx-app .kx-button.text-left {justify-content:flex-start}
.kx-app .kx-button.justify-between {justify-content:space-between}
.kx-app .kx-button--primary,.kx-app .kx-button.bg-primary {background:var(--kx-primary);border-color:var(--kx-primary);color:#fff}
.kx-app .kx-button--primary:hover,.kx-app .kx-button.bg-primary:hover {background:#1D4ED8;border-color:#1D4ED8}
.kx-app .kx-button--danger {background:#B91C1C;border-color:#B91C1C;color:white}
.kx-app .kx-button--danger:hover{background:#991B1B}
.kx-app .kx-button--ghost {border-color:transparent;background:transparent}
.kx-app .kx-button--compact {min-height:2rem;padding:.25rem .625rem;font-size:.75rem}
.kx-app .kx-button--icon {width:2.5rem;padding:.5rem;flex-shrink:0}
.kx-app .kx-button:disabled {background:var(--kx-subtle);color:var(--kx-muted);border-color:var(--kx-line);cursor:not-allowed;opacity:1}
.kx-app :is(.kx-button,.filter-chip,.kx-select-trigger).hidden {display:none}
.kx-app :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),textarea,select,.kx-select-trigger) {
  min-height:2.5rem;border:1px solid var(--kx-control);border-radius:.5rem;background:var(--kx-surface);color:var(--kx-ink);padding-block:.5rem;line-height:1.25rem;box-shadow:none;max-width:100%;
}
.kx-app :is(input,textarea,select):not([class*="pl-"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){padding-inline:.75rem}
.kx-app :is(input,textarea)::placeholder {color:var(--kx-muted);opacity:1}
.kx-app :is(input,textarea,select):disabled {background:var(--kx-subtle);color:var(--kx-muted);opacity:1;cursor:not-allowed}
.kx-app :is(input,textarea,select)[aria-invalid=true] {border-color:var(--kx-error)}
.kx-app :is(input[type=checkbox],input[type=radio]) {accent-color:var(--kx-primary);width:1rem;height:1rem;flex-shrink:0}
.kx-field {display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0}.kx-field>label{font-weight:500}.kx-helper{color:var(--kx-muted);font-size:.75rem;line-height:1.125rem}
.kx-helper--error{color:var(--kx-error)}
/* SVG symbols inherit neutral ink; the amber token never varies by theme. */
.kx-icon {display:inline-block;flex-shrink:0;vertical-align:middle;color:var(--kx-ink);--icon-ink:currentColor;--kx-icon-accent:#FFB020}
.kx-icon--mono,.kx-button .kx-icon {color:inherit;--kx-icon-accent:currentColor}
.kx-app .brand-ui-icon {filter:none!important;object-fit:contain}
.kx-app .kx-icon-tile {background:transparent}
/* Surface/text adapters for existing server and browser-rendered utility markup. */
.kx-app :is(.bg-white,.dark\:bg-surface-elevated) {background-color:var(--kx-surface)}
.kx-app :is(.bg-gray-50,.bg-gray-100) {background-color:var(--kx-subtle)}
.kx-app :is(.text-gray-900,.text-gray-800,.text-signal-navy) {color:var(--kx-ink)}
.kx-app :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700) {color:var(--kx-muted)}
.dark .kx-app :is(.dark\:text-white,.dark\:text-gray-100,.dark\:text-gray-200){color:var(--kx-ink)}
.dark .kx-app :is(.dark\:text-gray-300,.dark\:text-gray-400,.dark\:text-gray-500){color:var(--kx-muted)}
.kx-app :is(.border-gray-100,.border-gray-200,.border-gray-200\/80,.dark\:border-surface-border){border-color:var(--kx-line)}
.kx-app :is(a.text-klaxon-amber,button.text-klaxon-amber){color:var(--kx-link)}
.kx-app :is(.hover\:bg-gray-100,.hover\:bg-gray-50):hover{background-color:var(--kx-subtle)}
.kx-app .kx-nav {background:var(--kx-surface);border-bottom:1px solid var(--kx-line);box-shadow:none;z-index:45}
.kx-nav #nav-cluster a {min-height:2.5rem;border-radius:.5rem;font-weight:500}
.kx-nav #nav-cluster a.border-klaxon-amber {background:var(--kx-subtle);color:var(--kx-ink)}
.kx-nav .kx-wordmark {display:flex;align-items:center;background:#fff;border-radius:.5rem;padding:.25rem .5rem;flex-shrink:0}
.kx-wordmark img {height:2rem;width:auto}
.kx-app .kx-admin-nav {background:var(--kx-surface);border-color:var(--kx-line);box-shadow:none}
.kx-admin-nav a {min-height:2rem;padding:.375rem .5rem;gap:.375rem}
.kx-admin-nav .kx-icon {width:1.125rem;height:1.125rem}
.kx-app .mm-deck {background:var(--kx-surface);border:1px solid var(--kx-line);border-radius:.75rem;box-shadow:none}
.kx-app .mm-deck :is(#time-window-chip,.filter-chip) {background:var(--kx-subtle)!important;color:var(--kx-ink)!important;border:1px solid var(--kx-line)!important}
.kx-app .filter-chip {min-height:2rem;border-radius:999px;font-size:.75rem;display:inline-flex;align-items:center;gap:.375rem}
.kx-app .filter-chip button{min-width:1.75rem;min-height:1.75rem}
.kx-app .kx-article-card {background:var(--kx-surface);border:1px solid var(--kx-line);border-radius:.75rem;box-shadow:none;transform:none;transition:background-color 150ms ease-out}
.kx-app .kx-article-card:hover {background:var(--kx-subtle);box-shadow:none;transform:none}
.kx-app .kx-article-row {padding:1.25rem 1rem;border-left-width:3px}
.kx-app :is(.kx-article-card,.kx-article-row) h3 {font-size:1rem;line-height:1.5rem}
.kx-app :is(.kx-article-card,.kx-article-row) h3 a {color:var(--kx-ink)}
.kx-app :is(.kx-article-card,.kx-article-row) h3 a:hover {text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--kx-link)}
.kx-app .kx-article-meta {font-size:.75rem;line-height:1.125rem;color:var(--kx-muted)}
.kx-app :is(.mm-dialog-panel,.kx-panel) {background:var(--kx-surface);border:1px solid var(--kx-line);border-radius:1rem}
.kx-panel {padding:1.5rem}.kx-app table {font-size:.875rem}.kx-app th {font-size:.75rem;color:var(--kx-muted);font-weight:500}
.kx-app :is(.dp-calendar,.dp-month-view,.dp-year-view){background:var(--kx-surface);color:var(--kx-ink);border-color:var(--kx-control)}
.kx-app .dp-day {color:var(--kx-ink)}.kx-app .dp-day:hover{background:var(--kx-subtle)}
.kx-app .dp-day.other-month {color:var(--kx-muted)}.kx-app .dp-weekdays{font-size:.75rem;color:var(--kx-muted)}
.kx-app .mm-skeleton {background:var(--kx-subtle)}
.kx-app #mm-signal-bar{background:#FFB020;box-shadow:none}
/* Progressive select molecule: native source stays in the form and owns its value. */
.kx-select {position:relative;display:inline-flex;min-width:0;max-width:100%;vertical-align:middle}
.kx-select.kx-select--full{display:flex;width:100%}
.kx-select .kx-select-native {position:absolute!important;width:1px!important;min-width:0!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}
.kx-app .kx-select-trigger {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:.75rem;width:100%;text-align:left;cursor:pointer;font-weight:400;white-space:normal}
.kx-select-trigger>span{min-width:0;overflow-wrap:anywhere}.kx-select-trigger svg{width:1rem;height:1rem;flex-shrink:0}
.kx-select-trigger:disabled {cursor:not-allowed;background:var(--kx-subtle);color:var(--kx-muted)}
.kx-select-trigger[aria-invalid=true]{border-color:var(--kx-error)}
.kx-select-popup {position:fixed;z-index:10000;overflow:auto;max-height:17rem;background:var(--kx-surface);color:var(--kx-ink);border:1px solid var(--kx-control);border-radius:.625rem;padding:.25rem;box-shadow:0 8px 24px #07182724;font:400 .875rem/1.25rem Inter,system-ui,sans-serif}
.kx-select-option {display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.375rem;padding:.5rem .625rem;border-radius:.375rem;cursor:pointer;overflow-wrap:anywhere}
.kx-select-option[data-active=true]{background:var(--kx-subtle)}
.kx-select-option[aria-selected=true]{font-weight:600}.kx-select-option[aria-disabled=true]{color:var(--kx-muted);cursor:not-allowed}
.kx-select-group{padding:.5rem .625rem .25rem;color:var(--kx-muted);font-size:.75rem;font-weight:600}
.kx-select-option svg{width:1rem;height:1rem;flex-shrink:0}.kx-select-error{font-size:.75rem;color:var(--kx-error);margin-top:.375rem}
@media(max-width:767px){.kx-app .mm-deck{border-radius:.75rem}.kx-app .kx-article-row{padding:1rem .75rem}.kx-app .kx-panel{padding:1rem}.kx-app main{min-width:0}}
@media(max-width:1023px){.kx-nav #nav-cluster{max-height:calc(100dvh - 6rem);overflow-y:auto}.kx-nav #user-menu{position:static;width:100%;margin-top:.5rem}}
/* Match the base field selector's specificity so its 40px rule cannot defeat
   the 44px touch minimum. The browser contract checks the computed size. */
@media(pointer:coarse){.kx-app .kx-button,.kx-app :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),textarea,select,.kx-select-trigger){min-height:2.75rem}.kx-app .kx-button--icon{width:2.75rem}.kx-app input,.kx-app select,.kx-app textarea{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.kx-app *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.kx-preview-banner {background:var(--kx-subtle);color:var(--kx-muted);text-align:center;font-size:.75rem;line-height:1.125rem;padding:.375rem 1rem;border-bottom:1px solid var(--kx-line)}
.kx-app .dp-header button {min-width:2rem;min-height:2rem;border-radius:.5rem;color:var(--kx-ink)}
.kx-app .dp-title {color:var(--kx-ink);border-radius:.5rem}
.kx-app .dp-day {min-height:2rem;display:grid;place-items:center}