/**
 * F1GMAT ranking palette, version 3. Pure CSS hover, focus and tap reveal.
 * Built from div, p and span only, so CKEditor 5 keeps the structure intact.
 * Uses the --fg-* tokens from style.css :root.
 */
.fg-pal { margin: 2rem 0; padding: 1.25rem; background: var(--fg-paper-warm, #F5EFDF); border-top: 2px solid var(--fg-ink, #1A1A1A); }
.fg-pal p { margin: 0; }
.fg-pal .fg-pal__title { margin: 0 0 0.5rem; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; line-height: 1.2; text-align: left; color: var(--fg-ink, #1A1A1A); }
.fg-pal .fg-pal__scale { display: flex; justify-content: space-between; margin: 0 0 0.6rem; font-family: Arial, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-teal, #0E7490); }
.fg-pal .fg-pal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.fg-pal .fg-pal__tile { position: relative; min-height: 10.5rem; margin: 0; padding: 0.75rem 0.8rem; overflow: hidden; cursor: default; color: var(--fg-ink, #1A1A1A); outline-offset: 2px; }
.fg-pal .fg-pal__tile:focus-visible { outline: 3px solid var(--fg-gold-dark, #8A6B1F); }
.fg-pal .fg-pal__tile--s1 { background: #E4F1F3; }
.fg-pal .fg-pal__tile--s2 { background: #B9D9DF; }
.fg-pal .fg-pal__tile--s3 { background: #8FC0CA; }
.fg-pal .fg-pal__tile--s4 { background: #1F7387; color: var(--fg-paper, #FBFAF7); }
.fg-pal .fg-pal__tile--s5 { background: #0A4F60; color: var(--fg-paper, #FBFAF7); }
.fg-pal .fg-pal__head { margin: 0; padding: 0; }
.fg-pal .fg-pal__rank, .fg-pal .fg-pal__name, .fg-pal .fg-pal__value { display: block; }
.fg-pal .fg-pal__rank { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.fg-pal .fg-pal__name { margin-top: 0.5rem; font-family: Georgia, serif; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.fg-pal .fg-pal__value { margin-top: 0.3rem; font-family: Arial, sans-serif; font-size: 0.95rem; }
.fg-pal .fg-pal__detail { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0.6rem 0.7rem; background: var(--fg-ink, #1A1A1A); color: var(--fg-paper, #FBFAF7); font-family: Arial, sans-serif; font-size: 0.72rem; line-height: 1.25; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; }
.fg-pal .fg-pal__row { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.15rem 0; border-bottom: 1px solid #3D3D3D; }
.fg-pal .fg-pal__row:last-child { border-bottom: 0; }
.fg-pal .fg-pal__k { font-weight: 400; color: #D4CFC4; }
.fg-pal .fg-pal__v { font-weight: 700; text-align: right; white-space: nowrap; }
.fg-pal .fg-pal__tile:hover .fg-pal__detail,
.fg-pal .fg-pal__tile:focus .fg-pal__detail,
.fg-pal .fg-pal__tile:focus-within .fg-pal__detail { opacity: 1; visibility: visible; }
.fg-pal .fg-pal__note { margin: 0.7rem 0 0; font-family: Arial, sans-serif; font-size: 0.8rem; color: var(--fg-ink-muted, #525252); }
@media (min-width: 576px) { .fg-pal .fg-pal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .fg-pal--cols-5 .fg-pal__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fg-pal--cols-3 .fg-pal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .fg-pal .fg-pal__detail { transition: none; } }
@media print { .fg-pal .fg-pal__detail { display: none; } }

/**
 * Editor-split markup. CKEditor 5 saves each tile as its own ol, with the dl
 * detail panel as the next sibling. The figure becomes the grid, and each
 * ol and its dl share one grid cell through nth-of-type placement.
 */
figure.fg-pal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
figure.fg-pal > .fg-pal__title, figure.fg-pal > .fg-pal__scale, figure.fg-pal > .fg-pal__note { grid-column: 1 / -1; }
figure.fg-pal > .fg-pal__title { margin-bottom: 0.2rem; }
figure.fg-pal > .fg-pal__scale { margin-bottom: 0.2rem; }
figure.fg-pal > .fg-pal__scale > span:only-child { display: none; }
figure.fg-pal > .fg-pal__scale::before { content: "1 = most affordable"; }
figure.fg-pal > .fg-pal__scale::after { content: "20 = costliest"; }
figure.fg-pal.fg-pal--cols-3 > .fg-pal__scale::after { content: "6 = costliest"; }
figure.fg-pal > ol.fg-pal__grid { display: block; list-style: none; margin: 0; padding: 0; }
figure.fg-pal > ol.fg-pal__grid > li.fg-pal__tile { display: block; height: 100%; list-style: none; box-sizing: border-box; }
figure.fg-pal > ol.fg-pal__grid > li.fg-pal__tile::marker { content: none; }
figure.fg-pal > dl.fg-pal__detail { position: static; z-index: 2; align-self: stretch; box-sizing: border-box; pointer-events: none; }
figure.fg-pal > dl.fg-pal__detail > div { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.15rem 0; border-bottom: 1px solid #3D3D3D; }
figure.fg-pal > dl.fg-pal__detail > div:last-child { border-bottom: 0; }
figure.fg-pal > dl.fg-pal__detail dt, figure.fg-pal > dl.fg-pal__detail dd { margin: 0; padding: 0; }
figure.fg-pal > dl.fg-pal__detail dt { font-weight: 400; color: #D4CFC4; }
figure.fg-pal > dl.fg-pal__detail dd { font-weight: 700; text-align: right; white-space: nowrap; }
figure.fg-pal > dl.fg-pal__detail p { margin: 0; font: inherit; color: inherit; }
figure.fg-pal > ol.fg-pal__grid:hover + dl.fg-pal__detail,
figure.fg-pal > ol.fg-pal__grid:focus-within + dl.fg-pal__detail { opacity: 1; visibility: visible; }
/**
 * Narrow tiles. Program names break only between words, and a detail value
 * drops under its label when the two do not fit on one line.
 */
.fg-pal .fg-pal__name { font-size: 0.92rem; word-break: normal; overflow-wrap: normal; hyphens: none; }
.fg-pal .fg-pal__rank { font-size: 1.45rem; }
.fg-pal .fg-pal__value { font-size: 0.88rem; }
.fg-pal .fg-pal__tile { padding: 0.65rem 0.6rem; }
.fg-pal .fg-pal__detail { padding: 0.5rem 0.55rem; font-size: 0.68rem; line-height: 1.2; overflow: hidden; }
figure.fg-pal > dl.fg-pal__detail > div, .fg-pal .fg-pal__row { flex-wrap: wrap; gap: 0 0.4rem; padding: 0.18rem 0; }
figure.fg-pal > dl.fg-pal__detail dt, .fg-pal .fg-pal__k { flex: 0 1 auto; min-width: 0; }
figure.fg-pal > dl.fg-pal__detail dd, .fg-pal .fg-pal__v { flex: 0 0 auto; margin-left: auto; font-size: 0.74rem; }
figure.fg-pal > dl.fg-pal__detail p { font-size: inherit; line-height: inherit; word-break: normal; overflow-wrap: normal; hyphens: none; }
@media (max-width: 575.98px) {
  figure.fg-pal > ol:nth-of-type(1), figure.fg-pal > dl:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  figure.fg-pal > ol:nth-of-type(2), figure.fg-pal > dl:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  figure.fg-pal > ol:nth-of-type(3), figure.fg-pal > dl:nth-of-type(3) { grid-column: 1; grid-row: 4; }
  figure.fg-pal > ol:nth-of-type(4), figure.fg-pal > dl:nth-of-type(4) { grid-column: 2; grid-row: 4; }
  figure.fg-pal > ol:nth-of-type(5), figure.fg-pal > dl:nth-of-type(5) { grid-column: 1; grid-row: 5; }
  figure.fg-pal > ol:nth-of-type(6), figure.fg-pal > dl:nth-of-type(6) { grid-column: 2; grid-row: 5; }
  figure.fg-pal > ol:nth-of-type(7), figure.fg-pal > dl:nth-of-type(7) { grid-column: 1; grid-row: 6; }
  figure.fg-pal > ol:nth-of-type(8), figure.fg-pal > dl:nth-of-type(8) { grid-column: 2; grid-row: 6; }
  figure.fg-pal > ol:nth-of-type(9), figure.fg-pal > dl:nth-of-type(9) { grid-column: 1; grid-row: 7; }
  figure.fg-pal > ol:nth-of-type(10), figure.fg-pal > dl:nth-of-type(10) { grid-column: 2; grid-row: 7; }
  figure.fg-pal > ol:nth-of-type(11), figure.fg-pal > dl:nth-of-type(11) { grid-column: 1; grid-row: 8; }
  figure.fg-pal > ol:nth-of-type(12), figure.fg-pal > dl:nth-of-type(12) { grid-column: 2; grid-row: 8; }
  figure.fg-pal > ol:nth-of-type(13), figure.fg-pal > dl:nth-of-type(13) { grid-column: 1; grid-row: 9; }
  figure.fg-pal > ol:nth-of-type(14), figure.fg-pal > dl:nth-of-type(14) { grid-column: 2; grid-row: 9; }
  figure.fg-pal > ol:nth-of-type(15), figure.fg-pal > dl:nth-of-type(15) { grid-column: 1; grid-row: 10; }
  figure.fg-pal > ol:nth-of-type(16), figure.fg-pal > dl:nth-of-type(16) { grid-column: 2; grid-row: 10; }
  figure.fg-pal > ol:nth-of-type(17), figure.fg-pal > dl:nth-of-type(17) { grid-column: 1; grid-row: 11; }
  figure.fg-pal > ol:nth-of-type(18), figure.fg-pal > dl:nth-of-type(18) { grid-column: 2; grid-row: 11; }
  figure.fg-pal > ol:nth-of-type(19), figure.fg-pal > dl:nth-of-type(19) { grid-column: 1; grid-row: 12; }
  figure.fg-pal > ol:nth-of-type(20), figure.fg-pal > dl:nth-of-type(20) { grid-column: 2; grid-row: 12; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  figure.fg-pal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  figure.fg-pal > ol:nth-of-type(1), figure.fg-pal > dl:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  figure.fg-pal > ol:nth-of-type(2), figure.fg-pal > dl:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  figure.fg-pal > ol:nth-of-type(3), figure.fg-pal > dl:nth-of-type(3) { grid-column: 3; grid-row: 3; }
  figure.fg-pal > ol:nth-of-type(4), figure.fg-pal > dl:nth-of-type(4) { grid-column: 1; grid-row: 4; }
  figure.fg-pal > ol:nth-of-type(5), figure.fg-pal > dl:nth-of-type(5) { grid-column: 2; grid-row: 4; }
  figure.fg-pal > ol:nth-of-type(6), figure.fg-pal > dl:nth-of-type(6) { grid-column: 3; grid-row: 4; }
  figure.fg-pal > ol:nth-of-type(7), figure.fg-pal > dl:nth-of-type(7) { grid-column: 1; grid-row: 5; }
  figure.fg-pal > ol:nth-of-type(8), figure.fg-pal > dl:nth-of-type(8) { grid-column: 2; grid-row: 5; }
  figure.fg-pal > ol:nth-of-type(9), figure.fg-pal > dl:nth-of-type(9) { grid-column: 3; grid-row: 5; }
  figure.fg-pal > ol:nth-of-type(10), figure.fg-pal > dl:nth-of-type(10) { grid-column: 1; grid-row: 6; }
  figure.fg-pal > ol:nth-of-type(11), figure.fg-pal > dl:nth-of-type(11) { grid-column: 2; grid-row: 6; }
  figure.fg-pal > ol:nth-of-type(12), figure.fg-pal > dl:nth-of-type(12) { grid-column: 3; grid-row: 6; }
  figure.fg-pal > ol:nth-of-type(13), figure.fg-pal > dl:nth-of-type(13) { grid-column: 1; grid-row: 7; }
  figure.fg-pal > ol:nth-of-type(14), figure.fg-pal > dl:nth-of-type(14) { grid-column: 2; grid-row: 7; }
  figure.fg-pal > ol:nth-of-type(15), figure.fg-pal > dl:nth-of-type(15) { grid-column: 3; grid-row: 7; }
  figure.fg-pal > ol:nth-of-type(16), figure.fg-pal > dl:nth-of-type(16) { grid-column: 1; grid-row: 8; }
  figure.fg-pal > ol:nth-of-type(17), figure.fg-pal > dl:nth-of-type(17) { grid-column: 2; grid-row: 8; }
  figure.fg-pal > ol:nth-of-type(18), figure.fg-pal > dl:nth-of-type(18) { grid-column: 3; grid-row: 8; }
  figure.fg-pal > ol:nth-of-type(19), figure.fg-pal > dl:nth-of-type(19) { grid-column: 1; grid-row: 9; }
  figure.fg-pal > ol:nth-of-type(20), figure.fg-pal > dl:nth-of-type(20) { grid-column: 2; grid-row: 9; }
}
@media (min-width: 992px) {
  figure.fg-pal.fg-pal--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  figure.fg-pal.fg-pal--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(1), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(2), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(3), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(3) { grid-column: 3; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(4), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(4) { grid-column: 4; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(5), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(5) { grid-column: 5; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(6), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(6) { grid-column: 1; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(7), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(7) { grid-column: 2; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(8), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(8) { grid-column: 3; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(9), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(9) { grid-column: 4; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(10), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(10) { grid-column: 5; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(11), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(11) { grid-column: 1; grid-row: 5; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(12), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(12) { grid-column: 2; grid-row: 5; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(13), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(13) { grid-column: 3; grid-row: 5; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(14), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(14) { grid-column: 4; grid-row: 5; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(15), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(15) { grid-column: 5; grid-row: 5; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(16), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(16) { grid-column: 1; grid-row: 6; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(17), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(17) { grid-column: 2; grid-row: 6; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(18), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(18) { grid-column: 3; grid-row: 6; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(19), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(19) { grid-column: 4; grid-row: 6; }
  figure.fg-pal.fg-pal--cols-5 > ol:nth-of-type(20), figure.fg-pal.fg-pal--cols-5 > dl:nth-of-type(20) { grid-column: 5; grid-row: 6; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(1), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(2), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(3), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(3) { grid-column: 3; grid-row: 3; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(4), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(4) { grid-column: 1; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(5), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(5) { grid-column: 2; grid-row: 4; }
  figure.fg-pal.fg-pal--cols-3 > ol:nth-of-type(6), figure.fg-pal.fg-pal--cols-3 > dl:nth-of-type(6) { grid-column: 3; grid-row: 4; }
}
@media print { figure.fg-pal > dl.fg-pal__detail { display: none; } }