/* Country grade-conversion pages (/grade-conversion/<country>/): page content around the converter, loaded with
 * [gpacalc_tool id="country-*"] (includes/tools.php). Digant 2026-10-10: tables "dont go edge to edge, but more like
 * home page style": a table or formula box marked gpa-table-inset, and the Related tools and guides cards, sit on the text column (the theme's text inset:
 * 800px, 40px of white either side from 641px; phones already have 20px either side). Theme tokens only. */
@media (min-width: 641px) {
  #page #main .entry-content > :is(figure.wp-block-table, .rx-formula).gpa-table-inset:not(#root *, .gpacalc-mount *),
  #page #main .entry-content > .rx-sec.rx-related > .wp-block-columns.rx-rel {
    max-width: min(var(--gpa-text-max, 800px), calc(100% - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Grade table standard (includes/grade-bands.php adds gpa-gtable to a table marked gpa-bands-*). Digant 2026-10-10:
 * colour so readers see what's good, okay and bad; "best ever looking … easy to follow and also eye catching"; the bars
 * version, refined to the split meter; 11:03 "lock in #1" (the soft spectrum colours). playbook D-60.
 * A white card, left-aligned columns, one row height; the grade in bold with a band stripe on its left edge; the US
 * letter in a tinted pill, a points bar on the 4.0 scale and the points after it; a key in the caption. On phones the
 * local word (gpa-gtable-sub-N) moves under the grade. Variants: gpa-gtable--grouped (a band heading before each run
 * of rows, for long scales), gpa-gtable--chip (the grade as a tinted chip). Colours: --gpa-grade-<band>(-bg|-bar)
 * tokens when the theme defines them, else the soft spectrum below (text on its tint 4.9:1 or more, WCAG AA). */
#page #main .entry-content :is(tr, .gpa-bands-key__item).is-band-a { --band: var(--gpa-grade-a, #0F766E); --band-bg: var(--gpa-grade-a-bg, #E6F6F2); --band-bar: var(--gpa-grade-a-bar, #2BB39A); }
#page #main .entry-content :is(tr, .gpa-bands-key__item).is-band-b { --band: var(--gpa-grade-b, #1E5A99); --band-bg: var(--gpa-grade-b-bg, #E8F1FB); --band-bar: var(--gpa-grade-b-bar, #5B9BE0); }
#page #main .entry-content :is(tr, .gpa-bands-key__item).is-band-c { --band: var(--gpa-grade-c, #8A5A00); --band-bg: var(--gpa-grade-c-bg, #FDF4E3); --band-bar: var(--gpa-grade-c-bar, #F0B44C); }
#page #main .entry-content :is(tr, .gpa-bands-key__item).is-band-d { --band: var(--gpa-grade-d, #A6501F); --band-bg: var(--gpa-grade-d-bg, #FDEEE6); --band-bar: var(--gpa-grade-d-bar, #EE8E5E); }
#page #main .entry-content :is(tr, .gpa-bands-key__item).is-band-f { --band: var(--gpa-grade-f, #A8303F); --band-bg: var(--gpa-grade-f-bg, #FCEBEE); --band-bar: var(--gpa-grade-f-bar, #E5717F); }

#page #main .entry-content figure.gpa-gtable:not(#gpa-x) {
  background: var(--gpa-surface, #fff) !important;
  border: 1px solid var(--gpa-border, #e5e7eb) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
}
#page #main .entry-content figure.gpa-gtable table:not(#gpa-x) {
  width: 100% !important; margin: 0 !important; border: 0 !important;
  border-collapse: separate !important; border-spacing: 0 !important; table-layout: auto !important;
}
#page #main .entry-content figure.gpa-gtable :is(th, td):not(#gpa-x) {
  text-align: left !important; vertical-align: middle !important; border: 0 !important;
  border-bottom: 1px solid var(--gpa-border-subtle, #eef0f3) !important;
}
#page #main .entry-content figure.gpa-gtable thead th:not(#gpa-x) {
  background: var(--gpa-surface-subtle, #f8fafc) !important;
  color: var(--gpa-text-muted, #6b7280) !important;
  font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  padding: 12px 16px !important; vertical-align: bottom !important; text-wrap: balance;
}
#page #main .entry-content figure.gpa-gtable tbody td:not(#gpa-x) {
  background: var(--gpa-surface, #fff) !important;
  color: var(--gpa-text-secondary, #4b5563) !important;
  font-size: 16px !important; line-height: 1.35 !important; font-weight: 400 !important;
  padding: 10px 16px !important; height: 52px;
}
#page #main .entry-content figure.gpa-gtable tbody tr:last-child td:not(#gpa-x) { border-bottom: 0 !important; }
#page #main .entry-content figure.gpa-gtable tbody tr:hover td:not(#gpa-x) { background: var(--gpa-surface-hover, #fafbff) !important; }
#page #main .entry-content figure.gpa-gtable tbody td:first-child:not(#gpa-x) {
  position: relative; padding-left: 22px !important;
  color: var(--gpa-text-strong, #111827) !important; font-weight: 700 !important; font-size: 17px !important;
}
#page #main .entry-content figure.gpa-gtable :is(tbody tr[class*="is-band-"] td:first-child, tr.gpa-gtable__group th)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--band-bar);
}
#page #main .entry-content figure.gpa-gtable td.gpa-gtable__nw:not(#gpa-x),
#page #main .entry-content figure.gpa-gtable td.is-band-cell:not(:first-child, #gpa-x) { white-space: nowrap; }
#page #main .entry-content figure.gpa-gtable td.is-band-cell:first-child .gpa-gtable__pill:not(#gpa-x) { white-space: normal; text-align: left; border-radius: 10px; }
/* Worked examples (five or more columns): the points stay in the pill, no bar */
#page #main .entry-content figure.gpa-gtable--compact :is(.gpa-gtable__bar, .gpa-gtable__pts) { display: none !important; }
#page #main .entry-content figure.gpa-gtable--compact .gpa-gtable__p:not(#gpa-x) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
#page #main .entry-content figure.gpa-gtable .gpa-gtable__pill:not(#gpa-x) {
  display: inline-block; min-width: 44px; padding: 4px 11px; border-radius: 999px; text-align: center; white-space: nowrap;
  background: var(--band-bg); color: var(--band); font-weight: 700; font-size: 15px; line-height: 1.3;
}
#page #main .entry-content figure.gpa-gtable td.is-band-cell:first-child .gpa-gtable__pill { font-size: 16px; }
/* "A− · 3.7": the points are read out with the letter but shown after the bar */
#page #main .entry-content figure.gpa-gtable .gpa-gtable__p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#page #main .entry-content figure.gpa-gtable .gpa-gtable__bar {
  display: inline-block; vertical-align: middle; margin: 0 0 0 12px; width: 104px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--band-bar) calc(var(--pts) * 100%), var(--gpa-border-subtle, #eef0f3) 0);
}
#page #main .entry-content figure.gpa-gtable .gpa-gtable__pts {
  display: inline-block; vertical-align: middle; margin-left: 8px; min-width: 2.2em;
  color: var(--band); font-weight: 700; font-size: 15px;
}
#page #main .entry-content figure.gpa-gtable tr.gpa-gtable__group th:not(#gpa-x) {
  position: relative; background: var(--band-bg) !important; color: var(--band) !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  padding: 8px 16px 8px 22px !important;
}
#page #main .entry-content figure.gpa-gtable--chip tbody tr[class*="is-band-"] td:first-child::before { display: none; }
#page #main .entry-content figure.gpa-gtable--chip tbody td:first-child:not(#gpa-x) { padding-left: 16px !important; }
#page #main .entry-content figure.gpa-gtable--chip .gpa-gtable__grade {
  display: inline-block; min-width: 48px; padding: 5px 10px; border-radius: 10px; text-align: center;
  background: var(--band-bg); color: var(--band); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--band-bar) 45%, transparent);
}
#page #main .entry-content figure.gpa-gtable--chip .gpa-gtable__pill:not(#gpa-x) { background: transparent; min-width: 28px; padding-left: 0; padding-right: 0; text-align: left; }
#page #main .entry-content figure.gpa-gtable figcaption:not(#gpa-x) {
  margin: 0 !important; padding: 12px 16px !important; text-align: left !important;
  font-size: 13px !important; line-height: 1.45 !important; color: var(--gpa-text-muted, #6b7280) !important;
  background: var(--gpa-surface-subtle, #f8fafc) !important; border-top: 1px solid var(--gpa-border-subtle, #eef0f3) !important;
}
#page #main .entry-content figure.gpa-gtable .gpa-bands-key:not(#gpa-x) {
  display: flex !important; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px !important; justify-content: flex-start;
}
#page #main .entry-content .gpa-bands-key__item:not(#gpa-x) {
  display: inline-flex !important; align-items: center; gap: 6px; color: var(--gpa-text-secondary, #4b5563) !important; font-weight: 600 !important;
}
#page #main .entry-content .gpa-bands-key__item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--band-bar); }
#page #main .entry-content figure.gpa-gtable .gpa-gtable__sub { display: none; }
@media (max-width: 640px) {
  #page #main .entry-content figure.gpa-gtable .gpa-gtable__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--gpa-text-muted, #6b7280); white-space: normal; }
  #page #main .entry-content figure.gpa-gtable-sub-2 :is(th, td):nth-child(2),
  #page #main .entry-content figure.gpa-gtable-sub-3 :is(th, td):nth-child(3) { display: none !important; }
  #page #main .entry-content figure.gpa-gtable thead th:not(#gpa-x) { font-size: 11px !important; padding: 10px 8px !important; letter-spacing: .03em !important; }
  #page #main .entry-content figure.gpa-gtable tbody td:not(#gpa-x) { font-size: 15px !important; padding: 9px 8px !important; height: 48px; overflow-wrap: break-word; }
  #page #main .entry-content figure.gpa-gtable tbody td:not(:first-child, .is-band-cell):not(#gpa-x) { font-size: 14px !important; }
  #page #main .entry-content figure.gpa-gtable tbody td:first-child:not(#gpa-x) { padding-left: 16px !important; font-size: 16px !important; hyphens: auto; overflow-wrap: anywhere; }
  #page #main .entry-content figure.gpa-gtable--compact tbody td:not(#gpa-x) { font-size: 14px !important; padding-left: 5px !important; padding-right: 5px !important; }
  #page #main .entry-content figure.gpa-gtable--compact tbody td:first-child:not(#gpa-x) { padding-left: 14px !important; font-size: 14px !important; }
  #page #main .entry-content figure.gpa-gtable--compact thead th:not(#gpa-x) { padding-left: 5px !important; padding-right: 5px !important; }
  #page #main .entry-content figure.gpa-gtable--compact .gpa-gtable__pill:not(#gpa-x) { padding: 2px 6px; font-size: 13px; min-width: 0; }
  /* phones: the worked example's US letter only; its points are in the Points × credits column and read out */
  #page #main .entry-content figure.gpa-gtable--compact .gpa-gtable__p:not(#gpa-x) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #page #main .entry-content figure.gpa-gtable .gpa-gtable__pill:not(#gpa-x) { min-width: 32px; padding: 3px 7px; font-size: 14px; }
  #page #main .entry-content figure.gpa-gtable .gpa-gtable__bar { margin-left: 6px; width: 30px; height: 7px; }
  #page #main .entry-content figure.gpa-gtable .gpa-gtable__pts { font-size: 14px; margin-left: 6px; min-width: 0; }
  #page #main .entry-content figure.gpa-gtable--chip .gpa-gtable__grade { min-width: 42px; padding: 4px 8px; }
}
