/* KYA Group — free AI skills: the library (/skills/) and one page per skill (/skills/<name>/)
 * Loaded after tokens.css and site.css; every value comes from tokens.css. Built from the tpl-skills and tpl-skill
 * mocks (design/templates/build_templates.py, U451 N4), without the mock's safety list (U377, U451 N5).
 */

/* ---------- Page head: breadcrumb, eyebrow, headline, lead ---------- */

.page-head { padding-top: var(--hero-space-top); }
/* the headline's line-height, letter-spacing and weight; its size is .page-title's (site.css, one rule for every page
   title: 32 / 44 / 44px, U526, U527, U537, U545) */
.page-head h1 {
  line-height: var(--text-headline--line-height);
  letter-spacing: var(--text-headline--letter-spacing); font-weight: var(--text-headline--font-weight);
}
.page-head .text-lead { max-width: var(--container-lead); margin-top: var(--gap-heading); }

/* the breadcrumb: site.css (one rule for every page, U538) */

/* ---------- Library: filter chips and skill cards ---------- */

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-top: var(--block-gap); }
.chips[hidden] { display: none; }
.page-head .skill-grid { margin-top: var(--block-gap); }
.chips:not([hidden]) ~ .skill-grid { margin-top: calc(var(--spacing) * 6); }
.chips button {
  display: inline-flex; align-items: center; min-height: calc(var(--spacing) * 10); padding: 0 calc(var(--spacing) * 4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-full); background: var(--color-surface);
  font-size: var(--text-small); color: var(--color-text);
}
@media (hover: hover) { .chips button:hover { border-color: var(--color-accent); } }
.chips button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }

.skill-grid { padding: 0; list-style: none; }
.skill-grid > [hidden] { display: none; }
.skill-card { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); height: 100%; padding: var(--card-pad); }
.skill-card p { font-size: var(--text-body); line-height: var(--text-body--line-height); color: var(--color-muted); }   /* running text of several lines: 16px (U540; typography.md §6) */
.skill-card .skill-meta {
  margin-top: auto; padding-top: calc(var(--spacing) * 3); border-top: 1px solid var(--color-line);
  font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-faint);
}
/* The whole card is one link (U468, U469): the title's link stays the only link and its ::after covers the card
   (Inclusive Components, "Cards"). The focus ring goes round the whole card where :has() works; elsewhere the
   link keeps its own ring. */
.skill-grid .card { position: relative; }
.skill-card .text-title a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .skill-grid .card:hover { border-color: var(--color-accent); }
  .skill-grid .card:hover .text-title a { text-decoration: underline; }
}
@supports selector(:has(*)) {
  .skill-grid .card:has(.text-title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 5px; }
  .skill-card .text-title a:focus-visible { outline: none; }
}

/* ---------- Questions (details / summary) ---------- */

.faq details { padding: calc(var(--spacing) * 5) 0; border-top: 1px solid var(--color-line); }
.faq details:last-child { border-bottom: 1px solid var(--color-line); }
.faq summary { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 4); cursor: pointer; font-weight: var(--font-weight-semibold); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-accent); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: var(--container-prose); margin-top: calc(var(--spacing) * 3); color: var(--color-muted); }

/* ---------- One skill: main column and a side panel with the request button and the facts ---------- */

.skill-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--column-gap); }
/* Phone and tablet order: title, then the panel, then the details. Desktop: the panel stays beside the column. */
@media (width >= 64rem) {
  .skill-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--spacing) * 88));
    grid-template-areas: 'head side' 'main side'; align-items: start; row-gap: 0;
  }
  .skill-head { grid-area: head; }
  .skill-main { grid-area: main; }
  .skill-side { grid-area: side; position: sticky; top: calc(var(--header-height) + var(--spacing) * 4); }
}
.skill-head .text-lead { max-width: var(--container-lead); margin-top: var(--gap-heading); }
.skill-byline { margin-top: calc(var(--spacing) * 4); color: var(--color-muted); }
.skill-side .panel { display: grid; gap: calc(var(--spacing) * 4); }
.skill-side .button { justify-content: center; width: 100%; margin-top: 0; }
.side-note { font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-muted); text-align: center; }
.facts { display: grid; gap: calc(var(--spacing) * 3); margin: 0; }
.facts div { display: grid; grid-template-columns: calc(var(--spacing) * 24) minmax(0, 1fr); gap: calc(var(--spacing) * 3); font-size: var(--text-small); line-height: var(--text-small--line-height); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; overflow-wrap: break-word; color: var(--color-ink); font-weight: var(--font-weight-medium); }
.facts a { color: var(--color-accent-hover); border-bottom: 1px solid var(--color-accent-line); }
.side-rights { font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-muted); }

/* "Add to request" (public/app.js): shown only when the script can keep the list; once added, the same button reads
   "Remove from request" in the outline style and a link to the contact form appears under it (U470, U471) */
.skill-side [hidden] { display: none; }
.skill-toggle { cursor: pointer; }
.skill-toggle.is-added { border: 1px solid var(--color-accent); background: var(--color-surface); color: var(--color-accent-hover); }
@media (hover: hover) { .skill-toggle.is-added:hover { background: var(--color-surface); border-color: var(--color-accent-hover); } }
.skill-next { justify-self: center; }

.block { margin-top: var(--row-gap); }
.block h2 {
  margin-bottom: var(--gap-heading);
  font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height);
  letter-spacing: var(--text-title-lg--letter-spacing); font-weight: var(--text-title-lg--font-weight);
}
.block > p, .skill-body { max-width: var(--container-prose); color: var(--color-text); }
.block > p + p, .skill-body > p + p { margin-top: calc(var(--spacing) * 4); }
/* Links inside a sentence: accent colour and a thin underline (the site's .text-link is for standalone links) */
.skill-body a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent-line); }
.skill-body ul { max-width: var(--container-prose); margin: calc(var(--spacing) * 4) 0 0; padding-left: calc(var(--spacing) * 5); }
.skill-body li + li { margin-top: var(--gap-list); }
.skill-body ul + p { margin-top: calc(var(--spacing) * 4); }
/* Small accent text on the tinted panels: the darker accent keeps 4.5:1 (on the panel 5.36:1, on background-alt 4.97:1);
   the plain accent is 4.11:1 and 3.81:1 there (U451 cross-review, gate 25) */
.skill-side .text-link, .is-tinted .text-link { color: var(--color-accent-hover); }