/* The step-by-step install guide: readable on screen, and a plain black-on-white page when printed. */
.mint-nav a[aria-current="page"] { color: var(--teal-200); }
.guide-hero { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.2rem, 3vw, 2rem); }
.guide-hero h1 em { font-style: italic; color: var(--teal-200); }
.guide-hero .lede { max-width: 42rem; margin-top: 1rem; }
.guide-actions { margin-top: 1.6rem; justify-content: flex-start; }
.guide-actions .note { flex-basis: 100%; font-size: .85rem; color: var(--ink-3); }
.guide-body { padding-top: clamp(1rem, 3vw, 2rem); }
.guide { max-width: 46rem; }
.guide h2 { scroll-margin-top: 1.5rem; }
.guide b, .guide strong { color: var(--ink); font-weight: 600; }
/* Space between a list, table or code block and whatever follows it. */
.guide :is(ol, ul, .table-wrap, .code) + :is(p, ol, ul, h4) { margin-top: 1.1rem; }
.guide p + :is(ul, ol) { margin-top: .8rem; }

.overview { margin-top: 2rem; padding: 1.3rem 1.45rem; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel); }
.overview h2 { margin: 0 0 .7rem !important; font-size: 1.5rem !important; }
.overview ol { list-style: none; padding: 0 !important; counter-reset: ov; gap: .35rem !important; }
.overview li { counter-increment: ov; display: flex; gap: .7rem; align-items: baseline; }
.overview li::before { content: counter(ov); flex: none; width: 1.6rem; font: 600 .8rem/1 var(--mono); color: var(--teal-200); }
.overview li.extra::before { content: '+'; }
.overview a { color: var(--ink-2); text-decoration: none; }
.overview a:hover { color: var(--teal-200); text-decoration: underline; }

.warning { border-left-color: var(--pink); background: rgba(240,156,204,.07); color: var(--ink-2); font-size: 1rem; }
.warning strong { color: var(--ink); }
.tip { margin-top: 1.2rem; padding: .9rem 1.15rem; border-radius: 10px; border: 1px solid var(--teal-line); background: rgba(171,225,124,.05); font-size: .97rem !important; }

.step { margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.step-num { font: 500 .72rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-300); }
.guide .step h2 { margin-top: .35rem; }

/* Numbered actions: one thing to do per line, with a large number to keep your place. */
.do { list-style: none; padding: 0 !important; counter-reset: do; gap: .85rem !important; margin-top: 1rem; }
.do > li { counter-increment: do; position: relative; padding-left: 2.7rem; min-height: 1.9rem; }
.do > li::before { content: counter(do); position: absolute; left: 0; top: .1rem; width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 1px solid var(--teal-line); background: rgba(171,225,124,.08); display: grid; place-items: center; font: 600 .85rem/1 var(--mono); color: var(--teal-200); }
.do > li.stop { padding: .85rem 1rem .85rem 3.7rem; border-radius: 10px; border: 1px solid rgba(240,156,204,.45); background: rgba(240,156,204,.07); }
.do > li.stop::before { left: 1rem; top: .95rem; border-color: rgba(240,156,204,.6); background: rgba(240,156,204,.12); color: var(--pink); }

.checklist { list-style: none; padding: 0 !important; margin-top: 1rem; }
.checklist li { position: relative; padding-left: 2.1rem; }
.checklist li::before { content: ''; position: absolute; left: .15rem; top: .38em; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--teal-300); border-radius: 4px; }

kbd { display: inline-block; min-width: 1.6em; padding: .05em .45em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: rgba(255,255,255,.05); font: 600 .85em/1.5 var(--mono); color: var(--ink); text-align: center; }
.guide .code { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .9rem; }
.guide .code + p { margin-top: 1rem; }
.guide .table th { width: 40%; }
.guide h4 { margin: 1.5rem 0 .4rem; font: 600 1.05rem/1.4 var(--sans); color: var(--ink); }
.faq-list h3 { font-size: 1.35rem; margin: 1.6rem 0 .4rem; }
.sources { font-size: .93rem !important; }
.sources li { overflow-wrap: anywhere; }
.guide-help { margin-top: 3rem; }

@media (max-width: 680px) {
  .guide-actions .btn { width: 100%; justify-content: center; }
  .do > li.stop { padding-left: 3.2rem; }
  .do > li.stop::before { left: .75rem; }
}

@media print {
  @page { size: letter; margin: 15mm 15mm 17mm; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; }
  body::before, body::after, .mint-header, .skip-link, .guide-actions, .guide-help, footer .foot-links, footer .brand img { display: none !important; }
  section { padding: 0 !important; }
  .wrap { width: 100% !important; }
  .guide, .article-head { max-width: none !important; }
  h1, h2, h3, h4, p, li, td, th, b, strong, em, code, kbd, .lede, .byline, .eyebrow, .step-num, .crumbs, .crumbs a { color: #111 !important; text-shadow: none !important; }
  .guide-hero { padding: 0 0 4mm !important; }
  .guide-hero h1 { font-size: 26pt !important; }
  .guide h2 { font-size: 17pt !important; margin-top: 7mm !important; break-after: avoid; }
  .guide h3, .guide h4 { break-after: avoid; }
  .article p, .article li { font-size: 10.5pt !important; line-height: 1.5 !important; }
  .step { margin-top: 6mm; padding-top: 4mm; border-top: 1px solid #999; }
  .do > li, .checklist li, .code, .notice, .tip, .table tr, .overview, .faq-list h3 + p { break-inside: avoid; }
  .overview, .tip, .notice, .do > li.stop { background: none !important; border: 1.2pt solid #111 !important; box-shadow: none !important; }
  .notice { border-width: 0 0 0 3pt !important; }
  .do > li::before, .do > li.stop::before { border: 1pt solid #111 !important; background: none !important; color: #111 !important; }
  .checklist li::before { border-color: #111 !important; }
  .code { background: #f2f2f2 !important; border: 1px solid #bbb !important; color: #111 !important; }
  kbd { border-color: #777 !important; background: none !important; }
  .table th, .table td { border-color: #bbb !important; }
  a { color: #111 !important; text-decoration: underline !important; }
  /* A printed page can't be clicked, so web addresses are printed after their links. */
  .guide a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; color: #444; overflow-wrap: anywhere; }
  .guide .sources a::after, .overview a::after { content: none !important; }
  .guide a[href^="/"]::after { content: " (mint.arynwood.com" attr(href) ")"; font-size: .85em; font-weight: 400; color: #444; }
  .overview li::before { color: #111 !important; }
  .guide .overview h2 { margin-top: 0 !important; }
  .guide .step h2 { margin-top: 1mm !important; }
  /* Keep a lead-in line on the same page as the commands it introduces. */
  .guide p:has(+ .code) { break-after: avoid; }
  /* Every printed page already carries the guide's address in its footer. */
  footer { display: none !important; }
}