/* Generated by scripts/build_panel_static_assets.py. Do not edit directly. */
/* source: panel/frontend/css/components/play.css */
/* Task-first workspace composition. Existing data-play hooks retain saved preferences. */
body[data-play-ui][data-nx-ui] .play-page-head,
body[data-play-ui].page-tunnel-groups .tg-page-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--nx-s-4);
  min-height:var(--nx-r-none); margin:var(--nx-r-none); padding:var(--nx-s-1) var(--nx-r-none);
  border:var(--nx-e-0); border-radius:var(--nx-r-none); background:var(--nx-transparent); box-shadow:var(--nx-e-0);
}
body[data-play-ui] .play-page-head h1 { margin:var(--nx-r-none); color:var(--nx-text); font-size:var(--nx-fs-page); font-weight:var(--nx-fw-semibold); line-height:var(--nx-lh-title); letter-spacing:var(--nx-tracking-heading); overflow-wrap:anywhere; }
body[data-play-ui] .play-page-head .page-title { min-width:0; }
body[data-play-ui] .play-page-head .meta { margin-top:var(--nx-s-2); color:var(--nx-text-muted); font-size:var(--nx-fs-body); }
body[data-play-ui] .play-page-head > .right { align-self:center; flex-wrap:wrap; }
.play-section-heading { display:flex; align-items:center; gap:var(--nx-s-2); margin:var(--nx-r-none); color:var(--nx-text); font-size:var(--nx-fs-title); font-weight:var(--nx-fw-semibold); line-height:var(--nx-lh-title); }
.play-view-switch { display:inline-flex; align-items:center; flex:none; align-self:start; gap:var(--nx-s-1); padding:var(--nx-s-1); border-radius:var(--nx-r-sm); background:var(--nx-surface-muted); }
.play-view-switch button { display:inline-flex; align-items:center; justify-content:center; gap:var(--nx-s-1); min-height:var(--nx-control-xs); padding:var(--nx-s-1) var(--nx-s-3); border:var(--nx-e-0); border-radius:var(--nx-r-sm); background:var(--nx-transparent); color:var(--nx-text-muted); font-family:var(--nx-font); font-size:var(--nx-fs-caption); font-weight:var(--nx-fw-medium); cursor:pointer; transition:background-color var(--nx-motion-enter),color var(--nx-motion-enter); }
.play-view-switch button[aria-pressed="true"] { background:var(--nx-surface); color:var(--nx-text); box-shadow:var(--nx-e-1); }
.play-view-switch button:focus-visible { outline:var(--nx-focus-width) solid var(--nx-focus-ring); outline-offset:var(--nx-s-1); }

/* Collections: comparison is the default, cards remain an explicit preference. */
body[data-play-ui] .wm-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--nx-s-6); }
body[data-play-ui] .wm-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--nx-s-3); }
body[data-play-ui] .wm-secondary-stack { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--nx-length-320px)),1fr)); gap:var(--nx-s-4); }
body[data-play-ui] .wm-sites[data-play-layout="compact"] { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--nx-s-2); }
body[data-play-ui] .wm-sites[data-play-layout="compact"] .wm-site-row { padding:var(--nx-s-4); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-md); background:var(--nx-surface); box-shadow:var(--nx-e-0); }
body[data-play-ui] .wm-sites[data-play-layout="card"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--nx-s-4); }
body[data-play-ui] .wm-sites[data-play-layout="card"] .wm-site-row { display:flex; flex-direction:column; align-items:stretch; gap:var(--nx-s-4); min-width:0; padding:var(--nx-s-5); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-lg); background:var(--nx-surface); }
body[data-play-ui] .wm-sites[data-play-layout="card"] .wm-site-right { display:flex; flex-direction:column; align-items:stretch; gap:var(--nx-s-3); margin-top:auto; }
body[data-play-ui] .wm-sites[data-play-layout="card"] .wm-site-actions { justify-content:flex-start; flex-wrap:wrap; }
body[data-play-ui] .wm-sites .wm-site-name { font-size:var(--nx-fs-body); font-weight:var(--nx-fw-semibold); }
body[data-play-ui] .wm-sites .wm-site-domain { overflow-wrap:anywhere; }
body[data-play-ui] #taskCollection { min-width:0; }
body[data-play-ui] #taskCollection .table { min-width:var(--nx-task-min-width); }
body[data-play-ui] #taskCollection .table th,body[data-play-ui] #taskCollection .table td { min-width:0; }
body[data-play-ui] #taskCollection .task-actions-cell .task-row-actions { flex-wrap:wrap; }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table { display:block; min-width:0; border:var(--nx-e-0); background:var(--nx-transparent); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table thead { position:absolute; width:var(--nx-border-width); height:var(--nx-border-width); overflow:hidden; clip-path:inset(50%); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table tbody { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--nx-s-4); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--nx-s-3); padding:var(--nx-s-5); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-lg); background:var(--nx-surface); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table td { display:block; min-width:0; padding:var(--nx-r-none); border:var(--nx-e-0); background:var(--nx-transparent); overflow-wrap:anywhere; }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table td::before { content:attr(data-label); display:block; margin-bottom:var(--nx-s-1); color:var(--nx-text-muted); font-size:var(--nx-fs-caption); font-weight:var(--nx-fw-normal); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table .task-primary-cell { grid-column:1/-1; padding-bottom:var(--nx-s-3); border-bottom:var(--nx-border-width) solid var(--nx-line); }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table .task-primary-cell::before { display:none; }
body[data-play-ui] #taskCollection[data-play-layout="card"] .table .task-actions-cell { grid-column:1/-1; padding-top:var(--nx-s-2); }
body[data-play-ui] #taskCollection .task-name { font-size:var(--nx-fs-body); }
body[data-play-ui] #taskCollection .task-command-preview { white-space:normal; overflow-wrap:anywhere; }

/* Node context stays near the rules. Switching nodes is a disclosure, not a second sidebar. */
body[data-play-ui].page-node .split-layout { display:flex; flex-direction:column; gap:var(--nx-s-4); }
body[data-play-ui].page-node .node-main { width:100%; min-width:0; }
body[data-play-ui].page-node .play-node-switcher { width:100%; min-width:0; border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-md); background:var(--nx-surface); }
body[data-play-ui].page-node .play-node-switcher > summary { display:flex; align-items:center; gap:var(--nx-s-3); min-height:var(--nx-touch-target); padding:var(--nx-s-2) var(--nx-s-4); cursor:pointer; list-style:none; color:var(--nx-text); font-size:var(--nx-fs-dense); }
body[data-play-ui].page-node .play-switcher-hint { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nx-text-muted); }
body[data-play-ui].page-node .node-sidebar { position:static; width:100%; max-width:none; max-height:var(--nx-length-400px); overflow:auto; padding:var(--nx-s-4); border:var(--nx-e-0); box-shadow:var(--nx-e-0); }
body[data-play-ui].page-node .node-subnav { position:sticky; top:var(--nx-topbar-height); z-index:var(--nx-z-sticky); display:flex; flex-wrap:nowrap; gap:var(--nx-s-1); max-width:100%; overflow-x:auto; padding:var(--nx-s-1); border-radius:var(--nx-r-md); background:var(--nx-surface); }
body[data-play-ui].page-node .node-subnav a { flex:none; min-height:var(--nx-touch-target); }
body[data-play-ui].page-node .node-detail-section { min-width:0; padding:var(--nx-s-5); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-lg); background:var(--nx-surface); }
body[data-play-ui].page-node .play-node-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--nx-s-3); }
body[data-play-ui].page-node .play-node-facts > div { min-width:0; padding:var(--nx-s-3); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-sm); background:var(--nx-surface-muted); }
body[data-play-ui].page-node .play-node-facts dt { color:var(--nx-text-muted); font-size:var(--nx-fs-caption); }
body[data-play-ui].page-node .play-node-facts dd { margin:var(--nx-s-1) var(--nx-r-none); color:var(--nx-text); font-size:var(--nx-fs-body); font-weight:var(--nx-fw-semibold); overflow-wrap:anywhere; }
body[data-play-ui].page-node .play-node-shortcuts { display:flex; flex-wrap:wrap; gap:var(--nx-s-2); margin-top:var(--nx-s-4); }

/* Settings: master/detail navigation. Effective configuration is secondary reference. */
body[data-play-ui].page-settings .settings-console { display:grid; grid-template-columns:var(--nx-settings-nav-width) minmax(0,1fr); align-items:start; gap:var(--nx-s-6); }
body[data-play-ui].page-settings .play-settings-launchpad { position:sticky; top:var(--nx-scroll-offset); min-width:0; }
body[data-play-ui].page-settings .play-settings-map { display:grid; gap:var(--nx-s-1); }
body[data-play-ui].page-settings .play-settings-choice { display:grid; gap:var(--nx-s-1); min-height:var(--nx-touch-target); padding:var(--nx-s-3); border:var(--nx-border-width) solid var(--nx-transparent); border-radius:var(--nx-r-sm); background:var(--nx-transparent); color:var(--nx-text-2); text-decoration:none; line-height:var(--nx-lh-body); }
body[data-play-ui].page-settings .play-settings-choice strong { font-size:var(--nx-fs-body); font-weight:var(--nx-fw-medium); }
body[data-play-ui].page-settings .play-settings-choice span { color:var(--nx-text-muted); font-size:var(--nx-fs-caption); font-weight:var(--nx-fw-normal); }
body[data-play-ui].page-settings .play-settings-choice.active { border-color:var(--nx-transparent); background:var(--nx-brand-bg); color:var(--nx-brand); }
body[data-play-ui].page-settings .settings-main { width:100%; max-width:var(--nx-content-reading-width); }
body[data-play-ui].page-settings .settings-card { padding:var(--nx-s-6); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-lg); background:var(--nx-surface); }
body[data-play-ui].page-settings .settings-field .label { color:var(--nx-text-2); font-size:var(--nx-fs-dense); }
body[data-play-ui].page-settings .play-settings-current { grid-column:2; min-width:0; max-width:var(--nx-content-reading-width); padding:var(--nx-s-4); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-md); background:var(--nx-surface); }
body[data-play-ui].page-settings .play-settings-current > summary { min-height:var(--nx-control-xs); color:var(--nx-text-muted); font-size:var(--nx-fs-dense); cursor:pointer; }
body[data-play-ui].page-settings .play-settings-current .settings-status-strip { display:grid; margin-top:var(--nx-s-4); }
body[data-play-ui].page-settings .settings-side-kv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--nx-s-4); }
body[data-play-ui].page-settings .settings-action-inner { max-width:var(--nx-content-reading-width); margin:var(--nx-r-none) auto; }
body[data-play-ui].page-settings .settings-bottom-pad { height:var(--nx-dock-reserve); }

/* Calm, bounded feedback. No staggered dashboard entrance or moving live metrics. */
@keyframes workspace-panel-enter { from { opacity:var(--nx-opacity-hidden); } to { opacity:var(--nx-opacity-visible); } }
body[data-play-ui] .settings-panel:not([hidden]),body[data-play-ui] .node-detail-section[role="tabpanel"]:not([hidden]),body[data-play-ui] #workspaceJump[open] { animation:workspace-panel-enter var(--nx-motion-enter) var(--nx-ease-standard); }
@media (hover:hover) {
  .play-view-switch button:not([aria-pressed="true"]):hover { color:var(--nx-text); background:var(--nx-surface); }
  body[data-play-ui].page-settings .play-settings-choice:not(.active):hover { background:var(--nx-surface-muted); }
}
@media (max-width:1250px) {
  body[data-play-ui] .wm-sites[data-play-layout="card"],body[data-play-ui] #taskCollection[data-play-layout="card"] .table tbody { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  body[data-play-ui].page-settings .settings-console { grid-template-columns:minmax(0,1fr); gap:var(--nx-s-4); }
  body[data-play-ui].page-settings .play-settings-launchpad { position:static; }
  body[data-play-ui].page-settings .play-settings-map { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-play-ui].page-settings .play-settings-choice { display:flex; justify-content:center; align-items:center; padding:var(--nx-s-2); border-color:var(--nx-line); background:var(--nx-surface); text-align:center; }
  body[data-play-ui].page-settings .play-settings-choice span { display:none; }
  body[data-play-ui].page-settings .play-settings-current { grid-column:1; }
  body[data-play-ui].page-node .play-node-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  body[data-play-ui].page-node .node-subnav { top:calc(var(--nx-topbar-mobile-height) + env(safe-area-inset-top)); }
  body[data-play-ui].page-settings .settings-action-dock { left:0; bottom:calc(var(--nx-s-12) + var(--nx-s-6) + env(safe-area-inset-bottom)); padding:var(--nx-s-2) var(--nx-s-3); }
  body[data-play-ui] #taskCollection .table { min-width:0; }
}
@media (max-width:640px) {
  body[data-play-ui][data-nx-ui] .play-page-head { flex-direction:column; gap:var(--nx-s-3); }
  body[data-play-ui] .play-page-head > .right { align-self:stretch; justify-content:flex-start; }
  body[data-play-ui] .wm-sites[data-play-layout="card"],body[data-play-ui] #taskCollection[data-play-layout="card"] .table tbody { grid-template-columns:minmax(0,1fr); }
  body[data-play-ui].page-settings .settings-card { padding:var(--nx-s-4); }
  body[data-play-ui].page-settings .settings-side-kv { grid-template-columns:minmax(0,1fr); }
  body[data-play-ui].page-settings .play-settings-choice strong { font-size:var(--nx-fs-dense); }
  body[data-play-ui].page-node .node-detail-section { padding:var(--nx-s-4); }
  body[data-play-ui].page-node .play-node-shortcuts { flex-direction:column; }
  body[data-play-ui] .play-onboarding-guide { grid-template-columns:minmax(0,1fr); }
}
@media (pointer:coarse) {
  .play-view-switch button { min-height:var(--nx-touch-target); }
}
@media (prefers-reduced-motion:reduce) {
  body[data-play-ui] .settings-panel:not([hidden]),body[data-play-ui] .node-detail-section[role="tabpanel"]:not([hidden]),body[data-play-ui] #workspaceJump[open] { animation:none; }
  .play-view-switch button { transition:none; }
}
:root[data-reduced-motion="1"] body[data-play-ui] .settings-panel,:root[data-reduced-motion="1"] body[data-play-ui] .node-detail-section,:root[data-reduced-motion="1"] body[data-play-ui] #workspaceJump { animation:none; }
:root[data-reduced-motion="1"] .play-view-switch button { transition:none; }

body[data-play-ui].page-node .play-node-intro h2 { margin:var(--nx-r-none); font-size:var(--nx-fs-title); font-weight:var(--nx-fw-semibold); line-height:var(--nx-lh-title); }
body[data-play-ui].page-node .play-node-intro p { margin:var(--nx-s-2) var(--nx-r-none); color:var(--nx-text-muted); }
body[data-play-ui].page-node .play-node-shortcuts a { flex:1; display:grid; gap:var(--nx-s-2); min-width:0; padding:var(--nx-s-4); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-sm); color:var(--nx-text); text-decoration:none; }
body[data-play-ui].page-node .play-node-shortcuts a:hover { border-color:var(--nx-line-strong); background:var(--nx-surface-muted); }
body[data-play-ui].page-node .play-node-shortcuts strong { font-size:var(--nx-fs-body); font-weight:var(--nx-fw-semibold); }
body[data-play-ui].page-node .play-node-shortcuts span { color:var(--nx-text-muted); font-size:var(--nx-fs-caption); }
.play-onboarding-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--nx-s-3); }
.play-onboarding-guide > div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--nx-s-1) var(--nx-s-2); padding:var(--nx-s-3); border:var(--nx-border-width) solid var(--nx-line); border-radius:var(--nx-r-sm); background:var(--nx-surface); }
.play-onboarding-guide b { grid-row:1/3; color:var(--nx-text-muted); font-size:var(--nx-fs-body); }
.play-onboarding-guide strong { font-size:var(--nx-fs-dense); font-weight:var(--nx-fw-medium); }
.play-onboarding-guide span { color:var(--nx-text-muted); font-size:var(--nx-fs-caption); }
body[data-play-ui].page-remote-control .remote-stage { border-radius:var(--nx-r-none); box-shadow:var(--nx-e-0); }