/* Shared workspace quality: tokens/keyboard/responsive, no feature ownership. */
:root { color-scheme: dark; --fg-3: #a8b3c0; }
:root[data-theme="light"] { color-scheme: light; --fg-3: #596372; }
.skip-navigation {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 1000;
  padding: 10px 16px; background: var(--bg-1); color: var(--fg);
  border: 2px solid var(--accent); border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-navigation:focus { transform: none; }
.side-head .logo { margin: 0; line-height: 0; }
.side-head .logo img { height: 30px; width: auto; display: block; }
#instance-policy-notice { flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; padding: 10px 16px; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); color: var(--fg); }
#workspace-destination { font: inherit; font-weight: 700; margin: 0; overflow-wrap: anywhere; min-width: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[data-route-root]:focus { outline-offset: -3px; }
.loop-form button, .loop-actions button, [data-panel-dialog] button, .dlg-btns button {
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer;
}
.loop-form button:hover, .loop-actions button:hover, [data-panel-dialog] button:hover, .dlg-btns button:hover { background: var(--bg-3); }
[role="dialog"] { max-width: 100%; }
[role="dialog"] .dlg, .login-card { max-height: calc(100dvh - 32px); overflow-y: auto; min-width: 0; }
[role="dialog"] p, [role="dialog"] h3 { overflow-wrap: anywhere; }
[role="dialog"] fieldset { min-width: 0; }
[role="dialog"] input:not([type="checkbox"]):not([type="radio"]), [role="dialog"] select, [role="dialog"] textarea { max-width: 100%; }
.toast { display: flex; align-items: start; gap: 12px; }
.toast span { overflow-wrap: anywhere; min-width: 0; }
.toast button { flex: 0 0 44px; min-height: 44px; color: var(--fg); background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
#toasts { max-width: min(440px, calc(100vw - 24px)); max-height: 40dvh; overflow-y: auto; }
.panel-chart-alternative { margin-block: 8px; }
.panel-chart-alternative summary { cursor: pointer; padding: 8px; }
.md-table-wrap[role="region"] { max-width: 100%; overflow: auto; }
.md-table-wrap caption { text-align: start; font-weight: 600; padding-block: 8px; }
@media (max-width: 800px) {
  /* Reserve touch layout; browser hit tests also reject clipping/occlusion.
     Extra space preserves a usable 44px region inside rounded controls. */
  #workspace-navigation-toggle, .loop-actions button, .loop-form button,
  .loop-filters button, .auto-ui button,
  button, .top-btn, .action-btn, .link-btn, .recent-more, .run-open, .side-tools,
  .icon-btn, .tool-btn, .kb-actions button, .home-refresh, .home-action, a.side-nav-item, .loop-actions a, .workspace-view-links a,
  .panel-csv, .panel-chart-alternative summary, .auto-ui a, .loop-card a {
    min-width: 48px; min-height: 48px;
  }
  button { max-width: 100%; white-space: normal; }
  .icon-btn, .top-btn, .tool-btn { width: auto; height: auto; }
  #sidebar .side-label button { padding: 6px; }
  .dlg-btns, .browse-actions, .mcp-actions, .skills-head, .panels-head,
  .graphs-head, .schedules-head, .kanban-head { flex-wrap: wrap; }
  .skills-head h2, .panels-head h2, .graphs-head h2, .schedules-head h2 { overflow-wrap: anywhere; min-width: 0; }
  #topbar .tb-group { flex: 1 1 0; min-width: 0; }
  #top-project { width: 100%; min-width: 0; }
  input, select, textarea { font-size: 16px; }
  [role="dialog"] .dlg { width: min(900px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  .login-card { width: calc(100vw - 24px); max-width: 420px; }
  .panel-chart { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Deterministic vector icons and chart marks: measurable solid foregrounds. */
svg.nav-icon, svg.quality-icon { width: 22px; height: 22px; flex: 0 0 22px; display: inline-block; vertical-align: middle; }
.panel-bar { fill: var(--fg-3); }
.panel-slice.s0 { fill: var(--accent); }
.panel-swatch.s0 { background: var(--accent); }
.panel-slice { stroke: var(--bg-1); stroke-width: 2; }