/* WALK IT NOW, the page around the sheet's own rules (wkn.css, copied from public/design-2026/walk-it-now/): the house
   faces kept on the site so they read with no signal, the house colours the sheet's rules ask for, the phone's own safe
   areas, your dot on the map (the sheet's Y1: sky blue in a paper ring, the way you face as a soft wedge), and the map's
   own furniture. 27 October 2026. */
@font-face{font-family:'Jost';src:url(/walk-it/fonts/jost.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Lora';src:url(/walk-it/fonts/lora-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url(/walk-it/fonts/lora-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Larken';src:url(/fonts/larken.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--paper:#FFFFF7;--stone:#E4DED9;--forest:#2B301D;--ink:#414042;--ink-75:rgba(65,64,66,.78);--ink-55:rgba(65,64,66,.55);--ink-35:rgba(65,64,66,.35);
  --tweed:#682114;--gold:#C08C3D;--on-forest:#F1EDE8;--on-forest-55:rgba(241,237,232,.62);--sky:#A0BAD4;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;--serif:'Lora',Georgia,serif;--face:'Larken','Lora',Georgia,serif;--edge:20px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body.wi{background:var(--paper)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

/* the phone's own edges: the notch and the home bar */
.wkn{--wkn-top:env(safe-area-inset-top,0px);--wkn-foot:env(safe-area-inset-bottom,0px)}
.wkn-bar{padding-bottom:calc(var(--wkn-foot) + 18px)}

/* help opens over anything, the finish too */
#wi-help{z-index:9}

/* what shows when: the start and the finish are whole screens; the bar and the map's buttons are for walking */
.wkn[data-state="start"] .wkn-bar,.wkn[data-state="start"] .wkn-tools,.wkn[data-state="done"] .wkn-bar,.wkn[data-state="done"] .wkn-tools{display:none}
.wkn-tools{bottom:calc(var(--bar-h,0px) + 14px)}
.wkn-tools .wkn-sq{font-size:11.5px}
.wi-layer span{display:block}
.wkn-bar .wkn-next b{font-weight:400}
/* the next place on two lines where a phone is too narrow for it on one, never cut off with a dot dot dot (test-full.py, 27
   October 2026: "The south end, 440 m · about …" on an iPhone 15); the distance and time kept together */
.wkn-bar .wkn-next{white-space:normal;text-wrap:balance}
.wkn-bar .wkn-next b,.wkn-bar .wkn-next .wi-t{white-space:nowrap}

/* the top left: Close on the start and when looking; Menu while walking (Jack, 27 October 2026: "I couldn't go back to
   the save option") */
.wkn .wi-menu{display:none;width:auto;padding:0 20px;font:500 16px/1 var(--sans);letter-spacing:0}
.wkn[data-state="walking"] .wi-menu{display:flex}
.wkn[data-state="walking"] .wi-close{display:none}
#wi-menu{z-index:8;max-height:90%}
#wi-menu .wkn-h{font-size:26px}
.wi-far{padding:14px 16px;background:var(--stone)}
/* not there yet: Save first, Start after it; on a phone the start fits the screen, its photograph shorter */
.wi-is-far .wi-save,.wi-is-far .wi-save-say{order:-2}.wi-is-far #wi-dir{order:-1}
#wi-start .wkn-pic{aspect-ratio:2/1}
@media (max-height:760px){#wi-start .wkn-pic{display:none}}
.wi-far b{font-weight:400;font-family:var(--face)}
.wkn-bar .wkn-acts{margin-top:14px}
.wkn-bar .wkn-acts a.fill{flex:none;padding:0 26px}
.wi-two{display:flex;gap:10px}

/* a word over the map: the sheet's off-the-path panel, below Close and Help */
.wkn-off{top:calc(var(--wkn-top) + 80px)}
.wkn-off a.wkn-b{display:inline-flex;margin-top:14px;min-height:52px;font-size:15px}

/* your dot */
.wi-me{width:0;height:0;position:relative}
.wi-me i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%}
.wi-me-acc{width:var(--acc,0);height:var(--acc,0);background:rgba(160,186,212,.18);border:1.5px solid rgba(111,143,175,.6)}
.wi-me-dot{width:30px;height:30px;background:var(--sky);border:4px solid var(--paper);box-shadow:0 0 0 1.5px rgba(65,64,66,.35),0 2px 8px rgba(29,27,25,.4)}
.wi-me-head{display:none;width:120px;height:120px;border-radius:0!important;background:conic-gradient(from -32deg,rgba(111,143,175,.55),rgba(160,186,212,0) 64deg,transparent 64deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 30%,transparent 60%);mask:radial-gradient(circle,#000 0,#000 30%,transparent 60%);transform:translate(-50%,-50%) rotate(var(--head,0deg))}
.wi-has-head .wi-me-head{display:block}

/* the map's own furniture, above the bar */
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:var(--bar-h,0px)}
.maplibregl-ctrl-attrib{font:400 10px/1.3 var(--sans)!important}
.wi-nomap{display:grid;place-items:center;padding:0 32px 40vh;background:var(--paper)}
.wi-nomap-say{max-width:30ch;text-align:center;font:400 16px/1.5 var(--serif);color:var(--ink-75)}

/* small parts of the sheets */
.wkn-b:disabled{opacity:1}
.wkn-b.done svg{margin-right:2px}
.wi-save-say{margin:0}
.wi-link{font:inherit;color:var(--tweed);text-decoration:underline;text-underline-offset:3px}
.wkn-app h3.wkn-h{font-size:22px}

/* a computer: the bar and the sheets in a column, the map beside */
@media (min-width:900px){
  .wkn-bar{left:20px;right:auto;bottom:20px;width:440px;padding-bottom:20px}
  .wkn-sheet{left:50%;right:auto;width:520px;transform:translateX(-50%);box-shadow:0 0 0 100vmax rgba(20,20,16,.35)}
  .wkn-off{left:auto;right:20px;width:420px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* on a computer (walk-it.js sets data-device): only the walk, the code for the phone and Look at the route first; no
   Start, Save, Directions, Tell someone, Help or "from the start", which are for the phone on the path (Jack, 27 October
   2026: "this should only be done on mobile as they cant take laptop or desktop with then") */
[data-device=computer] #wi-start .wkn-btns > :not([data-act=look]),
[data-device=computer] #wi-start > .wkn-p.q,
[data-device=computer] #wi-far,
[data-device=computer] .wkn-help{display:none!important}