/* Device illustrations share one SVG asset and the site's existing colour tokens. */
.fleet-workspace { padding: 0; }
.fleet-intro h2 { margin-top: 0; }
.fleet-toolbar h3, .connection-toolbar h3 { font: 700 20px/1.3 var(--body); letter-spacing: -.025em; }
.connection-toolbar p { font-size: 13px; color: #48627a; margin-top: 8px; }
.fleet-toolbar { margin-bottom: 16px; }
.fleet-toolbar output { font-size: 13px; }
.fleet-presets { gap: 6px; }
.fleet-presets button { border-radius: 8px; }
.fleet-devices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fleet-devices button { grid-column: span 2; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 14px 10px 16px; border: 1px solid #d7dce7; border-radius: 12px; background: #f6f7fb; color: var(--ink); position: relative; transition: border-color .2s, background .2s, transform .2s; }
.fleet-devices button:nth-child(n+4) { grid-column: span 3; }
.fleet-devices button[aria-pressed=true] { border: 1px solid #a991c6; background: #fff; color: var(--ink); box-shadow: none; }
.fleet-devices button:hover { transform: translateY(-3px); border-color: var(--violet); }
.fleet-devices button:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.fleet-selection { position: absolute; top: 11px; right: 11px; width: 19px; height: 19px; border: 1px solid #94a0b7; border-radius: 50%; background: #fff; }
.fleet-selection::after { content: '+'; display: block; font: 18px/16px var(--body); color: #5b6780; }
[aria-pressed=true] .fleet-selection { background: var(--violet); border-color: var(--violet); }
[aria-pressed=true] .fleet-selection::after { content: ''; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); margin: 5px 4px; }
.fleet-art { display: block; width: min(100%, 145px); height: 112px; margin: 4px auto 9px; transition: opacity .2s; }
[aria-pressed=false] .fleet-art { opacity: .8; }
.fleet-card-copy { display: block; }
.fleet-devices strong { display: block; font-size: 13px; line-height: 1.4; margin: 0; }
.fleet-devices small { display: block; font-size: 11px; color: #635275; margin-top: 3px; }
.fleet-state { margin-top: 12px; font-size: 10px; color: #57627a; text-transform: none; letter-spacing: 0; font-weight: 600; }
[aria-pressed=true] .fleet-state { color: var(--violet); }
.fleet-summary { gap: 14px; min-height: 0; margin-top: 22px; padding-top: 20px; font-size: 12px; border-top: 1px solid #dfd3ee; }
.fleet-hub { width: 32px; height: 32px; padding: 0; border-radius: 0; background: transparent; }
.fleet-fineprint { font-size: 11px; line-height: 1.8; color: #635275; margin-top: 18px; }

.connection-demo { border-color: #cbd9e4; border-radius: 16px; padding: 30px 38px; overflow: hidden; }
.connection-toolbar { border-color: #dce5ee; }
.connection-visual { max-width: 880px; margin: 0 auto; }
.connection-map { grid-template-columns: 1fr 190px 1fr; max-width: none; margin-top: 34px; }
.map-device { padding: 18px 12px 23px; border: 1px solid #d2dfeb; border-radius: 16px; background: #f5f8fd; z-index: 1; }
.map-device .diagram-icon { display: block; width: 190px; max-width: 100%; height: 147px; margin: 0 auto 10px; stroke: none; fill: initial; }
.map-device h3 { font-size: 15px; }
.map-device p { font-size: 12px; margin: 5px 0 14px; }
.status-chip { border: 1px solid #c4ded4; background: #e9f5ef; border-radius: 6px; padding: 6px 9px; color: #226353; font-size: 10px; }
.map-path { min-height: 142px; gap: 5px; color: var(--teal); }
.map-path strong, .map-path small { background: #fff; position: relative; }
.map-path strong { font-size: 14px; color: var(--ink); }
.map-path small { display: block; font-size: 11px; }
.lan-icon { width: 46px; height: 46px; padding: 6px; stroke: var(--teal); stroke-width: 1.8; fill: #e9f5ef; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 5px; }
.lan-caption { font-size: 10px; color: #226353; background: #fff; padding: 0 6px; z-index: 1; }
.path-line { background: #8abaae; top: 50%; height: 2px; }
.path-line:last-child { display: none; }
.path-line:first-child::before { width: 8px; height: 8px; top: -3px; }
.path-line:first-child::after { content: ''; position: absolute; width: 8px; height: 8px; top: -3px; right: 0; border: 1px solid var(--teal); background: white; border-radius: 50%; }
.map-path::before { z-index: 2; }
.drive-path { max-width: none; padding-top: 58px; }
.drive-bridge { position: absolute; top: 0; left: 17%; right: 17%; height: 29px; border: 2px dashed #99b5e0; border-top: 0; border-radius: 0 0 16px 16px; }
.drive-connector { top: 29px; height: 29px; border-left: 2px dashed #99b5e0; }
.drive-path .drive-card { position: relative; display: inline-flex; flex-wrap: nowrap; justify-content: center; gap: 14px; padding: 9px 25px 9px 12px; background: #edf4ff; border: 1px solid #bfd1ed; border-radius: 14px; text-align: left; }
.cloud-art { width: 98px; height: 76px; flex-shrink: 0; }
.drive-card>div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.drive-path strong { font-size: 14px; }
.drive-state { border-radius: 4px; padding: 3px 7px; font-size: 10px; }
.drive-path>p { max-width: 610px; min-height: 48px; font-size: 12px; margin-top: 20px; }
[data-online=false] .drive-bridge, [data-online=false] .drive-connector { border-color: #b8b6ad; }
[data-online=false] .cloud-art { opacity: .5; }
.connection-demo[data-route=local] .drive-bridge { opacity: .4; }
.platform-roadmap { font-size: 11px !important; color: var(--violet); font-weight: 700; margin-top: 8px !important; }
.windows-store-note { font-size: 12px; line-height: 1.8; padding: 16px; background: var(--sky); border-radius: 8px; margin-bottom: 20px; }
.windows-store-note strong { display: block; color: var(--blue-dark); }

/* Fullscreen uses a div inside the modal: dialog itself is not a valid API target. */
.viewer-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--deep); }
.viewer-shell:fullscreen { width: 100%; height: 100%; }
.demo-viewer.is-expanded { inset: 0; width: 100vw; height: 100dvh; border: 0; }
.demo-viewer.is-expanded .viewer-workspace, .viewer-shell:fullscreen .viewer-workspace { padding: 0; }
.demo-viewer.is-expanded .viewer-frame, .viewer-shell:fullscreen .viewer-frame { box-shadow: none; }
#demo-fullscreen { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 8px; margin-left: auto; border: 1px solid #9ab5ab; border-radius: 5px; background: white; color: var(--ink); min-height: 44px; padding: 8px 13px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#demo-fullscreen:hover { background: var(--mint); }
#demo-fullscreen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#demo-fullscreen[aria-pressed=true] { background: var(--mint); }
.fullscreen-status { flex-shrink: 0; background: var(--paper); color: var(--ink); font-size: 11px; padding: 0 22px 8px; }
.fullscreen-status:empty { display: none; }
.viewer-shell.is-immersive .viewer-toolbar, .viewer-shell.is-immersive .viewer-footer { display: none; }
.viewer-shell.is-immersive .viewer-workspace { padding: 0; }
.viewer-shell.is-immersive .viewer-frame,
.viewer-shell.is-immersive .viewer-workspace[data-device=phone] .viewer-frame { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.viewer-shell.is-immersive .fullscreen-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#demo-fullscreen-exit { position: absolute; z-index: 5; right: max(12px, env(safe-area-inset-right)); bottom: calc(90px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 13px; border: 1px solid #b8cfc1; border-radius: 24px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; }
#demo-fullscreen-exit[hidden] { display: none; }
#demo-fullscreen-exit:hover { background: var(--mint); }
#demo-fullscreen-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .connection-map { grid-template-columns: 1fr 145px 1fr; }
  .connection-demo { padding: 24px; }
  .viewer-footer p { display: none; }
}
@media (max-width: 700px) {
  .fleet-workspace { padding: 0; }
  .fleet-toolbar h3, .connection-toolbar h3 { font-size: 18px; }
  .fleet-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fleet-devices button, .fleet-devices button:nth-child(n+4) { grid-column: auto; }
  .fleet-devices button:last-child { grid-column: 1 / -1; flex-direction: row; gap: 15px; padding: 10px 20px; text-align: left; }
  .fleet-devices button:last-child .fleet-art { width: 90px; height: 88px; margin: 0; }
  .fleet-devices button:last-child .fleet-state { margin: 0 0 0 auto; }
  .fleet-art { height: 100px; }
  .connection-demo { padding: 20px 14px; border-radius: 14px; }
  .connection-toolbar { flex-wrap: wrap; gap: 14px; padding-bottom: 16px; }
  .connection-toolbar p { font-size: 12px; }
  .connection-map { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  .map-device { display: grid; grid-template-columns: 105px minmax(0, 1fr); grid-template-rows: auto auto auto; text-align: left; padding: 15px 10px; column-gap: 12px; }
  .map-device .diagram-icon { width: 105px; height: 105px; grid-row: 1 / 4; margin: 0; align-self: center; }
  .map-device h3 { font-size: 13px; align-self: end; }
  .map-device p { font-size: 11px; margin: 5px 0 9px; }
  .status-chip { font-size: 9px; padding: 4px 6px; justify-self: start; align-self: start; }
  .map-path { min-height: 125px; margin-block: 0; }
  .map-path .lan-icon { width: 36px; height: 36px; margin-bottom: 0; }
  .map-path::after { content: ''; position: absolute; height: 100%; width: 2px; background: #8abaae; left: 50%; z-index: 0; }
  .map-path>* { z-index: 1; }
  .map-path .lan-icon { background: white; }
  .map-path .path-line { display: none; }
  .map-path small { font-size: 10px; }
  .connection-demo .map-path::before { display: none; }
  .drive-path { padding-top: 34px; }
  .drive-bridge { display: none; }
  .drive-connector { top: 0; height: 34px; }
  .drive-path .drive-card { padding: 10px; gap: 6px; width: 100%; }
  .cloud-art { width: 72px; height: 62px; }
  .drive-path strong { font-size: 12px; }
  .drive-path>p { min-height: 0; font-size: 12px; padding: 0 3px; margin-top: 18px; }
  .viewer-footer { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .viewer-footer select { flex: 1; width: 0; min-width: 0; }
  #demo-fullscreen { padding: 8px 10px; font-size: 11px; }
}
@media (max-width: 380px) {
  .fleet-art { height: 84px; }
  .fleet-devices button:last-child { gap: 8px; padding: 10px; }
  .fleet-devices button:last-child .fleet-state { display: none; }
  .map-device { grid-template-columns: 76px minmax(0, 1fr); gap: 0 8px; }
  .map-device .diagram-icon { width: 76px; height: 85px; }
  .viewer-footer label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fleet-devices button, .fleet-art { transition: none; } }
html[data-motion=paused] .fleet-devices button, html[data-motion=paused] .fleet-art { transition: none; }

#fleet-count { font-variant-numeric: tabular-nums; }
#demo-fullscreen:disabled { opacity: .55; cursor: wait; }
.fleet-presets button[aria-pressed=true]:hover { background: #52347f; color: #fff; }