/* Toposcoper app styles, shared by every site that uses it.
   Each site can override the colours by setting these variables on #toposcoper. */
#toposcoper{
 --tp-colour:#999;     /* button and frame colour */
 --tp-text:inherit;    /* button text colour */
 --tp-bg:#f9f6ef;      /* picture background while it loads or slides */
 --tp-border:none;     /* border round the picture */
}
#tp-wrap{position:relative}
#tp-pano{display:block;width:100%;background:var(--tp-bg);border:var(--tp-border);box-sizing:border-box;touch-action:pan-y}
#tp-sel{position:absolute;top:0;height:100%;background:rgba(180,0,0,.12);border:1px solid #b00;display:none;pointer-events:none}
#tp-info{padding:6px 8px 0;font-style:italic}
#tp-info:empty{padding:0}
#tp-info a{color:#b00}
#tp-bar,#tp-controls{padding:8px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#tp-bar{padding-top:4px}
#toposcoper input,#toposcoper select,#toposcoper button{font-size:16px;font-family:inherit}
#toposcoper input,#toposcoper select{padding:6px}
#toposcoper button{padding:8px 16px;border:1px solid var(--tp-colour);border-radius:6px;background:#fff;color:var(--tp-text);cursor:pointer}
#tp-controls label{margin:0}
#tp-controls input{width:80px}
#tp-status{font-style:italic}
#tp-made{margin-left:auto;font-size:13px}
#tp-made a{color:inherit}
#tp-map{height:320px}
.tp-hnd{background:#fff;border:2px solid #c00;border-radius:50%}

/* phones: big buttons side by side, then two columns of big boxes with names above */
@media (max-width:700px){
 #tp-bar,#tp-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
 #tp-bar{padding-top:6px}
 #tp-bar button{font-size:18px;min-height:52px}
 #tp-status,#tp-made{grid-column:1/-1;font-size:14px;margin-left:0}
 #tp-controls label{display:flex;flex-direction:column;gap:4px;font-size:15px}
 #tp-controls input,#tp-controls select{width:100%;box-sizing:border-box;font-size:18px;padding:10px;min-height:48px;border:1px solid #999;border-radius:6px;background:#fff}
 #tp-info{font-size:15px;line-height:1.5}
 #tp-map{height:280px}
}