/* ======================================================================
uds UI – Master Stylesheet
Purpose:
- A single, cut-and-paste CSS file for Anvil apps (runtime + designer).
- Structured for clarity, with minimal behavioural change from your working CSS.

Guiding rules:
- Tokens first, then theme variables, then base, then layout, then components.
- Designer overrides are last (so they win), theme overrides are explicit.
- Avoid duplicate selectors where safe to remove (only exact duplicates removed).
====================================================================== */


/* ==============================
1) TOKENS (Design foundations)
============================== */

:root{
  /* Brand */
  --uds-universal-blue-900:#102c51;
  --uds-universal-blue-500:#366fa7;
  /* Typography */
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --font-head: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  /* Classification colours */
  --uds-class-unclass-bg: #4b5563;     /* Slate / neutral */
  --uds-class-unclass-fg: #ffffff;
  --uds-class-restricted-bg: #b45309;  /* Deep amber */
  --uds-class-restricted-fg: #ffffff;
  --uds-class-secret-bg: #7f1d1d;      /* Dark red */
  --uds-class-secret-fg: #ffffff;
  --uds-class-cosmic-bg: #1e1b4b;      /* Deep indigo */
  --uds-class-cosmic-fg: #ffffff;

  /* Neutrals */
  --uds-black:#0b0f14;
  --uds-white:#ffffff;
  --uds-grey-900:#111827;
  --uds-grey-800:#1f2937;
  --uds-grey-700:#374151;
  --uds-grey-600:#4b5563;
  --uds-grey-500:#6b7280;
  --uds-grey-200:#e5e7eb;
  --uds-grey-100:#f3f4f6;

  /* Semantic */
  --uds-success:#1f7a3a;
  --uds-warning:#8a5b00;
  --uds-danger:#b42318;
  --uds-info:var(--uds-universal-blue-500);

  /* Type scale (simple, replicable) */
  --uds-fs-900: 2.25rem;   /* h1 */
  --uds-fs-800: 1.75rem;   /* h2 */
  --uds-fs-700: 1.375rem;  /* h3 */
  --uds-fs-600: 1.125rem;  /* lead */
  --uds-fs-500: 1rem;      /* body */
  --uds-fs-400: 0.875rem;  /* small */
  --uds-lh-tight: 1.15;
  --uds-lh: 1.5;

  /* Subtle classification bar text */
  --uds-classbar-subtle-fg: rgba(255,255,255,.85);

  /* Spacing */
  --uds-s-0: 0;
  --uds-s-1: 0.25rem;
  --uds-s-2: 0.5rem;
  --uds-s-3: 0.75rem;
  --uds-s-4: 1rem;
  --uds-s-6: 1.5rem;
  --uds-s-8: 2rem;
  --uds-s-12: 3rem;

  /* Radius & shadow */
  --uds-r-1: 6px;
  --uds-r-2: 10px;
  --uds-r-3: 14px;
  --uds-shadow: 0 8px 22px rgba(0,0,0,.12);

  /* Layout */
  --uds-maxw: 1180px;

  /* Pills */
  --uds-pill-bg: var(--uds-universal-blue-500);
  --uds-pill-fg: #fff;
  --uds-pill-border: rgba(255,255,255,.25);

  --uds-pill-dark-bg: var(--uds-universal-blue-900);
  --uds-pill-dark-fg: #fff;
  --uds-pill-dark-border: #e5e7eb;

  /* Nav */
  --uds-nav-fg: #fff;

  /* Focus */
  --uds-focus-ring-size: 3px;
  --uds-focus-ring-offset: 2px;
  --uds-focus-glow: 0 0 0 6px transparent;

  /* Code blocks */
  --uds-code-bg: var(--uds-surface-2);
  --uds-code-fg: var(--uds-text);
  --uds-code-border: var(--uds-border);
  --uds-code-btn-bg: rgba(0,0,0,.7);
  --uds-code-btn-fg: #ffffff;
  --uds-code-btn-hover: rgba(0,0,0,.85);

  /* Chat bubbles */
  --uds-chat-user-bg: var(--uds-universal-blue-900);
  --uds-chat-user-fg: #ffffff;

  --uds-chat-system-bg: var(--uds-surface);
  --uds-chat-system-fg: var(--uds-text);

  --uds-chat-radius: 18px;
  --uds-chat-maxw: 72%;


}


/* ==============================
2) THEMES (Variables only)
Notes:
- These blocks set theme variables.
- Visual component overrides for stealth/night are kept later in the file.
============================== */

/* Day: crisp, high-contrast */
html[data-theme="day"] {
  --uds-focus-ring-size: 3px;
  --uds-focus-glow: 0 0 0 6px rgba(17,138,203,.35);
}

/* Night: slightly larger + softer glow */
html[data-theme="night"] {
  --uds-focus-ring-size: 3px;
  --uds-focus-glow: 0 0 0 7px rgba(17,138,203,.45);
}

html[data-theme="night"] {
  --uds-chat-user-bg: #1a2a44;
  --uds-chat-system-bg: #0d1320;
}


/* Stealth: restrained */
html[data-theme="field"] {
  --uds-focus-ring-size: 2px;
  --uds-focus-glow: 0 0 0 4px rgba(124,255,124,.35);
}

html[data-theme="field"] {
  --uds-chat-user-bg: #000;
  --uds-chat-user-fg: var(--uds-text);

  --uds-chat-system-bg: #000;
  --uds-chat-system-fg: var(--uds-text);
}


/* Day theme */
html[data-theme="day"]{
  --uds-bg: var(--uds-white);
  --uds-surface: var(--uds-grey-100);
  --uds-surface-2: var(--uds-white);
  --uds-text: #0b1220;
  --uds-text-muted: var(--uds-grey-600);
  --uds-border: var(--uds-grey-200);
  --uds-focus: rgba(17,138,203,.35);
  --uds-link: var(--uds-universal-blue-900);
  --uds-link-hover: var(--uds-universal-blue-500);
  --uds-nav-fg: #ffffff;
}

/* Night theme (low-light) */
html[data-theme="night"]{
  --uds-bg: #070a10;
  --uds-surface: #0d1320;
  --uds-surface-2: #0b0f1a;
  --uds-text: #e8eef9;
  --uds-text-muted: rgba(232,238,249,.75);
  --uds-border: rgba(229,231,235,.16);
  --uds-focus: rgba(17,138,203,.45);
  --uds-link: #7cc6ea;
  --uds-link-hover: #b6e6ff;

  /* Keep semantic colours usable in the dark */
  --uds-success:#2ea44f;
  --uds-warning:#d18d00;
  --uds-danger:#ff4d4d;

  --uds-nav-fg: #ffffff;
}

/* Stealth theme (ultra low-light / NVG-friendly) */
html[data-theme="field"]{
  --uds-bg: #000000;
  --uds-surface: #000000;
  --uds-surface-2: #000000;

  --uds-text: #7CFF7C;        /* soft phosphor green */
  --uds-text-muted: #4FCC4F;

  --uds-border: #1f3d1f;
  --uds-focus: rgba(124,255,124,.35);

  --uds-link: #7CFF7C;
  --uds-link-hover: #A0FFA0;

  /* Override semantics to green-only */
  --uds-success: #7CFF7C;
  --uds-warning: #7CFF7C;
  --uds-danger:  #7CFF7C;
  --uds-info:    #7CFF7C;

  --uds-nav-fg: var(--uds-text);

  /* Pills */
  --uds-pill-bg: #000;
  --uds-pill-fg: var(--uds-text);
  --uds-pill-border: var(--uds-border);

  --uds-pill-dark-bg: #000;
  --uds-pill-dark-fg: var(--uds-text);
  --uds-pill-dark-border: var(--uds-border);
}

html[data-theme="stealth"] {
  --uds-chat-user-bg: #000;
  --uds-chat-user-fg: var(--uds-text);

  --uds-chat-system-bg: #000;
  --uds-chat-system-fg: var(--uds-text);
}


/* Night pills */
html[data-theme="night"]{
  --uds-pill-dark-bg: var(--uds-bg);
  --uds-pill-dark-fg: var(--uds-text);
  --uds-pill-dark-border: var(--uds-white);
}


/* ==============================
3) BASE (Resets + structure)
============================== */

*,*::before,*::after{box-sizing:border-box}

html, body {
  min-height: 100%;
}

body {
  margin:0;
  font-family: var(--font-body);
  font-size:var(--uds-fs-500);
  line-height:var(--uds-lh);
  color:var(--uds-text);
  background:var(--uds-bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-y: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
}

a{
  color:var(--uds-link);
  text-underline-offset: 3px;
}
a:hover{color:var(--uds-link-hover)}


/* ==============================
4) ACCESSIBILITY (Focus system)
Notes:
- Keep focus rules centralised; avoid per-component “random” outlines.
============================== */

:focus-visible {
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: var(--uds-focus-ring-offset);
  border-radius: var(--uds-r-1);
}

/* Strong unified focus – all controls */
.uds-btn:focus-visible,
.uds-link:focus-visible,
.uds-menulink:focus-visible,
.uds-tab:focus-visible,
.uds-nav__link:focus-visible,
.uds-nav__close:focus-visible,
.uds-pill:focus-visible,
.uds-pill-dark:focus-visible,
.uds-input:focus-visible,
.uds-select:focus-visible,
.uds-textarea:focus-visible,
.uds-checkbox input:focus-visible,
.uds-radio input:focus-visible {
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: var(--uds-focus-ring-offset);
  box-shadow: var(--uds-focus-glow);
}

.uds-btn:focus-visible {
  outline-offset: 1px;
}


/* ==============================
5) LAYOUT (Structural only)
Contract:
- Shell manages vertical flow (appbar → main → footer)
- Nav is overlay in runtime; becomes sidebar in designer
============================== */

/* App bar container */
.uds-appbar{
  background: var(--uds-universal-blue-900);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Standard content container */
.uds-container{
  max-width:var(--uds-maxw);
  margin:0 auto;
  padding: var(--uds-s-6) var(--uds-s-4);
}
.uds-container--tight{max-width: 860px}

/* Layout rows/columns (page-level utility) */
.uds-row{display:flex; gap: var(--uds-s-6); align-items:flex-start}
.uds-col{flex:1}
.uds-col--2of3{flex: 0 1 66.666%}
.uds-col--1of3{flex: 0 1 33.333%}

@media (max-width: 900px){
  .uds-row{flex-direction:column}
  .uds-col--2of3,.uds-col--1of3{flex-basis:auto}
}

/* Shell (vertical layout owner) */
.uds-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main region */
.uds-shell__main {
  flex: 1;
  min-height: 0; /* REQUIRED: prevents flex overflow + footer jump */
  padding-right: 5px;
}

/* Page padding helper */
.uds-page {
  padding: var(--uds-s-8) var(--uds-s-4); /* vertical | horizontal */
  overflow: visible;
  min-height: auto;
}

/* Ensure page content is visually framed even when slot content
is not wrapped in a container (Anvil-safe) */
.uds-page > * {
  max-width: var(--uds-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--uds-s-6);
  padding-right: var(--uds-s-6);
}

@media (max-width: 640px){
  .uds-page > *{
    padding-left: var(--uds-s-4);
    padding-right: var(--uds-s-4);
  }
}


/* ==============================
6) TYPOGRAPHY UTILITIES
============================== */

.uds-h1{font-size:var(--uds-fs-900); line-height:var(--uds-lh-tight); margin:0 0 var(--uds-s-4)}
.uds-h2{font-size:var(--uds-fs-800); line-height:var(--uds-lh-tight); margin:0 0 var(--uds-s-3)}
.uds-h3{font-size:var(--uds-fs-700); line-height:var(--uds-lh-tight); margin:0 0 var(--uds-s-2)}
.uds-lead{font-size:var(--uds-fs-600); color:var(--uds-text-muted); margin:0 0 var(--uds-s-6)}
.uds-small{font-size:var(--uds-fs-400); color:var(--uds-text-muted)}


/* ==============================
7) COMPONENTS (Core set)
============================== */

.uds-card {
  background: var(--uds-surface-2);
  border: 1px solid var(--uds-border);
  border-radius: var(--uds-r-3);
  box-shadow: var(--uds-shadow);
  overflow: hidden;
  min-width: 0;
}

.uds-card__hd,
.uds-card__bd,
.uds-card__ft {
  padding: var(--uds-s-6);
  min-width: 0;
}

/* Markdown hardening */
.uds-card * {
  max-width: 100%;
  box-sizing: border-box;
}

.uds-card pre,
.uds-card code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.uds-card p,
.uds-card li,
.uds-card h1,
.uds-card h2,
.uds-card h3,
.uds-card h4,
.uds-card h5,
.uds-card h6 {
  overflow-wrap: break-word;
}


/* Buttons */
.uds-btn{
  display:inline-flex;
  margin-top: 10px !important;
  margin-bottom: 5px;
  align-items:center;
  justify-content:center;
  gap: var(--uds-s-2);
  padding: 0.65rem 1rem;
  border-radius: var(--uds-r-2);
  border: 1px solid transparent;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
}
.uds-btn--primary{background: var(--uds-universal-blue-900); color:#fff}
.uds-btn--primary:hover{background: var(--uds-universal-blue-500)}
.uds-btn--secondary{background: transparent; border-color: var(--uds-border); color: var(--uds-text)}
.uds-btn--secondary:hover{border-color: var(--uds-interaction);}
.uds-btn--secondary:focus-visible{
  border-color: var(--uds-interaction);
}

.uds-btn--tertiary{
  position: fixed;
  bottom: var(--uds-s-6);
  right: max(
    var(--uds-s-4),
    calc((100vw - var(--uds-maxw)) / 2 + var(--uds-s-6))
  );
  z-index: 9999;

  background: var(--uds-tertiary-bg);
  color: var(--uds-tertiary-fg);
  border: 1px solid var(--uds-tertiary-border);
}

@media (max-width: 640px){
  .uds-btn--tertiary{
    right: var(--uds-s-4);
    bottom: var(--uds-s-5);
  }
}

.uds-btn--tertiary:hover{border-color: var(--uds-interaction);}
.uds-btn--tertiary:focus-visible{
  border-color: var(--uds-interaction);
}

/* Day */
html[data-theme="day"]{
  --uds-tertiary-bg: var(--uds-universal-blue-500);
  --uds-tertiary-fg: #ffffff;
  --uds-tertiary-border: var(--uds-universal-blue-500);
}

/* Night */
html[data-theme="night"]{
  --uds-tertiary-bg: var(--uds-universal-blue-500);
  --uds-tertiary-fg: #ffffff;
  --uds-tertiary-border: var(--uds-universal-blue-500);
}

/* Field (phosphor) */
html[data-theme="field"]{
  --uds-tertiary-bg: #000000;
  --uds-tertiary-fg: #7CFF7C;
  --uds-tertiary-border: #7CFF7C;
}

/* Stealth / IR */
html[data-theme="stealth"]{
  --uds-tertiary-bg: #000000;
  --uds-tertiary-fg: #B00000;
  --uds-tertiary-border: #B00000;
}

html[data-theme="field"] .uds-btn--tertiary,
html[data-theme="stealth"] .uds-btn--tertiary {
  box-shadow: none !important;
}
.uds-btn--danger{background: var(--uds-danger); color:#fff}

/* Form fields */
.uds-field{margin: 0 0 var(--uds-s-4)}
.uds-label{display:block; margin-top: 5px; font-weight:700; margin: 0 0 var(--uds-s-2)}
.uds-hint{display:block; color: var(--uds-text-muted); margin: 0 0 var(--uds-s-2)}

.uds-input,.uds-select,.uds-textarea{
  width:96%;
  padding: 0.7rem 0.75rem;
  border-radius: var(--uds-r-2);
  border: 1px solid var(--uds-border);
  background: var(--uds-surface-2);
  color: var(--uds-text);
  font: inherit;
}
.uds-textarea{min-height: 120px; resize: vertical}

.uds-error{border-color: var(--uds-danger)}
.uds-error-msg{color: var(--uds-danger); font-weight:700; margin-top: var(--uds-s-1)}

/* Date input normalisation */
.uds-input[type="date"] {
  min-height: 2.75rem; /* matches other inputs visually */
  box-sizing: border-box;
  line-height: 1.4;
}

/* Ensure consistent focus outline */
.uds-input[type="date"]:focus {
  outline: 2px solid var(--uds-focus);
  outline-offset: 2px;
}

/* Checkbox */
.uds-checkbox {
  display: flex;
  align-items: center;
  gap: var(--uds-s-4);
  margin-bottom: var(--uds-s-3);
  margin-top: var(--uds-s-4);
  margin-left: var(--uds-s-3);
}

.uds-checkbox input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  transform: scale(1.7);
  transform-origin: center;
}

/* Radio */
.uds-radio {
  display: flex;
  align-items: center;
  gap: var(--uds-s-4);
  margin-bottom: var(--uds-s-8);
  margin-top: var(--uds-s-8);
  margin-left: var(--uds-s-3);
}

.uds-radio input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  transform: scale(1.7);
  transform-origin: center;
}

.uds-radio-group--error {
  border-left: 4px solid var(--uds-danger);
  padding-left: var(--uds-s-3);
}


/* Banner / Notice */
.uds-banner{
  margin-bottom: 10px;
  margin-top: 5px;
  border-left: 6px solid var(--uds-info);
  background: color-mix(in srgb, var(--uds-info) 10%, var(--uds-surface));
  padding: var(--uds-s-4) var(--uds-s-6);
  border-radius: var(--uds-r-2);
}
.uds-banner--info { border-left-color: var(--uds-info); }
.uds-banner--alert { border-left-color: var(--uds-danger); }
.uds-banner--success { border-left-color: var(--uds-success); }
.uds-banner--warning { border-left-color: var(--uds-warning); }
.uds-banner--error { border-left-color: var(--uds-danger); }
.uds-banner--static { border-left-color: var(--uds-border); }

/* Tabs */
.uds-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--uds-s-2);
  border-bottom: 1px solid var(--uds-border);
  margin-bottom: var(--uds-s-4); /* 👈 creates the gap beneath the component */
}

.uds-tab{
  padding: var(--uds-s-3) var(--uds-s-4);
  border-radius: var(--uds-r-2) var(--uds-r-2) 0 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--uds-text);
  cursor:pointer;
  font-weight:700;
}
.uds-tab[aria-selected="true"]{
  border-color: var(--uds-border);
  border-bottom-color: var(--uds-surface-2);
  background: var(--uds-surface-2);
}

@media (max-width: 640px){
  .uds-tabs{
    border-bottom: none;
    margin-bottom: var(--uds-s-3);
  }

  .uds-tab[aria-selected="true"]{
    border-bottom-color: var(--uds-border);
  }
}

/* Data table */
.uds-table{
  width:100%;
  border-collapse: collapse;
  font-size: var(--uds-fs-400);
}
.uds-table th,.uds-table td{
  padding: var(--uds-s-3);
  border-bottom: 1px solid var(--uds-border);
  text-align:left;
  vertical-align:top;
}
.uds-table th{
  background: var(--uds-surface);
  font-weight:700;
}

/* Classification bars */
.uds-classbar{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: var(--uds-s-4);
  padding: var(--uds-s-2) var(--uds-s-4);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.25);
}
.uds-classbar__tag{
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
}
.uds-classbar .uds-small{
  color: var(--uds-classbar-subtle-fg);
}

/* Classification variants */
.uds-class--unclass { background: var(--uds-class-unclass-bg); color: var(--uds-class-unclass-fg); }
.uds-class--restricted { background: var(--uds-class-restricted-bg); color: var(--uds-class-restricted-fg); }
.uds-class--secret { background: var(--uds-class-secret-bg); color: var(--uds-class-secret-fg); }
.uds-class--cosmic { background: var(--uds-class-cosmic-bg); color: var(--uds-class-cosmic-fg); }

/* App header inner */
.uds-appbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--uds-s-6);
  padding: var(--uds-s-4) 0;
}

.uds-brand{
  display:flex;
  align-items:center;
  gap: var(--uds-s-3);
  min-width: 260px;
}

.uds-brand__mark {
  background: transparent;
  border: none;
  padding: 0;
}

.uds-brand__logo{
  width: 43px;
  height: 43px;
  border-radius: 12px;
  object-fit: contain;
}

/* ==============================
Brand logo – theme switching
Contract:
- Exactly one logo visible per theme
- Day is default fallback
============================== */

/* ==============================
Default (Day)
============================== */
.uds-brand__logo--day { display: inline-block; }
.uds-brand__logo--night,
.uds-brand__logo--stealth,
.uds-brand__logo--ir { display: none; }


/* ==============================
Night theme
============================== */
html[data-theme="night"] .uds-brand__logo--night,
body[data-theme="night"] .uds-brand__logo--night {
  display: inline-block;
}

html[data-theme="night"] .uds-brand__logo--day,
html[data-theme="night"] .uds-brand__logo--stealth,
html[data-theme="night"] .uds-brand__logo--ir,
body[data-theme="night"] .uds-brand__logo--day,
body[data-theme="night"] .uds-brand__logo--stealth,
body[data-theme="night"] .uds-brand__logo--ir {
  display: none;
}


/* ==============================
Field (Stealth visual)
============================== */
html[data-theme="field"] .uds-brand__logo--stealth,
body[data-theme="field"] .uds-brand__logo--stealth {
  display: inline-block;
}

html[data-theme="field"] .uds-brand__logo--day,
html[data-theme="field"] .uds-brand__logo--night,
html[data-theme="field"] .uds-brand__logo--ir,
body[data-theme="field"] .uds-brand__logo--day,
body[data-theme="field"] .uds-brand__logo--night,
body[data-theme="field"] .uds-brand__logo--ir {
  display: none;
}


/* ==============================
IR theme
============================== */
html[data-theme="stealth"] .uds-brand__logo--ir,
body[data-theme="stealth"] .uds-brand__logo--ir {
  display: inline-block;
}

html[data-theme="stealth"] .uds-brand__logo--day,
html[data-theme="stealth"] .uds-brand__logo--night,
html[data-theme="stealth"] .uds-brand__logo--stealth,
body[data-theme="stealth"] .uds-brand__logo--day,
body[data-theme="stealth"] .uds-brand__logo--night,
body[data-theme="stealth"] .uds-brand__logo--stealth {
  display: none;
}


.uds-brand__text{line-height:1.1}
.uds-brand__title{font-weight:900}
.uds-brand__sub{opacity:.85; font-size: var(--uds-fs-400)}

.uds-brand__title,
.uds-brand__sub {
  position: relative;
  display: block;
}

.uds-brand__placeholder {
  display: block;
  min-height: 1.5em;
}

/* Header actions */
.uds-actions{display:flex; gap: var(--uds-s-2); align-items:center}

/* Pills */
.uds-pill{
  border: 1px solid rgba(255,255,255,.25);
  background: var(--uds-pill-bg);
  color: var(--uds-pill-fg);
  border-color: var(--uds-pill-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight:700;
  cursor:pointer;
}
.uds-pill-dark{
  border: 1px solid rgba(255,255,255,.25);
  background: var(--uds-pill-dark-bg);
  color: var(--uds-pill-dark-fg);
  border-color: var(--uds-pill-dark-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight:700;
  cursor:pointer;
}
.uds-chip{
  border: 1px solid rgba(255,255,255,.25);
  background: var(--uds-pill-dark-bg);
  color: var(--uds-pill-dark-fg);
  border-color: var(--uds-pill-dark-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight:700;
}

/* Pill focus + hover */
.uds-pill:focus-visible,
.uds-pill-dark:focus-visible {
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: 2px;
  box-shadow: var(--uds-focus-glow);
  border-color: var(--uds-focus);
}

.uds-pill:hover,
.uds-pill-dark:hover {
  border-color: var(--uds-interaction);
}


.uds-actions .uds-pill {
  text-decoration: none;
}


/* ==============================
8) PAGE / TEMPLATE HELPERS
============================== */

.uds-kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--uds-s-4);
}
@media (max-width: 1000px){
  .uds-kpi-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .uds-kpi-grid{grid-template-columns: 1fr;}
}

.uds-kpi{
  padding: var(--uds-s-4);
  border-radius: var(--uds-r-3);
  border: 1px solid var(--uds-border);
  background: var(--uds-surface);
}
.uds-kpi__n{font-size: var(--uds-fs-800); font-weight: 900; margin: 0}
.uds-kpi__l{margin: 0; color: var(--uds-text-muted); font-weight: 700}

/* Skip link */
.uds-skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.uds-skip:focus{
  left: var(--uds-s-4);
  top: var(--uds-s-4);
  width:auto;
  height:auto;
  padding: var(--uds-s-3) var(--uds-s-4);
  background: var(--uds-surface-2);
  border: 2px solid var(--uds-border);
  border-radius: var(--uds-r-2);
}


/* ==============================
9) NAVIGATION (Runtime overlay)
Notes:
- In runtime the nav is off-canvas overlay.
- In the Anvil designer it is forced into the page flow (see designer overrides).
============================== */

.uds-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 100;
  color: var(--uds-nav-fg);
}

html[data-theme="day"] .uds-nav {
  background: var(--uds-universal-blue-500);
}

html[data-theme="night"] .uds-nav {
  background: #000;
}

/* (Stealth nav background is set in theme hardening below) */

.uds-nav[data-open="true"] {
  transform: translateX(0);
}

.uds-nav__inner {
  padding: var(--uds-s-6);
}

.uds-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--uds-s-6);
}

.uds-nav__title {
  margin: 0 0 var(--uds-s-6);
  font-size: var(--uds-fs-600);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.uds-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.uds-nav__link {
  display: block;
  padding: var(--uds-s-3) var(--uds-s-2);
  border-radius: var(--uds-r-2);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.uds-nav__link:hover,
.uds-nav__link:focus-visible {
  background: rgba(255,255,255,.15);
}

/* Close button */
.uds-nav__close {
  background: transparent;
  border: none;
  color: var(--uds-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  padding: var(--uds-s-2);
  border-radius: var(--uds-r-2);
  cursor: pointer;
}

.uds-nav__close:hover,
.uds-nav__close:focus-visible {
  background: rgba(255,255,255,.2);
}

/* Nav content area */
.uds-nav__content {
  display: flex;
  flex-direction: column;
  gap: var(--uds-s-2);
}

/* Designer-only hint */
.uds-nav__placeholder {
  padding: var(--uds-s-4);
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: var(--uds-r-2);
  font-weight: 700;
  text-align: center;
  opacity: .85;
}

/* Scrim */
.uds-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 90;
}

/* Prevent scroll bleed */
html.uds-nav-open,
html.uds-nav-open body {
  overflow: hidden;
}


/* ==============================
10) FORMS (Interaction polish)
Notes:
- Removes inconsistent native focus and applies unified focus rings.
- Error states are class-based.
============================== */

/* Error states */
.uds-input--error {
  border-color: var(--uds-danger);
  outline-color: var(--uds-danger);
}
.uds-textarea--error {
  border-color: var(--uds-danger);
}
.uds-select--error {
  border-color: var(--uds-danger);
}

.uds-charcount {
  font-size: var(--uds-fs-400);
  color: var(--uds-text-muted);
  margin-top: var(--uds-s-1);
}

/* Textarea behaviour */
.uds-textarea {
  resize: none;
  overflow: hidden;
}

/* Remove inconsistent native focus */
.uds-input,
.uds-select,
.uds-textarea,
.uds-checkbox input,
.uds-radio input {
  outline: none;
}

.uds-input:focus-visible,
.uds-select:focus-visible,
.uds-textarea:focus-visible {
  border-color: var(--uds-interaction);
  box-shadow: 0 0 0 3px var(--uds-focus);
}


/* Error state (no focus) */
.uds-input--error,
.uds-select--error,
.uds-textarea--error {
  border-color: var(--uds-danger);
}

/* Error + focus */
.uds-input--error:focus-visible,
.uds-select--error:focus-visible,
.uds-textarea--error:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uds-danger) 35%, transparent);
}

.uds-input:hover,
.uds-select:hover,
.uds-textarea:hover {
  border-color: var(--uds-interaction);
}

/* Date focus consistency */
.uds-input[type="date"]:focus-visible {
  border-color: var(--uds-universal-blue-500);
  box-shadow: 0 0 0 3px var(--uds-focus);
}

/* Checkbox focus */
.uds-checkbox input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--uds-focus);
  border-radius: 4px;
}

/* Radio focus */
.uds-radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--uds-focus);
  border-radius: 50%;
}

/* Disabled controls */
.uds-input:disabled,
.uds-select:disabled,
.uds-textarea:disabled {
  background: var(--uds-surface);
  color: var(--uds-text-muted);
  border-color: var(--uds-border);
  cursor: not-allowed;
  opacity: 0.7;
}

.uds-radio input[type="radio"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.uds-radio input[type="radio"]:disabled + label {
  color: var(--uds-text-muted);
  cursor: not-allowed;
}

/* Radio group error + focus (scoped) */
.uds-radio-group--error .uds-radio input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uds-danger) 35%, transparent);
}


/* ==============================
11) FOOTER
============================== */

.uds-footer {
  background: var(--uds-grey-200);
  border-top: 1px solid var(--uds-border);
}

.uds-footer__text {
  margin: 0;
  padding: var(--uds-s-4) 0;
  font-size: var(--uds-fs-600);
  font-weight:900;
  color: #000;
}

.uds-footer__text__sub {
  margin: 0;
  padding: var(--uds-s-4) 0;
  font-size: var(--uds-fs-400);
  font-weight:200;
  color: #000;
}


/* ==============================
12) LINKS (Semantic links + menu links)
============================== */

.uds-link {
  color: var(--uds-link);
  text-decoration: underline;
  cursor: pointer;
}
.uds-link:hover {
  text-decoration-thickness: 2px;
}
.uds-link:focus {
  outline: 2px solid var(--uds-focus);
  outline-offset: 2px;
}
.uds-link--disabled {
  color: var(--uds-text-muted);
  text-decoration: none;
  cursor: default;
}

.uds-menulink {
  color: var(--uds-white);
  cursor: pointer;
}
.uds-menulink:hover {
  text-decoration-thickness: 2px;
  color: var(--uds-universal-blue-900);
}
.uds-menulink:focus {
  outline: 2px solid var(--uds-universal-blue-900);
  outline-offset: 2px;
}
.uds-menulink--disabled {
  color: var(--uds-text-muted);
  text-decoration: none;
  cursor: default;
}


/* ==============================
13) PASSWORD FIELD
============================== */

.uds-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch; /* important */
}

.uds-input--password {
  padding-right: 4.5rem; /* space for Show/Hide */
}

.uds-password-toggle {
  position: absolute;
  top: 50%;
  right: var(--uds-s-2);
  transform: translateY(-50%);

  background: none;
  border: none;
  padding: 0;
  font-size: var(--uds-fs-400);
  font-weight: 700;
  color: var(--uds-link);
  cursor: pointer;
  line-height: 1; /* prevents font ascender drift */
}

.uds-input-wrap > .uds-input {
  width: 100%;
}

.uds-password-toggle:hover {
  text-decoration: underline;
}

.uds-password-toggle:focus-visible {
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: 2px;
  border-radius: var(--uds-r-1);
}


/* ==============================
14) DESIGNER OVERRIDES (Anvil)
Contract:
- Designer should show nav as a visible sidebar
- Scrim hidden; scrolling restored
- Shell set to row in designer (your current working behaviour)
============================== */

.anvil-designer .uds-nav {
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  transform: none !important;
  width: 280px;
  flex-shrink: 0;
  visibility: visible !important;
  z-index: auto !important;
}

.anvil-designer .uds-nav-scrim {
  display: none !important;
}

.anvil-designer html,
.anvil-designer body {
  overflow: auto !important;
}

/* Designer layout (kept as you had it) */
.anvil-designer .uds-shell {
  flex-direction: row;
}

/* Main app shifts right */
.anvil-designer .uds-shell__main {
  flex: 1;
  min-width: 0;
}

/* Classification bar slot (designer only) */
.uds-classbar-slot {
  width: 100%;
}

.anvil-designer .uds-classbar-placeholder {
  padding: var(--uds-s-3) var(--uds-s-4);
  margin-top: 5px;
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: var(--uds-r-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ==============================
15) NAV TEXT COLOUR CONTRACT
Notes:
- Ensures nav text remains legible across themes.
============================== */

.uds-nav,
.uds-nav__title,
.uds-nav__close,
.uds-nav__link {
  color: var(--uds-nav-fg);
}


/* ==============================
16) THEME OVERRIDES – STEALTH (Visual hardening)
Notes:
- Intentional use of !important to harden stealth visuals.
- Avoid layout changes here.
============================== */

html[data-theme="field"] * {
  box-shadow: none !important;
}

html[data-theme="field"] .uds-appbar {
  background: #000 !important;
  border-bottom: 1px solid #1f3d1f;
}

html[data-theme="field"] .uds-card {
  background: #000;
  border-color: #1f3d1f;
}

html[data-theme="field"] .uds-nav {
  background: #000;
}

/* Stealth mode – primary button */
html[data-theme="field"] .uds-btn--primary {
  background: #000;
  color: var(--uds-text);          /* phosphor green */
  border: 1px solid var(--uds-text);
}

html[data-theme="field"] .uds-btn--primary:hover,
html[data-theme="field"] .uds-btn--primary:focus-visible {
  background: #000;
  color: var(--uds-text);
  border-color: var(--uds-link-hover);
}

/* Field mode – footer */
html[data-theme="field"] .uds-footer {
  background: #000;
  border-top: 1px solid var(--uds-border);
}
html[data-theme="field"] .uds-footer__text,
html[data-theme="field"] .uds-footer__text__sub {
  color: var(--uds-text); /* phosphor green */
}

/* Stealth mode – footer */
html[data-theme="stealth"] .uds-footer {
  background: #000;
  border-top: 1px solid var(--uds-border);
}
html[data-theme="stealth"] .uds-footer__text,
html[data-theme="stealth"] .uds-footer__text__sub {
  color: var(--uds-text);
}

/* Stealth text unification */
html[data-theme="field"] .uds-menulink,
html[data-theme="field"] .uds-brand__title,
html[data-theme="field"] .uds-brand__sub,
html[data-theme="field"] .uds-nav__title,
html[data-theme="field"] .uds-nav__link {
  color: var(--uds-text);
}

/* Stealth classification bar */
html[data-theme="field"] .uds-classbar {
  background: #000;
  color: var(--uds-text);
  border-bottom: 1px solid var(--uds-border);
}

/* FIXED: removed invalid trailing comma so the rule applies */
html[data-theme="field"] .uds-classbar__tag {
  background: transparent;
  border-color: var(--uds-border);
  color: var(--uds-text);
}

/* Neutralise classification variants in stealth */
html[data-theme="field"] .uds-class--unclass,
html[data-theme="field"] .uds-class--restricted,
html[data-theme="field"] .uds-class--secret,
html[data-theme="field"] .uds-class--cosmic {
  background: #000;
  color: var(--uds-text);
}

/* Stealth – small / muted text */
html[data-theme="field"] .uds-small {
  color: var(--uds-text-muted);
}


/* ==============================
17) THEME OVERRIDES – NIGHT (Footer)
============================== */

html[data-theme="night"] .uds-footer {
  background: #000;
  border-top: 1px solid var(--uds-border);
}

html[data-theme="night"] .uds-footer__text {
  color: #fff;
}

html[data-theme="night"] .uds-footer__text__sub {
  color: #fff;
}

/* ==============================
18) THEME – IR (Night Vision Goggles)
Purpose:
- Infra-red / NVG-safe red-on-black theme
- Zero glow, zero shadow, zero colour noise
- Behaviour identical to other themes
============================== */

html[data-theme="stealth"] {
  /* Core surfaces */
  --uds-bg: #000000;
  --uds-surface: #000000;
  --uds-surface-2: #000000;

  /* IR red – tuned to avoid NVG bloom */
  --uds-text: #B00000;
  --uds-text-muted: #6B0000;

  --uds-border: #330000;

  /* Links */
  --uds-link: #B00000;
  --uds-link-hover: #E00000;

  /* Semantic colours collapsed to red */
  --uds-success: #B00000;
  --uds-warning: #B00000;
  --uds-danger:  #B00000;
  --uds-info:    #B00000;

  /* Navigation */
  --uds-nav-fg: var(--uds-text);

  /* Pills */
  --uds-pill-bg: #000000;
  --uds-pill-fg: var(--uds-text);
  --uds-pill-border: var(--uds-border);

  --uds-pill-dark-bg: #000000;
  --uds-pill-dark-fg: var(--uds-text);
  --uds-pill-dark-border: var(--uds-border);

  /* Focus – extremely restrained */
  --uds-focus: rgba(176,0,0,.35);
  --uds-focus-ring-size: 2px;
  --uds-focus-glow: none;
}


/* ==============================
IR – Global hardening
============================== */

html[data-theme="stealth"] * {
  box-shadow: none !important;
  text-shadow: none !important;
}


/* ==============================
IR – App chrome
============================== */

html[data-theme="stealth"] .uds-appbar {
  background: #000 !important;
  border-bottom: 1px solid var(--uds-border);
}

html[data-theme="stealth"] .uds-nav {
  background: #000;
}

html[data-theme="stealth"] .uds-footer {
  background: #000;
  border-top: 1px solid var(--uds-border);
}


/* ==============================
IR – Text unification
============================== */

html[data-theme="stealth"] body,
html[data-theme="stealth"] .uds-brand__title,
html[data-theme="stealth"] .uds-brand__sub,
html[data-theme="stealth"] .uds-nav__title,
html[data-theme="stealth"] .uds-nav__link,
html[data-theme="stealth"] .uds-menulink,
html[data-theme="stealth"] .uds-link {
  color: var(--uds-text);
}


/* ==============================
IR – Buttons
============================== */

html[data-theme="stealth"] .uds-btn--primary {
  background: #000;
  color: var(--uds-text);
  border: 1px solid var(--uds-text);
}

html[data-theme="stealth"] .uds-btn--primary:hover,
html[data-theme="stealth"] .uds-btn--primary:focus-visible {
  background: #000;
  color: var(--uds-link-hover);
  border-color: var(--uds-link-hover);
}


/* ==============================
IR – Cards & surfaces
============================== */

html[data-theme="stealth"] .uds-card {
  background: #000;
  border-color: var(--uds-border);
}


/* ==============================
IR – Forms
============================== */

html[data-theme="stealth"] .uds-input,
html[data-theme="stealth"] .uds-select,
html[data-theme="stealth"] .uds-textarea {
  background: #000;
  color: var(--uds-text);
  border-color: var(--uds-border);
}

html[data-theme="stealth"] .uds-input:focus-visible,
html[data-theme="stealth"] .uds-select:focus-visible,
html[data-theme="stealth"] .uds-textarea:focus-visible {
  border-color: var(--uds-link-hover);
  box-shadow: none;
}


/* ==============================
IR – Classification bar
============================== */

html[data-theme="stealth"] .uds-classbar {
  background: #000;
  color: var(--uds-text);
  border-bottom: 1px solid var(--uds-border);
}

html[data-theme="stealth"] .uds-classbar__tag {
  background: transparent;
  border-color: var(--uds-border);
  color: var(--uds-text);
}

/* Neutralise all classification variants */
html[data-theme="stealth"] .uds-class--unclass,
html[data-theme="stealth"] .uds-class--restricted,
html[data-theme="stealth"] .uds-class--secret,
html[data-theme="stealth"] .uds-class--cosmic {
  background: #000;
  color: var(--uds-text);
}


/* ==============================
IR – Small / muted text
============================== */

html[data-theme="stealth"] .uds-small {
  color: var(--uds-text-muted);
}

/* Day */
html[data-theme="day"]{
  --uds-interaction: var(--uds-universal-blue-500);
}

/* Night */
html[data-theme="night"]{
  --uds-interaction: var(--uds-universal-blue-500);
}

/* Field (green) */
html[data-theme="field"]{
  --uds-interaction: #7CFF7C;
}

/* Stealth / IR (red) */
html[data-theme="stealth"]{
  --uds-interaction: #B00000;
}

html[data-theme="field"] * {
  box-shadow: none !important;
}

html[data-theme="stealth"] * {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==============================
Tabs - tab buttons
============================== */

.uds-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--uds-tab-border);
}

.uds-tab{
  appearance:none;
  background:transparent;
  border:none;
  border-right:1px solid var(--uds-tab-border);
  border-bottom:3px solid transparent;

  padding:0.6rem 1rem;
  font-weight:600;
  cursor:pointer;

  color:var(--uds-tab-fg);
}

.uds-tab:last-child{
  border-right:none;
}

.uds-tab:hover{
  background:var(--uds-tab-hover);
}

.uds-tab[aria-selected="true"]{
  border-bottom-color:var(--uds-tab-active);
}

/* =========================================================
uds × Anvil Modal Integration
Purpose: Bring Anvil alert modal fully into uds theme
========================================================= */

/* Backdrop */
.anvil-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

/* Modal dialog */
.anvil-modal-dialog {
  max-width: 75%;
  margin: 10vh auto;
  outline: none;
}

/* Modal container */
.anvil-modal-content {
  background: var(--uds-surface-1, #ffffff);
  color: var(--uds-text-primary, #111827);
  border-radius: var(--uds-radius-m, 6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border: 1px solid var(--uds-border-subtle, #e5e7eb);
  font-family: var(--font-body);
}

/* Hide unused Anvil header cleanly */
.anvil-modal-header {
  display: none !important;
}

/* Body spacing */
.anvil-modal-body {
  padding: var(--uds-s-4, 1.5rem);
}

/* Footer reset */
.anvil-modal-footer {
  padding: var(--uds-s-3, 1rem);
  border-top: 1px solid var(--uds-border-subtle, #e5e7eb);
  text-align: right;
}

/* Remove Anvil button styling entirely */
.anvil-btn,
.anvil-btn-success {
  all: unset;
}

/* Force uds button alignment */
.anvil-alert-footer-button-panel {
  display: flex;
  justify-content: flex-end;
  gap: var(--uds-s-2);
}

/* Ensure embedded uds buttons render correctly */
.anvil-modal .uds-btn {
  margin: 0;
}

/* Typography inside modal */
.anvil-modal h1,
.anvil-modal h2,
.anvil-modal h3,
.anvil-modal h4,
.anvil-modal p,
.anvil-modal span {
  font-family: var(--font-body);
  line-height: 1.5;
}

/* Theme adaptations */
html[data-theme="night"] .anvil-modal-content,
html[data-theme="stealth"] .anvil-modal-content,
html[data-theme="field"] .anvil-modal-content {
  background: var(--uds-surface-1);
  color: var(--uds-text-primary);
  border-color: var(--uds-border-muted);
}

/* Stealth posture hardening */
html[data-theme="stealth"] .anvil-modal-backdrop,
html[data-theme="field"] .anvil-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 640px){

  .uds-appbar__inner{
    flex-wrap: wrap;
    gap: var(--uds-s-3);
  }

  .uds-brand{
    min-width: 0;              /* allow shrink */
    flex: 1 1 auto;
  }

  .uds-actions{
    flex: 0 0 100%;            /* move actions to next row */
    justify-content: flex-end;
  }

}

.uds-code {
  position: relative;
  display: block;
  width: 100%;

  background: var(--uds-code-bg);
  color: var(--uds-code-fg);
  border: 1px solid var(--uds-code-border);
  border-radius: var(--uds-r-2);
}


/* Copy button */
.uds-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;

  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;

  background: var(--uds-code-btn-bg);
  color: var(--uds-code-btn-fg);
  border: 1px solid var(--uds-code-border);
  border-radius: 4px;
  cursor: pointer;
}

.uds-copy-btn:hover,
.uds-copy-btn:focus-visible {
  background: var(--uds-code-btn-hover);
}


.uds-code pre {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem;
  overflow-x: auto;

  background: transparent; /* important */
}

.uds-code code {
  display: block;
  width: max-content;
  min-width: 100%;
  white-space: pre;

  color: inherit; /* critical for field / IR */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ==============================
Chat pills (conversation bubbles)
============================== */

.uds-chat {
  display: flex;
  width: 100%;
  margin: var(--uds-s-2) 0;
}

.uds-chat--system {
  justify-content: flex-start;
}

.uds-chat--user {
  justify-content: flex-end;
}

.uds-chat__bubble {
  max-width: var(--uds-chat-maxw);
  padding: 0.6rem 0.85rem;

  border-radius: var(--uds-chat-radius);
  font-size: var(--uds-fs-500);
  line-height: 1.45;
  word-wrap: break-word;
}

.uds-chat--system .uds-chat__bubble {
  cursor: copy;
}

.uds-chat__bubble--copied {
  opacity: 0.85;
}

@keyframes uds-copy-pulse {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

.uds-chat__bubble--copied {
  animation: uds-copy-pulse 0.3s ease-in-out;
}

/* Left / system */
.uds-chat--system .uds-chat__bubble {
  background: var(--uds-chat-system-bg);
  color: var(--uds-chat-system-fg);

  border-top-left-radius: 4px;
}

/* Right / user */
.uds-chat--user .uds-chat__bubble {
  background: var(--uds-chat-user-bg);
  color: var(--uds-chat-user-fg);

  border-top-right-radius: 4px;
}

.uds-uploader {
  display: flex;
  align-items: center;
  gap: var(--uds-s-3);
}

.uds-uploader__filename {
  font-size: 0.875rem;
  color: var(--uds-colour-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.uds-uploader[data-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.uds-rich-wrapper {
  position: relative;
  width: 100%;
}

/* ======================================================================
PATCH: polish + focus-clip fix (safe, drop-in, end-of-file wins)
- Adds missing var aliases used by modal/uploader/tabs
- Makes focus ring draw inward (prevents clipping by overflow/containers)
- Re-asserts canonical Tabs styling to defeat the duplicate tabs block
====================================================================== */

/* ---------- 1) Variable aliases / missing tokens ---------- */
:root{
  /* Modal section uses these names; map them to your UDS variables */
  --uds-surface-1: var(--uds-surface-2);
  --uds-text-primary: var(--uds-text);
  --uds-border-subtle: var(--uds-border);
  --uds-border-muted: var(--uds-border);
  --uds-radius-m: var(--uds-r-2);

  /* Uploader typo compatibility (your uploader uses --uds-colour-text-muted) */
  --uds-colour-text-muted: var(--uds-text-muted);

  /* The duplicate Tabs block references these; define them so it can’t break UI */
  --uds-tab-border: var(--uds-border);
  --uds-tab-fg: var(--uds-text);
  --uds-tab-hover: color-mix(in srgb, var(--uds-interaction) 12%, transparent);
  --uds-tab-active: var(--uds-interaction);
}

/* ---------- 2) Focus ring that cannot be clipped ---------- */
/* Draw the outline inward so it remains visible inside overflow/edges */
:focus-visible{
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: calc(var(--uds-focus-ring-offset) * -1);
  box-shadow: var(--uds-focus-glow);
}

/* Keep your “strong unified focus” list, but ensure it also draws inward */
.uds-btn:focus-visible,
.uds-link:focus-visible,
.uds-menulink:focus-visible,
.uds-tab:focus-visible,
.uds-nav__link:focus-visible,
.uds-nav__close:focus-visible,
.uds-pill:focus-visible,
.uds-pill-dark:focus-visible,
.uds-input:focus-visible,
.uds-select:focus-visible,
.uds-textarea:focus-visible,
.uds-checkbox input:focus-visible,
.uds-radio input:focus-visible,
.uds-copy-btn:focus-visible,
.uds-password-toggle:focus-visible{
  outline-offset: calc(var(--uds-focus-ring-offset) * -1);
  margin-left: 5px;
}

/* Remove older :focus-only rules so keyboard + mouse behave consistently */
.uds-link:focus,
.uds-menulink:focus{
  outline: none;
}

/* ---------- 3) Canonical Tabs styling (wins last) ---------- */
/* This prevents the later duplicate Tabs block from undoing your wrap + margin */
.uds-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--uds-s-2);
  border-bottom: 1px solid var(--uds-border);
  margin-bottom: var(--uds-s-4);
}

.uds-tab{
  appearance: none;
  padding: var(--uds-s-3) var(--uds-s-4);
  margin-top: 5px;
  border-radius: var(--uds-r-2) var(--uds-r-2) 0 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--uds-text);
  cursor: pointer;
  font-weight: 700;
}

.uds-tab:hover{
  background: var(--uds-tab-hover);
}

.uds-tab[aria-selected="true"]{
  border-color: var(--uds-border);
  border-bottom-color: var(--uds-surface-2);
  background: var(--uds-surface-2);
}

@media (max-width: 640px){
  .uds-tabs{
    border-bottom: none;
    margin-bottom: var(--uds-s-3);
  }
  .uds-tab[aria-selected="true"]{
    border-bottom-color: var(--uds-border);
  }
}

/* =========================================================
UDS Modal + legacy .modal-* + Anvil .anvil-btn harmonisation
Drop-in: paste at END of your master stylesheet so it wins.
Purpose:
- Bring your old modal/button CSS into UDS tokens + focus system
- Works for both Bootstrap-ish (.modal-*) and Anvil (.anvil-modal-*)
========================================================= */

/* ---------- Backdrop ---------- */
.anvil-modal-backdrop,
.modal-backdrop{
  background: rgba(0,0,0,.75);
}
html[data-theme="field"] .anvil-modal-backdrop,
html[data-theme="stealth"] .anvil-modal-backdrop,
html[data-theme="field"] .modal-backdrop,
html[data-theme="stealth"] .modal-backdrop{
  background: rgba(0,0,0,.90);
}

/* ---------- Dialog sizing ---------- */
.anvil-modal-dialog,
.modal-dialog{
  width: min(92vw, 820px);
  max-width: 92vw;
  margin: 10vh auto;
  outline: none;
}

/* ---------- Modal container ---------- */
.anvil-modal-content,
.modal-content{
  background: var(--uds-surface-2);
  color: var(--uds-text);
  border: 1px solid var(--uds-border);
  border-radius: var(--uds-r-3);
  box-shadow: var(--uds-shadow);
  font-family: var(--font-body);
  z-index: 9999;

  /* Allow focus rings to be visible outside the modal */
  overflow: visible;
}

/* ---------- Header ---------- */
.anvil-modal-header,
.modal-header{
  padding: var(--uds-s-6) var(--uds-s-6) var(--uds-s-4);
  border-bottom: 1px solid var(--uds-border);
  background: transparent;
}

/* If you want Anvil's built-in header hidden (keep if you still want that) */
/*
.anvil-modal-header{
display: none !important;
}
*/

/* ---------- Body ---------- */
.anvil-modal-body,
.modal-body{
  position: relative;
  padding: var(--uds-s-6);
  margin: 0; /* kills the old 20px margin that can cause layout oddities */

  /* Prevent horizontal overflow while keeping focus rings visible */
  overflow-x: auto;
  overflow-y: visible;
}

/* Legacy alert padding compatibility */
.modal-body.alert-text,
.modal-title.alert-title{
  padding: var(--uds-s-4);
}

/* ---------- Footer ---------- */
.anvil-modal-footer,
.modal-footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--uds-s-2);

  padding: var(--uds-s-4) var(--uds-s-6) var(--uds-s-6);
  border-top: 1px solid var(--uds-border);
  background: transparent;
}

/* Anvil alert footer panel layout */
.anvil-alert-footer-button-panel{
  display: flex;
  justify-content: flex-end;
  gap: var(--uds-s-2);
}

/* ---------- Buttons: style Anvil defaults like UDS buttons ---------- */
/* If you are already rendering .uds-btn inside modals, this won't fight it */
.anvil-btn{
  appearance: none;
  background: transparent;
  color: var(--uds-text);

  border: 1px solid transparent;
  border-radius: var(--uds-r-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uds-s-2);

  padding: 0.65rem 1rem;
  min-height: calc(12px + 1.5em);

  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Default (maps to UDS secondary) */
.anvil-btn-default{
  background: transparent;
  border-color: var(--uds-border);
  color: var(--uds-text);
}
.anvil-btn-default:hover{
  border-color: var(--uds-interaction);
}

/* Primary / Success (maps to UDS primary) */
.anvil-btn-primary,
.anvil-btn-success{
  background: var(--uds-universal-blue-900);
  border-color: var(--uds-universal-blue-900);
  color: #fff;
}
.anvil-btn-primary:hover,
.anvil-btn-success:hover{
  background: var(--uds-universal-blue-500);
  border-color: var(--uds-universal-blue-500);
}

/* Focus: use your unified focus system (no yellow outline) */
.anvil-btn:focus{ outline: none; }
.anvil-btn:focus-visible{
  outline: var(--uds-focus-ring-size) solid var(--uds-focus);
  outline-offset: calc(var(--uds-focus-ring-offset) * -1);
  box-shadow: var(--uds-focus-glow);
}

/* Active: subtle press, theme-safe */
.anvil-btn:active{
  transform: translateY(1px);
}

/* ---------- Theme hardening for Field / IR ---------- */
html[data-theme="field"] .anvil-modal-content,
html[data-theme="field"] .modal-content,
html[data-theme="stealth"] .anvil-modal-content,
html[data-theme="stealth"] .modal-content{
  background: var(--uds-surface-2);
  color: var(--uds-text);
  border-color: var(--uds-border);
  box-shadow: none; /* matches your global hardening */
}

html[data-theme="field"] .anvil-btn-primary,
html[data-theme="field"] .anvil-btn-success,
html[data-theme="stealth"] .anvil-btn-primary,
html[data-theme="stealth"] .anvil-btn-success{
  background: #000;
  border-color: var(--uds-text);
  color: var(--uds-text);
}
html[data-theme="field"] .anvil-btn-primary:hover,
html[data-theme="field"] .anvil-btn-success:hover,
html[data-theme="stealth"] .anvil-btn-primary:hover,
html[data-theme="stealth"] .anvil-btn-success:hover{
  border-color: var(--uds-link-hover);
  color: var(--uds-link-hover);
}

/* =========================================================
UDS: Force form control surfaces in Field + Stealth
Drop-in: paste at END of file so it wins.
========================================================= */

html[data-theme="field"] .uds-input,
html[data-theme="field"] .uds-select,
html[data-theme="field"] .uds-textarea,
html[data-theme="field"] input,
html[data-theme="field"] select,
html[data-theme="field"] textarea,
html[data-theme="stealth"] .uds-input,
html[data-theme="stealth"] .uds-select,
html[data-theme="stealth"] .uds-textarea,
html[data-theme="stealth"] input,
html[data-theme="stealth"] select,
html[data-theme="stealth"] textarea{
  background: #000 !important;
  color: var(--uds-text) !important;
  border-color: var(--uds-border) !important;
  -webkit-text-fill-color: var(--uds-text) !important; /* Safari */
}

/* Placeholders */
html[data-theme="field"] ::placeholder,
html[data-theme="stealth"] ::placeholder{
  color: var(--uds-text-muted) !important;
  opacity: 1;
}

/* Autofill (Chrome/Edge) */
html[data-theme="field"] input:-webkit-autofill,
html[data-theme="field"] textarea:-webkit-autofill,
html[data-theme="field"] select:-webkit-autofill,
html[data-theme="stealth"] input:-webkit-autofill,
html[data-theme="stealth"] textarea:-webkit-autofill,
html[data-theme="stealth"] select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: var(--uds-text) !important;
}

/* Focus keeps your unified ring, but ensure border is coherent */
html[data-theme="field"] .uds-input:focus-visible,
html[data-theme="field"] .uds-select:focus-visible,
html[data-theme="field"] .uds-textarea:focus-visible,
html[data-theme="stealth"] .uds-input:focus-visible,
html[data-theme="stealth"] .uds-select:focus-visible,
html[data-theme="stealth"] .uds-textarea:focus-visible{
  border-color: var(--uds-interaction) !important;
}

/* Disabled controls stay black but look disabled */
html[data-theme="field"] .uds-input:disabled,
html[data-theme="field"] .uds-select:disabled,
html[data-theme="field"] .uds-textarea:disabled,
html[data-theme="field"] input:disabled,
html[data-theme="field"] select:disabled,
html[data-theme="field"] textarea:disabled,
html[data-theme="stealth"] .uds-input:disabled,
html[data-theme="stealth"] .uds-select:disabled,
html[data-theme="stealth"] .uds-textarea:disabled,
html[data-theme="stealth"] input:disabled,
html[data-theme="stealth"] select:disabled,
html[data-theme="stealth"] textarea:disabled{
  opacity: 0.65;
}

/* =========================================================
UDS Modal: prevent right-edge clipping while protecting focus rings
Drop-in: paste at END so it wins.
Goals:
- Constrain modal content to viewport
- Ensure inner Anvil layout containers can shrink
- Make inputs/selects/textarea obey container width
- KEEP FOCUS RINGS VISIBLE (no clipping)
========================================================= */

/* 1) Make the dialog truly viewport-bounded */
.anvil-modal-dialog,
.modal-dialog{
  width: min(92vw, 820px);
  max-width: 92vw;
  box-sizing: border-box;
}

/* 2) Modal content allows focus rings but constrains layout */
.anvil-modal-content,
.modal-content{
  box-sizing: border-box;

  /* FIXED: Keep overflow visible so focus rings show */
  overflow: visible;

  /* Optional: prevents scroll chaining oddities on mobile */
  overscroll-behavior: contain;
}

/* 3) Body: handle overflow here instead, with breathing room for focus */
.anvil-modal-body,
.modal-body{
  box-sizing: border-box;
  max-width: 100%;

  /* Add subtle padding for focus ring space */
  padding: var(--uds-s-6);

  /* Allow horizontal scroll if content is truly too wide, but prefer wrapping */
  overflow-x: auto;
  overflow-y: visible;
}

/* 4) Critical: allow flex/grid children to shrink (common Anvil cause of right clipping) */
.anvil-modal-body *,
.modal-body *{
  min-width: 0; /* enables flex items to shrink instead of overflowing */
}

/* 5) Force form controls to respect container width */
.anvil-modal-body input,
.anvil-modal-body select,
.anvil-modal-body textarea,
.modal-body input,
.modal-body select,
.modal-body textarea{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* If you have "inline" controls that should not be full width, opt them out with a class */
.anvil-modal-body .uds-inline,
.modal-body .uds-inline{
  width: auto;
  max-width: 100%;
}

/* 6) Long labels / helper text shouldn't push layout wider */
.anvil-modal-body label,
.modal-body label,
.anvil-modal-body .anvil-label,
.modal-body .anvil-label{
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 7) If any Anvil panels are still forcing width, this catches most of them */
.anvil-modal-body .anvil-panel,
.anvil-modal-body .anvil-flow-panel,
.anvil-modal-body .anvil-column-panel,
.anvil-modal-body .anvil-grid-panel,
.anvil-modal-body .anvil-rich-text,
.modal-body .anvil-panel,
.modal-body .anvil-flow-panel,
.modal-body .anvil-column-panel,
.modal-body .anvil-grid-panel,
.modal-body .anvil-rich-text{
  max-width: 100%;
  box-sizing: border-box;
}

.uds-input:focus-visible,
.uds-select:focus-visible,
.uds-textarea:focus-visible {
  width: 98%;
}