/* Combat Roles guide. Built on the shared /css/aw-shell.css tokens. */

.aw-combat-roles-main {
  --cr-gutter: clamp(0.75rem, 2.2vw, 2rem);
  --cr-cyan: #8abacc;
  --cr-blue: #7fb9ca;
  --cr-navy: #2f4767;
  --cr-silver: #bac6d0;
  --cr-warm: #a09078;
  container: combat-roles-guide / inline-size;
  flex: 1 0 auto;
  min-inline-size: 0;
  inline-size: 100%;
  overflow: clip;
  padding: 1rem var(--cr-gutter) clamp(3rem, 7vw, 5.5rem);
  color: hsl(var(--foreground));
}
html.light .aw-combat-roles-main {
  --cr-cyan: #2e5f62;
  --cr-blue: #356d70;
  --cr-navy: #23494c;
  --cr-silver: #596164;
  --cr-warm: #795a31;
}
.aw-combat-roles-main > :where(.aw-cr-breadcrumb, .aw-cr-hero, .aw-cr-toc, .aw-cr-section, .aw-cr-status, .aw-cr-glossary, .aw-combat-roles-tail, noscript) {
  inline-size: 100%;
  margin-inline: auto;
}
.aw-combat-roles-main :where(button, input, select) { font: inherit; }
.aw-combat-roles-main :where(p, h1, h2, h3) { overflow-wrap: anywhere; }

.aw-cr-breadcrumb {
  min-block-size: 1.75rem;
  margin-block-end: 0.55rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 600;
}
.aw-cr-breadcrumb ol { display: flex; align-items: center; min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.aw-cr-breadcrumb li { display: inline-flex; align-items: center; min-inline-size: 0; }
.aw-cr-breadcrumb li + li::before { content: "/"; margin-inline: 0.55rem; color: hsl(var(--muted-foreground) / 0.62); font-weight: 400; }
.aw-cr-breadcrumb a { color: hsl(var(--muted-foreground)); transition: color var(--dur-fast) var(--ease); }
.aw-cr-breadcrumb a:hover { color: hsl(var(--foreground)); }
.aw-cr-breadcrumb [aria-current="page"] { overflow: hidden; color: hsl(var(--foreground)); text-overflow: ellipsis; white-space: nowrap; }

.aw-cr-hero {
  display: block;
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
}
.aw-cr-hero-copy { position: relative; z-index: 1; max-inline-size: 62rem; }
.aw-cr-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  color: hsl(var(--primary));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.aw-cr-eyebrow::before { content: ""; flex: 0 0 1.6rem; block-size: 2px; border-radius: 999px; background: hsl(var(--primary)); }
[dir="rtl"] .aw-cr-eyebrow { letter-spacing: 0; }
#aw-combat-roles-title {
  max-inline-size: 25ch;
  margin: 0;
  color: hsl(var(--foreground));
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
[dir="rtl"] #aw-combat-roles-title { max-inline-size: 30ch; letter-spacing: normal; }
.aw-cr-intro { max-inline-size: 78ch; margin: 0.72rem 0 0; color: hsl(var(--muted-foreground)); font-size: clamp(0.9rem, 1.2vw, 1rem); line-height: 1.68; }
[dir="rtl"] .aw-cr-intro { line-height: 1.9; }
.aw-cr-byline { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0.8rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.72rem; font-weight: 650; }
.aw-cr-byline time { font-variant-numeric: tabular-nums; }
.aw-cr-hero-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.85rem; }
.aw-cr-hero-fact {
  display: inline-flex;
  min-block-size: 1.8rem;
  align-items: center;
  padding-inline: 0.6rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card) / 0.62);
  color: hsl(var(--foreground) / 0.78);
  font-size: 0.68rem;
  font-weight: 750;
}

.aw-cr-toc {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1rem;
  margin-block-start: 0.8rem;
  padding: 0.75rem 0;
  border-block: 1px solid hsl(var(--border) / 0.72);
}
.aw-cr-toc strong { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
[dir="rtl"] .aw-cr-toc strong { letter-spacing: 0; }
.aw-cr-toc ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; margin: 0; padding: 0; list-style: none; }
.aw-cr-toc a { display: inline-flex; min-block-size: 2.75rem; align-items: center; color: hsl(var(--foreground) / 0.78); font-size: 0.76rem; font-weight: 750; }
.aw-cr-toc a:hover { color: hsl(var(--primary)); }
.aw-cr-toc a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }

.aw-cr-section { min-inline-size: 0; padding-block: clamp(1.45rem, 3.5vw, 2.35rem); border-block-end: 1px solid hsl(var(--border) / 0.72); scroll-margin-top: calc(var(--header-height) + 1rem); }
.aw-cr-section__head { max-inline-size: 58rem; margin-block-end: 1rem; }
#how-to-read .aw-cr-section__head { max-inline-size: none; }
.aw-cr-section__kicker { margin: 0 0 0.38rem; color: var(--cr-blue); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
[dir="rtl"] .aw-cr-section__kicker { letter-spacing: 0; }
.aw-cr-section__title { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.78rem); letter-spacing: -0.03em; line-height: 1.22; }
[dir="rtl"] .aw-cr-section__title { letter-spacing: 0; line-height: 1.5; }
.aw-cr-section__desc { margin: 0.52rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.87rem; line-height: 1.72; }
[dir="rtl"] .aw-cr-section__desc { line-height: 1.92; }

.aw-cr-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem 1rem; margin: 0; padding: 0; list-style: none; }
.aw-cr-principle { min-inline-size: 0; padding-inline-start: 0.9rem; border-inline-start: 2px solid var(--cr-accent, var(--cr-cyan)); }
.aw-cr-principle:nth-child(2) { --cr-accent: var(--cr-warm); }
.aw-cr-principle:nth-child(3) { --cr-accent: var(--cr-blue); }
.aw-cr-principle:nth-child(4) { --cr-accent: var(--cr-silver); }
.aw-cr-principle__number { display: block; margin-block-end: 0.35rem; color: var(--cr-accent, var(--cr-cyan)); font-size: 0.66rem; font-weight: 850; }
.aw-cr-principle__title { margin: 0; font-size: 0.94rem; line-height: 1.4; }
.aw-cr-principle__body { margin: 0.38rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.79rem; line-height: 1.72; }
[dir="rtl"] .aw-cr-principle__body { line-height: 1.92; }

.aw-cr-reference { margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; }
.aw-cr-reference picture { display: block; }
.aw-cr-reference img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: #f5f5f4;
  box-shadow: 0 16px 34px hsl(220 20% 2% / 0.18);
}
.aw-cr-reference figcaption { max-inline-size: none; margin-block-start: 0.65rem; color: hsl(var(--muted-foreground)); font-size: 0.72rem; line-height: 1.65; }
[dir="rtl"] .aw-cr-reference figcaption { line-height: 1.85; }

.aw-cr-glossary { min-inline-size: 0; padding-block: clamp(1.45rem, 3.5vw, 2.35rem); border-block-end: 1px solid hsl(var(--border) / 0.72); scroll-margin-top: calc(var(--header-height) + 1rem); }
.aw-cr-filters {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 0.42fr) auto;
  gap: 0.65rem;
  align-items: end;
  margin-block: 1rem 0.8rem;
  padding: 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card) / 0.58);
}
.aw-cr-field { display: grid; min-inline-size: 0; gap: 0.38rem; }
.aw-cr-field label { color: hsl(var(--muted-foreground)); font-size: 0.68rem; font-weight: 800; }
.aw-cr-search { position: relative; min-inline-size: 0; }
.aw-cr-search input, .aw-cr-field select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--background) / 0.72);
  color: hsl(var(--foreground));
  font-size: 0.8rem;
  outline: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.aw-cr-search input { padding-inline: 0.8rem 3rem; }
.aw-cr-field select { padding-inline: 0.75rem 2.2rem; }
.aw-cr-search input::placeholder { color: hsl(var(--muted-foreground)); opacity: 0.88; }
.aw-cr-search input:hover, .aw-cr-field select:hover { border-color: hsl(var(--primary) / 0.5); }
.aw-cr-search input:focus-visible, .aw-cr-field select:focus-visible { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.16); }
.aw-cr-search-clear {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
}
.aw-cr-search-clear:hover { background: hsl(var(--primary) / 0.1); }
.aw-cr-search-clear:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -4px; }
.aw-cr-reset, .aw-role-retry {
  min-block-size: 2.75rem;
  padding-inline: 0.85rem;
  border: 1px solid hsl(var(--primary) / 0.64);
  border-radius: var(--radius-sm);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 850;
}
.aw-cr-reset:hover, .aw-role-retry:hover { background: hsl(var(--primary) / 0.88); color: hsl(var(--primary-foreground)); }
.aw-cr-reset:focus-visible, .aw-role-retry:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.aw-cr-reset[hidden], .aw-cr-search-clear[hidden] { display: none; }

.aw-cr-results-row { display: flex; min-block-size: 1.65rem; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.75rem; }
.aw-cr-results { color: hsl(var(--muted-foreground)); font-size: 0.76rem; font-weight: 750; }
.aw-cr-status { min-block-size: 1.55em; margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.78rem; line-height: 1.55; }
.aw-cr-status[hidden] { display: block; visibility: hidden; }
.aw-cr-status[data-tone="error"] { color: hsl(var(--destructive)); }
html:not(.js) :where(.aw-cr-filters, .aw-cr-results-row, [data-role-groups]) { display: none; }

.aw-role-loading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.aw-role-loading span { display: block; min-block-size: 8.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card) / 0.68); }
.aw-role-group + .aw-role-group { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); }
.aw-role-group__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 0.75rem; padding-block-end: 0.72rem; border-block-end: 1px solid hsl(var(--border) / 0.72); }
.aw-role-group__copy { max-inline-size: 56rem; }
.aw-role-group__title { margin: 0; font-size: clamp(1.02rem, 2vw, 1.3rem); line-height: 1.35; }
[dir="rtl"] .aw-role-group__title { line-height: 1.55; }
.aw-role-group__description { margin: 0.32rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.76rem; line-height: 1.62; }
[dir="rtl"] .aw-role-group__description { line-height: 1.82; }
.aw-role-group__count { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: 0.72rem; font-weight: 750; }
.aw-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.72rem; }
.aw-role-card {
  --role-accent: var(--cr-cyan);
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr);
  gap: 0.78rem;
  min-inline-size: 0;
  min-block-size: 8.2rem;
  align-content: start;
  padding: 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card) / 0.68);
  box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.035);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.aw-role-group[data-role-category="amplification"] .aw-role-card { --role-accent: var(--cr-warm); }
.aw-role-group[data-role-category="combat-systems"] .aw-role-card { --role-accent: var(--cr-blue); }
.aw-role-group[data-role-category="utility"] .aw-role-card { --role-accent: var(--cr-silver); }
.aw-role-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--role-accent) 58%, hsl(var(--border))); background: hsl(var(--card)); }
.aw-role-card__icon {
  display: grid;
  inline-size: 3.15rem;
  block-size: 3.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-accent) 32%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--role-accent) 10%, transparent);
}
.aw-role-card__icon img { display: block; inline-size: 50px; block-size: 50px; object-fit: contain; }
.aw-role-card__icon--missing::before { content: "?"; color: var(--role-accent); font-size: 1rem; font-weight: 850; }
.aw-role-card__body { min-inline-size: 0; }
.aw-role-card__category { display: block; margin-block-end: 0.34rem; color: var(--role-accent); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
[dir="rtl"] .aw-role-card__category { letter-spacing: 0; }
.aw-role-card__title { margin: 0; font-size: 0.92rem; letter-spacing: -0.015em; line-height: 1.38; }
[dir="rtl"] .aw-role-card__title { letter-spacing: 0; line-height: 1.62; }
.aw-role-card__description { margin: 0.38rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.76rem; line-height: 1.66; }
[dir="rtl"] .aw-role-card__description { line-height: 1.88; }

.aw-role-terminal { padding: 1.1rem; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card) / 0.52); }
.aw-role-terminal__title { margin: 0; font-size: 1rem; }
.aw-role-terminal__body { margin: 0.4rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.8rem; line-height: 1.65; }
.aw-role-retry { margin-block-start: 0.8rem; }

.aw-cr-comparisons { display: grid; gap: 0.6rem; }
.aw-cr-comparison { display: grid; grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr); gap: 0.8rem 1.25rem; padding-block: 0.8rem; border-block-end: 1px solid hsl(var(--border) / 0.62); }
.aw-cr-comparison:last-child { border-block-end: 0; }
.aw-cr-comparison__label { margin: 0; color: var(--cr-warm); font-size: 0.78rem; font-weight: 850; line-height: 1.45; }
.aw-cr-comparison__body { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.81rem; line-height: 1.72; }
[dir="rtl"] .aw-cr-comparison__body { line-height: 1.92; }

.aw-cr-limits { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.aw-cr-limit-list { display: grid; gap: 0.58rem; margin: 0; padding-inline-start: 1.2rem; color: hsl(var(--muted-foreground)); font-size: 0.81rem; line-height: 1.72; }
[dir="rtl"] .aw-cr-limit-list { line-height: 1.92; }
.aw-cr-faq { display: grid; gap: 0.55rem; }
.aw-cr-faq details { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card) / 0.58); }
.aw-cr-faq summary { display: flex; min-block-size: 2.75rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.72rem 0.85rem; color: hsl(var(--foreground)); cursor: pointer; font-size: 0.8rem; font-weight: 800; list-style: none; }
.aw-cr-faq summary::-webkit-details-marker { display: none; }
.aw-cr-faq summary::after { content: "+"; flex: 0 0 auto; color: hsl(var(--primary)); font-size: 1rem; }
.aw-cr-faq details[open] summary::after { content: "−"; }
.aw-cr-faq summary:hover { background: hsl(var(--primary) / 0.08); }
.aw-cr-faq summary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -3px; }
.aw-cr-faq p { margin: 0; padding: 0.8rem 0.9rem; border-block-start: 1px solid hsl(var(--border) / 0.62); color: hsl(var(--muted-foreground)); font-size: 0.78rem; line-height: 1.72; }
[dir="rtl"] .aw-cr-faq p { line-height: 1.92; }

.aw-cr-source-note { margin-block-start: 1rem; padding: 0.85rem 1rem; border-inline-start: 3px solid var(--cr-navy); background: color-mix(in srgb, var(--cr-navy) 9%, transparent); color: hsl(var(--muted-foreground)); font-size: 0.75rem; line-height: 1.68; }
[dir="rtl"] .aw-cr-source-note { line-height: 1.88; }
.aw-cr-end-links { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; padding-block: 1.1rem 0; color: hsl(var(--muted-foreground)); font-size: 0.77rem; }
.aw-cr-end-links a { color: hsl(var(--foreground) / 0.82); font-weight: 750; }
.aw-cr-end-links a:hover { color: hsl(var(--primary)); }
.aw-cr-end-links a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }

.aw-cr-noscript { padding-block: 1.2rem; }
.aw-cr-noscript h2 { margin: 0; font-size: 1.1rem; }
.aw-cr-noscript p { margin: 0.45rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.8rem; line-height: 1.65; }
.aw-cr-noscript ul { columns: 3 14rem; margin: 0.8rem 0 0; padding-inline-start: 1.2rem; color: hsl(var(--foreground) / 0.82); font-size: 0.75rem; line-height: 1.75; }

html.light :where(.aw-cr-filters, .aw-role-card, .aw-role-terminal, .aw-cr-faq details) { background: hsl(var(--card) / 0.84); }

@media (min-width: 901px) {
  .aw-cr-reference picture {
    max-inline-size: 60rem;
    margin-inline: 0 auto;
  }
}

@container combat-roles-guide (max-width: 64rem) {
  .aw-cr-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .aw-cr-filters { grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr); }
  .aw-cr-reset { grid-column: 1 / -1; justify-self: start; }
  .aw-cr-limits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .aw-combat-roles-main { --cr-gutter: 0.75rem; padding-block-start: 0.7rem; }
  .aw-cr-intro { font-size: 0.84rem; }
  .aw-cr-toc { align-items: start; flex-direction: column; }
  .aw-cr-filters { grid-template-columns: minmax(0, 1fr); padding: 0.72rem; }
  .aw-cr-reset { grid-column: auto; inline-size: 100%; }
  .aw-role-loading { grid-template-columns: minmax(0, 1fr); }
  .aw-cr-comparison { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}

@media (max-width: 640px) {
  .aw-cr-breadcrumb { margin-block-end: 0.3rem; }
  .aw-cr-hero { padding: 1rem; }
  #aw-combat-roles-title { font-size: clamp(1.75rem, 8.8vw, 2.35rem); }
}

@media (max-width: 460px) {
  .aw-cr-principles { grid-template-columns: minmax(0, 1fr); }
  .aw-role-grid { grid-template-columns: minmax(0, 1fr); }
  .aw-role-group__head { align-items: start; flex-direction: column; gap: 0.35rem; }
  .aw-cr-reference img { border-radius: var(--radius); }
}

@media (max-width: 380px) {
  .aw-cr-byline { flex-direction: column; gap: 0.25rem; }
  .aw-role-card { grid-template-columns: 2.9rem minmax(0, 1fr); padding: 0.78rem; }
  .aw-role-card__icon { inline-size: 2.9rem; block-size: 2.9rem; }
  .aw-role-card__icon img { inline-size: 46px; block-size: 46px; }
}

@media (max-width: 360px) {
  body[data-aw-combat-roles-language] .aw-alerts-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-combat-roles-main * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .aw-cr-search input, .aw-cr-field select, .aw-cr-reset, .aw-role-retry, .aw-cr-faq details, .aw-role-card { forced-color-adjust: auto; }
  .aw-role-card__category, .aw-cr-section__kicker, .aw-cr-comparison__label { color: CanvasText; }
  .aw-role-card__icon { border: 1px solid CanvasText; background: Canvas; }
}