/* AZRAVEL MU class guide — independent presentation within the existing guide shell. */
.cg-hub-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 390px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid #cfb47a30;
  border-radius: 8px;
  background-color: #101f2a;
  background-position: right center;
  background-size: cover;
}
.cg-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0b1b26f5 0%, #0d202ce8 32%, #10243191 60%, #10243108 100%);
}
.cg-hub-hero > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.cg-hub-copy { position: relative; z-index: 1; width: min(100%, 570px); }
.cg-hub-copy > .eyebrow,
.cg-hub-copy > small,
.cg-hub-copy > .g-overline {
  color: #e0c287;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
}
.g-article .cg-hub-copy h2 {
  margin: 12px 0 15px;
  color: #f4e5c0;
  font-family: var(--heading);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.g-article .cg-hub-copy > p { max-width: 460px; margin: 0; color: #becdd1; font-size: 15px; line-height: 1.65; }
.cg-hub-metrics { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 25px 0 22px; }
.cg-hub-metrics > div { min-width: 65px; padding-right: 24px; border-right: 1px solid #cbb17b36; }
.cg-hub-metrics > div:last-child { padding-right: 0; border-right: 0; }
.cg-hub-metrics strong { display: block; color: #ebce8d; font-size: 24px; font-weight: 600; line-height: 1.15; }
.cg-hub-metrics span { display: block; margin-top: 6px; color: #aebec6; font-size: 11px; line-height: 1.4; }
.cg-hub-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cg-hub-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border: 1px solid #dab97880; border-radius: 4px; color: #f3dfb2; background: #263e48c4; font-size: 12px; font-weight: 600; line-height: 1.35; transition: border-color .2s, background .2s; }
.cg-hub-actions a:first-child { color: #28303a; border-color: #eccf8d; background: linear-gradient(180deg, #ecd394, #c8a35e); }
.cg-hub-actions a:hover { border-color: #ffe5ac; background: #35515ce8; }
.cg-hub-actions a:first-child:hover { background: #f2dba5; }

.cg-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
.cg-pick {
  --class-accent: #d2b779;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: 0;
  height: 180px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #b9a27238;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 25%, #324550, #10212d 72%);
  color: #e6ddc8;
  text-align: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cg-pick::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, #0b1927 0%, #0e202eda 21%, #10243200 72%); }
.cg-pick > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .3s; }
.cg-pick > span { position: relative; z-index: 1; display: block; padding: 12px 5px; }
.cg-pick strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.cg-pick small { display: block; margin-top: 5px; color: #b4c2c7; font-size: 10px; font-weight: 400; line-height: 1.4; }
.cg-pick:hover,
.cg-pick[aria-expanded="true"] { border-color: var(--class-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--class-accent), transparent 65%); }
.cg-pick:hover > img { transform: scale(1.035); }
.cg-pick[aria-expanded="true"] strong { color: #f5dfa8; }
.cg-pick[aria-expanded="true"]::after { background: linear-gradient(0deg, #293124 0%, #162936d6 23%, #10243200 74%); }

#cg-selection:empty,
#cg-selection[hidden],
.cg-selection[hidden] { display: none; }
.cg-selection { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; min-width: 0; margin: 14px 0 28px; padding: 30px 25px; border: 1px solid #c6a46b4d; border-radius: 5px; background: radial-gradient(ellipse at 50% 70%, #3a4b472a, transparent 60%), #10232fee; }
.cg-selection > * { min-width: 0; }
.cg-selection-close { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #bba27440; border-radius: 4px; color: #d9ccb0; background: #10212cb3; font-size: 23px; line-height: 1; }
.cg-selection-close:hover { border-color: #e2c48e; background: #29414c; }
.cg-selection-info > small,
.cg-selection-info > .g-overline,
.cg-selection-info > .cg-role { color: #d1b573; font-size: 10px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; }
.g-article .cg-selection-info h2 { margin: 8px 0 14px; color: #f0dfb9; font-family: var(--heading); font-size: 28px; line-height: 1.2; }
.g-article .cg-selection-info p { margin: 0 0 15px; color: #b6c4c8; font-size: 14px; line-height: 1.65; }
.cg-selection-info dl,
.cg-selection-path dl { margin: 14px 0 0; }
.cg-selection-info dl > div,
.cg-selection-path dl > div { display: grid; grid-template-columns: minmax(66px, .8fr) minmax(0, 1.3fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #bea16a25; font-size: 12px; line-height: 1.5; }
.cg-selection-info dt,
.cg-selection-path dt { color: #94acb6; }
.cg-selection-info dd,
.cg-selection-path dd { margin: 0; color: #dfd8c3; overflow-wrap: anywhere; }
.cg-selection-portrait { display: block; width: 100%; max-height: 390px; margin: auto; object-fit: contain; }
.cg-selection-path { padding-top: 8px; }
.cg-selection-path ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; counter-reset: cg-profession; }
.cg-selection-path ol li { position: relative; display: block; min-height: 39px; padding: 2px 0 0 41px; color: #e6d8b8; font-size: 14px; line-height: 1.5; counter-increment: cg-profession; }
.cg-selection-path ol li > b { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #d2b2715c; border-radius: 50%; color: #e0c58d; background: #243c44; font-size: 12px; }
.cg-selection-path ol li + li::after { content: ""; position: absolute; left: 14px; top: -19px; width: 1px; height: 17px; background: #c5a56d38; }
.cg-selection-path ol small { display: block; color: #a3b8c1; font-size: 10px; }
.cg-selection-path > a { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 21px; padding: 11px 15px; border: 1px solid #d8b87570; border-radius: 4px; background: #ae92511a; color: #efd59b; font-size: 12px; font-weight: 600; text-align: center; }
.cg-selection-path > a:hover { background: #b99c502c; border-color: #ebca85; }

.cg-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; margin: 24px 0 35px; }
.cg-intro > * { min-width: 0; }
.cg-portrait { display: block; width: 100%; max-width: 480px; max-height: 540px; margin: 0 auto; object-fit: contain; }
.cg-portrait > img { width: 100%; max-height: 540px; object-fit: contain; }
.g-article .cg-spec-panel > p { margin: 0 0 19px; color: #bdcbd0; font-size: 15px; line-height: 1.7; }
.cg-spec-list { display: grid; gap: 8px; }
.cg-spec { display: flex; align-items: center; gap: 15px; min-width: 0; min-height: 74px; padding: 13px 15px; border: 1px solid #c9ac7538; border-radius: 4px; background: linear-gradient(100deg, #263b44, #142a38); }
.cg-spec > img { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
.cg-spec > div { flex: 1; min-width: 0; }
.cg-spec small { display: block; margin-bottom: 4px; color: #a3b9c3; font-size: 11px; line-height: 1.3; }
.cg-spec strong { display: block; color: #e7dfc9; font-size: 13px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.cg-attributes { margin: 0; }
.cg-attributes > div { display: grid; grid-template-columns: minmax(60px,.7fr) minmax(0,1.3fr); gap: 7px; padding: 3px 0; font-size: 12px; line-height: 1.45; }
.cg-attributes dt { color: #e5c88b; font-weight: 500; }
.cg-attributes dd { margin: 0; color: #c0cbd0; }

.cg-professions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 35px; }
.cg-professions-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-profession { min-width: 0; margin: 0; text-align: center; }
.g-article .cg-profession h3 { margin: 0 0 7px; color: #e9ca8b; font-size: 17px; line-height: 1.4; }
.g-article .cg-profession p { margin: 0 0 17px; color: #e1e2d8; font-size: 15px; line-height: 1.4; }
.cg-profession-player { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #b69b6a30; border-radius: 3px; background: #000; }
.cg-profession-player video { display: block; width: 100%; height: auto; aspect-ratio: 354 / 560; background: #000; object-fit: contain; }
.cg-video-toggle { position: absolute; z-index: 1; bottom: 12px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 90px; min-height: 40px; max-width: calc(100% - 24px); padding: 9px 14px; transform: translateX(-50%); border: 1px solid #dabd7f8c; border-radius: 4px; background: #142b37ed; color: #eedcaf; font-size: 12px; line-height: 1.35; box-shadow: 0 3px 15px #0008; }
.cg-video-toggle:hover { border-color: #f4d995; background: #2d4651; }
.cg-video-toggle svg { width: 15px; height: 15px; }

.cg-combo-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; margin: 18px 0 30px; }
.cg-combo-layout > * { min-width: 0; }
.cg-combo-diagrams { display: grid; gap: 14px; align-content: start; }
.cg-combo-diagrams figure { margin: 0; }
.cg-combo-diagrams img { display: block; width: 100%; height: auto; object-fit: contain; }
.cg-combo-player { min-width: 0; overflow: hidden; border: 1px solid #bfa46f3d; border-radius: 4px; background: #000; }
.cg-combo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.cg-combo-layout p,
.cg-combo-layout figcaption { color: #b7c7cc; font-size: 12px; line-height: 1.6; }

.cg-formulas { max-width: 100%; margin: 18px 0 0; }
.cg-formulas table,
table.cg-formulas { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid #baa27135; background: #10232b4d; text-align: left; }
.cg-formulas th,
.cg-formulas td { padding: 12px 17px; border-bottom: 1px solid #bda26b26; font-size: 13px; line-height: 1.65; vertical-align: middle; overflow-wrap: anywhere; }
.cg-formulas th { color: #e2c58a; background: #baa15e12; font-size: 12px; font-weight: 600; }
.cg-formulas th:first-child,
.cg-formulas td:first-child { width: 38%; color: #e0dece; }
.cg-formulas td:last-child { color: #bbccd2; }
.cg-formulas tr:nth-child(even) { background: #ffffff03; }
.cg-formulas tbody tr:last-child td { border-bottom: 0; }
.cg-formulas code { color: #c5d5d7; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.75; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.cg-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 0; padding: 0; color: #98adb7; font-size: 11px; line-height: 1.6; }
.cg-legend > span { display: inline-flex; gap: 5px; }
.cg-legend strong,
.cg-legend b { color: #d1ba87; font-weight: 500; }
.cg-page-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #c7ad762e; }
.cg-page-nav a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; max-width: 50%; color: #dbc497; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cg-page-nav a:last-child { margin-left: auto; text-align: right; }
.cg-page-nav small { color: #8da5b2; font-size: 10px; }
.cg-page-nav a:hover { color: #ffe5ae; }
.cg-pick:focus-visible,
.cg-video-toggle:focus-visible,
.cg-selection-close:focus-visible,
.cg-selection-path a:focus-visible,
.cg-page-nav a:focus-visible,
.cg-hub-actions a:focus-visible { outline: 2px solid #f2d593; outline-offset: 4px; }

@media (max-width: 1100px) {
  .cg-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cg-hub-hero { padding: 28px; }
  .cg-hub-copy { width: min(100%, 480px); }
  .cg-hub-copy > p { max-width: 390px; }
  .cg-selection { gap: 18px; padding: 28px 18px; }
  .g-article .cg-selection-info h2 { font-size: 24px; }
  .cg-selection-info dl > div,
  .cg-selection-path dl > div { grid-template-columns: 1fr; gap: 3px; }
  .cg-intro { gap: 18px; }
  .cg-spec { gap: 10px; padding: 11px; }
  .cg-spec > img { flex-basis: 34px; width: 34px; height: 34px; }
  .cg-professions { gap: 12px; }
  .cg-combo-layout { gap: 15px; }
}
@media (max-width: 700px) {
  .cg-hub-hero { align-items: flex-end; min-height: 420px; padding: 24px 19px; background-position: 65% center; }
  .cg-hub-hero::before { background: linear-gradient(0deg, #0d202dfb 0%, #0d202ded 38%, #10243188 74%, #10243124 100%); }
  .cg-hub-hero > img { object-position: 65% center; }
  .g-article .cg-hub-copy h2 { max-width: 340px; font-size: 30px; }
  .g-article .cg-hub-copy > p { font-size: 14px; }
  .cg-hub-metrics { gap: 12px 18px; margin: 21px 0; }
  .cg-hub-metrics > div { padding-right: 18px; }
  .cg-hub-metrics strong { font-size: 22px; }
  .cg-hub-actions a { flex: 1 1 130px; padding-inline: 12px; }
  .cg-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
  .cg-pick { height: 180px; }
  .cg-pick strong { font-size: 14px; }
  .cg-pick small { font-size: 11px; }
  .cg-selection { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 20px 24px; }
  .cg-selection-info { padding-right: 10px; }
  .cg-selection-portrait { max-width: 330px; max-height: 350px; }
  .cg-selection-info dl > div,
  .cg-selection-path dl > div { grid-template-columns: minmax(70px, .7fr) minmax(0, 1.3fr); gap: 12px; }
  .cg-selection-close { width: 40px; height: 40px; }
  .cg-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 15px; }
  .cg-portrait { max-width: 380px; max-height: 430px; }
  .cg-portrait > img { max-height: 430px; }
  .cg-spec { min-height: 73px; padding: 13px; gap: 14px; }
  .cg-spec > img { flex-basis: 40px; width: 40px; height: 40px; }
  .cg-professions,
  .cg-professions-2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cg-profession { width: min(100%, 354px); margin-inline: auto; }
  .cg-video-toggle { min-height: 44px; }
  .cg-combo-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cg-formulas th,
  .cg-formulas td { padding: 11px 10px; font-size: 12px; }
  .cg-formulas th:first-child,
  .cg-formulas td:first-child { width: 40%; }
  .cg-formulas code { font-size: 11px; }
  .cg-legend { gap: 6px 12px; font-size: 10px; }
  .cg-page-nav { gap: 14px; }
  .cg-page-nav a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-pick,
  .cg-pick > img,
  .cg-hub-actions a { transition: none; }
  .cg-pick:hover > img { transform: none; }
}