/* newcomer tools for map.html (see map-explore.js) */

/* colour scale under the header */
.scale{position:fixed;top:112px;left:18px;z-index:44;display:none;flex-wrap:wrap;align-items:center;gap:6px 14px;
  max-width:calc(100vw - 36px);padding:8px 12px;background:rgba(20,16,12,.9);border:1px solid var(--hair-2);border-radius:2px;
  font-size:12px;color:var(--muted);pointer-events:auto}
.scale.on{display:flex}
.scale span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.scale .who-am{gap:8px;color:var(--paper)}
.scale .who-am b{font-weight:500}
.scale .who-am button{background:none;border:none;padding:4px 0;color:var(--gold);font:inherit;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.sw{flex:none;width:12px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.35)}
.sw.dg-1{background:#6F9A58}.sw.dg-2{background:#D6AE4E}.sw.dg-3{background:#D0733C}.sw.dg-4{background:#9E2A1C}
.sw.hr-home{background:#C9964A}.sw.hr-friend{background:#6F9A58}.sw.hr-neutral{background:#A9A08E}
.sw.hr-wary{background:#D0733C}.sw.hr-hostile{background:#9E2A1C}
@media(max-width:820px),(max-height:500px){
  .scale{top:106px;left:12px;right:12px;max-width:none;gap:4px 12px;padding:7px 10px;font-size:11.5px}
  body.sheet .scale{display:none}
}

/* hero relation colouring */
[data-hero="1"] .reg .fill{opacity:0}
[data-hero="1"] .reg.hr-home .fill{opacity:.45;fill:#C9964A}
[data-hero="1"] .reg.hr-friend .fill{opacity:.38;fill:#6F9A58}
[data-hero="1"] .reg.hr-neutral .fill{opacity:.30;fill:#A9A08E}
[data-hero="1"] .reg.hr-wary .fill{opacity:.38;fill:#D0733C}
[data-hero="1"] .reg.hr-hostile .fill{opacity:.40;fill:#9E2A1C}

/* hover tip */
.tip{position:fixed;left:0;top:0;z-index:48;pointer-events:none;opacity:0;transition:opacity .15s var(--ease);
  display:flex;flex-direction:column;gap:3px;max-width:280px;padding:8px 11px;
  background:rgba(20,16,12,.95);border:1px solid var(--hair-2);border-radius:2px;font-size:12.5px;color:var(--muted)}
.tip.on{opacity:1}
.tip b{font-family:var(--disp);font-weight:400;font-size:16px;color:var(--paper)}
.tip .t-step.s-1{color:#9CBF86}.tip .t-step.s-2{color:var(--gold)}.tip .t-step.s-3{color:#D08055}.tip .t-step.s-4{color:#E0714A}
.tip .t-rel.hr-home{color:var(--gold)}.tip .t-rel.hr-friend{color:#9CBF86}.tip .t-rel.hr-neutral{color:var(--paper)}
.tip .t-rel.hr-wary{color:#D08055}.tip .t-rel.hr-hostile{color:#E0714A}
.tip .t-rel.hr-none,.tip .t-rel.hr-mixed{color:var(--faint)}

/* search */
#sbtn{flex:none;margin-left:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--hair-2);border-radius:2px;color:var(--muted);cursor:pointer}
#sbtn:hover,#sbtn.on{color:var(--gold);border-color:var(--gold)}
.sbox{position:fixed;top:108px;right:18px;z-index:55;width:min(420px,calc(100vw - 24px));display:none;
  background:var(--panel);border:1px solid var(--hair-2);border-radius:2px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.sbox.on{display:block}
.sbox input{display:block;width:100%;padding:13px 14px;background:var(--ink);border:none;border-bottom:1px solid var(--hair);
  color:var(--paper);font:inherit;font-size:16px;outline:none}
.sbox input::placeholder{color:var(--faint)}
.sbox ul{list-style:none;padding:0;max-height:min(60vh,420px);overflow-y:auto}
.sbox li{display:flex;flex-direction:column;gap:1px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--hair)}
.sbox li:last-child{border-bottom:none}
.sbox li b{font-weight:500;color:var(--paper);font-size:14.5px}
.sbox li span{font-size:12px;color:var(--faint)}
.sbox li.act,.sbox li:hover{background:var(--panel-2)}
.sbox li.act b{color:var(--gold)}
.sbox li.none{cursor:default;color:var(--faint);font-size:13.5px}
@media(max-width:820px),(max-height:500px){
  #sbtn{width:44px;height:44px}
  .sbox{top:104px;right:12px}
}

/* creature link inside a bestiary row, creature dossier */
.blink{margin-top:8px;background:none;border:none;padding:6px 0;color:var(--gold);font:inherit;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
.blink:hover{color:var(--gold-hi)}
#panel .kind .rk{margin-left:2px}

/* hero relation line in a dossier */
.rel{margin-top:12px;padding:10px 12px;border:1px solid var(--hair-2);border-left:2px solid var(--muted);background:var(--ink);
  font-size:13.5px;line-height:1.5;color:var(--muted)}
.rel b{color:var(--paper);font-weight:500}
.rel q{display:block;margin-top:4px;font-style:italic;quotes:"«" "»"}
.rel q.parts{font-style:normal;quotes:none}
.rel.hr-home{border-left-color:var(--gold)}.rel.hr-friend{border-left-color:#6F9A58}.rel.hr-neutral{border-left-color:#A9A08E}
.rel.hr-wary{border-left-color:#D0733C}.rel.hr-hostile{border-left-color:#C0412A}
body:not(.hero-on) #panel .rel{display:none}
.rel button{background:none;border:none;padding:0 0 0 6px;color:var(--gold);font:inherit;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* hero picker */
.pick{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,8,5,.72)}
.pick.on{display:flex}
.pick .card{width:min(560px,100%);max-height:calc(100svh - 32px);overflow-y:auto;background:var(--panel);
  border:1px solid var(--hair-2);border-radius:2px;padding:24px 26px 26px}
.pick h2{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1.15}
.pick .lede{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.55}
.pick .races{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick .race{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;
  background:var(--ink);border:1px solid var(--hair-2);border-radius:2px;color:var(--paper);font:inherit;cursor:pointer;
  transition:border-color .2s var(--ease)}
.pick .race:hover,.pick .race:focus-visible{border-color:var(--gold);outline:none}
.pick .race b{font-family:var(--disp);font-weight:400;font-size:18px}
.pick .race span{font-size:12px;color:var(--faint)}
.pick .race.cur{border-color:var(--gold)}
.pick .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pick .skip{flex:none;margin:-4px -6px 0 0;background:none;border:none;padding:10px 6px;color:var(--muted);font:inherit;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pick .skip:hover{color:var(--gold)}
@media(max-width:520px){
  .pick .card{padding:20px 16px 14px}
  .pick h2{font-size:24px}
  .pick .races{grid-template-columns:1fr}
}