/* thedeckprofessor.com. the home page only: the hero drawing, the lesson map and its teaser drawings.
   Colours come from the site.css tokens. The teaser drawings are inline SVG whose parts carry classes;
   their end state (the mistake) is reached on hover, keyboard focus, or the .play class that home.js sets
   on touch screens and on the hero. Motion follows the reader's system unless they pick On or Off
   (html[data-motion]).
   With reduced motion the drawing still switches to the mistake, just without moving. */

.home{
  --tz-bg:#f7f5ef; --tz-soil:#ece5d6; --tz-ground:#a39b8c;
  --tz-ctx:#e6e2da; --tz-ctx-line:#b3ab9d;
  --tz-fo:var(--accent); --tz-fo-soft:#d6ebe1;
  --tz-bad:#c2410c; --tz-bad-soft:#fde3d0; --tz-bad-ink:#b13a0a;
  --tz-water:#3f86c6; --tz-ice:#d6ebf8; --tz-ice-line:#86b9dd;
  --tz-wood:#f1dfbd; --tz-light:#ffd86b; --tz-shade:rgba(26,33,40,.34);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .home{
    --tz-bg:#192024; --tz-soil:#262d30; --tz-ground:#5d676c;
    --tz-ctx:#2b3337; --tz-ctx-line:#56616a;
    --tz-fo-soft:#1f3a31;
    --tz-bad:#f0894a; --tz-bad-soft:#3d2518; --tz-bad-ink:#f59e5b;
    --tz-water:#5aa2dc; --tz-ice:#1f3a4d; --tz-ice-line:#4f86ad;
    --tz-wood:#5a4a31; --tz-light:#e8c35a; --tz-shade:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] .home{
  --tz-bg:#192024; --tz-soil:#262d30; --tz-ground:#5d676c;
  --tz-ctx:#2b3337; --tz-ctx-line:#56616a;
  --tz-fo-soft:#1f3a31;
  --tz-bad:#f0894a; --tz-bad-soft:#3d2518; --tz-bad-ink:#f59e5b;
  --tz-water:#5aa2dc; --tz-ice:#1f3a4d; --tz-ice-line:#4f86ad;
  --tz-wood:#5a4a31; --tz-light:#e8c35a; --tz-shade:rgba(0,0,0,.5);
}

.home [hidden]{display:none !important}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------------------------------------------------------------- hero */
.h-hero{padding-block:40px 36px;border-bottom:1px solid var(--line)}
.h-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:center}
@media (max-width:880px){.h-hero .wrap{grid-template-columns:minmax(0,1fr)}}
.h-hero h1{margin:0 0 12px;max-width:18ch}
.h-lede{font-size:19.5px;line-height:1.5;color:var(--muted);margin:0 0 22px;max-width:40ch}
.h-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.h-go .btn{max-width:100%;white-space:normal;text-align:left}
.h-free{font-size:14.5px;font-weight:600;color:var(--muted)}
.h-prog{margin:18px 0 0;font-size:15px;color:var(--muted);max-width:40ch}
.h-prog .h-bar{margin:8px 0 0}

/* the hero drawing: one subject's mistake after another */
.h-feat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.h-feat-art{aspect-ratio:320/200;background:var(--tz-bg);border-bottom:1px solid var(--line)}
.h-feat-art svg{display:block;width:100%;height:100%}
.h-feat-cap{margin:12px 18px 10px;font-size:17px;line-height:1.4}
.h-feat-sub{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:2px}
.h-feat-a{color:var(--tz-bad-ink);font-weight:600;text-decoration:none}
.h-feat.try .h-feat-a{color:var(--accent-ink)}
.h-feat-a::after{content:"";position:absolute;inset:0;z-index:0}
.h-feat-a:hover{text-decoration:underline}
@supports selector(:has(a)){
  .h-feat-a:focus-visible{outline:none}
  .h-feat:has(.h-feat-a:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
}
.h-feat-ctl{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 18px 14px}
@media (max-width:880px){.h-feat{max-width:560px}}

.h-bar{display:block;height:8px;border-radius:99px;background:var(--card-2);border:1px solid var(--line);overflow:hidden;margin:4px 0 12px}
.h-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px}
.linkbtn{font:inherit;font-size:14.5px;font-weight:700;background:none;border:0;padding:0;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* the practice deck, under Advanced */
.h-me-k{color:var(--muted)}
.h-me-v{font-weight:700}
.h-deck{grid-column:1/-1}
.h-deck-t{margin:0 0 6px;font-size:14.5px}
.h-me-pick{margin-top:10px}
.h-deck .dp-starters{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.h-deck .dp-starters-label{grid-column:1/-1;margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.h-deck .dp-starter{font:inherit;text-align:left;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.h-deck .dp-starter b{display:block;font-size:14px}
.h-deck .dp-starter span{display:block;font-size:12.5px;color:var(--muted)}
.h-deck .dp-starter[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

/* ---------------------------------------------------------------- the map */
.h-map{padding-block:34px 72px}
.h-maphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px}
.h-maphead h2{margin:0}
.h-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.h-tools .seg button{font-size:13.5px}
.h-tools[hidden]{display:none}
details.adv.h-adv{position:relative;margin:0;border-top:0;padding-top:0}
.h-adv>.advbody{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(560px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.h-adv .ctrl{margin:0}
.h-adv .ctrl>label{font-size:13px}
@media (max-width:640px){.h-tools{flex-basis:100%;justify-content:space-between}}
.h-adv .checks label{font-size:14.5px}
.h-adv .btn{font-size:13.5px;padding:7px 14px}

/* 3 random lessons: each one's name, what the learner does and its instruction */
.h-mist{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.h-mist[hidden]{display:none}
.h-mist li{border:1px solid var(--line-strong);background:var(--card);border-radius:12px;font-size:14.5px;line-height:1.45}
.h-mist li a{display:block;height:100%;padding:12px 14px;color:var(--ink);text-decoration:none;border-radius:12px}
.h-mist li a:hover .h-mist-t{color:var(--accent-ink);text-decoration:underline}
.h-mist .h-mist-t{display:block;font-weight:700}
.h-mist .h-mist-d{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.h-mist .h-mist-m{font-weight:700;color:var(--accent-ink)}
.h-mist .h-mist-more{border:0;background:none;padding:0;display:flex;align-items:center}

.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.tile:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.tile-art{aspect-ratio:320/200;background:var(--tz-bg);border-bottom:1px solid var(--line)}
.tile-art svg{display:block;width:100%;height:100%}
.tile-name{font-size:18px;line-height:1.25;margin:14px 16px 4px}
.tile-a{color:var(--ink);text-decoration:none}
.tile-a::after{content:"";position:absolute;inset:0;z-index:0}
.tile-a:hover{color:var(--accent-ink)}
.tile-n{font-family:var(--f-mono);font-size:13px;font-weight:400;color:var(--faint);margin-right:4px}
@supports selector(:has(a)){
  .tile-a:focus-visible{outline:none}
  .tile:has(.tile-a:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
}
.tile-meta{margin:0 16px 8px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.tile-prog{display:inline-flex;align-items:center;gap:8px}
.tile-prog[hidden]{display:none}
.tile-prog .h-bar{width:56px;margin:0;height:6px}
.tile-miss{margin:auto 16px 14px;font-size:13.5px;line-height:1.4;display:flex;gap:7px;align-items:flex-start}
.tile-miss svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--tz-bad)}
.tile-miss a{position:relative;z-index:1;color:var(--tz-bad-ink);text-decoration:none}
.tile-miss a:hover{text-decoration:underline}
.tile-miss.tile-try svg{color:var(--accent)}
.tile-miss.tile-try a{color:var(--accent-ink)}
.tile-lessons{display:none}

/* the full syllabus: every lesson under its subject's drawing, with what the learner does in it and its
   instruction, as on the subject pages. The drawing's caption stays with the Drawings view. */
.tiles.list{grid-template-columns:minmax(0,1fr);gap:14px}
.tiles.list .tile{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start}
.tiles.list .tile-art{grid-column:1;grid-row:1 / span 3;border-bottom:0;border-right:1px solid var(--line);align-self:stretch;aspect-ratio:auto;min-height:138px;display:flex;align-items:center}
.tiles.list .tile-art svg{height:auto}
.tiles.list .tile-name,.tiles.list .tile-meta{grid-column:2}
.tiles.list .tile-miss{display:none}
.tiles.list .tile-a::after{display:none}
.tiles.list .tile-lessons{grid-column:2;display:block;columns:2 260px;column-gap:28px;margin:4px 16px 16px;padding:0;list-style:none}
.tile-lessons li{break-inside:avoid;padding:6px 0;font-size:14.5px;line-height:1.4}
.tile-lessons a{display:block;color:var(--ink);text-decoration:none}
.tile-lessons .tl-t{font-weight:600}
.tile-lessons .tl-d{display:block;margin-top:1px;font-size:13.5px;color:var(--muted)}
.tile-lessons .tl-m{font-weight:700;color:var(--accent-ink)}
.tile-lessons a:hover .tl-t{color:var(--accent-ink);text-decoration:underline}
.tile-lessons li.seen .tl-t{color:var(--muted)}
.tile-lessons .seen-mark{display:inline-block;width:14px;margin-left:6px;color:var(--accent);font-weight:700}
@media (max-width:640px){
  .tiles.list .tile{grid-template-columns:minmax(0,1fr)}
  .tiles.list .tile-art{grid-row:auto;border-right:0;border-bottom:1px solid var(--line);aspect-ratio:320/200;min-height:0}
  .tiles.list .tile-name,.tiles.list .tile-meta,.tiles.list .tile-lessons{grid-column:1}
}

/* phones: two drawings per row keeps the map a map */
@media (max-width:560px){
  .h-hero{padding-block:28px 26px}
  .h-lede{font-size:17.5px}
  .h-feat-cap{margin:10px 14px 8px;font-size:15.5px}
  .h-feat-ctl{margin:0 14px 12px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{border-radius:12px}
  .tile-name{font-size:15px;margin:10px 10px 2px}
  .tile-n{font-size:11.5px}
  .tile-meta{margin:0 10px 6px;font-size:12.5px}
  .tile-miss{margin:auto 10px 10px;font-size:12.5px;gap:5px}
  .tile-miss svg{width:13px;height:13px}
}

/* ---------------------------------------------------------------- teaser drawings */
.tz{stroke-linejoin:round;stroke-linecap:round}
.tz .gr{fill:none;stroke:var(--tz-ground);stroke-width:2}
.tz .soil{fill:var(--tz-soil)}
.tz .ctx{fill:var(--tz-ctx);stroke:var(--tz-ctx-line);stroke-width:1.25}
.tz .ctxl{fill:none;stroke:var(--tz-ctx-line);stroke-width:1.25}
.tz .fo{fill:var(--tz-fo-soft);stroke:var(--tz-fo);stroke-width:2}
.tz .fos{fill:var(--tz-fo)}
.tz .fol{fill:none;stroke:var(--tz-fo);stroke-width:2.2}
.tz .fd{fill:none;stroke:var(--tz-fo);stroke-width:1.6;stroke-dasharray:5 4}
.tz .wl{fill:none;stroke:var(--tz-bad);stroke-width:2.4}
.tz .wd{fill:none;stroke:var(--tz-bad);stroke-width:2;stroke-dasharray:5 3}
.tz .wf{fill:var(--tz-bad-soft);stroke:var(--tz-bad);stroke-width:2;stroke-dasharray:5 3}
.tz .rot{fill:var(--tz-bad);opacity:.5}
.tz .dim{fill:none;stroke:var(--muted);stroke-width:1.25}
.tz .dl{fill:none;stroke:var(--faint);stroke-width:1.4;stroke-dasharray:6 5}
.tz .water{fill:var(--tz-water)}
.tz .wline{fill:none;stroke:var(--tz-water);stroke-width:2}
.tz .ice{fill:var(--tz-ice)}
.tz .icel{fill:none;stroke:var(--tz-ice-line);stroke-width:1.2}
.tz .wood{fill:var(--tz-wood);stroke:var(--tz-ctx-line);stroke-width:1.25}
.tz .light{fill:var(--tz-light);opacity:.6}
.tz .shade{fill:var(--tz-shade)}
.tz .lens{fill:var(--tz-fo-soft);fill-opacity:.4;stroke:var(--tz-fo);stroke-width:3}

/* rest state, and the quick return when the pointer leaves */
.tz .mv{--from:none;--to:none;--t:1.1s;--dl:0s;transform:var(--from);transition:transform .4s ease}
.tz .in,.tz .out{--t:.5s;--dl:0s}
.tz .mo{--t:1.1s;--dl:0s;transition:d .4s ease}
.tz .in{opacity:0;transition:opacity .3s ease}
.tz .out{transition:opacity .3s ease}
/* the mistake: hover, keyboard focus, or .play (touch screens and the hero, set by home.js) */
:is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .mv{transform:var(--to);transition:transform var(--t) cubic-bezier(.45,0,.2,1) var(--dl)}
:is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .in{opacity:1;transition:opacity var(--t) ease var(--dl)}
:is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .out{opacity:0;transition:opacity var(--t) ease var(--dl)}
:is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .mo{d:var(--d2);transition:d var(--t) cubic-bezier(.45,0,.2,1) var(--dl)}

/* Motion: Off shows the mistake without movement. On plays it even when the system asks for less motion. */
html[data-motion="off"] .tz *{transition:none !important}
html[data-motion="on"] .tz .mv{transition:transform .4s ease !important}
html[data-motion="on"] .tz .in,html[data-motion="on"] .tz .out{transition:opacity .3s ease !important}
html[data-motion="on"] .tz .mo{transition:d .4s ease !important}
html[data-motion="on"] :is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .mv{transition:transform var(--t) cubic-bezier(.45,0,.2,1) var(--dl) !important}
html[data-motion="on"] :is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .in,
html[data-motion="on"] :is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .out{transition:opacity var(--t) ease var(--dl) !important}
html[data-motion="on"] :is(.tile,.h-feat):is(:hover,:focus-within,.play) .tz .mo{transition:d var(--t) cubic-bezier(.45,0,.2,1) var(--dl) !important}

@media print{
  .h-tools,.h-adv,.h-mist,.h-go .btn,.h-feat-ctl,.h-prog{display:none !important}
  .h-feat{box-shadow:none;break-inside:avoid}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{break-inside:avoid}
}