/* Figma 08 / delivery counter, 2026-09-10.
   Material-only layer: no layout, typography, control size or behavior changes.
   Every color and material is supplied by shared/theme.js WEB_APPEARANCE. */
html[data-web-ui],
html[data-web-ui] body {
  --void: var(--web-ui-canvas);
  --page: var(--web-ui-canvas);
  --bg: var(--web-ui-canvas);
  --space: var(--web-ui-solid);
  --space-2: var(--web-ui-subtle);
  --surface: var(--web-ui-solid);
  --surface-2: var(--web-ui-subtle);
  --text: var(--web-ui-text);
  --bright: var(--web-ui-bright);
  --ink: var(--web-ui-bright);
  --muted: var(--web-ui-muted);
  --faint: var(--web-ui-faint);
  --line: var(--web-ui-line);
  --line-soft: var(--web-ui-line-soft);
  --ui-surface: var(--web-ui-surface);
  --ui-surface-strong: var(--web-ui-surface);
  --ui-surface-subtle: var(--web-ui-subtle);
  --ui-field: var(--web-ui-field);
  --ui-border: var(--web-ui-edge);
  --ui-shadow: var(--web-ui-shadow);
  --panel: var(--web-ui-surface);
  --panel-strong: var(--web-ui-solid);
  --shadow: var(--web-ui-shadow);
  --web-ui-material: var(--web-ui-glass);
  --web-ui-filter: blur(var(--web-ui-blur));
  background-color: var(--web-ui-canvas);
}
html[data-web-ui] body {
  background-image: var(--web-ui-environment);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Replace environmental layers only. In-component core/risk feedback remains. */
html[data-web-ui] body .atmosphere-layer,
html[data-web-ui] body .atmosphere,
html[data-web-ui] body > .meteor,
html[data-web-ui] body > .meteors { display: none; }
html[data-web-ui] body::before { content: none; }

html[data-web-ui] body .sidebar {
  background: var(--web-ui-sidebar);
  border-color: var(--web-ui-line-soft);
  backdrop-filter: var(--web-ui-filter);
  -webkit-backdrop-filter: var(--web-ui-filter);
}
html[data-web-ui] body :is(.topbar, .nav, .site-nav) {
  background: var(--web-ui-topbar);
  border-color: var(--web-ui-line-soft);
  backdrop-filter: var(--web-ui-filter);
  -webkit-backdrop-filter: var(--web-ui-filter);
}

/* Existing reusable surfaces, plus the skill/dossier/counter equivalents. */
html[data-web-ui] body :is(
  .surface, .metric, .workspace-hero, .course-band, .course-toolkit-slot,
  .module-stack, .cert-column, .habit-strip, .tool-card, .agent-shell,
  .assembly-mother-panel, .builder-shell, .assembly-visualization-screen,
  .rhythm-console, .operations-layout, .data-import-flow, .duo-card,
  .demand-card, .engineer-row, .community-filter-bar, .community-signal-rail,
  .community-result-item, .community-result-detail, .geo-eng, .scenario-future,
  .operating-skill-card, .operating-skill-search, .operating-discovery-console,
  .operating-discovery-builder, .operating-skill-showcase-row, .fde-readiness-entry,
  .capability-block-card, .block-card, .system-card, .engine-market-card,
  .fde-diagnosis-card, .library-summary, .dashboard-asset-panels,
  .community-counter-package, .community-counter-fit > div,
  .community-public-price-list > div, .community-maruko-bar,
  .community-fde-facts, .community-fde-profile-layout,
  .my-toolkit-item, .asset-item, .growth-panel, .growth-card,
  .admin-overview-grid button, .login-shell, .brand-panel,
  .system-card-preview, .preview-card
),
html[data-web-ui] body #view-community .community-feed-card {
  background: var(--web-ui-material);
  border-color: var(--web-ui-edge);
  box-shadow: var(--web-ui-shadow);
  backdrop-filter: var(--web-ui-filter);
  -webkit-backdrop-filter: var(--web-ui-filter);
}

/* Working/readable surfaces intentionally stay denser than discovery cards. */
html[data-web-ui] body :is(
  .operating-tool-shell, .modal-card, .profile-modal, .block-dossier,
  .block-dossier-shell, .community-profile-shell, .feedback-dialog,
  .table-wrap, .visualization-stage, .architecture-canvas,
  .operating-data-editor, .operating-object-editor, .chat-workspace,
  .legal-document, .legal-dialog, .engine-market-inline-panel, .dossier-card,
  .login-dialog, .login-auth-panel, .wizard
) {
  background: var(--web-ui-surface);
  border-color: var(--web-ui-edge);
  box-shadow: var(--web-ui-shadow);
}
/* Onboarding owns a viewport-fixed mobile action bar. A backdrop filter on
   its ancestor would create a containing block and move that action bar. */
html[data-web-ui] body .wizard {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-web-ui] body :is(
  .operating-tool-actions, .operating-tool-aside, .operating-tool-sidebar,
  .operating-panel-note, .block-palette, .inspector,
  .visualization-toolbar, .course-module, .wizard-rail
) { background: var(--web-ui-subtle); }
html[data-web-ui] body .login-brand-panel { background: var(--web-ui-sidebar); }
html[data-web-ui] body.theme-dark :is(.view > .page-intro, .lesson-column > .section-heading) {
  background: var(--web-ui-surface);
}
html[data-web-ui].theme-dark body .stage > .copy {
  background: var(--web-ui-material);
  backdrop-filter: var(--web-ui-filter);
  -webkit-backdrop-filter: var(--web-ui-filter);
}
html[data-web-ui] body :is(
  .operating-tool-shell, .modal-card, .profile-modal, .block-dossier-shell,
  .engine-market-inline-panel, .login-shell, .wizard
) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(:disabled) {
  background-color: var(--web-ui-field);
  color: var(--web-ui-text);
}
html[data-web-ui] body :is(.operating-tool-shell, .block-dossier-shell) :is(pre, code) {
  background-color: var(--web-ui-solid);
  color: var(--web-ui-text);
}
html[data-web-ui] body dialog::backdrop { background-color: var(--web-ui-scrim); }

/* Card focus/selection is still the existing orange contract, not glass glow. */
html[data-web-ui] body :is(.operating-skill-card, .capability-block-card, .block-card, .fde-diagnosis-card):focus-visible,
html[data-web-ui] body #view-community .community-feed-card:focus-within {
  border-color: var(--ui-component-focus, var(--orange));
}

/* Dense records do not inherit wallpaper through sticky cells or native menus. */
html[data-web-ui] body :is(.table-wrap, .operating-tool-shell) th,
html[data-web-ui] body select option { background-color: var(--web-ui-solid); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-web-ui], html[data-web-ui] body {
    --web-ui-material: linear-gradient(var(--web-ui-glass-fallback), var(--web-ui-glass-fallback));
    --web-ui-filter: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-web-ui], html[data-web-ui] body {
    --web-ui-material: linear-gradient(var(--web-ui-glass-fallback), var(--web-ui-glass-fallback));
    --web-ui-filter: none;
    --web-ui-surface: var(--web-ui-solid);
    --web-ui-topbar: var(--web-ui-solid);
  }
}
/* A static viewport background has no animation to reduce. Do not size it to
   the length of a long mobile list: that would push Earth below the first screen. */
@media print {
  html[data-web-ui] body { background-image: none; }
}
@media (forced-colors: active) {
  html[data-web-ui], html[data-web-ui] body {
    --web-ui-material: none;
    --web-ui-surface: Canvas;
    --web-ui-solid: Canvas;
    --web-ui-text: CanvasText;
    --web-ui-bright: CanvasText;
    --web-ui-muted: CanvasText;
    --web-ui-faint: CanvasText;
    --web-ui-edge: CanvasText;
    --web-ui-filter: none;
  }
  html[data-web-ui] body { background-image: none; }
}