/* UK & Ireland Railway Map — session-4 accessible viewer.
   Vintage flat-litho look matching the map palette; system fonts for UI,
   Georgia for map-adjacent type. Static site, no dependencies. */

:root{
  --paper:#f1e9d4; --paper-hi:#f8f3e3; --ink:#2e2a22; --sub:#6b6353;
  --accent:#274b66; --rule:#cbbf9f; --red:#a02818;
  --shadow:0 2px 14px rgba(46,42,34,.18);
  --ctl-h:40px;
}
@media (prefers-contrast: more){
  :root{ --sub:#3d382c; --rule:#8f835f; }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-48px;z-index:60;background:var(--accent);color:#fff;
  padding:10px 14px;border-radius:0 0 8px 8px;text-decoration:none;transition:top .15s}
.skip:focus{top:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- top bar ---------- */
#topbar{
  flex:none; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 12px; border-bottom:2px solid var(--ink);
  background:var(--paper-hi);
  z-index:30;
}
#title{font:700 19px/1.1 Georgia,serif; letter-spacing:.06em; margin:0; white-space:nowrap}
#subtitle{font:italic 400 13px Georgia,serif; color:var(--sub); letter-spacing:.02em; margin-left:6px}

#searchwrap{position:relative; flex:1 1 240px; max-width:420px; min-width:170px}
#search{
  width:100%; height:var(--ctl-h); padding:0 12px;
  border:1.5px solid var(--ink); border-radius:8px;
  background:#fff; color:var(--ink); font:inherit;
}
#search::placeholder{color:var(--sub)} /* was #8c8270: 3.79:1 on #fff, fails 1.4.3 */
#results{
  position:absolute; left:0; right:0; top:calc(var(--ctl-h) + 4px);
  margin:0; padding:4px; list-style:none;
  background:#fff; border:1.5px solid var(--ink); border-radius:8px;
  box-shadow:var(--shadow); max-height:46vh; overflow:auto; z-index:50;
}
#results li{padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; gap:8px; align-items:baseline}
#results li .kind{font:italic 12px Georgia,serif; color:var(--sub); margin-left:auto; white-space:nowrap}
#results li[aria-selected="true"], #results li:hover{background:var(--accent); color:#fff}
#results li[aria-selected="true"] .kind, #results li:hover .kind{color:#dfe8ef}

#controls{display:flex; gap:8px; margin-left:auto}
.ctl{
  min-width:var(--ctl-h); height:var(--ctl-h); padding:0 12px;
  border:1.5px solid var(--ink); border-radius:8px;
  background:#fff; color:var(--ink); font:600 17px/1 inherit; cursor:pointer;
}
.ctl.wide{font-size:14px}
.ctl:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.ctl[aria-expanded="true"]{background:var(--ink); color:var(--paper)}

/* ---------- stage ---------- */
#stage{flex:1; position:relative; overflow:hidden}
#map{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab}
#map.drag{cursor:grabbing}

/* ---------- layers panel ---------- */
#layers{
  position:absolute; top:10px; right:10px; z-index:40;
  width:min(290px, calc(100vw - 20px)); max-height:calc(100% - 20px); overflow:auto;
  background:var(--paper-hi); border:1.5px solid var(--ink); border-radius:10px;
  box-shadow:var(--shadow); padding:12px 14px;
}
#layers h2{font:700 14px Georgia,serif; letter-spacing:.08em; text-transform:uppercase; margin:.2em 0 .4em}
#layers h3{font:italic 600 13px Georgia,serif; color:var(--sub); margin:.9em 0 .25em}
#layers label{display:flex; align-items:center; gap:9px; padding:6px 2px; cursor:pointer; border-radius:6px}
#layers label:hover{background:rgba(39,75,102,.08)}
#layers input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent); flex:none}
#layers .sw{flex:none; width:26px; height:8px; border-radius:2px; border:1px solid rgba(46,42,34,.25)}
#layersclose{margin-top:10px}

/* ---------- feature tooltip (follows the cursor; pins on click) ------- */
#card{
  position:absolute; left:0; top:0; z-index:40;
  max-width:min(300px, calc(100vw - 20px));
  background:var(--paper-hi); border:1.5px solid var(--ink); border-radius:8px;
  box-shadow:var(--shadow); padding:8px 12px;
  pointer-events:none;
}
#card.pin{pointer-events:auto; padding-right:38px}
#card h2{font:700 15px Georgia,serif; margin:0 0 1px}
#card .kind{font:italic 12.5px Georgia,serif; color:var(--sub); margin:0}
#card dl{margin:5px 0 0; display:grid; grid-template-columns:auto 1fr; gap:1px 10px; font-size:13px}
#card dt{color:var(--sub)} #card dd{margin:0}
#cardclose{position:absolute; top:5px; right:5px; min-width:26px; height:26px; padding:0; font-size:14px; display:none}
#card.pin #cardclose{display:block}

/* ---------- help dialog ---------- */
#help{
  border:2px solid var(--ink); border-radius:12px; padding:20px 22px;
  background:var(--paper-hi); color:var(--ink); max-width:560px; width:calc(100vw - 40px);
  max-height:calc(100vh - 60px); overflow:auto;
}
#help::backdrop{background:rgba(46,42,34,.45)}
#help h2{font:700 20px Georgia,serif; margin:0 0 8px}
#help h3{font:700 14px Georgia,serif; letter-spacing:.06em; text-transform:uppercase; margin:16px 0 6px}
#help a{color:var(--accent)}
#help .fine{font-size:13px; color:var(--sub)}
#helplegend{list-style:none; margin:0; padding:0}
#helplegend li{display:flex; align-items:center; gap:10px; padding:3px 0; font-size:14px}
#helplegend .sw{flex:none; width:34px; height:0; border-top-width:3px; border-top-style:solid}
#helplegend .sw.dash{border-top-style:dashed}
#helplegend .sw.area{height:14px; border:1px solid rgba(46,42,34,.3)}
.keys{border-collapse:collapse; font-size:14px}
.keys th{text-align:left; font-weight:600; padding:3px 14px 3px 0; white-space:nowrap}
.keys td{padding:3px 0}
kbd{background:#fff; border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; padding:0 5px; font:12px ui-monospace,Menlo,monospace}
#helpclose{margin-top:14px}

/* ---------- legend chips & scale bar ---------- */
#legendbar{
  position:absolute; left:10px; top:10px; z-index:20;
  display:flex; flex-wrap:wrap; gap:6px; max-width:min(60vw, 540px);
  pointer-events:none;
}
#legendbar .chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(248,243,227,.92); border:1px solid var(--rule); border-radius:99px;
  padding:3px 10px 3px 7px; font:12px/1 inherit; color:var(--ink);
}
#legendbar .chip .sw{width:18px; height:0; border-top:3px solid; border-radius:2px}
#legendbar .chip .sw.dash{border-top-style:dashed}

#scalebar{
  position:absolute; right:12px; bottom:10px; z-index:20; text-align:right;
  font:12px/1.3 inherit; color:var(--ink); pointer-events:none;
  background:rgba(248,243,227,.85); padding:4px 8px; border-radius:6px;
}
#scalerule{height:0; border-bottom:2.5px solid var(--ink); border-left:2.5px solid var(--ink); border-right:2.5px solid var(--ink); margin-top:2px}

#loading{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:25;
  background:var(--paper-hi); border:1.5px solid var(--ink); border-radius:10px;
  padding:14px 22px; font:italic 16px Georgia,serif; box-shadow:var(--shadow);
}
#loading.err{font-style:normal; color:var(--red)}
#loading[hidden]{display:none}

#tilespin{
  position:absolute; right:12px; top:10px; z-index:20;
  background:rgba(248,243,227,.92); border:1px solid var(--rule); border-radius:99px;
  padding:4px 12px; font:12px/1 inherit; color:var(--sub);
}

@media (max-width:640px){
  #title{font-size:16px}
  #subtitle{display:none}
  #legendbar{display:none}
  #card{left:6px; right:6px; bottom:6px; max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .skip{transition:none}
}