:root {
  color-scheme: light;
  /* Fluent 2 semantic theme — SPARROW teal ramp */
  --fontFamilyBase: "Segoe UI", "Segoe Sans", Inter, system-ui, -apple-system, sans-serif;
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #e6e6e6;
  --colorNeutralBackground4Hover: #dcdcdc;
  --colorNeutralBackgroundDisabled: #f0f0f0;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorCompoundBrandForeground1: #14665d;
  --colorCompoundBrandStroke: #1a7f73;
  --colorBrandBackground: #1a7f73;
  --colorBrandBackgroundHover: #14665d;
  --colorBrandBackgroundPressed: #0f5c54;
  --colorBrandBackground2: #e4f3f0;
  --colorBrandBackground2Hover: #d3ebe7;
  --colorBrandStrokeFocus: rgba(26, 127, 115, 0.28);
  --colorStatusDangerForeground1: #b10e1c;
  --colorStatusDangerBackground1: #fdf3f4;
  --colorStrokeFocus2: #14665d;
  --colorStrokeFocusInner: #ffffff;
  --focus-ring-two-layer: 0 0 0 2px var(--colorStrokeFocusInner), 0 0 0 4px var(--colorStrokeFocus2);
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusXLarge: 8px;
  --borderRadius2XLarge: 12px;
  --borderRadiusCircular: 9999px;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 14px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;

  /* brand */
  --primary: var(--colorBrandBackground);
  --primary-hover: var(--colorBrandBackgroundHover);
  --primary-soft: var(--colorBrandBackground2);
  --primary-soft-hover: var(--colorBrandBackground2Hover);

  /* neutrals */
  --neutral-50:  #f7f8fa;
  --neutral-100: var(--colorNeutralBackground3);
  --neutral-200: var(--colorNeutralStroke2);
  --neutral-300: var(--colorNeutralStroke1);
  --neutral-500: var(--colorNeutralForeground4);
  --neutral-700: var(--colorNeutralForeground2);
  --neutral-900: var(--colorNeutralForeground1);

  /* surfaces — photo backdrop stays via .bg div; surfaces sit on top */
  --bg-card:        var(--colorNeutralBackground1);
  --bg-card-alpha:  rgba(255,255,255,0.96);
  --border:         var(--colorNeutralStroke1);
  --text:           var(--colorNeutralForeground1);
  --muted:          var(--colorNeutralForeground4);
  --photo-overlay:  rgba(8, 12, 18, 0.45);

  /* legacy aliases — many existing rules reference these */
  --card-bg:     var(--bg-card);
  --card-border: var(--border);

  /* status */
  --success:  #16a34a;
  --warning:  #d97706;
  --danger:   var(--colorStatusDangerForeground1);
  --info:     #2563eb;

  /* radius scale */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* shadow scale */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 4px 10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);

  /* Feedback changes paint only, never the geometry of an active control. */
  --motion-feedback-duration: 140ms;
  --motion-enter-duration: 160ms;
  --motion-feedback-easing: ease-out;

  /* AI for Good Lab standard text-control geometry */
  --control-min-height: 42px;
  --control-min-height-mobile: 44px;
  --control-padding-block: 10px;
  --control-padding-inline: 16px;
  --control-radius: var(--borderRadius2XLarge);
  --control-icon-gap: 8px;
  --control-font-family: Inter, system-ui, "Segoe UI", sans-serif;

  /* authenticated application surfaces */
  --app-page-canvas: var(--colorNeutralBackground3);
  --app-page-gutter: 32px;
  --app-page-max-width: 1576px;
  --app-surface-padding: 32px;
  --app-compact-surface-padding: 16px;
  --app-static-surface: var(--colorNeutralBackground1);
  --app-static-surface-radius: var(--borderRadius2XLarge);
  --app-static-surface-shadow: var(--shadow-card);

  /* spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
}

.field-error {
  margin-top: 4px;
  color: var(--colorStatusDangerForeground1);
  font-size: 12px;
  line-height: 16px;
}

.project-form-page :is(input, select, textarea, .model-picker-trigger)[aria-invalid="true"] {
  border-color: var(--colorStatusDangerForeground1);
}

* { box-sizing: border-box; }

/* Visually hidden, still announced by screen readers. The dashboard search
   uses it for the field's accessible label. Without it that label renders
   as visible text inside the search box and pushes the real input aside. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  font-family: var(--fontFamilyBase);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fluent-icon {
  display: inline-block;
  width: var(--fluent-icon-size, 20px);
  height: var(--fluent-icon-size, 20px);
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--fluent-icon-mask) center / contain no-repeat;
  mask: var(--fluent-icon-mask) center / contain no-repeat;
}

.nav-item:focus-visible,
.account-identity:focus-visible,
.sidebar-toggle:focus-visible,
.avatar-btn:focus-visible,
.notif-btn:focus-visible,
.project-form-back:focus-visible,
.data-type-tab:focus-visible,
.project-form-toggle:focus-within,
.data-type-check:focus-within,
.cover-field:focus-within .cover-dropzone {
  outline: none;
  box-shadow: var(--focus-ring-two-layer);
}

.project-type-option:has(input[type="radio"]:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring-two-layer);
}

/* Background — wildlife photo with deeper overlay so foreground content reads cleanly */
.bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.02);
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-overlay);
}

/* Topbar — solid white, dark text. Border color aligned with the Figma
   shell (node 22:439, 1px #d1d1d1 bottom stroke) via --shell-border,
   defined in the sidebar shell section below. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--shell-border, var(--border));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand .logo {
  height: 32px;
  width: auto;
  display: block;
}

.actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.topbar-page-context {
  min-width: 0;
}

.topbar-page-title,
.topbar-page-subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-page-title {
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.topbar-page-subtitle {
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  line-height: 16px;
}

.topbar-text-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--borderRadiusXLarge);
  color: var(--colorNeutralForeground2);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.topbar-text-link:hover {
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
}

.topbar-text-link:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  min-height: var(--control-min-height);
  align-items: center;
  justify-content: center;
  gap: var(--control-icon-gap);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  background: var(--primary);
  color: white;
  font: 600 14px/20px var(--control-font-family);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow);
}
.btn:active {
  background: var(--colorBrandBackgroundPressed);
  box-shadow: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-two-layer);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--colorNeutralStrokeDisabled);
  background: var(--colorNeutralBackgroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary button — was previously referenced everywhere but never defined */
.btn-lite {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.btn-lite:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  color: var(--text);
}

.btn-lite:active {
  background: var(--colorNeutralBackground4);
  border-color: var(--colorNeutralStroke1);
}

.btn-icon-only {
  width: var(--control-min-height);
  min-width: var(--control-min-height);
  padding: 0;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}

/* Page card — solid white, sits over the wildlife photo */
.page-card {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 0;
  box-shadow: var(--shadow);
  margin-top: 10px;
}
.page-inner {
  padding: 22px;
}

.app-page {
  width: 100%;
  margin: 0 auto;
}

.surface-card {
  border: 0;
  border-radius: var(--app-static-surface-radius);
  background: var(--app-static-surface);
  box-shadow: var(--app-static-surface-shadow);
}

@media (max-width: 640px) {
  .btn {
    min-height: var(--control-min-height-mobile);
  }
}

/* Flash messages */
.flash {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

/* Header row */
.header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.header-row h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
  color: var(--text);
}
.header-row p {
  margin: 6px 0 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

/* Cards */
.card {
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--motion-feedback-duration) var(--motion-feedback-easing);
}
.card:hover {
  box-shadow: var(--shadow);
}

.card-cover {
  height: 140px;
  overflow: hidden;
  background: var(--neutral-100);
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body { padding: 14px; }
.card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px 0; color: var(--text); letter-spacing: -0.01em; }
.card-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.card-desc { font-size: 13px; color: var(--neutral-700); line-height: 1.5; }
.card-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--neutral-50);
  color: var(--neutral-700);
}

/* Form styles */
.form { margin-top: 10px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  font: inherit;
  font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--colorBrandStrokeFocus);
}

input[type="file"] { padding: 10px 12px; }
input[type="file"]::file-selector-button {
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.95);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  margin-right: 10px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(255,255,255,1);
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
}

.help {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.form-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* About menu — pill-shaped, secondary-button language */
.about-menu { position: relative; display: flex; align-items: center; }

.about-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.about-btn:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
}

/* User menu / avatar dropdown */
.user-menu { position: relative; }

/* Avatar chip — aligned with the Figma shell's Fluent Avatar token pair
   (Avatar/Background #e6e6e6, Avatar/Foreground #616161) via --shell-avatar-*,
   defined in the sidebar shell section below. */
.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--shell-avatar-bg, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--shell-avatar-fg, #ffffff);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  user-select: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.avatar-btn:hover {
  background: var(--colorNeutralBackground4Hover);
}
.avatar-btn:active {
  background: var(--colorNeutralStroke1);
}

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 220px;
  border-radius: var(--borderRadius2XLarge);
  border: 1px solid var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 50;
}
.dropdown.open { display: block; }

.dropdown .head {
  padding: 12px 12px;
  border-bottom: 1px solid var(--colorNeutralStroke2);
}
.dropdown .head .name {
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 2px;
}
.dropdown .head .email {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown a {
  display: flex;
  padding: 11px 12px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.dropdown a:hover {
  background: var(--colorBrandBackground2);
}
.dropdown a:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring-two-layer);
}
.dropdown a.danger {
  color: var(--colorStatusDangerForeground1);
}
.dropdown a.danger:hover {
  background: var(--colorStatusDangerBackground1);
}

/* Notifications */
.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shell-border, var(--border));
  background: var(--bg-card);
  color: var(--neutral-700);
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.notif-btn--text {
  width: auto;
  min-width: 54px;
  padding: 8px 10px;
  border-color: transparent;
  border-radius: var(--borderRadiusXLarge);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}
.notif-label {
  display: inline;
}
.notif-btn:hover {
  background: var(--shell-hover-bg, var(--neutral-100));
  border-color: var(--neutral-300);
  color: var(--text);
}
.notif-btn:active {
  background: var(--colorNeutralBackground4);
}

.notif-icon {
  font-size: 19px;
  line-height: 1;
  /* SVG icons render in currentColor; emoji fallback no longer needs grayscale */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.notif-badge {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px !important;
  background: var(--colorStatusDangerForeground1);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.28);
  border: 2px solid rgba(10,14,20,0.55);
}

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-height: 360px;
  overflow: auto;
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadius2XLarge);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.notif-title {
  padding: 10px 12px;
  font-weight: 900;
  border-bottom: 1px solid var(--colorNeutralStroke2);
}

.notif-item {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--colorNeutralStroke2);
  background: var(--colorNeutralBackground1);
  font: inherit;
  text-align: left;
}
.notif-item.unread {
  background: var(--colorBrandBackground2);
}
.notif-item:hover {
  background: var(--colorBrandBackground2Hover);
}
.notif-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow: inset var(--focus-ring-two-layer);
}

.notif-item-msg {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}
.notif-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Shared section card components (used on multiple pages) */
.section-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-head h2 {
  margin: 0;
  font-size: 14px;
}
.section-head p {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}
.divider {
  border: 0;
  border-top: 1px solid var(--colorNeutralStroke2);
  margin: 18px 0;
}
.muted-mini {
  margin: 6px 0 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   Dashboard search + filter pills (also reused on AI Models)
   ========================================================= */
.dash-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  flex-wrap: wrap;
}

.dash-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

.dash-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}

/* `input.dash-search` (not just `.dash-search`) — the global
   `input[type="search"]` rule above has specificity 0,0,1,1 (tag +
   attribute) and tied the plain `.dash-search` class selector at
   0,0,1,0 every time, which let the global padding (10px 12px) win
   and ate our left-pad for the magnifier icon. Adding `input` brings
   us to 0,0,1,1 too, and source-order tie-break leans on us. */
input.dash-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}

input.dash-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--colorBrandStrokeFocus);
}

.dash-type-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dash-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.dash-pill:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-100);
}

.dash-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* =========================================================
   About / User Guide page
   ========================================================= */

.about-hero {
  padding: 8px 0 4px 0;
}
.about-hero h1 {
  margin: 0 0 6px 0;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.about-hero p.lead {
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: 15px;
}
.toc-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--colorBrandBackground2);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--colorCompoundBrandStroke);
  transition: background .15s ease, transform .12s ease;
}
.toc-chip:hover {
  background: var(--colorBrandBackground2Hover);
  transform: translateY(-1px);
}
.toc-chip svg { width: 14px; height: 14px; }

.about-section {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 90px;
}

.about-h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.about-h2 .icon-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--colorBrandBackground2Hover), var(--colorBrandBackground2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.about-h2 .icon-tile svg { width: 20px; height: 20px; }

.about-prose p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px 0;
}
.about-prose p:last-child { margin-bottom: 0; }

/* Zig-zag feature panels */
.feature-zigzag {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 6px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.feature-row .feature-img {
  grid-column: 1;
  grid-row: 1;
}
.feature-row .feature-text {
  grid-column: 2;
  grid-row: 1;
}
.feature-row.reverse .feature-img {
  grid-column: 2;
  grid-row: 1;
}
.feature-row.reverse .feature-text {
  grid-column: 1;
  grid-row: 1;
}

.feature-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 38px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.06);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--colorBrandBackground2Hover), var(--colorBrandBackground2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.feature-icon svg { width: 22px; height: 22px; }

.feature-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.feature-heading .feature-icon { margin-bottom: 0; }
.feature-heading h3 { margin: 0 !important; }

.feature-text h3 {
  margin: 0 0 8px 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.feature-text p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.feature-text p:last-child { margin-bottom: 0; }

/* "More features" grid */
.more-features-h3 {
  margin: 28px 0 12px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.feature-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-feedback-duration) var(--motion-feedback-easing),
    border-color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
.feature-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--neutral-300);
}
.feature-card .feature-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
}
.feature-card .feature-icon svg { width: 19px; height: 19px; }
.feature-card h4 {
  margin: 0 0 6px 0;
  font-size: 14.5px;
  font-weight: 800;
}
.feature-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* User guide subsection headings */
.guide-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 8px 0;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.guide-h3 svg {
  color: var(--primary);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.guide-h3:first-of-type { margin-top: 4px; }

.about-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  margin-top: 8px;
}
.about-section table thead tr {
  background: var(--colorBrandBackground2);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.about-section table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-section table td {
  padding: 11px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}
.about-section table td:first-child {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.about-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px 0;
}

/* Mobile: stack zig-zag panels with image always on top */
@media (max-width: 820px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .feature-row .feature-img,
  .feature-row.reverse .feature-img {
    grid-column: 1;
    grid-row: 1;
  }
  .feature-row .feature-text,
  .feature-row.reverse .feature-text {
    grid-column: 1;
    grid-row: 2;
  }
  .about-hero h1 { font-size: 24px; }
  .about-h2 { font-size: 19px; }
  .feature-text h3 { font-size: 17px; }
}

/* =========================================================
   Section-title utility — heading + leading icon pattern
   used by templates that import {{ icon('...') }} from _icons.html
   ========================================================= */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.section-title svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* =========================================================
   Sidebar + topbar shell
   Source of truth: Figma DiNHfZXOnUhOGyhUVoSJjA, node 22:391
   ("S4 - New project"). Sidebar instance 22:392 (248x1024, white,
   1px #d1d1d1 right stroke, padding 20/20/16/20). Top nav instance
   22:439 (1px #d1d1d1 bottom stroke). Tokens below are scoped to
   this shell only — the app-wide --primary/--border tokens used by
   buttons, cards, etc. elsewhere are intentionally left untouched.
   ========================================================= */
:root {
  --shell-width:      248px;
  --shell-width-collapsed: 80px;
  --shell-border:     var(--colorNeutralStroke1);
  --shell-divider:    var(--colorNeutralStroke2);
  --shell-active-bg:  var(--colorBrandBackground2);
  --shell-active-fg:  var(--colorCompoundBrandForeground1);
  --shell-fg-1:       var(--colorNeutralForeground1);
  --shell-fg-2:       var(--colorNeutralForeground2);
  --shell-fg-4:       var(--colorNeutralForeground4);
  --shell-avatar-bg:  var(--colorNeutralBackground4);
  --shell-avatar-fg:  var(--colorNeutralForeground3);
  --shell-hover-bg:   var(--colorNeutralBackground3);
}

.app-shell {
  margin-left: var(--shell-width);
  min-height: 100vh;
}

body:not(.no-nav) .app-shell {
  background: transparent;
}

body.authenticated-app {
  --fontFamilyBase: Inter, system-ui, "Segoe UI", sans-serif;
  background: transparent;
  font-family: var(--fontFamilyBase);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body.authenticated-app > .bg {
  display: block;
}

body.authenticated-app .app-shell > .container {
  width: 100%;
  max-width: var(--app-page-max-width);
  padding: var(--app-page-gutter);
}

body.authenticated-app :is(.page-card, .card, .section-card) {
  border-radius: var(--app-static-surface-radius);
}

body.authenticated-app .page-card {
  margin-top: 0;
  box-shadow: var(--app-static-surface-shadow);
}

body.authenticated-app .page-inner {
  padding: var(--app-surface-padding);
}

body.authenticated-app.surface-canvas-exempt > .bg {
  display: block;
}

body.authenticated-app.surface-canvas-exempt .app-shell {
  background: transparent;
}

body.authenticated-app.surface-canvas-exempt .app-shell > .container {
  max-width: 1200px;
  padding: 18px;
}

body.sidebar-collapsed .app-shell {
  margin-left: var(--shell-width-collapsed);
}

/* Pages without auth get no sidebar — drop the offset and let content centre */
body.no-nav .app-shell { margin-left: 0; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--shell-width);
  height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--shell-border);
  display: flex;
  flex-direction: column;
  padding: 20px 20px 16px;
  z-index: 20;
  transition: transform .2s ease;
}

.sidebar-topbar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 20px;
}

.sidebar-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 4px 8px;
  overflow: hidden;
  text-decoration: none;
}
.sidebar-brand img {
  height: 40px;
  max-width: 100%;
  width: auto;
  display: block;
}

.sidebar-collapse {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  border-radius: var(--borderRadiusMedium);
  background: transparent;
  color: var(--colorNeutralForeground3);
  cursor: pointer;
}

.sidebar-collapse:hover {
  background: var(--colorNeutralBackground3);
}

.sidebar-collapse:active {
  background: var(--colorNeutralBackground4);
}

.sidebar-collapse:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}

.sidebar.collapsed {
  width: var(--shell-width-collapsed);
  padding-right: 12px;
  padding-left: 12px;
}

.sidebar.collapsed .sidebar-brand {
  flex: 0 0 28px;
  width: 28px;
  padding: 0;
}

.sidebar.collapsed .sidebar-brand img {
  width: auto;
  max-width: none;
  height: 28px;
}

.sidebar.collapsed .sidebar-topbar {
  gap: 0;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding-right: 10px;
  padding-left: 10px;
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .account-identity-text {
  display: none;
}

.sidebar.collapsed .account-identity {
  justify-content: center;
  padding-right: 8px;
  padding-left: 8px;
}

.sidebar.collapsed .sidebar-footer .logout-link {
  padding-right: 10px;
  padding-left: 10px;
}

.sidebar-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground2);
  cursor: pointer;
}

.sidebar-close:hover {
  background: var(--colorNeutralBackground3);
}

.sidebar-close:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--shell-fg-1);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.nav-item .fluent-icon { color: var(--shell-fg-4); flex-shrink: 0; }
.nav-item:hover {
  background: var(--shell-hover-bg);
  color: var(--shell-fg-1);
}
.nav-item:hover .fluent-icon { color: var(--shell-fg-2); }
.nav-item:active { background: var(--colorBrandBackground2Hover); }
.nav-item.active {
  position: relative;
  background: transparent;
  color: var(--shell-active-fg);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -8px;
  width: 3px;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorCompoundBrandStroke);
}
.nav-item.active .fluent-icon { color: var(--shell-active-fg); }
.nav-item.danger { color: var(--danger); }
.nav-item.danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--danger); }
.nav-item.danger .fluent-icon { color: var(--danger); }

.nav-section {
  padding: 16px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--shell-fg-4);
}

.sidebar-footer {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* "Log out" has no equivalent row in the Figma footer (which only shows
   Settings + account identity), but the link must stay reachable from the
   sidebar in addition to the topbar account menu, so it renders as a
   smaller, clearly de-emphasized danger row under the account identity. */
.sidebar-footer .logout-link {
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 12px 10px;
  border-top: 1px solid var(--shell-divider);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.account-identity:hover { background: var(--shell-hover-bg); }
.account-identity.active { background: var(--shell-active-bg); }

.account-identity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--shell-avatar-bg);
  color: var(--shell-avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

.account-identity-text { min-width: 0; }
.account-identity-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--shell-fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-identity-role {
  display: block;
  font-size: 12px;
  color: var(--shell-fg-4);
}

.sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shell-border);
  background: var(--bg-card);
  border-radius: var(--radius);
  color: var(--neutral-700);
  cursor: pointer;
}
.sidebar-toggle:hover { background: var(--shell-hover-bg); }
.sidebar-toggle:active,
.sidebar-close:active { background: var(--colorNeutralBackground4); }

.topbar-spacer { flex: 1; }

.sidebar-scrim {
  display: none;
}

@media (max-width: 900px) {
  .sidebar {
    width: var(--shell-width);
    padding: 20px 20px 16px;
    transform: translateX(-100%);
    box-shadow: var(--shadow);
  }
  .sidebar .sidebar-brand {
    flex: 1 1 auto;
    width: auto;
    padding: 4px 8px;
  }
  .sidebar .sidebar-brand img {
    height: 40px;
    max-width: 100%;
  }
  .sidebar .nav-item {
    justify-content: flex-start;
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .sidebar .nav-label { display: inline; }
  .sidebar .nav-section { display: block; }
  .sidebar .account-identity-text { display: block; }
  .sidebar .account-identity {
    justify-content: flex-start;
    padding: 12px 12px 10px;
  }
  .sidebar-collapse { display: none; }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .sidebar-close { display: inline-flex; }
  .sidebar-scrim.open {
    position: fixed;
    z-index: 19;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.32);
  }
  body.sidebar-open { overflow: hidden; }
  .app-shell,
  body.sidebar-collapsed .app-shell { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
  :root {
    --app-page-gutter: 24px;
    --app-surface-padding: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --app-page-gutter: 16px;
    --app-surface-padding: 16px;
  }
}

@media (max-width: 620px) {
  .topbar {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .topbar-text-link {
    display: none;
  }

  .actions {
    gap: 6px;
  }
}

/* -------------------------------------------------------------------
   Public header — thin white banner rendered on the login page and on
   the About / AI Models / Tutorials pages when the visitor isn't
   signed in. Kept purely presentational + high z-index so it floats
   above the background video/image on the login page.
   ------------------------------------------------------------------- */
.public-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.public-header-brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.public-header-brand img {
  height: 36px;
  width: auto;
  display: block;
}
.public-header-nav {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: auto;
}
.public-header-nav a {
  color: var(--text, #0b1b22);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
}
.public-header-nav a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.24);
}
.public-header-nav a.active {
  border-bottom-color: var(--accent, #0b1b22);
}
@media (max-width: 640px) {
  .public-header { padding: 0 14px; gap: 8px; }
  .public-header-brand img { height: 28px; }
  .public-header-nav { gap: 14px; }
  .public-header-nav a { font-size: 13px; }
}

/* -------------------------------------------------------------------
   Delete confirmation modal — shared partial rendered by
   _delete_confirm_modal.html. Any page that includes that partial
   picks up these styles.
   ------------------------------------------------------------------- */
.btn.danger {
  background: var(--danger, #dc2626);
  color: #fff;
  border-color: var(--danger, #dc2626);
}
.btn.danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}
.btn.danger:disabled {
  background: #f5c2c0;
  border-color: #f5c2c0;
  color: #fff;
  cursor: not-allowed;
}

.danger-zone { border-radius: 14px; padding: 16px; }
.danger-zone h2 { margin-top: 0; }

/* Project create/edit page — Figma S4 · New project */
.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.project-form-page {
  background: transparent;
  font-family: var(--fontFamilyBase);
  min-height: calc(100vh - 64px);
  margin: 0;
  min-width: 0;
}

/* New Project has two layers. The gray shell carries the header and
   Create Project; every section shares one white card raised on it by a
   shadow, split by rules instead of boxes of their own. */
.project-form-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--colorNeutralBackground3);
  box-shadow: var(--shadow);
}

.project-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--colorNeutralBackground1);
  box-shadow: 0 0 28px rgba(15, 23, 42, 0.10), 0 0 8px rgba(15, 23, 42, 0.04);
}

/* The submit button sits 32px clear of the card. */
.project-form-body + div {
  padding-top: 16px;
}

/* Project settings: the form's sections, and the sections that save on
   their own in the second card, are split by rules with 32px either side. */
.project-form-page .is-settings .project-form-body > .section-card,
.project-form-page .is-settings #project-configuration > .section-card {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.project-form-page .is-settings #project-configuration {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-form-page .is-settings .project-form-body > .section-card ~ .section-card,
.project-form-page .is-settings #project-configuration > .section-card {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--colorNeutralStroke2);
}

.project-form-manage > .divider {
  display: none;
}

.project-delete-actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.project-form-link {
  max-width: 100%;
}

/* Same small button as Manage locations & cameras on the Process files page. */
.project-form-page .btn.btn-sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.project-form-link span {
  white-space: normal;
  text-align: left;
}

.project-form-page .btn.btn-lite.danger {
  background: var(--colorNeutralBackground1);
  color: var(--colorStatusDangerForeground1);
  border-color: var(--colorStatusDangerForeground1);
}

.project-form-page .btn.btn-lite.danger:hover:not(:disabled) {
  background: var(--colorStatusDangerBackground1);
}

.project-form-page .btn.btn-lite.danger:active:not(:disabled) {
  background: var(--colorStatusDangerBackground1);
  box-shadow: none;
}

.project-form-page .btn.btn-lite.danger:disabled {
  background: var(--colorNeutralBackgroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  border-color: var(--colorNeutralStrokeDisabled);
}

/* Project settings close with Save Changes, as New Project closes with
   Create Project. Unsaved edits pin it to the bottom of the screen in a bar
   that counts them, flush with the gray layer, like the upload bar. */
.project-form-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 8px;
}

.project-form-savebar-summary {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

.project-form-savebar p {
  margin: 0;
}

.project-form-savebar-count {
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.project-form-savebar-where {
  overflow: hidden;
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-form-savebar-where:empty {
  display: none;
}

.project-form-savebar.is-pending {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -32px -32px;
  padding: 16px 32px;
  border-top: 1px solid var(--colorNeutralStroke2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--colorNeutralBackground1);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}

.project-form-savebar.is-pending .project-form-savebar-summary {
  display: grid;
  gap: 2px;
}

.project-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-form-header h1 {
  margin: 0;
  /* The brand's pressed green, a shade darker. */
  color: var(--colorBrandBackgroundPressed);
  color: color-mix(in srgb, var(--colorBrandBackgroundPressed) 75%, #000);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.project-form-header p {
  margin: 4px 0 0;
  color: var(--colorNeutralForeground2);
  font-size: 14px;
  line-height: 20px;
}

.project-form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px 4px 8px;
  border-radius: 8px;
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.project-form-back:hover {
  background: var(--neutral-100);
  color: var(--colorNeutralForeground1);
}

.project-form-back:active {
  background: var(--colorNeutralBackground4);
}

.project-form-page .form {
  margin: 0;
}

.project-form-page #project-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-form-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.project-form-page .section-card {
  margin-top: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--borderRadius2XLarge);
  box-shadow: none;
}

.project-form-card {
  background: var(--colorNeutralBackground1);
}

/* On the shared surface the create sections are not boxes: Project Type &
   Ingestion is ruled off from Project Overview, and Ingestion details from
   both. */
.project-form-page .project-form-shell .project-form-card {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.project-form-shell .project-form-primary-grid {
  gap: 64px 64px;
}

.project-form-shell .project-type-card {
  position: relative;
}

.project-form-shell .project-type-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  border-left: 1px solid var(--colorNeutralStroke2);
}

.project-form-page .project-form-shell .project-ingestion-card {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--colorNeutralStroke2);
}

.project-form-page .project-ingestion-card > .section-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-form-primary-grid:not(.is-edit) > .project-form-card {
  min-width: 0;
}

.project-form-primary-grid.is-edit > .project-form-card {
  min-width: 0;
}

.project-form-page .section-head,
.project-form-page .subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.project-form-page .section-head h2 {
  margin: 0;
  color: var(--colorNeutralForeground2);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.project-form-page .section-head p,
.project-form-page .subsection-head p {
  max-width: 560px;
  margin: 2px 0 0;
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  line-height: 16px;
}

.project-form-page .section-head h3,
.project-form-page .subsection-head h3 {
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

/* Create cards stack their blocks with one gap, so no block keeps its own
   margin: the header, every field row and every note sit 16px apart. */
.project-overview-card,
.project-type-card,
.project-ingestion-card,
.project-ingestion-card > .ingestion-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-form-page :is(.project-overview-card, .project-type-card, .project-ingestion-card) > *,
.project-form-page .project-ingestion-card > .ingestion-section > * {
  margin-top: 0;
  margin-bottom: 0;
}

.project-ingestion-card > .ingestion-section[hidden] {
  display: none;
}

/* A rule divides each visible section from the one before it, 32px clear
   on both sides. The script hides sections with [hidden] or an inline
   display: none, so both count as hidden and the first visible section
   never gets a rule. */
.project-ingestion-card > .ingestion-section:not([hidden], [style*="display: none"]) ~ .ingestion-section:not([hidden], [style*="display: none"]) {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--colorNeutralStroke2);
}

.project-form-page .form-grid {
  gap: 16px;
}

.project-form-page .form-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.project-form-page .field {
  gap: 6px;
}

.project-form-page .field > .help {
  margin-top: 0;
}

.project-form-page .field > label,
.project-form-page .cover-field > label:first-child {
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-form-page input[type="text"],
.project-form-page input[type="email"],
.project-form-page input[type="password"],
.project-form-page input[type="number"],
.project-form-page select,
.project-form-page textarea {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

.project-form-page textarea {
  min-height: 96px;
  resize: vertical;
}

.project-form-page input:focus,
.project-form-page select:focus,
.project-form-page textarea:focus {
  outline: none;
  border-color: var(--colorCompoundBrandStroke);
  box-shadow: var(--focus-ring-two-layer);
}

.project-form-page .req {
  color: var(--colorStatusDangerForeground1);
}

.project-form-page .help,
.project-form-page .muted-mini {
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  line-height: 16px;
}

.project-form-page :is(input, select, textarea, button):disabled,
.project-form-page [aria-disabled="true"] {
  border-color: var(--colorNeutralStrokeDisabled);
  background: var(--colorNeutralBackgroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.project-form-page :is(input[type="checkbox"], input[type="radio"]):disabled {
  accent-color: var(--colorNeutralForegroundDisabled);
}

.project-form-page .data-type-check:has(input:disabled) {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}

/* Model picker (model_picker.js): the app's own option list for the detector,
   classifier and stream selects. The trigger matches the form's 40px inputs
   and the list matches the project switcher's popover. Each option shows the
   model name, its tags and a sub-legend summarizing the catalog description.
   The native select stays in the form, visually hidden, as the field that
   posts and validates. */
.project-form-page .model-picker {
  position: relative;
  min-width: 0;
}

.project-form-page select.model-picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.project-form-page .model-picker-trigger {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.project-form-page .model-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--colorCompoundBrandStroke);
  box-shadow: var(--focus-ring-two-layer);
}

.project-form-page .model-picker-trigger[aria-expanded="true"] {
  border-color: var(--colorCompoundBrandStroke);
}

.project-form-page .model-picker-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-form-page .model-picker-trigger.is-placeholder .model-picker-value {
  color: var(--colorNeutralForeground4);
}

.project-form-page .model-picker-chevron {
  color: var(--colorNeutralForeground3);
  transition: transform var(--motion-feedback-duration) var(--motion-feedback-easing);
}

.project-form-page .model-picker-trigger[aria-expanded="true"] .model-picker-chevron {
  transform: rotate(180deg);
}

.project-form-page .model-picker-trigger:disabled :is(.model-picker-value, .model-picker-chevron) {
  color: var(--colorNeutralForegroundDisabled);
}

.project-form-page .model-picker-list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  width: min(36rem, calc(100vw - 32px));
  min-width: 100%;
  max-height: min(360px, 60vh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadius2XLarge);
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow-lg);
}

.project-form-page .model-picker-list[hidden] {
  display: none;
}

.project-form-page .model-picker-list:not([hidden]) {
  animation: app-panel-enter var(--motion-enter-duration) var(--motion-feedback-easing);
}

.project-form-page .model-picker.opens-up .model-picker-list {
  top: auto;
  bottom: calc(100% + 4px);
}

.project-form-page .model-picker-group + .model-picker-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--colorNeutralStroke2);
}

/* Group names stay in view while their models scroll past. */
.project-form-page .model-picker-group-label {
  position: sticky;
  z-index: 1;
  top: -6px;
  padding: 8px 10px 4px;
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.project-form-page .model-picker-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--borderRadiusXLarge);
  color: var(--colorNeutralForeground1);
  cursor: pointer;
}

.project-form-page .model-picker-option.is-active {
  background: var(--colorNeutralBackground3);
}

.project-form-page .model-picker-option:active {
  background: var(--colorNeutralBackground4);
}

.project-form-page .model-picker-check {
  margin-top: 2px;
  color: var(--colorCompoundBrandForeground1);
  visibility: hidden;
}

.project-form-page .model-picker-option[aria-selected="true"] .model-picker-check {
  visibility: visible;
}

.project-form-page .model-picker-option-body {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.project-form-page .model-picker-option-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.project-form-page .model-picker-option-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.project-form-page .model-picker-option[aria-selected="true"] .model-picker-option-name {
  color: var(--colorCompoundBrandForeground1);
}

.project-form-page .model-picker-option.is-placeholder .model-picker-option-name {
  color: var(--colorNeutralForeground3);
  font-weight: 400;
}

.project-form-page .model-picker-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.project-form-page .model-picker-tag {
  padding: 1px 8px;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.project-form-page .model-picker-option.is-active .model-picker-tag {
  background: var(--colorNeutralBackground1);
}

.project-form-page .model-picker-tag.is-species {
  background: var(--colorBrandBackground2);
  color: var(--colorCompoundBrandForeground1);
}

/* The sub-legend: up to three lines of the catalog summary. */
.project-form-page .model-picker-option-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.project-form-page .model-picker-option[aria-disabled="true"] {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}

.project-form-page .model-picker-empty {
  padding: 12px 10px;
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  line-height: 16px;
}

@media (forced-colors: active) {
  .project-form-page .model-picker-option.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .project-form-page .model-picker-check {
    background-color: CanvasText;
  }
}
.form-errors {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--colorStatusDangerForeground1);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorStatusDangerBackground1);
  color: var(--colorStatusDangerForeground1);
}

.project-form-page .form-errors ul {
  margin: 0;
  padding-left: 18px;
}

/* The cover field takes whatever height the stretched overview card has
   left, so both cards in the first row end on the same line. */
.project-overview-card > .cover-field {
  flex: 1 1 auto;
}

.project-form-page .cover-field > label:first-child {
  min-height: 20px;
  padding-bottom: 0;
}

.cover-dropzone {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 122px !important;
  padding: 10px 12px !important;
  border: 1px dashed var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground4) !important;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.cover-dropzone:hover,
.cover-dropzone.is-dragging {
  border-color: var(--colorCompoundBrandStroke);
  background: var(--colorBrandBackground2);
}

.cover-dropzone.has-file {
  border-style: solid;
  border-color: var(--colorCompoundBrandStroke);
  background: var(--colorBrandBackground2);
}

.cover-dropzone-copy {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.btn.btn-subtle {
  gap: var(--control-icon-gap);
  min-height: var(--control-min-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border: 0;
  border-radius: var(--borderRadius2XLarge);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground3);
  box-shadow: none;
}

.btn.btn-subtle:hover {
  background: var(--neutral-100);
  color: var(--colorNeutralForeground1);
}

.btn.btn-subtle:active {
  background: var(--colorNeutralBackground4);
}

.project-form-page .btn:not(.btn-lite):not(.btn-subtle):not(.danger) {
  gap: var(--control-icon-gap);
  min-height: var(--control-min-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border-radius: var(--control-radius);
  background: var(--colorBrandBackground);
  font-size: 14px;
  font-weight: 600;
}

.project-form-page .btn:not(.btn-lite):not(.btn-subtle):not(.danger):hover:not(:disabled) {
  background: var(--colorBrandBackgroundHover);
}

.project-form-page .btn:not(.btn-lite):not(.btn-subtle):not(.danger):active:not(:disabled) {
  background: var(--colorBrandBackgroundPressed);
}

.project-form-page .btn:not(.btn-lite):not(.btn-subtle):not(.danger):disabled {
  background: var(--colorNeutralBackgroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}

.project-type-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px;
  border-radius: var(--borderRadiusXLarge);
  color: var(--colorNeutralForeground1);
  cursor: pointer;
}

.project-type-option:hover {
  background: var(--neutral-50);
}
.project-type-option:active {
  background: var(--colorBrandBackground2Hover);
}

.project-type-option input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--colorBrandBackground);
}

.project-type-option input[type="radio"]:focus,
.project-type-option input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.project-type-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--colorNeutralForeground2);
}

.project-type-option > span:not(.project-type-icon) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-type-option strong {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-type-option small {
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.project-type-option:has(input:checked) {
  background: transparent;
}

/* Selection changes paint only, so the label keeps its weight and width. */
.project-type-option:has(input:checked) .project-type-icon {
  color: var(--colorCompoundBrandForeground1);
}

.project-type-option.is-readonly {
  background: var(--colorNeutralBackground3);
  cursor: default;
}

.project-form-subsection {
  position: relative;
  padding-top: 14px;
}

.project-form-subsection + .project-form-subsection {
  margin-top: 14px;
  border-top: 1px solid var(--colorNeutralStroke2);
}

.project-form-toggle {
  width: fit-content;
  margin-top: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--colorNeutralForeground1);
  cursor: pointer;
}

.email-toggle {
  min-height: 32px;
  margin: 8px 0 0;
  padding: 4px 0;
}

.gps-toggle {
  min-height: 32px;
  margin: 0;
  padding: 4px 0;
}

#gps-tracking-card .subsection-head {
  padding-right: 0;
}

.project-form-toggle input,
.project-form-page .data-type-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--colorBrandBackground);
}

.data-type-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 2px 0 8px;
  overflow-x: auto;
}

.data-type-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--borderRadiusMedium);
  background: transparent;
  color: var(--colorNeutralForeground2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.data-type-tab:hover {
  background: var(--neutral-50);
}
.data-type-tab:active {
  background: var(--colorBrandBackground2Hover);
}

.data-type-tab.is-active {
  color: var(--colorNeutralForeground1);
  font-weight: 600;
}

.data-type-tab.is-active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorCompoundBrandStroke);
}

/* Data-type rows sit flat inside the details card, like the project type
   rows: no nested card chrome, and a stable row height. */
.project-form-page #data-types {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-form-page .data-type {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pipeline-persistence-note {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px;
  border: 0;
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  font-size: 13px;
  line-height: 20px;
}

.pipeline-persistence-note strong {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--colorNeutralForeground1);
}

.pipeline-persistence-note strong .fluent-icon {
  color: var(--colorCompoundBrandForeground1);
}

.pipeline-persistence-note > span {
  padding-left: 28px;
}

.project-form-page .data-type[hidden] {
  display: none;
}

.project-form-page .data-type-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px;
  border-radius: var(--borderRadiusXLarge);
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

.project-form-page .data-type-check:hover {
  background: var(--neutral-50);
}
.project-form-page .data-type-check:active {
  background: var(--colorBrandBackground2Hover);
}

.project-form-page .data-type-check > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

.project-form-page .data-type-check > span:not(.data-type-status) {
  min-width: 0;
}

.project-form-page .data-type-check > .muted-mini {
  margin: 0;
}

/* Ring a data-type row for keyboard focus only, like the project type rows.
   The shared rule near the top also rings it after a mouse click. */
.project-form-page .data-type-check:focus-within {
  box-shadow: none;
}

.project-form-page .data-type-check:has(input:focus-visible) {
  box-shadow: var(--focus-ring-two-layer);
}

.project-form-page .data-type-check strong {
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-form-page .data-type-check small {
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.data-type-status {
  align-self: center;
  padding: 3px 8px;
  border-radius: var(--borderRadiusCircular);
  background: var(--neutral-100);
  color: var(--colorNeutralForeground3);
  font-size: 11px;
  font-weight: 600;
}

.project-form-page .data-type-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 8px 14px 36px;
}

.project-form-page .data-type-body[hidden] {
  display: none;
}

/* Reserve the actual wrapped explanation, not a fixed-height model panel.
   Hidden help remains invisible and cannot receive focus. */
.project-form-page .data-type-body .classifier-reason[hidden] {
  display: block;
  visibility: hidden;
}

/* Create form data types: radio rows like the project type rows, and the
   chosen row lists a detector for each media type the project receives. */
.project-form-page .data-type-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-form-page #data-types[hidden],
.project-form-page .device-media[hidden],
.project-form-page .media-row[hidden] {
  display: none;
}

.project-form-page .data-type-options .data-type-check {
  min-height: 48px;
}

/* Like the project type rows, the row carries the keyboard focus ring. */
.project-form-page .data-type-options .data-type-check input[type="radio"]:focus,
.project-form-page .data-type-options .data-type-check input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.project-form-page .data-type-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--colorNeutralForeground2);
}

.project-form-page .data-type-check:has(input:checked) .data-type-icon {
  color: var(--colorCompoundBrandForeground1);
}

.project-form-page .data-type-check:has(input:disabled) .data-type-icon {
  color: var(--colorNeutralForegroundDisabled);
}

.project-form-page .data-type-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-form-page .data-type-text strong {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-form-page .data-type-text small {
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  line-height: 16px;
}

.project-form-page .data-type-check:has(input:disabled) .data-type-text small {
  color: var(--colorNeutralForegroundDisabled);
}

/* The body starts where the row text does: 8px padding, 16px radio, 12px
   gap, 24px icon and 12px gap. */
.project-form-page .data-type-body.has-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px 12px 72px;
}

.project-form-page .data-type-body.has-media[hidden] {
  display: none;
}

/* One label column for every media row, wide enough for "Live stream". */
.project-form-page .media-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.project-form-page .media-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--colorNeutralForeground1);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.project-form-page .media-label .fluent-icon {
  color: var(--colorNeutralForeground3);
}

.project-form-page .media-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The disabled classifier's placeholder already says why, so the create form
   shows the longer note only when it applies instead of reserving its space. */
.project-form-page .media-fields .classifier-reason[hidden] {
  display: none;
}

.project-form-page .media-note {
  margin: 0;
  color: var(--colorNeutralForeground3);
  font-size: 14px;
  line-height: 20px;
}

.project-form-page .device-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 8px;
}

/* Real-time stream: one media row whose list holds every data type's
   models, aligned like the device rows. */
.project-form-page .stream-models {
  padding: 0 8px;
}

.project-form-page .stream-models[hidden],
.project-form-page .stream-models .field[hidden] {
  display: none;
}

/* One-time credential notes on the create form: the password, token or key
   only exists after creation and is shown once, so the note says so before
   the user commits. */
.project-form-page .credential-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  font-size: 14px;
  line-height: 20px;
}

.project-form-page .credential-note .fluent-icon {
  color: var(--colorCompoundBrandForeground1);
}

.project-form-page .setup-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  color: var(--colorNeutralForeground2);
  font-size: 14px;
  line-height: 20px;
}

.project-form-page .setup-steps strong {
  color: var(--colorNeutralForeground1);
  font-weight: 600;
}

/*
 * Fixed Picture / Video / Audio / Aerial model slots.
 *
 * Each card has a stable min-height + fixed padding, so switching detectors,
 * enabling/disabling an option, or picking a different classifier NEVER
 * reflows the outer configuration surface. Two-column desktop grid; single
 * column on mobile without geometry change. See project_form.js —
 * "Media models slot binder" for the JS side.
 */
.media-models-subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.media-models-subsection .form-errors-slot {
  /* Reserved-height slot for the pipeline validation errors. Zero when empty
   * so we don't lose vertical whitespace on the common path; grows in a
   * jank-free way (no width/height animation — see impeccable
   * layout-transition rule) when errors render. */
  min-height: 0;
  display: block;
}
.media-models-subsection .form-errors-slot:has(.form-errors) {
  min-height: 48px;
}
.media-models-subsection .form-errors-slot .form-errors {
  margin: 0;
}

.model-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.model-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 208px;             /* stable card shell — never jumps on state change */
  padding: 14px;
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--app-static-surface-radius);
  background: var(--colorNeutralBackground1);
  box-sizing: border-box;
}

.model-slot.has-toggle {
  gap: 8px;
}

.model-slot-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;              /* reserve space for two lines of head copy */
}

.model-slot-head h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--colorNeutralForeground1);
}

.model-slot-head p {
  margin: 0;
  color: var(--colorNeutralForeground2);
  font-size: 12.5px;
  line-height: 1.4;
}

.model-slot-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.model-slot-body .field {
  margin: 0;
}

.model-slot-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;              /* matches other toggles so alignment is stable */
  padding: 6px 4px;
  cursor: pointer;
}

.model-slot-toggle > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: var(--colorBrandBackground);
}

.model-slot-toggle > span {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.model-slot-toggle strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--colorNeutralForeground1);
}

.model-slot-toggle small {
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* Read-only mirror for the Video model slot — visually a form control so the
 * "same detector as picture" affordance is obvious, but semantically read-only
 * so the browser cannot POST an independent value (see the blocker disclosure
 * inline in the template). */
.video-model-mirror {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusMedium);
  background: var(--neutral-50);
  color: var(--colorNeutralForeground2);
  font: inherit;
  font-size: 13.5px;
  cursor: default;
}

.video-model-mirror:focus-visible {
  outline: 2px solid var(--colorBrandStroke1);
  outline-offset: 2px;
}

.model-slot-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--borderRadiusMedium);
  background: var(--neutral-50);
  color: var(--colorNeutralForeground2);
  font-size: 12.5px;
  line-height: 1.5;
}

.model-slot-info p {
  margin: 0;
}

.model-slot-info .btn {
  align-self: flex-start;
}

/* Informational slots on device-type projects — no editable controls,
 * but the card shell keeps the same min-height as its editable siblings so
 * the "cards do not jump between project types" contract holds. */
.model-slot[data-editable="false"] {
  background: var(--neutral-50);
}

.project-form-submit-row {
  display: flex;
  justify-content: flex-end;
}

.project-form-submit-row .btn {
  min-height: var(--control-min-height);
}

.project-management-card {
  margin-top: 0 !important;
}

.project-form-page > .project-form-shell > .divider {
  display: none;
}

.project-form-page table {
  background: var(--colorNeutralBackground1);
}

@media (max-width: 960px) {
  .project-form-page {
    min-height: 0;
    margin: 0;
  }

  .project-form-primary-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .project-form-primary-grid > .project-form-card {
    height: auto;
    overflow: visible;
  }

  .project-type-card {
    align-self: start;
  }

  /* Stacked, the rule between the two top sections turns horizontal. */
  .project-form-shell .project-type-card::before {
    top: -32px;
    right: 0;
    bottom: auto;
    left: 0;
    border-top: 1px solid var(--colorNeutralStroke2);
    border-left: 0;
  }

  /* The media label moves above its fields so detector names fit. */
  .project-form-page .media-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  /* Mobile: model slots stack in a single column. The stable min-height stays
   * in place so nothing jumps as the user scrolls or picks a detector. */
  .model-slots {
    grid-template-columns: 1fr;
  }
}

.project-export-column-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.project-export-column-picker > * {
  min-width: 0;
}

.project-locations-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 760px) {
  .project-export-column-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .project-form-header {
    flex-wrap: wrap;
  }

  /* Tags that wrap under a long model name start at the left. */
  .project-form-page .model-picker-tags {
    margin-left: 0;
  }

  .project-form-shell {
    padding: 20px 12px;
  }

  .project-form-body {
    padding: 20px;
  }

  .project-delete-actions {
    justify-content: flex-start;
  }

  .project-form-savebar.is-pending {
    margin: 0 -12px -20px;
    padding: 12px;
  }

  .project-form-header h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .gps-toggle {
    position: static;
    margin: 0 0 12px;
  }

  .email-toggle {
    position: static;
    margin-top: 8px;
  }

  #gps-tracking-card .subsection-head {
    padding-right: 0;
  }

  .project-form-page .data-type-body {
    grid-template-columns: 1fr;
    padding-left: 8px;
  }

  .project-form-page .data-type-body.has-media {
    padding-left: 8px;
  }

  .project-form-page .media-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-form-page .section-head {
    flex-direction: column;
  }
}

/* Native <dialog>. Firefox/Chrome/Safari all support this in the versions
   we target; the fallback to display:block is handled inline in the JS
   for very old browsers. */
.delete-modal {
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadius2XLarge);
  padding: 20px 22px;
  max-width: 520px;
  width: 92vw;
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow-lg);
  color: var(--colorNeutralForeground1);
}
.delete-modal::backdrop {
  background: rgba(0, 0, 0, 0.42);
}
.delete-modal-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--colorStatusDangerForeground1);
}
.delete-modal-warning {
  margin: 0 0 10px 0;
  color: var(--colorStatusDangerForeground1);
}
.delete-modal-body {
  margin: 0 0 14px 0;
  color: var(--colorNeutralForeground1);
  line-height: 1.45;
}
.delete-modal-label {
  display: block;
  margin: 4px 0 6px 0;
  font-size: 14px;
  font-weight: 600;
}
.delete-modal-label code {
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-family: monospace;
  font-weight: 800;
}
.delete-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusXLarge);
  font-size: 16px;
  font-family: monospace;
  letter-spacing: 0.05em;
  box-sizing: border-box;
}
.delete-modal .delete-modal-input:focus {
  outline: none;
  border-color: var(--colorCompoundBrandStroke);
  box-shadow: var(--focus-ring-two-layer);
}
.delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.delete-modal-form { margin: 0; }

.project-saved-modal .delete-modal-title {
  margin: 0;
  color: var(--colorNeutralForeground1);
}
.project-saved-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.project-saved-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--colorBrandBackground);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   About page — merged deliverable additions.
   Extends the existing .about-*, .feature-* rules earlier
   in this file. Screenshots, collapsible sections, and the
   preview dialog.
   ========================================================= */

[id] { scroll-margin-top: 84px; }

/* Features section: intro line under the heading */
.features-lead { margin: -4px 0 18px 0; color: var(--muted); font-size: 13.5px; }

/* Nine feature topics: zig-zag rows reuse .feature-row; full-width topics use .feature-block */
.features-merged { gap: 36px; }
.feature-block .feature-heading { margin-bottom: 10px; }
.feature-block > p { max-width: 84ch; }

.status-pill {
  display: inline-block;
  margin: -2px 0 10px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #92400e;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
.about-section p.note { color: var(--muted); font-size: 13px; }
.about-section p.note strong { color: var(--text); }

/* Screenshot figures with enlarge-on-click */
.shot { margin: 0; }
.shot .screenshot { display: block; cursor: zoom-in; border-radius: 14px; }
.shot .screenshot:focus-visible { outline: 3px solid rgba(14, 74, 89, 0.45); outline-offset: 4px; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.06);
}
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.image-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; align-items: start; margin-top: 14px;
}
.image-pair .shot { min-width: 0; }

/* Data-types table: fixed layout so it never exceeds the card; first column wraps (the shared rule uses nowrap) */
.about-section table.media-table { table-layout: fixed; }
.about-section table.media-table th:first-child,
.about-section table.media-table td:first-child { width: 30%; white-space: normal; }

/* Collapsible sections (Supported Hardware, User Guide) */
details.fold > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer;
  border-radius: 8px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .about-h2 { margin: 0; }
details.fold > summary:focus-visible { outline: 3px solid rgba(14, 74, 89, 0.35); outline-offset: 6px; }
.fold-toggle {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  color: var(--muted); font-size: 12.5px; font-weight: 700;
}
.fold-toggle .fold-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--neutral-50);
  transition: transform .15s ease;
}
.fold-toggle .fold-label::after { content: "Show"; }
details.fold[open] .fold-toggle .fold-label::after { content: "Hide"; }
details.fold[open] .fold-toggle .fold-chevron { transform: rotate(180deg); }
details.fold > .fold-body { margin-top: 16px; }

/* Screenshot preview dialog */
html:has(dialog[open]) { overflow: hidden; }
.screenshot-dialog {
  width: fit-content; max-width: min(1500px, 96vw); max-height: 94vh;
  padding: 0; overflow: auto;
  border: 1px solid var(--neutral-300); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text);
}
.screenshot-dialog::backdrop { background: rgba(8, 12, 18, 0.82); }
.dialog-bar { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding: 14px 18px; }
.dialog-caption { max-width: 1000px; margin: 0; padding-top: 6px; font-size: 13.5px; color: var(--text); }
.dialog-close {
  flex: none; min-width: 62px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--neutral-300); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
}
.dialog-close:hover { background: var(--neutral-100); }
.screenshot-dialog img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 78vh;
  margin-inline: auto; object-fit: contain;
}

@media (max-width: 820px) {
  .image-pair { grid-template-columns: 1fr; gap: 20px; }
  .dialog-bar { gap: 12px; padding: 10px; }
}

/* Phone fixes for two pre-existing issues: public-header nav wrapping + about-section tables overflowing on narrow screens */
@media (max-width: 640px) {
  .public-header { height: auto; min-height: 56px; padding-block: 8px; flex-wrap: wrap; }
  .public-header-nav { flex-wrap: wrap; gap: 4px 14px; }
  .about-section table { display: block; overflow-x: auto; }
  .about-section table td:first-child { white-space: normal; }
}

/* -------------------------------------------------------------------
   Language picker: EN / ES / PT segmented control (same pattern as the
   Foresight webtool) plus screen-reader-only text.
   ------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lang-seg {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang-seg button {
  height: 22px;
  min-width: 30px;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-seg button:hover { background: var(--primary); color: #fff; }
.lang-seg button.active { background: var(--neutral-300); color: var(--text); }
.lang-seg button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 74, 89, 0.25);
}
@media (max-width: 640px) {
  .lang-seg button { min-width: 26px; height: 20px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-seg button { transition: none; }
}

/* Panel entry used by menus that open in place, e.g. the dashboard's project
   type menu. Opacity only, so an opening panel never shifts layout. */
@keyframes app-panel-enter {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}