/* Product navigation is shared; workspace controls retain their own layouts. */
.app-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: var(--control-radius);
  transform: translateY(calc(-100% - 16px));
}
.app-skip-link:focus { transform: none; }
.app-shell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  width: 100%;
  height: auto;
  min-height: 80px;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}
.app-shell .app-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font: 700 19px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.5px;
  text-decoration: none;
}
.app-shell .brand-name { overflow-wrap: anywhere; }
.app-shell .brand .mark {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  letter-spacing: -1px;
}
.app-shell .engine-logo { max-width: 64px; max-height: 36px; object-fit: contain; }
.app-shell [hidden] { display: none !important; }
.app-shell .app-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
.app-shell .app-nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  color: var(--muted);
  background: transparent;
  font: 600 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
}
.app-shell .app-nav-link span { display:inline; opacity: 1; font: inherit; }
.app-shell .app-nav-link .app-settings-icon { font-size: 20px; line-height: 1; }
.app-shell .app-nav-link:hover { color: var(--text); background: var(--desk-raised); }
.app-shell .app-nav-link[aria-current="page"] {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.app-shell .app-utilities { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.app-shell .connection { font-size: 12px; }
.has-app-shell .shell { display: block; }
.has-app-shell .shell > aside,
.has-app-shell .shell > main > header,
.has-app-shell .desk-console-header,
.has-app-shell .pilot-header .eyebrow,
.has-app-shell .pilot-header .page-navigation { display: none; }
.has-app-shell .pilot-header { position: static; }
.has-app-shell .pilot-header .header-actions { width: auto; }
.owner-app > main { padding-top: 32px; }
.settings-session { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.settings-session p { margin: 0; }
.settings-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 0; border: 0; }
.settings-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--control-radius); }
@media (max-width: 700px) {
  .app-shell { gap: 12px; padding: 14px 16px; }
  .app-shell .app-brand { font-size: 17px; }
  .app-shell .app-navigation { order: 3; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  [data-app-shell="remote"] .app-shell .app-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell .app-nav-link { padding: 8px 4px; font-size: 12px; gap: 4px; }
  .app-shell .app-nav-link .app-settings-icon { font-size: 17px; }
  .app-shell .connection { display: none; }
  .owner-app > main { padding-top: 24px; }
}
@media (max-width: 380px) {
  .app-shell .app-brand { flex: 1 1 100%; }
  .app-shell .app-utilities { margin-left: 0; }
}

/* Compact product chrome; tool-specific hierarchy starts below this header. */
.app-shell { min-height:64px; padding:10px 20px; gap:12px 28px; }
.app-shell .app-brand { font-size:17px; letter-spacing:-.4px; }
.app-shell .app-nav-link { font-size:13px; padding:8px 12px; }
.app-shell .app-utilities { gap:8px; }
.app-shell button.theme-toggle { font-size:12px; padding:6px 10px; }
.app-shell .app-settings-icon { font-family:var(--desk-mono); }
.owner-app > main { max-width:1100px; }
.owner-app h2 { font-size:18px; letter-spacing:-.2px; }
.owner-app .card { border-radius:10px; }
.has-app-shell:not(.desk-app):not(.pilot-app):not(.rig-preview) .shell > main { max-width:1440px; margin:auto; }
@media(max-width:700px) {
 .app-shell { padding:10px 12px; gap:6px 12px; }
 .app-shell .app-nav-link { font-size:12px; padding:7px 4px; }
 .app-shell .app-brand { font-size:16px; }
 .app-shell .app-navigation { margin-top:4px; }
}

.owner-app > main { max-width:900px; }
.owner-app h1 { font-size:clamp(28px,4vw,40px); letter-spacing:-1px; }
.owner-app section { background:var(--panel); box-shadow:none; border-radius:10px; }
.owner-app summary { min-height:44px; padding:10px 0; }
.owner-app details { margin-top:16px; padding-top:12px; }
.owner-app .settings-group { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.owner-app .settings-group h2 { margin:0 0 6px; }
.owner-app .settings-description { margin:8px 0; font-size:13px; line-height:1.6; }
.owner-app .settings-hint { display:block; margin:5px 0 0 15px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.owner-app .settings-group > details { margin-top:12px; padding-top:4px; }
.owner-app .settings-shortcuts { margin-top:12px; gap:8px; }
.owner-app .settings-shortcuts a { text-decoration:none; font-size:13px; }
.owner-app .settings-shortcuts a:hover { background:var(--accent-soft); border-color:var(--accent-border); }
@media(min-width:1000px) {
 .owner-app > main { max-width:1120px; }
 .owner-app #account { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; align-items:start; }
 .owner-app #account > :not(.settings-group) { grid-column:1/-1; }
 .owner-app .settings-group[aria-labelledby="connection-heading"] { grid-row:span 2; }
}
.device-tasks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.device-tasks a { display:grid; align-content:start; gap:10px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); text-decoration:none; white-space:normal; }
.device-tasks a:hover { background:var(--accent-soft); border-color:var(--accent-border); }
.device-tasks strong { display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.device-tasks strong span { color:var(--accent); }
.device-tasks a > span { color:var(--muted); font-size:13px; line-height:1.6; }
.device-tasks a span { display:block; opacity:1; }
@media(max-width:700px) {
 .device-tasks { grid-template-columns:1fr; gap:10px; }
 .device-tasks a { padding:16px; gap:6px; }
 .owner-app .settings-group { padding:16px; margin-top:18px; }
 .owner-app #account { padding:16px; }
}
.rig-preview.has-app-shell { padding:0; }
.rig-preview.has-app-shell > header:not(.app-shell), .rig-preview.has-app-shell > details { padding:16px 20px; }
.rig-preview.has-app-shell > canvas { margin-inline:20px; width:calc(100% - 40px); }

/* Keep product navigation available while browsing long desktop/tablet workspaces. */
@media(min-width:701px) {
 .desk-app > .app-shell { position:sticky; top:0; z-index:40; }
 .desk-app #lighting { scroll-margin-top:var(--app-shell-height,64px); }
 .desk-app .desk-operating-strip { top:var(--app-shell-height,64px); }
 .desk-app .desk-console-nav { top:var(--app-shell-height,64px); height:calc(100dvh - var(--app-shell-height,64px)); }
 .desk-app #lighting .desk-workspace, .desk-app #desk-engine { scroll-margin-top:calc(var(--app-shell-height,64px) + var(--desk-strip-height,120px) + 14px); }
 .desk-app .studio-actions { top:calc(var(--app-shell-height,64px) + var(--desk-strip-height,120px)); }
}
@media(min-width:701px) and (max-width:1100px) {
 .desk-app .desk-console-nav { height:auto; }
}

/* Device is a status surface; lighting tasks have one home in Desk/Pilot. */
.device-dashboard #lighting { display:none !important; }
.device-dashboard .diagnostic-actions { display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.device-dashboard .diagnostic-actions a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.device-dashboard #device-diagnostics { scroll-margin-top:calc(var(--app-shell-height,64px) + 20px); }
.device-dashboard .setup-explainer { margin:16px 0; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.device-dashboard .setup-explainer summary { min-height:44px; align-content:center; font-weight:600; }
.device-dashboard .setup-explainer p { line-height:1.7; }
@media(max-width:700px) {
  .device-dashboard .diagnostic-actions { width:100%; margin:0; }
  .device-dashboard .diagnostic-actions a { flex:1; }
}

.device-sections { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.device-sections a { min-height:44px; display:inline-flex; align-items:center; padding:10px 16px; border:1px solid var(--line); border-radius:8px; color:var(--text); text-decoration:none; }
.device-sections a:hover { background:var(--accent-soft); border-color:var(--accent-border); }
.device-dashboard #addresses { max-height:17rem; overflow:auto; scrollbar-gutter:stable; }
.device-dashboard #overview, .device-dashboard #setup { scroll-margin-top:calc(var(--app-shell-height,64px) + 20px); }

.device-dashboard > .app-shell { position:sticky; top:0; z-index:30; }
.device-dashboard #addresses:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }