/* @sync PageHeaderSpec.lean — shared by workspace and library pages. */
:root { --page-content-gutter: var(--space-500); }
.kg-page-header {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 93px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-250) var(--page-content-gutter);
  background: var(--semantic-background-default);
  color: var(--semantic-text-primary);
  border-bottom: 1px solid var(--semantic-border-default);
}
.kg-page-header-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; line-height: 1.4; color: var(--semantic-text-secondary); }
.kg-page-header-breadcrumb a { color: inherit; text-decoration: none; }
.kg-page-header-breadcrumb a:hover { text-decoration: underline; }
.kg-page-header-breadcrumb strong { color: var(--semantic-text-primary); font-weight: 700; overflow-wrap: anywhere; }
.kg-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; }
.kg-page-header-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* One title contract for shared headers and existing page header layouts.
   Scoped to page titles: card, modal and printed-paper headings keep their hierarchy. */
.kg-page-heading,
.kg-page-header-title h1,
.kg-exam-header h1,
.kg-library-review-title-row h1,
.kg-library-variant-title-row h1,
.kg-library-title-group h1,
.kg-library-toolbar h1,
.kg-my-exams .kg-library-section-head h1,
.kg-account-header h1,
.kg-routing-page-head h1,
.kg-page-data > h1,
.kg-page-data > header > h1 {
  font-size: var(--text-style-title-small-font-size);
  line-height: 1.4;
  font-weight: var(--text-style-weight-bold);
  letter-spacing: 0;
  color: var(--semantic-text-primary);
  overflow-wrap: anywhere;
}
.kg-page-header-title h1 { margin: 0; }
.kg-page-header-back { display: inline-flex; flex: 0 0 28px; width: 28px; height: 32px; align-items: center; justify-content: center; border-radius: 6px; color: inherit; text-decoration: none; }
.kg-page-header-back svg { width: 24px; height: 24px; }
.kg-page-header-back:hover { background: var(--semantic-background-subtle); }
.kg-page-header-back:focus-visible { outline: 2px solid var(--semantic-text-brand); outline-offset: 2px; }
.kg-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.kg-page-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.kg-page-content > .kg-library-main { flex: 1; min-height: 0; }
@media (max-width: 1000px) { :root { --page-content-gutter: var(--space-250); } .kg-page-header-row { flex-wrap: wrap; } }
@media (max-width: 600px) { :root { --page-content-gutter: var(--space-200); } .kg-page-header { padding-block: var(--space-200); } .kg-page-header-actions { justify-content: flex-start; } }

/* Use the header gutter for each full-page content surface, including review lists.
   Panel interiors retain their own component spacing. */
.kg-page-content > .kg-library-main,
.kg-library-review-content .kg-library-review-browse,
.kg-library-variant-content > .kg-library-variant-body,
.kg-library-solution-page {
  padding-inline: var(--page-content-gutter);
}
.kg-ws > .kg-ws-content {
  width: min(800px, calc(100% - 2 * var(--page-content-gutter)));
  margin-inline: auto;
}