/*
 * AstroLoop Unified Open MCT Interface
 * Version 20260826-unified-3
 *
 * The selectors are scoped beneath .astroloop-ui wherever possible. Shell
 * selectors are deliberately limited and are applied only when shell.js marks
 * an element with a data-astroloop-* attribute.
 */

:root {
  --al-canvas: #07131a;
  --al-canvas-deep: #050d12;
  --al-surface: #0b1e28;
  --al-surface-raised: #102a36;
  --al-surface-selected: #12384a;
  --al-border: #264654;
  --al-border-strong: #3a6374;
  --al-text: #f1f5f7;
  --al-text-muted: #9cb0bb;
  --al-text-dim: #718792;
  --al-accent: #3db7e9;
  --al-accent-strong: #1696cf;
  --al-nominal: #45c781;
  --al-caution: #e5ac35;
  --al-critical: #e85b61;
  --al-info: #6faed1;
  --al-focus: #8bdcff;
  --al-font-ui: Roboto, "Helvetica Neue", Arial, sans-serif;
  --al-font-data: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --al-space-1: 4px;
  --al-space-2: 8px;
  --al-space-3: 12px;
  --al-space-4: 16px;
  --al-space-5: 24px;
  --al-space-6: 32px;
  --al-radius-control: 2px;
  --al-radius-panel: 2px;
  --al-control-height: 32px;
  --al-transition: 140ms ease;
}

.astroloop-ui,
.astroloop-ui * {
  box-sizing: border-box;
}

.astroloop-ui {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: auto;
  color: var(--al-text);
  background: var(--al-canvas);
  font-family: var(--al-font-ui);
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.astroloop-ui button,
.astroloop-ui input,
.astroloop-ui select,
.astroloop-ui textarea,
.astroloop-ui table {
  font: inherit;
}

.astroloop-ui a {
  color: var(--al-accent);
}

.astroloop-ui :focus-visible {
  outline: 2px solid var(--al-focus);
  outline-offset: 2px;
}

.al-page {
  width: 100%;
  min-height: 100%;
  padding: var(--al-space-4);
  background: var(--al-canvas);
}

.al-context-bar {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) repeat(5, minmax(92px, auto));
  align-items: stretch;
  min-height: 54px;
  margin: 0 0 var(--al-space-3);
  border: 1px solid var(--al-border-strong);
  background: var(--al-surface);
}

.al-context-cell {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--al-border);
}

.al-context-cell:last-child {
  border-right: 0;
}

.al-context-label,
.al-eyebrow,
.al-field > span,
.al-table th,
.al-kicker {
  display: block;
  color: var(--al-text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.al-context-value {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--al-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-code,
.al-data-value,
.al-metric-value,
.al-context-value.al-mono {
  font-family: var(--al-font-data);
  font-variant-numeric: tabular-nums;
}

.al-page-header {
  display: flex;
  gap: var(--al-space-4);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--al-space-3);
  padding: var(--al-space-3) 0 var(--al-space-3);
  border-bottom: 2px solid var(--al-accent-strong);
}

.al-page-header-main {
  min-width: 0;
}

.al-page-title {
  margin: 0;
  color: var(--al-text);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.al-page-description {
  max-width: 820px;
  margin: 6px 0 0;
  color: var(--al-text-muted);
  font-size: 12px;
}

.al-page-actions,
.al-row,
.al-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  align-items: center;
}

.al-page-actions {
  justify-content: flex-end;
}

.al-toolbar {
  min-height: 42px;
  margin-bottom: var(--al-space-3);
  padding: var(--al-space-2);
  border: 1px solid var(--al-border);
  background: var(--al-surface);
}

.al-button {
  min-height: var(--al-control-height);
  padding: 6px 12px;
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius-control);
  color: var(--al-text);
  background: var(--al-surface-raised);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--al-transition), background var(--al-transition), opacity var(--al-transition);
}

.al-button:hover:not(:disabled) {
  border-color: var(--al-accent);
  background: var(--al-surface-selected);
}

.al-button-primary {
  border-color: var(--al-accent-strong);
  color: #fff;
  background: var(--al-accent-strong);
}

.al-button-primary:hover:not(:disabled) {
  background: #1da9e6;
}

.al-button-danger {
  border-color: var(--al-critical);
  color: #fff;
  background: rgba(232, 91, 97, 0.16);
}

.al-button:disabled,
.al-button[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

.al-grid-2,
.al-grid-3,
.al-grid-4,
.al-summary-grid,
.al-analysis-layout,
.al-monitor-layout,
.al-planning-layout {
  display: grid;
  gap: var(--al-space-3);
  min-width: 0;
}

.al-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--al-space-3); }
.al-analysis-layout { grid-template-columns: minmax(0, 2fr) minmax(270px, 0.8fr); align-items: start; }
.al-monitor-layout { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.8fr); align-items: start; }
.al-planning-layout { grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.8fr); align-items: start; }

.al-stack {
  display: grid;
  gap: var(--al-space-3);
}

.al-stack-spaced,
.al-footer-note {
  margin-top: var(--al-space-3);
}

.al-row-end {
  justify-content: flex-end;
  margin-top: 10px;
}

.al-field-dataset {
  min-width: 180px;
}

.al-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  background: var(--al-surface);
  box-shadow: none;
}

.al-panel-header {
  display: flex;
  min-height: 42px;
  gap: var(--al-space-3);
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border-bottom: 1px solid var(--al-border);
  background: var(--al-surface-raised);
}

.al-panel-title {
  margin: 0;
  color: var(--al-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.al-panel-subtitle {
  margin-top: 3px;
  color: var(--al-text-muted);
  font-size: 10px;
}

.al-panel-body {
  min-width: 0;
  padding: 11px;
}

.al-panel-body-flush {
  padding: 0;
}

.al-summary-item {
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-accent-strong);
  background: var(--al-surface);
}

.al-summary-item[data-state="nominal"] { border-left-color: var(--al-nominal); }
.al-summary-item[data-state="caution"] { border-left-color: var(--al-caution); }
.al-summary-item[data-state="critical"],
.al-summary-item[data-state="error"] { border-left-color: var(--al-critical); }

.al-summary-label {
  color: var(--al-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.al-summary-value {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: baseline;
  margin-top: 7px;
  color: var(--al-text);
  font-family: var(--al-font-data);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
}

.al-summary-value span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-summary-unit {
  color: var(--al-text-muted);
  font-family: var(--al-font-ui);
  font-size: 11px;
  font-weight: 600;
}

.al-summary-meta {
  margin-top: 8px;
  overflow: hidden;
  color: var(--al-text-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-state-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--al-border-strong);
  border-radius: 999px;
  color: var(--al-text-muted);
  background: rgba(156, 176, 187, 0.08);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.al-state-live,
.al-state-running,
.al-state-nominal,
.al-state-completed,
.al-state-ready {
  border-color: rgba(69, 199, 129, 0.65);
  color: var(--al-nominal);
  background: rgba(69, 199, 129, 0.09);
}

.al-state-simulation,
.al-state-info,
.al-state-parameters-ready {
  border-color: rgba(61, 183, 233, 0.65);
  color: var(--al-accent);
  background: rgba(61, 183, 233, 0.09);
}

.al-state-caution,
.al-state-stale,
.al-state-paused,
.al-state-warning,
.al-state-stopped {
  border-color: rgba(229, 172, 53, 0.7);
  color: var(--al-caution);
  background: rgba(229, 172, 53, 0.09);
}

.al-state-critical,
.al-state-error,
.al-state-failed,
.al-state-offline {
  border-color: rgba(232, 91, 97, 0.75);
  color: var(--al-critical);
  background: rgba(232, 91, 97, 0.1);
}

.al-state-preview,
.al-state-historical,
.al-state-unavailable,
.al-state-idle,
.al-state-unknown {
  color: var(--al-text-muted);
}

.al-table-wrap {
  width: 100%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--al-border);
}

.al-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: var(--al-text);
  background: var(--al-surface);
  font-size: 11px;
}

.al-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 9px;
  border-bottom: 1px solid var(--al-border-strong);
  color: var(--al-text-muted);
  background: var(--al-surface-raised);
  text-align: left;
  white-space: nowrap;
}

.al-table td {
  max-width: 420px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(38, 70, 84, 0.7);
  color: var(--al-text);
  vertical-align: top;
}

.al-table tbody tr:last-child td {
  border-bottom: 0;
}

.al-table tbody tr:hover,
.al-table tbody tr[data-selected="true"] {
  background: rgba(61, 183, 233, 0.08);
}

.al-table tbody tr[data-clickable="true"] {
  cursor: pointer;
}

.al-table-empty {
  padding: 18px !important;
  color: var(--al-text-muted) !important;
  text-align: center;
}

.al-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.al-input,
.al-select,
.al-textarea {
  width: 100%;
  min-height: var(--al-control-height);
  padding: 6px 8px;
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius-control);
  color: var(--al-text);
  background: var(--al-canvas-deep);
}

.al-textarea {
  min-height: 90px;
  resize: vertical;
}

.al-input::placeholder,
.al-textarea::placeholder {
  color: var(--al-text-dim);
}

.al-divider {
  height: 1px;
  margin: var(--al-space-3) 0;
  background: var(--al-border);
}

.al-muted {
  color: var(--al-text-muted);
}

.al-small {
  font-size: 10px;
}

.al-trend {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--al-border);
  background: var(--al-canvas-deep);
}

.al-trend svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
}

.al-trend-grid {
  stroke: rgba(156, 176, 187, 0.16);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.al-trend-axis {
  fill: var(--al-text-dim);
  font-family: var(--al-font-data);
  font-size: 9px;
}

.al-trend-line {
  fill: none;
  stroke: var(--al-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.al-trend-line-nominal { stroke: var(--al-nominal); }
.al-trend-line-caution { stroke: var(--al-caution); }
.al-trend-line-critical { stroke: var(--al-critical); }

.al-trend-threshold {
  stroke: var(--al-caution);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.al-trend-latest {
  fill: var(--al-accent);
  stroke: var(--al-canvas-deep);
  stroke-width: 2;
}

.al-chart-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 20px;
  color: var(--al-text-muted);
  text-align: center;
}

.al-bar-list {
  display: grid;
  gap: 10px;
}

.al-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(120px, 2fr) 74px;
  gap: 10px;
  align-items: center;
}

.al-bar-label {
  overflow: hidden;
  color: var(--al-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-bar-progress {
  width: 100%;
  height: 13px;
  overflow: hidden;
  border: 1px solid var(--al-border);
  border-radius: 0;
  appearance: none;
  background: var(--al-canvas-deep);
}

.al-bar-progress::-webkit-progress-bar {
  background: var(--al-canvas-deep);
}

.al-bar-progress::-webkit-progress-value,
.al-bar-progress::-moz-progress-bar {
  background: var(--al-accent-strong);
}

.al-bar-progress[data-state="nominal"]::-webkit-progress-value,
.al-bar-progress[data-state="nominal"]::-moz-progress-bar { background: var(--al-nominal); }
.al-bar-progress[data-state="caution"]::-webkit-progress-value,
.al-bar-progress[data-state="caution"]::-moz-progress-bar { background: var(--al-caution); }
.al-bar-progress[data-state="critical"]::-webkit-progress-value,
.al-bar-progress[data-state="critical"]::-moz-progress-bar { background: var(--al-critical); }

.al-bar-value {
  color: var(--al-text-muted);
  font-family: var(--al-font-data);
  font-size: 10px;
  text-align: right;
}

.al-exception-list {
  display: grid;
  gap: 8px;
}

.al-exception {
  padding: 9px 10px;
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-info);
  background: var(--al-canvas-deep);
}

.al-exception[data-severity="nominal"] { border-left-color: var(--al-nominal); }
.al-exception[data-severity="caution"] { border-left-color: var(--al-caution); }
.al-exception[data-severity="critical"],
.al-exception[data-severity="error"] { border-left-color: var(--al-critical); }

.al-exception-title {
  color: var(--al-text);
  font-size: 11px;
  font-weight: 700;
}

.al-exception-meta,
.al-exception-action {
  margin-top: 4px;
  color: var(--al-text-muted);
  font-size: 10px;
}

.al-empty-state,
.al-loading-state,
.al-error-state {
  display: grid;
  min-height: 200px;
  place-items: center;
  padding: 28px;
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  text-align: center;
}

.al-empty-state-inner {
  max-width: 620px;
}

.al-empty-title {
  margin-top: 10px;
}

.al-command-error {
  margin-top: var(--al-space-3);
  color: var(--al-critical);
}

.al-empty-state h2,
.al-error-state h2 {
  margin: 0;
  color: var(--al-text);
  font-size: 16px;
}

.al-empty-state p,
.al-error-state p {
  margin: 8px 0 0;
  color: var(--al-text-muted);
  font-size: 11px;
}

.al-provenance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--al-border);
  background: var(--al-border);
}

.al-provenance-item {
  min-width: 0;
  padding: 8px;
  background: var(--al-canvas-deep);
}

.al-provenance-item span {
  display: block;
  color: var(--al-text-dim);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.al-provenance-item strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--al-text);
  font-family: var(--al-font-data);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 9, 13, 0.76);
}

.al-command-dialog {
  width: min(560px, 100%);
  border: 1px solid var(--al-border-strong);
  background: var(--al-surface);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
}

.al-command-dialog header,
.al-command-dialog footer {
  padding: 12px 14px;
  border-bottom: 1px solid var(--al-border);
  background: var(--al-surface-raised);
}

.al-command-dialog footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--al-border);
  border-bottom: 0;
}

.al-command-dialog-body {
  padding: 14px;
}

.al-command-facts {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  margin: 0;
}

.al-command-facts dt {
  color: var(--al-text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.al-command-facts dd {
  margin: 0;
  color: var(--al-text);
  font-size: 11px;
}

.al-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483001;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 12px;
  border: 1px solid var(--al-accent);
  color: var(--al-text);
  background: var(--al-surface-raised);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--al-transition), transform var(--al-transition);
}

.al-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.al-toast.is-error {
  border-color: var(--al-critical);
}

/* Assistant */

#astroloop-assistant-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147482000;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--al-accent);
  border-radius: var(--al-radius-control);
  color: #fff;
  background: var(--al-accent-strong);
  font-family: var(--al-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

#astroloop-assistant-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147482500;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(430px, 100vw);
  border-left: 1px solid var(--al-border-strong);
  color: var(--al-text);
  background: var(--al-surface);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
  font-family: var(--al-font-ui);
  transform: translateX(102%);
  transition: transform 180ms ease;
}

#astroloop-assistant-drawer.is-open {
  transform: translateX(0);
}

.al-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--al-border);
  background: var(--al-surface-raised);
}

.al-assistant-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.al-assistant-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--al-border-strong);
  color: var(--al-text);
  background: transparent;
  cursor: pointer;
}

.al-assistant-log {
  overflow: auto;
  padding: 12px;
  background: var(--al-canvas);
}

.al-assistant-message {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  font-size: 11px;
  white-space: pre-wrap;
}

.al-assistant-message[data-role="user"] {
  margin-left: 30px;
  border-color: var(--al-accent-strong);
  background: rgba(61, 183, 233, 0.08);
}

.al-assistant-message[data-role="assistant"] {
  margin-right: 30px;
}

.al-assistant-source {
  display: block;
  margin-top: 7px;
  color: var(--al-text-dim);
  font-size: 9px;
}

.al-assistant-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--al-border);
  background: var(--al-surface-raised);
}

.al-assistant-input {
  min-width: 0;
  min-height: 36px;
  padding: 8px 9px;
  border: 1px solid var(--al-border-strong);
  color: var(--al-text);
  background: var(--al-canvas-deep);
}

/* Shell modes. The JavaScript marks only verified authoring controls. */

html[data-astroloop-shell-mode="operations"] [data-astroloop-authoring-control="true"],
html[data-astroloop-shell-mode="demonstration"] [data-astroloop-authoring-control="true"] {
  display: none !important;
}

html[data-astroloop-shell-mode="demonstration"] [data-astroloop-operational-command="true"] {
  pointer-events: none !important;
  opacity: 0.4 !important;
}

#astroloop-preview-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 2147482600;
  display: none;
  padding: 5px 14px;
  border: 1px solid var(--al-caution);
  border-top: 0;
  color: var(--al-caution);
  background: var(--al-canvas-deep);
  font-family: var(--al-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

html[data-astroloop-shell-mode="demonstration"] #astroloop-preview-banner {
  display: block;
}

@media (max-width: 1180px) {
  .al-context-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-context-cell { border-bottom: 1px solid var(--al-border); }
  .al-summary-grid,
  .al-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-analysis-layout,
  .al-monitor-layout { grid-template-columns: minmax(0, 1fr); }
  .al-provenance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .al-page { padding: 10px; }
  .al-page-header { flex-direction: column; }
  .al-page-actions { justify-content: flex-start; }
  .al-context-bar,
  .al-summary-grid,
  .al-grid-2,
  .al-grid-3,
  .al-grid-4,
  .al-planning-layout,
  .al-provenance { grid-template-columns: minmax(0, 1fr); }
  .al-context-cell { border-right: 0; }
  .al-bar-row { grid-template-columns: minmax(90px, 0.8fr) minmax(100px, 1.6fr) 58px; }
  .al-command-facts { grid-template-columns: 1fr; }
  .al-command-facts dd { margin-bottom: 8px; }
}

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

/* -------------------------------------------------------------------------
   Limited Open MCT shell treatment
   ------------------------------------------------------------------------- */

html[data-astroloop-shell="true"],
html[data-astroloop-shell="true"] body,
html[data-astroloop-shell="true"] #app,
html[data-astroloop-shell="true"] [data-astroloop-shell-root="true"] {
  color: var(--al-text);
  background: var(--al-canvas);
  font-family: var(--al-font-ui);
}

html[data-astroloop-shell="true"] #app button,
html[data-astroloop-shell="true"] #app input,
html[data-astroloop-shell="true"] #app select,
html[data-astroloop-shell="true"] #app textarea {
  border-radius: var(--al-radius-control);
  font-family: var(--al-font-ui);
}

html[data-astroloop-shell="true"] #app :is(
  .l-shell,
  .l-shell__main,
  .l-browse,
  .l-browse-bar,
  .l-pane,
  .c-pane,
  .c-tree,
  .c-tree__item,
  .c-menu,
  .c-menu__item,
  .c-inspector,
  .c-inspector__header,
  .c-tabular,
  .c-table
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-astroloop-shell="true"] #app :is(.l-browse-bar, .c-inspector__header, .c-menu, .c-toolbar, .c-tabs) {
  border-color: var(--al-border) !important;
  background-color: var(--al-surface) !important;
}

html[data-astroloop-shell="true"] #app :is(.c-tree__item, .c-menu__item, .c-button, .c-tab) {
  transition: background var(--al-transition), color var(--al-transition), border-color var(--al-transition);
}

html[data-astroloop-shell="true"] #app :is(.c-tree__item, .c-menu__item, .c-tab):hover {
  background-color: rgba(61, 183, 233, 0.08) !important;
}

html[data-astroloop-shell="true"] #app :is(.is-selected, .selected, [aria-selected="true"], .c-tree__item--selected) {
  color: var(--al-text) !important;
  background-color: var(--al-surface-selected) !important;
  box-shadow: inset 3px 0 0 var(--al-accent-strong) !important;
}

html[data-astroloop-shell="true"] #app :is(.c-button, button) {
  font-weight: 600;
}