/* Aviation Courses Limited — site stylesheet.
 *
 * The merge, in CSS terms: ACL-AI.Master gave the structure (Bootstrap grid, navbar,
 * footer columns) and ACL.css gave the identity. Every colour below is either taken
 * from ACL/ACL.css or derived from it, and each one says which.
 *
 * ACL.css is 479 lines of fixed pixel widths with no media query anywhere, so it is
 * not carried across verbatim — the values are, the layout is not.
 */

:root {
  /* --- Straight from ACL/ACL.css --- */
  --acl-link: #3300ff;          /* a:link / a:visited */
  --acl-link-hover: #6699ff;    /* a:hover */
  --acl-ink: #333366;           /* ACL.Master body color */
  --acl-title: #141424;         /* .title */
  --acl-muted: #999999;         /* .copyright */

  /* --- Derived from --acl-ink, to give the header and footer the classic site's
         navy rather than Bootstrap's default blue and near-black --- */
  --acl-navy: #2b2d55;
  --acl-navy-dark: #191a33;
  --acl-navy-light: #3d4079;

  --acl-surface: #ffffff;
  --acl-page: #f4f5f9;

  /* Bootstrap's primary, repointed at the ACL navy so buttons, links and focus rings
     match the chrome instead of fighting it. */
  --bs-primary: var(--acl-navy);
  --bs-primary-rgb: 43, 45, 85;
  --bs-link-color: var(--acl-link);
  --bs-link-hover-color: var(--acl-link-hover);
  --bs-link-color-rgb: 51, 0, 255;
}

body {
  background-color: var(--acl-page);
  color: var(--acl-ink);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* ACL.css's stack */
  font-size: 1rem; /* ACL.css set 18px on body; that is the h1 size here instead */
}

a {
  color: var(--acl-link);
  text-decoration: none;
}

a:hover {
  color: var(--acl-link-hover);
  text-decoration: underline; /* ACL.css set text-align:right on a:hover, which is
                                 not a hover effect — it reflowed the link. Dropped. */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--acl-title);
  font-weight: 700;
}

.skip-link {
  position: absolute;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background: var(--acl-navy);
  color: #fff;
}

/* --- Header ---------------------------------------------------------------- */

.acl-header {
  background-color: var(--acl-navy);
  color: #fff;
  padding: 0.75rem 0;
}

.acl-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.acl-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  text-decoration: none;
}

.acl-brand:hover {
  color: #fff;
  text-decoration: none;
}

.acl-brand__logo {
  height: 56px;
  width: auto;
  object-fit: contain; /* ACL-AI.css's .fixed-logo rule, which existed for this reason */
}

.acl-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.acl-brand__name {
  font-size: 1.35rem;
  font-weight: 700;
}

.acl-brand__tagline {
  font-size: 0.8rem;
  color: #c9cbe4;
}

.acl-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.acl-account__welcome {
  font-weight: 700;
}

/* --- Banner ---------------------------------------------------------------- */
/* ACL.Master set Mechanicsbanner.jpg as the background of a 76px-high table row on a
   1300px-wide table. Below 1300px the .NET site simply clipped it. */

.acl-banner {
  height: 96px;
  background-image: url("/static/images/legacy/Mechanicsbanner.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--acl-navy-light);
}

@media (max-width: 576px) {
  .acl-banner { height: 60px; }
}

/* --- Navigation ------------------------------------------------------------ */

.acl-nav {
  background-color: var(--acl-navy-dark);
  padding: 0;
}

.acl-nav .nav-link {
  color: #e7e8f4;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;  /* the classic menu was ALL CAPS in the markup itself */
  font-size: 0.82rem;
  padding: 0.85rem 0.9rem;
}

.acl-nav .nav-link:hover,
.acl-nav .nav-link:focus {
  color: #fff;
  background-color: var(--acl-navy-light);
  text-decoration: none;
}

.acl-nav .dropdown-menu {
  border: 0;
  border-radius: 0;
  background-color: var(--acl-navy-dark);
}

.acl-nav .dropdown-item {
  color: #e7e8f4;
  font-size: 0.9rem;
}

.acl-nav .dropdown-item:hover,
.acl-nav .dropdown-item:focus {
  color: #fff;
  background-color: var(--acl-navy-light);
}

.acl-nav .navbar-toggler {
  margin: 0.5rem 0;
  border-color: rgba(255, 255, 255, 0.4);
}

.acl-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

/* --- Main ------------------------------------------------------------------ */
/* ACL-AI.css styled <main> as a white card with a soft shadow. Kept. */

main {
  background: var(--acl-surface);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Footer ---------------------------------------------------------------- */

.acl-footer {
  background-color: var(--acl-navy-dark);
  color: #d8d9ea;
  padding: 1.75rem 0 1rem;
  font-size: 0.9rem;
}

.acl-footer a {
  color: #fff;
  text-decoration: none;
}

.acl-footer a:hover {
  color: var(--acl-link-hover);
  text-decoration: underline;
}

.acl-footer__heading {
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}

.acl-footer__legal {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
  color: var(--acl-muted);
}

/* --- The classic page layout ----------------------------------------------- */
/* ACL/ACLIndex.aspx and its siblings: a dark sidebar column beside justified body
 * text. Used by the home page via partials/classic_sidebar.html.
 *
 * The legacy navy came from background-main.gif — a 1500px image whose left ~190px
 * are a navy-to-black gradient, tiled behind the page. Anything narrower than the
 * image clipped it, so on a laptop the sidebar text ran off the painted area onto
 * white. Reproduced as a gradient on the element itself, which cannot come unstuck
 * from the content it is behind.
 */

/* The navy has to reach the card's edge, as the legacy column reached the window edge,
 * which means <main>'s padding has to go on this page.
 *
 * NOT with a negative margin. That was the first attempt and it overflowed the viewport
 * by 12px: `main { padding: 1.5rem }` looks like it sets 24px on all four sides, but
 * <main> also carries Bootstrap's .container, and a class beats an element selector — so
 * the horizontal padding is really the 12px gutter and only the vertical is 24px. A
 * -1.5rem margin therefore overshoots sideways, and on a phone that is a horizontal
 * scrollbar on the whole document.
 *
 * Removing the padding cannot be off by an amount. Browsers without :has() keep the
 * padding and get an inset panel — the layout, minus the bleed.
 */
main:has(> .acl-classic) {
  padding: 0;
  overflow: hidden;  /* keeps the square-cornered sidebar inside main's 8px radius */
}

.acl-classic {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .acl-classic {
    flex-direction: row;
    align-items: stretch;
  }

  /* 170px, measured off the live page — the legacy cell is width="150" plus padding,
     and it does not grow with the window. A percentage column would be 330px here and
     480px on a wide monitor, which is a different page. */
  .acl-classic__side {
    order: -1;
    flex: 0 0 190px;
  }

  .acl-classic__main {
    flex: 1 1 auto;
    min-width: 0;  /* without this a long unbroken string makes the flex item overflow
                      rather than wrap, and the sidebar gets squeezed instead */
  }
}

.acl-classic__main {
  padding: 1.5rem 1.75rem;
  /* The legacy content cell is width="70%", so there is white to the right of the text
     on any wide screen. That measure is also why the justified setting reads as well as
     it does; full-width justified Times at 18px is a wall. */
  max-width: 900px;
}

/* Body copy is TIMES NEW ROMAN, and that is not an oversight being reproduced blindly.
 * ACL.css sets a font-family on its classes and never on body, so unclassed text falls
 * through to the browser default serif. Measured on the live page: Times New Roman,
 * 18px, #333366, justified. It is the single most recognisable thing about the page —
 * headings in bold Verdana over justified serif paragraphs — so it is carried.
 *
 * Scoped to this block. The rest of the merged site stays on ACL.css's Verdana stack.
 */
.acl-classic__main {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--acl-ink);
}

.acl-classic__aside {
  /* Sampled from background-main.gif: #4b4b6b at the left edge through #1a1a2e. */
  background: linear-gradient(160deg, #4b4b6b 0%, #2b2d55 45%, #14142b 100%);
  color: #fff;
  padding: 1.5rem 1rem;
  height: 100%;
}

@media (min-width: 992px) {
  .acl-classic__aside {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  /* corner.gif was a 227x40 strip with a white circle punched out of its right end,
     faking a rounded join where the navy column met the white content. A radius on the
     content does the same job at any width, and does not need an image. */
  .acl-classic__main {
    border-top-left-radius: 36px;
    background: var(--acl-surface);
  }
}

.acl-classic__aside a {
  color: #fff;
}

.acl-classic__logo {
  display: block;
  text-align: center;
  margin-bottom: 1.25rem;
}

.acl-classic__logo img {
  max-width: 100%;
  height: auto;
}

.acl-classic__center {
  text-align: center;
}

/* The gold call-out. #FFCC33 is the legacy table cell's BackColor. */
.acl-classic__gold {
  background-color: #ffcc33;
  padding: 0.5rem;
  margin: 0 auto 1.25rem;
  max-width: 220px;
  text-align: center;
}

.acl-classic__gold a {
  color: #141424;
  font-weight: 700;
  font-size: 0.95rem;
}

.acl-classic__gold hr {
  margin: 0.4rem 0;
  border-top: 1px solid rgba(20, 20, 36, 0.4);
  opacity: 1;
}

/* <font color="#FFCC33" size="+1"> on "Jobs Board" and "Our Courses:". */
.acl-classic__gold-link {
  color: #ffcc33;
  font-weight: 700;
  font-size: 1.1rem;
}

.acl-classic__gold-link:hover {
  color: #ffdd77;
}

/* .navlink in ACL.css */
.acl-classic__navlink {
  color: #ccc;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

/* The course list was <b><font COLOR="#CCCCCC" size="-1"> lines separated by <br>. */
.acl-classic__courses {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
  color: #ccc;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  line-height: 1.5;
}

/* .whitetext in ACL.css — white, 16px geneva, not bold. Per-page sidebar copy. */
.acl-classic__sidenote {
  color: #fff;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  margin: 1.25rem 0;
  line-height: 1.4;
}

/* The airliner photo sat in a 1px table with bordercolor #CFCFE0. */
.acl-classic__framed {
  border: 1px solid #cfcfe0;
  max-width: 100%;
  height: auto;
}

/* .navphonetitle in ACL.css: white, bold, 16px geneva/verdana. */
.acl-classic__contact {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
  margin-top: 1.5rem;
}

.acl-classic__contact p {
  margin-bottom: 0.85rem;
}

.acl-classic__veteran {
  color: gold; /* style="color:gold" in the legacy markup, on .whitetitle */
  font-weight: 700;
}

/* Content column ------------------------------------------------------------ */

/* .title in ACL.css — 24px verdana bold, #141424, and justified like the body text. */
.acl-classic__title {
  color: var(--acl-title);
  font-family: Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: justify;
  margin-bottom: 0;
}

/* .subtitle in ACL.css — 22px geneva/verdana bold, #000066, LEFT aligned even though
   everything around it is justified. The red variants are inline styles on the two
   course call-outs. */
.acl-classic__subtitle {
  display: block;
  color: #000066;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 0.25rem;
}

.acl-classic__subtitle--red {
  color: #c00;  /* legacy "red"; darkened for contrast on white — see PORT_NOTES */
}

/* .just in ACL.css. The legacy body text is justified throughout, which is a large
   part of why the page reads the way it does. */
.just {
  text-align: justify;
}

/* ...but not on a phone. Justification with no hyphenation needs a line long enough to
   absorb the slack; at 390px it opens rivers of white space through the paragraph and
   stretches a three-word heading across the screen. The legacy site had no viewport
   meta at all, so it never rendered at this width and there is nothing to be faithful
   to here. */
@media (max-width: 767.98px) {
  .just,
  .acl-classic__title {
    text-align: left;
  }
}

/* .style1 in ACL.css — #990000 verdana bold italic. Every approval was wrapped in
   it, one <li> at a time, with a trailing <br> for spacing. */
.acl-classic__approvals {
  padding-left: 1.5rem;
}

.acl-classic__approvals li {
  color: #990000;
  font-family: Verdana, Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0.6rem;
}

/* .smalltitle in ACL.css — #000066, 16px geneva bold. The sub-heading inside a
   section, under .subtitle. */
.acl-classic__smalltitle {
  color: #000066;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* .biglink in ACL.css — 16px verdana bold italic, underlined only on hover. It marks
   the course headings and the PDF downloads. */
.acl-classic__biglink {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  text-decoration: none;
}

.acl-classic__biglink:hover {
  text-decoration: underline;
}

/* <font COLOR="#CC0000"> on the military discount note. */
.acl-classic__note {
  color: #cc0000;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* new.jpg, the "New" flash beside the oral review link. class="floatleft" in ACL.css
   is float:left with a 15px right margin. */
.acl-classic__new {
  float: left;
  margin: 0 15px 5px 0;
}

/* The tuition and topic tables were BORDER="1" with no styling of their own, so they
   rendered in the browser's default 2px outset grey. Kept as a bordered grid because
   that IS the look; the border colour matches the rest of the page instead. */
.acl-classic__prices,
.acl-classic__topics {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.acl-classic__prices td,
.acl-classic__topics td {
  border: 1px solid #cfcfe0;
  padding: 0.35rem 0.6rem;
  vertical-align: top;
}

/* The legacy price cell is <div align="right"> in a width="18%" column. */
.acl-classic__prices td:last-child {
  width: 8rem;
  text-align: right;
  white-space: nowrap;
}

.acl-classic__topics td {
  width: 50%;
}

/* The tuition page's fraud warning: bgcolor="#FFFFCC" with <font COLOR="#CC0000">,
   sitting above the page's own <h1>. It is the most important thing on the page and
   the legacy site put it first, so it stays first. */
.acl-classic__notice {
  background-color: #ffffcc;
  border: 1px solid #e0d48a;
  color: #cc0000;
  font-weight: 700;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.acl-classic__notice p:last-child {
  margin-bottom: 0;
}

/* .phonetitle in ACL.css — #000000, 16px geneva bold. The course-family line under
   the tuition heading. */
.acl-classic__phonetitle {
  color: #000;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* The tuition table's price column carries fee RANGES as well as amounts
   ("$800 to $1000"), so it cannot be the narrow nowrap column the courses page uses. */
.acl-classic__prices--tuition td:last-child {
  width: auto;
  min-width: 8rem;
  white-space: normal;
}

/* BGCOLOR="#FFFF99" on the discounts row spanning the foot of the table. */
.acl-classic__prices-footer td {
  background-color: #ffff99;
  color: #000066;
  font-weight: 700;
  text-align: center;
}

/* <P ALIGN="RIGHT"> on every "Back to Top of Page". */
.acl-classic__totop {
  text-align: right;
}

/* paragraph-line.jpg, a 350x3 gradient rule. */
.acl-classic__rule {
  display: block;
  max-width: 100%;
  height: 3px;
  margin: 0.75rem 0;
}

.acl-classic__rule--full {
  width: 100%;
}

/* --- Port scaffolding ------------------------------------------------------ */
/* Delete this block with the last stub. */

.acl-stub {
  border: 1px dashed var(--acl-navy-light);
  border-radius: 6px;
  padding: 1.25rem;
  background: #fbfbfe;
}

.acl-stub__source {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  color: var(--acl-title);
}

/* Testimonials — the quote blocks on /testimonials. The legacy page is a bare <p>
   per quote with the attribution after a <br>, separated by rule images. */
.acl-classic__quote {
  margin: 0 0 0.5rem;
}

.acl-classic__quote footer {
  text-align: right;
  font-weight: 700;
  padding-right: 1rem;
}

/* The president's photo on /mission, alongside the letter link. */
.acl-classic__portrait {
  float: right;
  margin: 0 0 0.5rem 1rem;
  max-width: 40%;
  height: auto;
}

/* A notice that is information rather than a warning — the practice-test generator
   not being ported yet. Same shape as the tuition page's fraud panel so the two read
   as one system, without borrowing its alarm. */
.acl-classic__notice--quiet {
  background-color: #eef0f8;
  border-color: #c9cbe4;
  color: var(--acl-ink);
}

/* class="floatright" on the legacy locations map — a 250px table floated beside the
   Texas paragraph. */
.acl-classic__map {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .acl-classic__map { float: none; margin: 0 0 1rem; width: 100%; }
}

/* --- Forms ----------------------------------------------------------------- */
/* The legacy forms are <asp:TextBox> in table cells with .shadeform — a 180px fixed
   width and a background GIF. Same shape (label above field, one per row), sized in
   relative units so it survives a phone. */

.acl-form {
  max-width: 34rem;
}

.acl-form__row {
  margin-bottom: 0.85rem;
}

.acl-form__row label {
  display: block;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000066;
  margin-bottom: 0.15rem;
}

.acl-form__row input,
.acl-form__row select,
.acl-form__row textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid #9a9cc0;
  background: #fbfbfe;
  font-family: inherit;
  font-size: 1rem;
}

.acl-form__row input:focus,
.acl-form__row select:focus,
.acl-form__row textarea:focus {
  outline: 2px solid var(--acl-navy-light);
  outline-offset: 1px;
}

.acl-form__required {
  color: #cc0000;
}

.acl-form__note {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.acl-form__submit {
  background: var(--acl-navy);
  color: #fff;
  border: 0;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}

.acl-form__submit:hover {
  background: var(--acl-navy-light);
}

/* The honeypot. Not `display:none` — some bots skip hidden inputs, and some screen
   readers would too; it is off-screen, out of the tab order and aria-hidden instead. */
.acl-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Registration / profile — StudentRegistration.aspx. The legacy page reports every
   failure through a JavaScript alert(), one at a time; these are the in-page
   equivalents. Colours are the classic palette already defined above, so the form
   does not arrive looking like it came from the other site. */

.acl-form__errors {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.acl-form__errors li + li {
  margin-top: 0.3rem;
}

/* The username on the profile form. The legacy page renders a disabled TextBox, whose
   value still posts back; this is text, so there is no field to submit or tamper
   with. Sized to sit level with the inputs above and below it. */
.acl-form__static {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 700;
}

/* Cart, invoice and enrolment tables. One class for all three: they show the same
   shape of thing and a student sees them minutes apart, so they should not look like
   they came from different sites. */

.acl-cart {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}

.acl-cart th,
.acl-cart td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #cdd0e4;
  text-align: left;
  vertical-align: top;
}

.acl-cart thead th {
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #000066;
  border-bottom: 2px solid #9a9cc0;
}

.acl-cart tfoot th,
.acl-cart tfoot td {
  border-top: 2px solid #9a9cc0;
  border-bottom: 0;
}

/* Money and quantities right-align so the columns can be read down. */
.acl-cart__num {
  text-align: right;
  white-space: nowrap;
}

.acl-cart__note {
  display: block;
  font-size: 0.8rem;
  color: #555;
}

.acl-cart__qty {
  width: 4.5rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid #9a9cc0;
  background: #fbfbfe;
  font-family: inherit;
}

/* A destructive action should not look like the primary one. */
.acl-cart__remove {
  background: none;
  border: 0;
  padding: 0;
  color: #99000f;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.acl-cart__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0 0.5rem;
}

.acl-form__submit--small {
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}

/* Section headings inside a portal page — "Your account", "Your courses". Introduced
   with the cart template and left UNDEFINED until now, so the h2s were falling back to
   the browser default: a class that reads as deliberate styling and applies none is
   worse than no class at all.
   
   Sized between .acl-classic__title (24px) and body copy, and LEFT aligned rather than
   justified: these are one-line labels, and justifying a short line stretches it. */
.acl-classic__heading {
  color: var(--acl-title);
  font-family: Verdana, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 1.4rem 0 0.4rem;
}

/* The first one under a page title should not push away from it. */
.acl-classic__title + .acl-classic__heading,
.acl-classic__heading:first-child {
  margin-top: 0.6rem;
}

/* Sitting a practice test. Questions are wide blocks rather than table rows: a stem
   can run to several lines and the three answers have to sit under it, which a table
   cell fights. */

.acl-test__question {
  border: 1px solid #cdd0e4;
  border-left: 4px solid #9a9cc0;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: #fdfdff;
}

/* Marked papers. Colour is a reinforcement, never the only signal — every question
   also carries a sentence saying what happened, for anyone who cannot see the
   difference between these two borders. */
.acl-test__question--right { border-left-color: #2e7d32; }
.acl-test__question--wrong { border-left-color: #99000f; }

.acl-test__stem {
  margin: 0 0 0.6rem;
}

/* An FAA figure on a practice question. The artwork is scanned at whatever size the
   FAA published it -- some are 3000px wide -- so it is bounded by the column rather
   than allowed to set the page width. Clicking opens the full-size original, which is
   what a student wants for a wiring diagram they are being asked to read. */
.acl-test__figure {
  margin: 0 0 0.8rem;
}

/* Thumbnail size, from GenerateTest.aspx's inline style: height 200px, width auto,
   object-fit contain. The full-size image lives in the modal. */
.acl-test__figure img {
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid #ccc;
  background: #fff;
  padding: 2px;
  cursor: zoom-in;
}

/* The AI tutor's explanation. Model output is sanitised in services/tutor.py; this
   only has to make a wall of prose readable. */
.acl-test__ai {
  margin: 0 0 1rem;
  padding: 0.8rem;
  border: 1px solid #ccc;
  background: #fafafa;
  line-height: 1.5;
}

/* The pseudo-headings inside an imported explanation. AIResponse.aspx wrote them as
   `<span style='font-size:1.25em; font-weight:bold;'>`; the sanitiser keeps the tag and
   drops the attribute, so the two values come back here rather than arriving from model
   output. It is the only span the legacy ever emitted. */
.acl-test__ai span {
  font-size: 1.25em;
  font-weight: bold;
}

/* Live marking — GenerateTest.aspx colours a question's marker the moment an answer is
   picked. Green and red are never the ONLY signal: the marker keeps its number, and the
   chosen answer is outlined as well as tinted, so the feedback survives colour blindness
   and a monochrome print. */
.acl-test__progress {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 6.5rem;
  overflow-y: auto;
  padding: 0.5rem;
  margin-bottom: 1rem;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

.acl-test__progress-item {
  min-width: 1.9rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid #999;
  background: #f2f2f2;
  color: #333;
  font-size: 0.8rem;
  text-align: center;
  text-decoration: none;
}

.acl-test__progress-item.is-right,
.acl-test__choice.is-right {
  border-color: #1a7f37;
  background: #d7f0dc;
  color: #10471f;
}

.acl-test__progress-item.is-wrong,
.acl-test__choice.is-wrong {
  border-color: #b42318;
  background: #fbdad7;
  color: #6b140e;
}

.acl-test__question.is-right {
  border-left: 4px solid #1a7f37;
}

.acl-test__question.is-wrong {
  border-left: 4px solid #b42318;
}

/* From GenerateTest.aspx's own stylesheet: the progress markers are jump links. */
html {
  scroll-behavior: smooth;
}

/* The per-chapter breakdown on the results page. The bar is decoration over figures
   that are already there in text, so colour carries nothing on its own -- the
   percentage and the count sit beside it either way. */
.acl-results__test {
  margin: 1.2rem 0 0.4rem;
  font-size: 1rem;
}

.acl-results__bar {
  display: block;
  width: 100%;
  min-width: 6rem;
  height: 0.7rem;
  background: #eee;
  border: 1px solid #ccc;
}

.acl-results__fill {
  display: block;
  height: 100%;
  background: #1a7f37;
}

/* Below the FAA pass mark. */
.acl-results__fill--weak {
  background: #b42318;
}

/* The study aids: Show explanation, and Ask AI beside it. */
.acl-test__aids {
  margin: 0.6rem 0 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* The modal's copy is the one meant to be read, so it is not thumbnailed. */
.modal-body .img-fluid {
  max-width: 100%;
  height: auto;
}

.acl-test__choice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.2rem 0;
  cursor: pointer;
}

.acl-test__choice input {
  margin-top: 0.3rem;
  flex: none;
}

/* The right answer, once the paper is marked. */
.acl-test__choice--correct {
  font-weight: 700;
  color: #2e7d32;
}

.acl-test__verdict {
  margin: 0.6rem 0 0;
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

.acl-test__explanation {
  margin: 0.5rem 0 0;
  padding: 0.6rem;
  font-size: 0.9rem;
  border-left: 3px solid #ccc;
  background: #fafafa;
}

.acl-test__explanation p {
  margin: 0 0 0.4rem;
}

.acl-test__explanation p:last-child {
  margin-bottom: 0;
}

.acl-test__reference {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: #555;
}

.acl-test__score {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* Two start buttons side by side rather than stacked in a table cell. */
.acl-test__start {
  display: flex;
  gap: 0.4rem;
}

/* Narrow numeric inputs in the back-office tables, so a price list of forty rows
   stays a table rather than becoming a column of full-width boxes. */
.acl-price { width: 6rem; }
.acl-days  { width: 4.5rem; }