/* Shared navigation and test tools. Use real dimensions, never browser zoom. */
.site-compact-shell { --qg-chrome-offset: 78px; }
.site-compact-shell .site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.2vw, 20px);
  min-height: 64px;
  padding: 8px clamp(16px, 2.4vw, 38px);
}
.site-compact-shell .site-header .brand { gap: 9px; min-height: 44px; }
.site-compact-shell .site-header .brand-mark { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 5px 14px rgba(20, 61, 40, .08); }
.site-compact-shell .site-header .brand-text { font-size: 24px; }
.site-compact-shell .site-header .main-nav { min-width: 0; gap: 2px; flex-wrap: nowrap; }
.site-compact-shell .site-header .main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}
.site-compact-shell .site-header .main-nav a.active::after { width: 27px; height: 3px; bottom: 1px; }
.site-compact-shell .site-header .auth-nav { min-width: 0; gap: 5px; flex-wrap: nowrap; }
.site-compact-shell .site-header .auth-nav .btn {
  min-height: 38px;
  padding: 8px 12px;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  border-radius: 13px;
}
.site-compact-shell .site-header .hello-link {
  display: block;
  max-width: 20ch;
  min-height: 36px;
  padding: 9px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 18px;
}
.site-compact-shell .site-header .notifications-nav-link { gap: 5px; min-height: 36px; padding: 6px 7px; font-size: 12px; }
.site-compact-shell .site-header .notifications-nav-icon { width: 20px; height: 20px; font-size: 16px; }
.site-compact-shell .site-header .notifications-nav-badge { min-width: 19px; height: 19px; padding: 0 5px; font-size: 10px; }
.site-compact-shell .site-header a:focus-visible,
.site-compact-shell .test-sidebar button:focus-visible,
.site-compact-shell .test-sidebar a:focus-visible { outline: 3px solid #0b5ca8; outline-offset: 2px; }

/* Reserve a genuine rail for the absolutely positioned collapse button. */
.site-compact-shell .test-sidebar { padding: 16px; border-radius: 18px; scrollbar-width: thin; scrollbar-color: #b8c7b5 transparent; }
.site-compact-shell .test-sidebar h1 { padding-top: 0; margin: 0 0 12px; font-size: 24px; line-height: 1.17; overflow-wrap: anywhere; }
.site-compact-shell .test-sidebar p { margin: 10px 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.site-compact-shell .test-sidebar .back-link { display: flex; align-items: center; min-height: 40px; margin: 0 36px 12px 0; font-size: 13px; line-height: 1.3; }
.site-compact-shell .test-sidebar .tag-row { gap: 5px; margin: 10px 0; }
.site-compact-shell .test-sidebar .tag { max-width: 100%; padding: 5px 8px; font-size: 11px; overflow-wrap: anywhere; }
.site-compact-shell .test-sidebar .timer-card { padding: 12px; margin: 14px 0; border-radius: 15px; }
.site-compact-shell .test-sidebar .label { font-size: 10px; }
.site-compact-shell .test-sidebar .timer-display { margin: 5px 0 10px; font-size: 27px; line-height: 1.2; }
.site-compact-shell .test-sidebar .timer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.site-compact-shell .test-sidebar .timer-actions > :first-child { grid-column: 1 / -1; }
.site-compact-shell .test-sidebar .side-actions { gap: 7px; }
.site-compact-shell .test-sidebar .btn { min-height: 38px; padding: 9px 10px; font-size: 12px; line-height: 1.35; border-radius: 12px; white-space: normal; overflow-wrap: anywhere; }
.site-compact-shell .test-sidebar .sidebar-toggle {
  display: grid;
  place-items: center;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 13px;
  border-color: #b9cbb6;
  color: #17482f;
  font-size: 28px;
  background: #f1f6ed;
  box-shadow: 0 3px 9px rgba(23, 72, 47, .09);
  touch-action: manipulation;
}
.site-compact-shell .test-sidebar .sidebar-toggle:hover { border-color: #70966b; background: #e3eedc; }

@media (min-width: 901px) {
  .site-compact-shell .test-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 16px; }
  .site-compact-shell .test-sidebar { position: sticky; top: var(--qg-chrome-offset); max-height: calc(100vh - var(--qg-chrome-offset) - 16px); max-height: calc(100dvh - var(--qg-chrome-offset) - 16px); }
  .site-compact-shell .test-layout.sidebar-collapsed { grid-template-columns: 58px minmax(0, 1fr); }
  .site-compact-shell .test-layout.sidebar-collapsed .test-sidebar { min-height: 66px; padding: 6px; overflow: visible; border-radius: 16px; }
  .site-compact-shell .test-layout.sidebar-collapsed .test-sidebar-content { opacity: 0; visibility: hidden; pointer-events: none; width: 0; height: 0; overflow: hidden; }
  .site-compact-shell .test-layout.sidebar-collapsed .sidebar-toggle { top: 10px; left: 6px; right: auto; }
  .site-compact-shell.json-test-page .json-player-wrap:not(.is-expanded) .qgp-side { top: var(--qg-chrome-offset); max-height: calc(100dvh - var(--qg-chrome-offset) - 16px); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .site-compact-shell .test-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .site-compact-shell .test-sidebar { padding: 14px; }
  .site-compact-shell .test-sidebar h1 { font-size: 22px; }
}

@media (max-width: 1279px) {
  .site-compact-shell { --qg-chrome-offset: 122px; }
  .site-compact-shell .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
  .site-compact-shell .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-compact-shell .site-header .auth-nav { grid-column: 2; grid-row: 1; }
  .site-compact-shell .site-header .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
  .site-compact-shell .site-header .main-nav a { min-height: 40px; }
  .site-compact-shell .site-header .notifications-nav-label { display: none; }
}

@media (max-width: 900px) {
  .site-compact-shell .site-header { position: relative; padding: 8px 12px; }
  .site-compact-shell .site-header .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .site-compact-shell .site-header .brand-text { font-size: 21px; }
  .site-compact-shell .site-header .main-nav a { min-height: 44px; padding: 9px 11px; font-size: 14px; }
  .site-compact-shell .site-header .auth-nav .btn { min-height: 44px; padding: 9px 10px; font-size: 12px; }
  .site-compact-shell .site-header .hello-link { max-width: 14ch; min-height: 44px; padding: 13px 5px; }
  .site-compact-shell .site-header .notifications-nav-link { min-width: 44px; min-height: 44px; padding: 7px; }
  .site-compact-shell .site-header .notifications-nav-badge { position: absolute; top: 1px; right: 0; }
  .site-compact-shell .test-sidebar .sidebar-toggle { display: none; }
  .site-compact-shell .test-sidebar .back-link { min-height: 44px; margin-right: 0; font-size: 14px; }
  .site-compact-shell .test-sidebar .btn,
  .site-compact-shell .test-sidebar .share-panel > * { min-height: 44px; font-size: 14px; }
  .site-compact-shell .test-sidebar .tag { min-height: 36px; display: inline-flex; align-items: center; font-size: 12px; }
  .site-compact-shell .test-sidebar p { font-size: 14px; }
}

@media (max-width: 600px) {
  .site-compact-shell .site-header { gap: 4px 8px; }
  .site-compact-shell .site-header .brand { min-width: 44px; }
  .site-compact-shell .site-header .brand-text { display: none; }
  .site-compact-shell .site-header .auth-nav { gap: 3px; }
  .site-compact-shell .site-header .hello-link { max-width: 13ch; }
}

@media (max-width: 380px) {
  .site-compact-shell .site-header .hello-link { max-width: 9ch; }
  .site-compact-shell .site-header .auth-nav .btn { padding-left: 8px; padding-right: 8px; }
}

@media (pointer: coarse) {
  .site-compact-shell .site-header .main-nav a,
  .site-compact-shell .site-header .auth-nav .btn,
  .site-compact-shell .site-header .notifications-nav-link { min-height: 44px; }
  .site-compact-shell .site-header .notifications-nav-link { min-width: 44px; }
  .site-compact-shell .site-header .hello-link { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .site-compact-shell .test-sidebar .btn,
  .site-compact-shell .test-sidebar .back-link,
  .site-compact-shell .test-sidebar .tag,
  .site-compact-shell .test-sidebar .share-panel > * { min-height: 44px; }
  .site-compact-shell .test-sidebar .tag { display: inline-flex; align-items: center; }
}