/* Routed Skills browse/detail states. Index-only to avoid changing shared admin CSS. */
:root {
  --skills-warning-text: #7a3d00;
}

html[data-theme="dark"] {
  --skills-warning-text: #ffd18a;
}

.skills-browse-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.skills-browse-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.skills-browse-toolbar .sort-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.skills-browse-toolbar select {
  min-height: 42px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  /* Colour only: the shared sort menu rule supplies the chevron image. */
  background-color: var(--bg-input);
  color: var(--text-primary);
  padding: 9px 12px;
  font: inherit;
}

.skills-browse-toolbar select:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.skills-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.skills-load-more__status {
  min-height: 1.4em;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.skills-detail__back {
  align-self: flex-start;
}

.skills-package-fields {
  display: grid;
  gap: 16px;
}

.skills-package-options,
.skills-designed-for {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
}

.skills-package-options legend,
.skills-designed-for legend {
  padding: 0 6px;
  color: var(--text-primary);
  font-weight: 700;
}

.skills-package-pickers,
.skills-designed-for__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.skills-package-picker {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.skills-package-dropzone {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-subtle, var(--bg-input));
}

.skills-package-dropzone > p,
.skills-package-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.skills-package-dropzone:focus-visible,
.skills-package-dropzone[data-drag-active="true"] {
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.skills-package-advanced {
  margin-top: 10px;
}

.skills-package-advanced summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
}

.skills-package-advanced .skills-package-picker {
  margin-top: 8px;
}

.skills-package-picker input,
.skills-designed-for__inputs input {
  min-width: 0;
}

.skills-package-picker:focus-within,
.skills-designed-for__inputs input:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.skills-package-preview {
  min-width: 0;
}

.skills-package-preview__title {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.skills-package-tree {
  max-height: 180px;
  margin: 0;
  padding: 10px 10px 10px 30px;
  overflow: auto;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.skills-package-tree [role="treeitem"] {
  padding: 2px 4px;
  border-radius: 4px;
}

.skills-package-tree [role="treeitem"]:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.skills-package-tree [data-warning="true"]::after {
  content: " · review warning";
  color: var(--skills-warning-text);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.skills-package-findings {
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warning, #c97b00);
  background: var(--bg-subtle, var(--bg-input));
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.skills-package-findings p,
.skills-package-findings ul {
  margin: 0;
}

.skills-package-findings ul {
  padding-left: 20px;
}

.skills-package-findings button {
  color: inherit;
  text-decoration: underline;
}

.skills-package-warning-review {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.skills-download-caution__dialog {
  max-width: 560px;
}

.skills-download-caution__status {
  min-height: 1.4em;
  color: var(--text-secondary);
}

.skills-download-caution__status[data-tone="error"] {
  color: var(--danger, #b42318);
}

@media (max-width: 680px) {
  .skills-browse-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .skills-browse-toolbar .sort-control,
  .skills-browse-toolbar select {
    width: 100%;
  }

  .skills-package-pickers,
  .skills-designed-for__inputs {
    grid-template-columns: 1fr;
  }
}

/* Skills uses the shared V4 catalog card while retaining legacy data hooks. */
html[data-shell="refined"] body:not(.admin-page) [data-page="skills"] .catalog-v4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card {
  min-width: 0;
  min-height: 0;
  /* Shared cards also carry the legacy .skill-card class. Remove its 22px
     padding so the shared component's own content inset is the only one. */
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: none;
}
.skill-card__title { font-size: 18px; line-height: 24px; }
.skill-card__description { font-size: 15px; line-height: 22px; -webkit-line-clamp: 2; }
.skill-card__type { font-family: ui-monospace, monospace; }
.skill-card__stats { align-items: center; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.skill-card__download-count { flex: 0 1 auto; }
.skill-card__actions { display: contents; }
.skill-card__actions > a,
.skill-card__actions > button { min-width: 0; min-height: 40px; white-space: nowrap; }
.skill-card__actions > [data-skill-open] { flex: 0 0 auto; }
.skill-card__actions > [data-skill-download-inline] { flex: 1 1 auto; }
.skill-card__favorite { color: var(--text-secondary); }
.skill-card__favorite[aria-pressed="true"] { color: var(--brand-text); }
.skills-detail__hero { padding: 18px 22px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--bg-subtle); }
.skills-detail__media { width: 64px; height: 64px; margin-bottom: 12px; }
.skills-detail__media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-surface); }
.skills-detail__media:has([data-skill-media-note]) { width: auto; height: auto; }
.skills-detail__media-note { margin: 0; font-size: 13px; color: var(--text-secondary); }
.skills-detail__hero .skills-detail__title { font-size: 28px; margin: 0 0 8px; }
.skills-detail__hero .skills-detail__description { font-size: 15px; margin: 0 0 12px; }
.skills-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; margin-top: 24px; }
.skills-detail__body { width: 100%; min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.skills-detail__body h2 { font-size: 22px; margin: 0 0 12px; }
.skills-detail__body h3 { font-size: 18px; margin: 20px 0 8px; }
.skills-detail__body p { margin: 0 0 16px; }
.skills-detail__rail { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 16px; padding: 20px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--bg-surface); }
.skills-detail__rail h3 { font-size: 15px; margin: 0 0 12px; }
.skills-detail__rail .skill-card__tags { margin: 0; }
.skills-detail__rail .skills-meta { margin: 0; padding-top: 20px; border-top: 1px solid var(--border-light); }
.skills-detail__secondary { display: flex; flex-wrap: wrap; gap: 12px; }
.skills-detail__secondary .action-button { min-height: 44px; flex: 1 1 auto; }
/* Admin archive: rendered only for admins, below the everyday actions. */
.skills-detail__admin { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-light, #e5e7e8); }
.skills-detail__admin h3 { margin: 0; font-size: 0.875rem; }
.skills-detail__admin .action-button { min-height: 44px; }
.skills-detail__admin-status { margin: 0; color: var(--danger, #b3261e); font-size: 0.875rem; }
.skills-admin-archive-confirm { width: min(520px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border-color, #c9d0d3); border-radius: 12px; color: var(--text-primary, #172124); background: var(--bg-card, #fff); }
.skills-admin-archive-confirm::backdrop { background: rgb(0 0 0 / 55%); }
.skills-admin-archive-confirm h2 { margin: 0 0 8px; font-size: 1.25rem; overflow-wrap: anywhere; }
.skills-admin-archive-confirm p { margin: 0; }
.skills-admin-archive-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.skills-admin-archive-actions .action-button { min-height: 44px; }
.skills-admin-archive-confirm :focus-visible { outline: 3px solid var(--link, var(--brand-primary)); outline-offset: 2px; }
@media (max-width: 480px) { .skills-admin-archive-actions { flex-direction: column-reverse; } }
.skills-detail__download { display: flex; flex-direction: column; gap: 12px; }
.skills-detail__download {
  color: var(--text-primary, var(--text, #212224));
  background: var(--surface, var(--bg-card, #fff));
  border: 1px solid var(--border-light, var(--border, #dfe4e3));
  border-radius: 8px;
  padding: 16px;
}
.skills-detail__download :is(h3, p) { margin: 0; }
.skills-download-caution__dialog .modal__body { display: flex; flex-direction: column; gap: 16px; }
.skills-download-caution__dialog .modal__body p { margin: 0; }
.skills-download-caution__dialog .modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.skills-download-caution__dialog .action-button { min-height: 44px; }
.skills-detail__trust { display: flex; align-items: center; gap: 10px; color: var(--text-primary, var(--text, #212224)); font-weight: 600; min-height: 44px; }
.skills-detail__trust input { width: 18px; height: 18px; accent-color: var(--brand-primary); }
.skills-detail__download p { font-size: 13px; color: var(--text-secondary); }
.skills-detail__download button { width: 100%; min-height: 44px; }
.skills-detail__source { margin: 24px 0; }
.skills-detail__source summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
.skills-detail__body figure { margin: 20px 0; }
.skills-detail__body figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border-light); border-radius: 12px; }
.skills-detail__body figcaption { font-size: 13px; color: var(--text-secondary); }
[data-page="skills"] :is(button, a, input, summary):focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
@media (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) [data-page="skills"] .catalog-v4-grid { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); }
  .skill-card__actions :is(button, a), .skill-card__favorite { min-height: 44px; }
  .skills-detail__grid { display: flex; flex-direction: column; gap: 24px; }
  .skills-detail__rail { display: flex; flex-direction: column; gap: 24px; position: static; order: -1; width: 100%; box-sizing: border-box; }
  .skills-detail__hero { padding: 16px; }
  .skills-detail__hero .skills-detail__title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="skills"] .skill-card { transition: none; transform: none; }
}
html[data-shell="refined"] .skills-detail-active > .hub-page__header { display: none; }
html[data-shell="refined"] .skills-detail-active .skills-panel--detail { padding: 0; background: transparent; border: 0; box-shadow: none; }
.skills-detail__body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.skills-detail__body :is(td, th) { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-light); }
.skills-detail__body blockquote { border-left: 3px solid var(--border-light); margin-left: 0; padding-left: 16px; }
.skill-card__stats > span:not([hidden]):not(.catalog-v4-card__owner):not(.catalog-v4-card__bottom-end) { display: inline-block; }
@media (max-width: 900px) {
  [data-page="people"] .people-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* The mobile rail precedes the instructions in normal flow. Its download controls
     must scroll away with it so long SKILL.md previews remain readable. */
  .skills-detail__download p { margin: 0; font-size: 12px; }
}
@media (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) [data-page="skills"] .skill-card__actions :is(button, a) { min-height: 48px; height: auto; }
}
[data-page="skills"] [data-skill-download]:disabled { opacity: .55; cursor: not-allowed; }

/* Keep compact card metadata readable within the Skills surface. */
html[data-shell="refined"] body:not(.admin-page) [data-page="skills"] .skill-card__tag,
html[data-shell="refined"] body:not(.admin-page) [data-page="skills"] .skills-browse-toolbar .sort-control { color: var(--text-secondary); }

/* Legacy `.skill-card__*` rules in prompt-library.css also match these V4
   cards. Reset only those inherited layout values on the shared component. */
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__top {
  justify-content: flex-start;
  margin-bottom: 0;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__tags {
  flex-wrap: wrap;
  margin-top: 0;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__tags .skill-card__type {
  flex: 0 0 auto;
}
/* V4: the format (.md, .zip) and product tags on skill cards look like the tags on every other card. */
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__tags :is(.skill-card__tag, .skill-card__type) {
  height: 24px;
  box-sizing: border-box;
  padding: 0 8px;
  color: var(--text-secondary, var(--text2));
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 22px;
  background: transparent;
  border: 1px solid var(--border-light, #dfe4e3);
  border-radius: 999px;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__tag {
  font-weight: 500;
  letter-spacing: normal;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__footer {
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.skill-card .skill-card__actions > [data-skill-download-inline] {
  flex: 1 1 0%;
  min-width: 0;
}

/* Contrast: the author link uses the theme link token, and the format chip uses the
   dark-theme blue on dark surfaces (both measured below 4.5:1 before). */
.skills-detail__author a { color: var(--link, var(--brand-primary)); }
html[data-theme="dark"] .skill-card__type { color: var(--blue, #5b9bf0); }