/* Sayram Operations UI contract. Bundled by each owning service; no runtime CDN. */
:root {
  color-scheme: light;
  --ops-bg:#f7f8fa; --ops-surface:#fff; --ops-soft:#f0f2f5;
  --ops-hover:#e9edf3; --ops-text:#172033; --ops-muted:#596579;
  --ops-border:#d6dbe4; --ops-border-strong:#a2adbe;
  --ops-accent:#2459d3; --ops-accent-hover:#1948b7; --ops-selected:#e8efff;
  --ops-link:#1d4ed8; --ops-danger:#b42318; --ops-success:#16704b;
  --ops-warning:#855200; --ops-focus:#2563eb; --ops-on-accent:#fff;
  --ops-sidebar:244px; --ops-control:36px; --ops-radius:4px;
  --ops-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ops-bg:#141414; --ops-surface:#181818; --ops-soft:#222;
  --ops-hover:#2a2a2a; --ops-text:#ededed; --ops-muted:#b3b3b3;
  --ops-border:#333; --ops-border-strong:#666;
  --ops-accent:#455fca; --ops-accent-hover:#3652bd; --ops-selected:#252e4b;
  --ops-link:#9bafff; --ops-danger:#f08888; --ops-success:#79c3a1;
  --ops-warning:#e5b45d; --ops-focus:#9bafff;
}
@media (pointer:coarse), (max-width:760px) { :root { --ops-control:44px; } }
@media (forced-colors:active) {
  :root,:root[data-theme="dark"] { --ops-bg:Canvas;--ops-surface:Canvas;--ops-soft:Canvas;--ops-hover:Canvas;--ops-text:CanvasText;--ops-muted:CanvasText;--ops-border:ButtonText;--ops-border-strong:ButtonText;--ops-accent:Highlight;--ops-selected:Canvas;--ops-link:LinkText;--ops-on-accent:HighlightText;--ops-focus:Highlight; }
}
body[data-ops-state="checking"] [data-session-protected],
body[data-ops-state="unavailable"] [data-session-protected],
body[data-ops-state="checking"] dialog,
body[data-ops-state="unavailable"] dialog { visibility:hidden; }
.ops-session-notice { position:fixed; inset:0; z-index:2147483647; display:grid; place-content:center; padding:24px; background:var(--ops-bg); color:var(--ops-text); font:14px/1.6 var(--ops-font); }
.ops-session-notice>div { width:min(100%,480px); }
.ops-session-notice h1 { font-size:24px; margin:0 0 12px; }
.ops-session-notice p { max-width:48ch; }
.ops-session-notice button,.ops-session-notice a { display:inline-flex; min-height:44px; align-items:center; padding:8px 16px; border:1px solid var(--ops-accent); border-radius:4px; background:var(--ops-accent); color:var(--ops-on-accent); font:inherit; cursor:pointer; text-decoration:none; }
.ops-session-notice :focus-visible { outline:3px solid var(--ops-focus);outline-offset:4px; }

/* Canonical Operations shell. All modules use this DOM contract and these
   scoped rules; page styles must not implement another sidebar. */
.ops-shell { display:grid; grid-template-columns:var(--ops-sidebar) minmax(0,1fr); gap:0; min-width:0; min-height:100dvh; margin:0; }
.ops-content { min-width:0; }
.ops-sidebar,.ops-sidebar *,.ops-sidebar *::before,.ops-sidebar *::after { box-sizing:border-box; }
.ops-sidebar [hidden] { display:none!important; }
.ops-sidebar {
  position:sticky; top:0; width:var(--ops-sidebar); height:100dvh; min-width:0; min-height:0;
  display:flex; flex-direction:column; gap:12px; overflow:hidden; margin:0; padding:16px 12px;
  border:0; border-right:1px solid var(--ops-border); border-radius:0;
  background:var(--ops-surface); color:var(--ops-text); box-shadow:none;
  font:400 13px/1.5 var(--ops-font); letter-spacing:normal; text-transform:none;
}
.ops-sidebar .ops-brand {
  display:flex; flex:0 0 auto; align-items:center; justify-content:flex-start; gap:10px;
  min-width:0; margin:0; padding:0 8px 12px; border:0; border-bottom:1px solid var(--ops-border);
  border-radius:0; background:transparent; color:var(--ops-text); text-decoration:none; box-shadow:none;
}
.ops-sidebar .ops-brand>img { display:block; flex:0 0 27px; width:27px; height:32px; margin:0; object-fit:contain; filter:none; }
:root[data-theme="dark"] .ops-sidebar .ops-brand>img { filter:invert(1); }
.ops-sidebar .ops-brand>span,.ops-sidebar .ops-identity { min-width:0; }
.ops-sidebar .ops-brand strong { display:block; margin:0; color:var(--ops-text); font:600 14px/1.5 var(--ops-font); overflow-wrap:anywhere; }
.ops-sidebar .ops-brand small,.ops-sidebar .ops-identity small { display:block; margin:0; color:var(--ops-muted); font:400 11px/1.5 var(--ops-font); }
.ops-sidebar .ops-sidebar-middle { display:flex; flex:1 1 auto; flex-direction:column; gap:12px; min-width:0; min-height:0; margin:0; padding:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ops-border-strong) transparent; }
.ops-sidebar .ops-sidebar-middle::-webkit-scrollbar { width:6px; background:transparent; }
.ops-sidebar .ops-sidebar-middle::-webkit-scrollbar-thumb { border-radius:4px; background:var(--ops-border-strong); }
.ops-sidebar .ops-nav { display:grid; flex:0 0 auto; align-self:stretch; gap:4px; width:100%; min-width:0; margin:0; padding:0; border:0; list-style:none; }
.ops-sidebar .ops-nav>a,.ops-sidebar .ops-account>a,.ops-sidebar .ops-account>button {
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  width:auto; min-width:0; min-height:36px; height:auto; margin:0; padding:7px 10px;
  border:1px solid transparent; border-radius:var(--ops-radius); background:transparent; color:var(--ops-muted);
  font:500 13px/1.5 var(--ops-font); letter-spacing:normal; text-align:left; text-transform:none;
  text-decoration:none; white-space:normal; overflow-wrap:anywhere; box-shadow:none; transform:none; cursor:pointer;
  transition:background-color .1s ease,color .1s ease,border-color .1s ease;
}
.ops-sidebar .ops-nav>a:hover,.ops-sidebar .ops-account>a:hover,.ops-sidebar .ops-account>button:hover { background:var(--ops-hover); color:var(--ops-text); }
.ops-sidebar .ops-nav>a[aria-current]:not([aria-current="false"]),.ops-sidebar .ops-account>a[aria-current]:not([aria-current="false"]) {
  color:var(--ops-link); background:var(--ops-selected); border-color:color-mix(in srgb,var(--ops-focus) 38%,var(--ops-border));
}
.ops-sidebar .ops-nav svg { display:block; flex:0 0 16px; width:16px; height:16px; margin:0; color:inherit; }
.ops-sidebar .ops-nav .ops-external { flex-basis:12px; width:12px; height:12px; margin-left:auto; }
.ops-sidebar .ops-scope { flex:0 0 auto; min-width:0; margin:0; padding:12px 8px; border:0; border-top:1px solid var(--ops-border); border-bottom:1px solid var(--ops-border); border-radius:0; background:transparent; }
.ops-sidebar .ops-scope-heading { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:0 0 10px; padding:0; }
.ops-sidebar .ops-scope-heading strong { color:var(--ops-text); font:600 12px/1.5 var(--ops-font); }
.ops-sidebar .ops-scope-heading>span { color:var(--ops-muted); font:400 12px/1.5 var(--ops-font); }
.ops-sidebar .ops-scope-fields { display:grid; gap:6px; min-width:0; margin:0; padding:0; border:0; background:transparent; }
.ops-sidebar .ops-scope-fields>label,.ops-sidebar .ops-scope-label { display:block; margin:0; padding:0; color:var(--ops-muted); font:500 11px/1.5 var(--ops-font); }
.ops-sidebar .ops-scope-fields>select,.ops-sidebar .ops-scope-value {
  display:block; width:100%; min-width:0; min-height:36px; height:36px; margin:0; padding:6px 8px;
  border:1px solid var(--ops-border-strong); border-radius:var(--ops-radius); background:var(--ops-surface); color:var(--ops-text);
  font:400 13px/1.5 var(--ops-font); letter-spacing:normal; text-transform:none; box-shadow:none;
}
.ops-sidebar .ops-scope-value { display:flex; align-items:center; height:auto; overflow-wrap:anywhere; }
.ops-sidebar .ops-scope p,.ops-sidebar .ops-scope [role="status"],.ops-sidebar .ops-scope [role="alert"] { margin:0; color:var(--ops-muted); font:400 12px/1.5 var(--ops-font); overflow-wrap:anywhere; }
.ops-sidebar .ops-scope [role="alert"] { color:var(--ops-danger); }
.ops-sidebar .ops-scope-retry { min-height:36px; margin:6px 0 0; padding:6px 10px; border:1px solid var(--ops-border-strong); border-radius:var(--ops-radius); background:var(--ops-surface); color:var(--ops-text); font:500 12px/1.5 var(--ops-font); cursor:pointer; }
.ops-sidebar .ops-account { display:grid; flex:0 0 auto; gap:2px; min-width:0; margin:0; padding:8px 0 0; border:0; border-top:1px solid var(--ops-border); border-radius:0; background:transparent; }
.ops-sidebar .ops-identity { margin:0; padding:4px 10px 8px; }
.ops-sidebar .ops-identity strong { display:block; margin:0; color:var(--ops-text); font:600 13px/1.5 var(--ops-font); overflow-wrap:anywhere; }
.ops-sidebar .ops-account>a>svg { display:block; flex:0 0 12px; width:12px; height:12px; margin:0 0 0 auto; color:inherit; }
.ops-sidebar .ops-theme { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; margin:0; padding:4px 10px; color:var(--ops-muted); font:400 12px/1.5 var(--ops-font); }
.ops-sidebar .ops-theme>select { display:block; flex:0 1 110px; width:110px; min-width:0; max-width:110px; min-height:36px; height:36px; margin:0; padding:4px 8px; border:1px solid var(--ops-border-strong); border-radius:var(--ops-radius); background:var(--ops-surface); color:var(--ops-text); font:400 12px/1.5 var(--ops-font); box-shadow:none; }
.ops-sidebar .ops-account>.ops-logout,.ops-sidebar .ops-account>.ops-logout:hover { color:var(--ops-danger); }
.ops-sidebar button:disabled,.ops-sidebar select:disabled { opacity:.6; cursor:wait; }
.ops-sidebar :focus-visible { outline:2px solid var(--ops-focus); outline-offset:2px; }
@media(max-width:800px) {
  .ops-shell { display:block; }
  .ops-sidebar { position:static; width:auto; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--ops-border); }
  .ops-sidebar .ops-sidebar-middle { min-height:auto; overflow:visible; }
  .ops-sidebar .ops-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-sidebar .ops-nav>a,.ops-sidebar .ops-account>a,.ops-sidebar .ops-account>button { min-height:44px; }
  .ops-sidebar .ops-scope { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; align-items:center; }
  .ops-sidebar .ops-scope-heading { display:grid; gap:2px; margin:0; }
  .ops-sidebar .ops-account { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
  .ops-sidebar .ops-identity { padding-bottom:4px; }
  .ops-sidebar .ops-theme>select,.ops-sidebar .ops-scope-fields>select,.ops-sidebar .ops-scope-value { min-height:44px; height:44px; }
}
@media(pointer:coarse) {
  .ops-sidebar .ops-nav>a,.ops-sidebar .ops-account>a,.ops-sidebar .ops-account>button,.ops-sidebar .ops-theme>select,.ops-sidebar .ops-scope-fields>select,.ops-sidebar .ops-scope-value,.ops-sidebar .ops-scope-retry { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .ops-sidebar * { transition:none; animation:none; scroll-behavior:auto; }
}