/* Shared application foundation, approved in UI Foundation 02.
   CSS custom properties cannot be used in media conditions: keep the documented
   768/1200 boundaries and breakpoint tests synchronized. */
.ui-foundation {
  color-scheme: light;
  --cs-space-1: 8px;
  --cs-space-2: 16px;
  --cs-space-3: 24px;
  --cs-space-4: 32px;
  --cs-space-5: 40px;
  --cs-space-6: 48px;
  --cs-space-8: 64px;
  --cs-content-max: 1280px;
  --cs-form-max: 480px;
  --cs-field-gap: var(--cs-space-1);
  --cs-form-gap: var(--cs-space-3);
  --cs-font-helper: 14px;
  --cs-line-helper: 20px;
  --cs-heading-gap: var(--cs-space-2);
  --cs-grid-columns: 4;
  --cs-grid-gap: var(--cs-space-2);
  --cs-page-gutter: var(--cs-space-2);
  --cs-header-span: 2;
  --cs-section-gap: var(--cs-space-4);
  --cs-card-padding: var(--cs-space-3);
  --cs-control-height: var(--cs-space-6);
  --cs-control-line: 1.5;
  --cs-control-border: 1px;
  --cs-brand-mark-size: var(--cs-space-4);
  --cs-safe-area-top: env(safe-area-inset-top, 0px);
  --cs-safe-area-right: env(safe-area-inset-right, 0px);
  --cs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --cs-safe-area-left: env(safe-area-inset-left, 0px);
  --cs-radius-control: 8px;
  --cs-radius-card: 8px;
  --cs-font-small: 14px;
  --cs-font-body: 16px;
  --cs-font-label: 16px;
  --cs-font-heading: 32px;
  --cs-line-body: 24px;
  --cs-line-heading: 40px;
  --cs-bg: #f7f8fa;
  --cs-surface: #ffffff;
  --cs-text: #182331;
  --cs-muted: #526174;
  --cs-border: #ccd3dd;
  --cs-input-border: #8794a6;
  --cs-primary: #0b6bf2;
  --cs-primary-hover: #0756c7;
  --cs-focus: #0756c7;
  --cs-danger: #a32138;
  --cs-success: #116646;
  margin: 0;
  min-width: 0;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-size: var(--cs-font-body);
  line-height: var(--cs-line-body);
}
.ui-foundation *, .ui-foundation *::before, .ui-foundation *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}
.ui-foundation .foundation-container {
  width: min(calc(100% - var(--cs-page-gutter) * 2), var(--cs-content-max));
  margin-inline: auto;
}
.ui-foundation .foundation-grid {
  display: grid;
  grid-template-columns: repeat(var(--cs-grid-columns), minmax(0, 1fr));
  gap: var(--cs-grid-gap);
}
.ui-foundation .foundation-header { background: var(--cs-surface); border-bottom: 1px solid var(--cs-border); }
.ui-foundation .foundation-header-inner { align-items: center; padding-block: var(--cs-space-2); }
.ui-foundation .foundation-brand { grid-column: span var(--cs-header-span); justify-self: start; gap: var(--cs-space-1); font-size: 20px; color: var(--cs-text); white-space: nowrap; min-width: max-content; }
.ui-foundation .foundation-brand::before { content: ""; }
/* Exact public-site .lightBrand i artwork, source2932061/app/globals.css.
   The unrelated public favicon is not the header logo. No remote asset. */
.ui-foundation .foundation-brand::before,
.ui-foundation .app-brand-mark {
  width: var(--cs-brand-mark-size);
  height: var(--cs-brand-mark-size);
  flex: 0 0 var(--cs-brand-mark-size);
  border-radius: 50%;
  background: conic-gradient(from 35deg,#1475ff 0 34%,#fff 34% 45%,#1266e7 45% 75%,#69a8ff 75%);
  color: transparent;
}
.ui-foundation .foundation-locale { grid-column: span var(--cs-header-span); justify-self: end; }
.ui-foundation .locale-switcher { padding: 0; gap: 0; border-radius: var(--cs-radius-control); }
.ui-foundation .locale-switcher button { min-width: var(--cs-control-height); min-height: var(--cs-control-height); font-size: var(--cs-font-small); color: var(--cs-muted); }
.ui-foundation .locale-switcher button[aria-pressed="true"] { color: var(--cs-primary-hover); }
.ui-foundation .foundation-main { padding-block: var(--cs-space-3) var(--cs-space-8); }
.ui-foundation .foundation-back-row { grid-column: 1 / -1; }
.ui-foundation.login-page .foundation-back-row { width: 100%; max-width: var(--cs-form-max); justify-self: center; }
.ui-foundation .foundation-back { display: inline-flex; align-items: center; gap: var(--cs-space-1); min-height: var(--cs-control-height); text-decoration: none; }
.ui-foundation .foundation-auth { grid-column: 1 / -1; width: 100%; max-width: var(--cs-form-max); min-width: 0; justify-self: center; margin-block: var(--cs-space-3) var(--cs-space-4); }
.ui-foundation h1 { font-size: var(--cs-font-heading); line-height: var(--cs-line-heading); margin: 0; }
.ui-foundation .auth-description { color: var(--cs-muted); margin-block: var(--cs-space-2) var(--cs-section-gap); }
.ui-foundation form { gap: var(--cs-form-gap); }
.ui-foundation label { color: var(--cs-text); font-size: var(--cs-font-label); font-weight: 650; gap: var(--cs-field-gap); }
.ui-foundation input { min-height: var(--cs-control-height); min-width: 0; padding: var(--cs-space-1) var(--cs-space-2); border-color: var(--cs-input-border); border-radius: var(--cs-radius-control); background: var(--cs-surface); font-size: var(--cs-font-body); }
.ui-foundation #submit { min-height: var(--cs-control-height); padding: var(--cs-space-1) var(--cs-space-2); background: var(--cs-primary); color: #ffffff; border-radius: var(--cs-radius-control); }
.ui-foundation #submit:hover { background: var(--cs-primary-hover); }
.ui-foundation a { color: var(--cs-primary-hover); }
.ui-foundation .auth-links { display: flex; flex-wrap: wrap; column-gap: var(--cs-space-3); row-gap: var(--cs-space-1); margin-top: var(--cs-space-3); font-size: var(--cs-font-small); }
.ui-foundation .auth-links a { display: inline-flex; align-items: center; min-height: var(--cs-control-height); overflow-wrap: anywhere; }
.ui-foundation :is(a, button, input):focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
.ui-foundation .message { margin-top: var(--cs-space-3); padding: var(--cs-space-2); border-radius: var(--cs-radius-control); line-height: var(--cs-line-body); }
.ui-foundation .message.bad { color: var(--cs-danger); border-color: var(--cs-danger); }
.ui-foundation .message.ok { color: var(--cs-success); border-color: var(--cs-success); }
@media (min-width: 768px) {
  .ui-foundation { --cs-grid-columns: 8; --cs-page-gutter: var(--cs-space-3); --cs-header-span: 4; }
}
@media (min-width: 1200px) {
  .ui-foundation { --cs-grid-columns: 12; --cs-grid-gap: var(--cs-space-3); --cs-page-gutter: var(--cs-space-4); --cs-header-span: 6; }
}

/* Existing component classes consume the same tokens, not a second theme. */
.ui-foundation {
  --app-bg: var(--cs-bg); --app-surface: var(--cs-surface);
  --app-border: var(--cs-border); --app-text: var(--cs-text);
  --app-muted: var(--cs-muted); --app-accent: var(--cs-primary);
  --app-danger: var(--cs-danger); --app-success: var(--cs-success);
  --app-shadow: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ui-foundation :is(.app-main, .app-header-inner, .shell.wide) {
  width: min(calc(100% - var(--cs-page-gutter) * 2), var(--cs-content-max));
  margin-inline: auto;
}
.ui-foundation .app-header { position: relative; background: var(--cs-surface); backdrop-filter: none; }
.ui-foundation .app-header-inner { min-height: 80px; gap: var(--cs-space-2); flex-wrap: wrap; padding-block: var(--cs-space-2); }
.ui-foundation .app-brand { gap: var(--cs-space-1); font-size: 20px; color: var(--cs-text); }
.ui-foundation .app-brand-mark { display: block; }
.ui-foundation .button.app-menu-button { width: var(--cs-control-height); height: var(--cs-control-height); flex: 0 0 var(--cs-control-height); padding: 0; align-items: center; justify-content: center; }
.ui-foundation .app-menu-button[aria-expanded="false"] [data-icon="close"],
.ui-foundation .app-menu-button[aria-expanded="true"] [data-icon="menu"] { display: none; }
.ui-foundation .app-nav { gap: 0; flex-wrap: wrap; }
.ui-foundation .app-nav :is(a, button) { min-height: 48px; padding-inline: var(--cs-space-2); }
.ui-foundation .app-nav-secondary a { display: inline-flex; }
.ui-foundation :is(.app-menu-panel, .app-menu-account, .app-menu-preferences, .app-menu-external) { display: contents; }
.ui-foundation .app-nav-icon { display: none; }
.ui-foundation .app-action-tooltip { display: none; }
.ui-foundation .app-main { padding-block: var(--cs-space-3) var(--cs-space-8); }
.ui-foundation .page-heading { margin-bottom: var(--cs-space-4); min-width: 0; }
.ui-foundation .page-heading-row { align-items: flex-start; gap: var(--cs-space-3); }
.ui-foundation .page-heading-row > div:first-child { min-width: 0; }
.ui-foundation .page-heading p { margin-top: var(--cs-space-2); line-height: var(--cs-line-body); }
.ui-foundation :is(h1, h2, h3, a, p, strong) { overflow-wrap: anywhere; }
.ui-foundation h2 { font-size: 24px; line-height: 32px; }
.ui-foundation h3 { font-size: 20px; line-height: 32px; }
.ui-foundation .breadcrumb { margin-bottom: var(--cs-space-2); }
.ui-foundation .breadcrumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.ui-foundation :is(.page-actions, .camera-card-actions, .dialog-actions, .toolbar) { gap: var(--cs-space-2); flex-wrap: wrap; }
.ui-foundation .button, .ui-foundation .button-link, .ui-foundation button:not([data-locale-option]):not(.app-menu-button) {
  min-height: var(--cs-control-height); min-width: 0; max-width: 100%; padding: var(--cs-space-1) var(--cs-space-2); border-radius: var(--cs-radius-control); font: inherit; line-height: var(--cs-control-line); font-weight: 650; white-space: normal; overflow-wrap: anywhere;
}
.ui-foundation .button, .ui-foundation .button-link { color: white; }
.ui-foundation :is(.button.quiet, .button.secondary, .secondary-link) { color: var(--cs-text); }
.ui-foundation :is(select, textarea, input) { width: 100%; max-width: 100%; min-width: 0; font: inherit; min-height: var(--cs-control-height); padding: var(--cs-space-1) var(--cs-space-2); border: var(--cs-control-border) solid var(--cs-input-border); border-radius: var(--cs-radius-control); background: var(--cs-surface); color: var(--cs-text); }
/* Explicit single-line geometry avoids native menu metrics; grows with text size.
   Textareas, listboxes, sliders and other special inputs keep their own sizing. */
.ui-foundation :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select:not([multiple]):not([size]), select[size="1"]:not([multiple])) {
  height: max(var(--cs-control-height), calc(1.5em + var(--cs-space-1) * 2 + var(--cs-control-border) * 2));
  line-height: var(--cs-control-line);
}
.ui-foundation :is(select:not([multiple]):not([size]), select[size="1"]:not([multiple])) {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: var(--cs-space-6);
  /* Lucide 0.468.0 chevron-down, attribution in icons.LICENSE.txt. Decorative only. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23526174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cs-space-2) center;
  background-size: var(--cs-space-3) var(--cs-space-3);
}
@media (forced-colors: active) {
  .ui-foundation :is(select:not([multiple]):not([size]), select[size="1"]:not([multiple])) {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}
.ui-foundation label { display: grid; gap: var(--cs-field-gap); min-width: 0; }
.ui-foundation form { display: grid; }
.ui-foundation :is(select, textarea, summary):focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
.ui-foundation .card-grid { grid-template-columns: repeat(var(--cs-grid-columns), minmax(0, 1fr)); gap: var(--cs-grid-gap); }
.ui-foundation .card-grid > * { grid-column: span 4; }
.ui-foundation .app-card { border-radius: 8px; box-shadow: none; padding: var(--cs-card-padding); }
.ui-foundation .app-card h2 { font-size: 24px; }
.ui-foundation .app-card p { margin-top: var(--cs-space-1); }
.ui-foundation :is(.page-heading, .app-card, dialog, .dialog) > :is(h2, h3) { margin-block: 0 var(--cs-heading-gap); }
.ui-foundation .field-group { display: grid; gap: var(--cs-field-gap); min-width: 0; }
.ui-foundation .field-help { margin: 0; color: var(--cs-muted); font-size: var(--cs-font-helper); line-height: var(--cs-line-helper); }
.ui-foundation .form-stack { width: 100%; max-width: var(--cs-form-max); display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--cs-form-gap); }
.ui-foundation .form-stack > button { justify-self: stretch; }
.ui-foundation .section-heading { margin-block: var(--cs-space-4) var(--cs-space-2); gap: var(--cs-space-2); }
.ui-foundation .detail-row { padding-block: var(--cs-space-2); }
.ui-foundation .account-summary { max-width: 640px; }
.ui-foundation .account-security { margin-top: var(--cs-space-4); padding-top: var(--cs-space-3); border-top: 1px solid var(--cs-border); }
.ui-foundation .dialog-backdrop { padding: var(--cs-space-2); overflow-y: auto; }
.ui-foundation :is(dialog, .dialog) { width: min(var(--cs-form-max), calc(100% - var(--cs-space-4))); max-height: calc(100dvh - var(--cs-space-4)); overflow-y: auto; padding: var(--cs-card-padding); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-card); background: var(--cs-surface); color: var(--cs-text); }
.ui-foundation dialog::backdrop { background: rgb(24 35 49 / 40%); }
.ui-foundation .dialog :is(h2, p) { margin-block: 0 16px; }
.ui-foundation [hidden] { display: none !important; }
.ui-foundation .panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ui-foundation :is(.stack, .list, .site-device-list) { gap: var(--cs-space-4); }
.ui-foundation :is(.site-group, .device-card) { min-width: 0; }
.ui-foundation .site-group { border: 0; padding: 0; background: transparent; }
.ui-foundation .site-group-head { margin-block: 0 16px; gap: 16px; }
.ui-foundation .device-card { margin: 0; padding: var(--cs-space-2); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-card); background: var(--cs-surface); }
.ui-foundation .device-card-head { gap: 16px; flex-wrap: wrap; }
.ui-foundation .device-card-title { font-size: 20px; }
.ui-foundation .camera-card { border: 0; border-radius: 0; border-top: 1px solid var(--cs-border); padding: 16px 0; background: transparent; }
.ui-foundation .device-details { margin-top: var(--cs-space-1); }
.ui-foundation summary { cursor: pointer; min-height: 48px; padding-block: 8px; color: var(--cs-primary-hover); }
.ui-foundation .device-actions { border: 0; background: transparent; padding: 24px 0 0; }
.ui-foundation :is(.inline-form, .toolbar) { display: flex; align-items: end; gap: var(--cs-space-2); flex-wrap: wrap; }
.ui-foundation :is(.inline-form, .toolbar) > :is(input, select, label) { flex: 1 1 240px; min-width: 0; }
.ui-foundation .activation-form { width: 100%; max-width: var(--cs-form-max); display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--cs-form-gap); }
.ui-foundation .activation-fallback { margin-top: var(--cs-space-3); }
.ui-foundation #activationPanel { max-width: var(--cs-form-max); }
.ui-foundation #equipmentHeading[data-workflow="device"] { max-width: var(--cs-form-max); }
.ui-foundation #equipmentHeading[data-workflow="device"] .heading-with-icon { flex-direction: column; align-items: flex-start; gap: var(--cs-space-2); }
.ui-foundation #equipmentHeading[data-workflow="device"] .lead { margin-bottom: 0; }
.ui-foundation .meta { color: var(--cs-muted); overflow-wrap: anywhere; }
.ui-foundation.equipment-page button.secondary { color: var(--cs-text); }
.ui-foundation .discovery-card { border: 0; border-top: 1px solid var(--cs-border); border-radius: 0; padding: 16px 0; background: transparent; }
.ui-foundation.equipment-page button:not(.secondary):not(.quiet):not([data-locale-option]):not([data-logout]) { color: white; background: var(--cs-primary); border-color: var(--cs-primary); }
@media (max-width: 1199px) {
  .ui-foundation .app-header .app-header-inner {
    width: min(calc(100% - max(var(--cs-page-gutter), var(--cs-safe-area-left)) - max(var(--cs-page-gutter), var(--cs-safe-area-right))), var(--cs-content-max));
    margin-inline-start: max(var(--cs-page-gutter), var(--cs-safe-area-left));
    margin-inline-end: max(var(--cs-page-gutter), var(--cs-safe-area-right));
    padding-top: calc(var(--cs-space-2) + var(--cs-safe-area-top));
  }
  .ui-foundation .app-menu-button { display: inline-flex !important; margin-left: auto; }
  .ui-foundation .app-menu-panel { display: none; order: 3; flex-basis: 100%; width: 100%; min-width: 0; }
  .ui-foundation .app-menu-panel.open {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--cs-control-height) - 3 * var(--cs-space-2) - var(--cs-safe-area-top) - var(--cs-control-border));
    max-height: calc(100dvh - var(--cs-control-height) - 3 * var(--cs-space-2) - var(--cs-safe-area-top) - var(--cs-control-border));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--cs-safe-area-bottom);
    scroll-padding-bottom: var(--cs-safe-area-bottom);
  }
  .ui-foundation :is(.app-nav-primary, .app-nav-secondary) { position: static; flex-basis: 100%; display: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .ui-foundation :is(.app-nav-primary, .app-nav-secondary).open { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; width: 100%; }
  .ui-foundation .app-nav-primary { padding-bottom: var(--cs-space-1); }
  .ui-foundation :is(.app-menu-account, .app-menu-preferences, .app-menu-external) { display: flex; flex-direction: column; border-top: 1px solid var(--cs-border); padding-block: var(--cs-space-1); }
  .ui-foundation .app-menu-preferences { padding: var(--cs-space-2); align-items: flex-start; }
  .ui-foundation .app-nav :is(a, [data-logout]) { display: flex; align-items: center; justify-content: flex-start; gap: var(--cs-space-2); width: 100%; min-height: var(--cs-control-height); padding: var(--cs-space-1) var(--cs-space-2); text-align: left; }
  .ui-foundation .app-nav-icon { display: block; flex: 0 0 var(--cs-icon-medium); }
}
@media (max-width: 767px) {
  .ui-foundation .page-heading-row { flex-direction: column; align-items: stretch; }
  .ui-foundation .page-heading-row .button { width: auto; }
  .ui-foundation .page-actions > * { flex: 1 1 auto; }
  .ui-foundation .detail-row { flex-direction: column; gap: 8px; }
  .ui-foundation .detail-row strong { text-align: left; }
}
@media (min-width: 1200px) {
  .ui-foundation .card-grid.two > * { grid-column: span 6; }
  .ui-foundation .app-nav-secondary { flex-wrap: nowrap; }
  .ui-foundation .app-nav-secondary .app-icon-action { position: relative; width: var(--cs-control-height); height: var(--cs-control-height); min-width: var(--cs-control-height); padding: 0; align-items: center; justify-content: center; color: var(--cs-muted); }
  .ui-foundation .app-nav-secondary .app-icon-action:is(:hover, :focus-visible) { color: var(--cs-primary); background: var(--app-accent-soft); }
  .ui-foundation .app-icon-action .app-nav-icon { display: block; flex: 0 0 var(--cs-icon-medium); }
  .ui-foundation .app-action-label { display: none; }
  .ui-foundation .app-action-tooltip { display: block; position: absolute; z-index: 10; top: calc(100% + var(--cs-space-1)); right: 0; width: max-content; max-width: 240px; padding: var(--cs-space-1) var(--cs-space-2); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-control); background: var(--cs-surface); color: var(--cs-text); font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; visibility: hidden; }
  .ui-foundation .app-action-tooltip::before { content: ""; position: absolute; bottom: 100%; right: 0; width: 100%; height: var(--cs-space-1); }
  .ui-foundation .app-icon-action:not([data-tooltip-dismissed]):is(:hover, :focus-visible) .app-action-tooltip { visibility: visible; }
}

/* Technical viewers retain their player/protocol code and product embed mode. */
.ui-foundation.technical-page:not(.product-embed) { display: block; height: auto; min-height: 100vh; --bg: var(--cs-bg); --panel: var(--cs-surface); --border: var(--cs-border); --text: var(--cs-text); --muted: var(--cs-muted); --warn: var(--cs-muted); }
.ui-foundation.technical-page .app-header { display: block; padding: 0; border-bottom: 1px solid var(--cs-border); background: var(--cs-surface); }
.ui-foundation.technical-page .technical-heading { padding-block: 24px; }
.ui-foundation.technical-page:not(.product-embed) > :is(main, header:not(.app-header), video, #status, #sourceInfo, #playbackControls, #authRequired, #output, h2) { width: min(calc(100% - var(--cs-page-gutter) * 2), var(--cs-content-max)); max-width: var(--cs-content-max); margin-inline: auto; }
.ui-foundation.technical-page:not(.product-embed) > header:not(.app-header) { padding: 0 0 24px; flex-wrap: wrap; background: transparent; border: 0; color: var(--cs-text); }
.ui-foundation.technical-page:not(.product-embed) main { padding: 0 0 32px; }
.ui-foundation.technical-page:not(.product-embed) video { aspect-ratio: 16 / 9; display: block; height: auto; border-radius: 8px; border: 1px solid var(--cs-border); }
.ui-foundation.technical-page:not(.product-embed) :is(#sourceInfo, #archiveToggle, #dashboardButton) { position: static; margin-block: 8px; }
.ui-foundation.technical-page:not(.product-embed) :is(#sourceInfo, #status, #sourceMeta, .camera-details, .empty) { color: var(--cs-muted); }
.ui-foundation.technical-page:not(.product-embed) #dashboardButton { margin-inline: var(--cs-page-gutter) 8px; }
.ui-foundation.technical-page:not(.product-embed) :is(#modeBadge, #archivePanel, #authRequired, #output, #log, .auth-required, .camera-card, .pill) { background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); border-radius: 8px; }
.ui-foundation.technical-page:not(.product-embed) #archivePanel { top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.ui-foundation.technical-page:not(.product-embed) #archivePanel :is(input, select) { background-color: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-input-border); }
.ui-foundation.technical-page:not(.product-embed) #archivePanel :is(input, select, button) { border-radius: var(--cs-radius-control); padding: var(--cs-space-1) var(--cs-space-2); }
.ui-foundation.technical-page:not(.product-embed) #archivePanel select { padding-inline-end: var(--cs-space-6); }
.ui-foundation.technical-page:not(.product-embed) #archivePanel label { margin-block: 16px 8px; }
.ui-foundation.technical-page:not(.product-embed) #archiveHint { color: var(--cs-muted); }
.ui-foundation.technical-page:not(.product-embed) :is(.topbar, #playbackControlRow, .header-actions) { flex-wrap: wrap; gap: 16px; }
.ui-foundation.technical-page:not(.product-embed) .grid { max-width: none; grid-template-columns: repeat(var(--cs-grid-columns), minmax(0, 1fr)); gap: var(--cs-grid-gap); }
.ui-foundation.technical-page:not(.product-embed) .grid > * { grid-column: span 4; }
.ui-foundation.technical-page:not(.product-embed) :is(pre, #log) { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-foundation.technical-page:not(.product-embed) button:not(.quiet):not([data-locale-option]):not([data-logout]) { background: var(--cs-primary); color: white; border: 1px solid var(--cs-primary); }
.ui-foundation.technical-page:not(.product-embed) .camera-card { padding: 24px; }
.ui-foundation.technical-page:not(.product-embed) :is(#archiveToggle, #dashboardButton, #playBtn, #seekBack, #seekForward, #openArchive, #openLive, #refreshButton) { background: var(--cs-primary); color: white; border: 1px solid var(--cs-primary); }

/* Approved entity icons; proposals remain in the documentation preview only. */
.ui-foundation { --cs-icon-small: 16px; --cs-icon-medium: 20px; --cs-icon-large: 24px; --cs-account-max: 768px; }
.ui-foundation .cs-icon { width: var(--cs-icon-medium); height: var(--cs-icon-medium); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: inherit; vertical-align: middle; }
.ui-foundation .cs-icon--16 { width: var(--cs-icon-small); height: var(--cs-icon-small); }
.ui-foundation .cs-icon--24 { width: var(--cs-icon-large); height: var(--cs-icon-large); }
.ui-foundation :is(.icon-heading, .heading-with-icon) { display: flex; align-items: center; gap: var(--cs-space-2); min-width: 0; }
.ui-foundation .icon-heading > .cs-icon { color: var(--cs-primary-hover); }
.ui-foundation .settings-section-icon { display: block; margin-bottom: var(--cs-space-2); color: var(--cs-primary-hover); }
.ui-foundation .camera-preview .cs-icon { width: var(--cs-icon-large); height: var(--cs-icon-large); }
.ui-foundation .account-main { max-width: var(--cs-account-max); }
.ui-foundation .account-main :is(.account-summary, .account-security) { max-width: none; width: 100%; padding: var(--cs-card-padding); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-card); }
.ui-foundation .account-main .account-security { margin-top: var(--cs-space-3); }
.ui-foundation .account-main .eyebrow { margin: 0 0 var(--cs-space-1); font-size: var(--cs-font-small); color: var(--cs-muted); }
.ui-foundation .account-main .detail-row { align-items: center; }
.ui-foundation .account-main .status-badge { margin: 0; flex-shrink: 0; }
.ui-foundation :is(.account-summary > #profile, .app-card > .detail-list) { margin-top: var(--cs-space-2); }
.ui-foundation dialog form > :is(h2, .dialog-description, .error-message) { margin: 0; }
.ui-foundation dialog form > .dialog-actions { margin-top: 0; }
.ui-foundation .error-message:empty { display: none; }
.ui-foundation .state-badge.warn { color: #815315; background: #fff7e8; }
.ui-foundation .state-badge.bad { color: var(--cs-danger); background: #fff0f1; }
.ui-foundation .state-badge.neutral { color: var(--cs-muted); background: #edf0f4; }
.ui-foundation .device-details > .cameras { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ui-foundation .device-details .camera-card-head { align-items: center; gap: 16px; flex-wrap: wrap; }
.ui-foundation .device-details > .icon-heading { margin-block: var(--cs-space-2); }
.ui-foundation .device-details .camera-card { min-height: 0; gap: var(--cs-space-2); align-content: start; }
.ui-foundation .device-details .camera-card-actions { margin-top: 0; }
.ui-foundation .device-details .status-badge { margin-top: 0; white-space: normal; }
.ui-foundation .device-card > .meta { margin-block: var(--cs-space-1) 0; }
.ui-foundation .device-card-head .meta { margin-block: var(--cs-space-1) 0; }
.ui-foundation .device-card-head .status-badge { margin-top: 0; white-space: normal; }
.ui-foundation .device-details .device-actions { margin-top: var(--cs-space-2); padding-top: var(--cs-space-2); border-top: 1px solid var(--cs-border); gap: var(--cs-space-2); }
.ui-foundation .device-details .device-actions > h3 { margin: 0; }
.ui-foundation .device-action-group { border-top: 1px solid var(--cs-border); padding-top: var(--cs-space-2); min-width: 0; }
.ui-foundation .device-action-group > label { margin-bottom: var(--cs-field-gap); }
.ui-foundation .device-action-group .inline-form { margin-top: 0; }
.ui-foundation .device-action-group .rotate-form { align-items: center; }
.ui-foundation .device-action-group .rotate-form > .meta { margin: 0; flex: 1 1 240px; }
.ui-foundation .device-site { display: inline-block; margin-top: var(--cs-space-1); font-size: var(--cs-font-small); }
.ui-foundation.equipment-page .stack > .page-heading { margin-bottom: 0; }
.ui-foundation :is(input, select, textarea) { font-weight: 400; }
.ui-foundation .status-badge { white-space: normal; }
.ui-foundation .camera-stage:has(> .camera-stage-placeholder) { aspect-ratio: auto; min-height: calc(var(--cs-space-8) * 4); }
.ui-foundation .product-live-progress { overflow-y: auto; }
.ui-foundation .app-brand-mark { font-size: 16px; line-height: 1; }

/* Semantic card variants share surfaces; Equipment child rows stay unframed. */
.ui-foundation {
  --cs-card-gap: var(--cs-space-2);
  --cs-card-navigation-min: calc(var(--cs-space-8) * 4);
}
.ui-foundation :is(.navigation-card, .entity-card, .device-card, .camera-tile) {
  padding: var(--cs-card-padding);
  border-radius: var(--cs-radius-card);
}
.ui-foundation :is(.navigation-card, .entity-card, .camera-tile) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cs-card-gap);
}
.ui-foundation :is(.navigation-card, .entity-card) { min-height: var(--cs-card-navigation-min); }
.ui-foundation .navigation-grid { grid-auto-rows: 1fr; }
.ui-foundation :is(.navigation-card, .entity-card, .camera-tile) > :is(h2, h3, p) { margin: 0; }
.ui-foundation .card-icon {
  display: flex;
  align-items: center;
  width: var(--cs-icon-large);
  height: var(--cs-icon-large);
  flex: 0 0 var(--cs-icon-large);
  margin: 0;
  color: var(--cs-primary-hover);
}
.ui-foundation :is(.navigation-card, .entity-card) > .card-footer { margin-top: auto; align-self: flex-start; }
.ui-foundation .card-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--cs-space-1); }
.ui-foundation .card-metric .summary-number { margin: 0; font-size: 32px; line-height: 40px; }
.ui-foundation .card-metric p { margin: 0; font-size: var(--cs-font-small); line-height: var(--cs-line-body); }
.ui-foundation .card-action { color: var(--cs-primary-hover); font-weight: 650; }
.ui-foundation .app-card-link:is(.navigation-card, .entity-card):hover {
  transform: none;
  border-color: var(--cs-primary-hover);
  background: var(--cs-surface);
}
.ui-foundation .app-card-link:is(.navigation-card, .entity-card):focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
.ui-foundation .camera-tile > .camera-preview { margin: 0; }
.ui-foundation .camera-tile > .status-badge { margin: 0; align-self: flex-start; }
.ui-foundation .camera-tile > .camera-card-actions { margin-top: auto; }
.ui-foundation .device-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cs-card-gap); }
.ui-foundation .device-card-head > div { min-width: 0; }
.ui-foundation .device-card-title { line-height: 32px; }
.ui-foundation .icon-heading > span { min-width: 0; overflow-wrap: anywhere; }
.ui-foundation .device-card-head > div > :is(.device-site, .meta),
.ui-foundation .device-card > .meta { margin-inline-start: calc(var(--cs-icon-large) + var(--cs-card-gap)); }
@media (max-width: 767px) {
  .ui-foundation .device-card-head { grid-template-columns: minmax(0, 1fr); }
  .ui-foundation .device-card-head > .status-badge { justify-self: start; margin-inline-start: calc(var(--cs-icon-large) + var(--cs-card-gap)); }
}

/* Dashboard-only compact composition preserves shared card surfaces and data. */
.ui-foundation .entry-website { margin-top: var(--cs-space-3); }
@media (max-width: 767px) {
  .ui-foundation.dashboard-page .navigation-grid > .navigation-card { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .ui-foundation.dashboard-page .navigation-card {
    display: grid;
    grid-template-columns: var(--cs-icon-large) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    min-height: calc(var(--cs-space-8) * 3);
  }
  .ui-foundation.dashboard-page .navigation-card > .card-icon { grid-column: 1; grid-row: 1; align-self: center; }
  .ui-foundation.dashboard-page .navigation-card > h2 { grid-column: 2; grid-row: 1; }
  .ui-foundation.dashboard-page .navigation-card > p { grid-column: 1 / -1; grid-row: 2; }
  .ui-foundation.dashboard-page .navigation-card > .card-footer { grid-column: 1 / -1; grid-row: 3; align-self: end; }
}