/* Dog API teacher companion. MIT. */
:root { color-scheme: light; --paper:#f3ecdf; --card:#fffdf7; --ink:#24271f; --muted:#5a6258; --teal:#176552; --line:#d5d7c6; --gold:#efe3b9; }
* { box-sizing:border-box; }
html { scroll-padding-top:1.5rem; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 85% 0%,#e5eadb,transparent 32rem),var(--paper); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--teal); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,summary:focus-visible,pre:focus-visible { outline:3px solid var(--teal); outline-offset:5px; border-radius:3px; }
.skip { position:absolute; left:1rem; top:-8rem; padding:.75rem 1rem; background:var(--card); z-index:5; }
.skip:focus { top:1rem; }
.topline { max-width:1120px; margin:auto; padding:1.1rem 1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
.topline a { padding:.4rem 0; }
main { max-width:1000px; margin:auto; padding:0 1.5rem; }
.hero { padding:4rem 0 3rem; max-width:850px; }
.eyebrow { color:var(--teal); font-size:.72rem; font-weight:750; letter-spacing:.13em; margin:0 0 1rem; }
h1,h2,h3 { line-height:1.13; text-wrap:balance; }
h1,h2 { font-family:"Palatino Linotype",Palatino,Georgia,serif; font-weight:500; letter-spacing:-.03em; }
h1 { font-size:clamp(2.75rem,6.5vw,4.9rem); margin:0 0 1.5rem; }
h2 { font-size:clamp(2rem,4vw,2.65rem); margin:0 0 1.5rem; }
h3 { font-size:1.15rem; margin:.3rem 0 .8rem; }
p { margin:.7rem 0 1rem; }
.lede { font-family:Georgia,serif; font-size:1.25rem; max-width:44rem; color:var(--muted); line-height:1.6; }
.facts { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.7rem 0; }
.facts li { border:1px solid #c7cdba; border-radius:2rem; padding:.35rem .85rem; font-size:.8rem; background:#ffffff5e; }
.actions { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; margin:1.6rem 0; }
.button { display:inline-flex; gap:1rem; justify-content:space-between; align-items:center; padding:.85rem 1.25rem; border-radius:.7rem; color:#fffdf7; background:var(--teal); text-decoration:none; font-weight:650; }
.button:hover { background:#104b3e; }
.small { font-size:.83rem; color:var(--muted); max-width:48rem; }
.contents { display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.7rem 0; font-size:.88rem; }
.contents a { padding:.4rem 0; }
.section { padding:3.5rem 0; border-bottom:1px solid var(--line); scroll-margin-top:1.5rem; }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.two-up ul { padding-left:1.2rem; }
li+li { margin-top:.45rem; }
code { font-family:Consolas,"Liberation Mono",monospace; font-size:.9em; overflow-wrap:anywhere; }
.note { background:#e5ebdd; border-left:3px solid var(--teal); padding:1.25rem 1.5rem; margin:1.5rem 0; border-radius:0 .8rem .8rem 0; }
.note p:last-child { margin-bottom:0; }
.route { list-style:none; padding:0; margin:2rem 0; }
.route li { display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.2rem 0; border-bottom:1px dashed var(--line); }
.route li:last-child { border:0; }
.time { color:var(--teal); font-family:Georgia,serif; font-size:2rem; }
.time span { display:block; font-family:system-ui,sans-serif; font-size:.8rem; color:var(--muted); }
.route p { margin-bottom:0; max-width:42rem; }
.worksheet { padding:2.5rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; margin:3.5rem 0 0; box-shadow:0 8px 28px #24331d08; }
.print-tip { font-size:.85rem; background:var(--gold); padding:.8rem 1rem; border-radius:.45rem; }
.identity { display:flex; gap:.6rem; flex-wrap:wrap; font-size:.9rem; margin:2rem 0; }
.questions { padding-left:1.6rem; }
.questions li { padding:.65rem 0; }
.questions h3 { display:inline; }
.writing-space { min-height:4.5rem; background:repeating-linear-gradient(transparent,transparent 1.45rem,var(--line) 1.45rem,var(--line) 1.5rem); }
.writing-space.short { min-height:3rem; }
.sample-url { display:block; padding:.7rem 1rem; border-radius:.5rem; background:#edf0e8; }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; padding:1.1rem .2rem; font-weight:650; }
details p { padding:0 .2rem 1rem; max-width:47rem; }
.snippet { margin:2rem 0; }
.snippet p { font-size:.9rem; color:var(--muted); }
pre { overflow-x:auto; max-width:100%; background:#182a27; color:#e6f0e9; padding:1.3rem; border-radius:.8rem; line-height:1.7; font-size:.88rem; }
pre code { overflow-wrap:normal; }
.glossary { margin:0; }
.glossary>div { display:grid; grid-template-columns:8rem 1fr; gap:1.5rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.glossary>div:last-child { border:0; }
dt { font-weight:700; color:var(--teal); }
dd { margin:0; }
footer { padding:3.5rem 0 4rem; }
@media (max-width:620px) { main { padding:0 1.1rem; } .topline { padding:.7rem 1.1rem; } .hero { padding:2.3rem 0; } .two-up { grid-template-columns:1fr; gap:1rem; } .route li { grid-template-columns:3rem 1fr; gap:.9rem; } .worksheet { padding:1.3rem; } .glossary>div { grid-template-columns:1fr; gap:.35rem; } .section { padding-top:2.5rem; padding-bottom:2.5rem; } .contents { gap:.1rem 1.1rem; } }
@media print {
  @page { margin:16mm; }
  :root { --ink:#111; --muted:#333; --teal:#111; --line:#aaa; }
  body { background:white; color:black; font-size:10pt; line-height:1.4; }
  main { max-width:none; padding:0; }
  .skip,.topline,.contents,.actions,.print-tip,.answers { display:none!important; }
  .hero { padding:0 0 1rem; max-width:none; }
  h1 { font-size:27pt; }
  h2 { font-size:20pt; margin-bottom:.7rem; }
  h3 { font-size:12pt; }
  .lede { font-size:12pt; }
  .section { padding:1rem 0; }
  .facts li { background:white; }
  .note { background:white; border:1px solid #999; padding:.7rem; }
  .route li { padding:.5rem 0; gap:.6rem; }
  .route { margin:.5rem 0; }
  .worksheet { break-before:page; break-after:page; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; }
  .questions li { break-inside:avoid; }
  .identity { margin:1rem 0; }
  .writing-space { background:none; border-bottom:1px solid #aaa; min-height:3rem; }
  .writing-space.short { min-height:2rem; }
  .sample-url { background:none; border:1px solid #aaa; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; color:black; background:white; border:1px solid #aaa; font-size:9pt; }
  .snippet,.glossary>div { break-inside:avoid; }
  a { color:black; }
  footer { padding:1rem 0 0; }
}