/* Consistent, readable category cues across navigation, content and details. */
:root {
  --section-color: #285ee8;
  --section-soft: #edf2ff;
  --section-border: #d9e4fd;
}
[data-section="oneClick"], [data-page="oneClick"] {
  --section-color: #6b48ce;
  --section-soft: #f2edff;
  --section-border: #dcd0fb;
}
[data-section="half"], [data-page="half"] {
  --section-color: #087f78;
  --section-soft: #e7f6f3;
  --section-border: #bde4dd;
}
[data-section="full"], [data-page="full"] {
  --section-color: #bf5b31;
  --section-soft: #fff0e8;
  --section-border: #f0d1c1;
}
[data-section="examples"], [data-page="examples"] {
  --section-color: #b0447e;
  --section-soft: #fbeaf3;
  --section-border: #ecc9df;
}
.navigation { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.nav-link, .nav-link:first-child, .nav-link:last-child { margin: 0; }
.nav-link {
  color: var(--section-color);
  background: var(--section-soft);
  border-color: var(--section-border);
  min-height: 45px;
  padding-inline: 19px;
  transition: background .2s, box-shadow .2s, border-color .2s, transform .2s;
}
.nav-color { display: none; }
.nav-link[aria-current="page"] {
  color: var(--section-color);
  border-color: var(--section-color);
  background: var(--section-soft);
  box-shadow: inset 0 -3px 0 var(--section-color), inset 0 1px 0 #fff;
}
.section-head > div { position: relative; padding-left: 20px; }
.section-head > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 4px;
  background: var(--section-color);
}
.section-head .eyebrow, .group-heading h3 .icon,
.workflow-kicker > .icon { color: var(--section-color); }
.small-icon, .copy-small {
  color: var(--section-color);
  background: var(--section-soft);
  border-color: var(--section-border);
}
.prompt-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--section-color);
  pointer-events: none;
}
.filter.active {
  color: var(--section-color);
  background: var(--section-soft);
  border-color: var(--section-border);
}
.filter.active span { color: var(--section-color); }
.mobile-filter select { color: var(--section-color); border-color: var(--section-border); background: var(--section-soft); }
.step-rail span { color: var(--section-color); border-color: var(--section-border); background: var(--section-soft); }
.workflow-step:not(:last-child) .step-rail::after { background: var(--section-border); }
.page-head > .button { color: var(--section-color); border-color: var(--section-border); }
.example-number { color: var(--section-color); }
.example-card { border-top: 3px solid var(--section-border); }
.dialog-head {
  border-top: 4px solid var(--section-color);
  background: linear-gradient(120deg, #fff, var(--section-soft));
}
.dialog-head .eyebrow { color: var(--section-color); }
.dialog-footer .button.primary { background: var(--section-color); border-color: var(--section-color); }
.category-featured { --accent: #6b48ce; --tint: #f2edff; grid-column: 1 / -1; }
.category-half { --accent: #087f78; --tint: #e7f6f3; }
.category-full { --accent: #bf5b31; --tint: #fff0e8; }
.category-examples { --accent: #b0447e; --tint: #fbeaf3; }
.category::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  bottom: 25px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  pointer-events: none;
}
.category-shortcut { color: var(--accent); }
@media (hover: hover) {
  .nav-link:hover { color: var(--section-color); background: var(--section-soft); border-color: var(--section-color); box-shadow: 0 5px 16px var(--section-border); transform: translateY(-1px); }
  .copy-small:hover, .page-head > .button:hover { color: var(--section-color); background: var(--section-soft); border-color: var(--section-color); }
  .prompt-card:hover { border-color: var(--section-border); }
}
@media (min-width: 601px) and (max-width: 820px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid .category { grid-column: span 1; }
  .home-grid .category-featured, .home-grid .category-examples { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --header: 202px; }
  .navigation { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .nav-link { grid-column: span 2; min-height: 40px; padding-inline: 6px; gap: 6px; font-size: 13px; }
  .nav-link:nth-child(4), .nav-link:nth-child(5) { grid-column: span 3; }
  .nav-color { display: block; flex: none; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
  .section-head > div { padding-left: 14px; }
  .section-head > div::before { width: 3px; }
  .category::before { top: 18px; bottom: 18px; width: 3px; }
}