/* Review/staging UI additions: accessible navigation and honest, audit-only live view. */
.app-shell .sidebar,
.app-shell .main-content { transition: width .2s ease, margin-left .2s ease; }
.app-shell.sidebar-collapsed .sidebar { width: 74px !important; padding-left: 9px !important; padding-right: 9px !important; }
.app-shell.sidebar-collapsed .main-content { margin-left: 74px !important; }
.app-shell.sidebar-collapsed .brand { justify-content: center; padding-left: 4px; padding-right: 4px; }
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .workspace-label,
.app-shell.sidebar-collapsed .workspace-select,
.app-shell.sidebar-collapsed .nav-link > span:not(.nav-icon),
.app-shell.sidebar-collapsed .sidebar-help,
.app-shell.sidebar-collapsed .profile-copy,
.app-shell.sidebar-collapsed .more-btn { display: none !important; }
.app-shell.sidebar-collapsed .main-nav { align-items: center; }
.app-shell.sidebar-collapsed .nav-link { justify-content: center; width: 46px; padding: 0; }
.app-shell.sidebar-collapsed .sidebar-bottom > .nav-link { margin: 0 auto; }
.app-shell.sidebar-collapsed .profile { justify-content: center; }
.app-shell.sidebar-collapsed .nav-link[aria-label] { position: relative; }

body.toolbar-hidden .app-shell .topbar { display: none !important; }
.toolbar-restore { position: fixed; z-index: 60; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid #6b55a5; border-radius: 10px; background: rgba(13, 15, 25, .96); color: #e8e2ff; box-shadow: 0 8px 30px rgba(0,0,0,.35); font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.toolbar-restore span:first-child { font-size: 17px; color: #b49aff; }
.toolbar-restore:hover { border-color: #9d82ff; background: #191526; }
#sidebar-toggle, #toolbar-hide { min-width: 34px; min-height: 34px; }

.activity-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .8fr); gap: 14px; margin-top: 15px; }
.activity-stage { position: relative; min-height: 300px; overflow: hidden; display: grid; place-items: center; padding: 22px; border: 1px solid #252d42; border-radius: 14px; background: radial-gradient(ellipse at center, rgba(34, 63, 96, .28), transparent 64%), linear-gradient(145deg, #080b12, #0b1020 64%, #080b12); isolation: isolate; }
.activity-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .34; background-image: linear-gradient(rgba(77, 104, 139, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 104, 139, .12) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse, #000, transparent 77%); }
.activity-stage::after { content: ""; position: absolute; z-index: -1; width: min(58vw, 320px); aspect-ratio: 1; border: 1px solid rgba(112, 141, 192, .2); border-radius: 50%; box-shadow: 0 0 0 24px rgba(89, 119, 171, .035), 0 0 0 56px rgba(89, 119, 171, .025), inset 0 0 50px rgba(99, 132, 193, .08); }
.activity-stage-content { width: min(100%, 470px); text-align: center; }
.activity-stage-kicker { color: #8ba2ca; font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.6px; }
.activity-stage-state { display: inline-flex; align-items: center; gap: 8px; margin: 15px 0 8px; padding: 8px 12px; border: 1px solid #343b50; border-radius: 999px; background: rgba(7, 10, 17, .85); color: #b9c3d5; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.activity-stage-state i { width: 7px; height: 7px; border-radius: 50%; background: #7d8799; box-shadow: 0 0 0 4px rgba(125, 135, 153, .13); }
.activity-stage h2 { margin: 7px 0; color: #e8edf7; font-size: clamp(20px, 3vw, 28px); letter-spacing: -.6px; }
.activity-stage p { max-width: 410px; margin: 0 auto; color: #929db2; font-size: 12px; line-height: 1.7; }
.activity-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.activity-metric { padding: 12px; border: 1px solid #262d3e; border-radius: 10px; background: #0d111a; }
.activity-metric span { display: block; color: #8490a5; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; }
.activity-metric strong { display: block; margin-top: 6px; color: #dce5f5; font: 700 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.activity-side-note { padding: 16px; border: 1px solid #272e40; border-radius: 12px; background: linear-gradient(145deg, #101522, #0b0f17); }
.activity-side-note h2 { margin: 0 0 8px; color: #e5eaf4; font-size: 14px; }
.activity-side-note p, .activity-side-note li { color: #a4aec0; font-size: 11px; line-height: 1.65; }
.activity-side-note ul { padding-left: 17px; margin: 8px 0 0; }
.activity-side-note .system-note { margin-top: 12px; }
.activity-feed-panel { margin-top: 14px; }
.activity-feed { display: grid; gap: 0; }
.activity-event { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 12px 0; border-bottom: 1px solid #202737; }
.activity-event:last-child { border-bottom: 0; }
.activity-event-mark { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #7c8cac; box-shadow: 0 0 0 4px rgba(124, 140, 172, .1); }
.activity-event-mark.success { background: #50c5a8; box-shadow: 0 0 0 4px rgba(80, 197, 168, .1); }
.activity-event-mark.warning { background: #e6b05f; box-shadow: 0 0 0 4px rgba(230, 176, 95, .1); }
.activity-event-copy strong { display: block; color: #e1e7f0; font-size: 11px; }
.activity-event-copy small { display: block; margin-top: 4px; color: #929db2; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.activity-event time { color: #8390a6; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.activity-connection { display: inline-flex; align-items: center; gap: 7px; color: #8e9bb2; font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; text-transform: uppercase; }
.activity-connection::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #53c3a4; }
.activity-connection.error::before { background: #e08776; }

.lab-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 14px; margin-top: 14px; }
.lab-card { padding: 18px; border: 1px solid #272e40; border-radius: 12px; background: linear-gradient(145deg, #101522, #0b0f17); }
.lab-card h2 { margin: 0 0 8px; color: #e8edf7; font-size: 16px; }
.lab-card p, .lab-card li { color: #a2adbf; font-size: 11px; line-height: 1.7; }
.lab-card ul, .lab-card ol { padding-left: 19px; margin: 10px 0 0; }
.lab-warning { margin: 12px 0; padding: 12px; border: 1px solid rgba(235, 169, 88, .35); border-radius: 9px; background: rgba(117, 76, 25, .12); color: #e4c38e; font-size: 11px; line-height: 1.65; }
.lab-command { display: block; margin: 11px 0; padding: 12px; border: 1px solid #252d40; border-radius: 9px; background: #070a11; color: #b9d9e5; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.lab-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.lab-links a { color: #b9a7ff; font-size: 11px; font-weight: 650; text-decoration: none; }
.lab-links a:hover { text-decoration: underline; }
.lab-meta { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.lab-meta div { padding: 10px; border: 1px solid #242c3c; border-radius: 8px; background: #0c1119; }
.lab-meta span { display: block; color: #8d98ad; font-size: 9px; }
.lab-meta code { display: block; margin-top: 4px; color: #d8e1f0; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .app-shell.sidebar-collapsed .sidebar { width: 68px !important; }
  .app-shell.sidebar-collapsed .main-content { margin-left: 68px !important; }
  .activity-layout, .lab-grid { grid-template-columns: 1fr; }
  .activity-stage { min-height: 270px; }
}
@media (max-width: 560px) {
  .app-shell.sidebar-collapsed .sidebar { width: 58px !important; padding-left: 6px !important; padding-right: 6px !important; }
  .app-shell.sidebar-collapsed .main-content { margin-left: 58px !important; }
  .app-shell.sidebar-collapsed .nav-link { width: 42px; }
  .activity-event { grid-template-columns: 12px minmax(0, 1fr); }
  .activity-event time { grid-column: 2; }
  .toolbar-restore { top: 8px; right: 8px; }
  body.toolbar-hidden .page-wrap { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar, .app-shell .main-content { transition: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}