/* ScriptSaver Kinetic App-Shell (Etappe 1, docs/design/app-kinetic/decision.md).
   Loaded after theme.css on every App page. styles.css styles the rail
   differently per shell (dashboard vs. document viewer) through many layered,
   partly !important rules; this file gives both shells one rail: the same
   section labels, link rhythm and active marker. Colors come only from the
   --k-* tokens in theme.css, so dark and light stay one design.

   Selectors start at the rail's id (#author-workspace-navigation) so they
   outrank the legacy ".target-document-shell .document-sidebar.author-
   workspace-sidebar ..." class chains, !important included, without a
   specificity race; sizing is limited to the expanded rail so the collapsed icon rail
   (html[data-workspace-sidebar-state="collapsed"], QL-091/QL-092) keeps its
   own geometry. */

#author-workspace-navigation {
  background: var(--k-surface) !important;
  border-right: 1px solid var(--k-line) !important;
}

/* Brand: the same document-with-accent mark as the public pages instead of
   the legacy "+" box (which the viewer shell rendered empty). */
#author-workspace-navigation .sidebar-brand::before {
  content: none !important;
  display: none !important;
}

#author-workspace-navigation .sidebar-brand {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: center !important;
}

#author-workspace-navigation .kinetic-brand-mark {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
}

#author-workspace-navigation .kinetic-brand-mark-ink {
  stroke: var(--k-text);
}

#author-workspace-navigation .kinetic-brand-mark-accent {
  fill: var(--k-accent);
}

#author-workspace-navigation .sidebar-brand .brand-wordmark {
  grid-column: 2;
  grid-row: 1;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

html[data-workspace-sidebar-state="collapsed"] #author-workspace-navigation .sidebar-brand {
  grid-template-columns: 1fr !important;
}

/* Section labels: one small monospace caption style for every group. */
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .sidebar-section-label {
  color: var(--k-muted) !important;
  font-family: var(--k-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  margin: 14px 12px 4px !important;
  padding: 0 !important;
}

html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .author-sidebar-primary-navigation > .sidebar-section-label:first-child {
  margin-top: 6px !important;
}

/* Links: one rhythm in both shells (34px rows, 14px text, 18px icons). The
   open project's sub-navigation keeps its compact legacy rows. */
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .author-sidebar-navigation .sidebar-link,
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation > .author-sidebar-account-settings {
  gap: 10px !important;
  min-height: 34px !important;
  margin: 0 0 2px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* An open project adds eight sub-entries; the rail then tightens to 28px
   rows (still above the 24px WCAG target size) so every entry stays visible
   and uncovered in a 900px viewport, as the browser smoke contract requires. */
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation:has(.sidebar-project-context) .author-sidebar-navigation .sidebar-link {
  min-height: 28px !important;
}

html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation:has(.sidebar-project-context) .sidebar-section-label {
  margin: 6px 12px 2px !important;
}

html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation:has(.sidebar-project-context) .author-sidebar-primary-navigation > .sidebar-section-label:first-child {
  margin-top: 2px !important;
}

#author-workspace-navigation .sidebar-link {
  border: 0 !important;
  border-radius: var(--k-radius-4) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--k-text) !important;
  font-weight: 600 !important;
}

#author-workspace-navigation .sidebar-link .material-symbols-outlined {
  color: var(--k-muted) !important;
}

html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .author-sidebar-navigation .sidebar-link .material-symbols-outlined,
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation > .author-sidebar-account-settings .material-symbols-outlined {
  flex: 0 0 20px !important;
  width: 20px !important;
  font-size: 18px !important;
}

#author-workspace-navigation .sidebar-link:hover,
#author-workspace-navigation .sidebar-link:focus-visible {
  background: var(--k-surface-2) !important;
}

#author-workspace-navigation .sidebar-link:focus-visible {
  outline: 2px solid var(--k-focus) !important;
  outline-offset: -2px !important;
}

/* Active: accent ink on a quiet accent wash with a 2px marker on the left. */
#author-workspace-navigation .sidebar-link.active,
#author-workspace-navigation .sidebar-link[aria-current="page"] {
  background: var(--stitch-sidebar-active) !important;
  box-shadow: inset 2px 0 0 var(--k-accent) !important;
  color: var(--k-accent) !important;
}

#author-workspace-navigation .sidebar-link.active .material-symbols-outlined,
#author-workspace-navigation .sidebar-link[aria-current="page"] .material-symbols-outlined {
  color: var(--k-accent) !important;
}

/* Account block: the KONTO label, then its settings link, then the account
   card. The viewer shell used to give every link order 0 but the label
   order 1, which put "Kontoeinstellungen" above its own label. */
#author-workspace-navigation .author-sidebar-account-label {
  order: 1;
}

html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .sidebar-section-label.author-sidebar-account-label {
  margin-top: auto !important;
}

#author-workspace-navigation .author-sidebar-account-settings {
  order: 1;
}

#author-workspace-navigation .author-sidebar-account {
  order: 2;
  border-top: 1px solid var(--k-line) !important;
}

/* Theme switcher: an icon button in the account card, left of logout, so it
   is on every App page (the author dashboard header stays bare by design). */
html:not([data-workspace-sidebar-state="collapsed"]) #author-workspace-navigation .author-sidebar-account {
  grid-template-columns: 30px minmax(0, 1fr) 26px 26px !important;
}