/* C01 — Brand / SiteNav / Footer */
.tk-site-header,
.tk-site-footer {
  border-block: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  background: var(--tk-color-surface);
}

.tk-site-header__inner,
.tk-site-footer__inner,
.tk-system__container {
  width: min(100%, var(--tk-layout-max));
  margin-inline: auto;
  padding: var(--tk-space-4) var(--tk-layout-gutter);
}

.tk-brand {
  display: inline-flex;
  min-height: var(--tk-control-min-size);
  align-items: center;
  color: var(--tk-color-text);
  font-family: var(--tk-font-display);
  font-size: var(--tk-type-item-size);
  font-weight: var(--tk-weight-bold);
  text-decoration: none;
}

.tk-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  align-items: center;
}

.tk-site-nav__link {
  display: inline-flex;
  min-height: var(--tk-control-min-size);
  align-items: center;
  padding-inline: var(--tk-space-3);
  border-radius: var(--tk-radius-control);
  color: var(--tk-color-text);
  text-decoration: none;
}

.tk-site-nav__link:hover { background: var(--tk-color-surface-muted); }
.tk-site-nav__link[aria-current="page"] {
  border: var(--tk-border-strong) solid var(--tk-color-selected-border);
  background: var(--tk-color-selected-surface);
}

/* C02 — Drawer */
.tk-drawer-backdrop {
  position: fixed;
  z-index: var(--tk-layer-backdrop);
  inset: 0;
  border: 0;
  background: var(--tk-color-overlay);
  cursor: default;
  opacity: 1;
  transition: opacity var(--tk-motion-duration-reveal) var(--tk-motion-ease);
}

.tk-drawer {
  position: fixed;
  z-index: var(--tk-layer-drawer);
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  width: var(--tk-layout-drawer);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-inline-start: var(--tk-border-strong) solid var(--tk-color-border);
  background: var(--tk-panel-background);
  box-shadow: var(--tk-shadow-drawer);
  transform: translateX(0);
  transition: transform var(--tk-motion-duration-reveal) var(--tk-motion-ease);
}

.tk-drawer-backdrop[data-tk-motion-stage="from"] { opacity: 0; }
.tk-drawer[data-tk-motion-stage="from"] { transform: translateX(var(--tk-motion-distance-reveal)); }

.tk-drawer__header,
.tk-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-3);
  padding: var(--tk-space-4);
}

.tk-drawer__header { border-block-end: var(--tk-border-thin) solid var(--tk-color-border-subtle); }
.tk-drawer__footer {
  flex-wrap: wrap;
  border-block-start: var(--tk-border-thin) solid var(--tk-color-border-subtle);
}

.tk-drawer__footer .tk-action {
  flex: 1 1 auto;
  min-inline-size: max-content;
}
.tk-drawer__body { overflow: auto; padding: var(--tk-space-4); }
.tk-drawer-locked { overflow: hidden; }

/* C03 — Breadcrumb / ReturnLink / CourseContext */
.tk-breadcrumb ol,
.tk-course-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-breadcrumb li:not(:last-child)::after {
  margin-inline-start: var(--tk-space-2);
  color: var(--tk-color-text-muted);
  content: "/";
}

.tk-return-link::before { content: "←"; margin-inline-end: var(--tk-space-2); }

/* C04 — SearchForm */
.tk-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tk-space-3);
}

.tk-search-form__field { min-width: 0; }

/* C05 — FilterPanel / LevelSelect */
.tk-filter-panel {
  display: grid;
  gap: var(--tk-space-5);
}

.tk-filter-panel--wide { display: none; }

.tk-filter-panel__group {
  margin: 0;
  padding: 0;
  border: 0;
}

.tk-filter-panel__options {
  display: grid;
  gap: var(--tk-space-2);
  margin-block-start: var(--tk-space-3);
}

.tk-choice {
  display: grid;
  min-height: var(--tk-control-min-size);
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tk-space-3);
  align-items: center;
  cursor: pointer;
}

.tk-choice input { width: 1.25rem; height: 1.25rem; margin: 0; }

/* C06 — AppliedFilters / Suggestions */
.tk-applied-filters,
.tk-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  align-items: center;
}

.tk-filter-chip {
  display: inline-flex;
  min-height: var(--tk-control-min-size);
  align-items: center;
  gap: var(--tk-space-2);
  padding: var(--tk-space-2) var(--tk-space-3);
  border: var(--tk-border-strong) solid var(--tk-color-selected-border);
  border-radius: var(--tk-radius-pill);
  background: var(--tk-color-selected-surface);
  color: var(--tk-color-text);
}

/* C07 — ResultsSummary / Sort / Pagination */
.tk-results-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-4);
  align-items: end;
  justify-content: space-between;
}

.tk-results-summary { margin: 0; }
.tk-pagination { display: flex; flex-wrap: wrap; gap: var(--tk-space-2); align-items: center; }
.tk-pagination__pages { display: flex; flex-wrap: wrap; gap: var(--tk-space-1); }

/* C08 — ResourceItem */
.tk-resource-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tk-space-4);
  padding: var(--tk-space-5);
  border: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  border-radius: var(--tk-radius-panel);
  background: var(--tk-color-surface);
}

.tk-resource-item:has(.tk-resource-item__title-link:hover) {
  border-color: var(--tk-color-action-hover);
}

.tk-resource-item__title-link { color: var(--tk-color-text); text-decoration-color: var(--tk-color-action); }
.tk-resource-item__actions { display: flex; flex-wrap: wrap; gap: var(--tk-space-2); align-items: center; }
.tk-resource-item__actions a,
.tk-resource-item__actions button { position: relative; z-index: 1; }

/* C09 — ResourceIdentity / MetadataList / ResourceActions */
.tk-resource-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tk-space-5);
}

.tk-metadata-list {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: var(--tk-space-2) var(--tk-space-4);
  margin: 0;
}

.tk-metadata-list dt { color: var(--tk-color-text-muted); font-weight: var(--tk-weight-medium); }
.tk-metadata-list dd { min-width: 0; margin: 0; }
.tk-resource-actions { display: flex; flex-wrap: wrap; gap: var(--tk-space-3); }

/* C10 — RelationGroup */
.tk-relation-group {
  display: grid;
  gap: var(--tk-space-3);
}

.tk-relation-list {
  display: grid;
  gap: var(--tk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-relation-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--tk-space-3);
  border: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  border-radius: var(--tk-radius-control);
}

/* C11 — ProgressControl / LocalNotice */
.tk-progress-control,
.tk-local-notice {
  display: grid;
  gap: var(--tk-space-3);
}

.tk-local-notice {
  padding: var(--tk-space-4);
  border-inline-start: var(--tk-border-strong) solid var(--tk-color-warning);
  background: var(--tk-color-surface-muted);
}

/* C12 — ContinueLearning / ProgressSummary */
.tk-continue-learning,
.tk-progress-summary {
  display: grid;
  gap: var(--tk-space-4);
}

.tk-progress-summary__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--tk-space-3);
  margin: 0;
}

.tk-progress-summary__stat {
  display: grid;
  gap: var(--tk-space-1);
  padding: var(--tk-space-3);
  border: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  border-radius: var(--tk-radius-control);
}

.tk-progress-summary__stat dt { color: var(--tk-color-text-muted); }
.tk-progress-summary__stat dd { margin: 0; font-size: var(--tk-type-item-size); font-weight: var(--tk-weight-bold); }

/* C13 — ActivityHistory / ChapterProgress / TopicProgress */
.tk-activity-history,
.tk-chapter-progress,
.tk-topic-progress {
  display: grid;
  gap: var(--tk-space-3);
}

.tk-activity-history__list {
  display: grid;
  gap: var(--tk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-activity-history__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tk-space-3);
  padding-block: var(--tk-space-3);
  border-block-end: var(--tk-border-thin) solid var(--tk-color-border-subtle);
}

/* C14 — CollectionEntry / CourseEntry / TopicCollection */
.tk-collection-entry,
.tk-course-entry {
  display: grid;
  gap: var(--tk-space-3);
  padding: var(--tk-space-4);
  border: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  border-radius: var(--tk-radius-panel);
  background: var(--tk-color-surface);
}

.tk-topic-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--tk-space-4);
}

/* C15 — StateMessage / InlineFeedback */
.tk-state-message,
.tk-inline-feedback {
  display: grid;
  gap: var(--tk-space-3);
  padding: var(--tk-space-4);
  border: var(--tk-border-thin) solid var(--tk-color-border);
  border-inline-start-width: var(--tk-border-strong);
  border-radius: var(--tk-radius-control);
  background: var(--tk-color-surface);
}

.tk-state-message[data-state="loading"] { border-inline-start-color: var(--tk-color-action); }
.tk-state-message[data-state="empty"],
.tk-state-message[data-state="unavailable"] { border-inline-start-color: var(--tk-color-warning); }
.tk-state-message[data-state="error"],
.tk-inline-feedback[data-state="error"] { border-inline-start-color: var(--tk-color-error); }
.tk-state-message[data-state="success"],
.tk-inline-feedback[data-state="success"] { border-inline-start-color: var(--tk-color-success); }

/* C16 — ReaderShell / ReaderActions / ReaderViewport */
.tk-reader-shell {
  display: grid;
  min-height: 28rem;
  grid-template-areas:
    "actions"
    "viewport";
  grid-template-rows: auto minmax(20rem, 1fr);
  overflow: hidden;
  border: var(--tk-border-thin) solid var(--tk-color-border);
  border-radius: var(--tk-radius-panel);
  background: var(--tk-reader-background);
}

.tk-reader-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  align-items: center;
  padding: var(--tk-space-3);
  border-block-end: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  background: var(--tk-color-surface);
}

.tk-reader-viewport {
  grid-area: viewport;
  display: grid;
  min-width: 0;
  min-height: 20rem;
  place-items: center;
  overflow: auto;
  padding: var(--tk-space-4);
}

.tk-reader-viewport__placeholder {
  max-width: var(--tk-layout-prose);
  padding: var(--tk-space-5);
  border: var(--tk-border-thin) dashed var(--tk-color-border);
  border-radius: var(--tk-radius-control);
  background: var(--tk-color-surface);
  text-align: center;
}

/* C17 — Outline / FontScale / ChapterNavigation */
.tk-reader-outline {
  grid-area: outline;
  display: none;
  overflow: auto;
  padding: var(--tk-space-4);
  border-inline-end: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  background: var(--tk-color-surface);
}

.tk-reader-outline ol { margin: 0; padding-inline-start: var(--tk-space-5); }
.tk-font-scale,
.tk-chapter-navigation { display: flex; flex-wrap: wrap; gap: var(--tk-space-2); align-items: center; }

/* C18 — ComplaintLink */
.tk-complaint-link { color: var(--tk-color-action); }

/* ============================================================================
   Auxiliary color variants for primitives (info / method / highlight).
   These extend .tk-action (C04), .tk-badge (C05) and .tk-status-label (C09)
   with the three semantic accent colors defined in tokens.css.
   Structure mirrors the existing Wine primary variant; only colors change.
   ========================================================================== */

/* C04 — Action auxiliary variants (info=blue / method=green / highlight=gold) */
.tk-action--info {
  border-color: var(--tk-color-info);
  background: var(--tk-color-info);
}

.tk-action--info:hover {
  border-color: var(--tk-color-info-hover);
  background: var(--tk-color-info-hover);
}

.tk-action--info:active {
  border-color: var(--tk-color-info-pressed);
  background: var(--tk-color-info-pressed);
}

.tk-action--info:focus-visible {
  outline-color: var(--tk-color-info);
}

.tk-action--method {
  border-color: var(--tk-color-method);
  background: var(--tk-color-method);
}

.tk-action--method:hover {
  border-color: var(--tk-color-method-hover);
  background: var(--tk-color-method-hover);
}

.tk-action--method:active {
  border-color: var(--tk-color-method-pressed);
  background: var(--tk-color-method-pressed);
}

.tk-action--method:focus-visible {
  outline-color: var(--tk-color-method);
}

.tk-action--highlight {
  border-color: var(--tk-color-highlight);
  background: var(--tk-color-highlight);
}

.tk-action--highlight:hover {
  border-color: var(--tk-color-highlight-hover);
  background: var(--tk-color-highlight-hover);
}

.tk-action--highlight:active {
  border-color: var(--tk-color-highlight-pressed);
  background: var(--tk-color-highlight-pressed);
}

.tk-action--highlight:focus-visible {
  outline-color: var(--tk-color-highlight);
}

/* C05 / C09 — Badge & StatusLabel auxiliary variants.
   Default mirrors .tk-status-label--* outline pattern; hover/pressed/focus
   make these usable as interactive tags. */
.tk-badge--info,
.tk-status-label--info {
  border-color: var(--tk-color-info);
  color: var(--tk-color-info);
}

.tk-badge--info:hover,
.tk-status-label--info:hover {
  background: var(--tk-color-info-surface);
}

.tk-badge--info:active,
.tk-status-label--info:active {
  background: var(--tk-color-info);
  color: var(--tk-color-action-text);
}

.tk-badge--info:focus-visible,
.tk-status-label--info:focus-visible {
  outline-color: var(--tk-color-info);
}

.tk-badge--method,
.tk-status-label--method {
  border-color: var(--tk-color-method);
  color: var(--tk-color-method);
}

.tk-badge--method:hover,
.tk-status-label--method:hover {
  background: var(--tk-color-method-surface);
}

.tk-badge--method:active,
.tk-status-label--method:active {
  background: var(--tk-color-method);
  color: var(--tk-color-action-text);
}

.tk-badge--method:focus-visible,
.tk-status-label--method:focus-visible {
  outline-color: var(--tk-color-method);
}

.tk-badge--highlight,
.tk-status-label--highlight {
  border-color: var(--tk-color-highlight);
  color: var(--tk-color-highlight);
}

.tk-badge--highlight:hover,
.tk-status-label--highlight:hover {
  background: var(--tk-color-highlight-surface);
}

.tk-badge--highlight:active,
.tk-status-label--highlight:active {
  background: var(--tk-color-highlight);
  color: var(--tk-color-action-text);
}

.tk-badge--highlight:focus-visible,
.tk-status-label--highlight:focus-visible {
  outline-color: var(--tk-color-highlight);
}

@media (min-width: 37.5rem) {
  .tk-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .tk-resource-item { grid-template-columns: auto minmax(0, 1fr); }
  .tk-resource-identity { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); }
}

@media (min-width: 56.25rem) {
  .tk-filter-drawer-trigger { display: none; }
  .tk-filter-panel--wide { display: grid; }

  .tk-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-5);
  }

  .tk-reader-shell:has(.tk-reader-outline) {
    grid-template-areas:
      "outline actions"
      "outline viewport";
    grid-template-columns: var(--tk-layout-rail) minmax(0, 1fr);
    grid-template-rows: auto minmax(20rem, 1fr);
  }

  .tk-reader-outline { display: block; }
}

@media (forced-colors: active) {
  .tk-drawer-backdrop { background: var(--tk-color-overlay); opacity: 1; transition: none; }
  .tk-drawer { transform: none; transition: none; }
  .tk-reader-viewport__placeholder { border-style: solid; }
}

@media (prefers-reduced-transparency: reduce) {
  .tk-drawer-backdrop { background: var(--tk-color-surface); opacity: 1; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-drawer-backdrop,
  .tk-drawer {
    transform: none;
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tk-site-nav__link,
  .tk-filter-chip,
  .tk-resource-item {
    transition:
      background-color var(--tk-motion-duration-feedback) var(--tk-motion-ease),
      border-color var(--tk-motion-duration-feedback) var(--tk-motion-ease);
  }
}

@media (hover: none) {
  .tk-site-nav__link:hover { background: transparent; }
  .tk-site-nav__link[aria-current="page"]:hover { background: var(--tk-color-selected-surface); }
  .tk-resource-item:has(.tk-resource-item__title-link:hover) { border-color: var(--tk-color-border-subtle); }
}