/* =========================
   Layout sizing
   ========================= */
#eligibility-module.tb-wrap { margin-bottom: 25px; }
.panel.panel--narrow { max-width: 720px; margin: 0 auto; }
/*
 * Widened 960 -> 1200 on Sep 24 2026 so three Overview cards can be as large as the single
 * full-width mobile card. At 1200 the carousel viewport is ~1104px (the arrows and their gaps
 * take ~96), giving cards of ~357px against mobile's ~370.
 *
 * If the surrounding HubSpot page template is narrower than 1200 the panel simply fills it and
 * the cards scale down - nothing breaks, they just get smaller again.
 *
 * NOTE: this declaration is overridden further down by the "Intro width alignment" block, which
 * is more specific and later. Change BOTH or nothing happens.
 */
.panel.panel--medium { max-width: 1200px; margin: 0 auto; }

/* Horizontal padding used inside table cells (keeps headings/tabs aligned) */
#eligibility-module {
  --tb-cell-x: 8px;
  /* Selected-card ring colour. Single source - used by .program-card.selected and by the
     image-card override further down, so it only has to be changed here. */
  --tb-card-select: #ffaa00;
}

/* =========================
   Questions layout
   ========================= */
.form-row { margin-bottom: 1rem; }

/* Base: full-width on small screens */
.tb-input { width: 100%; padding: .6rem .75rem; }
.tb-radio-row { display: flex; gap: 1rem; margin-top: .5rem; }

/* Center labels to the same column as the controls */
#eligibility-module #questions-panel .form-row label{
  display: block;
  margin: 0 auto .4rem auto;
  width: 100%;
  text-align: left;
}

/* Tablet/desktop: match the input column width/cap */
@media (min-width: 768px){
  #eligibility-module #questions-panel .form-row label{
    width: 50%;
    max-width: 520px;
  }
}

/* Center the controls (make inputs block so margin:auto works) */
#eligibility-module #questions-panel .tb-input{
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#eligibility-module #questions-panel .tb-radio-row{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

/* Tablet/desktop: cap width so they don’t look stretched */
@media (min-width: 768px){
  #eligibility-module #questions-panel .tb-input{
    width: 50%;
    max-width: 520px;
  }
  #eligibility-module #questions-panel .tb-radio-row{
    width: 50%;
    max-width: 520px;
  }
}

/* Center question controls in the panel visually */
#eligibility-module #questions-panel .form-row .tb-input { margin-left: auto; margin-right: auto; }

/* =========================
   View results button
   ========================= */
.form-actions { display: flex; justify-content: center; margin-top: 1rem; }
.tb-btn { padding: .75rem 1.25rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.tb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.tb-btn--primary:not([disabled]) { background:#00A884; border-color:#008080; color:#fff; }

/* =========================
   Answers summary (stacked lines + rule)
   ========================= */
#eligibility-module .answers-summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding-bottom:.75rem;border-bottom:1px solid #e6edf5;margin-bottom:1.25rem;
}
#eligibility-module .answers-lines{display:flex;flex-direction:column;gap:0;}
#eligibility-module .answers-lines>div{margin:0;line-height:1.25;}
#eligibility-module .change-link{margin-left:auto;align-self:flex-start;text-decoration:none;}

/* =========================
   Tabs
   ========================= */
.tabs{display:flex;gap:.5rem;margin:.75rem 0 1rem;}
.tab{border:1px solid #d6d6d6;background:#f7f7f7;padding:.5rem .75rem;border-radius:6px;cursor:pointer;}
.tab.active{background:#e9f0ff;border-color:#bcd0ff;}

/* Panels */
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* =========================
   Tables (base)
   ========================= */
.table-wrap{overflow-x:auto;}
.results-table{width:100%;border-collapse:separate;border-spacing:0;}
.results-table thead th{text-align:left;padding:.75rem var(--tb-cell-x);border-bottom:1px solid #e5e7eb;}
.results-table tbody td{padding:.75rem var(--tb-cell-x);border-bottom:1px solid #f0f2f5;}
/*
 * The Select column is hidden but NOT removed. The radio inside it is the selection state
 * carrier: a row click finds it, checks it and dispatches its change event, which is what calls
 * handleSelect(). Its shared name="program-choice" is also what stops two programs being
 * selected across different tables. Deleting the cell would break both.
 * Hidden Sep 24 2026 so the Teach Compare table fits the 960px panel without scrolling.
 */
#eligibility-module .results-table .select-col{ display:none !important; }

/* Row highlight when selected (desktop + general) */
#eligibility-module table tbody tr[data-selected="true"]{background:#6FA8DC;}
#eligibility-module table tbody tr[data-selected="true"] td{color:#083054;}

/* Radio in last column */
.program-radio-wrap{display:flex;justify-content:center;align-items:center;}
.program-radio{width:18px;height:18px;}

/* Space before "Other" table */
#other-results,
#volunteer-results{margin-top:2rem;}

/* =========================
   Overview cards (all programs)
   ========================= */
.card-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:641px){
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:992px){
  .card-grid{ grid-template-columns: repeat(3, 1fr); }
}
.program-card{
  background:#fff;
  border-radius:14px;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  transition:box-shadow .2s, border-color .2s, transform .2s;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  position:relative;   /* containing block for the .pc-tag pill */
  /* Load-bearing for the carousel: the flex-basis below is a share of the track width, and
     without this the 1.25rem padding and 1px border are added on top of it, so three cards
     overflow the viewport. It also makes aspect-ratio apply to the border box, giving a true
     3:4 card rather than 3:4 of the content area. */
  box-sizing:border-box;
}
.program-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.16); }
/*
 * Orange, and drawn as a ring rather than a border. A 1px border was invisible against a photo,
 * and thickening it would change the card's inner width. box-shadow paints outside the box, so
 * the ring is 3px thick and costs no layout.
 */
.program-card.selected{
  box-shadow:0 0 0 3px var(--tb-card-select), 0 14px 28px rgba(255,170,0,.40);
  border-color:var(--tb-card-select);
}
/* .pc-icon was removed from the cards on Sep 24 2026 - the flag competed with the photo. */
.program-card .pc-title{
  text-align:center;font-weight:700;margin:0;
  min-height: 2.6em; display:flex; align-items:flex-end; justify-content:center; line-height:1.3;
}
.program-card .pc-blurb{ margin:0;color:#333;line-height:1.4;text-align:left; }

/* =========================
   Overview card with a featured image (Sep 22 2026)
   Applied only when programs_catalog carries a featured_image; without one the card keeps the
   plain white layout above.
   ========================= */
.program-card--image{
  position: relative;
  overflow: hidden;
  /*
   * The base card has a 1px rgba(0,0,0,.06) border for definition on white. background-clip
   * defaults to border-box, so on a photo card that border paints as a 6%-black tint ON TOP of
   * the image - a faint grey line. It is invisible along the bottom and lower sides where the
   * scrim is already dark, but the top edge sits over the brightest part of the photo and runs
   * the full width, which is the line that showed.
   *
   * Kept at 1px and made transparent rather than removed, so the card's inner width does not
   * shift. .program-card.selected is more specific and still paints its own border colour.
   */
  border-color: transparent;
  /*
   * THE hairline fix. background-origin defaults to padding-box, so the image is sized and
   * positioned to the padding box and never paints into the 1px border ring - while
   * background-clip (border-box) means the background COLOUR does. The result was a 1px
   * #1b2432 line tracing every card: obvious along the top and sides where the photo is bright,
   * invisible along the bottom where the scrim is already dark.
   *
   * Proven by temporarily setting background-color to red and the border to 6px, which drew a
   * thick red frame around every card. border-box origin sends the image all the way out.
   */
  background-origin: border-box;
  background-color: #1b2432;        /* shows while the image loads, and behind a transparent PNG */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end;        /* content sits over the darkest part of the scrim */
  color: #fff;
  gap: .6rem;
  /* Fallback for browsers without aspect-ratio (older mobile Safari): a fixed floor instead. */
  min-height: 420px;
}
@supports (aspect-ratio: 3 / 4){
  .program-card--image{ aspect-ratio: 3 / 4; min-height: 0; }
}

/*
 * 3:4 everywhere. The desktop cards were briefly 9:16 to buy photo height while they were stuck
 * at 270px wide; widening the panel to 1200 makes them ~357px, so the same ratio mobile uses
 * now gives the same generous image without a second ratio to keep in step.
 */

/* The readability gradient. Transparent at the top so the photo reads, opaque at the bottom
   where the title and blurb sit. */
.program-card--image::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.45) 62%,
    rgba(0,0,0,.82) 100%);
  pointer-events:none;
}

/* Lift the real content above the scrim. */
.program-card--image > *{ position: relative; z-index: 1; }

/*
 * No soft drop shadow on a photo card.
 *
 * The carousel viewport clips with overflow:hidden, and the base card's 0 6px 18px shadow
 * reaches about 12px above the card - further than the 6px of padding the ring needs. The clip
 * sliced the fade off mid-gradient, and that hard cut is the straight grey line that ran across
 * the top of every card, corner to corner, regardless of the card's rounded corners.
 *
 * Rather than widen the padding until the fade completes (18px sideways would be more than the
 * 16px inter-card gap, so the neighbouring page would show through), the photo cards drop the
 * soft shadow entirely - they have plenty of visual weight without one - and selection is the
 * crisp 3px ring alone, which fits inside the 6px padding with room to spare.
 */
.program-card--image,
.program-card--image:hover{ box-shadow: none; }

.program-card--image.selected{
  box-shadow: 0 0 0 3px var(--tb-card-select);
}

.program-card--image .pc-title{
  color:#fff;
  /*
   * Two lines reserved, whether the name needs them or not. Content is bottom-aligned, so a
   * one-line name ("Teach English in Thailand") would otherwise sit the spec block a line lower
   * than a two-line one and the blocks across a row would not line up. The blurb below reserves
   * its height for the same reason - between them they pin the spec blocks to a common
   * baseline. A name long enough for three lines is clamped rather than allowed to shift it.
   */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.program-card--image .pc-blurb{
  color: rgba(255,255,255,.92);
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  /*
   * Fixed to exactly 3 lines, whether the text needs them or not.
   *
   * Content is bottom-aligned, so a blurb of a different length used to push the spec block up
   * by a line and the four blocks across a row stopped lining up. Reserving the same height on
   * every card pins the spec blocks to a common baseline. min-height does the reserving, the
   * clamp does the capping; both have to be here for the alignment to hold.
   *
   * The budget is about 135 characters at the desktop card width. Longer blurbs are ellipsised
   * rather than allowed to break the alignment.
   */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
}

/* Program type pill, top right. Same translucent-dark family as the spec panel below, so the
   card reads as one object rather than as layers pasted over a photo. */
.program-card .pc-tag{
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
  white-space: nowrap;
}

/*
 * Spec block: two columns, Degree over Age on the left, Cost over Duration on the right.
 * Deliberately the same translucent dark as the pill rather than the pale green notice colour -
 * the photos vary too much for a fixed tint to sit well over all of them, and green reads as an
 * alert rather than as specification.
 */
.program-card .pc-specs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
  margin: 0;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: rgba(11,18,32,.52);
  border: 1px solid rgba(255,255,255,.14);
}
.program-card .pc-specs dt{
  grid-column: auto;
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  line-height: 1.3;
}
.program-card .pc-specs dd{
  margin: 0 0 .15rem;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
/* The dl runs dt,dd,dt,dd... so each pair is placed explicitly: left column rows 1-2 carry
   Degree and Age, right column rows 1-2 carry Cost and Duration. */
.program-card .pc-specs dt:nth-of-type(1){ grid-area: 1 / 1; }
.program-card .pc-specs dd:nth-of-type(1){ grid-area: 2 / 1; }
.program-card .pc-specs dt:nth-of-type(2){ grid-area: 1 / 2; }
.program-card .pc-specs dd:nth-of-type(2){ grid-area: 2 / 2; }
.program-card .pc-specs dt:nth-of-type(3){ grid-area: 3 / 1; }
.program-card .pc-specs dd:nth-of-type(3){ grid-area: 4 / 1; }
.program-card .pc-specs dt:nth-of-type(4){ grid-area: 3 / 2; }
.program-card .pc-specs dd:nth-of-type(4){ grid-area: 4 / 2; }

/* =========================
   Overview carousel (desktop only, >= 992px)
   ========================= */
.tb-carousel__stage{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tb-carousel__viewport{
  flex: 1 1 auto;
  min-width: 0;                     /* lets the flex child shrink so overflow can clip */
}
.tb-carousel__arrow{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.16);
  background: #fff;
  color: #0b1220;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.tb-carousel__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; }
.tb-carousel__arrow[hidden]{ display: none !important; }

.tb-carousel__dots{
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .85rem;
}
.tb-carousel__dots[hidden]{ display: none !important; }
.tb-carousel__dot{
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(11,18,32,.22);
  cursor: pointer;
}
.tb-carousel__dot.is-active{ background: var(--tb-green-2, #028f6d); }

@media (min-width: 992px){
  /*
   * overflow:hidden clips at the PADDING box, so this padding is what stops the selected card's
   * 3px orange ring being sliced off - vertically on every card, horizontally on the first and
   * last of each page.
   *
   * Horizontal padding is safe despite narrowing the track: the cards are sized as a share of
   * the track (flex-basis calc) and the slide offset is read from the real card's offsetLeft,
   * so both follow automatically. And 6px is well inside the 16px inter-card gap, so no part of
   * the neighbouring page shows through the padding.
   */
  .tb-carousel[data-layout="carousel"] .tb-carousel__viewport{ overflow: hidden; padding: 6px; }

  /*
   * Carousel only: the grid becomes a single flex row that slides, three cards and two 1rem
   * gaps per page. With data-layout="grid" none of this applies, so .card-grid keeps its
   * repeat(3, 1fr) from the base rules and simply wraps onto as many rows as it needs - same
   * card design, same three per row, no clipping and no transform.
   */
  #eligibility-module .tb-carousel[data-layout="carousel"] #teach-cards.card-grid{
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    transition: transform .35s ease;
    will-change: transform;
  }
  #eligibility-module .tb-carousel[data-layout="carousel"] #teach-cards.card-grid > .program-card{
    flex: 0 0 calc((100% - 2rem) / 3);
    max-width: calc((100% - 2rem) / 3);
  }
}

/* =========================
   Sticky CTA
   ========================= */
#cta-footer{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
  /* Tracks .panel--medium so the sticky apply bar stays aligned with the results. */
  width:100%;max-width:1200px;padding:0 .75rem;box-sizing:border-box;z-index:9999;
  display:flex;justify-content:center;opacity:0;pointer-events:none;
}
#cta-footer .tb-btn--primary:not([disabled]){background:#00A884;border-color:#008080;color:#fff;}
#eligibility-module .cta-footer{padding:1rem;}
#eligibility-module #hs-next.tb-btn{
  width:100%;padding:1rem 2rem;font-size:1.125rem;line-height:1.2;border-radius:10px;
}
/*
 * Full width is right on a phone, but the footer tracks the 1200px panel, so on a wide screen
 * a 100% button stretched to ~1185px. 33% from 768px up - the same breakpoint the questions
 * step uses to stop its inputs stretching. #cta-footer is already a flex row with
 * justify-content:center, so the narrower button centres itself with no extra rule.
 */
@media (min-width:768px){
  #eligibility-module #hs-next.tb-btn{ width:33%; }
}
@media (min-width:992px){
  #eligibility-module #hs-next.tb-btn{ padding:1.125rem 2.25rem;font-size:1.2rem; }
}

/* =========================
   Mobile gutters + alignment
   ========================= */
@media (max-width:640px){
  #eligibility-module.tb-wrap{padding-left:15px;padding-right:15px;box-sizing:border-box;}
  #eligibility-module .answers-summary,
  #eligibility-module .tabs,
  #eligibility-module .results-title{
    padding-left:var(--tb-cell-x);padding-right:var(--tb-cell-x);
  }
  #eligibility-module .answers-summary{flex-direction:column;gap:.5rem;}
  #eligibility-module .change-link{margin-left:0;}
}

/* Tablet gutters; CTA centering */
@media (min-width:641px) and (max-width:1024px){
  #eligibility-module.tb-wrap{padding-left:15px;padding-right:15px;box-sizing:border-box;}
  #eligibility-module .answers-summary,
  #eligibility-module .tabs,
  #eligibility-module .results-title{
    padding-left:var(--tb-cell-x);padding-right:var(--tb-cell-x);
  }
  #cta-footer{left:0;right:0;transform:none;margin:0 auto;z-index:100000;}
}

/* =========================
   Modals (Online TEFL start date, minimum-age date of birth)
   ========================= */
.tb-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000000; }
.tb-modal[aria-hidden="false"]{ display:flex; }
.tb-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.tb-modal__dialog{
  position:relative; z-index:1; width:min(560px, 92vw);
  background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:1.25rem 1.25rem 1.5rem;
}
.tb-modal__close{
  position:absolute; right:.5rem; top:.35rem; font-size:1.75rem; line-height:1; background:transparent; border:none; cursor:pointer;
}
.tb-modal__title{ margin:0 0 .25rem 0; }
.tb-modal__lead{ margin:.25rem 0 1rem 0; color:#334; }
.tb-modal__label{ display:block; margin-bottom:.35rem; }
.tb-modal__select{ width:100%; }
.tb-modal__input{ width:100%; }
/* iOS Safari collapses a bare date input to its intrinsic width and ignores the padding
   .tb-input sets, so the appearance reset and min-height are both load-bearing here. */
input[type="date"].tb-modal__input{ -webkit-appearance:none; appearance:none; min-height:2.75rem; }
/* The modals sit outside #eligibility-module, so the panel-scoped .tb-error rules miss them. */
.tb-modal .tb-error{ margin:.4rem 0 0; text-align:left; color:#d93025; font-size:.9rem; }
/* Advisory, not a blocker - amber rather than the error red, so the two read differently. */
.tb-modal .tb-warning{
  margin:.5rem 0 0;
  padding:.5rem .65rem;
  border-radius:8px;
  border:1px solid rgba(180,120,0,.35);
  background:rgba(255,196,61,.12);
  text-align:left;
  color:#8a5a00;
  font-size:.9rem;
  line-height:1.4;
}
.tb-modal__actions{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }

/* Degree question label + radios */
#eligibility-module #questions-panel #hs-degree-container > span:not(.tb-elig__qs-status) {
  display: block;
  margin: 0 auto .4rem;
  width: 100%;
  text-align: left;
}
@media (min-width: 768px){
  #eligibility-module #questions-panel #hs-degree-container > span:not(.tb-elig__qs-status) {
    width: 50%;
    max-width: 520px;
  }
}

#eligibility-module #questions-panel #hs-degree-container > .tb-elig__qs-status{
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
  left: auto !important;
  right: 0 !important;
  top: 18px !important;
  position: absolute !important;
}

#eligibility-module #questions-panel #hs-degree-container .tb-radio-row {
  margin: 0 auto;
  width: 100%;
  display: block;
  text-align: left;
}
@media (min-width: 768px){
  #eligibility-module #questions-panel #hs-degree-container .tb-radio-row {
    width: 50%;
    max-width: 520px;
  }
}
#eligibility-module #questions-panel #hs-degree-container .tb-radio-row .hs-radio{
  display:block;
  margin:0 0 .35rem 0;
}
#eligibility-module #questions-panel #hs-degree-container .tb-radio-row .hs-radio input[type="radio"]{
  margin:0 .4rem 0 0;
}

/* Error message alignment + color */
#eligibility-module #questions-panel .form-row > .tb-error,
#eligibility-module #questions-panel #hs-age-container > .tb-error {
  display:block;
  width:100%;
  max-width:520px;
  margin:.35rem auto 0;
  text-align:center;
  color:#d93025;
  font-size:.9rem;
}
@media (max-width: 767px){
  #eligibility-module #questions-panel .form-row > .tb-error,
  #eligibility-module #questions-panel #hs-age-container > .tb-error { max-width:100%; }
}

/* =========================
   DESKTOP column guidance (scoped so mobile can auto-fit)
   ========================= */
@media (min-width: 641px){
  /* Teach Compare — Program, Cost, Salary, Saving, Contract, Next Intake (Select is hidden).
     These rules used to target #teach-overview, an id that does not exist in the markup, so
     they never applied; corrected to #teach-compare Sep 22 2026 along with the Costs tab
     removal, which took its own column block with it.

     The columns were briefly trimmed to 125px to squeeze into a 960px panel. The panel is now
     1200px, so they are back at 140px with room to spare and long values such as "1 semester or
     1 year" no longer wrap. */
  #teach-compare .results-table th:nth-child(1),
  #teach-compare .results-table td:nth-child(1){ min-width: 220px; }
  #teach-compare .results-table th:nth-child(2),
  #teach-compare .results-table td:nth-child(2),
  #teach-compare .results-table th:nth-child(3),
  #teach-compare .results-table td:nth-child(3),
  #teach-compare .results-table th:nth-child(4),
  #teach-compare .results-table td:nth-child(4),
  #teach-compare .results-table th:nth-child(5),
  #teach-compare .results-table td:nth-child(5),
  #teach-compare .results-table th:nth-child(6),
  #teach-compare .results-table td:nth-child(6){ min-width: 140px; text-align:center; }

  /* Other Eligible */
  #other-results .results-table th:nth-child(1),
  #other-results .results-table td:nth-child(1){ min-width: 220px; }
  #other-results .results-table th:nth-child(2),
  #other-results .results-table td:nth-child(2),
  #other-results .results-table th:nth-child(3),
  #other-results .results-table td:nth-child(3),
  #other-results .results-table th:nth-child(4),
  #other-results .results-table td:nth-child(4),
  #other-results .results-table th:nth-child(5),
  #other-results .results-table td:nth-child(5){ min-width: 140px; text-align:center; }
  #other-results .results-table th:nth-child(6),
  #other-results .results-table td:nth-child(6){ width: 90px; text-align:center; }

  /* Volunteer — same as above but five columns, with no Salary. */
  #volunteer-results .results-table th:nth-child(1),
  #volunteer-results .results-table td:nth-child(1){ min-width: 220px; }
  #volunteer-results .results-table th:nth-child(2),
  #volunteer-results .results-table td:nth-child(2),
  #volunteer-results .results-table th:nth-child(3),
  #volunteer-results .results-table td:nth-child(3),
  #volunteer-results .results-table th:nth-child(4),
  #volunteer-results .results-table td:nth-child(4){ min-width: 140px; text-align:center; }
  #volunteer-results .results-table th:nth-child(5),
  #volunteer-results .results-table td:nth-child(5){ width: 90px; text-align:center; }
}

/* =========================
   MOBILE TABLE
   - Horizontal scroll
   - Sticky header tied to viewport
   - Frozen first column (added Sep 22 2026)
   - Columns auto-fit content (no wrapping)
   ========================= */
@media (max-width: 640px){

  /* tighter cell padding on mobile */
  #eligibility-module { --tb-cell-x: 6px; }

  /* scrolling container */
  #eligibility-module .results-section .table-wrap{
    overflow-x: auto;               /* horizontal scroll */
    overflow-y: visible;            /* lets header stick to viewport */
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    /*
     * No padding-left. A sticky cell pins to the scroll container's PADDING edge, so a 15px
     * left pad left a gutter that the scrolled columns showed through, to the left of the
     * frozen Program column. The 15px inset moves onto the first cell instead (below), which
     * keeps the same look with no gutter to leak through.
     */
    padding-left: 0;
    padding-right: 15px;
  }

  /* auto-size to content width (Excel-like) */
  #eligibility-module .results-section .results-table{
    width: max-content;             /* table grows to fit content */
    table-layout: auto;             /* natural column sizing */
    border-collapse: separate;
  }

  /* clear any desktop min-widths so mobile can shrink-to-fit */
  #eligibility-module .results-section .results-table th,
  #eligibility-module .results-section .results-table td{
    min-width: auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;            /* never wrap */
    padding: .65rem .5rem;
  }

  /* sticky header tied to the viewport */
  #eligibility-module .results-section .results-table thead th{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
  }

  /*
   * Frozen program column.
   *
   * A sticky cell is lifted out of the normal paint order, so it needs its OWN opaque
   * background - a transparent one lets the scrolled columns show through it. That is the part
   * that makes the selected-row rule below load-bearing rather than redundant: the row's
   * background no longer reaches the frozen cell, so the highlight has to be restated on it or
   * selected rows show a white first column against a blue row.
   *
   * Layering: body cells 4, sticky header 5, and the top-left cell 7 because it is both at once
   * and must also clear the 6 on the right-edge fade.
   */
  #eligibility-module .results-section .results-table th:first-child,
  #eligibility-module .results-section .results-table td:first-child{
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
    /* Carries the 15px page inset that .table-wrap no longer has, so the frozen column can sit
       flush against the scrollport edge with nothing able to show to its left. */
    padding-left: 15px;
    /* Drawn as a shadow rather than a border so it does not add width mid-scroll. */
    box-shadow: 1px 0 0 rgba(11,18,32,.10);
  }

  #eligibility-module .results-section .results-table thead th:first-child{
    z-index: 7;
  }

  /* selected row highlight remains intact (incl. the frozen first column) */
  #eligibility-module .results-section .results-table tbody tr[data-selected="true"]{
    background:#6FA8DC;
  }
  #eligibility-module .results-section .results-table tbody tr[data-selected="true"] td{
    color:#083054;
  }
  #eligibility-module .results-section .results-table tbody tr[data-selected="true"] td:first-child{
    background:#6FA8DC;
  }


  /* subtle right-edge fade to hint at scroll */
  #eligibility-module .results-section .table-wrap::after{
    content:"";
    position: sticky;
    right: 0; top: 0; bottom: 0;
    width: 12px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.06));
    pointer-events: none;
    z-index: 6;
  }

  /* The Select column is hidden globally now; this only stops the generic
     "min-width: auto !important" above from re-showing it. */
  #eligibility-module .results-section .results-table .select-col{
    display: none !important;
    width: 64px !important;
    min-width: 64px !important;
    text-align: center;
  }
}

@media (hover: hover) and (pointer: fine) {
  #eligibility-module #teach-compare-body tr,
  #eligibility-module #other-body tr,
  #eligibility-module #volunteer-body tr {
    cursor: pointer;
  }
}

/* =========================================================
   Questions step styling (Eligibility module)   
   ========================================================= */
#eligibility-module{
  --tb-q-bg: #EAF4F3;          /* outer card background */
  --tb-q-border: #D6E7E4;      /* outer card border/dividers */
  --tb-q-text: #0B1220;
  --tb-q-muted: rgba(11,18,32,.60);
  --tb-green: #028F6D;         /* sampled from mock CTA button */
  --tb-green-2: #209B78;       /* sampled from “Completed” text */
  --tb-field-border: #CBD5D3;
}

/* Outer questions card */
#eligibility-module #questions-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#eligibility-module .tb-elig__qs-card {
  background: var(--tb-q-bg);
  border: 1px solid var(--tb-q-border);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: visible;
  padding: 0;
}

/* Header area */
#eligibility-module .tb-elig__qs-head{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tb-q-border);
  border-radius: 0;
  margin: 0;
}

#eligibility-module .tb-elig__qs-icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--tb-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
}

#eligibility-module .tb-elig__qs-title{
  margin: 0;
  color: var(--tb-q-text);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.15;
}
#eligibility-module .tb-elig__qs-subtitle{
  margin: 6px 0 0;
  color: var(--tb-q-muted);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.35;
}
/* Help text between a question and its answer pills. The .tb-elig__fg-row label already
   carries 10px below itself, so this only needs its own bottom gap. */
#eligibility-module .tb-elig__qs-help{
  margin: 0 0 10px;
  color: var(--tb-q-muted);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
#eligibility-module .tb-elig__qs-step{
  margin: 12px 0 0;
  color: rgba(11,18,32,.55);
  font-size: 16px;
  font-weight: 600;
}

/* White body area */
#eligibility-module .tb-elig__qs-body{
  background: #fff;
  padding: 10px 22px 0;
}

/* Each question row with divider like mock */
#eligibility-module #questions-panel .form-row{
  position: relative;
  margin: 0;
  padding: 18px 0 22px;
  border: 0;
  border-bottom: 1px solid rgba(214,231,228,.95);
  border-radius: 0;
  background: transparent;
}

/* Remove divider after last question */
#eligibility-module #questions-panel .tb-elig__qs-body .form-row:last-child{
  border-bottom: 0;
}

/* Labels */
#eligibility-module #questions-panel .form-row label,
#eligibility-module #questions-panel #hs-degree-container > span{
  display: block;
  margin: 0 0 10px;
  width: 100% !important;
  max-width: none !important;
  text-align: left;
  color: rgba(11,18,32,.60);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
}

/* Completed status on right */
#eligibility-module #questions-panel .tb-elig__qs-status{
  position: absolute;
  top: 18px;
  right: 0;
  font-weight: 800;
  font-size: 18px;
  color: var(--tb-green-2);
  visibility: hidden; /* shown via .tb-elig__qrow--complete */
}
#eligibility-module #questions-panel .form-row.tb-elig__qrow--complete .tb-elig__qs-status{
  visibility: visible;
}

/* Force the Degree “Completed” to behave like the others */
#eligibility-module #hs-degree-container.form-row{
  position: relative !important;
}

#eligibility-module #hs-degree-container .tb-elig__qs-status{
  position: absolute !important;
  top: 18px !important;
  right: 0 !important;
  color: var(--tb-green-2) !important;
  font-weight: 800 !important;
}

/* Inputs (select + number) */
#eligibility-module #questions-panel .tb-input{
  width: 100% !important;
  max-width: none !important;
  display: block;
  border: 1px solid var(--tb-field-border);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  font-size: 22px;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

#eligibility-module #questions-panel .tb-input:focus{
  outline: none;
  border-color: rgba(2,143,109,.55);
  box-shadow: 0 0 0 3px rgba(2,143,109,.18);
}

/* Age error (keep clean under input) */
#eligibility-module #questions-panel .tb-error{
  margin: 10px 0 0;
  text-align: left;
  color: #d93025;
  font-size: 14px;
}

/* Degree pills (segmented control look) */
/* Degree pills (SEPARATE buttons like mock) */
#eligibility-module #questions-panel .tb-radio-row.tb-elig__qs-pills{
  display: flex !important;
  gap: 14px !important;
  margin-top: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#eligibility-module #questions-panel .tb-elig__qs-pill{
  position: relative;
  margin: 0 !important;
  border: 1px solid var(--tb-field-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  padding: 12px 28px !important;
  min-width: 120px;
  cursor: pointer;
  user-select: none;

  display: inline-flex !important;
  justify-content: center;
  align-items: center;

  font-weight: 800;
  font-size: 20px;
  color: rgba(11,18,32,.70);

  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Remove any “divider” behavior from segmented version */
#eligibility-module #questions-panel .tb-elig__qs-pill + .tb-elig__qs-pill{
  border-left: 1px solid transparent !important;
}

#eligibility-module #questions-panel .tb-elig__qs-pill input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#eligibility-module #questions-panel .tb-elig__qs-pill:has(input:checked){
  background: var(--tb-green) !important;
  border-color: var(--tb-green) !important;
  color: #fff !important;
}

/* CTA button area */
#eligibility-module #questions-panel .form-actions{
  background: #fff;
  padding: 18px 22px 22px;
  margin: 0;
  display: flex;
  justify-content: center;
}

#eligibility-module #questions-panel #hs-view-results.tb-btn{
  width: 100%;
  max-width: none;
  border-radius: 14px;
  padding: 18px 18px;
  font-size: 24px;
  font-weight: 800;
  border: 0;
  background: var(--tb-green);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Disabled CTA like mock */
#eligibility-module #questions-panel #hs-view-results.tb-btn[disabled]{
  opacity: .55;
  box-shadow: none;
}

/* Mobile spacing */
@media (max-width: 480px){
  #eligibility-module .tb-elig__qs-head{ padding: 18px 16px 14px; }
  #eligibility-module .tb-elig__qs-body{ padding: 10px 16px 0; }
  #eligibility-module #questions-panel .form-actions{ padding: 16px; }
  #eligibility-module #questions-panel .tb-elig__qs-pill{ min-width: 92px; padding: 12px 18px; }
}

/* Prevent native <select> from being forced to open upward due to clipping/containment */
#eligibility-module,
#eligibility-module #questions-panel,
#eligibility-module .tb-elig__qs-body,
#eligibility-module #questions-panel.panel{
  overflow: visible !important;
  contain: none !important;
}

/* =========================================================
   Questions step compact scale override
   Reduces visual scale by roughly 25–30% without transform bugs
   ========================================================= */

/* Slightly narrower card */
#eligibility-module .panel.panel--narrow {
  max-width: 580px;
}

#eligibility-module .tb-elig__qs-card {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* Softer, smaller card shell */
#eligibility-module .tb-elig__qs-card {
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Compact header */
#eligibility-module .tb-elig__qs-head {
  gap: 12px;
  padding: 16px 18px 12px;
}

/* Smaller question-mark icon */
#eligibility-module .tb-elig__qs-icon {
  width: 42px;
  height: 42px;
  font-size: 22px;
}

/* Smaller heading and subtitle */
#eligibility-module .tb-elig__qs-title {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.15;
}

#eligibility-module .tb-elig__qs-subtitle {
  margin-top: 4px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.3;
}

/* Compact white body */
#eligibility-module .tb-elig__qs-body {
  padding: 6px 18px 0;
}

/* Reduce vertical space per question */
#eligibility-module #questions-panel .form-row {
  padding: 13px 0 16px;
}

/* Smaller question labels */
#eligibility-module #questions-panel .form-row label,
#eligibility-module #questions-panel #hs-degree-container > span {
  margin-bottom: 7px;
  font-size: 16px;
  line-height: 1.25;
}

/* Smaller inputs/select */
#eligibility-module #questions-panel .tb-input {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.25;
}

/* Smaller completion check */
#eligibility-module #questions-panel .tb-elig__qs-status,
#eligibility-module #hs-degree-container .tb-elig__qs-status,
#eligibility-module #questions-panel #hs-degree-container > .tb-elig__qs-status {
  top: 13px !important;
  font-size: 14px;
}

/* Compact degree pill row */
#eligibility-module #questions-panel .tb-radio-row.tb-elig__qs-pills {
  gap: 12px !important;
  margin-top: 8px;
}

/* Smaller Yes / No pills */
#eligibility-module #questions-panel .tb-elig__qs-pill {
  min-width: 92px;
  padding: 9px 22px !important;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.07);
}

/* Compact CTA area */
#eligibility-module #questions-panel .form-actions {
  padding: 14px 18px 18px;
}

/* Smaller primary button */
#eligibility-module #questions-panel #hs-view-results.tb-btn {
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 18px;
  box-shadow: 0 7px 16px rgba(0,0,0,.10);
}

/* Mobile refinement */
@media (max-width: 480px) {
  #eligibility-module .panel.panel--narrow,
  #eligibility-module #questions-panel {
    max-width: 100%;
  }

  #eligibility-module .tb-elig__qs-head {
    padding: 14px 14px 11px;
  }

  #eligibility-module .tb-elig__qs-body {
    padding: 6px 14px 0;
  }

  #eligibility-module .tb-elig__qs-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  #eligibility-module .tb-elig__qs-title {
    font-size: 20px;
  }

  #eligibility-module #questions-panel .form-actions {
    padding: 13px 14px 16px;
  }

  #eligibility-module #questions-panel .tb-elig__qs-pill {
    min-width: 82px;
    padding: 8px 18px !important;
  }
}

/* =========================================================
   Eligibility intro text above questions/results
   ========================================================= */

#eligibility-module .tb-elig__intro {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
}

#eligibility-module .panel--medium .tb-elig__intro {
  max-width: 860px;
}

#eligibility-module .tb-elig__intro-title {
  margin: 0 0 10px;
  color: #0B1220;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

#eligibility-module .tb-elig__intro-text {
  margin: 0 auto;
  color: rgba(11,18,32,.68);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}

#eligibility-module .tb-elig__intro--results {
  margin-bottom: 24px;
}

/* Keep results intro aligned visually with wider results panel */
#eligibility-module #results-panel .tb-elig__intro {
  padding-left: 12px;
  padding-right: 12px;
}

/* Mobile refinement */
@media (max-width: 640px) {
  #eligibility-module .tb-elig__intro {
    margin-bottom: 18px;
    text-align: left;
  }

  #eligibility-module .tb-elig__intro-title {
    font-size: 30px;
  }

  #eligibility-module .tb-elig__intro-text {
    font-size: 16px;
    line-height: 1.5;
  }
}
/* =========================================================
   Intro width alignment: questions + results
   ========================================================= */

/* Questions step should use the same outer width as results.
   This is the rule that actually wins - it is later in the file and outranks the
   .panel.panel--medium declaration near the top, so BOTH have to move together. Widened to
   1200 on Sep 24 2026 for the Overview cards; the questions card (580) and both intros (860)
   keep their own caps, so only the tables and cards gain the room. */
#eligibility-module .panel.panel--narrow,
#eligibility-module .panel.panel--medium {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Both intro sections should share the same text width */
#eligibility-module .tb-elig__intro {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Only the actual questions card should stay compact */
#eligibility-module .tb-elig__qs-card {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile stays full-width */
@media (max-width: 640px) {
  #eligibility-module .panel.panel--narrow,
  #eligibility-module .panel.panel--medium,
  #eligibility-module .tb-elig__intro,
  #eligibility-module .tb-elig__qs-card {
    max-width: 100%;
  }
}
/* =========================================================================
   Future-graduate branch (Sep 2026 spec)
   Questions revealed when "Do you have a Bachelor's Degree?" = No.
   ========================================================================= */

/* The module toggles rows/tables with the `hidden` attribute; several rules below
   set an explicit display, so make `hidden` win. */
#eligibility-module [hidden] { display: none !important; }

/* Visually-hidden labels (radio cell labels, month/year select labels).
   Defined here so the module does not depend on the theme providing .sr-only. */
#eligibility-module .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Label + control block, mirroring the Degree question's layout */
#eligibility-module #questions-panel .tb-elig__fg-row > span:not(.tb-elig__qs-status) {
  display: block;
  margin: 0 0 10px;
  width: 100%;
  text-align: left;
  color: var(--tb-q-muted);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}

#eligibility-module #questions-panel .tb-elig__fg-row > .tb-elig__qs-status {
  position: absolute !important;
  top: 13px !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
  color: var(--tb-green-2) !important;
  font-weight: 800 !important;
}

#eligibility-module #questions-panel .tb-elig__fg-row .tb-radio-row {
  margin: 0;
  width: 100%;
  text-align: left;
}

/* Month + Year selects sit side by side, stacking on narrow screens */
#eligibility-module #questions-panel .tb-elig__monthyear {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#eligibility-module #questions-panel .tb-elig__monthyear .tb-input {
  flex: 1 1 140px;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 768px) {
  #eligibility-module #questions-panel .tb-elig__monthyear {
    width: 50%;
    max-width: 520px;
  }
}

/* Results-screen conditions notice.
   Holds two independent lines: the Bachelor's-degree condition for unlocked future
   graduates, and the minimum-age condition for applicants below a program's age gate.
   Either, both, or neither may be visible; the wrapper hides when none apply. */
#eligibility-module .tb-elig__notice {
  margin: 0 0 1.25rem;
  padding: 14px 16px;
  border: 1px solid var(--tb-q-border);
  border-left: 4px solid var(--tb-green);
  border-radius: 8px;
  background: var(--tb-q-bg);
  color: var(--tb-q-text);
  font-size: 15px;
  line-height: 1.45;
}

#eligibility-module .tb-elig__notice p {
  margin: 0;
}

#eligibility-module .tb-elig__notice p + p {
  margin-top: .5rem;
}

#eligibility-module .tb-elig__notice-lead {
  font-weight: 700;
}