/* Screen ergonomics. Technical drawings keep their own scale; their lists and
   inspectors provide full-size labels without changing port/room geometry. */
@media screen {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-size: 1rem; line-height: 1.5; }
    small { font-size: .875rem; }
    .multiselect-field legend { font-size: .875rem; }
    kbd { min-height: 24px; height: auto; font-size: .875rem; }
    .app-shell { height: 100dvh; }
    .page-column,.app-content,.page,.panel,.panel-body,.field,.filter-group { min-width: 0; }
    .page-column { min-height: 0; grid-template-rows: auto minmax(0,1fr); }
    .topbar { min-height: var(--topbar); }
    .page:not(.editor-page) { padding-bottom: 76px; }
    .page-header h1 { overflow-wrap: anywhere; }
    .location-cards { min-width: 0; grid-template-columns: minmax(0,1fr); }
    .location-card { min-width: 0; overflow-wrap: anywhere; }
    .location-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .page-header p { font-size: 1rem; }
    .page-actions,.filter-group,.data-toolbar,.editor-head,.editor-title { flex-wrap: wrap; }
    .panel-head { gap: 12px; flex-wrap: wrap; }
    .panel-head h2,.panel-head h3 { font-size: 1.125rem; }
    .panel-head p,.stat-foot { font-size: .875rem; line-height: 1.5; }
    .panel-head > div,.card-head > div,.editor-title > div { min-width: 0; }
    .topology-node,.topology-node.rack-center { width: 248px; grid-template-columns: 36px minmax(0,1fr); gap: 10px; }
    .topology-node b,.topology-node small,.topology-node em { white-space: normal; overflow-wrap: anywhere; }
    .topology-viewport { touch-action: none; }
    .button,.button.small { min-height: 44px; height: auto; font-size: .875rem; line-height: 1.4; white-space: normal; }
    .icon-button,.mini-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .nav-item { min-height: 46px; font-size: .9375rem; line-height: 1.35; }
    .nav-item span { flex-shrink: 0; }
    .brand-copy strong { white-space: normal; }
    .app-legal-notice { line-height: 1.5; }
    .sidebar-footer { flex-shrink: 0; }
    .tenant-menu { max-width: calc(100vw - 24px); max-height: min(65dvh,520px); overflow: auto; }
    .tenant-option { min-height: 56px; }
    .topbar { gap: 10px; }
    .breadcrumbs { min-width: 0; }
    .breadcrumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { gap: 6px; flex-shrink: 0; }
    .project-file-chip { height: 44px; min-height: 44px; }
    .project-file-chip small { display: none; }
    .project-file-chip strong { line-height: 1.4; }
    .global-search { min-height: 44px; }
    .global-search input { font-size: 1rem; min-width: 0; }
    .search-mobile-button { display: none; }
    .save-state { min-height: 44px; min-width: 44px; }
    :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]) { font-size: 1rem; }
    .field input,.field select,.field textarea,.filter-input,.designer-port-row input,.designer-port-row select { min-width: 0; max-width: 100%; min-height: 44px; height: auto; line-height: 1.45; }
    .field label,label.field > span { font-size: .875rem; line-height: 1.5; }
    .field > span { flex-wrap: wrap; }
    .field-row,.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
    :is(.tool-panel,.inspector) .field > span { line-height: 1.5; min-height: 24px; }
    :is(.tool-panel,.inspector) .field-row > .field { grid-template-rows: minmax(24px,1fr) auto; }
    :is(.tool-panel,.inspector) .field input,:is(.tool-panel,.inspector) .field select { min-height: 44px; height: auto; }
    .checkbox-field { grid-template-columns: 24px minmax(0,1fr); cursor: pointer; }
    .checkbox-field input { min-height: 22px; width: 22px; height: 22px; }
    input[type=checkbox],input[type=radio] { width: 22px; height: 22px; accent-color: var(--blue); }
    .tab-bar,.settings-nav { overflow-x: auto; }
    .tab-bar,.data-toolbar > * { min-width: 0; max-width: 100%; }
    .tab-bar button,.settings-nav button,.editor-tabs button,.segmented button { min-height: 44px; height: auto; font-size: .875rem; line-height: 1.4; }
    .tab-bar button { flex-shrink: 0; }
    .editor-tabs { max-width: 100%; min-width: 0; overflow-x: auto; }
    .editor-head { padding: 12px 16px; gap: 12px; max-height: 38dvh; overflow: auto; }
    .editor-title h1 { font-size: 1.125rem; overflow-wrap: anywhere; }
    .editor-panel-tabs,.editor-head-toggle { display: none; }
    .editor-body { min-width: 0; min-height: 0; }
    .tool-section h3,.inspector-section > h3 { line-height: 1.5; letter-spacing: .04em; }
    .tool-section,.inspector-section { overflow-wrap: anywhere; }
    .tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .editor-tool { min-height: 76px; }
    .palette-item { min-height: 58px; text-align: left; }
    .palette-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
    .palette-item strong,.palette-item small { white-space: normal; line-height: 1.45; }
    .floor-snap-options button { min-height: 44px; }
    .workspace { min-width: 0; min-height: 0; }
    .workspace-toolbar { flex-wrap: wrap; max-width: calc(100% - 24px); height: auto; }
    .workspace-toolbar button { min-width: 44px; height: 44px; font-size: .875rem; }
    .bottom-drawer { max-height: 55%; overflow: auto; }
    .bottom-drawer summary { min-height: 44px; line-height: 1.5; }
    .data-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
    .data-table { font-size: .9375rem; }
    .data-table th,.data-table td { padding: 12px; }
    .data-table th { font-size: .875rem; }
    .resource-link { line-height: 1.5; }
    .data-table .resource-link,.data-table .text-button { min-height: 44px; }
    .quality-detail { max-width: 440px; }
    .quality-resource-link { flex-wrap: wrap; white-space: normal; }
    .role-explainer { grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); }
    .permission-pill,.badge,.quality-pill,.shared-library-badge { white-space: normal; overflow-wrap: anywhere; }
    .document-category-grid { grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); }
    .document-category-card,.resource-document-item { min-width: 0; }
    .resource-document-copy,.document-file-link { min-width: 0; overflow-wrap: anywhere; }
    .document-actions { flex-wrap: wrap; }
    .document-hover-preview { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
    .document-preview-content { height: min(300px,45dvh); }
    .document-hover-preview header strong { white-space: normal; overflow-wrap: anywhere; }
    .rack-cable-choice { min-height: 70px; }
    .rack-cable-choice b { font-size: .9375rem; overflow-wrap: anywhere; }
    .rack-cable-choice small,.rack-route-editor-head small,.matrix-port small,.matrix-port span,.connection-target span { white-space: normal; overflow-wrap: anywhere; }
    .matrix-ports { grid-template-columns: repeat(auto-fit,minmax(min(170px,100%),1fr)); }
    .matrix-port { min-height: 80px; }
    .matrix-port b { font-size: 1rem; }
    .matrix-device-head { gap: 10px; flex-wrap: wrap; }
    .matrix-device-head span { min-width: 0; overflow-wrap: anywhere; }
    .inspector .port-row.detailed .filter-input,.inspector .port-row.detailed .mini-icon,.inspector .port-row.detailed .port-vlan select { min-height: 44px; height: auto; }
    .inspector .port-row.detailed .mini-icon { width: 44px; }
    .port-row { min-height: 44px; }
    .connection-target { padding: 10px; min-height: 44px; }
    .rack-route-style button,.rack-route-actions .button,.rack-route-remove { min-height: 44px; font-size: .875rem; }
    .rack-port-side-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    .rack-route-point-chip { height: 46px; grid-template-columns: 44px 44px; }
    .rack-route-point-chip button { height: 44px; font-size: .875rem; }
    .rack-health { flex-wrap: wrap; white-space: normal; }
    .rack-topology-card { width: min(460px,calc(100% - 26px)); top: 76px; max-height: calc(100% - 100px); }
    .rack-topology-endpoint > b { white-space: normal; overflow-wrap: anywhere; }
    .rack-topology-path > div { flex-wrap: wrap; }
    .rack-topology-path > div span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .rack-topology-card header button,.next-guide header button { width: 44px; height: 44px; flex-shrink: 0; }
    .app-dialog,.command-dialog,.device-designer-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    .app-dialog { width: min(720px,calc(100vw - 24px)); overflow: hidden; }
    .app-dialog[open] #dialog-form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
    .app-dialog header,.app-dialog footer { flex-shrink: 0; }
    :is(.app-dialog,.device-designer-dialog) header > div { min-width: 0; overflow-wrap: anywhere; }
    :is(.app-dialog,.device-designer-dialog) header > button { flex-shrink: 0; }
    .app-dialog footer,.device-designer-dialog footer { flex-wrap: wrap; }
    .dialog-body { min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
    .dialog-note { line-height: 1.6; overflow-wrap: anywhere; }
    .dialog-body .field { min-width: 0; }
    .command-dialog { width: min(720px,calc(100vw - 24px)); margin-top: min(10dvh,70px); }
    .command-head input { min-width: 0; }
    .command-results { max-height: 65dvh; }
    .command-result { min-height: 60px; }
    .command-result > span { min-width: 0; overflow-wrap: anywhere; }
    .device-designer-dialog { width: min(1280px,calc(100vw - 24px)); }
    .device-designer-dialog[open] form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
    .device-designer-dialog header,.device-designer-dialog footer { flex-shrink: 0; gap: 12px; }
    .designer-layout { grid-template-columns: 320px minmax(0,1fr); min-height: 0; max-height: none; overflow: auto; }
    .designer-workspace { grid-template-rows: auto minmax(200px,1fr) auto; }
    .designer-zoom-toolbar { flex-wrap: wrap; }
    .designer-canvas-viewport { min-height: 200px; }
    .designer-port-table { max-height: 300px; }
    .designer-port-row { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) 44px; align-items: end; }
    .designer-port-row > .reference-picker { width: 44px; height: 44px; }
    .designer-port-row > label small { white-space: normal; letter-spacing: 0; }
    .designer-port-row > label:nth-of-type(3) { grid-column: 2; }
    .designer-port-coordinates { grid-column: 3; white-space: normal; }
    .designer-port-row > .mini-icon { grid-column: 4; grid-row: 1 / span 2; width: 44px; height: 44px; }
    .designer-canvas { touch-action: none; }
    .field-help { width: 28px; height: 28px; font-size: .875rem; cursor: pointer; }
    .field-help-popover { width: min(360px,calc(100vw - 24px)); max-height: min(440px,calc(100dvh - 24px)); overflow: auto; pointer-events: auto; font-size: 1rem; line-height: 1.6; padding: 14px 16px; overflow-wrap: anywhere; }
    .next-guide-dock,.next-guide-dock.rack-context { height: 44px; width: min(480px,calc(100vw - 24px)); }
    .next-guide-tab { height: 44px; max-width: 100%; }
    .next-guide-tab b { font-size: .875rem; }
    .next-guide { bottom: 43px; max-height: min(600px,calc(100dvh - 100px)); }
    .next-guide-dock.dismissed .next-guide { visibility: hidden; opacity: 0; pointer-events: none; }
    .next-guide > div > button { grid-template-columns: minmax(0,1fr); padding: 14px; }
    .next-guide > div > button span { grid-column: 1; grid-row: auto; }
    .next-guide b { font-size: 1rem; }
    .toast-stack { width: min(420px,calc(100vw - 24px)); right: 12px; bottom: 58px; max-height: calc(100dvh - 80px); overflow: auto; }
    .toast { min-width: 0; }
    .toast strong,.toast small { line-height: 1.5; overflow-wrap: anywhere; }
    .toast strong { font-size: 1rem; }
    .auth-screen { align-items: safe center; }
    .auth-card { max-width: 100%; }
    .auth-legal-notice { line-height: 1.5; }
    .auth-card .app-legal-notice strong { color: #46657d; }
    .auth-card .field-help { color: #075a97; background: #eaf4fc; border-color: #8dc0e4; }
    :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
    :is(.data-table-wrap,.tool-panel,.inspector,.dialog-body,.command-results,.designer-layout) { scrollbar-width: auto; scrollbar-gutter: stable; scroll-padding: 14px; }
    /* Preserve print output, but allow the on-screen preview to be inspected. */
    .print-sheet { max-width: 100%; overflow-x: auto; }
    .print-sheet table { font-size: .875rem; }
    .print-summary { grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); }
}

@media screen and (min-width: 901px) and (hover: hover) and (pointer: fine) {
    :root { --nav-expanded: 300px; --tool-expanded: 320px; --inspector-expanded: 420px; }
    .sidebar-pin-button,.panel-pin-button { width: 40px; height: 40px; }
    .tool-panel > .panel-pin-button,.inspector > .panel-pin-button { width: 40px; }
    .tool-panel > .panel-pin-button + *,.inspector > .panel-pin-button + * { padding-top: 60px; }
    .next-guide-dock.rack-context { left: 76px; width: min(480px,calc(100vw - 100px)); }
}

/* Touch devices must never depend on hovering a thin sidebar rail. */
@media screen and (max-width: 900px), screen and (hover: none), screen and (pointer: coarse) {
    .app-shell,.app-shell.nav-pinned { grid-template-columns: minmax(0,1fr); }
    .mobile-only { display: grid; }
    .editor-head { display: grid; grid-template-columns: minmax(0,1fr) auto; max-height: 42dvh; }
    .editor-head-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
    .editor-title { grid-column: 1; grid-row: 1; flex-wrap: nowrap; }
    .editor-title .brand-mark { display: none; }
    .editor-title .eyebrow { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; }
    .editor-head > .editor-tabs,.editor-head > .page-actions { grid-column: 1 / -1; }
    .editor-head:not(.actions-open) > .editor-tabs,.editor-head:not(.actions-open) > .page-actions { display: none; }
    .editor-head .floor-glance,.editor-head .rack-health { display: none; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: min(340px,calc(100vw - 24px)); max-height: 100dvh; transform: translateX(-102%); box-shadow: var(--shadow); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-pin-button,.panel-pin-button { display: none; }
    .brand .icon-button { margin-left: auto; }
    .nav-backdrop { position: fixed; inset: 0; z-index: 99; border: 0; background: #0008; }
    .sidebar { z-index: 100; }
    .editor-page { grid-template-rows: auto auto minmax(0,1fr) !important; }
    .editor-panel-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
    .editor-panel-tabs button { min-height: 44px; padding: 7px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .875rem; }
    .editor-panel-tabs button[aria-pressed=true] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
    .editor-body,.editor-body.tool-pinned,.editor-body.inspector-pinned,.editor-body.tool-pinned.inspector-pinned { position: relative; display: block; overflow: hidden; }
    .editor-body > .workspace { width: 100%; height: 100%; }
    .editor-body > .tool-panel,.editor-body > .inspector { position: absolute; inset: 0; z-index: 50; width: 100%; max-width: none; height: 100%; overflow: auto; transform: none; background: var(--surface); visibility: hidden; pointer-events: none; transition: none; }
    .editor-body[data-mobile-panel=tools] > .tool-panel,.editor-body[data-mobile-panel=inspector] > .inspector { visibility: visible; pointer-events: auto; }
    .editor-body > .tool-panel::after,.editor-body > .inspector::after { display: none; }
    .editor-body > :is(.tool-panel,.inspector) > * { width: 100%; opacity: 1 !important; pointer-events: auto; }
    .editor-body > :is(.tool-panel,.inspector) { padding-bottom: 64px; }
    .editor-body .tool-grid { grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); }
    .editor-body .palette-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); }
    .editor-body .workspace-toolbar { position: absolute; top: 8px; left: 8px; right: 8px; max-width: none; width: auto; transform: none; justify-content: flex-end; white-space: normal; }
    .workspace-toolbar .layout-lock-state { flex: 1 1 100%; border: 0; }
    .bottom-drawer { bottom: 48px; max-height: 45%; }
    .floor-viewport { padding: 100px 20px 80px; }
    .floor-canvas.drawing-mode,.floor-canvas.pan-mode,.floor-canvas.layout-unlocked .floor-device,.room-resize-handle,.room-vertex-handle,.floor-resize-handle { touch-action: none; }
    .floor-canvas.layout-unlocked:not(.pan-mode):not(.drawing-mode) .room-shape { touch-action: none; }
    .designer-layout { grid-template-columns: minmax(0,1fr); }
    .designer-settings,.designer-workspace { overflow: visible; }
    .designer-workspace { min-height: 460px; }
    .designer-canvas-viewport { max-height: 55dvh; }
    .next-guide-dock,.next-guide-dock.rack-context { left: 12px; width: min(480px,calc(100vw - 24px)); transform: none; }
    .next-guide-dock:not(.open) .next-guide { visibility: hidden; opacity: 0; pointer-events: none; }
    .next-guide-dock.open .next-guide { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%,0); }
    .field-help { width: 36px; height: 36px; }
}

@media screen and (max-width: 620px) {
    .topbar { padding: 6px 8px; gap: 4px; flex-wrap: wrap; height: auto; }
    .breadcrumbs { flex: 1; font-size: .875rem; }
    .breadcrumbs span { display: none; }
    .topbar-actions { gap: 2px; }
    .project-file-chip { display: none; }
    .global-search { display: none; }
    .search-mobile-button { display: grid; }
    .save-state { padding: 0 8px; }
    .page { padding: 14px; }
    .page-header { gap: 14px; }
    .page-actions { gap: 8px; }
    .page-actions .button { flex: 1 1 auto; }
    .editor-head { padding: 10px; max-height: 42dvh; }
    .editor-head .page-actions { width: 100%; }
    .editor-head .floor-glance,.editor-head .rack-health { display: none; }
    .editor-tabs { width: 100%; flex-shrink: 0; }
    .editor-tabs button { flex-shrink: 0; }
    .form-grid,.field-row,:is(.tool-panel,.inspector) .field-row { grid-template-columns: minmax(0,1fr); }
    .form-grid .span-2 { grid-column: auto; }
    .filter-group { display: flex; flex-wrap: wrap; }
    .filter-input { width: 100%; }
    .card-grid,.stat-grid,.dashboard-grid,.quality-stat-grid,.location-layout,.admin-layout,.network-stats { grid-template-columns: minmax(0,1fr); }
    .data-toolbar { flex-direction: column; }
    .panel-head { padding: 14px; }
    .app-dialog header,.app-dialog footer,.dialog-body { padding: 14px; }
    .app-dialog header h2,.device-designer-dialog header h2 { font-size: 1.125rem; }
    .app-dialog footer .button,.device-designer-dialog footer .button { flex: 1; }
    .command-head { padding: 10px; }
    .command-dialog .command-close { flex-shrink: 0; }
    .rack-topology-ends { grid-template-columns: minmax(0,1fr); }
    .rack-topology-card { top: 104px; max-height: calc(100% - 120px); }
    .rack-stage { padding-inline: 420px; }
    .site-map { min-height: 300px; }
    .site-map-controls { flex-wrap: wrap; max-width: calc(100% - 20px); }
    .auth-screen { padding: 16px 12px; }
    .auth-card { padding: 22px 18px; }
    .auth-brand,.auth-footer { flex-wrap: wrap; }
    .designer-settings,.designer-workspace { padding: 12px; }
    .designer-port-row { grid-template-columns: 44px minmax(0,1fr) 44px; }
    .designer-port-row > label,.designer-port-row > label:nth-of-type(3),.designer-port-coordinates { grid-column: 2; }
    .designer-port-row > label small { overflow-wrap: anywhere; text-overflow: clip; }
    .designer-port-row > .reference-picker { grid-column: 1; grid-row: 1; }
    .designer-port-row > .mini-icon { grid-column: 3; grid-row: 1 / span 4; align-self: start; }
    .print-sheet { padding: 16px; }
    .print-title,.print-footer { flex-wrap: wrap; }
    .print-racks { grid-template-columns: minmax(0,1fr); }
}

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

@media print {
    #guide-root,.field-help,.field-help-popover,.document-hover-preview,.editor-panel-tabs,.editor-head-toggle,.nav-backdrop { display: none !important; }
}