/* chapter VI map (pages/ch6-map.html, drawn by js/ch6-map.js) */
.k6-mapwrap{margin:2rem -1rem 0;}
@media (max-width:520px){.k6-mapwrap{margin:1.6rem -.6rem 0;}}
.k6-map{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--lilac-soft);}
.k6-map .isl{fill:var(--page);stroke:var(--lilac);stroke-width:1.4;}
.k6-map .coast{fill:none;stroke:var(--lilac);stroke-width:.8;stroke-dasharray:2 5;opacity:.55;}
.k6-map .wave{fill:none;stroke:var(--lilac);stroke-width:1.1;stroke-linecap:round;opacity:.45;}
.k6-map .iname{font-family:var(--display);font-style:italic;font-size:15px;fill:var(--lilac-deep);}
/* an outline in the sea colour keeps the names clear of the coasts and paths nearby */
.k6-map .iname{paint-order:stroke;stroke:var(--lilac-soft);stroke-width:4px;stroke-linejoin:round;}
.k6-map .seg{fill:none;stroke-width:2;stroke-linecap:round;}
.k6-map .seg.ahead{stroke:var(--lilac);stroke-dasharray:1.5 7;opacity:.55;}
.k6-map .seg.walked{stroke:var(--lilac-deep);stroke-dasharray:7 6;}
.k6-map .seg.sea.ahead{stroke-dasharray:1.5 10;}
.k6-x{cursor:pointer;outline:none;}
.k6-x .hit{fill:transparent;}
.k6-x .x{stroke-linecap:round;fill:none;}
.k6-x .num{font-family:var(--display);font-size:12px;font-variant-numeric:lining-nums;}
.k6-x.todo .x{stroke:var(--lilac);stroke-width:2.2;}
.k6-x.todo .num{fill:var(--lilac);}
.k6-x.found .x{stroke:var(--moss-deep);stroke-width:2.6;}
.k6-x.found .ring{fill:none;stroke:var(--moss-deep);stroke-width:1.3;}
.k6-x.found .num{fill:var(--moss-deep);}
.k6-x.now .halo{fill:#D1E231;}
.k6-x.now .x{stroke:#262530;stroke-width:3.2;}
.k6-x.now .num{fill:var(--ink);font-weight:500;}
.k6-x.now .pulse{fill:none;stroke:#D1E231;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:k6pulse 2.2s ease-out infinite;}
@keyframes k6pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.k6-x.now .pulse{animation:none;opacity:0;}}
/* a day just found (drawMap in ch6-map.js): the path to it fills in, the X draws
   itself stroke by stroke and the ring closes around it, about 600ms in all; the
   day's icon in the list does the same. With reduced motion they only fade in. */
.k6-map .reveal{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:k6draw .25s ease-out forwards;}
.k6-x.fresh .x,.k6-dd.fresh .k6-head svg path{stroke-dasharray:1;animation:k6draw .18s ease-out .2s both;}
.k6-x.fresh .x + .x,.k6-dd.fresh .k6-head svg path + path{animation-delay:.3s;}
.k6-x.fresh .ring,.k6-dd.fresh .k6-head svg circle{transform-box:fill-box;transform-origin:center;animation:k6ring .22s ease-out .4s both;}
.k6-dd.fresh .k6-stamp{animation:k6fade .2s ease-out .4s both;}
@keyframes k6draw{from{stroke-dashoffset:1;opacity:0}10%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes k6ring{from{transform:scale(.6);opacity:0}}
@keyframes k6fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .k6-map .reveal,.k6-x.fresh .x,.k6-dd.fresh .k6-head svg path{stroke-dashoffset:0;animation-name:k6fade;}
  .k6-x.fresh .ring,.k6-dd.fresh .k6-head svg circle{animation-name:k6fade;}
}
.k6-x:focus-visible .hit{stroke:var(--lilac-deep);stroke-width:2;}
.k6-x:hover .x{stroke-width:3.4;}

.k6-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:13px;color:var(--lilac);font-style:italic;margin:.8rem 0 0;}
.k6-legend span{display:inline-flex;align-items:center;gap:.4rem;}
.k6-legend svg{width:18px;height:18px;}
.k6-tally{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.4rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.k6-tally .big{font-family:var(--display);font-size:24px;color:var(--ink);letter-spacing:-.3px;}
.k6-tally .big small{font-size:15px;color:var(--lilac);font-family:var(--body);font-style:italic;letter-spacing:0;}
.k6-link{background:none;border:none;font-family:var(--body);font-size:13px;color:var(--lilac);font-style:italic;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* days */
.k6-isle{font-family:var(--display);font-style:italic;font-weight:400;font-size:19px;color:var(--lilac-deep);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:2.2rem 0 .5rem;}
.k6-isle span{font-family:var(--body);font-size:13px;color:var(--lilac);}
.k6-dd{border-bottom:1px solid var(--line);scroll-margin-top:1rem;}
.k6-isle + .k6-dd{border-top:1px solid var(--line);}
.k6-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;cursor:pointer;
  font-family:var(--body);text-align:left;padding:13px 2px;color:var(--ink);transition:background .18s,padding-left .18s;}
.k6-head:not(:disabled):hover{background:var(--lilac-soft);padding-left:8px;}
.k6-head:focus-visible{outline:2px solid var(--moss);outline-offset:2px;}
.k6-head svg{width:20px;height:20px;flex-shrink:0;}
.k6-head .dn{font-family:var(--display);font-size:15px;color:var(--lilac);flex-shrink:0;width:3.6em;font-variant-numeric:lining-nums;}
.k6-head .dt{font-size:16px;flex:1;}
.k6-head .tog{font-family:var(--display);font-size:22px;color:var(--lilac);line-height:1;transition:transform .25s;flex-shrink:0;}
.k6-dd.open .k6-head .tog{transform:rotate(45deg);}
.k6-dd.now .k6-head .dn{color:var(--ink);font-weight:500;}
.k6-dd.found .k6-head .dn{color:var(--moss-deep);}
.k6-dd.locked .k6-head{cursor:default;}
.k6-dd.locked .k6-head .dn{color:var(--faint);}
.k6-dd.locked .k6-head .dt{color:var(--lilac);font-style:italic;font-size:14.5px;}
.k6-dd.flash{animation:k6flash 1.4s ease;}
@keyframes k6flash{0%,60%{background:var(--lilac-soft);}100%{background:transparent;}}
/* .k6-body opens like a note (styles.css) */
@media (prefers-reduced-motion:reduce){.k6-body,.k6-body>.inner,.k6-head .tog{transition:none;}}
.k6-body .inner{padding:.3rem 2px 1.4rem;}
.k6-task{background:var(--moss-soft);border-left:3px solid #D1E231;padding:1rem 1.15rem;margin-bottom:1rem;}
.k6-task .lab,.k6-why .lab{font-family:var(--display);font-style:italic;font-size:15px;margin-bottom:.3rem;}
.k6-task .lab{color:var(--moss-deep);}
.k6-why .lab{color:var(--lilac-deep);}
.k6-body p{font-size:15px;line-height:1.75;margin:0;max-width:60ch;}
.k6-why{padding:0 0 0 18px;border-left:3px solid var(--line);}
.k6-src{margin-top:.9rem;font-size:13.5px;color:var(--lilac);line-height:1.6;}
.k6-src a{color:var(--moss-deep);}
.k6-src .todo{font-style:italic;}
.k6-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.2rem;}
.k6-btn{font-family:var(--body);font-size:15px;padding:.6rem 1.15rem;cursor:pointer;border:1px solid var(--lilac-deep);background:var(--lilac-deep);color:var(--page);border-radius:2px;}
.k6-btn:hover{background:var(--ink);}
.k6-btn.ghost{background:none;color:var(--lilac-deep);}
.k6-btn.ghost:hover{background:var(--lilac-soft);}
.k6-btn:focus-visible,.k6-link:focus-visible{outline:2px solid var(--moss);outline-offset:2px;}
.k6-stamp{font-family:var(--display);font-style:italic;color:var(--moss-deep);font-size:15px;}
.k6-gentle{font-size:13.5px !important;color:var(--lilac);font-style:italic;margin-top:.9rem !important;}

/* the intro deep-dive (#k6-intro) is a regular .deepen */
#k6-intro.open .deepen-body{max-height:6000px;}
#k6-intro h4{font-family:var(--display);font-weight:400;font-size:17px;color:var(--lilac-deep);margin:1.4rem 0 .45rem;}
#k6-intro h4:first-child{margin-top:.2rem;}
#k6-intro .isles{margin:.3rem 0 .9rem;}
#k6-intro .isles p{padding-left:14px;border-left:2px solid var(--moss-soft);margin-bottom:.6rem;}
#k6-intro .isles b{font-weight:500;color:var(--ink);}