html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
}

h1, h2, h3, p { margin: 0; }

.skills-appbar {
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) clamp(16px, 4vw, 40px);
  border-bottom: var(--stroke-thin) solid var(--color-outline);
}

.skills-appbar .brand { display: inline-flex; }

.skills-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-9) 16px var(--space-11);
}

@media (min-width: 720px) {
  .skills-main { padding-inline: var(--space-7); }
}

/* Directory */

.skills-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (max-width: 1000px) {
  .skills-intro { grid-template-columns: minmax(0, 1fr); }
}

.skills-hero { display: grid; gap: var(--space-3); max-width: 720px; }

/* Robomori next to the heading: copy on a blue sky, and a column of coding agents running off the card's edges. */
.robomori-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  min-height: 300px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 10%, rgb(255 255 255 / 0.28), transparent 40%),
    radial-gradient(circle at 70% 90%, rgb(34 211 238 / 0.35), transparent 45%),
    linear-gradient(135deg, #1e3a8a 0%, #2f5fd8 50%, #3574f0 100%);
  color: #ffffff;
}

.robomori-hero-copy { display: grid; align-content: center; justify-items: start; gap: var(--space-3); padding: var(--space-7); }
.robomori-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: rgb(255 255 255 / 0.8); font-weight: 600; }
.robomori-hero-eyebrow img { border-radius: 6px; }
.robomori-hero-title { margin: 0; font: 700 1.6rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.robomori-hero-body { color: rgb(255 255 255 / 0.82); }
.robomori-hero-cta { margin-top: var(--space-2); }
.button-secondary.robomori-hero-cta { background: #ffffff; color: #1e3a8a; }

.robomori-hero-tiles {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  align-content: start;
  gap: var(--space-3);
  margin-top: -36px;
  padding: 0 var(--space-5);
  border-left: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.06);
}

.robomori-hero-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgb(255 255 255 / 0.18); }
.robomori-hero-tile img { box-sizing: border-box; width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #ffffff; }

@media (max-width: 560px) {
  .robomori-hero { grid-template-columns: minmax(0, 1fr); }
  .robomori-hero-copy { padding: var(--space-6); }
  .robomori-hero-tiles { display: none; }
}
.skills-lede { color: var(--color-muted); }

.skills-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.skills-filters { display: grid; grid-template-columns: repeat(4, 200px); gap: var(--space-2); }
.skills-filters .filter-trigger { width: 100%; }

/* The dropdowns move under the search and share its width once they no longer fit beside it. */
@media (max-width: 1180px) {
  .skills-toolbar { grid-template-columns: minmax(0, 1fr); }
  .skills-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .skills-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: var(--space-5);
}

.skill-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.skill-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.08); }
.skill-card[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .skill-card:hover { transform: none; }
}

.skill-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
}

.skill-card-avatar { width: 48px; height: 48px; border-radius: 12px; }
.skill-card-heading { display: grid; gap: var(--space-1); min-width: 0; padding-top: 2px; }
.skill-card-title { overflow-wrap: anywhere; }
.skill-card-title a { color: inherit; text-decoration: none; }
/* The title's link covers the card, so clicking anywhere opens the skill. */
.skill-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.skill-card-title a:focus-visible { outline: none; }
.skill-card:has(.skill-card-title a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.skill-card-owner { color: var(--color-muted); }

.skill-card-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.skill-chip-organization { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }

/* Chips move under the title when the card is too narrow to hold them beside it. */
@container (max-width: 280px) {
  .skill-card-header { grid-template-columns: auto minmax(0, 1fr); }
  .skill-card-chips { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

.skill-card-description {
  height: calc(3 * 1.6em);
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--stroke-thin) solid var(--color-outline);
}

.skill-card-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-muted); }
.skill-card-stat { display: inline-flex; align-items: center; gap: var(--space-1); }
.skill-card-view { flex: none; }

.skills-empty { padding: var(--space-9) 0; text-align: center; color: var(--color-muted); }

/* Skill page */

.breadcrumbs { margin-bottom: var(--space-6); }

.skill-header { display: grid; gap: var(--space-3); }
.skill-header h1 { overflow-wrap: anywhere; }
.skill-header-title { display: flex; align-items: center; gap: var(--space-4); }
.skill-header-avatar { flex: none; width: 64px; height: 64px; border-radius: 16px; }
.skill-header-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.skill-header-owner { margin-top: var(--space-1); color: var(--color-muted); }
.skill-description { color: var(--color-muted); }

.skill-facts {
  display: grid;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.skill-facts > div { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; }
.skill-facts > div + div { border-top: var(--stroke-thin) solid var(--color-outline); }
.skill-facts dt { color: var(--color-muted); }
.skill-facts-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.skill-facts-links a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-on-background); font-weight: 600; text-decoration: none; }
.skill-facts-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.skill-facts dd { display: flex; align-items: center; gap: var(--space-1); margin: 0; min-width: 0; overflow-wrap: anywhere; }

.skill-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--space-9);
  align-items: start;
}

.skill-content { display: grid; gap: var(--space-9); min-width: 0; }
.skill-content > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.skill-content h2 { scroll-margin-top: 88px; }

.skill-aside { position: sticky; top: 88px; display: grid; gap: var(--space-4); max-height: calc(100vh - 112px); overflow-y: auto; }

.skill-toc { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-secondary); }
.skill-toc h2 { margin-bottom: var(--space-3); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.skill-toc ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.skill-toc a { position: relative; display: block; padding: var(--space-1) 0 var(--space-1) var(--space-3); color: var(--color-muted); text-decoration: none; }
.skill-toc a:hover { color: var(--color-on-background); }
/* The section being read is marked with a bar, like a selected tab. */
.skill-toc a[aria-current] { color: var(--color-on-background); font-weight: 600; }
.skill-toc a[aria-current]::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--color-on-background); }

@media (max-width: 900px) {
  .skill-layout { grid-template-columns: minmax(0, 1fr); }
  .skill-toc { display: none; }
  .skill-aside { position: static; max-height: none; }
}

.skill-content .code-block pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.skill-faq a, .skill-facts a, .skill-instructions a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.skill-instructions {
  padding: var(--space-6);
  border: var(--stroke-thin) solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.skill-instructions > :first-child { margin-top: 0; }
.skill-instructions > :last-child { margin-bottom: 0; }
.skill-instructions h3 { font: var(--type-header-small); margin: var(--space-7) 0 var(--space-3); }
.skill-instructions h4, .skill-instructions h5, .skill-instructions h6 { font: var(--type-title-large); margin: var(--space-6) 0 var(--space-2); }
.skill-instructions p, .skill-instructions ul, .skill-instructions ol, .skill-instructions pre, .skill-instructions table, .skill-instructions blockquote { margin: 0 0 var(--space-4); }
.skill-instructions li + li { margin-top: var(--space-1); }
.skill-instructions img { max-width: 100%; height: auto; }

.skill-instructions code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--color-secondary);
}

.skill-instructions pre {
  overflow-x: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-code-surface);
  color: #e5e7eb;
}

.skill-instructions pre code { padding: 0; background: none; color: inherit; font-size: 13px; line-height: 1.7; }

.skill-instructions blockquote {
  padding-left: var(--space-4);
  border-left: var(--stroke-strong) solid var(--color-outline);
  color: var(--color-muted);
}

.skill-instructions table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.skill-instructions th, .skill-instructions td { padding: var(--space-2) var(--space-3); border: var(--stroke-thin) solid var(--color-outline); text-align: left; vertical-align: top; }

.skill-files {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--stroke-thin) solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.skill-files li + li { border-top: var(--stroke-thin) solid var(--color-outline); }

.skill-files a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.skill-files a:hover { background: var(--color-secondary); }
.skill-files li:first-child a { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.skill-files li:last-child a { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.skill-files li:only-child a { border-radius: var(--radius-lg); }
.skill-files .icon { flex: none; color: var(--color-muted); }
.skill-files code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.skill-files span { flex: none; color: var(--color-muted); }

.skill-related { display: grid; gap: var(--space-4); margin-top: var(--space-11); }
.skill-related-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }