/* Original Ontario sign illustrations inside the Clear Route learning interface. */
.sign-hero-board { margin: 28px 0 0; padding: 23px 22px 19px; border: 1px solid var(--line); background: white; }
.hero-sign-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 25px; max-width: 510px; margin: 0 auto 20px; }
.hero-sign-row img { display: block; width: 100%; max-width: 140px; height: auto; aspect-ratio: 1; object-fit: contain; }
.sign-hero-board figcaption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; border-top: 1px solid var(--line); padding-top: 16px; }
.sign-hero-board figcaption strong { display: block; color: var(--ink); font-size: 19px; line-height: 1.3; }
.sign-hero-board figcaption span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sign-explorer { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.proof-example .sign-explorer > h3 { font-size: 23px; line-height: 1.25; margin: 0 0 13px; }
.proof-example .sign-explorer > p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
.sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; margin: 0; }
.proof-example .sign-grid .sign-tile { min-width: 0; border: 1px solid var(--line); background: white; margin: 0; }
.proof-example .sign-tile > summary { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 0; min-width: 0; min-height: 225px; padding: 17px 12px 14px; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.4; cursor: pointer; list-style: none; }
.sign-tile > summary::-webkit-details-marker { display: none; }
.sign-tile > summary::marker { content: ""; }
.sign-tile > summary > img { display: block; width: 100%; max-width: 115px; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 16px; }
.sign-tile > summary > strong { display: block; min-width: 0; width: 100%; text-align: center; color: var(--ink); font-size: 16px; line-height: 1.3; margin: 0 0 9px; overflow-wrap: break-word; }
.sign-tile .sign-reveal { display: block; color: var(--link); font-size: 14px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; margin-top: auto; text-align: center; }
.sign-tile .sign-reveal > span[aria-hidden="true"] { display: none; }
.sign-tile .sign-reveal::after { content: " +"; display: inline; font-size: 17px; font-weight: 700; text-decoration: none; }
.sign-tile[open] .sign-reveal::after { content: " −"; }
.sign-tile > summary:hover { background: #f4f8fb; }
.proof-example .sign-tile[open] { border-color: var(--brand); }
.proof-example .sign-tile > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: inset 0 -3px 0 var(--ink); background: #fff9cf; color: var(--ink); }
.sign-meaning { border-top: 1px solid var(--line); padding: 15px 12px; }
.proof-example .sign-meaning p { color: var(--ink); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.sign-meaning .btn { min-height: 44px; width: 100%; padding: 10px 9px; font-size: 14px; line-height: 1.4; text-align: center; overflow-wrap: break-word; }
.sign-practice-banner { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 30px; align-items: center; padding: 25px 0; margin: 28px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.practice-signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: center; justify-items: center; }
.practice-signs img { display: block; width: 100%; max-width: 73px; height: auto; aspect-ratio: 1; object-fit: contain; }
.sign-practice-banner > div:last-child { min-width: 0; }
.sign-practice-banner h2 { font-size: 24px; line-height: 1.2; margin: 0 0 12px; }
.sign-practice-banner p { font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.sign-practice-banner .text-link { font-size: 16px; min-height: 44px; }
@media (max-width: 1019px) and (min-width: 800px) {
  .sign-grid { gap: 10px; }
  .proof-example .sign-tile > summary { padding: 14px 8px 12px; min-height: 207px; }
  .sign-tile > summary > img { max-width: 98px; }
  .sign-tile > summary > strong { font-size: 15px; }
  .sign-tile .sign-reveal { font-size: 12px; }
  .sign-meaning { padding: 13px 9px; }
}
@media (max-width: 799px) {
  .sign-hero-board { padding: 20px 18px 17px; margin-top: 25px; }
  .hero-sign-row { max-width: 390px; gap: 24px; margin-bottom: 17px; }
  .hero-sign-row img { max-width: 115px; }
  .sign-hero-board figcaption { gap: 15px; padding-top: 14px; }
  .sign-hero-board figcaption strong { font-size: 18px; }
  .sign-explorer { margin-top: 25px; padding-top: 22px; }
  .sign-grid { gap: 13px; }
  .sign-practice-banner { grid-template-columns: 200px minmax(0, 1fr); gap: 25px; }
  .practice-signs { gap: 12px; }
  .practice-signs img { max-width: 62px; }
  .sign-practice-banner h2 { font-size: 23px; }
}
@media (max-width: 559px) {
  .sign-hero-board { padding: 17px 15px; }
  .hero-sign-row { max-width: 285px; gap: 18px; margin-bottom: 15px; }
  .hero-sign-row img { max-width: 82px; }
  .sign-hero-board figcaption { display: block; }
  .sign-hero-board figcaption strong { font-size: 17px; margin-bottom: 6px; }
  .sign-hero-board figcaption span { font-size: 14px; }
  .proof-example .sign-explorer > h3 { font-size: 22px; }
  .proof-example .sign-explorer > p { font-size: 16px; }
  .sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof-example .sign-tile > summary { min-height: 204px; padding: 15px 10px 12px; }
  .sign-tile > summary > img { max-width: 102px; margin-bottom: 14px; }
  .sign-tile > summary > strong { font-size: 16px; line-height: 1.3; }
  .sign-tile .sign-reveal { font-size: 13px; }
  .sign-meaning { padding: 13px 10px; }
  .proof-example .sign-meaning p { font-size: 14px; }
  .sign-meaning .btn { font-size: 13px; padding-inline: 8px; }
  .sign-practice-banner { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 23px 0; margin-top: 25px; }
  .practice-signs { max-width: 245px; gap: 20px; }
  .practice-signs img { max-width: 69px; }
  .sign-practice-banner h2 { font-size: 22px; }
  .sign-practice-banner p { font-size: 16px; }
}
@media (max-width: 359px) {
  .sign-hero-board { padding: 15px 13px; }
  .hero-sign-row { gap: 15px; }
  .hero-sign-row img { max-width: 72px; }
  .sign-grid { gap: 10px; }
  .proof-example .sign-tile > summary { padding: 12px 8px; min-height: 197px; }
  .sign-tile > summary > img { max-width: 86px; }
  .sign-tile > summary > strong { font-size: 15px; }
  .sign-tile .sign-reveal { font-size: 12px; }
  .sign-meaning { padding-inline: 8px; }
  .sign-meaning .btn { font-size: 13px; padding-inline: 6px; }
}
@media print {
  .sign-hero-board, .sign-tile, .sign-practice-banner { break-inside: avoid; }
  .sign-meaning .btn { display: none; }
}