/* ════════════════════════════════════════════════════════════════════════════════
   Georeferencer — workspace, capture modal, library, and the map-panel overlay list.
   Own file (not style.css) because it is loaded by two pages and is self-contained;
   it uses style.css's tokens and nothing else of it.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── Shared bits ─────────────────────────────────────────────────────────────── */
.gr-btn{border:1px solid var(--bd);background:#fff;color:var(--tp);font:500 12.5px var(--font);
  padding:7px 14px;border-radius:8px;cursor:pointer;transition:background .14s,border-color .14s,box-shadow .14s}
.gr-btn:hover:not(:disabled){background:var(--hover-bg);border-color:var(--accentL)}
.gr-btn:disabled{opacity:.45;cursor:not-allowed}
.gr-btn.gr-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.gr-btn.gr-primary:hover:not(:disabled){background:#5d715d;box-shadow:0 2px 8px rgba(107,127,107,.28)}
.gr-x{border:none;background:transparent;color:var(--tm);font-size:17px;line-height:1;width:28px;height:28px;
  border-radius:7px;cursor:pointer;flex:none;transition:background .14s,color .14s}
.gr-x:hover{background:var(--hover-bg);color:var(--tp)}
.gr-in{border:1px solid var(--bd);border-radius:8px;padding:7px 10px;font:400 13px var(--font);color:var(--tp);
  background:#fff;outline:none;transition:border-color .14s,box-shadow .14s}
.gr-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentS)}
.gr-in::placeholder{color:var(--tm)}

.gr-seg{display:inline-flex;border:1px solid var(--bd);border-radius:7px;overflow:hidden;background:#fff}
.gr-seg button{border:none;background:transparent;color:var(--ts);font:500 11.5px var(--font);padding:4px 10px;cursor:pointer;white-space:nowrap}
.gr-seg button+button{border-left:1px solid var(--bd)}
.gr-seg button.on{background:var(--accent);color:#fff;font-weight:600}
.gr-seg button:hover:not(.on){background:var(--hover-bg)}

.gr-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:4000;
  background:var(--tp);color:#fff;font:500 13px var(--font);padding:10px 18px;border-radius:10px;
  box-shadow:0 6px 26px rgba(0,0,0,.26);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none}
.gr-toast.in{opacity:1;transform:translate(-50%,0)}

/* ── Workspace ───────────────────────────────────────────────────────────────── */
body.gr-open{overflow:hidden}
.gr-root{position:fixed;inset:0;z-index:2600;background:var(--page);animation:gr-in .18s ease-out}
@keyframes gr-in{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}
.gr-shell{display:grid;grid-template-rows:52px 1fr auto;height:100%}

.gr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px;
  background:#fff;border-bottom:1px solid var(--bd)}
.gr-tl,.gr-tr{display:flex;align-items:center;gap:10px;min-width:0}
.gr-tl{flex:1}
.gr-badge{font:600 10px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:var(--accentS);padding:4px 9px;border-radius:999px;flex:none}
.gr-label{flex:1;max-width:460px;min-width:150px}
.gr-prov{font:400 11.5px var(--font);color:var(--tm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gr-acc{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:3px 11px;
  border-radius:8px;border:1px solid var(--bd);background:#fff;min-width:104px}
.gr-acc em{font:500 9.5px var(--font);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--tm)}
.gr-acc b{font:600 13.5px var(--font);color:var(--tp)}
.gr-acc-sub{font:400 10px var(--font);color:var(--tm)}
.gr-acc.good{border-color:#bcd0bc;background:#f2f6f2}.gr-acc.good b{color:#4a6b4a}
.gr-acc.ok{border-color:#ddd2b4;background:#faf7ee}.gr-acc.ok b{color:#8a7a4d}
.gr-acc.bad{border-color:#e0c0c0;background:#fbf3f3}.gr-acc.bad b{color:#9e6b6b}

.gr-vis{display:inline-flex;border:1px solid var(--bd);border-radius:7px;overflow:hidden;background:#fff}
.gr-vis button{border:none;background:transparent;color:var(--ts);font:500 11.5px var(--font);padding:5px 11px;cursor:pointer}
.gr-vis button+button{border-left:1px solid var(--bd)}
.gr-vis button.on{background:var(--tp);color:#fff;font-weight:600}

.gr-body{display:grid;grid-template-columns:50% 6px 1fr;min-height:0;background:var(--bd)}
.gr-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.gr-panehead{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;
  padding:0 10px;border-bottom:1px solid var(--bd);background:var(--sidebar-bg);flex:none}
.gr-ph-t{font:600 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--tm)}
.gr-tools{display:flex;align-items:center;gap:8px}
.gr-tools button{border:1px solid var(--bd);background:#fff;color:var(--ts);font:500 11px var(--font);
  padding:3px 9px;border-radius:6px;cursor:pointer}
.gr-tools button:hover{background:var(--hover-bg)}
.gr-chk{display:inline-flex;align-items:center;gap:5px;font:500 11px var(--font);color:var(--ts);cursor:pointer;white-space:nowrap}
.gr-chk input[type=checkbox]{accent-color:var(--accent);margin:0}
.gr-chk input[type=range]{width:82px;accent-color:var(--accent)}

.gr-grip{background:var(--bd);cursor:col-resize;position:relative}
.gr-grip:hover,.gr-grip:active{background:var(--accentL)}
.gr-grip::after{content:'';position:absolute;inset:0 -4px}

.gr-canvaswrap{position:relative;flex:1;min-height:0;overflow:hidden;
  background:repeating-conic-gradient(#f2f2f0 0% 25%,#fafaf9 0% 50%) 50%/16px 16px}
#gr_canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.gr-marks{position:absolute;inset:0;pointer-events:none}
.gr-loupe{position:absolute;width:180px;height:180px;border:2px solid #fff;border-radius:50%;
  box-shadow:0 3px 14px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.18);pointer-events:none;display:none;z-index:6;background:#fff}

/* Guide line from the cursor to the magnifier, for "Beside" mode. The loupe tracks the
   cursor exactly, but a shape that is always offset by the same amount reads as detached
   rather than attached — this is the line that says "these are the same point". */
.gr-loupelink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;z-index:5;overflow:visible}
.gr-loupelink line{stroke:rgba(220,50,50,.75);stroke-width:1.5;stroke-dasharray:4 3;stroke-linecap:round}
.gr-loupelink circle{fill:none;stroke:rgba(220,50,50,.95);stroke-width:1.5}
/* "On cursor": the crosshair in the loupe IS the pointer, so the OS cursor would be a
   second, slightly-offset crosshair — worse than none. */
.gr-root.gr-oncursor #gr_canvas{cursor:none}
.gr-loupemode{margin-left:-2px}
.gr-loupemode.gr-dim{opacity:.4;pointer-events:none}
.gr-mapwrap{position:relative;flex:1;min-height:0}
#gr_map{position:absolute;inset:0}

/* Control-point pins. Same visual language on both panes so #3 on the image reads as the
   same object as #3 on the map — that pairing IS the mental model of the tool. */
.gr-mark,.gr-mapmark{width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.34);
  display:flex;align-items:center;justify-content:center;color:#fff;font:700 10px var(--font)}
.gr-mark{position:absolute}
.gr-mark i,.gr-mapmark i{font-style:normal}
.gr-mark.pending{background:#c9822f;animation:gr-pulse 1.1s ease-in-out infinite}
.gr-mark.bad,.gr-mapmark.bad{background:var(--danger)}
.gr-mapmark{cursor:grab}
.gr-mapmark:active{cursor:grabbing}
@keyframes gr-pulse{0%,100%{box-shadow:0 1px 5px rgba(0,0,0,.34),0 0 0 0 rgba(201,130,47,.55)}
  50%{box-shadow:0 1px 5px rgba(0,0,0,.34),0 0 0 9px rgba(201,130,47,0)}}
.gr-cornermark{padding:3px 7px;border-radius:6px;background:var(--tp);color:#fff;font:700 10px var(--font);
  border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.35);cursor:grab}
.gr-cornermark i{font-style:normal}
.gr-root.gr-cornermode #gr_canvas{cursor:grab}

.gr-foot{background:#fff;border-top:1px solid var(--bd);padding:8px 14px 10px;display:grid;gap:7px}
.gr-hint{font:400 12px var(--font);color:var(--ts);min-height:15px}
.gr-hint.go{color:var(--accent);font-weight:500}
.gr-hint.bad{color:var(--danger);font-weight:500}
.gr-hint.warn{color:#8a7a4d}
.gr-pts{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.gr-empty{font:400 11.5px var(--font);color:var(--tm)}
.gr-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);border-radius:999px;
  padding:2px 4px 2px 3px;background:#fff;cursor:pointer;transition:border-color .14s,background .14s}
.gr-chip:hover{border-color:var(--accentL);background:var(--hover-bg)}
.gr-chip>i{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;
  font:700 9.5px var(--font);font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.gr-chip.bad>i{background:var(--danger)}
.gr-chip.pending>i{background:#c9822f}
.gr-chip-c{font:400 11px var(--font);color:var(--ts);font-variant-numeric:tabular-nums}
.gr-chip-r{font:600 10.5px var(--font);color:var(--tm);font-variant-numeric:tabular-nums}
.gr-chip.bad .gr-chip-r{color:var(--danger)}
.gr-chip-x{border:none;background:transparent;color:var(--tm);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:50%}
.gr-chip-x:hover{background:#f0e4e4;color:var(--danger)}
.gr-footr{display:flex;align-items:center;gap:10px}
.gr-coordbox{flex:1;display:flex}
.gr-coordbox .gr-in{flex:1;font-size:12px}
.gr-coordbox .gr-in:disabled{background:var(--page);color:var(--tm);border-style:dashed}
.gr-mode{display:inline-flex;border:1px solid var(--bd);border-radius:7px;overflow:hidden;background:#fff;flex:none}
.gr-mode button{border:none;background:transparent;color:var(--ts);font:500 11.5px var(--font);padding:5px 11px;cursor:pointer;white-space:nowrap}
.gr-mode button+button{border-left:1px solid var(--bd)}
.gr-mode button.on{background:var(--accentS);color:var(--accent);font-weight:600}

/* Below ~900px the two panes stack: the map keeps its own height so a control point can
   still be placed on a laptop in a split window. */
@media (max-width:900px){
  .gr-body{grid-template-columns:1fr!important;grid-template-rows:1fr 6px 1fr}
  .gr-grip{cursor:row-resize}
  .gr-top{flex-wrap:wrap;height:auto;padding:8px 12px}
  .gr-shell{grid-template-rows:auto 1fr auto}
  .gr-prov{display:none}
}

/* ── Capture modal ───────────────────────────────────────────────────────────── */
.gc-root{position:fixed;inset:0;z-index:2700;background:rgba(28,25,23,.42);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:26px;animation:gr-in .16s ease-out}
.gc-box{background:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.3);width:min(1080px,100%);
  height:min(760px,100%);display:grid;grid-template-rows:52px 1fr 54px;overflow:hidden}
.gc-head{display:flex;align-items:center;gap:14px;padding:0 12px 0 18px;border-bottom:1px solid var(--bd)}
.gc-head b{font:600 14px var(--font);white-space:nowrap}
.gc-tabs{display:flex;gap:2px;flex:1}
.gc-tabs button{border:none;background:transparent;color:var(--ts);font:500 12.5px var(--font);
  padding:6px 12px;border-radius:7px;cursor:pointer}
.gc-tabs button:hover{background:var(--hover-bg)}
.gc-tabs button.on{background:var(--accentS);color:var(--accent);font-weight:600}
.gc-body{display:grid;grid-template-columns:auto 1fr;min-height:0}
.gc-side{width:150px;border-right:1px solid var(--bd);background:var(--sidebar-bg);
  display:flex;flex-direction:column;min-height:0;padding:10px 8px}
.gc-side:empty{display:none}
.gc-body:has(.gc-side:empty){grid-template-columns:1fr}
.gc-sidecap{font:600 10px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--tm);padding:0 4px 6px}
.gc-pagenav{display:flex;align-items:center;gap:3px;margin-bottom:9px}
.gc-pagenav button{border:1px solid var(--bd);background:#fff;color:var(--ts);width:22px;height:24px;
  border-radius:6px;cursor:pointer;font-size:13px;line-height:1}
.gc-pagenav button:hover{background:var(--hover-bg)}
.gc-pagenav input{width:44px;border:1px solid var(--bd);border-radius:6px;padding:3px 4px;
  font:500 12px var(--font);text-align:center;outline:none}
.gc-of{font:400 10.5px var(--font);color:var(--tm);white-space:nowrap}
.gc-thumbs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.gc-thumb{position:relative;border:1px solid var(--bd);border-radius:6px;overflow:hidden;cursor:pointer;
  background:#fff;min-height:34px;transition:border-color .14s,box-shadow .14s}
.gc-thumb:hover{border-color:var(--accentL)}
.gc-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentS)}
.gc-thumb canvas{display:block;width:100%;height:auto}
.gc-thumb-n{position:absolute;left:3px;bottom:3px;background:rgba(28,25,23,.72);color:#fff;
  font:600 9.5px var(--font);padding:1px 5px;border-radius:4px}
.gc-main{overflow:auto;padding:14px;min-height:0;background:var(--page)}
.gc-loading,.gc-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  height:100%;color:var(--ts);font:400 13px var(--font);text-align:center;padding:20px}
.gc-none b{font:600 14px var(--font);color:var(--tp)}
.gc-none span{max-width:380px;line-height:1.55;color:var(--ts)}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gc-fig{border:1px solid var(--bd);border-radius:10px;background:#fff;padding:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .14s,box-shadow .14s}
.gc-fig:hover{border-color:var(--accentL)}
.gc-fig.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentS)}
.gc-fig canvas{max-width:100%;height:auto;border-radius:5px;background:#fff}
.gc-fig-m{font:500 10.5px var(--font);color:var(--tm);font-variant-numeric:tabular-nums}
.gc-croparea{position:relative;display:inline-block;line-height:0;touch-action:none;user-select:none;
  box-shadow:0 2px 12px rgba(0,0,0,.1);border-radius:4px;overflow:hidden}
#gc_cropimg{max-width:100%;height:auto;display:block;cursor:crosshair}
.gc-cropsel{position:absolute;border:2px solid var(--accent);background:rgba(107,127,107,.16);
  pointer-events:none;box-shadow:0 0 0 9999px rgba(28,25,23,.28)}
.gc-drop{border:2px dashed var(--bd);border-radius:12px;padding:38px 24px;text-align:center;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .16s,background .16s}
.gc-drop.over{border-color:var(--accent);background:var(--accentS)}
.gc-drop-i{font-size:32px;line-height:1}
.gc-drop b{font:600 14.5px var(--font)}
.gc-drop span{font:400 12.5px var(--font);color:var(--ts)}
.gc-drop-note{font-size:11.5px!important;color:var(--tm)!important;max-width:400px;line-height:1.5}
.gc-link{border:none;background:transparent;color:var(--accent);font:600 12.5px var(--font);
  cursor:pointer;padding:0;text-decoration:underline}
.gc-preview{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:7px}
.gc-prevshot{max-width:100%;max-height:280px;border:1px solid var(--bd);border-radius:8px;background:#fff}
.gc-prevmeta{font:500 11.5px var(--font);color:var(--tm)}
.gc-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;
  border-top:1px solid var(--bd);background:var(--sidebar-bg)}
.gc-hint{font:400 12px var(--font);color:var(--ts)}
.gc-hint.bad{color:var(--danger);font-weight:500}
.gc-actions{display:flex;gap:8px;flex:none}

/* ── Overlay list in the Map Explorer's Layers panel ─────────────────────────── */
.go-row{display:flex;align-items:center;gap:7px;padding:3px 2px;border-radius:6px;flex-wrap:wrap}
.go-row:hover{background:var(--hover-bg)}
.go-name{flex:1;min-width:0;font:400 12px var(--font);color:var(--tp);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go-name:hover{color:var(--accent);text-decoration:underline}
.go-vis{font:600 9px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--tm);
  background:var(--page);border:1px solid var(--bd);padding:1px 5px;border-radius:999px;flex:none}
.go-vis.pub{color:var(--accent);background:var(--accentS);border-color:var(--accentL)}
.go-by{font:400 10px var(--font);color:var(--tm);flex:none;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.go-b{border:none;background:transparent;color:var(--tm);cursor:pointer;font-size:13px;line-height:1;
  padding:2px 5px;border-radius:5px;flex:none}
.go-b:hover{background:var(--bd);color:var(--tp)}
.go-op{width:100%;accent-color:var(--accent);height:14px;margin:1px 0 3px}
.go-empty{font:400 11px var(--font);color:var(--tm);padding:5px 2px;line-height:1.45}

/* ── Library page (georef.html) ──────────────────────────────────────────────── */
.gl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.gl-head h2{font:600 21px var(--font);margin:0 0 4px;letter-spacing:-.02em}
.gl-head p{font:400 13px var(--font);color:var(--ts);margin:0;max-width:560px;line-height:1.5}
.gl-q{width:100%;max-width:440px;border:1px solid var(--bd);border-radius:9px;padding:9px 13px;
  font:400 13px var(--font);outline:none;margin-bottom:16px;background:#fff}
.gl-q:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentS)}
.gl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.gl-loading,.gl-empty{grid-column:1/-1;padding:34px;text-align:center;color:var(--tm);
  font:400 13px var(--font);background:#fff;border:1px solid var(--bd);border-radius:12px}
.gl-empty.bad{color:var(--danger)}
.gl-card{background:#fff;border:1px solid var(--bd);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s}
.gl-card:hover{border-color:var(--accentL);box-shadow:var(--shadow)}
.gl-thumb{height:150px;background:repeating-conic-gradient(#f2f2f0 0% 25%,#fafaf9 0% 50%) 50%/14px 14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--bd)}
.gl-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.gl-meta{padding:11px 13px 8px;display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.gl-meta b{font:600 13.5px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-sub{font:400 11.5px var(--font);color:var(--ts);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-sub2{font:400 11px var(--font);color:var(--tm)}
.gl-sub2 em{font-style:normal;font-weight:600}
.gl-sub2 em.pub{color:var(--accent)}
.gl-acts{display:flex;gap:2px;padding:6px 9px 9px;border-top:1px solid var(--page)}
.gl-a{border:none;background:transparent;color:var(--ts);font:500 11.5px var(--font);padding:5px 9px;
  border-radius:6px;cursor:pointer;text-decoration:none}
.gl-a:hover{background:var(--hover-bg);color:var(--tp)}
.gl-a.danger:hover{background:#faf0f0;color:var(--danger)}

/* The Georef sub-tab is an ACTION, not a view — it never takes the .active pill, so give it
   its own affordance or it reads as a permanently-unselected tab. */
.dsub.dsub-act{border-color:var(--accentL);color:var(--accent);font-weight:600;background:var(--accentS)}
.dsub.dsub-act:hover{background:var(--accent);color:#fff;border-color:var(--accent)}