/* Shared site chrome: fonts, colour tokens, header and footer for both public sites.
   Palette: Cockpit clients/web/src/index.css. */
@font-face { font-family: "TPC Sans"; src: url('/site-assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: "TPC Sans"; src: url('/site-assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: "TPC Display"; src: url('/site-assets/fonts/IBMPlexSansCondensed-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: "TPC Mono"; src: url('/site-assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  color-scheme: light;
  --ui-bg: #f4efe6;
  --ui-panel: #faf6ef;
  --ui-hover: #efe7d9;
  --ui-line: #ddd2bf;
  --ui-line-strong: #c4b398;
  --ui-text: #3a342b;
  --ui-strong: #221e18;
  --ui-muted: #6b6152;
  --ui-accent: #9c4f08;
  --ui-focus: #e07b1c;
  --ui-tint: #f6e6cf;
  --ui-input: #fffdf8;
  --ui-input-border: #b9ad99;
  --ui-danger: #b8402f;
  --ui-success: #2f7d45;
  --ui-button-text: #fffdf8;
  --font-sans: "TPC Sans", system-ui, sans-serif;
  --font-mono: "TPC Mono", ui-monospace, monospace;
  --font-display: "TPC Display", "TPC Sans", system-ui, sans-serif;
}
html.dark {
  color-scheme: dark;
  --ui-bg: #1d1d1a;
  --ui-panel: #24231f;
  --ui-hover: #2d2a23;
  --ui-line: #3c382f;
  --ui-line-strong: #5a4e3c;
  --ui-text: #cec7bb;
  --ui-strong: #e4dccf;
  --ui-muted: #a79e90;
  --ui-accent: #ffbd73;
  --ui-focus: #f08a24;
  --ui-tint: #2e261b;
  --ui-input: #2d2a23;
  --ui-input-border: #7e766b;
  --ui-danger: #ff8f82;
  --ui-success: #77c68d;
  --ui-button-text: #1d1d1a;
}

.container, .page { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 8px; background: var(--ui-panel); z-index: 1001; }
.skip-link:focus { top: 8px; }
/* Preview-harness label only; never present in production responses. */
.fixture-notice { padding: 6px 16px; background: var(--ui-tint); color: var(--ui-text); font: 400 13px/1.5 var(--font-sans); text-align: center; border-bottom: 1px solid var(--ui-line); }
.site-header, .site-footer { background: var(--ui-bg); color: var(--ui-text); font: 400 15px/1.5 var(--font-sans); }
.site-header :focus-visible, .site-footer :focus-visible, .skip-link:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
/* Header (identical markup on both sites) */
.site-header { border-bottom: 1px solid var(--ui-line); }
.site-header__inner { display: flex; align-items: center; min-height: 64px; gap: 28px; }
.brand-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-strong); font: 600 15px/1.5 var(--font-sans); letter-spacing: -.025em; text-decoration: none; }
.site-header__nav { display: flex; gap: 20px; align-items: center; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-muted); font: 400 14px/1.5 var(--font-sans); text-decoration: none; }
.nav-link:hover { color: var(--ui-accent); }
.nav-link.is-active { color: var(--ui-accent); box-shadow: inset 0 -2px var(--ui-accent); }
.site-header__actions { display: flex; margin-left: auto; gap: 8px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--ui-line); border-radius: 4px; color: var(--ui-text); cursor: pointer; }
.icon-button:hover { background: var(--ui-hover); }
.icon { width: 20px; height: 20px; }
.theme-icon--sun, .dark .theme-icon--moon { display: none; }
.dark .theme-icon--sun { display: block; }
.site-header__menu-toggle { display: none; }

/* Footer (identical markup on both sites) */
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-block: 16px 24px; color: var(--ui-muted); font-size: 12px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a { color: var(--ui-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 650px) {
  .container, .page { width: calc(100% - 32px); }
  .site-header__inner { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-block: 8px; }
  .site-header__nav { display: none; }
  .site-header__menu-toggle { display: inline-flex; }
  .site-header--menu-open .site-header__nav { display: flex; order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0 0; }
}
@media print {
  .site-header, .site-footer, .skip-link { display: none !important; }
}