/* guides.css
   The guides (apps/landing/guides/, written by scripts/build_guide_pages.py). They use the legal
   pages' reading column (main.legal, main.css) and add the two-sentence answer, the boxed lists
   (what can help, call today, get help now, printable questions), the sources and the closing
   button. Tokens only; no em dashes. */

main.guide{padding-bottom:88px}
.legal .guide-crumb{margin:0 0 10px;font-size:13.5px;font-weight:600}
.legal .guide-crumb a{color:var(--primary);text-decoration:none}
.guide h1{font-size:clamp(1.9rem,4.4vw,2.5rem);line-height:1.15;margin-bottom:20px;text-wrap:balance}
.legal .guide-reviewed{margin:-8px 0 18px;font-size:13.5px;font-weight:600;color:var(--primary)}
.legal .guide-lede{font-size:17px;color:var(--body)}

/* Boxes: a surface card; the kind sets the tint. */
.guide-box{margin:26px 0;padding:20px 22px 8px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.legal .guide-box h2,.legal .guide-box h3{margin-top:0}
.legal .guide-box h2+h3{margin-top:18px}
.legal .box-answer{background:var(--selected-bg);border-color:var(--selected-bg)}
.legal .box-answer p{font-size:17px;line-height:1.6;color:var(--ink)}
.box-home{background:color-mix(in srgb,var(--mint) 9%,var(--surface));border-color:color-mix(in srgb,var(--mint) 40%,var(--surface))}
.box-today{background:var(--ember-soft);border-color:color-mix(in srgb,var(--ember) 45%,var(--surface))}
.box-now{background:color-mix(in srgb,var(--error) 6%,var(--surface));border-color:color-mix(in srgb,var(--error) 32%,var(--surface))}
.legal .box-now h2{color:var(--error)}

/* A checklist prints with an empty box for each question. */
.legal .checklist{list-style:none;padding-left:0}
.legal .checklist li{position:relative;padding-left:30px}
.checklist li::before{content:'';position:absolute;left:0;top:.2em;width:17px;height:17px;border:2px solid var(--primary);border-radius:4px}
.print-btn{float:right;margin:0 0 12px 12px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--surface);color:var(--primary);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.print-btn:hover{background:var(--selected-bg)}
.print-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.print-btn[hidden]{display:none}

.guide-sources{margin-top:44px;padding-top:6px;border-top:1px solid var(--line)}
.legal .guide-sources h2{margin-top:22px}
.legal .guide-sources li{font-size:14px;line-height:1.5}

/* The closing button on the site's green, like the homepage's next step. */
.guide-cta{margin-top:44px;padding:30px 24px;border-radius:var(--r-card);background:var(--hero-bottom);text-align:center}
.legal .guide-cta p{margin:0 0 16px;color:var(--fg-on-dark);font-size:16.5px;font-weight:600}
.guide-cta a.btn:focus-visible{outline-color:var(--mint)}

/* The guides index: one card per guide. */
.guide-list{list-style:none;display:grid;gap:14px;margin:26px 0 0;padding:0}
.legal .guide-list li{margin:0}
.legal .guide-list a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;transition:border-color var(--dur) ease}
.legal .guide-list a:hover{border-color:var(--primary)}
.guide-list b{display:block;font-size:17.5px;font-weight:700;line-height:1.3}
.guide-list span{display:block;margin-top:6px;font-size:14.5px;color:var(--body)}

@media (max-width:640px){
  .guide-box{padding:18px 16px 6px}
  .print-btn{float:none;display:block;margin:0 0 14px}
}

/* Printing: just the reading column. "Print this list" (guides/print.js) prints only the
   questions box, under the page title. */
@media print{
  nav,footer,.skip,.guide-crumb,.guide-cta,.print-btn{display:none !important}
  body{background:var(--surface)}
  main.legal{padding:0}
  .guide-box{break-inside:avoid-page}
  .printing-list main.guide>:not(h1):not(.box-print){display:none}
  .printing-list .box-print{border:0;padding:0}
}