/* WBS all-pages BBC GEL discipline over the established Waffle neumorphism.
 * This is intentionally a shared layer: page modules retain their own content
 * and interactions but inherit one readable scale, grid, depth and focus rule. */
:root {
  --gel-unit: 8px;
  --gel-unit-alt: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --page-gutter: clamp(16px, 2.5vw, 40px);
  --content-width: min(100%, 1440px);
  --grid-gap: 24px;
  --panel-padding: 24px;
  --control-height: 44px;
  --type-page: clamp(2rem, 1.6vw + 1.5rem, 2.375rem);
  --type-section: clamp(1.5rem, 1vw + 1.1rem, 1.75rem);
  --type-card: 1.25rem;
  --type-body: 1rem;
  --type-meta: .875rem;
  --line-display: 1.14;
  --line-heading: 1.22;
  --line-body: 1.55;
  --weight-body: 400;
  --weight-control: 600;
  --weight-heading: 700;
  --neu-shadow-low: 3px 3px 8px rgba(163,177,198,.34), -3px -3px 8px rgba(255,255,255,.82);
  --neu-shadow-standard: 7px 7px 18px rgba(163,177,198,.46), -7px -7px 18px rgba(255,255,255,.86);
  --neu-shadow-high: 11px 11px 26px rgba(163,177,198,.48), -11px -11px 26px rgba(255,255,255,.88);
  --neu-shadow-inset: inset 3px 3px 7px rgba(163,177,198,.38), inset -3px -3px 7px rgba(255,255,255,.86);
  --neu-shadow-focus: 0 0 0 3px #2453b8, var(--neu-shadow-standard);
  --motion-ui: 160ms cubic-bezier(.2, .7, .2, 1);
}

body {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

button,
input,
select,
textarea {
  min-height: var(--control-height);
  border-radius: 4px;
}

/* WBS deliberately avoids generic SaaS pills. Circular graphical glyphs are
 * not targeted; application controls, cards, badges and popovers share the
 * standing 4px geometry. */
.window-content :is(
  .btn,
  .badge,
  .card,
  .nav,
  .nav-link,
  .form-control,
  .input-group,
  .accordion,
  .popover,
  .toast,
  .modal-content,
  .dropdown-menu
) {
  border-radius: 4px !important;
}

button,
a,
summary,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  transition: color var(--motion-ui), background-color var(--motion-ui), box-shadow var(--motion-ui), transform var(--motion-ui), border-color var(--motion-ui);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #2453b8;
  outline-offset: 3px;
  box-shadow: var(--neu-shadow-focus);
}

.desktop-workspace {
  padding: var(--page-gutter);
}

.app-window {
  min-height: calc(100vh - var(--taskbar-height) - (var(--page-gutter) * 2));
  box-shadow: var(--neu-shadow-standard);
}

.window-titlebar {
  min-height: 88px;
  padding: var(--space-3) var(--page-gutter);
}

.window-titlebar h1 {
  margin-top: var(--space-1);
  font-size: var(--type-page);
  font-weight: var(--weight-heading);
  line-height: var(--line-display);
  letter-spacing: -.012em;
}

.window-navigation {
  gap: var(--space-3);
}

.window-back {
  width: var(--control-height);
  height: var(--control-height);
  min-width: var(--control-height);
  min-height: var(--control-height);
  border-radius: 4px;
  box-shadow: var(--neu-shadow-low);
  font-size: 1.25rem;
  line-height: 1;
}

.window-back:hover:not(:disabled) {
  color: var(--accent);
  box-shadow: var(--neu-shadow-standard);
  transform: translateY(-1px);
}

.window-back:active:not(:disabled) {
  box-shadow: var(--neu-shadow-inset);
  transform: translateY(1px);
}

.window-back:disabled {
  opacity: .48;
}

.window-content {
  padding: var(--space-5) var(--page-gutter) var(--space-8);
}

.window-content > :not(.app-store) {
  width: var(--content-width);
  margin-inline: auto;
}

/* Most routed WBS modules use semantic headings directly.  Scope this common
 * contract to non-App-Store content: the App Store keeps its specialised,
 * already-audited display scale while every other route receives an explicit
 * H2/H3 hierarchy instead of inheriting legacy module-specific sizes. */
.window-content > :not(.app-store) h2 {
  font-size: var(--type-section) !important;
  font-weight: var(--weight-heading) !important;
  line-height: var(--line-heading) !important;
  letter-spacing: -.01em;
}

.window-content > :not(.app-store) h3 {
  font-size: var(--type-card) !important;
  font-weight: var(--weight-control) !important;
  line-height: var(--line-heading) !important;
}

.window-content > :not(.app-store) :is(.waffle-action, .btn, button, [role="button"]) {
  min-height: var(--control-height);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: var(--weight-control);
  line-height: 1.2;
}

.page-intro {
  gap: var(--space-5);
  padding: 0 0 var(--space-5);
}

.page-eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--type-meta);
  font-weight: var(--weight-heading);
  line-height: 1.35;
}

.page-title {
  font-size: var(--type-section);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  letter-spacing: -.01em;
}

.page-description,
.page-copy {
  max-width: 72ch;
  font-size: var(--type-body);
  line-height: var(--line-body);
}

.page-grid {
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.page-panel {
  min-height: 0;
  padding: var(--panel-padding);
  border-radius: 4px;
  box-shadow: var(--neu-shadow-low);
}

.page-heading {
  margin-bottom: var(--space-2);
  font-size: var(--type-card);
  font-weight: var(--weight-control);
  line-height: var(--line-heading);
}

/* The generic renderer currently marks compact card titles with
 * `.page-heading`; keep these subordinate even where older markup used an
 * H2 so a card can never visually outrank its page introduction. */
.window-content > :not(.app-store) .page-heading {
  font-size: var(--type-card) !important;
  font-weight: var(--weight-control) !important;
  line-height: var(--line-heading) !important;
}

.waffle-card,
.module-panel {
  border-radius: 4px;
  box-shadow: var(--neu-shadow-low);
}

.module-panel {
  padding: var(--panel-padding);
}

.form-grid,
.forms-builder-field-grid,
.fuel-capture-camera-grid,
.fuel-review-grid {
  gap: var(--space-4);
}

.form-grid :is(input, select, textarea, button),
.forms-builder-field-grid :is(input, select, textarea, button) {
  min-height: var(--control-height);
}

/* Repeated page primitives generated by the live module set.  The group is
 * deliberately semantic: one panel/grid/heading system instead of bespoke
 * per-page offsets and competing elevations. */
:is(
  .assistant-source-grid,
  .document-manager-grid,
  .explorer-folder-grid,
  .form-grid,
  .forms-card-grid,
  .network-chart-grid,
  .network-detail-grid,
  .network-history-grid,
  .network-metric-grid,
  .network-path-grid,
  .network-protection-grid,
  .network-summary-grid,
  .access-summary-grid,
  .business-build-grid,
  .business-structure-grid
) {
  gap: var(--grid-gap);
}

:is(
  .forms-card,
  .fuel-review-card,
  .network-device-card,
  .network-glass-card,
  .network-safety-panel,
  .network-insight-section,
  .network-device-section,
  .network-retention-section,
  .module-panel,
  .explorer-action-panel,
  .app-store-disclosure-panel
) {
  padding: var(--panel-padding);
  border-radius: 4px;
  box-shadow: var(--neu-shadow-low);
}

:is(
  .forms-section,
  .network-section,
  .network-insight-section,
  .network-device-section,
  .network-retention-section
) {
  margin-block: var(--space-6);
}

:is(
  .forms-builder-heading,
  .network-section-heading,
  .network-safety-heading,
  .assistant-source-heading,
  .explorer-nav-title
) {
  font-size: var(--type-section);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  letter-spacing: -.01em;
}

:is(
  .forms-card-meta,
  .forms-submission-meta,
  .knowledge-meta,
  .assistant-source-meta,
  .global-search-result-meta,
  .notification-meta
) {
  font-size: var(--type-meta);
  line-height: 1.45;
}

:is(
  .document-toolbar,
  .explorer-toolbar,
  .notifications-toolbar,
  .global-search-results-toolbar
) {
  gap: var(--space-3);
  padding: var(--space-3);
}

:is(
  .document-toolbar,
  .explorer-toolbar,
  .notifications-toolbar,
  .global-search-results-toolbar
) :is(button, input, select, textarea) {
  min-height: var(--control-height);
}

/* Dense operational pages: retain their information richness, but elevate the
 * smallest labels and controls to a readable, scan-first hierarchy. */
:is(
  .forms-kicker,
  .forms-required-label,
  .global-search-kicker,
  .global-search-match-reason,
  .notifications-kicker,
  .network-privacy-kicker,
  .network-live-badge,
  .network-device-kind,
  .network-inline-state,
  .network-state
) {
  font-size: var(--type-meta);
  font-weight: var(--weight-control);
  line-height: 1.4;
}

:is(
  .forms-hero,
  .global-search-hero,
  .notifications-hero,
  .network-privacy-hero
) :is(h2, h3) {
  font-size: var(--type-section);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

:is(
  .forms-card-head,
  .forms-runtime-head,
  .forms-submission-head,
  .global-search-result-main,
  .notification-item,
  .network-device-head,
  .network-section-heading,
  .network-safety-heading
) :is(h2, h3, h4, strong) {
  font-size: var(--type-card);
  font-weight: var(--weight-control);
  line-height: var(--line-heading);
}

:is(
  .forms-card-actions,
  .forms-runtime-actions,
  .forms-builder-actions,
  .global-search-result-actions,
  .notification-actions,
  .network-action-row,
  .network-retention-controls
) {
  gap: var(--space-2);
}

:is(
  .forms-card-actions,
  .forms-runtime-actions,
  .forms-builder-actions,
  .global-search-filters,
  .global-search-result-actions,
  .notifications-filter-group,
  .notification-actions,
  .network-action-row,
  .network-retention-controls
) :is(button, a, input, select) {
  min-height: var(--control-height);
  border-radius: 4px;
}

:is(
  .forms-card-meta,
  .forms-submission-meta,
  .global-search-result-meta,
  .global-search-result-subtitle,
  .notification-meta,
  .network-muted,
  .network-section-note,
  .network-observation-note,
  .network-interpretation
) {
  font-size: var(--type-meta);
  line-height: 1.45;
}

:is(
  .global-search-result,
  .notification-item,
  .network-alert-row,
  .network-check-row,
  .network-reconciliation-row,
  .network-insight-list > *,
  .network-device-list > *
) {
  border-radius: 4px;
}

.taskbar {
  min-height: 60px;
  height: auto;
  padding: var(--space-2) var(--page-gutter);
  gap: var(--space-2);
}

.start-button,
.system-status,
.taskbar-account,
.taskbar-clock,
.taskbar-cast,
.taskbar-notifications {
  min-height: var(--control-height);
  font-weight: var(--weight-control);
}

.notification-badge {
  border-radius: 4px;
}

dialog,
.notifications-drawer,
.cast-dialog {
  border-radius: 4px;
  box-shadow: var(--neu-shadow-high);
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 16px;
    --grid-gap: 16px;
    --panel-padding: 16px;
  }

  .window-titlebar {
    min-height: 76px;
  }

  .page-intro {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .taskbar-account,
  .taskbar-clock {
    display: none;
  }
}

@media (min-width: 1600px) {
  :root {
    --page-gutter: clamp(40px, 5vw, 96px);
    --content-width: min(90vw, 2200px);
    --grid-gap: 32px;
    --panel-padding: 32px;
    --control-height: 56px;
    --type-page: clamp(3.25rem, 3.4vw, 4.25rem);
    --type-section: clamp(2rem, 1vw + 1.5rem, 2.5rem);
    --type-card: 1.5rem;
    --type-body: 1.5rem;
    --type-meta: 1rem;
  }

  .window-titlebar {
    min-height: 128px;
  }

  .window-back {
    font-size: 1.6rem;
  }
}

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