/* Gridlock Holmes helpers: tooltips, "What's on this screen" panel, quick tour and the glossary page.
   The look follows the Bridge Vegas (VMS) dashboard's ux.css (tip, drawer, tour-hole, tour-card),
   using this dashboard's theme tokens from app.css so it works in the dark and light themes.
   Layers: Leaflet controls sit at z-index 1000, so everything here is above that. */

:root, :root[data-theme="dark"]{
  --tip-bg:rgba(16,10,27,.97); --tip-text:#f5f2f9; --tip-lead:#ffffff; --tip-border:var(--panel-border, #3d2c57);
  --tip-shadow:0 10px 28px rgba(0,0,0,.45);
  --ux-cyan:#00a7e1; --ux-scrim:rgba(3,5,15,.55); --ux-dim:rgba(3,5,15,.74);
  --ux-panel-a:#2b1e3f; --ux-panel-b:#1b1129;
}
:root[data-theme="light"]{
  --tip-bg:rgba(255,255,255,.98); --tip-text:#0b0c0c; --tip-lead:#392050; --tip-border:#b1b4b6;
  --tip-shadow:0 10px 28px rgba(11,12,12,.18);
  --ux-scrim:rgba(11,12,12,.35); --ux-dim:rgba(11,12,12,.6);
  --ux-panel-a:#ffffff; --ux-panel-b:#f3f2f1;
}

/* ---------------- tooltip (one shared element) ---------------- */
.gh-tip{
  position:fixed; z-index:3000; left:0; top:0; pointer-events:none; max-width:min(340px, calc(100vw - 16px));
  padding:7px 11px; border-radius:8px; font:500 13px/1.45 var(--font, "Manrope", "Segoe UI", sans-serif);
  color:var(--tip-text); background:var(--tip-bg); border:1px solid var(--tip-border); box-shadow:var(--tip-shadow);
  white-space:pre-line; overflow-wrap:break-word; opacity:0; transition:opacity .12s ease;
}
.gh-tip.show{ opacity:1; }
.gh-tip[hidden]{ display:none; }
.gh-tip-lead{ font-weight:800; color:var(--tip-lead); }
/* ECharts draws its own tooltip box; this class makes it look like the page tips */
.gh-tip.gh-tip-chart{ position:absolute; opacity:1 !important; background:var(--tip-bg) !important;
  border:1px solid var(--tip-border) !important; border-radius:8px !important; padding:7px 11px !important;
  box-shadow:var(--tip-shadow) !important; color:var(--tip-text) !important; white-space:normal !important; width:max-content; }
[data-help], [data-tip]{ cursor:help; }
a[data-help], button[data-help], a[data-tip], button[data-tip], label[data-help], select[data-help], input[data-help]{ cursor:pointer; }
[data-help][tabindex="0"]:focus-visible, [data-tip][tabindex="0"]:focus-visible{ outline:3px solid #ffdd00; outline-offset:2px; }

/* ---------------- "What's on this screen" side panel (VMS drawer) ---------------- */
.gh-scrim{ position:fixed; inset:0; z-index:2000; background:var(--ux-scrim); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.gh-scrim[hidden], .gh-panel[hidden]{ display:none; }
.gh-panel{
  position:fixed; z-index:2001; top:0; right:0; bottom:0; width:min(430px, 100vw); overflow-y:auto;
  padding:20px 22px 30px; color:var(--text); font-family:var(--font);
  background:linear-gradient(180deg, var(--ux-panel-a), var(--ux-panel-b)); border-left:1px solid var(--panel-border);
  box-shadow:-30px 0 60px rgba(0,0,0,.45); animation:ghDrawerIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes ghDrawerIn{ from{ transform:translateX(40px); opacity:0; } }
.gh-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.gh-kicker{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--link); }
.gh-panel h2{ margin:2px 0 0; font-size:24px; font-weight:800; }
.gh-panel h3{ margin:20px 0 8px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.gh-panel .gh-close{ flex:none; color:var(--text); border-color:var(--panel-border); }
.gh-panel ul{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:15px; line-height:1.5; }
.gh-panel li::marker{ color:var(--ux-cyan); }
.gh-hint{ margin:20px 0 0; font-size:13px; color:var(--text-dim); }
.gh-panel-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* ---------------- quick tour (VMS tour-hole + tour-card) ---------------- */
.gh-tour-shield{ position:fixed; inset:0; z-index:2499; background:transparent; }
.gh-tour-hole{
  position:fixed; z-index:2500; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 9999px var(--ux-dim), 0 0 0 2px rgba(0,167,225,.9), 0 0 30px rgba(0,167,225,.45);
  transition:left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.gh-tour-card{
  position:fixed; z-index:2501; padding:16px 18px 14px; border-radius:14px; color:var(--text); font-family:var(--font);
  background:linear-gradient(180deg, var(--ux-panel-a), var(--ux-panel-b)); border:1px solid rgba(0,167,225,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.55); transition:left .3s ease, top .3s ease;
}
.gh-tour-card h3{ margin:4px 0 6px; font-size:18px; font-weight:800; }
.gh-tour-card p{ margin:0; font-size:14px; line-height:1.5; color:var(--text-dim); }
.gh-tr-count{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--link); }
.gh-tr-actions{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.gh-tr-gap{ flex:1; }
.gh-tour-card .gh-tr-skip{ border-color:transparent; color:var(--text-dim); }

/* ---------------- glossary page (/help) ---------------- */
.gloss-search{ display:flex; flex-direction:column; gap:4px; min-width:min(360px, 100%); }
.gloss-search label{ font-size:13px; font-weight:700; color:var(--text-dim); }
.gloss-search input{ font:inherit; font-size:16px; padding:8px 10px; border-radius:4px; background:var(--panel); color:var(--text);
  border:2px solid var(--text-dim); min-height:44px; width:100%; }
.gloss-az{ display:flex; flex-wrap:wrap; gap:2px; padding:8px 10px; margin-bottom:8px; position:sticky; top:0; z-index:5; }
.gloss-az a, .gloss-az span{ min-width:32px; height:32px; display:inline-grid; place-items:center; border-radius:4px; font-weight:800; }
.gloss-az a{ color:var(--link); text-decoration:none; }
.gloss-az a:hover{ background:var(--hover); text-decoration:underline; }
.gloss-az span{ color:var(--text-dim); opacity:.45; }
.gloss-count{ margin:0 0 10px; font-size:13px; }
.gloss-group + .gloss-group{ margin-top:18px; }
.gloss-group[hidden], .gloss-term[hidden]{ display:none; }
.gloss-letter{ font-size:22px; color:var(--link); border-bottom:1px solid var(--line); padding-bottom:4px; scroll-margin-top:64px; }
.gloss dl{ margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:10px 22px; }
.gloss-term{ padding:10px 12px; border-radius:8px; border:1px solid transparent; scroll-margin-top:64px; }
.gloss-term:hover{ background:var(--hover); }
.gloss-term.is-target{ border-color:var(--ux-cyan); box-shadow:0 0 0 1px rgba(0,167,225,.35), 0 0 22px rgba(0,167,225,.2); }
.gloss-term dt{ font-weight:800; font-size:17px; }
.gloss-term dd{ margin:4px 0 0; }
.gloss-eg{ color:var(--text-dim); font-size:14px; }
.gloss-eg span{ font-weight:800; color:var(--text); }
.gloss-anchor{ font-size:14px; margin-left:4px; color:var(--text-dim); text-decoration:none; opacity:0; }
.gloss-term:hover .gloss-anchor, .gloss-anchor:focus-visible{ opacity:1; }
.screens{ margin-top:28px; }
.screen-card h3{ color:var(--link); }
.screen-card h4{ margin:12px 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.screen-card ul{ margin:0; padding-left:20px; display:grid; gap:4px; }

/* ---------------- phone + reduced motion ---------------- */
@media (max-width:760px){
  .gh-panel{ padding:16px 16px 28px; }
  .gh-tip{ font-size:14px; }
  .gloss-az{ overflow-x:auto; flex-wrap:nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .gh-tip, .gh-panel, .gh-tour-hole, .gh-tour-card{ transition:none !important; animation:none !important; }
}
@media print{
  .gh-tip, .gh-panel, .gh-scrim, .gh-tour-hole, .gh-tour-card, .gh-tour-shield{ display:none !important; }
}

/* Plain-English line under a map tooltip (maps.js GH.helpLine) */
.leaflet-tooltip .tip-help { display: block; max-width: 260px; white-space: normal; color: var(--text-dim); margin-top: 2px; }

/* "?" button on the stand-alone sign-in and enrol pages (their header is .auth-brand) */
.auth-help{ margin-left:auto; align-self:center; width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.75);
  background:transparent; color:#fff; font:800 18px/1 var(--font, inherit); cursor:pointer; flex:none; }
.auth-help:hover{ background:rgba(255,255,255,.14); }
.auth-help:focus-visible{ outline:3px solid #ffdd00; outline-offset:2px; }