/* Intrinsic layout for the authenticated workspace. Materials live separately. */
#hub {
  --workspace-gutter: clamp(16px, 2.4vw, 40px);
  --control-size: 36px;
}
#hub .main-shell, #hub main, #hub .workspace-view,
#hub .section-heading > div, #hub .overview-view header > div,
#hub .machine-grid > *, #hub .insights-grid > *, #hub .account-grid > *,
#hub .network-activity > *, #hub .mission-columns > * { min-width: 0; }
#hub main { width: 100%; padding-inline: var(--workspace-gutter); }
#hub aside { gap: 0; flex-shrink: 0; }
#hub aside .brand { flex-shrink: 0; min-width: 0; margin-inline: 7px; }
#hub .workspace-wordmark { min-width: 0; line-height: 1.35; letter-spacing: -.2px; }
#hub .workspace-wordmark small { font-size: 10px; line-height: 1.5; white-space: normal; }
#hub .nav, #hub .rail-machines button, #hub .rail-security,
#hub .rail-help, #hub .rail-bottom { flex-shrink: 0; }
#hub .rail-heading { display: block; }
#hub .rail-machines button { display: flex; width: 100%; align-items: center; }
#hub .rail-security > div { min-width: 0; }
#hub .rail-security small { white-space: normal; line-height: 1.5; }
#hub .rail-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hub .rail-bottom #logout { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#hub .rail-bottom #logout > span { float: none; display: flex; }

/* Toolbar controls retain their own space; the breadcrumb takes the remainder. */
#hub .topbar { padding-inline: var(--workspace-gutter); gap: 20px; }
#hub .breadcrumb { flex: 1 1 auto; overflow: hidden; }
#hub .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#hub .topbar-right { flex: 0 0 auto; }
#hub .topbar-right > button { flex-shrink: 0; width: var(--control-size); height: var(--control-size); }
#hub #command { display: flex; align-items: center; justify-content: space-between; }
#hub #connection-state { display: flex; align-items: center; white-space: nowrap; }
#hub .topbar-right > span { white-space: nowrap; }
#hub .workspace-view > .section-heading, #hub .machines-section > .section-heading {
  flex-wrap: wrap; align-items: flex-end; gap: 18px 24px;
}
#hub .workspace-view > .section-heading > div:first-child { flex: 1 1 320px; }
#hub .workspace-view > .section-heading h2 { overflow-wrap: anywhere; }
#hub .workspace-view > .section-heading > .search { flex: 0 1 280px; align-self: flex-end; }
#hub .search { display: flex; align-items: center; min-width: 0; }
#hub .search > span, #hub .search > kbd { flex-shrink: 0; }
#hub .search input, #hub .mission-panel .search input { width: 100%; min-width: 0; flex: 1; }
#hub .agent-controls { flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
#hub .agent-controls > a { display: grid; place-items: center; min-width: var(--control-size); min-height: var(--control-size); }
#hub .agent-controls button { min-height: var(--control-size); }
#hub .overview-view > header { flex-wrap: wrap; align-items: center; gap: 24px; }
#hub .overview-view > header > div:first-child { flex: 1 1 330px; }
#hub .overview-pill { flex-shrink: 0; max-width: 100%; white-space: normal; }
#hub .overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.18fr); }
#hub .overview-strip > div { min-width: 0; }
#hub .overview-strip span, #hub .overview-strip small { overflow-wrap: anywhere; }
#hub .overview-strip strong { white-space: nowrap; }

/* Cards choose their metric layout from their own width, not the monitor width. */
#hub .machine-card { container: machine / inline-size; display: flex; flex-direction: column; }
#hub .machine-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
#hub .machine-head > img { flex-shrink: 0; }
#hub .machine-head h3, #hub .machine-head p { overflow-wrap: anywhere; }
#hub .machine-head .availability { margin-left: 0; }
#hub .machine-hardware, #hub .machine-hardware small { overflow-wrap: anywhere; }
#hub .machine-metrics { align-items: stretch; }
#hub .machine-metrics > div { min-width: 0; display: flex; flex-direction: column; }
#hub .metric-value { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
#hub .metric-note { display: block; min-height: 30px; flex: 1; }
#hub .machine-metrics .meter { flex-shrink: 0; }
#hub .machine-detail-strip { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; }
#hub .machine-detail-strip > span { min-width: 0; overflow-wrap: anywhere; }
#hub .machine-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
#hub .machine-bottom > span { display: flex; align-items: center; gap: 4px; margin: 0; }
#hub .machine-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
#hub .machine-actions button, #hub .windows .machine-actions button:not(.quiet) { min-height: var(--control-size); white-space: nowrap; }
#hub .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#hub .attention-row > div, #hub .activity-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
#hub .attention-icon, #hub .attention-action { flex-shrink: 0; }
#hub .workspace-tip { flex-wrap: wrap; line-height: 1.7; }
#hub .workspace-tip button { min-height: var(--control-size); margin-left: 0; }
@container machine (max-width: 440px) {
  #hub .machine-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
  #hub .metric-value { font-size: 32px; }
  #hub .machine-actions { display: grid; width: 100%; margin-left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #hub .machine-actions button, #hub .windows .machine-actions button:not(.quiet) { padding-inline: 5px; font-size: 11px; }
}
@container machine (max-width: 270px) {
  #hub .machine-head { grid-template-columns: auto minmax(0, 1fr); }
  #hub .machine-head .availability { grid-column: 2; justify-self: start; }
  #hub .machine-head p { font-size: 10px; letter-spacing: 0; }
  #hub .machine-actions { grid-template-columns: 1fr; }
}

/* App controls occupy actual grid cells, leaving descriptions fully readable. */
#hub .app-toolbar { flex-wrap: wrap; align-items: center; gap: 16px 24px; }
#hub .filters { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; }
#hub .filters button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--control-size); }
#hub .filters button .ui-icon { margin: 0; flex-shrink: 0; }
#hub .app-view-tools { flex-wrap: wrap; margin-left: auto; gap: 12px; }
#hub .app-view-tools label { display: flex; align-items: center; gap: 7px; min-height: var(--control-size); }
#hub .view-toggle button { min-width: var(--control-size); min-height: var(--control-size); align-items: center; justify-content: center; }
#hub .app-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr)); align-items: stretch; }
#hub .app {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 52px;
  grid-template-rows: 36px 36px auto; align-items: start; column-gap: 12px; row-gap: 4px;
  padding: 20px; min-height: 152px;
}
#hub .app > .icon { grid-column: 1; grid-row: 1 / 4; width: 36px; height: 36px; margin-top: 2px; }
#hub .app .app-body { grid-column: 2; grid-row: 1 / 4; min-width: 0; padding: 0; overflow: visible; }
#hub .app h3, #hub .app p, #hub .app small { white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: anywhere; }
#hub .app h3 { line-height: 1.45; }
#hub .app p { line-height: 1.65; margin-bottom: 12px; }
#hub .app small { display: block; line-height: 1.6; }
#hub .app .app-open, #hub .app .app-pin {
  position: static; inset: auto; margin: 0; justify-self: center;
  display: grid; place-items: center; width: var(--control-size); height: var(--control-size); padding: 0;
}
#hub .app .app-open { grid-column: 3; grid-row: 1; }
#hub .app .app-pin { grid-column: 3; grid-row: 2; }
#hub .app .app-mark { position: static; inset: auto; grid-column: 3; grid-row: 3; align-self: end; text-align: center; font-size: 9px; letter-spacing: 0; line-height: 1.5; }
#hub .app-grid.list-view { grid-template-columns: minmax(0, 1fr); }
#hub .app-grid.list-view .app { grid-template-columns: 32px minmax(0, 1fr) 52px; min-height: 112px; padding: 18px 20px; }
#hub .app-grid.list-view .app > .icon { width: 32px; height: 32px; margin-top: 2px; }
#hub .app-grid.list-view .app-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 0; gap: 8px 24px; }
#hub .app-grid.list-view .app-body > small { display: block; grid-column: 1 / -1; }
#hub .app-grid.list-view .app-mark { position: static; inset: auto; }
#hub .app-grid .empty { grid-column: 1 / -1; }

/* Operational data wraps within cards; only genuinely tabular data scrolls. */
#hub .desktop-launch, #hub .connection-grid > a, #hub .connection-grid > button { min-width: 0; }
#hub .desktop-launch > .ui-icon, #hub .desktop-launch > span,
#hub .connection-grid img, #hub .connection-grid > a > span { flex-shrink: 0; }
#hub .desktop-launch > div, #hub .connection-grid > a > div { min-width: 0; overflow-wrap: anywhere; }
#hub .services-details summary { overflow-wrap: anywhere; line-height: 1.8; }
#hub .service { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
#hub .agent-tabs, #hub .usage-periods { flex-wrap: wrap; gap: 6px; }
#hub .agent-tabs button, #hub .usage-periods button { min-height: var(--control-size); }
#hub .agent-overview { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
#hub .agent-stat { min-width: 0; }
#hub .agent-stat > strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#hub .agent-stat > small { display: block; overflow-wrap: anywhere; line-height: 1.6; }
#hub .account-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
#hub .quota-heading, #hub .quota-labels, #hub .usage-panel-heading, #hub .playback-heading { flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
#hub .quota-heading h3, #hub .quota-description, #hub .quota-window small,
#hub .usage-panel-heading h3, #hub .usage-panel-heading small { min-width: 0; overflow-wrap: anywhere; }
#hub .quota-labels strong { white-space: normal; text-align: right; margin-left: auto; }
#hub .quota-tag, #hub .playback-heading .quota-tag { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#hub .usage-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
#hub .usage-table { min-width: 540px; }
#hub .usage-table td:not(:first-child), #hub .usage-table th:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
#hub .usage-panel-heading > .search { flex: 0 1 270px; }
#hub .network-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#hub #torrent-rates, #hub .torrent-labels { flex-wrap: wrap; gap: 8px 16px; }
#hub .container-row { flex-wrap: wrap; gap: 14px 20px; }
#hub .container-description { flex: 1 1 200px; }
#hub .container-row button { min-height: var(--control-size); }
#hub .source-note, #hub .network-averages, #hub .container-reason { overflow-wrap: anywhere; }

/* Header chrome responds to each floating window, including a snapped pane. */
#hub .floating-window { container: window / inline-size; }
#hub .window-titlebar { min-width: 0; }
#hub .window-controls, #hub .window-layout-controls { flex-shrink: 0; }
#hub .window-titlebar > img { flex-shrink: 0; }
#hub .window-titlebar strong { flex: 1 1 0; min-width: 0; }
#hub .window-subbar { min-width: 0; overflow: hidden; }
#hub .window-subbar > span { min-width: 0; }
#hub .hardware-row { flex-wrap: wrap; gap: 6px 16px; }
#hub .hardware-row strong { overflow-wrap: anywhere; }
#hub .media-toolbar { flex-wrap: wrap; }
#hub .media-search { min-width: 0; }
#hub #dock { padding-inline: 14px; }
#hub #window-tasks { min-width: 0; flex: 1 1 0; overflow-x: auto; overscroll-behavior-x: contain; }
#hub #window-tasks button { flex-shrink: 0; min-height: var(--control-size); max-width: 260px; }
#hub #window-tasks button > span { overflow: hidden; text-overflow: ellipsis; }
#hub #minimize-all { flex-shrink: 0; min-width: var(--control-size); min-height: var(--control-size); }
@container window (max-width: 640px) {
  #hub .window-titlebar { gap: 8px; }
  #hub .window-titlebar .connection-label { display: none; }
}
@container window (max-width: 460px) {
  #hub .window-titlebar > img { display: none; }
  #hub .window-layout-controls .snap-control { display: none; }
  #hub .window-titlebar { padding-inline: 10px; gap: 7px; }
}
@container window (max-width: 320px) {
  #hub .window-titlebar strong { font-size: 10px; }
  #hub .window-controls { gap: 2px; }
  #hub .window-titlebar .window-original { display: none; }
}

@media (max-width: 1100px) {
  #hub #connection-state { display: none; }
  #hub .overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  #hub { --control-size: 44px; }
  #hub .topbar { gap: 10px; }
  #hub .topbar-right { gap: 2px; }
  #hub #command { width: 44px; height: 44px; min-width: 44px; justify-content: center; }
  #hub .mobile-navigation { gap: 4px; min-height: 60px; padding: 6px 12px; scroll-padding-inline: 12px; overscroll-behavior-x: contain; }
  #hub .mobile-nav { min-height: 44px; padding-inline: 10px; }
  #hub .mobile-nav .ui-icon { width: 16px; height: 16px; }
  #hub .overview-pill { margin: 0; max-width: 100%; }
  #hub .app-view-tools { width: 100%; margin-left: 0; justify-content: space-between; }
  #hub .app { grid-template-rows: 44px 44px auto; }
  #hub .app-grid.list-view .app-body { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #hub .app-grid.list-view .app-body > small { grid-column: auto; }
  #hub .agent-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hub .usage-panel-heading > .search { flex-basis: 100%; }
  #hub #dock { height: 62px; padding-inline: 10px; gap: 6px; bottom: max(9px, env(safe-area-inset-bottom)); }
  #hub #window-tasks { padding-block: 5px; }
  #hub main { padding-bottom: calc(115px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  #hub .workspace-view > .section-heading > .search { flex-basis: 100%; }
  #hub .overview-strip { grid-template-columns: minmax(0, 1fr); }
  #hub .overview-strip > div, #hub .overview-strip > div:first-child { padding: 17px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
  #hub .overview-strip > div + div { border-top: 1px solid #ffffff16; }
  #hub .overview-strip > div + div::before { display: none; }
  #hub .overview-strip strong { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  #hub .overview-strip small { grid-column: 1; }
  #hub .overview-strip .strip-note { display: none; }
  #hub .machine-head p { font-size: 10px; letter-spacing: 0; }
  #hub .machine-actions { gap: 6px; }
  #hub .agent-stat { padding: 17px 14px; }
  #hub .agent-stat > strong { font-size: 24px; }
  #hub .desktop-launch { padding: 23px 18px; gap: 13px; }
  #hub .desktop-launch strong { font-size: 17px; }
  #hub .desktop-launch > .ui-icon { width: 28px; height: 28px; }
  #hub .command-footer { flex-wrap: wrap; gap: 8px 14px; }
  #hub .user-row { flex-wrap: wrap; }
  #hub footer { flex-wrap: wrap; gap: 8px; }
}
/* Role-based visibility remains authoritative after layout changes. */
.viewer #hub .overview-strip { grid-template-columns: minmax(0, 1fr); }
.viewer #hub .machine-actions { grid-template-columns: minmax(0, 1fr); }