/* Details that support the existing workspace. Media and editor surfaces keep
   their original compositing and layout; only navigation and controls move. */
.oko-experience {
  --detail-ink: color-mix(in srgb,var(--ink) 92%,var(--accent));
  --detail-line: color-mix(in srgb,var(--line) 78%,var(--accent) 22%);
  --detail-light: color-mix(in srgb,var(--accent) 5%,transparent);
  --detail-panel: color-mix(in srgb,var(--panel) 95%,var(--accent) 5%);
  --detail-motion: cubic-bezier(.22,.75,.22,1);
}
/* The shared mask is the sole rendered eye. Query-versioned fallback assets
   must obey the same rule as the unversioned SVG. */
.oko-experience :is(.brand,.visual-core,.gate-scan)>img[src^="/assets/oko-logo.svg?"] { display:none; }
.oko-experience .site-header {
  border-bottom-color:var(--detail-line);
  background:linear-gradient(90deg,var(--detail-light),transparent 34%),var(--bg);
}
.oko-experience .site-header .desktop-nav>a { position:relative; }
.oko-experience .site-header .desktop-nav>a::after {
  content:"";position:absolute;inset:auto 10px 3px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;transition:transform 180ms var(--detail-motion);
}
.oko-experience .site-header .desktop-nav>a:is(:hover,:focus-visible,[aria-current=page])::after { transform:scaleX(1); }
.oko-experience .workspace-main { min-width:0; }
.oko-experience .experience-workspace-heading {
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-start;
  gap:18px;flex-wrap:wrap;padding:24px clamp(19px,3vw,34px) 25px;
  border:1px solid var(--line);border-radius:14px;background:
    linear-gradient(105deg,var(--detail-light),transparent 56%),var(--panel);
}
.oko-experience .experience-workspace-heading::after {
  content:"";position:absolute;z-index:-1;inset:0 0 0 43%;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 31px,var(--line) 31px 32px),
    repeating-linear-gradient(0deg,transparent 0 31px,var(--line) 31px 32px);
  mask-image:linear-gradient(90deg,transparent,black 94%);opacity:.36;
}
.oko-experience .experience-workspace-heading::before {
  content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:linear-gradient(transparent 12%,var(--accent) 47%,transparent 88%);
}
.oko-experience .experience-workspace-heading h1 { color:var(--detail-ink);line-height:1.05; }
.oko-experience .experience-workspace-heading :is(.eyebrow,.experience-location) { letter-spacing:.09em; }
.oko-experience .experience-workspace-heading .experience-location { color:var(--accent); }
.oko-experience :is(.workspace-rail,.cabinet-sidebar) {
  background:linear-gradient(165deg,var(--detail-light),transparent 250px),var(--bg);
}
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav { gap:7px; }
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button) {
  position:relative;
  min-height:46px;
  padding:11px 12px;
  gap:10px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:13px;
  line-height:1.35;
  white-space:normal;
}
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button) > .icon {
  display:block;
  flex:none;
  width:18px;
  height:18px;
}
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button) > span {
  min-width:0;
  overflow-wrap:anywhere;
}
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button):is(.active,.is-active,[aria-current="page"]) {
  background:var(--accent-soft);
  border-color:var(--accent-line,var(--line));
  color:var(--accent);
}
.oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button):is(.active,.is-active,[aria-current="page"])::before {
  content:"";position:absolute;inset:10px auto 10px 0;width:2px;border-radius:2px;background:var(--accent);
}
@media (width > 760px) {
  .oko-experience :is(.workspace-layout,.cabinet-dashboard) { grid-template-columns:224px minmax(0,1fr); }
  .oko-experience :is(.workspace-rail,.cabinet-sidebar) { padding-inline:13px; }
}
.oko-experience :is(.experience-module,.experience-contact-card,.experience-mobile-options>a,.dashboard-card,.news-entry-card,.gate-console) {
  position:relative;border-color:var(--line);background:
    linear-gradient(155deg,var(--detail-light),transparent 45%),var(--panel);
}
.oko-experience :is(.experience-module,.experience-contact-card,.experience-mobile-options>a,.dashboard-card,.news-entry-card,.gate-console)::before {
  content:"";position:absolute;inset:-1px auto auto 18px;width:36px;height:1px;
  background:var(--detail-line);pointer-events:none;
}
.oko-experience :is(.experience-symbol,.preview-rail>span,.broadcast-gate-mark) {
  border:1px solid color-mix(in srgb,var(--accent) 19%,var(--line));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent);
}
.oko-experience .experience-section-heading { border-bottom:1px solid var(--line);padding-bottom:20px; }
.oko-experience .experience-preview { box-shadow:0 20px 52px #0005; }
.oko-experience .experience-preview .preview-title { background:linear-gradient(100deg,var(--detail-light),transparent 57%); }
.oko-experience .experience-module-meta { border-top-color:var(--detail-line); }
.oko-experience .experience-page-index {
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px;margin-block:4px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
}
.oko-experience .experience-page-index>a {
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 13px;
  border:1px solid transparent;border-radius:8px;font-size:13px;color:var(--muted);
  transition:background 160ms var(--detail-motion),border-color 160ms var(--detail-motion),color 160ms var(--detail-motion);
}
.oko-experience .experience-page-index>a>span { color:var(--subtle);font-size:11px;font-variant-numeric:tabular-nums; }
.oko-experience .experience-page-index>a:is(:hover,[aria-current=location]) { background:var(--accent-soft);border-color:var(--detail-line);color:var(--ink); }
.oko-experience [data-oko-section] { scroll-margin-block-start:105px; }
.oko-experience .experience-mobile-options>a { border-left:2px solid var(--detail-line); }
.oko-experience .experience-phone { box-shadow:0 22px 54px #0006; }
.oko-experience .experience-phone-screen { background:
  radial-gradient(ellipse at 50% 39%,var(--detail-light),transparent 65%),var(--bg); }
.oko-experience .experience-contact-help { border-top:1px solid var(--detail-line); }
.oko-experience :is(.auth-gateway-panel,.auth-intro,.cabinet-sidebar) { border-color:var(--detail-line); }
.oko-experience .auth-gateway-panel { box-shadow:0 20px 50px #0003,inset 0 1px 0 #ffffff0d; }
.oko-experience .auth-mode-tabs { border:1px solid var(--line);padding:5px;border-radius:11px; }
.oko-experience .auth-input-control:focus-within { box-shadow:0 0 0 2px var(--accent-soft); }
.oko-experience .dashboard-metrics>div { position:relative;overflow:hidden; }
.oko-experience .dashboard-metrics>div::after {
  content:"";position:absolute;inset:auto 16px 0;height:1px;
  background:linear-gradient(90deg,var(--detail-line),transparent);pointer-events:none;
}
.oko-experience .forum-toolbar,.oko-experience .news-filters {
  padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
}
.oko-experience .forum-board { border-left:2px solid transparent; }
.oko-experience .forum-board:is(:hover,:focus-visible) { border-left-color:var(--accent); }
.oko-experience .forum-board-icon { border:1px solid var(--detail-line); }
.oko-experience .forum-rich-editor { border-radius:13px; }
.oko-experience .forum-editor-head { border-bottom-color:var(--detail-line); }
.oko-experience .chat-channel-rail,.oko-experience .chat-context-rail { background:
  linear-gradient(150deg,var(--detail-light),transparent 180px),var(--panel); }
.oko-experience .chat-panel-head { border-bottom-color:var(--detail-line); }
.oko-experience .chat-composer { box-shadow:inset 0 1px 0 #ffffff0d; }
.oko-experience .chat-mobile-channel-switch { border-color:var(--detail-line); }
.oko-experience .news-entry-card header { border-bottom:1px solid var(--line);padding-bottom:11px; }
.oko-experience .news-entry-card footer { border-top:1px solid var(--line);padding-top:11px; }
.oko-experience .gate-console-head { border-bottom-color:var(--detail-line); }
.oko-experience .broadcast-toolbar { background:linear-gradient(90deg,var(--detail-light),transparent 50%),var(--panel); }
.oko-experience .broadcast-counters>span+span { border-left:1px solid var(--line);padding-left:18px; }
.oko-experience .broadcast-search:focus-within { border-color:var(--detail-line); }
.oko-experience :is(.direction-heading,.direction-toggle) { box-shadow:inset 2px 0 0 var(--detail-line); }
.oko-experience .broadcast-player-header { border-color:var(--detail-line); }
.oko-experience .broadcast-player-telemetry { background:var(--panel);border-color:var(--line); }
.oko-experience .site-footer { border-top-color:var(--detail-line); }

@media (max-width:760px) {
  .oko-experience .experience-workspace-heading { padding:20px 17px 22px;gap:13px; }
  .oko-experience .experience-workspace-heading::after { inset-inline-start:34%;opacity:.24; }
  .oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button) {
    flex:none;
    min-height:44px;
    padding:10px 12px;
    gap:8px;
    font-size:12px;
    white-space:nowrap;
  }
  .oko-experience :is(.workspace-rail,.cabinet-sidebar) nav > :is(a,button):is(.active,.is-active,[aria-current="page"])::before {
    inset-block:8px;
  }
  .oko-experience .broadcast-counters>span+span { padding-left:12px; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .oko-experience :is(.experience-mobile-options>a,.forum-board,.news-entry-card,.rail-platform) {
    transition:border-color 170ms var(--detail-motion),box-shadow 170ms var(--detail-motion),translate 170ms var(--detail-motion);
  }
  .oko-experience :is(.experience-mobile-options>a,.forum-board,.news-entry-card,.rail-platform):hover {
    border-color:var(--detail-line);box-shadow:0 8px 22px #0002;translate:0 -2px;
  }
}
@media (prefers-reduced-motion:no-preference) {
  .oko-detail-arrive { animation:oko-detail-arrive 250ms var(--detail-motion) both; }
  @keyframes oko-detail-arrive { from { opacity:.58;translate:0 6px; } to { opacity:1;translate:0; } }
}
@media (prefers-reduced-motion:reduce) {
  .oko-experience .site-header .desktop-nav>a::after,.oko-experience .experience-page-index>a { transition:none; }
}