/* Shared Lab dark palette. */
html {
  --kkh-bg: #111512;
  --kkh-panel: #191f1a;
  --kkh-ink: #dce1d7;
  --kkh-muted: #a4afa2;
  --kkh-line: #343e35;
  --kkh-accent: #a0ad89;
  --kkh-font: "Segoe UI", "Malgun Gothic", sans-serif;
}

body {
  --color-primary: var(--kkh-accent);
  --color-primary-contrast: var(--kkh-bg);
  --color-primary-dark-1: #b3bf9d;
  --color-primary-light-1: #899674;
  --color-primary-light-2: #788665;
  --color-primary-light-4: #384234;
  --color-primary-light-5: #293228;
  --color-primary-alpha-20: #a0ad8933;
  --color-primary-alpha-50: #a0ad8980;
  --color-primary-hover: #b3bf9d;
  --color-primary-active: #c0cba9;
  --color-secondary: var(--kkh-line);
  --color-secondary-dark-1: #414d41;
  --color-secondary-dark-2: #505e50;
  --color-secondary-dark-3: #637263;
  --color-secondary-dark-4: #748374;
  --color-secondary-light-1: #2b332c;
  --color-secondary-light-2: #222b23;
  --color-secondary-light-3: var(--kkh-panel);
  --color-secondary-light-4: var(--kkh-bg);
  --color-secondary-alpha-40: #343e3566;
  --color-body: var(--kkh-bg);
  --color-box-header: var(--kkh-panel);
  --color-box-body: #151b16;
  --color-box-body-highlight: #222b23;
  --color-text-dark: #edf0e8;
  --color-text: var(--kkh-ink);
  --color-text-light: #c2cbbf;
  --color-text-light-1: #b3beb1;
  --color-text-light-2: var(--kkh-muted);
  --color-text-light-3: #929e90;
  --color-nav-bg: var(--kkh-bg);
  --color-nav-hover-bg: var(--kkh-panel);
  --color-footer: var(--kkh-bg);
  --color-secondary-nav-bg: var(--kkh-panel);
  --color-input-background: var(--kkh-bg);
  --color-input-toggle-background: #293228;
  --color-input-border: #637263;
  --color-hover: #a0ad891a;
  --color-hover-opaque: #242c24;
  --color-active: #a0ad892e;
  --color-menu: var(--kkh-panel);
  --color-card: var(--kkh-panel);
  --color-code-bg: var(--kkh-bg);
  --color-secondary-bg: #222b23;
  --color-accent: var(--kkh-accent);
  --color-small-accent: #384234;
  background: var(--kkh-bg);
  color: var(--kkh-ink);
}

body {
  font-family: var(--kkh-font);
}

/* The native Gitea shell also wraps the C-plan landing page. */
html body:has(.kkh-lab) #navbar { display: flex !important; }
html body:has(.kkh-lab) footer.page-footer { display: flex !important; }
.kkh-lab > :is(header, footer) { display: none; }
html body .full.height:has(> .kkh-lab) { display: flex; flex-direction: column; }
html body .full.height > .kkh-lab { min-height: 0; flex: 1 0 auto; }
html body #navbar {
  min-height: 52px;
  padding-inline: max(32px, calc((100% - 1480px) / 2));
  background: var(--color-body);
  border-bottom: 1px solid var(--color-secondary);
  font: 16px/1.48 var(--kkh-font);
}
html body #navbar-logo { gap: 9px; font-weight: 750; white-space: nowrap; }
html body #navbar :is(.navbar-left, .navbar-right) > .item {
  color: var(--color-text);
  border-radius: 4px;
}
html body #navbar :is(.navbar-left, .navbar-right) > .item:is(:hover, :focus-visible, [open]) {
  color: var(--color-text);
  background: var(--color-nav-hover-bg);
  text-decoration: none;
}
html body #navbar .navbar-left > .item.active {
  color: var(--color-primary);
  background: var(--color-nav-hover-bg);
  box-shadow: inset 0 -2px var(--color-primary);
}
#kkh-admin-about { display: none; }
#kkh-admin-about:target {
  display: block; position: fixed; z-index: 1000;
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(calc(100% - 32px), 420px);
  padding: 16px; margin: 0;
  background: var(--color-menu); color: var(--color-text);
  border: 1px solid var(--color-secondary); border-radius: 6px;
  box-shadow: 0 12px 40px #0008;
}
html body footer.page-footer {
  min-height: 41px;
  padding-inline: max(32px, calc((100% - 1480px) / 2));
  font: 14px/1.48 var(--kkh-font);
}
#navbar :is(a, button, summary):focus-visible, .page-footer :is(a, button):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  html body :is(#navbar, footer.page-footer) { padding-inline: 16px; }
}