/* Horse racing tutorials: a plain, readable article that also prints well.
   Shared by racingform.php and wagering.php. */
.tut{
  --ink:#1d2327; --ink-2:#47525a; --mute:#6b767e; --rule:#dfe4e8; --soft:#f5f7f6;
  --accent:#1f5e3b;          /* racing green, used sparingly */
  --accent-soft:#e8f1ec;
  max-width:720px; margin:28px auto 60px; padding:0 20px;
  font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.65; color:var(--ink);
  text-align:left;
}
.tut *{box-sizing:border-box}
.tut p, .tut li, .tut td, .tut th, .tut a{font-size:inherit}
.tut .kicker{font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.tut h1{font-size:40px;line-height:1.15;margin:0 0 12px;font-weight:700;color:var(--ink)}
.tut .lead{font-size:20px;color:var(--ink-2);margin:0 0 22px}
.tut h2{font-size:25px;line-height:1.25;margin:40px 0 10px;padding-top:14px;border-top:1px solid var(--rule);color:var(--ink);font-weight:700}
.tut p{margin:0 0 16px}
.tut a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.tut b, .tut strong{color:var(--ink)}

/* "On this page" */
.tut .toc{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;background:var(--soft);border:1px solid var(--rule);border-radius:4px;padding:12px 16px;margin:0 0 8px}
.tut .toc b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.tut .toc ol{margin:0;padding-left:20px}
.tut .toc li{margin:2px 0;list-style:decimal}
.tut .toc a{text-decoration:none}

/* "How to make the bet" callout */
.tut .howto{border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 4px 4px 0;padding:12px 16px;margin:18px 0 22px;break-inside:avoid;page-break-inside:avoid}
.tut .howto .label{font:700 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tut .howto ol{margin:4px 0 8px;padding-left:22px}
.tut .howto li{list-style:lower-alpha;margin:0}
.tut .howto .say{font-style:italic;font-size:19px;margin:6px 0 0}
.tut .howto .say::before{content:"Say: ";font-style:normal;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}

/* small tables */
.tut table.facts{border-collapse:collapse;margin:8px 0 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;break-inside:avoid;page-break-inside:avoid}
.tut table.facts th{text-align:left;font-weight:600;color:var(--ink-2);border-bottom:2px solid var(--rule);padding:6px 18px 6px 0;white-space:nowrap}
.tut table.facts td{border-bottom:1px solid var(--rule);padding:6px 18px 6px 0;white-space:nowrap}
.tut table.facts td.r, .tut table.facts th.r{text-align:right}
.tut .note{font-size:15px;color:var(--mute);margin-top:-10px}

/* a highlighted example */
.tut .example{border:1px solid var(--rule);border-radius:4px;padding:12px 16px;margin:18px 0 22px;background:#fff;break-inside:avoid;page-break-inside:avoid}
.tut .example .label{font:700 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}

/* the lettered racing-form columns */
.tut dl.columns{margin:12px 0 20px}
.tut dl.columns dt{font-weight:700;margin-top:14px;display:flex;align-items:center;gap:10px}
.tut dl.columns dt .letter{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#c62828;color:#fff;font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.tut dl.columns dd{margin:4px 0 0 38px}

/* images */
.tut figure{margin:18px 0 22px;break-inside:avoid;page-break-inside:avoid}
.tut figure img{display:block;max-width:100%;height:auto;border:1px solid var(--rule);border-radius:3px}
.tut figcaption{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--mute);margin-top:6px}

.tut .signoff{font-style:italic;font-size:20px;margin-top:24px}
.tut .seealso{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;border-top:1px solid var(--rule);margin-top:36px;padding-top:12px;color:var(--mute)}

@media (max-width:600px){
  .tut{font-size:17px}
  .tut h1{font-size:31px}
  .tut .lead{font-size:18px}
  .tut h2{font-size:22px}
}

/* Print: just the article, black on white, no tinted boxes, links show where they go. */
@page{margin:.6in}
@media print{
  nav, .navbar-fixed, header nav, .sidenav, .tut .toc{display:none !important}
  body{background:#fff !important}
  .tut{max-width:none;margin:0;padding:0;font-size:11pt;line-height:1.42;color:#000}
  .tut p{margin:0 0 7pt}
  .tut .lead{margin-bottom:10pt}
  .tut .howto, .tut .example{padding:6pt 10pt;margin:8pt 0 10pt}
  .tut table.facts{font-size:9.5pt;margin:4pt 0 10pt}
  .tut table.facts th, .tut table.facts td{padding:2pt 14pt 2pt 0}
  .tut dl.columns dt{margin-top:7pt}
  .tut h1{font-size:22pt;margin-bottom:6pt}
  .tut .lead{font-size:12pt}
  .tut h2{font-size:14.5pt;margin:14pt 0 5pt;padding-top:7pt;break-after:avoid;page-break-after:avoid}
  .tut a{color:#000;text-decoration:none}
  .tut a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .tut .howto{background:none;border-left:3pt solid #000}
  .tut .howto .label, .tut .howto .say::before, .tut .kicker{color:#000}
  .tut dl.columns dt .letter{background:none;color:#000;border:1.5pt solid #000}
  .tut figure img{max-height:5.5in;width:auto}
}