/* =======================================================================
   APT·AI (Advanced Penetration Testing with AI) — page add-on stylesheet.

   The page reuses assets/css/av-pentest.css in full — same tokens, same
   .ptp-* components — so it renders as a true sibling of the CompTIA
   PenTest+ page. This file only adds what that stylesheet has no rule for.

   LOAD ORDER:  main.css  →  av-pentest.css  →  av-aptai.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Box sizing.

   av-pentest.css relies on Bootstrap's global `*{box-sizing:border-box}`.
   Without it, `.ptp-form input{width:100%;padding:15px 16px;border:1px}`
   overflows its column by 34px. Bootstrap is loaded site-wide so this is
   belt-and-braces, but it makes the page independent of load order — and it
   is scoped, so it changes nothing outside .ptp.
   -------------------------------------------------------------------------- */

.ptp, .ptp *, .ptp *::before, .ptp *::after,
.ptp-mbar, .ptp-mbar *{ box-sizing:border-box; }

/* --------------------------------------------------------------------------
   1. Phase bar — six segments instead of five.

   av-pentest.css styles .ptp-wbar div:nth-child(1..5) with fixed flex ratios
   (13/21/17/35/14) and a five-step green ramp. This page's bar has six
   segments and different proportions, so both the ratios and a sixth colour
   stop are redefined here. Everything else about .ptp-wbar is inherited.

   Colour note: av-pentest.css runs its five segments #14532D → #15803D →
   #16A34A → #22C55E → #4ADE80. The two middle stops carry white text at
   4.4:1 and 3.3:1, both under WCAG AA. This ramp keeps the same green family
   but skips the unusable middle: dark grounds with white ink, light grounds
   with dark ink, every pair measured at 6.7:1 or better.
   The same fix is worth applying to /comptia-pentest-plus-course.
   -------------------------------------------------------------------------- */

.ptp-wbar--apt div:nth-child(1){ background:#052E16; flex:13 1 0%; color:#fff; }
.ptp-wbar--apt div:nth-child(2){ background:#14532D; flex:7  1 0%; color:#fff; }
.ptp-wbar--apt div:nth-child(3){ background:#166534; flex:20 1 0%; color:#fff; }
.ptp-wbar--apt div:nth-child(4){ background:#22C55E; flex:26 1 0%; color:#052E16; }
.ptp-wbar--apt div:nth-child(5){ background:#4ADE80; flex:20 1 0%; color:#052E16; }
.ptp-wbar--apt div:nth-child(6){ background:#86EFAC; flex:14 1 0%; color:#052E16; }

/* .ptp-stars is #F59E0B in av-pentest.css — 2.15:1 on the card ground, well
   under AA at 14px. Darkened here; also worth fixing on the PenTest+ page. */
.ptp .ptp-stars{ color:#B45309; }
[data-theme="dark"] .ptp .ptp-stars{ color:#FBBF24; }

/* the 7% segment is too narrow for a label on a phone — hide the text there
   rather than let it clip. The aria-label on .ptp-wbar carries the full
   breakdown for anyone who cannot see the bar. */
@media (max-width:720px){
  .ptp-wbar--apt div{ font-size:.72rem; }
  .ptp-wbar--apt div:nth-child(2){ font-size:0; }
}

/* --------------------------------------------------------------------------
   2. Phase key under the bar.
   -------------------------------------------------------------------------- */

.ptp-wkey{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin:14px 0 34px; padding:0; list-style:none;
}
.ptp-wkey li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--av-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.03em; color:var(--av-text-2);
}
.ptp-wkey i{ width:11px; height:11px; border-radius:3px; flex:none; display:block; }
.ptp-wkey li:nth-child(1) i{ background:#052E16; }
.ptp-wkey li:nth-child(2) i{ background:#14532D; }
.ptp-wkey li:nth-child(3) i{ background:#166534; }
.ptp-wkey li:nth-child(4) i{ background:#22C55E; }
.ptp-wkey li:nth-child(5) i{ background:#4ADE80; }
.ptp-wkey li:nth-child(6) i{ background:#86EFAC; }

/* --------------------------------------------------------------------------
   3. The AI line on module cards.

   Module cards reuse .ptp-dom wholesale. The one addition is a second pill
   under .ptp-lab carrying what AI does in that phase — this page's single
   biggest differentiator, so it gets the accent treatment rather than the
   neutral one .ptp-lab uses.
   -------------------------------------------------------------------------- */

.ptp-ai{
  display:inline-flex; align-items:flex-start; gap:8px;
  margin-top:8px; padding:8px 12px; border-radius:9px;
  background:var(--av-accent-tint); border:1px solid var(--av-accent-line);
  font-size:.82rem; line-height:1.5; color:var(--av-text);
}
.ptp-ai b{
  font-family:var(--av-mono); font-size:.66rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--av-accent); flex:none; padding-top:3px;
}

/* .ptp-dom is a flex column in av-pentest.css with .ptp-lab pinned to the
   bottom; the AI pill must sit with it rather than stretch full width. */
.ptp-dom .ptp-ai{ align-self:flex-start; }

/* --------------------------------------------------------------------------
   4. Module type tag.

   av-pentest.css renders .ptp-dom-w as a large mono figure (1.4rem/800) —
   right for a domain percentage, wrong for a one-word label once the per-module
   hours come off. This modifier turns the same slot into a pill matching
   .ptp-lab, so the card's top-right reads "THEORY" / "HANDS-ON" cleanly.
   -------------------------------------------------------------------------- */

.ptp-dom-w--tag{
  font-size:.64rem; font-weight:700; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  background:var(--av-accent-tint); border:1px solid var(--av-accent-line);
  color:var(--av-accent); white-space:nowrap;
}