/* === Eye colour chart and inheritance calculator ===
   Framed like the online eye test (.etest): a navy card with a top bar, here holding the two tabs.
   Brand colours come from the theme variables only. The iris swatch colours are the
   illustrative eye colours from the tool specification, not brand colours. */

.tl-eyecolour { --tl-ec-line: rgb(255 255 255 / 0.16); --tl-ec-soft-bg: rgb(255 255 255 / 0.06); position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--navy); color: #fff; }
.panel.dark .tl-eyecolour { background: rgb(255 255 255 / 0.04); border: 1px solid var(--tl-ec-line); }
.tl-eyecolour p, .tl-eyecolour li, .tl-eyecolour dd { font-size: clamp(16px, 1.08vw, 21px); line-height: 1.5; }
.tl-eyecolour h3 { font-weight: 500; }
.tl-eyecolour :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tl-eyecolour [hidden] { display: none !important; }

/* --- Iris swatch (illustrative): base colour, fibres, darker limbal ring, pupil, catch-light --- */
.tl-eyecolour-iris {
  --iris: #5B3A29; --inner: transparent; --wedge: transparent;
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background-color: var(--iris);
  background-image:
    radial-gradient(circle at 37% 33%, rgb(255 255 255 / 0.8) 0 4.5%, transparent 5.5%),
    radial-gradient(circle, #060606 0 19%, transparent 20.5%),
    radial-gradient(circle, transparent 0 60%, rgb(0 0 0 / 0.32) 84%, rgb(0 0 0 / 0.62) 99%),
    repeating-conic-gradient(rgb(255 255 255 / 0.1) 0 2.5deg, rgb(0 0 0 / 0.1) 2.5deg 6deg),
    radial-gradient(circle, var(--inner) 0 30%, transparent 47%),
    conic-gradient(from 25deg, var(--wedge) 0 78deg, transparent 0);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.1), 0 10px 26px -12px rgb(0 0 0 / 0.6);
}
.tl-eyecolour-iris.is-brown { --iris: #5B3A29; }
.tl-eyecolour-iris.is-amber { --iris: #B8812E; }
.tl-eyecolour-iris.is-hazel { --iris: #8A6D3B; --inner: rgb(91 58 41 / 0.85); }
.tl-eyecolour-iris.is-green { --iris: #5E8C5A; }
.tl-eyecolour-iris.is-blue { --iris: #5B8DB8; }
.tl-eyecolour-iris.is-grey { --iris: #8E9AA5; }
.tl-eyecolour-iris.is-sector { --wedge: #5B3A29; }
.tl-eyecolour-iris.is-central { --inner: #9A6A2E; }
.tl-eyecolour-iris.is-mini { width: clamp(44px, 3.4vw, 64px); }
.tl-eyecolour-iris.is-dot { display: inline-block; width: 1.25em; margin-right: 0.45em; vertical-align: -0.28em; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 0 0 3px rgb(0 0 0 / 0.12); }
.tl-eyecolour-iris.is-big { width: 100%; max-width: clamp(130px, 13vw, 250px); }

/* --- Top bar with the tabs --- */
.tl-eyecolour-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 2vw; padding: clamp(14px, 1.3vw, 26px) clamp(16px, 2.6vw, 52px); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.tl-eyecolour-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; background: var(--tl-ec-soft-bg); }
.tl-eyecolour-tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(46px, 3.2vw, 60px); padding: 8px clamp(18px, 1.6vw, 30px); border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: clamp(16px, 1.1vw, 21px); font-weight: 500; line-height: 1.2; text-align: center; transition: background-color 0.3s, color 0.3s; }
.tl-eyecolour-tab svg { flex: none; color: var(--soft); transition: color 0.3s; }
.tl-eyecolour-tab:hover { background: rgb(255 255 255 / 0.1); }
.tl-eyecolour-tab[aria-selected="true"] { background: #fff; color: var(--navy); }
.tl-eyecolour-tab[aria-selected="true"] svg { color: var(--blue); }
.tl-eyecolour .tl-eyecolour-privacy { display: inline-flex; align-items: center; gap: 10px; color: rgb(255 255 255 / 0.8); font-size: 16px; }
.tl-eyecolour-privacy svg { flex: none; color: var(--soft); }

/* --- Panes --- */
.tl-eyecolour-pane { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 36px); padding: clamp(22px, 2.6vw, 52px); }
.tl-eyecolour-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 2vw; }
.tl-eyecolour .tl-eyecolour-lead { max-width: 40em; color: rgb(255 255 255 / 0.9); font-size: clamp(17px, 1.3vw, 25px); line-height: 1.4; }
.tl-eyecolour .fchip.tl-eyecolour-compare { gap: 10px; height: auto; min-height: 46px; padding: 8px 20px; border-color: rgb(255 255 255 / 0.3); background: var(--tl-ec-soft-bg); color: #fff; font-size: clamp(16px, 1vw, 19px); }
.tl-eyecolour .fchip.tl-eyecolour-compare:hover { border-color: #fff; color: #fff; }
.tl-eyecolour .fchip.tl-eyecolour-compare[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--navy); }
.tl-eyecolour .fchip.tl-eyecolour-compare svg { flex: none; }
.tl-eyecolour .tl-eyecolour-hint { margin-top: -6px; color: var(--pale); }

/* Swatch grid */
.tl-eyecolour-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1vw, 20px); }
.tl-eyecolour-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 0.9vw, 16px); min-width: 0; min-height: 44px; padding: clamp(14px, 1.4vw, 26px) clamp(10px, 1vw, 20px); border: 1px solid var(--tl-ec-line); border-radius: var(--r); background: rgb(255 255 255 / 0.03); color: #fff; transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.tl-eyecolour-sw .tl-eyecolour-iris { width: 100%; max-width: clamp(64px, 6.4vw, 120px); transition: transform 0.4s var(--ease); }
.tl-eyecolour-sw:hover { border-color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.07); }
.tl-eyecolour-sw:hover .tl-eyecolour-iris { transform: scale(1.04); }
.tl-eyecolour-sw[aria-pressed="true"] { border-color: #fff; background: rgb(255 255 255 / 0.12); }
.tl-eyecolour-sw[aria-pressed="true"] .tl-eyecolour-iris { box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px #fff; }
.tl-eyecolour-sw-name { font-size: clamp(16px, 1.15vw, 22px); font-weight: 500; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.tl-eyecolour-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy); opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s var(--ease); }
.tl-eyecolour-sw[aria-pressed="true"] .tl-eyecolour-tick { opacity: 1; transform: none; }

/* Colour cards */
.tl-eyecolour-cards { display: grid; gap: clamp(12px, 1.2vw, 24px); }
.tl-eyecolour-cards.is-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-eyecolour-card { display: grid; grid-template-columns: clamp(130px, 13vw, 250px) minmax(0, 1fr); grid-template-areas: "media head" "media facts" "media foot"; align-content: start; gap: clamp(12px, 1.2vw, 24px) clamp(20px, 2.6vw, 52px); padding: clamp(20px, 2.2vw, 44px); border: 1px solid var(--tl-ec-line); border-radius: var(--r); background: rgb(255 255 255 / 0.07); }
.tl-eyecolour-card-media { grid-area: media; align-self: center; }
.tl-eyecolour-card-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tl-eyecolour-card-head h3 { font-size: clamp(28px, 2.4vw, 50px); line-height: 1.05; letter-spacing: -0.01em; }
.tl-eyecolour-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; color: rgb(255 255 255 / 0.85); font-size: 16px; line-height: 1.2; }
.tl-eyecolour-facts { grid-area: facts; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 40px); margin: 0; }
.tl-eyecolour-facts > div { padding-top: clamp(12px, 1vw, 18px); border-top: 1px solid rgb(255 255 255 / 0.18); }
.tl-eyecolour-facts dt { margin-bottom: 8px; color: var(--pale); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
.tl-eyecolour-facts dd { margin: 0; color: #fff; }
.tl-eyecolour-facts ul { display: grid; gap: 10px; }
.tl-eyecolour-facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tl-eyecolour-src { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: rgb(var(--soft-rgb) / 0.2); color: var(--pale); font-size: 16px; line-height: 1.25; white-space: nowrap; }
.tl-eyecolour .tl-eyecolour-card-foot { grid-area: foot; color: rgb(255 255 255 / 0.75); font-size: 16px; }
.tl-eyecolour-card-foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tl-eyecolour-cards.is-compare .tl-eyecolour-card { grid-template-columns: clamp(72px, 6.6vw, 130px) minmax(0, 1fr); grid-template-areas: "media head" "facts facts" "foot foot"; }
.tl-eyecolour-cards.is-compare .tl-eyecolour-facts { grid-template-columns: 1fr; gap: 16px; }
.tl-eyecolour-cards.is-compare .tl-eyecolour-card-head { flex-direction: column; align-items: flex-start; }

/* Heterochromia strip */
.tl-eyecolour-hetero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: clamp(16px, 2.4vw, 48px); align-items: center; padding-top: clamp(18px, 1.8vw, 36px); border-top: 1px solid rgb(255 255 255 / 0.14); }
.tl-eyecolour-hetero-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tl-eyecolour-hetero-head h3 { font-size: clamp(22px, 1.7vw, 34px); }
.tl-eyecolour-hetero-head p { color: rgb(255 255 255 / 0.85); }
.tl-eyecolour-hetero-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 20px); }
.tl-eyecolour-hetero-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(16px, 1.4vw, 28px); border: 1px solid var(--tl-ec-line); border-radius: var(--r); background: rgb(255 255 255 / 0.05); }
.tl-eyecolour-hetero-list b { font-size: clamp(17px, 1.15vw, 22px); font-weight: 500; line-height: 1.25; }
.tl-eyecolour-hetero-list span:not(.tl-eyecolour-pair):not(.tl-eyecolour-iris) { color: rgb(255 255 255 / 0.82); font-size: clamp(16px, 1.02vw, 20px); line-height: 1.45; }
.tl-eyecolour-pair { display: inline-flex; gap: 10px; margin-bottom: 4px; }
.tl-eyecolour-more { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.tl-eyecolour-more svg { flex: none; transition: transform 0.4s var(--ease); }
.tl-eyecolour-more:hover { color: var(--pale); }
.tl-eyecolour-more:hover svg { transform: translateX(4px); }

/* --- Calculator --- */
.tl-eyecolour-calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 48px); align-items: stretch; }
.tl-eyecolour-inputs { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 30px); min-width: 0; }
.tl-eyecolour-parent { display: flex; flex-direction: column; gap: 12px; }
.tl-eyecolour .tl-eyecolour-label { color: var(--pale); font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; }
.tl-eyecolour-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tl-eyecolour-pick { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 8px 14px 8px 8px; border: 1px solid var(--tl-ec-line); border-radius: 999px; background: rgb(255 255 255 / 0.03); color: #fff; font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; line-height: 1.2; text-align: left; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.tl-eyecolour-pick .tl-eyecolour-iris.is-mini { width: clamp(38px, 2.6vw, 50px); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12); }
.tl-eyecolour-pick span { min-width: 0; }
.tl-eyecolour-pick:hover { border-color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.08); }
.tl-eyecolour-pick[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--navy); }
.tl-eyecolour-pick[aria-pressed="true"] .tl-eyecolour-iris { box-shadow: 0 0 0 2px rgb(var(--navy-rgb) / 0.25); }
.tl-eyecolour .tl-eyecolour-helper { display: flex; gap: 12px; padding: 14px 16px; border-radius: calc(var(--r) * 0.7); background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.9); }
.tl-eyecolour-helper svg { flex: none; margin-top: 2px; color: var(--soft); }
.tl-eyecolour-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; }
.tl-eyecolour .pill-white { --bg: #fff; --fg: var(--navy); --dot: var(--blue); --hover-fg: #fff; --line: #fff; }
.tl-eyecolour .pill { font-size: clamp(16px, 1.1vw, 22px); }
.tl-eyecolour .pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tl-eyecolour .tl-eyecolour-need { color: #fff; font-weight: 500; }

/* Result card: white, like the eye test result boxes */
.tl-eyecolour-result { display: flex; flex-direction: column; gap: clamp(14px, 1.3vw, 26px); min-width: 0; padding: clamp(20px, 2.2vw, 44px); border-radius: var(--r); background: #fff; color: var(--navy); }
.tl-eyecolour-result:focus { outline: none; }
.tl-eyecolour-result:focus-visible { outline: 3px solid var(--soft); outline-offset: 3px; }
.tl-eyecolour-result-head { display: flex; flex-direction: column; gap: 8px; }
.tl-eyecolour-result-head h3 { color: var(--gray-700); font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-eyecolour .tl-eyecolour-result .tl-eyecolour-parents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--navy); font-size: clamp(18px, 1.5vw, 30px); font-weight: 500; line-height: 1.3; }
.tl-eyecolour .tl-eyecolour-result.is-empty .tl-eyecolour-parents { color: var(--gray-700); font-size: clamp(17px, 1.2vw, 23px); font-weight: 400; }
.tl-eyecolour-x { color: var(--gray-500); font-weight: 400; }
.tl-eyecolour-bars { display: grid; gap: clamp(14px, 1.2vw, 22px); }
.tl-eyecolour-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.tl-eyecolour-row-label { min-width: 0; color: var(--navy); font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; }
.tl-eyecolour-row-val { color: var(--navy); font-size: clamp(22px, 1.8vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tl-eyecolour-result.is-empty .tl-eyecolour-row-val { color: var(--gray-500); }
.tl-eyecolour-track { position: relative; grid-column: 1 / -1; height: 14px; overflow: hidden; border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px rgb(var(--navy-rgb) / 0.08); }
/* eyecolour.js sets the range bar's left, so these keep their direction; on right-to-left pages the
   whole track (no text in it) is mirrored, so the bars fill from the right */
/*rtl:begin:ignore*/
.tl-eyecolour-fill, .tl-eyecolour-ext { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width 0.6s var(--ease), left 0.6s var(--ease); }
.tl-eyecolour-fill { border-radius: 999px 0 0 999px; }
/*rtl:end:ignore*/
.tl-eyecolour-fill.is-brown { background: #5B3A29; }
.tl-eyecolour-fill.is-green { background: #5E8C5A; }
.tl-eyecolour-fill.is-blue { background: #5B8DB8; }
/*rtl:ignore*/
.tl-eyecolour-ext { opacity: 0.55; background-image: repeating-linear-gradient(135deg, currentColor 0 4px, transparent 4px 8px); }
.tl-eyecolour-ext.is-brown { color: #5B3A29; }
.tl-eyecolour-ext.is-green { color: #5E8C5A; }
.tl-eyecolour-ext.is-blue { color: #5B8DB8; }
.tl-eyecolour .tl-eyecolour-zero { padding-top: 14px; border-top: 1px solid rgb(var(--navy-rgb) / 0.12); color: var(--gray-700); }
.tl-eyecolour .tl-eyecolour-note { padding: 12px 14px; border-radius: 14px; background: var(--tint); color: var(--navy); }
.tl-eyecolour .tl-eyecolour-result p { font-size: clamp(16px, 1.02vw, 20px); }

/* Messages under the result, closed by the newborn note; two balanced columns on wide screens */
.tl-eyecolour-box { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 1.8vw, 36px); border: 1px solid rgb(255 255 255 / 0.25); border-radius: var(--r); background: rgb(255 255 255 / 0.08); }
.tl-eyecolour-box h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 1.3vw, 25px); }
.tl-eyecolour-box h3 svg { flex: none; color: var(--soft); }
.tl-eyecolour-notes ul { column-count: 2; column-gap: clamp(24px, 3vw, 60px); }
.tl-eyecolour-notes li { position: relative; break-inside: avoid; margin-bottom: 12px; padding-left: 1.4em; color: rgb(255 255 255 / 0.9); }
.tl-eyecolour-notes li:not(.is-baby)::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--soft); }
.tl-eyecolour-notes li.is-baby { padding: 12px 14px 12px 46px; border-radius: 14px; background: rgb(var(--soft-rgb) / 0.16); }
.tl-eyecolour-notes li.is-baby svg { position: absolute; left: 14px; top: 13px; color: var(--soft); }
.tl-eyecolour-notes li.is-baby b { color: #fff; font-weight: 500; }

/* Footer: disclaimer (both tabs) and the consultation button */
.tl-eyecolour-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(20px, 3vw, 60px); padding: clamp(20px, 2vw, 40px) clamp(22px, 2.6vw, 52px); border-top: 1px solid rgb(255 255 255 / 0.14); background: rgb(0 0 0 / 0.1); }
.tl-eyecolour .tl-eyecolour-disclaimer { max-width: 62em; color: rgb(255 255 255 / 0.78); font-size: clamp(16px, 0.95vw, 18px); }
.tl-eyecolour-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }

/* --- Tablet and phone --- */
@media (max-width: 1100px) {
  .tl-eyecolour-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl-eyecolour-sw { flex-direction: row; justify-content: flex-start; padding: 12px 14px; }
  .tl-eyecolour-sw .tl-eyecolour-iris { max-width: 56px; }
  .tl-eyecolour-sw-name { text-align: left; }
  .tl-eyecolour-tick { top: 50%; right: 12px; margin-top: -13px; }
  .tl-eyecolour-facts { grid-template-columns: 1fr; gap: 14px; }
  .tl-eyecolour-hetero { grid-template-columns: 1fr; }
  .tl-eyecolour-calc { grid-template-columns: 1fr; }
  .tl-eyecolour-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl-eyecolour-foot { grid-template-columns: 1fr; }
  .tl-eyecolour-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .tl-eyecolour { border-radius: 24px; }
  .tl-eyecolour-bar { padding: 14px 16px; }
  .tl-eyecolour-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; }
  .tl-eyecolour-tab { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 10px; border-radius: 18px; }
  .tl-eyecolour-pane { padding: 22px 16px 24px; }
  .tl-eyecolour-head { flex-direction: column; align-items: stretch; }
  .tl-eyecolour .fchip.tl-eyecolour-compare { justify-content: center; }
  .tl-eyecolour-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tl-eyecolour-sw { flex-direction: column; justify-content: center; gap: 10px; padding: 14px 10px 12px; border-radius: 18px; }
  .tl-eyecolour-sw .tl-eyecolour-iris { max-width: 58px; }
  .tl-eyecolour-sw-name { text-align: center; overflow-wrap: normal; }
  .tl-eyecolour-tick { top: 8px; right: 8px; width: 24px; height: 24px; margin-top: 0; }
  .tl-eyecolour-notes ul { column-count: 1; }
  .tl-eyecolour-cards.is-compare { grid-template-columns: 1fr; }
  .tl-eyecolour-card, .tl-eyecolour-cards.is-compare .tl-eyecolour-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "media head" "facts facts" "foot foot"; padding: 18px 16px; border-radius: 20px; }
  .tl-eyecolour-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tl-eyecolour-card-head h3 { font-size: 28px; }
  .tl-eyecolour-hetero-list { grid-template-columns: 1fr; }
  .tl-eyecolour-hetero-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pic name" "pic text"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px; border-radius: 18px; }
  .tl-eyecolour-hetero-list li .tl-eyecolour-pair { grid-area: pic; margin: 0; }
  .tl-eyecolour-hetero-list li b { grid-area: name; }
  .tl-eyecolour-hetero-list li > span:last-child { grid-area: text; }
  .tl-eyecolour-hetero-list .tl-eyecolour-iris.is-mini { width: 40px; }
  .tl-eyecolour-pair { gap: 6px; }
  .tl-eyecolour-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-eyecolour-pick { gap: 8px; min-height: 52px; padding: 6px 10px 6px 6px; }
  .tl-eyecolour-pick .tl-eyecolour-iris.is-mini { width: 36px; }
  .tl-eyecolour-result { padding: 20px 16px; border-radius: 20px; }
  .tl-eyecolour-box { padding: 18px 16px; border-radius: 20px; }
  .tl-eyecolour-foot { padding: 20px 16px 22px; }
  .tl-eyecolour-actions .pill { width: 100%; }
}
@media (max-width: 380px) {
  .tl-eyecolour-pick { padding-right: 8px; }
  .tl-eyecolour-pick .tl-eyecolour-iris.is-mini { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-eyecolour-fill, .tl-eyecolour-ext, .tl-eyecolour-sw, .tl-eyecolour-sw .tl-eyecolour-iris, .tl-eyecolour-tick, .tl-eyecolour-more svg, .tl-eyecolour-tab, .tl-eyecolour-pick { transition: none; }
  .tl-eyecolour-sw:hover .tl-eyecolour-iris, .tl-eyecolour-more:hover svg { transform: none; }
}
@media print {
  .tl-eyecolour { border: 0; background: #fff; color: #000; }
  .tl-eyecolour-bar, .tl-eyecolour-actions { display: none; }
}

/* Right-to-left pages: the probability bars fill from the right */
/*rtl:begin:ignore*/
[dir="rtl"] .tl-eyecolour-track { transform: scaleX(-1); }
/*rtl:end:ignore*/